/* ============================================================================
   机制比价 / 平台补贴 —— 页面专属样式
   ----------------------------------------------------------------------------
   ⚠️⚠️ 为什么单独一个文件、而不是塞进 `public/css/pages.css`（2026-09-23 定）：
     `pages.css` 是**多会话共用**文件。实测当天它被另一个会话**整体覆盖 5 次**，
     其中一次正好把我刚写好的样式冲掉（不报错、不冲突，`grep` 才发现内容没了）。
     页面专属样式留在共用文件里 ⇒ 每次改动都要承担"被覆盖"和"误推别人半成品"两种风险。
     ⇒ 本页样式**全部集中在这里**，与其他会话解耦：
        · 我只推自己的文件，不会把别人没做完的样式带上线；
        · 别人覆盖 pages.css 也冲不掉我的样式。
   ⚠️ 加载顺序：在 `index.html` 里放在**所有样式之后**（最后一条 link）——
      同特异性时后者胜，这样本页规则不会被 `pages.css` / `pages-schedule.css` 盖掉。
      ⚠️ 但 `.sf-card` 那条是**双类**（`.sf-card.pc-card`）：单类 `.pc-card` 特异性 0,1,0
         打不过 `.sf-card`（0,1,0 但更早）在别处的高特异性组合，双类最稳。
   ⚠️ 前缀 `.pc-` = pricing compare，与全站其他前缀不冲突（选前缀的原因见原注释）。
   ============================================================================ */

/* ── ⭐⭐ 警告一律用**红字 + 红色标记**，不用黄色、不用底色块（2026-09-23 乐哥定）──────
   乐哥原话：「我觉得这些有问题的提醒用红字吧，不要用黄字了，而且不要用这种黄框了，看着都不直观」
   ⚠️ 真因是**对比度**不是审美：warning 色 #F2A918 在白底上只有 ~2:1（可读线要 4.5:1），
      再叠一层浅黄底（#FEF5E7）就更糊 ⇒ "看不清"就是"不直观"。
      用 danger-strong #D93025（白底 ≈4.6:1）。
   ⚠️ 块的边界改用**左侧 3px 红竖条**表达，不再整块刷底色 ——
      同样醒目，但页面不会出现一片黄。
   ⛔ 别再引入第二套警告色；全页警告色只有下面这几处定义。 */
/* ==========================================================================
   机制比价（2026-09-23 乐哥需求）
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   对照矩阵（2026-09-23 第三版）—— **一行一个概念，左右逐行对齐**
   --------------------------------------------------------------------------
   乐哥：「你这个 UI 问题很大，每一行对应的位置都不一致。比如商品，我们就把商品放在
          同样的位置；到手价，我可能就放在同样的行里面，就不要来来回回的。」
   ⚠️⚠️ 为什么原来**必然**错位（不是样式没调好）：那时候是**两个各自独立的列**，
      列内自己往下堆字段 —— 我方 3 块、对方 6 块，行与行对不上。
      实测（1920 视口）「商品」表头 我方 y≈247 / 对方 y≈345，**差 98px**。
      靠调间距治不了本：再加一个字段就又错开。
   ⭐ 本矩阵用 **grid 三列**：概念名 | 我方 | 对方 ⇒ 对齐由**结构**保证。
   ⚠️ 格子顶部对齐（flex column）⇒ 同一行两边的输入框顶边相等。
   ⛔ 别退回"两个独立列各自堆"的写法：那是错位的结构性根因。
   ══════════════════════════════════════════════════════════════════════════ */
.pc-matrix {
  display: grid;
  /* 104px：容下最长的概念名「主推品件数」（5 字）+ 右侧的「?」按钮 + 两侧内边距，
     且 `white-space: nowrap` 保证**永不折行**（折行会让行高变化、与右侧控件错位）。 */
  grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pc-matrix__corner,
.pc-matrix__head {
  background: var(--color-surface-2);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  border-bottom: 1px solid var(--color-border);
}
/* ── 表头规格统一（2026-09-23 乐哥：「表头的字有些大有些小，颜色也有点奇奇怪怪的」）──
   ⚠️ 根因：同层级的东西用了不同规格 —— 列头 14px 深色、行标签 12px 灰色、明细表头 12px 灰色，
      三套字号两种颜色混在一起，看着就没规矩。
   ⭐ 定成**两档**，各自只用一套：
      · **列头**（我方机制 / 对方机制）：13px + semibold + 正常色 —— 它是列的身份，要立得住
      · **行标签**（概念名 / 明细表头）：12px + muted + 常规字重 —— 它是配角，不该抢内容
   ⭐ 两侧用**颜色区分**（乐哥要求）：我方=主色，对方=中性。
      做法克制：只在列头用色 + 各加一条 2px 底边色条，不动内容区底色
      （内容区染色会与「我方只读、对方可填」的控件底色打架，反而更乱）。 */
/* ⚠️ 左上角格子归到**行标签**档（不是列头档）—— 它竖着对应的是概念名那一列，
   跟着列头走会变得和我方/对方一样重，反而混淆层级。 */
.pc-matrix__corner {
  font-size: var(--font-size-xs);      /* 12px = 与概念名、明细表头同档 */
  font-weight: var(--font-weight-regular);
  color: var(--color-muted);
}
.pc-matrix__head {
  font-size: var(--font-size-sm);      /* 14px = 列头档（唯一比行标签大的地方） */
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  letter-spacing: .02em;
  text-align: center;
}
/* 左右两侧的色条：我方主色 / 对方中性 —— 让"哪边是哪边"一眼可辨 */
.pc-matrix__head { box-shadow: inset 0 -2px 0 var(--color-primary-500); }
.pc-matrix__head--theirs { box-shadow: inset 0 -2px 0 var(--color-border); }
/* 竖分隔线挂**显式类名**（我方 6 个格子、对方 6 个格子各自加类）。
   ⚠️ 不用 `:last-child` / `nth-child` 数学 —— 本项目实测过：漏一个收尾标签就会让这类
      选择器**静默不匹配**，分隔线整体消失且不报错（排查很久）。显式类名不受结构变化影响。 */
/* ⚠️⚠️ 分隔线用"**两边都有 1px 边框、我方透明**"的写法，而不是"只有对方有边框"：
   否则对方那格的内容宽度比我方窄 1px ⇒ 里面明细表宽 717 vs 718 ⇒
   「数量/标价」列的 x 差 1px（视觉几乎看不出，但"逐行对齐"的需求上不该留误差）。
   实测：改前 484/483，改后两列完全相等。 */
.pc-matrix__head,
.pc-matrix__cell { border-left: 1px solid transparent; }
.pc-matrix__head--theirs,
.pc-matrix__cell--theirs { border-left-color: var(--color-border); }

.pc-matrix__lbl {
  padding: var(--space-3) var(--space-2);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  color: var(--color-muted);
}
/* 单位跟概念名**同行**（小一号、弱色）—— 另起一行会让标签变两行、行高变高，
   与右侧输入框错位。 */
.pc-matrix__unit { font-size: 10px; color: var(--color-muted); margin-left: 2px; }

/* ── 「?」说明按钮 + 浮层（2026-09-23 乐哥：「这些注释显得好乱，能不能放在 ? 里，
      点击之后显示出来？这样界面会比较干净」）──────────────────────────────────
   ⚠️ 只收**静态说明**。动态提示（未维护补贴 / 假破价警告 / 还没勾主推品）**不在此列**，
      它们仍以 `.pc-field__hint--warn` 常驻显示 —— 藏起来会让人漏掉该处理的事。
   ⚠️ 有问号的格子加 `.pc-has-tip`，靠 `padding-top` 让出顶部一条给问号 ——
      不能用绝对定位压住内容：内容是输入框（数字右对齐会顶到右边）与表格，
      直接盖上去会遮住数字与「删除」按钮（实测过）。 */
/* ⚠️ 2026-09-23 乐哥：「能不能把 ? 放在表头（概念名）旁边，最左边好像加个?」
   ⇒ 问号从"格子右上角"移到**概念名后面**：一行只有一个（说明里用「我方：/ 对方：」分段），
      比原来一行两个更好认，也把格子内的顶部空间还给了控件。
   ⚠️ 概念名加 `nowrap`：折行会让这一格变高、与同行右侧控件错开（本项目对齐问题的老来源）。 */
.pc-matrix__lbl {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
}
/* 行标签统一规格：12px + muted（与明细表头同档） */
.pc-matrix__lbl { font-size: var(--font-size-xs); color: var(--color-muted); }
.pc-tip {
  position: static;
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.pc-tip:hover, .pc-tip:focus-visible {
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
  outline: none;
}
.pc-tip.is-open {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: #fff;
}

/* 浮层：**必须是 fixed** —— `.pc-matrix` 有 `overflow: hidden`（为圆角），
   普通 absolute 浮层会被**裁掉**（本项目在别的浮层上踩过这个坑）。 */
.pc-tip-pop {
  position: fixed;
  z-index: 900;
  max-width: 320px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg));
  font-size: var(--font-size-xs);
  line-height: 1.7;
  color: var(--color-fg-2);
  /* ⚠️ 必须 pre-line：说明里用 \n 分「我方：/ 对方：」两段，
     默认会折成一坨（实测过）。 */
  white-space: pre-line;
}
.pc-tip-pop[hidden] { display: none; }
/* 小三角：指向被点的那颗问号 */
.pc-tip-pop::before {
  content: '';
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
}

.pc-matrix__cell {
  min-width: 0;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: flex-start;
}
/* 最后一行不画底线（否则与外框底边叠成双线） */
.pc-matrix > div:nth-last-child(-n+3) { border-bottom: 0; }

/* 矩阵里的明细表：**列宽写死一致** ⇒ 数量/标价/主推三列左右完全对齐。
   ⚠️ 必须 `table-layout: fixed` —— 否则列宽由内容决定（我方商品名长、对方是输入框）
      ⇒ 两个表的列 x 不同，看着还是"错位"（乐哥截图里除了行错位、列也错位）。 */
.pc-matrix__tbl { table-layout: fixed; }
/* ⚠️ 表头**不许换行** —— 实测踩到：对方表头多了一句说明文字导致折行，
   表头比我方高 20px ⇒ 整张表往下偏 20px，看着就是"商品没放在同一位置"
   （行高其实完全一样 69/69，偏差全在表头）。⇒ nowrap 兜住同类问题。 */
.pc-matrix__tbl thead th { white-space: nowrap; }
.pc-matrix__tbl .pc-col-qty { width: 62px; }
.pc-matrix__tbl .pc-col-price { width: 86px; }
.pc-matrix__tbl .pc-col-anchor { width: 52px; }
.pc-matrix__tbl .pc-col-del { width: 34px; }

/* 只读的静态值（「我方定价＝不含平台补贴价」这类）—— 虚线边框 + 浅底，
   一眼看出"这是结论、不用填"，与旁边真正可填的输入框区分开。 */
.pc-static {
  /* ⚠️⚠️ 高度必须**与框架 `.input` 逐像素一致**（44px）——
      乐哥：「需要输入内容的输入框高度，跟自动带出来不需要输的高度都不一样」（实测差 10px）。
      根因：我曾用 `var(--control-height, 34px)`，而**这个令牌并不存在** ⇒ 一直走兜底 34px。
      ⇒ 直接对齐 `components.css` 的 `.input`：height / padding / border / 圆角 / 字号**全部同值**。
      ⚠️ 别再引入自造令牌；框架值变了也要跟着改（这里写了来源，便于日后核对）。 */
  height: 44px;                        /* = components.css 的 .input */
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-fg);
  font-size: var(--font-size-base);    /* = .input 的 var(--font-size-base) */
}
.pc-static--empty { color: var(--color-muted); }

/* 二选一（对方报价是「不含平台补贴价」还是「含平台补贴价」）—— 与同行的输入框等高，视觉上同一行 */
.pc-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  height: 44px;   /* 同 .pc-static：对齐框架 .input */
}
.pc-radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-sm);
  color: var(--color-fg);
  cursor: pointer;
}
.pc-radio span { font-size: var(--font-size-xs); color: var(--color-muted); }

/* ⚠️⚠️ 桌面规则必须在**同处**写移动端覆盖 —— 本项目在媒体查询上踩过两次：
   带父选择器的桌面规则不会因媒体查询而失效，只写桌面规则会让手机端挤成一团。
   手机端塞不下「概念名 + 两列」⇒ 概念名改成**整行**标题，下面仍是左右两列（对齐不变）。 */
@media (max-width: 900px) {
  .pc-matrix__corner { display: none; }
  .pc-matrix__lbl {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-border);
  }
  .pc-matrix__cell { padding: var(--space-3) var(--space-2); }
}
/* 字段网格：两列布局。
   ⚠️ `min-height` 给 label 是**对齐的关键** —— 两列的 label 文字长短不一（有的还带说明），
      不给等高的话同一行两个输入框会错开几个像素（截图量出来过）。 */
.pc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .pc-grid { grid-template-columns: minmax(0, 1fr); }
}
.pc-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pc-field .sf-label {
  display: flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-field__hint {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  line-height: 1.5;
}

/* ⭐ 数字输入框一律**右对齐 + 等宽数字** —— 上下几行的金额小数点才会对齐。
   （乐哥反馈"价格的数字没对齐"就是这里：左对齐时位数不同的数字参差不齐） */
.input.is-num,
.pc-table input.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ⚠️ 作为矩阵里的一格时与外框的输入框**顶部对齐**：原来带 `margin-top: var(--space-3)`
   （那是"两个独立列"时代的段间距）⇒ 实测与右侧输入框的顶边差 12px，看着就是没对齐。
   现在改成与输入框**等高、内容垂直居中**，顶边自然齐平。 */
.pc-subsidy {
  height: 44px;                        /* 同 .pc-static：对齐框架 .input */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  font-size: var(--font-size-base);
  color: var(--color-fg-2);
  line-height: 1.3;
}
.pc-subsidy b { color: var(--color-primary-500); font-variant-numeric: tabular-nums; }
/* ⚠️ 补贴为 0 时不要用品牌蓝 —— 0 元不是"正面信息"，蓝色会让人以为"有补贴" */
.pc-subsidy.is-zero b { color: var(--color-muted); }
/* ⚠️ 用 danger-strong（#D93025）而不是 warning（#F2A918）：后者在白底上对比度只有 ~2:1，
   远低于可读线 —— 这正是乐哥说的"看着都不直观"。 */
/* ⚠️ `.pc-subsidy__miss`（未维护补贴的商品名）已于 2026-09-23 删除 ——
   合并「价格」行后，未维护提示移到格子下方（`.pc-field__hint--warn`，
   红字 + 常驻，符合"有问题的提醒用红字"的规则）。JS 里已零引用，死规则不留。 */

/* ⭐ 页面宽度：**唯一来源是 app.js 的 WIDTH_TIER 档位**（本页登记 `table`，
   现行内容区 **1440**；2026-09-28 放宽前为 1296）。
   --------------------------------------------------------------------------
   乐哥 2026-09-23 两轮（方向相反，以第二轮为准）：
     · 第一轮「这个页面的 UI 我们做宽一点吧，不要做这么窄了」⇒ 当时放成全宽（实测 1601px）
     · 第二轮「**不要拉这么宽了，拉这么宽确实很空**，就按照之前**编辑达人信息**的那个宽度吧」
       ⇒ 登记 `pricingCompare: 'narrow'`（与「编辑达人」同档），卡片回到 **1080px**（实测与编辑达人差 0px）
     · 第三轮（定稿）「**这个列宽稍微宽一点**吧，就不用一直按照**档案列表**那么窄」
       ⇒ 改登记 `pricingCompare: 'table'`（内容区 **1296**）。
          ⭐ 这其实才是本页按 layout.css 判据**该在的档**（「主体是不是表格」—— 本页是两个明细表并排）。
          ⚠️ 不再自造中间宽度：系统刻意只有两档（避免同一身份多种宽度）。
   ⚠️⚠️ **这一行的作用不是"不限宽"，而是"让卡片撑满外层容器的内容区"** ——
      我第一次改这版时把它当成"解除限宽"删掉了，结果卡片被 `.sf-card` 自带的
      `--form-max-width`(当时 1120) 压住 ⇒ 宽度变成**两个来源**（`.page--narrow` 的 1144 与 1120 取小），
      数值上**恰好**还是 1080（所以肉眼看不出来），但档位一改就不会跟着变了 —— 这种"巧合相等"
      正是本项目反复踩的坑（另见「我的报销」页两侧差 40px 那次）。⇒ 保留它，让档位说了算。
      ⭐ 2026-09-28 起：`--form-max-width` 已同步放宽到 1280（与 narrow 档内容一致），
         但**这一行仍必须保留** —— table 档内容 1440 > 1280，没有它卡片会被令牌压回 1280（正好差 160）。
   ⚠️ 必须写**两个类**（`.sf-card.pc-card`）：`pages-schedule.css` 在 `pages.css` 之后加载，
      同特异性时后者胜 ⇒ 单个 `.pc-card` 会被 `.sf-card` 静默盖掉（实测踩过）。 */
.sf-card.pc-card { max-width: none; }

/* ── 明细表：行距/列距放宽（乐哥：「数量和价格的 UI 优化一下，现在看着太挤太密了」）── */
.pc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--space-3);
}
.pc-table th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
  text-align: left;
  padding: 0 var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
}
.pc-table td {
  /* 行高从 space-2 放宽到 space-3 —— 输入框 44px 高，贴太紧就"密" */
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: top;
}
/* ⭐ 2026-09-25：**隔行浅底（斑马纹）已按乐哥要求去掉**（全站统一，见 table.css 的汇总清单）。
   ▸ 原意：明细行多时（3~6 行）靠浅底区分，比只靠线更容易"读行"。
   ▸ 现在全站无斑马纹 ⇒ 本页靠**行分隔线**（上方 td 的 border-bottom）区分，与全站一致。
   ⛔ 原规则已删除（保留便于回溯）：
        .pc-table tbody tr:nth-child(even) td { background: var(--color-surface-2); }
        .pc-table tbody tr:nth-child(even) td:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
        .pc-table tbody tr:nth-child(even) td:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
      后两条是给"浅底"配的圆角（浅底没了，圆角也无意义）—— 一并删除，避免留下无主的圆角声明。 */
.pc-table tr:last-child td { border-bottom: 0; }
.pc-table th:last-child, .pc-table td:last-child { padding-right: 0; }
.pc-table input.input { width: 100%; }
.pc-table th.is-num, .pc-table td.is-num { text-align: right; }
.pc-table th.is-center, .pc-table td.is-center { text-align: center; }
.pc-table td.is-num, .pc-table--ro td.is-num { font-variant-numeric: tabular-nums; color: var(--color-fg-2); }
/* ⚠️⚠️ 列宽**只在 `.pc-matrix__tbl` 那一处定义**（见本文件上面的"对照矩阵"段）——
   原来这里还有一套 `.pc-table .pc-col-*`（96/128/64/44），与矩阵那套（62/86/52/34）
   特异性相同、**同一文件里两套值**，写在后面的这套胜出 ⇒ 实测量到的是 96/128/64/44，
   我声明的宽度根本没生效。⇒ 删除，保持**一处维护**（两处必然漂移，本项目铁律）。 */

/* 商品单元格：缩略图 + 名称上下排（乐哥：「把对应的商品图片也都带出来，这样更直观」） */
.pc-prod { display: flex; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.pc-prod__img {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
}
.pc-prod__img--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted);
}
.pc-prod__main { min-width: 0; flex: 1; }
.pc-prod__name { color: var(--color-fg); font-size: var(--font-size-sm); line-height: 1.5; }
.pc-prod__meta { font-size: var(--font-size-xs); color: var(--color-muted); margin-top: 2px; }

/* ── 机制搜索框 + 候选面板（2026-09-23 乐哥：「做成商品搜索框的形式」）──────────
   ⚠️ 面板要**绝对定位浮在下面**（不推开内容）—— 否则每次输入都让整页跳动。
   ⚠️ 必须有 max-height + 滚动：34 个机制全列出来会盖住半屏。 */
.pc-search { position: relative; }
.pc-search__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  margin-top: 2px;
  max-height: 264px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md));
  padding: var(--space-1) 0;
}
.pc-search__count {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: 2px;
}
.pc-search__empty { padding: var(--space-3); font-size: var(--font-size-sm); color: var(--color-muted); }
.pc-search__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-family: inherit;
  color: var(--color-fg);
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1.5;
}
.pc-search__item:hover { background: var(--color-surface-2); }
.pc-search__item.is-cur { color: var(--color-primary-500); font-weight: var(--font-weight-medium); }

/* 待核对的明细行（模糊匹配不确定 / 未匹配）—— 标出来让用户扫一眼就能看到。
   ⚠️⚠️ 2026-09-23 乐哥：「有问题的提醒用红字吧，不要黄字，也不要用这种黄框了，看着都不直观」
      ⇒ 原来**整行刷浅黄底**，改成 **① 行首左侧红竖条 + ② 该行商品输入框红边**。
      为什么更好：整行刷色是"这片区域有点黄"，指不出到底哪格要改；
      红边框是"**就是这个框**要你处理"，一眼落到具体控件上。
      ⚠️ 若某行同时是待核对 + 已确认锚点：锚点规则（`.pc-row--anchor td:first-child`，
        特异性更高）的蓝条会胜出 —— 但该行仍有**红边框 + 行内红字**，信息不丢。 */
.pc-table tr.pc-row--check td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.pc-table tr.pc-row--check .pc-ti[data-k="name"] { border-color: var(--color-danger); }
/* 被勾为主推品的那一行 —— 高亮，因为它是单件价的**分母**，必须一眼看到选了谁。
   ⚠️ 用主色淡底 + 左侧竖条：与"待核对"的黄色区分开（两种状态可能同时存在）。 */
.pc-table tr.pc-row--anchor td { background: var(--color-primary-50)); }
.pc-table tr.pc-row--anchor td:first-child { box-shadow: inset 3px 0 0 var(--color-primary-500); }
.pc-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
}
.pc-hint__txt { font-size: var(--font-size-xs); color: var(--color-danger-strong); font-weight: var(--font-weight-medium); }
.pc-cand {
  font-size: var(--font-size-xs);
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--color-border-soft);
  background: transparent;
  color: var(--color-fg-2);
  cursor: pointer;
  font-family: inherit;
}
.pc-cand:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }

/* ── 对方机制文案（粘贴 + 自动识别）── */
.pc-paste { margin-top: var(--space-3); }.pc-paste__row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.pc-paste__row .input { flex: 1; min-width: 0; }
.pc-paste__row .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .pc-paste__row { flex-wrap: wrap; }
  .pc-paste__row .btn { width: 100%; justify-content: center; }
}
.pc-parse-note {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  background: var(--color-surface-2);
  color: var(--color-fg-2);
}
/* 识别有问题的提示块：**去掉黄底**（乐哥："不要用这种黄框"），
   改成白底 + 左侧红竖条 + 红字 —— 块的边界靠那条红竖线表达，比整块刷黄干净得多。 */
.pc-parse-note--warn {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--color-danger);
  color: var(--color-danger-strong);
}

/* ── 平台补贴维护：本页底部**可展开区块**（不再占顶部 Tab）──────────────────────
   ⚠️ 乐哥 2026-09-23：「还有一个『平台补贴』的 tab，有点多余。」
      处置 = 从 Tab 改成"默认收起的区块"，**不是删除** ——
      补贴是「含平台补贴价」口径的唯一数据来源，也是"平台补贴不算我方破价"的依据。
      做成收起态 ⇒ 页面主线清爽（满足"多余"的观感），能力不丢。 */
.pc-sub-panel { margin-top: var(--space-4); }
.pc-sub-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
}
.pc-sub-panel__head:hover { background: var(--color-surface-2); }
.pc-sub-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  flex: none;
}
.pc-sub-panel__desc {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-sub-panel__caret { margin-left: auto; flex: none; font-size: var(--font-size-xs); color: var(--color-primary-500); }
.pc-sub-panel__inner { padding: 0 var(--space-4) var(--space-4); }
@media (max-width: 768px) {
  .pc-sub-panel__desc { display: none; }
}

/* 补贴来源说明（"取 X 平台那一档"）—— 弱化色，不与金额抢眼 */
/* ⚠️ `.pc-subsidy__src`（块内的"取 X 那一档"）已于 2026-09-23 删除 ——
   合并后子字段只有约 260px，这句放里面会折行 ⇒ 移到格子里、作为独立 hint。
   注意上面那条说明"为什么删"的注释（`.pc-subsidy__src` 也提了一嘴）保持一致。 */
/* ⚠️ 这里**不能**加左侧竖条 / 左内边距：本页是"一行一个概念"的对照矩阵，
   任何一边的内容左移都会让两格错位（这是本页反复踩过的对齐问题）。
   ⇒ 只用红字 + 加粗表达"这条要处理"。 */
.pc-field__hint--warn { color: var(--color-danger-strong); font-weight: var(--font-weight-medium); }

.pc-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  background: var(--color-primary-50);
  color: var(--color-primary-500);
}
.pc-tag--gift { background: var(--color-surface-2); color: var(--color-muted); }
/* ── 对比口径：卡片式两列（2026-09-23 乐哥：「下面这块的展示感觉不直观」）──────
   ⚠️ 实测病根（改前）：两个选项各 623px 宽、**只有 21px 高**，字号 14px + 常规字重
      —— 与正文**完全同规格** ⇒ 整块就是两行长句子，没有层级、扫不出来；
      「含赠品按标价折算」还在两个选项里**各写了一遍**（纯重复噪音）；
      选中态只有一个 15px 圆点，两个选项看上去一模一样。
   ⇒ 现在：短标题（semibold）+「补贴前/后」徽标 + **独立一行**的说明；
      选中项 = 主色描边 + 淡底 + 标题变主色 ⇒ 一眼看出选了哪个。
   ⚠️ 旧的 `.pc-check` / `.pc-check--inline` 已删 —— 它们只服务这个单选，
      改版后全站零引用（死规则留着会让人以为还有第二套在用）。 */
.pc-caliber {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}
.pc-caliber__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.pc-caliber__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
}
.pc-caliber__note { font-size: var(--font-size-xs); color: var(--color-muted); line-height: 1.5; }
.pc-caliber__opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
/* ⚠️ 移动端必须落成一列 —— 本项目在媒体查询上踩过两次（桌面规则带父选择器时不随媒体查询失效） */
@media (max-width: 900px) {
  .pc-caliber__opts { grid-template-columns: minmax(0, 1fr); }
}
.pc-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}
.pc-opt:hover { border-color: var(--color-primary-300)); }
.pc-opt.is-on {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50));
  /* 描边加粗一格：只用颜色区分，色弱/低分屏看不出来 */
  box-shadow: inset 0 0 0 1px var(--color-primary-500);
}
.pc-opt > input[type="radio"] { flex: none; margin-top: 3px; }
.pc-opt__body { min-width: 0; }
.pc-opt__t {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}
.pc-opt.is-on .pc-opt__t { color: var(--color-primary-600)); }
.pc-opt__badge {
  font-style: normal;
  font-size: 10px;
  font-weight: var(--font-weight-regular);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-muted);
  white-space: nowrap;
}
.pc-opt.is-on .pc-opt__badge {
  background: var(--color-primary-100));
  color: var(--color-primary-600));
}
/* 说明**单独一行**（原来跟标题挤在同一行 ⇒ 623px 长句子，眼睛没法扫） */
.pc-opt__d {
  display: block;
  margin-top: 3px;
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
  line-height: 1.5;
}
/* ── 结果区：结论 + 大数字（hero）────────────────────────────────────────────
   ⚠️⚠️ 重做理由（2026-09-23 乐哥：「整个对比的方式看着一点都不清晰」）：
      实测量过，原来「结论 banner / 指标标签 / 说明文字」**全是 14px**，
      三个口径又是同构的平行块 ⇒ 整块是文字流，看不出哪条是结论。
      ⇒ 现在按重要性分四层：hero（28px 大数字）→ 对照表 → 提示 → 话术。 */
.pc-hero {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface-2);
}
/* 结论条：整块顶部一条色带，颜色跟着"谁更优"走 */
.pc-hero--ours { border-color: var(--color-success); background: var(--color-success-bg)); }
.pc-hero--theirs { border-color: var(--color-danger); background: var(--color-danger-bg)); }
.pc-hero__verdict {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  margin-bottom: var(--space-3);
}
.pc-hero--ours .pc-hero__verdict { color: var(--color-success); }
.pc-hero--theirs .pc-hero__verdict { color: var(--color-danger); }
.pc-hero--same .pc-hero__verdict { color: var(--color-fg-2); }
.pc-hero__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
}
.pc-hero__side {
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}
.pc-hero__who { font-size: var(--font-size-xs); color: var(--color-muted); }
/* ⭐ 大数字：这是"一眼看清"的关键，必须显著大于其它文字 */
.pc-hero__val {
  font-size: 28px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--color-fg);
}
.pc-hero__unit { font-size: var(--font-size-xs); color: var(--color-muted); }
/* 大数字下面标出"按哪个品折算"（2026-09-23 乐哥：「这个折后单价是哪个品的折后单价？」）
   ⚠️ 必须有这一行：光一个 ¥158.86，用户对不上 ¥298 那个标价 ⇒ 根本无从判断这个数是什么。 */
.pc-hero__anchor { font-size: 11px; color: var(--color-muted); margin-top: 2px; line-height: 1.4; }

/* ── 折算过程（2026-09-23 乐哥：「这里面的整体规则，我觉得不清晰、不直观」）────────
   ⚠️ 为什么要**常驻显示**而不是收进「?」：这一块解释的是**结论本身怎么来的**
      （158.86 与 298 / 1499 的关系），不是"怎么用这个功能"的使用说明 ——
      用户看不懂结论时不会去点问号，直接把每一步的数字摆出来才叫说清。
   ⚠️ 放在 hero 内、大数字正下方：困惑点就在那儿，解释要贴着它。
   ⚠️ 字号小、色弱、虚线分隔 —— 不与大数字抢视觉，但随时可读。 */
.pc-hero__calc {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  font-size: var(--font-size-xs);
  line-height: 1.75;
  color: var(--color-fg-2);
  text-align: left;
}
.pc-hero__calc-t {
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  margin-bottom: 2px;
}
.pc-hero__calc-note { color: var(--color-muted); margin-bottom: var(--space-1); }
.pc-hero__calc-row { display: flex; gap: var(--space-2); }
/* 等宽数字：两行的数字要能上下对齐（本项目在金额列上定过这条） */
.pc-hero__calc-fml { min-width: 0; font-variant-numeric: tabular-nums; }
.pc-hero__calc-who { flex: none; width: 28px; color: var(--color-muted); }
.pc-hero__calc b { color: var(--color-fg); font-weight: var(--font-weight-medium); }
/* 便宜绿 / 贵红（与"我方/对方"两栏各自对应） */
.pc-hero__side.is-good { border-color: var(--color-success); }
.pc-hero__side.is-good .pc-hero__val { color: var(--color-success); }
.pc-hero__side.is-bad { border-color: var(--color-danger); }
.pc-hero__side.is-bad .pc-hero__val { color: var(--color-danger); }
.pc-hero__mid { text-align: center; min-width: 96px; }
.pc-hero__diff {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  font-variant-numeric: tabular-nums;
}
.pc-hero__rate { font-size: var(--font-size-xs); color: var(--color-muted); }
.pc-hero__caliber {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-align: center;
}
@media (max-width: 640px) {
  /* 窄屏：大数字缩一点，但保持"两侧对照"的结构（不要竖排成三行，否则又变文字流） */
  .pc-hero__val { font-size: 22px; }
  .pc-hero__row { gap: var(--space-2); }
  .pc-hero__mid { min-width: 64px; }
}

/* ── 逐项对照表（我方 / 对方 / 差）────────────────────────────────────────────
   ⭐ 把"两边对照"交给**表格结构**，而不是塞进"我方 X 对方 Y"的一句话里。
   ⚠️ 主口径行高亮（.pc-cmp__main）、参考项弱化（.pc-cmp__ref）——
      这样主次**看结构就分得出**，不必读说明文字。 */
.pc-cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.pc-cmp th {
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--font-size-xs);
}
.pc-cmp th.is-num { text-align: right; }
.pc-cmp td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-fg);
  vertical-align: top;
}
.pc-cmp tr:last-child td, .pc-cmp tr:last-child th { border-bottom: 0; }
.pc-cmp th:last-child, .pc-cmp td:last-child { padding-right: 0; }
.pc-cmp td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.pc-cmp__hint { font-size: 11px; color: var(--color-muted); margin-top: 2px; font-weight: var(--font-weight-regular); }
.pc-cmp__diff { font-size: var(--font-size-xs); color: var(--color-fg-2); white-space: nowrap; }
.pc-cmp__diff.is-dim { color: var(--color-muted); }
/* 主口径行：高亮 + 左侧主色竖条 ⇒ 一眼看出"定结论的是这行" */
.pc-cmp__main th, .pc-cmp__main td { background: var(--color-primary-50)); }
.pc-cmp__main th:first-child {
  border-left: 3px solid var(--color-primary-500);
  padding-left: var(--space-3);
}
.pc-cmp__star { color: var(--color-primary-500); }
/* 口径徽标（补贴前 / 补贴后）—— 让两行口径一眼可辨，不用去读长标题 */
.pc-cmp__badge {
  font-style: normal;
  font-size: 10px;
  font-weight: var(--font-weight-regular);
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-muted);
  white-space: nowrap;
}
.pc-cmp__main .pc-cmp__badge { background: var(--color-primary-100)); color: var(--color-primary-600)); }
/* 参考项：弱化（但不隐藏 —— 信息要保留，只是不能当结论） */
.pc-cmp__ref th, .pc-cmp__ref td { opacity: .62; }
.pc-cmp__sep th, .pc-cmp__sep td { border-top: 1px solid var(--color-border); }
/* 数值语义色：与 hero 一致（便宜绿、贵红） */
.pc-cmp td.is-good { color: var(--color-success); }
.pc-cmp td.is-bad { color: var(--color-danger); }

/* ── 提示条（追平建议 / 口径警告）—— 辅助位，不抢结论的视觉重量 ── */
.pc-callout {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  background: var(--color-surface-2);
  color: var(--color-fg-2);
}
.pc-callout__k { flex: none; font-weight: var(--font-weight-medium); color: var(--color-fg); }
.pc-callout--action { background: var(--color-primary-50)); }
.pc-callout--action .pc-callout__k { color: var(--color-primary-500); }
/* 结果区的口径提示：同样**去掉黄底**，改白底 + 左侧红竖条 + 红字。 */
.pc-callout--warn {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--color-danger);
  color: var(--color-danger-strong);
}
.pc-callout--warn .pc-callout__k { color: var(--color-danger-strong); }

/* ── 「价格」行：到手价 + 平台补贴 **并排**（2026-09-23 乐哥：「到手价跟平台补贴
      是不是可以放在一起啊？」）────────────────────────────────────────────
   ⚠️ 为什么合并：两者都是"钱"、且直接相关（含平台补贴价 = 到手价 − 平台补贴）；
      原来是**上下两行**（实测到手价 69px + 平台补贴 99px = 168px），横向占满、纵向留空，
      既费高度又显得空。合并成一行内两个并排子字段 ⇒ 省约 90px。
   ⚠️ 子字段必须**各自带小标签**：合并后概念列只有一个「价格」，
      而两边输入框长得一样 —— 不标就分不清哪个是到手价、哪个是补贴。
   ⚠️ 我方补贴是只读块、对方是输入框：形态不同，靠标签 + 只读底色区分（不靠位置）。 */
.pc-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) {
  .pc-duo { grid-template-columns: minmax(0, 1fr); }
}
.pc-duo__f { min-width: 0; }
.pc-duo__k {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-muted);
  margin-bottom: 3px;
  white-space: nowrap;
}
/* 子字段里的控件保持 44px（对齐框架 .input）—— 见各自定义处的说明 */
.pc-duo__f .pc-static,
.pc-duo__f .pc-subsidy,
.pc-duo__f .input { width: 100%; }

/* 自动带出的只读值（如「主推品件数」）—— 长得像输入框但不可编辑，
   让用户一眼看出「这是系统算的，不用填」。 */
.pc-auto {
  height: 44px;                        /* 同 .pc-static：对齐框架 .input（见其注释） */
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-fg);
  font-size: var(--font-size-base);
  font-variant-numeric: tabular-nums;
}
.pc-auto--empty { color: var(--color-muted); }

/* ⚠️ 旧结果区样式（.pc-verdict / .pc-metrics / .pc-metric* / .pc-note*）已于
   2026-09-23 第二版重做时**整块删除**（已实测全站无引用：
   `grep -rl "pc-metric\|pc-verdict\|pc-note" public/ server/` 只剩本文件自身）。
   留着会让人以为还有第二套结果区在用 —— 那正是最危险的状态。 */

.pc-talk { margin-top: var(--space-4); }
.pc-talk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-fg-2);
  margin-bottom: var(--space-2);
}
.pc-talk__body {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-fg);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}