/* ============================================================
 * 智企办公 · 商家端页面级语言（源力设计系统 / Yuanli）
 * ------------------------------------------------------------
 * 位置：public/m/pages.css —— 商家端物理隔离目录，客户端不引用。
 * 承接 shell.css：shell.css 管**外壳与基础组件**（侧栏 / 页头 / 按钮 / 卡片 /
 * 表格 / 标签 / 分页 / 输入 / 下拉 / chip / 提示条 / KPI / 快捷卡 / 文字链）；
 * 本文件管**页面内容区版式**（工具条 / 分段 / 搜索 / 弹层 / 日期 / 描述列表 /
 * 内容辅助 / 抽屉，以及 4 个页面作用域的专属结构）。
 *
 * 🔴 作用域纪律（三条，改动前必读）：
 *   1. 通用页面词汇一律以 `.shell.hc-m` 为前缀 → 客户端 `.shell.hc-c` 不受影响。
 *      实测确认：`.toolbar` / `.seg` / `.searchbox` / `.kv` / `.mcal-*` /
 *      `.cust-pop` / `.mc-*` / `.drw*` / `.pg-bar` 等类名**客户端与商家端共用**，
 *      故必须带前缀，不能裸写。
 *   2. 4 个页面作用域用双类限定 `.shell.hc-m.hc-mxxx` → 仅该页生效。
 *      作用域清单（由 shellM 的 pageCls 实参推导，非人工维护）：
 *      `hc-mprod` 商品管理 / `hc-mcat` 分类管理 / `hc-mcust` 客户详情 /
 *      `hc-mordnew` 代下单。其余商家端页面不挂 pageCls，只受第 1 条影响。
 *   3. 弹层（`.mp-modal`）挂在 #modal-root，位于 `.shell` **之外**，选择器匹配不到，
 *      故按类名单独写 —— 它是商家端专用命名空间（mp- 前缀），客户端不引用。
 *
 * 🔴 覆写边界：只改**视觉语言**（色 / 圆角 / 字阶 / 字重 / 描边 / 阴影 / 过渡），
 *   **不动布局几何**（宽高 / 栅格 / 定位 / 溢出策略 / 内边距数值一律保持现状）。
 *   各页 `.shell.hc-mxxx` 的版式几何仍归 styles.css 负责。
 * ============================================================ */

/* ================================================================
 * 一、通用页面词汇
 * ================================================================ */

/* ---------------------------------------------------------- 1. 工具条 */

.shell.hc-m .toolbar{
  background:var(--color-bg-card);
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-md);
  box-shadow:none;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}

/* ------------------------------------------------------ 2. 分段控件 */

/* 源力分段选择器语言：白底 + 1px 描边环；选中 = 主色弱底 + 主色描边环 + 主色文字。
 * 与设计系统 segmented-picker 一致（不用深色实底 —— 那是旧体系的强调方式）。 */
.shell.hc-m .seg{gap:var(--space-2)}
.shell.hc-m .seg .it{
  border:0;border-radius:var(--radius-sm);
  height:var(--m-ctrl-h);padding:0 var(--space-4);
  background:var(--color-bg-1);
  box-shadow:0 0 0 1px var(--color-border-3);
  color:var(--color-text-2);
  font-size:var(--font-size-lead);
  font-weight:var(--font-weight-regular);
}
.shell.hc-m .seg .it:hover:not(.on){background:var(--color-bg-4)}
.shell.hc-m .seg .it.on{
  background:var(--color-primary-bg);
  box-shadow:0 0 0 1px var(--primary-3);
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m .seg .it.on:hover{background:var(--primary-2)}
.shell.hc-m .seg .it.warn-on.on{
  background:var(--color-warning-bg);
  box-shadow:0 0 0 1px var(--color-warning);
  color:var(--color-warning);
  font-weight:var(--font-weight-medium);
}

/* 订单页的筛选分段与 .seg 同构（.mq-flts 是另一份实现，需单独覆盖） */
.shell.hc-m .mq-flts .it{
  border:0;border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  box-shadow:0 0 0 1px var(--color-border-3);
  color:var(--color-text-2);
  font-size:var(--font-size-lead);
  font-weight:var(--font-weight-regular);
}
.shell.hc-m .mq-flts .it:hover:not(.on){background:var(--color-bg-4)}
.shell.hc-m .mq-flts .it.on{
  background:var(--color-primary-bg);
  box-shadow:0 0 0 1px var(--primary-3);
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}

/* ---------------------------------------------------------- 3. 搜索框 */

.shell.hc-m .searchbox{
  background:var(--color-bg-4);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  transition:background .15s ease,border-color .15s ease;
}
.shell.hc-m .searchbox:hover{background:var(--color-bg-5)}
.shell.hc-m .searchbox:focus-within{
  background:var(--color-bg-1);
  border-color:var(--color-primary);
}
.shell.hc-m .toolbar .searchbox input,
.shell.hc-m .searchbox input{
  font-size:var(--font-size-lead);
  color:var(--color-text-1);
}
.shell.hc-m .searchbox input::placeholder{color:var(--color-text-3)}

/* ---------------------------------------------- 4. 筛选胶囊 / 清除按钮 */

.shell.hc-m .flt-on-tag{
  background:var(--color-primary-bg);
  color:var(--color-primary);
  border-radius:var(--radius-sm);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m .flt-x{background:var(--color-bg-4);color:var(--color-text-3)}
.shell.hc-m .flt-x:hover{background:var(--color-danger);color:var(--color-on-primary)}
.shell.hc-m .flt-tx{color:var(--color-text-3);font-weight:var(--font-weight-medium)}
.shell.hc-m .flt-tx:hover{color:var(--color-danger)}
.shell.hc-m .flt-sep{color:var(--color-text-4)}

/* ------------------------------------------------------ 5. 下拉弹层 */

/* 源力 dropdown 语言：4px 圆角 + 极浅描边 + 大浮层阴影 + 中性 hover + 主色选中 */
.shell.hc-m .cust-pop,
.shell.hc-m .mcal-pop{
  background:var(--color-bg-1);
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
}
.shell.hc-m .cust-q{
  background:var(--color-bg-1);
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
}
.shell.hc-m .cust-q:focus-within{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--state-focus);
}
.shell.hc-m .cust-qi{color:var(--color-text-3)}
.shell.hc-m .cust-q input{color:var(--color-text-1);font-size:var(--font-size-body)}
.shell.hc-m .cust-q input::placeholder{color:var(--color-text-3)}
.shell.hc-m .mc-list{gap:2px}
.shell.hc-m .mc-opt{
  border-radius:var(--radius-sm);
  color:var(--color-text-2);
  font-size:var(--font-size-lead);
  transition:background .12s ease;
}
.shell.hc-m .mc-opt:hover{background:var(--color-bg-4);color:var(--color-text-1)}
.shell.hc-m .mc-opt.on{
  background:var(--color-primary-bg);
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m .mc-check{border-color:var(--color-primary)}
.shell.hc-m .mc-empty{color:var(--color-text-3);font-size:var(--font-size-body)}
.shell.hc-m .mc-foot{
  border-top:1px solid var(--color-border-2);
  color:var(--color-text-3);
  font-size:var(--font-size-body);
}

/* --------------------------------------------------- 6. 日期区间选择 */

.shell.hc-m .mcal-trig{
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-1);
  font-size:var(--font-size-body);
}
.shell.hc-m .mcal-trig:hover{border-color:var(--primary-3)}
.shell.hc-m .mcal-wrap.open .mcal-trig{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--state-focus);
}
.shell.hc-m .mcal-val.ph{color:var(--color-text-3)}
.shell.hc-m .mcal-x{background:var(--color-bg-4);color:var(--color-text-3)}
.shell.hc-m .mcal-x:hover{background:var(--color-danger);color:var(--color-on-primary)}
.shell.hc-m .mcal-caret{border-color:var(--color-text-3)}
.shell.hc-m .mcal-arrow{color:var(--color-text-3);border-radius:var(--radius-sm)}
.shell.hc-m .mcal-arrow:hover{background:var(--color-bg-4);color:var(--color-text-1)}
.shell.hc-m .mcal-title{
  color:var(--color-text-1);
  font-size:var(--font-size-h4);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m .mcal-week b{color:var(--color-text-3);font-size:var(--font-size-body);font-weight:var(--font-weight-medium)}
.shell.hc-m .mc-day{color:var(--color-text-2)}
/* 日期格子：源力不用正圆，改 4px 圆角方块 */
.shell.hc-m .mc-ink{
  border-radius:var(--radius-sm);
  font-size:var(--font-size-lead);
  color:inherit;
}
.shell.hc-m .mc-day:hover .mc-ink{background:var(--color-bg-4);color:var(--color-text-1)}
.shell.hc-m .mc-day.wkd .mc-ink{color:var(--color-text-3)}
.shell.hc-m .mc-day.adj .mc-ink{color:var(--color-text-4)}
.shell.hc-m .mc-day.adj:hover .mc-ink{background:transparent;color:var(--color-text-4)}
.shell.hc-m .mc-day.tdy .mc-ink{
  box-shadow:inset 0 0 0 1px var(--color-primary);
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m .mc-day.inq{background:var(--color-primary-bg)}
.shell.hc-m .mc-day.inq .mc-ink{color:var(--color-primary)}
.shell.hc-m .mc-day.sel .mc-ink,
.shell.hc-m .mc-day.first-sel .mc-ink,
.shell.hc-m .mc-day.last-sel .mc-ink{
  background:var(--color-primary);
  color:var(--color-on-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m .mc-day.sel:hover .mc-ink,
.shell.hc-m .mc-day.first-sel:hover .mc-ink,
.shell.hc-m .mc-day.last-sel:hover .mc-ink{background:var(--color-primary-hover)}
.shell.hc-m .mcal-foot{
  border-top:1px solid var(--color-border-2);
  font-size:var(--font-size-body);
}
.shell.hc-m .mcal-hint{color:var(--color-text-3)}
.shell.hc-m .mcal-today{color:var(--color-link);font-weight:var(--font-weight-medium)}

/* ------------------------------------------------ 7. 描述列表（kv） */

.shell.hc-m .kv .k{color:var(--color-text-3);font-size:var(--font-size-body)}
.shell.hc-m .kv .v{color:var(--color-text-1);font-size:var(--font-size-h4);font-weight:var(--font-weight-regular)}
.shell.hc-m .card-title .sub{color:var(--color-text-3);font-size:var(--font-size-body);font-weight:var(--font-weight-regular)}

/* -------------------------------------- 8. 内容辅助（工作台等） */

.shell.hc-m .kpis{gap:var(--space-3)}
.shell.hc-m .quick{gap:var(--space-3);margin-top:var(--space-4)}
.shell.hc-m .feed{
  background:var(--color-bg-card);
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-md);
  box-shadow:none;
  padding:var(--space-4) var(--space-5);
  margin-top:var(--space-4);
}
.shell.hc-m .feed-row{
  border-bottom:1px solid var(--color-border-2);
  color:var(--color-text-2);
  font-size:var(--font-size-body);
}
.shell.hc-m .feed-row:last-child{border-bottom:none}
.shell.hc-m .feed-row .dot{width:6px;height:6px}
.shell.hc-m .feed-row .dot.blue{background:var(--color-primary)}
.shell.hc-m .feed-row .dot.green{background:var(--color-success)}
.shell.hc-m .feed-row .dot.red{background:var(--color-danger)}
.shell.hc-m .feed-row .dot.amber{background:var(--color-warning)}
.shell.hc-m .feed-row .dot.gray{background:var(--color-text-4)}

/* 表尾（说明 + 分页）与表内滚动层 */
.shell.hc-m .tbl-foot{
  border-top:1px solid var(--color-border-2);
  background:var(--color-bg-2);
  color:var(--color-text-3);
  font-size:var(--font-size-body);
}
.shell.hc-m .tbl-scroll{background:var(--color-bg-card)}
.shell.hc-m .tbl .empty-hint{
  color:var(--color-text-3);
  font-size:var(--font-size-h4);
}

/* ------------------------------------------------- 9. 统一分页组件 */

.shell.hc-m .pg-bar{
  border-top:1px solid var(--color-border-2);
  background:var(--color-bg-2);
  color:var(--color-text-2);
  font-size:var(--font-size-lead);
}
.shell.hc-m .pg-n{
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-2);
  font-weight:var(--font-weight-regular);
  box-shadow:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.shell.hc-m .pg-n:hover:not(:disabled){
  border-color:var(--color-primary);
  color:var(--color-primary);
}
.shell.hc-m .pg-n.on{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-on-primary);
  font-weight:var(--font-weight-medium);
}
/* 🔴 当前页码被 `:disabled` 压到 38% 不透明度（基线 `.pg-n:disabled{opacity:.38}`）——
 * 浏览器实测：字号不变但整体发白，当前页几乎读不清。这不是本层引入的，基线亦然；
 * 客户端早就用 `.shell.hc-c .pg-n.on:disabled{opacity:1}` 自行绕过，商家端此前没跟。
 * 语义上「当前页」是**选中态**而非「不可用」⇒ 显式还原不透明度（禁用箭头仍保持 .38）。 */
.shell.hc-m .pg-n.on:disabled{opacity:1}

/* ================================================================
 * 二、商品管理页（.shell.hc-m.hc-mprod）
 * ================================================================ */

/* 页头 */
.shell.hc-m.hc-mprod .mp-title{
  font-size:var(--font-size-h1);
  line-height:var(--line-height-h1);
  font-weight:var(--font-weight-semibold);
  color:var(--color-text-1);
  letter-spacing:0;
}
.shell.hc-m.hc-mprod .mp-sub{
  font-size:var(--font-size-lead);
  line-height:var(--line-height-lead);
  color:var(--color-text-3);
}

/* 工具行：分段 + 搜索 + 列设置
 * 2026-10-07 批次 14：搜索框、列设置按钮、下拉、筛选 chip 高度统一为 var(--m-ctrl-h) 32px。 */
.shell.hc-m.hc-mprod .mp-tools{gap:var(--space-3)}
.shell.hc-m.hc-mprod .mp-seg{
  background:transparent;
  border-radius:0;
  padding:0;
  gap:var(--space-2);
}
.shell.hc-m.hc-mprod .mp-seg .it{
  border:0;border-radius:var(--radius-md);
  height:var(--m-ctrl-h);padding:0 var(--space-4);
  background:var(--color-bg-1);
  box-shadow:0 0 0 1px var(--color-border-3);
  color:var(--color-text-2);
  font-size:var(--font-size-lead);
  font-weight:var(--font-weight-regular);
}
.shell.hc-m.hc-mprod .mp-seg .it:hover:not(.on){background:var(--color-bg-4);color:var(--color-text-1)}
.shell.hc-m.hc-mprod .mp-seg .it.on{
  background:var(--color-primary-bg);
  box-shadow:0 0 0 1px var(--primary-3);
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}
/* ---------- 【2026-10-23 S1】商品管理：类型 vs 状态的分隔 / 类型小字 / 货名链接 / 独立上架徽标 ----------
 * 掌柜定「平铺一排、互斥单选」，所以分隔线只做视觉分组，不改互斥语义。
 * 颜色一律走令牌（门禁不扫 CSS 裸色，写死就埋一颗换主题不跟随的雷）。 */
.shell.hc-m.hc-mprod .mp-seg-sep{
  display:inline-block;width:1px;height:16px;margin:0 var(--space-2);
  background:var(--color-border-2);vertical-align:middle;
}
.shell.hc-m.hc-mprod .mp-type{color:var(--color-text-4);font-size:var(--font-size-body)}
.shell.hc-m.hc-mprod .mp-bpl{color:var(--color-link);cursor:pointer}
.shell.hc-m.hc-mprod .mp-bpl:hover{color:var(--color-primary-hover);text-decoration:underline}
.shell.hc-m.hc-mprod .mp-badge.bpon{background:var(--color-primary-bg);color:var(--color-primary)}
.shell.hc-m.hc-mprod .mp-search{
  height:var(--m-ctrl-h);
  background:var(--color-bg-4);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
}
.shell.hc-m.hc-mprod .mp-search:hover{background:var(--color-bg-5)}
.shell.hc-m.hc-mprod .mp-search:focus-within{
  background:var(--color-bg-1);
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--state-focus);
}
.shell.hc-m.hc-mprod .mp-search .ic{color:var(--color-text-3)}
.shell.hc-m.hc-mprod .mp-search input{color:var(--color-text-1);font-size:var(--font-size-lead)}
.shell.hc-m.hc-mprod .mp-search input::placeholder{color:var(--color-text-3)}
.shell.hc-m.hc-mprod .mp-colbtn{
  width:var(--m-ctrl-h);
  height:var(--m-ctrl-h);
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-2);
}
.shell.hc-m.hc-mprod .mp-colbtn:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* 筛选行 */
.shell.hc-m.hc-mprod .mp-filters>.lb{color:var(--color-text-3);font-size:var(--font-size-body)}
.shell.hc-m.hc-mprod .mp-sel select{
  height:var(--m-ctrl-h);
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-2);
  font-size:var(--font-size-lead);
}
.shell.hc-m.hc-mprod .mp-sel select:hover{border-color:var(--primary-3)}
.shell.hc-m.hc-mprod .mp-sel select:focus{border-color:var(--color-primary)}
/* 【2026-10-24 第 4 步】采集批次下拉：选项文本长（「10-24 11:02 · 100 条 · 斑马牌中性笔 0.5mm 10支装」），
 * 不加宽度上限会把整行筛选挤变形。限宽 + 省略，完整文本在 title 里。 */
.shell.hc-m.hc-mprod .mp-srcsel select{max-width:300px;text-overflow:ellipsis}
.shell.hc-m.hc-mprod .mp-sel::after{color:var(--color-text-3)}
.shell.hc-m.hc-mprod .mp-chip{
  height:var(--m-ctrl-h);
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-2);
  font-size:var(--font-size-body);
}
.shell.hc-m.hc-mprod .mp-chip:hover{border-color:var(--color-primary);color:var(--color-primary)}
.shell.hc-m.hc-mprod .mp-chip.on{
  background:var(--color-primary-bg);
  border-color:var(--primary-3);
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mprod .mp-reset{color:var(--color-link);font-size:var(--font-size-body)}
.shell.hc-m.hc-mprod .mp-reset:hover{color:var(--color-primary-hover)}

/* 批量操作条：深色实底 → 源力浅蓝信息条
 * 2026-10-07 批次 14：操作按钮高度统一为 var(--m-ctrl-h) 32px。 */
/* 🔴 2026-10-25 Notion 重构：圆角 8px → 12px（面板，与 `.mp-card` 同档）。
 *   底色仍用主色弱底 —— 它是「已选 N 项」的操作面板，需要从暖纸底上跳出来，
 *   属于 DESIGN.md 允许的「用色造层次」而非用阴影。 */
.shell.hc-m.hc-mprod .mp-batch{
  background:var(--color-primary-bg);
  border:1px solid var(--primary-3);
  border-radius:var(--radius-lg);
  /* 【2026-10-24 第 4 步】批量动作从 4 个增到 7 个（+独立售卖/仅组合内/恢复在售）。
   * 窄屏必须能换行，否则按钮被挤出容器、点不到（容器没有横向滚动）。
   * 作用域限定在 `.hc-mprod`，不影响其它页面的同名字面量。 */
  flex-wrap:wrap;
  row-gap:8px;
}
.shell.hc-m.hc-mprod .mp-batch .ic{background:var(--color-primary);color:var(--color-on-primary)}
.shell.hc-m.hc-mprod .mp-batch-tx{color:var(--color-text-1);font-size:var(--font-size-lead)}
.shell.hc-m.hc-mprod .mp-batch .sep{background:var(--color-border-3)}
.shell.hc-m.hc-mprod .mp-batch .b{
  height:var(--m-ctrl-h);
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-2);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
}
.shell.hc-m.hc-mprod .mp-batch .b:hover{background:var(--color-bg-4);border-color:var(--primary-3)}
.shell.hc-m.hc-mprod .mp-batch .b.ghost{
  background:transparent;
  border-color:var(--color-primary);
  color:var(--color-primary);
}
.shell.hc-m.hc-mprod .mp-batch .b.ghost:hover{background:var(--primary-2)}
.shell.hc-m.hc-mprod .mp-batch .b.warn{color:var(--color-danger);border-color:var(--color-danger)}

/* 表格卡 */
/* 🔴 2026-10-25 Notion 重构：表格卡圆角 8px → 12px（DESIGN.md "cards 12px"，与 `.tbl-wrap` 同档）。
 *   表头/单元格/行 hover 口径不变（已符合 Notion 表格：12px/500 表头 on tint、14px 单元格、发丝线行）。 */
.shell.hc-m.hc-mprod .mp-card{
  background:var(--color-bg-card);
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-lg);
}
.shell.hc-m.hc-mprod .mp-card .tbl th{
  background:var(--color-table-header-bg);
  color:var(--color-table-header-text);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mprod .mp-card .tbl td{
  color:var(--color-text-1);
  font-size:var(--font-size-lead);
  border-top:1px solid var(--color-table-border);
}
.shell.hc-m.hc-mprod .mp-card tbody tr:hover td{background:var(--color-table-row-hover)}
.shell.hc-m.hc-mprod .mp-card tbody tr.on td{background:var(--color-primary-bg)}
.shell.hc-m.hc-mprod .mp-card tbody tr.on:hover td{background:var(--primary-2)}
.shell.hc-m.hc-mprod .mp-card tbody tr.off td{color:var(--color-text-3)}
.shell.hc-m.hc-mprod .mp-card .empty{color:var(--color-text-3);font-size:var(--font-size-lead)}

/* 行内元素 */
.shell.hc-m.hc-mprod .mp-thumb{
  border-radius:var(--radius-sm);
  background:var(--color-bg-4);
  color:var(--color-text-3);
}
.shell.hc-m.hc-mprod .mp-pn{font-size:var(--font-size-lead);font-weight:var(--font-weight-medium);color:var(--color-text-1)}
.shell.hc-m.hc-mprod .mp-pc{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m.hc-mprod .mp-pc .w{color:var(--color-warning)}
.shell.hc-m.hc-mprod .mp-cat{font-size:var(--font-size-body);color:var(--color-text-2)}
.shell.hc-m.hc-mprod .mp-cat.none{color:var(--color-warning);font-weight:var(--font-weight-medium)}
.shell.hc-m.hc-mprod .mp-unit{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m.hc-mprod .mp-dash{color:var(--color-text-4)}
.shell.hc-m.hc-mprod .mp-price{
  font-size:var(--font-size-lead);
  font-weight:var(--font-weight-medium);
  color:var(--color-text-1);
}
.shell.hc-m.hc-mprod .mp-ref{font-size:var(--font-size-body);color:var(--color-danger)}
/* 【2026-10-24 C2】组合行的「客户专属价范围」小字（主价仍是投影最低价，范围只作补充）。
 * 列宽 110px：`¥15～¥20` 这类紧凑写法刚好放得下，故金额不带 .00（见 mpMoneyShort）。 */
.shell.hc-m.hc-mprod .mp-range{
  display:block;margin-top:2px;font-size:12px;color:var(--color-text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* 状态胶囊：999px 正圆胶囊 → 4px 圆角 */
/* 🔴 2026-10-25 Notion 重构：状态徽标 4px → **9999px 胶囊**（DESIGN.md "Pill Tag …
 *   border-radius 9999px … status labels"）。这枚徽标自带一个 5px 状态点，正是 Notion
 *   「状态胶囊 + 小圆点」的标准形态，故同时：点改正圆、徽标改 inline-flex 让点与文字基线对齐。
 * ⚠️ 不加底色边框、不加阴影 —— 彩色只来自各变体（vis/src/orphan/autooff/ok/warn/err）既有的语义弱底。 */
.shell.hc-m.hc-mprod .mp-badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  border-radius:var(--radius-full);
  padding:0 var(--space-2);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mprod .mp-badge i{width:5px;height:5px;border-radius:var(--radius-full);flex:0 0 auto}

/* 行操作文字链 */
/* 【2026-10-26】操作列原为 300px + `flex-wrap:nowrap` + td `overflow:hidden`：
 * 实测孤儿货行 6 个链接需要 390px，可用 268px ⇒ **硬裁 122px**（「可见客户」「更多」整条消失）。
 * 300px 是 `table-layout:fixed` 下写死的，**与视口宽度无关** —— 所以掌柜说「拉多宽都看不全」。
 * 修法两条：① 列宽 300→380（见 products.js 的 th）；② 这里允许换行兜底，
 * 以后文案再长也只是折成两行，不会再被裁掉。
 * 🔴 为什么是 380 而非 430（430 才刚好装下 390）：其余 6 列宽度全写死，
 *   fixed 布局下加宽操作列只能从「商品名称」这个唯一弹性列里扣 ——
 *   实测 430 时 1440 视口名称列只剩 178px（原 308）。380 下正常行 5 链接 290px
 *   仍是一行、行高不变，只有孤儿货行折两行。改动此值必须同步 test/mprod-ops-col-smoke.js。 */
.shell.hc-m.hc-mprod .mp-ops{gap:var(--space-4);flex-wrap:wrap;row-gap:2px;align-items:center}
.shell.hc-m.hc-mprod .mp-ops .a{
  font-size:var(--font-size-lead);
  font-weight:var(--font-weight-medium);
  color:var(--color-link);
}
.shell.hc-m.hc-mprod .mp-ops .a.muted{color:var(--color-text-3);font-weight:var(--font-weight-regular)}
.shell.hc-m.hc-mprod .mp-ops .a.muted:hover{color:var(--color-text-1)}
.shell.hc-m.hc-mprod .mp-ops .a:hover{color:var(--color-primary-hover)}

/* ================================================================
 * 三、分类管理页（.shell.hc-m.hc-mcat）
 * ================================================================ */

.shell.hc-m.hc-mcat .cats3 .cat-it{border-radius:var(--radius-sm)}
.shell.hc-m.hc-mcat .cats3 .cat-it:hover{background:var(--color-bg-4)}
.shell.hc-m.hc-mcat .cats3 .cat-it.on{
  background:var(--color-primary-bg);
  color:var(--color-primary);
}
/* 🔴 2026-10-25 Notion 重构：原为 `linear-gradient(90deg,rgba(243,247,255,0),var(--color-primary-bg) 16px)`
 *   —— DESIGN.md 明令 "Do not use gradients —— the system is strictly flat fills"。
 *   改为**平色** `--color-primary-bg`：该元素是分类行右侧的操作按钮组，压在选中态的浅蓝底上，
 *   平色与左侧选中态底色完全一致，视觉上仍是「融为一体的一块」，不再有渐隐过渡。 */
.shell.hc-m.hc-mcat .cats3 .cat-it.on .ci-ops{
  background:var(--color-primary-bg);
}
.shell.hc-m.hc-mcat .cats3 .detail-tabs button{color:var(--color-text-3);font-size:var(--font-size-h4)}
.shell.hc-m.hc-mcat .cats3 .detail-tabs button.on{
  color:var(--color-primary);
  border-bottom-color:var(--color-primary);
}
.shell.hc-m.hc-mcat .cats3 .cats-empty{
  background:var(--color-bg-4);
  border-radius:var(--radius-sm);
  color:var(--color-text-3);
}
.shell.hc-m.hc-mcat .cats3 .cat-drop-line{background:var(--color-primary)}

/* ================================================================
 * 四、客户详情页（.shell.hc-m.hc-mcust）
 * ================================================================ */

/* 该页主要复用基础组件（card / tbl / badge / kv / seg），
 * 故只需收口表格内联容器的圆角与描边，与源力卡片语言对齐。 */
.shell.hc-m.hc-mcust .tbl-scroll{
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-sm);
}
.shell.hc-m.hc-mcust .scroll{
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-sm);
}
.shell.hc-m.hc-mcust .mc-opt{border-radius:var(--radius-sm)}

/* ================================================================
 * 五、代下单页（.shell.hc-m.hc-mordnew）
 * ================================================================ */

.shell.hc-m.hc-mordnew .tbl-scroll{
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-sm);
}

/* ================================================================
 * 六、商家端抽屉（.drw / .drw-mask）
 * ================================================================
 * 抽屉 HTML 由视图函数产出、挂在 `.shell.hc-m` 之内（见 30-prod.js
 * `${relDrawerHtml()}${prodDrawerHtml()}...`），故可用前缀限定。
 * 客户端 `.c-drawer` 是另一套类名，不受影响。
 * 只改视觉语言：圆角 / 描边 / 底色 / 阴影 / 字阶，不动宽度与定位。 */

.shell.hc-m .drw-mask{background:rgba(12,13,14,.45)}
.shell.hc-m .drw{
  background:var(--color-bg-card);
  box-shadow:var(--shadow-4);
  /* 🔴 圆角只给**左侧两角**（2026-10-07 批次 11）：抽屉是 `position:fixed` 满高贴右
   *（`merchant.css` 的 `.drw` 定 top/right/bottom:0），右侧两角贴着视口边缘 ——
   * 给圆角会在角落露出页面背景，反而像没对齐。设计稿的 `.drawer` 是通用外观规格
   *（它页面里没有抽屉实例），四角 8px；此处按本站贴边定位适配为「左两角 8px」。
   * `overflow:hidden` 是圆角的必要配套：否则子元素（`.drw-h` 的横线、`.drw-b` 的灰底）
   * 会以直角盖住圆角，视觉上圆角失效。 */
  border-radius:var(--radius-md) 0 0 var(--radius-md);
  border-left:1px solid var(--color-border-3);
  overflow:hidden;
}
.shell.hc-m .drw-h{
  border-bottom:1px solid var(--color-border-2);
  padding:var(--space-4) var(--space-6);
}
.shell.hc-m .drw-x{color:var(--color-text-3);font-size:var(--font-size-lead)}
.shell.hc-m .drw-x:hover{color:var(--color-text-1)}
.shell.hc-m .drw-tabs{border-bottom:1px solid var(--color-border-2);gap:0}
.shell.hc-m .drw-tabs button{
  color:var(--color-text-3);
  font-size:var(--font-size-h4);
  font-weight:var(--font-weight-regular);
  transition:color .15s ease,border-color .15s ease;
}
.shell.hc-m .drw-tabs button:hover{color:var(--color-text-1)}
.shell.hc-m .drw-tabs button.on{
  color:var(--color-primary);
  border-bottom-color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m .drw-b{padding:var(--space-4) var(--space-6)}
.shell.hc-m .drw-f{
  border-top:1px solid var(--color-border-2);
  background:var(--color-bg-2);
  padding:var(--space-3) var(--space-6);
}
.shell.hc-m .drw-prod .pform-sec{
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-md);
}
.shell.hc-m .drw-prod .sp-ed-wrap{background:var(--color-bg-card)}

/* ---------------------------------------------------------------
 * 六.2 商品管理抽屉的**布局几何**（2026-10-07 批次 11）
 * ---------------------------------------------------------------
 * 依据：设计稿 `products.html` 的 `.drawer` 组件规格 ——
 *   `.drawer-header{height:56px;padding:0 24px}` · `.drawer-body{padding:var(--space-6)}` ·
 *   `.drawer-footer{height:64px;padding:16px 24px}`。
 *
 * 🔴 为什么必须重写（事故形态，**几何层面**）：这批几何此前散在**三处**且互不一致 ——
 *   ① `merchant.css` 的裸选择器（`.drw{width:1000px}` / `.drw-h{padding:14px 24px}` …）是**基座**；
 *   ② `base.css` 的 `.shell.hc-mprod .drw-prod|.drw-rel …`（4 类）是**页面级覆盖**；
 *   ③ `pages.css §六`（2 类）只改了视觉语言。
 *   于是同一个抽屉的三段（头 / 底 / 正文）水平内距分别落成 **28 / 28 / 28**（商品）
 *   与 **20 / 20 / 20**（关系类）—— 两端不一致，且都与设计稿的 24px 不符；
 *   两个抽屉的头部高度也不一致（64 / 80），底部差 12px（64 / 76）。
 *   浏览器实测（2026-10-07）：`.drw-prod` → 头 64/`0 28px`、正文 `22px 28px`、底 64/`0 28px`；
 *   `.drw-rel` → 头 80/`0 20px`、正文 `20px`、底 76/`0 20px`。
 *
 * 🔴 覆盖策略：用 **5 类**（`.shell.hc-m.hc-mprod .drw-prod .drw-h`）压 `base.css` 的 4 类 ——
 *   与 §9 同款做法（**不动 `base.css`**，遵守「商家端样式只写 merchant/styles/*」的端内隔离纪律）。
 *
 * 🔴 三处**本站适配**（设计稿未覆盖的部分，逐条给出理由，不得当作疏漏）：
 *   ① **宽度保留业务值**（商品 880 / 关系类 1000）：设计稿给的是 480/600/720/1080 四个通用档位，
 *      而本站抽屉的内部栅格（`.rl-row` 的定宽列、`.fg` 两列）是按各自宽度设计的；
 *      改宽度会连带改栅格，超出「几何对齐」的范围。
 *   ② **关系类头部保留 80px**：其头部含 **40px 缩略图 + 两行文案**（`.rl-h-tx`），
 *      压到设计稿的 56px 会顶满甚至溢出；商品抽屉头部只有两行文字，故可落到 56px。
 *   ③ **关系类底部 76 → 64**：原 76 无依据（只是旧商户值），其内容为一行文案 + 32px 按钮，
 *      64px 是够的，且与设计稿及商品抽屉一致。
 * ================================================================ */

/* 商品抽屉（880）：头部 64 → 56（设计稿）· 三段水平内距统一 24px */
.shell.hc-m.hc-mprod .drw-prod .drw-h{
  height:56px;padding:0 var(--space-6);gap:var(--space-4);
}
.shell.hc-m.hc-mprod .drw-prod .drw-b{padding:var(--space-6)}
.shell.hc-m.hc-mprod .drw-prod .drw-f{
  height:64px;padding:0 var(--space-6);
}

/* ---------------------------------------------------------------
 * 六.3 商品抽屉 · 顶部四页签（2026-10-18）
 * ---------------------------------------------------------------
 * 背景：掌柜要求「编辑商品」改为**顶部横向页签**：基础信息 / 规格参数 / 销售规格 / 图片与详情；
 *   图片上传与富文本详情同处「图片与详情」；四个页签共用底部「保存修改 / 取消」；
 *   保存时做全表单校验，失败自动跳到出错页签并标红。
 *
 * 结构（`product-form.js` 的 `prodForm`）：
 *   `.drw-h`          标题（编码 / 分类）
 *   `.pf-tabs`        页签条（**在 `.drw-b` 之外** ⇒ 不随表单滚动，滚到中段也知道自己在哪一页）
 *   `.drw-b.pf-panes` 正文滚动体：4 个 `.pf-pane` **全部常驻 DOM**，只切 display
 *   `.drw-f`          共用底栏
 *
 * 🔴 四个 pane 常驻、只切显隐 —— 这是「切页签不丢已输入内容」的**结构保证**：
 *   表单值只活在 DOM 里（`doProdSave` 保存那一刻才读 DOM），任何「卸载 + 回填」都要面对
 *   「回填覆盖用户输入」的时序坑。**不要**改成按需渲染 / 按 tab 重建。
 * 🔴 页签条 56px 是详情编辑器高度 `calc(100vh - 232px)` 的组成项之一
 *   （232 = 头 56 + 页签 56 + 脚 64 + `.drw-b` 上下内距 48 + 8 余量）。
 *   改页签高度 / 头脚高度 / 正文内距时**必须同步**这个数（`mprod-tabs-smoke` 钉住）。
 * 🔴 宽度必须有 `max-width`：`.drw` 是 `position:fixed` 贴右、**不随文档横向滚动** ⇒
 *   只写 `width:1400px` 时，视口 <1400（如 1366 笔记本）的超左部分**永久不可达**。
 * ================================================================ */
.shell.hc-m.hc-mprod .drw.drw-prod{width:1400px;max-width:calc(100vw - 24px)}

/* 页签条：横向排布、不换行（窄屏横向滚动）；每格两行（主标题 + 一句说明） */
.shell.hc-m.hc-mprod .drw-prod .pf-tabs{
  flex:0 0 auto;display:flex;align-items:stretch;gap:var(--space-1);
  padding:0 var(--space-6);border-bottom:1px solid var(--color-border-2);
  background:var(--color-bg-card);overflow-x:auto;scrollbar-width:thin;
}
.shell.hc-m.hc-mprod .drw-prod .pf-tab{
  position:relative;flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:2px;
  min-height:56px;padding:var(--space-2) var(--space-4);
  border:0;border-bottom:2px solid transparent;background:transparent;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--color-text-3);
  transition:color .15s ease,border-color .15s ease;
}
.shell.hc-m.hc-mprod .drw-prod .pf-tab b{font-size:var(--font-size-h4);font-weight:var(--font-weight-medium)}
.shell.hc-m.hc-mprod .drw-prod .pf-tab span{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m.hc-mprod .drw-prod .pf-tab:hover{color:var(--color-text-1)}
.shell.hc-m.hc-mprod .drw-prod .pf-tab:hover span{color:var(--color-text-2)}
.shell.hc-m.hc-mprod .drw-prod .pf-tab.on{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.shell.hc-m.hc-mprod .drw-prod .pf-tab.on b{font-weight:var(--font-weight-semibold)}
.shell.hc-m.hc-mprod .drw-prod .pf-tab.on span{color:var(--color-text-2)}
/* 校验失败的页签：标题转红 + 右上角红点（人在别的页签里也知道「那一页还有问题」） */
.shell.hc-m.hc-mprod .drw-prod .pf-tab.has-err{color:var(--color-danger)}
.shell.hc-m.hc-mprod .drw-prod .pf-tab.has-err::after{
  content:'';position:absolute;top:10px;right:6px;width:6px;height:6px;border-radius:50%;
  background:var(--color-danger);
}

/* 正文：`.drw-b` 仍是**唯一纵向滚动体**（`#mp-shint` 与 `render.js` 的滚动位置保留都挂在它上面） */
.shell.hc-m.hc-mprod .drw-prod .pf-panes{display:block}
.shell.hc-m.hc-mprod .drw-prod .pf-pane{display:none}
.shell.hc-m.hc-mprod .drw-prod .pf-pane.on{display:flex;flex-direction:column;gap:var(--space-4)}
/* 图片与详情：左「商品图片」480 + 右「商品详情」吃掉剩余宽（1440 视口下编辑区 ≈ 820px） */
.shell.hc-m.hc-mprod .drw-prod .pf-pane.pf-media.on{
  display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);
  gap:var(--space-4);align-items:start;
}

/* 详情卡：**定高**（不是只有上限）—— 空↔有内容时编辑器高度恒定，整卡不跳（63 号发现）。 */
.shell.hc-m.hc-mprod .drw-prod .pform-detail{display:flex;flex-direction:column;min-height:0}
@media (min-width:1081px){
  .shell.hc-m.hc-mprod .drw-prod .pf-media .pform-detail{height:calc(100vh - 232px);min-height:360px}
}
.shell.hc-m.hc-mprod .drw-prod .pform-detail .rt-edit{flex:1 1 0;min-height:120px;max-height:none}

/* 窄屏降级：≤1080 图片与详情合单列；≤900 补回 base.css:562 那条早已失效的 `.fg` 单列回退 */
@media (max-width:1080px){
  .shell.hc-m.hc-mprod .drw-prod .pf-pane.pf-media.on{grid-template-columns:minmax(0,1fr)}
  .shell.hc-m.hc-mprod .drw-prod .pf-media .pform-detail{height:auto;min-height:360px}
  .shell.hc-m.hc-mprod .drw-prod .pf-tabs{padding:0 var(--space-4)}
}
@media (max-width:900px){
  .shell.hc-m.hc-mprod .drw-prod .fg{grid-template-columns:1fr}
}

/* 关系类抽屉（1000 · 价格 / 关联 / 可见性共用）：头部高度保留 80 · 三段水平内距统一 24px */
.shell.hc-m.hc-mprod .drw-rel .drw-h{padding:0 var(--space-6)}
.shell.hc-m.hc-mprod .drw-rel .rl-tabs{padding:0 var(--space-6)}
.shell.hc-m.hc-mprod .drw-rel .drw-b{padding:var(--space-6)}
.shell.hc-m.hc-mprod .drw-rel .drw-f{
  height:64px;padding:0 var(--space-6);
}

/* ================================================================
 * 七、商家端弹层（.mp-modal）
 * ================================================================
 * 🔴 弹层渲染在 #modal-root，位于 `.shell` 之外，前缀选择器匹配不到，
 * 故按类名裸写；`.mp-modal` 是商家端专用命名空间（mp- 前缀），客户端不引用。
 * 🔴 结构以 styles.css:2090 为准 —— 头/体/脚是 `.mh` / `.mb` / `.mf`，
 * **不是** `.modal-h` / `.modal-f`（勿按猜测写选择器）。
 *
 * ── 2026-10-06 命名空间纪律（本批成立，批 4 的部分结论已回滚） ──
 * `.mp-modal` 是商家端专用弹层类，**当前唯一使用者**是「搜索别名」弹窗
 * （30-prod.js:59）——商户独有，与客户端无关。
 * 🔴🔴 **批 4 曾误把 `addPickModal` / `spPickModal` 的 cls 也改成 `mp-modal`，已回滚**：
 *   那两处弹窗由 `addcart` / `chg-spec` 触发，而这两个动作的触发点**全在 10-client.js**
 *   （加购：546/714/731/775；换规格：1065/1090）⇒ 它们是**客户端**弹窗，必须留 `hc-modal`
 *   以继承客户端色板（样式表 1244 的 `.shell.hc-c,.hc-modal{…}` 重映射；弹层在 .shell 之外，
 *   `.shell.hc-c` 匹配不到，`hc-modal` 是它们唯一的取色通道）。
 *   教训：**判断弹窗归哪端，要看触发它的动作定义在哪个视图文件，不能按弹窗所在的文件名猜**
 *   —— `addPickModal` 定义在 30-prod.js（商品管理域），但服务的是客户端加购。
 * 🔴 客户端弹窗内的 `.sp-pick-list` / `.dept-mod` / `.stepper` 等控件**不归本层管**
 *   （客户端有自己的设计系统）⇒ 本节**不含**这些控件的规则，也不要往这里加。
 *
 * 覆盖基线：styles.css 里已有一段 `.mp-modal .mh/.mb/.mf/.mf .btn`（为「搜索别名」弹窗而写，
 * 含 #F0F0F2 / #333 / #0064E0 等硬编码色）。本节与它**特异性相同**、加载更晚，故全覆盖之。 */

/* 🔴 2026-10-25 Notion 重构：弹窗外壳圆角 8px → **12px**（DESIGN.md "cards 12px"）。
 *   按本次确立的 taxonomy，弹窗是**面板**而非控件 ⇒ 与 `.card` / `.tbl-wrap` / `.mp-card` 同档；
 *   弹窗内的按钮（`.mf .btn`）才是控件，保持 8px。阴影保持 `--shadow-4` ——
 *   DESIGN.md 只禁**内容面**用阴影，浮层正是它允许的那一类。 */
.mp-modal{border-radius:var(--radius-lg)}
.mp-modal .mh{
  border-bottom:1px solid var(--color-border-2);
  color:var(--color-text-1);
  font-size:var(--font-size-h3);
  font-weight:var(--font-weight-medium);
}
.mp-modal .mb{color:var(--color-text-2);font-size:var(--font-size-lead)}
.mp-modal .mf{
  border-top:1px solid var(--color-border-2);
  background:var(--color-bg-2);
}
/* 弹层内的按钮也归源力（弹层不在 .shell 内，拿不到 shell.css 的 .btn 层） */
/* 🔴 2026-10-25 Notion 重构：弹窗底栏按钮 4px → 8px（DESIGN.md "buttons 8px"，
 *   与 `.shell.hc-m .btn` 同档）。弹窗挂在 `#modal-root`（`.shell` 之外）⇒ 必须裸写 `.mp-modal` 前缀。 */
.mp-modal .mf .btn{height:var(--m-ctrl-h);border-radius:var(--radius-md);font-size:var(--font-size-h4)}
.mp-modal .mf .btn.pri{background:var(--color-primary);color:var(--color-on-primary)}
.mp-modal .mf .btn.pri:hover{background:var(--color-primary-hover)}
.mp-modal .mf .btn.ghost{
  background:var(--color-bg-1);
  border:1px solid var(--color-border-3);
  color:var(--color-text-2);
}

/* ---------- 基础商品弹层（2026-10-23 P3） ----------
 * 字段从 7 个涨到 11 组（分类 / 封面图 / 图集 / 图文详情 / 可见客户 / 上架），
 * 而基础层 `.modal{width:480px}` 且**不限高** ⇒ 弹层会顶出视口，实测「保存」按钮看不见。
 * 手法与 `.pk-modal` 一致：加宽 + 头脚固定、体内滚动（.mb 是弹层中段，见 core.js modal()）。
 * 🔴 作用域挂在 `.bp-modal` 上，不动 `.mp-modal` 基线（其它商家端弹窗不受影响）。 */
.mp-modal.bp-modal{width:min(760px,94vw);max-height:min(90vh,900px);display:flex;flex-direction:column}
.mp-modal.bp-modal .mh,
.mp-modal.bp-modal .mf{flex:0 0 auto}
.mp-modal.bp-modal .mb{overflow:auto;min-height:0}

/* ---------- 待确认包装（2026-10-21 批次 4b） ----------
 * ① 提示条 `.mp-pkr` 在商品管理页正文顶部（与 .mp-tools 同一列，不悬浮）；
 * ② 清单弹窗 `.pk-modal` 挂在 #modal-root（.shell 之外）⇒ **裸写类名**，且必须自带
 *    `mp-modal` 才拿得到上面那层按钮与头脚样式（弹层不在 .shell 内，取不到 shell 的 .btn 层）。
 * 颜色一律走令牌：门禁不扫 CSS 的裸色值，写死就等于埋一颗「换主题不跟随」的雷。 */
.mp-pkr{
  display:flex;align-items:center;gap:var(--space-3);
  margin:0 0 var(--space-3);
  padding:10px var(--space-4);
  border:1px solid var(--color-warning);
  border-radius:var(--radius-md);
  background:var(--color-warning-bg);
  color:var(--color-text-1);
  font-size:var(--font-size-lead);
}
.mp-pkr .ic{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:var(--radius-full);
  background:var(--color-warning);color:var(--color-bg-1);
  font-size:var(--font-size-caption);
}
.mp-pkr-tx{flex:1 1 auto;min-width:0}
.mp-pkr-b{
  flex:0 0 auto;
  height:var(--m-ctrl-h);padding:0 var(--space-4);
  border:1px solid var(--color-border-3);border-radius:var(--radius-sm);
  background:var(--color-bg-1);color:var(--color-text-1);
  font-size:var(--font-size-h4);cursor:pointer;
}
.mp-pkr-b:hover{border-color:var(--color-primary);color:var(--color-primary)}
.mp-pkr.err{border-color:var(--color-danger);background:var(--color-danger-bg)}
.mp-pkr.err .ic{background:var(--color-danger)}

/* 宽度：基础层 .modal{width:480px}(0,1,0) ⇒ 本行 (0,2,0) 稳胜（与本文件 .mp-modal.po-rec 同一手法）。
 * 480 放不下「属性值 / 单位 / 换算 / 原因」四列：原因会被挤成一行一个字（实测截图确认）。 */
.mp-modal.pk-modal{width:min(920px,92vw)}
.pk-modal .mb{max-width:100%}
.pk-lead{
  margin:0 0 var(--space-3);
  color:var(--color-text-2);font-size:var(--font-size-lead);line-height:1.7;
}
.pk-lead.sub{color:var(--color-text-3);font-size:var(--font-size-body)}
/* 清单本体：128 行规模下必须限高内滚，否则弹窗会把按钮顶出视口 */
.pk-list{max-height:min(52vh,460px);overflow:auto;padding-right:var(--space-2)}
.pk-g{border:1px solid var(--color-border-2);border-radius:var(--radius-md);margin:0 0 var(--space-3)}
.pk-gh{
  display:flex;align-items:center;gap:var(--space-3);
  padding:8px var(--space-3);
  border-bottom:1px solid var(--color-border-2);
  background:var(--color-bg-2);border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.pk-gn{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--color-text-1);font-size:var(--font-size-h4);
}
.pk-gc{flex:0 0 auto;color:var(--color-text-3);font-size:var(--font-size-caption)}
.pk-gone{flex:0 0 auto;color:var(--color-text-4);font-size:var(--font-size-caption)}
.pk-go{
  flex:0 0 auto;height:26px;padding:0 var(--space-3);
  border:1px solid var(--color-border-3);border-radius:var(--radius-sm);
  background:var(--color-bg-1);color:var(--color-primary);
  font-size:var(--font-size-caption);cursor:pointer;
}
.pk-go:hover{border-color:var(--color-primary)}
.pk-t{width:100%;border-collapse:collapse;font-size:var(--font-size-body)}
.pk-t th,.pk-t td{
  padding:6px var(--space-3);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--color-table-border);
}
.pk-t th{
  background:var(--color-table-header-bg);color:var(--color-table-header-text);
  font-weight:normal;white-space:nowrap;
}
.pk-t tr:last-child td{border-bottom:0}
/* 列宽预算：属性值最长（可能是整句描述）占可变宽，其余三列按内容定宽 */
.pk-t .pk-v{min-width:180px;color:var(--color-text-1);word-break:break-all}
.pk-t .pk-u,.pk-t .pk-b{white-space:nowrap;color:var(--color-text-2);width:72px}
.pk-t .pk-r{color:var(--color-text-2);width:42%}
.pk-empty{padding:var(--space-5);text-align:center;color:var(--color-text-3)}
.mp-modal .mf .btn.ghost:hover{background:var(--color-bg-4)}
.mp-modal .al-hint{color:var(--color-text-3);font-size:var(--font-size-body)}
.mp-modal .al-ta{
  border-color:var(--color-border-3);
  border-radius:var(--radius-sm);
  color:var(--color-text-1);
}
.mp-modal .al-ta:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--state-focus);
}
.mp-modal .al-cnt{color:var(--color-text-3);font-size:var(--font-size-caption)}

/* --- 弹窗外壳：圆角 12→8（float 层用 shadow-4，符合源力「浮层才用深阴影」） --- */
.mp-modal{box-shadow:var(--shadow-4)}
/* 🔴 【批次 20】宽弹窗宽度：共享层 `.modal.wide` 已恢复**客户端原值 760px**（见 base.css 批次 20 注释 ——
 *   批 12 曾从共享层把它改小到 640px，等于改了客户端）。商家端在此承接源力口径 640px。
 *   `.mp-modal.wide`(0,2,0) 与 `.modal.wide`(0,2,0) 同特异性、本文件加载更晚 ⇒ 必胜。 */
.mp-modal.wide{width:640px}

/* ---------------------------------------------------------------
 * 【批 4 误改的清理（2026-10-06 视觉验证后回滚）】
 * 此处原有约 100 行 `.mp-modal` 下的控件规则（.sp-pick-list / .sp-opt / .so-l / .oc-n /
 * .stepper / .dept-mod / .dp-pick / .rule-tip）—— 前提是「加购与换规格弹窗归商家端」，
 * 而该前提经核实为**错误**：这两个弹窗的触发动作 `addcart` / `chg-spec` 全在 10-client.js，
 * 它们**是客户端弹窗**（已回滚 cls 为 `hc-modal`）。既然控件只出现在客户端弹窗里，
 * 这些「通过 .mp-modal 给客户端控件上源力色」的规则既**永不命中**，又只是
 * 「跨端串色」念头的残骸 —— 一并删除，避免日后被误当成有效规则。
 * 🔴 客户端弹窗内的控件样式归客户端设计系统（`.shell.hc-c` + `.hc-modal` + `.login.lg-c`），
 *    **不在商家端 `public/m/` 的职责范围内**，不要在这里补。
 * --------------------------------------------------------------- */

/* ---------------------------------------------------------------
 * 【2026-10-06 收口】客户端弹层命名空间全量归位
 * §七 那次回滚只救了「加购 / 换规格」两个弹窗；客户端除它们之外还有一批弹层（收货地址、
 * 提交订单、成员账号、部门增删改、取消订单 / 确认收货、清空购物车、删除地址、注册新企业、
 * 修改登录密码…）**从未挂过 `hc-modal`** —— 它们在 #modal-root（.shell 之外）里退回 `:root`
 * 默认令牌，主按钮是墨黑 `#1C1C1E` 而不是客户端品牌黄。本批已逐个补齐（16 处；其中
 * 「修改登录密码」双端共用，改为按端判定），并在 styles.css 补 `.hc-modal .btn.pri` 深字
 * （黄底白字仅 ~1.5:1）。回归判据见 test/deptbuy-guard-smoke.js §14.1。
 * --------------------------------------------------------------- */


/* ================================================================
 * 八、批次 3 收口：批次 2 标注的三处未覆盖区
 * ================================================================
 * 本批**只改视觉语言**（色 / 圆角 / 描边 / 字阶 / 字重 / 过渡），
 * 不动任何宽高、栅格、内边距数值、定位与溢出策略。
 * 三处目标：8.1「定制客户端导航」三栏、8.2 代下单明细区、8.3 商品管理抽屉。
 * ================================================================ */

/* ---------------------------------------------------------------
 * 8.0 修正批次 1 的一处回归：视口固定布局被削弱
 * ---------------------------------------------------------------
 * public/m/shell.css 的 `.shell.hc-m .content` 设了 `overflow-y:auto`，
 * 与 styles.css:3506 的 `.shell.hc-mcust-nav .content{overflow:hidden}` **同为 (0,3,0)**，
 * 而 public/m/ 后加载 ⇒ 视口固定所需的 `overflow:hidden` 被覆盖（该页签本应「只有右下商品表滚」）。
 * ⚠️ 该结论由「特异性相同 + 加载顺序」推导得出，未做浏览器实测；此处按级联规则显式还原。
 * 此处以 (0,4,0) 双类限定显式还原，只命中「定制客户端导航」页签，其余三页签不受影响。
 * 同一处的内边距回归已在 shell.css 侧修掉（那里不再写 content padding）。 */
@media (min-width:1081px){
  .shell.hc-m.hc-mcust-nav .content{overflow:hidden}
}

/* ---------------------------------------------------------------
 * 8.1 客户详情 ·「定制客户端导航」三栏（.hc-mcust）
 * ---------------------------------------------------------------
 * 原样式「整段对齐客户端商品目录页」（styles.css:3409 起，用 .cat-tree / .cnav-it 那一套）。
 * 本次按商家端统一口径改挂源力语言：18px 圆角 → 8px；10px 条目圆角 → 4px；
 * 选中态由「深色实底 / --pri-action」改为「主色弱底 + 主色文字」；字号收敛到 4 档字阶。
 * 视口固定（三栏各自内滚）由 8.0 与 styles.css 的 .hc-mcust-nav 块共同保证，此处不碰。 */
.shell.hc-m.hc-mcust .cnv-rail{
  background:var(--color-bg-4);
  border-radius:var(--radius-md);
}
.shell.hc-m.hc-mcust .cnv-rail-none{color:var(--color-text-3);font-size:var(--font-size-body)}
.shell.hc-m.hc-mcust .cnv-tree{
  background:var(--color-bg-card);
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-md);
}
.shell.hc-m.hc-mcust .cnv-tree-h{
  color:var(--color-text-3);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-medium);
  letter-spacing:.4px;
}
.shell.hc-m.hc-mcust .cnv-rt{border-radius:var(--radius-sm);transition:background .14s ease}
.shell.hc-m.hc-mcust .cnv-rt:hover{background:var(--color-bg-card)}
.shell.hc-m.hc-mcust .cnv-rt.on{background:var(--color-primary-bg)}
.shell.hc-m.hc-mcust .cnv-rt-ic{
  border-radius:var(--radius-sm);
  background:var(--color-bg-card);
  color:var(--color-text-3);
}
.shell.hc-m.hc-mcust .cnv-rt.on .cnv-rt-ic{color:var(--color-primary)}
.shell.hc-m.hc-mcust .cnv-rt-tx b{
  font-size:var(--font-size-h4);
  font-weight:var(--font-weight-regular);
  color:var(--color-text-2);
}
.shell.hc-m.hc-mcust .cnv-rt.on .cnv-rt-tx b{
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mcust .cnv-rt-tx i{color:var(--color-text-3);font-size:var(--font-size-caption)}
.shell.hc-m.hc-mcust .cnv-rt.on .cnv-rt-tx i{color:var(--color-primary)}
.shell.hc-m.hc-mcust .cnv-rt.off .cnv-rt-tx b{color:var(--color-text-4)}
.shell.hc-m.hc-mcust .cnv-rt-ops{font-size:var(--font-size-caption)}
.shell.hc-m.hc-mcust .cnv-c1{border-radius:var(--radius-sm);transition:background .14s ease}
.shell.hc-m.hc-mcust .cnv-c1:hover{background:var(--color-bg-4)}
.shell.hc-m.hc-mcust .cnv-c1.on{background:var(--color-primary-bg)}
.shell.hc-m.hc-mcust .cnv-c1 b{
  font-size:var(--font-size-lead);
  font-weight:var(--font-weight-regular);
  color:var(--color-text-2);
}
.shell.hc-m.hc-mcust .cnv-c1.on b{color:var(--color-primary);font-weight:var(--font-weight-medium)}
.shell.hc-m.hc-mcust .cnv-c1 i{color:var(--color-text-3);font-size:var(--font-size-caption)}
.shell.hc-m.hc-mcust .cnv-c1.on i{color:var(--color-primary)}
.shell.hc-m.hc-mcust .cnv-c1-grp{
  color:var(--color-text-3);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-medium);
  letter-spacing:.4px;
}
/* 二级分类 chips：999px 胶囊 → 4px 圆角 + 描边环；选中 = 主色弱底（与 .seg 同语法） */
.shell.hc-m.hc-mcust .cnv-c2chip{
  height:var(--m-ctrl-h);
  border:0;
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  box-shadow:0 0 0 1px var(--color-border-3);
  color:var(--color-text-2);
  font-size:var(--font-size-body);
}
.shell.hc-m.hc-mcust .cnv-c2chip:hover{
  background:var(--color-bg-4);
  box-shadow:0 0 0 1px var(--primary-3);
  color:var(--color-text-1);
}
.shell.hc-m.hc-mcust .cnv-c2chip.on{
  background:var(--color-primary-bg);
  box-shadow:0 0 0 1px var(--primary-3);
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mcust .cnv-c2-hint{color:var(--color-text-3);font-size:var(--font-size-body)}
.shell.hc-m.hc-mcust .cnv-empty{color:var(--color-text-3);font-size:var(--font-size-lead)}
.shell.hc-m.hc-mcust .cnv-tbl .cnv-cod-t{
  color:var(--color-link);
  font-size:var(--font-size-lead);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mcust .cnv-tbl .cnv-tbl-empty{color:var(--color-text-3)}

/* ---------------------------------------------------------------
 * 8.2 代下单页明细区（.hc-mordnew）
 * ---------------------------------------------------------------
 * 原样式是全局 `.mn-*`（今落 `merchant.css` 与 `shared/base.css` 的 `.mn-sec` 段），为本页专用。
 * 改挂源力语言：控件 4px 圆角 + 描边环；金额用主色；合计用 h2 字阶。布局不动。
 * 🔴 2026-10-08 **设计系统重构**（依据 `hengcai-merchant-console/order-new-design/` 四张设计稿）——
 *   本次**首次动布局**：两块卡片化、新增三步流程条、表单按语义分行、明细表列合并（图片并入商品列）、
 *   底部常驻汇总条、引导空态、抽屉卡片层级。细则见本节末 `8.2b`，视觉语言仍全部走源力令牌。
 * ================================================================ */
.shell.hc-m.hc-mordnew .mn-sec-h{
  font-size:var(--font-size-h3);
  font-weight:var(--font-weight-medium);
  color:var(--color-text-1);
}
.shell.hc-m.hc-mordnew .mn-f{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m.hc-mordnew .mn-f input,
.shell.hc-m.hc-mordnew .mn-f select,
.shell.hc-m.hc-mordnew .mn-flt select{
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-1);
  font-size:var(--font-size-h4);
}
.shell.hc-m.hc-mordnew .mn-f input::placeholder{color:var(--color-text-3)}
.shell.hc-m.hc-mordnew .mn-f select:disabled{background:var(--color-bg-5);color:var(--color-text-4)}
.shell.hc-m.hc-mordnew .mn-tbl select{
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-2);
}
.shell.hc-m.hc-mordnew .mn-qbtn{
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-2);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.shell.hc-m.hc-mordnew .mn-qbtn:hover{
  background:var(--color-bg-4);
  border-color:var(--primary-3);
  color:var(--color-primary);
}
.shell.hc-m.hc-mordnew .mn-qty span{font-size:var(--font-size-lead)}
.shell.hc-m.hc-mordnew .mn-c-s{
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mordnew .mn-total{
  font-size:var(--font-size-h2);
  font-weight:var(--font-weight-semibold);
  color:var(--color-text-1);
}
.shell.hc-m.hc-mordnew .mn-empty{
  color:var(--color-text-3);
  font-size:var(--font-size-lead);
  border:1px dashed var(--color-border-3);
  border-radius:var(--radius-md);
}
.shell.hc-m.hc-mordnew .mn-err{
  color:var(--color-danger);
  background:var(--color-danger-bg);
  border-radius:var(--radius-sm);
  font-size:var(--font-size-body);
}
.shell.hc-m.hc-mordnew .mn-prod{
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-sm);
  transition:background .14s ease,border-color .14s ease;
}
.shell.hc-m.hc-mordnew .mn-prod:hover{background:var(--color-bg-4);border-color:var(--primary-3)}
.shell.hc-m.hc-mordnew .mn-prod-n{
  font-size:var(--font-size-lead);
  font-weight:var(--font-weight-medium);
  color:var(--color-text-1);
}
.shell.hc-m.hc-mordnew .mn-prod-m{color:var(--color-text-3);font-size:var(--font-size-body)}
/* 明细末尾「＋ 添加明细」整行加号入口（原工具栏按钮下移至此） */
.shell.hc-m.hc-mordnew .mn-addrow{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  box-sizing:border-box;margin-top:10px;padding:10px 14px;font-family:inherit;font-size:var(--font-size-h4);
  font-weight:var(--font-weight-medium);color:var(--color-primary);background:transparent;
  border:1px dashed var(--color-border-3);border-radius:var(--radius-sm);cursor:pointer;
  transition:border-color .14s ease,background .14s ease}
.shell.hc-m.hc-mordnew .mn-addrow:hover{border-color:var(--primary-3);background:var(--color-bg-4)}
.shell.hc-m.hc-mordnew .mn-addrow:disabled{color:var(--color-text-4);border-color:var(--color-border-2);
  background:transparent;cursor:not-allowed}
.shell.hc-m.hc-mordnew .mn-addrow b{font-size:var(--font-size-lead);line-height:1}
/* 明细行数量直接输入（步进器中间格） */
.shell.hc-m.hc-mordnew .mn-qinp{width:52px;height:26px;text-align:center;font-family:inherit;
  font-size:var(--font-size-h4);font-variant-numeric:tabular-nums;color:var(--color-text-1);
  background:var(--color-bg-1);border:1px solid var(--color-border-3);border-radius:var(--radius-sm);
  box-sizing:border-box;padding:0}
/* 选品面板：分组切换 / 提示 / 「已加 N」角标 / 面板底部汇总 */
.shell.hc-m.hc-mordnew .mn-grp{margin-bottom:8px}
.shell.hc-m.hc-mordnew .mn-grp-hint{font-size:var(--font-size-body);color:var(--color-text-3);margin:0 0 10px}
.shell.hc-m.hc-mordnew .mn-dw-cnt{margin-left:auto;font-size:var(--font-size-body);color:var(--color-text-3);white-space:nowrap}
.shell.hc-m.hc-mordnew .mn-prod{cursor:pointer}
.shell.hc-m.hc-mordnew .mn-done{flex:0 0 auto;font-size:var(--font-size-body);font-weight:var(--font-weight-medium);
  color:var(--color-primary);background:var(--primary-2);border-radius:var(--radius-sm);padding:2px 8px;white-space:nowrap}
.shell.hc-m.hc-mordnew .mn-prod-add{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--radius-full);background:var(--color-primary);color:var(--on-action);
  font-size:var(--font-size-lead);line-height:1}
.shell.hc-m.hc-mordnew .mn-dw-foot{display:flex;align-items:center;gap:12px;justify-content:flex-end;
  padding:12px 22px;border-top:1px solid var(--color-border-2);background:var(--color-bg-card);flex-shrink:0}
.shell.hc-m.hc-mordnew .mn-dw-sum{margin-right:auto;font-size:var(--font-size-h4);color:var(--color-text-2);
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------
 * 8.2b 代下单页 · 2026-10-08 设计系统重构（依据 order-new-design/ 四张设计稿）
 * ---------------------------------------------------------------
 * 只改**视觉语言 + 页内栅格**：两块卡片化 / 新增三步流程条 / 表单按语义分行 /
 * 明细表列合并（图片并入商品列）/ 底部常驻汇总条 / 引导空态 / 抽屉卡片层级。
 * 🔴 不动任何 data-act / id / name / 表单字段顺序（boot.js 委派 + test/mordernew-smoke.js 断言）。
 * 🔴 不动抽屉宽度档与 `@media (max-width:1080px)` 的全宽回退清单（那是两端共用约束）。
 * 🔴 `.mn-form`（3 列网格）已不再被本页使用 —— 其规则**刻意保留**在 merchant.css / shared/base.css：
 *    删它要连带扫 base.css 的 ≤900px 媒体查询，收益低于风险；CSS 死代码无门禁覆盖，此处留痕备查。
 * ================================================================ */

/* --- 卡片：两段（客户与交付信息 / 订单商品明细）升为白底描边卡（8px 圆角，静态面不用阴影） --- */
.shell.hc-m.hc-mordnew .mn-sec{
  background:var(--color-bg-card);
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);
}
/* --- 三步流程条：已完成=绿 / 当前=主色弱底 + 主色描边环 / 待办=灰底 --- */
.shell.hc-m.hc-mordnew .mn-steps{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:18px;
}
.shell.hc-m.hc-mordnew .mn-step{
  display:inline-flex;align-items:center;gap:var(--space-2);height:var(--m-ctrl-h);
  padding:0 var(--space-3);border-radius:var(--radius-sm);
  font-size:var(--font-size-body);color:var(--color-text-3);background:var(--color-bg-4);
}
.shell.hc-m.hc-mordnew .mn-step b{
  display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:var(--radius-sm);font-size:var(--font-size-caption);
  font-weight:var(--font-weight-medium);background:var(--color-bg-5);color:var(--color-text-3);
}
.shell.hc-m.hc-mordnew .mn-step.done{
  background:var(--color-success-bg);color:var(--color-success);font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mordnew .mn-step.done b{background:var(--color-success);color:var(--color-on-primary)}
.shell.hc-m.hc-mordnew .mn-step.on{
  background:var(--color-primary-bg);color:var(--color-primary);font-weight:var(--font-weight-medium);
  box-shadow:0 0 0 1px var(--primary-3);
}
.shell.hc-m.hc-mordnew .mn-step.on b{background:var(--color-primary);color:var(--color-on-primary)}
.shell.hc-m.hc-mordnew .mn-step-ln{width:16px;height:1px;background:var(--color-text-4)}

/* --- 表单栅格：按语义分行（客户行 / 交付行 / 详细地址 / 补充行），行内底部对齐 --- */
.shell.hc-m.hc-mordnew .mn-grid{display:flex;flex-direction:column;gap:var(--space-3)}
.shell.hc-m.hc-mordnew .mn-row{display:grid;gap:var(--space-5);align-items:end}
.shell.hc-m.hc-mordnew .mn-row-ent{grid-template-columns:360px minmax(0,1fr)}
.shell.hc-m.hc-mordnew .mn-row-deliv{grid-template-columns:360px minmax(0,1fr) minmax(0,1fr)}
.shell.hc-m.hc-mordnew .mn-row-extra{grid-template-columns:260px minmax(0,1fr)}
/* 控件高 36 → 32（源力 --m-ctrl-h）。本节加载在 merchant.css 之前，故必须用 4 类前缀压过 `.mn-f input` */
.shell.hc-m.hc-mordnew .mn-f input,
.shell.hc-m.hc-mordnew .mn-f select{height:var(--m-ctrl-h)}
/* 客户摘要：与企业客户下拉同行、底对齐 */
.shell.hc-m.hc-mordnew .mn-sum{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding-bottom:6px}
/* 地址簿带入提示：只在真的从地址簿取过值时出现（判据见 mOrderNewView 的 autoTip） */
.shell.hc-m.hc-mordnew .mn-autofill{font-size:var(--font-size-body);color:var(--color-text-3)}

/* --- 商品复合列（取代原「图片」独立列）：36px 缩略图 + 名称 + 编码 · 分类 --- */
.shell.hc-m.hc-mordnew .mn-pc{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.shell.hc-m.hc-mordnew .mn-pc-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.shell.hc-m.hc-mordnew .mn-pc .main-name{
  font-size:var(--font-size-lead);font-weight:var(--font-weight-medium);color:var(--color-text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shell.hc-m.hc-mordnew .mn-pc .meta{
  font-size:var(--font-size-body);color:var(--color-text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 缩略图：明细表与选品卡片共用；由 `.cat-img .thumb` 的 80px 收到 36px */
.shell.hc-m.hc-mordnew .mn-tbl .thumb,
.shell.hc-m.hc-mordnew .mn-prod .thumb{
  width:36px;height:36px;border-radius:var(--radius-sm);object-fit:cover;
  background:var(--color-bg-4);border:0;flex:0 0 auto;
}
.shell.hc-m.hc-mordnew .mn-tbl .thumb.no-img,
.shell.hc-m.hc-mordnew .mn-prod .thumb.no-img{
  display:flex;align-items:center;justify-content:center;
  font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-3);
}

/* --- 底部常驻汇总条：左（合计 + 行/件说明）· 右（重置清空 / 提交订单） --- */
.shell.hc-m.hc-mordnew .mn-foot{
  padding:var(--space-4) 0 0;margin-top:var(--space-3);
  border-top:1px solid var(--color-border-2);
}
.shell.hc-m.hc-mordnew .mn-foot-l{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
.shell.hc-m.hc-mordnew .mn-foot-l .mn-total{margin-right:0}
.shell.hc-m.hc-mordnew .mn-foot-sub{font-size:var(--font-size-body);color:var(--color-text-3)}

/* --- 引导空态：只作用于 `.mn-empty-lg`；抽屉里那句朴素 `.mn-empty` 不受影响 --- */
.shell.hc-m.hc-mordnew .mn-empty.mn-empty-lg{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-2);padding:40px var(--space-4);
}
.shell.hc-m.hc-mordnew .mn-empty-ic{color:var(--color-text-4);margin-bottom:var(--space-1)}
.shell.hc-m.hc-mordnew .mn-empty-lg b{
  font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);color:var(--color-text-2);
}
.shell.hc-m.hc-mordnew .mn-empty-lg span{font-size:var(--font-size-body);color:var(--color-text-3)}

/* --- 选品抽屉卡片：缩略图 + 文字列（名称 / 编码 · 分类 · 供货状态）+ 已加角标 + 价格 + 加号 --- */
.shell.hc-m.hc-mordnew .mn-prod{padding:var(--space-3)}
.shell.hc-m.hc-mordnew .mn-prod-tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.shell.hc-m.hc-mordnew .mn-prod-tx .mn-prod-n{
  flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shell.hc-m.hc-mordnew .mn-prod-tx .mn-prod-m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 供货状态三色（现货 / 缺货 · 预询 / 已停用）：与订单详情页 badge 同口径 */
.shell.hc-m.hc-mordnew .mn-st.ok{color:var(--color-success)}
.shell.hc-m.hc-mordnew .mn-st.pre{color:var(--color-warning)}
.shell.hc-m.hc-mordnew .mn-st.off{color:var(--color-danger)}
.shell.hc-m.hc-mordnew .mn-prod-p{
  flex:0 0 auto;font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);
  color:var(--color-text-1);font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* 「＋」加入控件：由「实心主色圆」改为「白底描边方 + 主色加号」（设计稿 order-new-03-drawer）。
 * 🔴 整卡仍是唯一点击区（data-act="mn-add"），此控件纯视觉引导，不加独立动作。 */
.shell.hc-m.hc-mordnew .mn-prod-add{
  background:var(--color-bg-1);color:var(--color-primary);
  border:1px solid var(--color-border-3);border-radius:var(--radius-sm);
}

/* --- ≤900px：本页表单分行降为单列（旧 `.mn-form` 的降级规则不再命中本页，故此处补） --- */
@media (max-width:900px){
  .shell.hc-m.hc-mordnew .mn-row{gap:var(--space-3)}
  .shell.hc-m.hc-mordnew .mn-row-ent,
  .shell.hc-m.hc-mordnew .mn-row-deliv,
  .shell.hc-m.hc-mordnew .mn-row-extra{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------
 * 8.3 商品管理抽屉内部（.hc-mprod · .drw-prod）
 * ---------------------------------------------------------------
 * 🔴 这批规则在 styles.css 里已是**双段选择器** `.shell.hc-mprod .drw-prod X`（0,4,0），
 *   故此处必须用 (0,5,0)「双类限定壳 + 同名后代」才压得住 —— 单靠 `.shell.hc-m X`（0,3,0）会失效。
 * 抽屉体、表单字段、规格编辑器、标签选择器四组。布局（宽 880 / 头脚 64px / 栅格）一律不动。 */

/* 抽屉头 / 体 / 脚 */
.shell.hc-m.hc-mprod .drw-prod .drw-h{border-bottom:1px solid var(--color-border-2)}
.shell.hc-m.hc-mprod .drw-prod .drw-b{background:var(--color-bg-4)}
.shell.hc-m.hc-mprod .drw-prod .drw-f{
  border-top:1px solid var(--color-border-2);
  background:var(--color-bg-card);
}
.shell.hc-m.hc-mprod .drw-prod .btn{
  height:var(--m-ctrl-h);
  border-radius:var(--radius-sm);
  font-size:var(--font-size-h4);
  font-weight:var(--font-weight-medium);
}

/* 分段卡片 */
.shell.hc-m.hc-mprod .drw-prod .pform-sec{
  background:var(--color-bg-card);
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-md);
}
.shell.hc-m.hc-mprod .drw-prod .pform-sec .card-title{
  font-size:var(--font-size-h3);
  font-weight:var(--font-weight-medium);
  color:var(--color-text-1);
}

/* 表单字段（.field / .fg 是全局类，此处按抽屉作用域收敛） */
.shell.hc-m.hc-mprod .drw-prod .field label{
  font-size:var(--font-size-lead);
  font-weight:var(--font-weight-medium);
  color:var(--color-text-2);
}
.shell.hc-m.hc-mprod .drw-prod .field label .req{color:var(--color-danger)}
.shell.hc-m.hc-mprod .drw-prod .field label .opt{
  color:var(--color-text-3);
  font-weight:var(--font-weight-regular);
}
.shell.hc-m.hc-mprod .drw-prod .fg{gap:0 var(--space-4)}

/* 规格编辑器 */
.shell.hc-m.hc-mprod .drw-prod .sp-ed-head{border-bottom:1px dashed var(--color-border-2)}
.shell.hc-m.hc-mprod .drw-prod .sp-ed-wrap{background:var(--color-bg-card)}
.shell.hc-m.hc-mprod .drw-prod .sp-ed-bar{gap:var(--space-3)}

/* 标签选择器（.ptag-* 仅本抽屉使用） */
.shell.hc-m.hc-mprod .drw-prod .ptag-ph{
  color:var(--color-text-3);
  font-size:var(--font-size-body);
}
.shell.hc-m.hc-mprod .drw-prod .ptag-chip{
  border-radius:var(--radius-sm);
  font-size:var(--font-size-body);
}
.shell.hc-m.hc-mprod .drw-prod .ptag-opt{
  border-radius:var(--radius-sm);
  font-size:var(--font-size-body);
}
.shell.hc-m.hc-mprod .drw-prod .ptag-opt:hover{border-color:var(--primary-3)}
.shell.hc-m.hc-mprod .drw-prod .ptag-opt.on{
  border-color:var(--color-primary);
  background:var(--color-primary-bg);
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mprod .drw-prod .ptag-opt.on .ptag-ck{
  background:var(--color-primary);
  border-color:var(--color-primary);
}
/* 【2026-10-25 清理死代码】此处原有一条 `.shell.hc-m.hc-mprod .drw-prod .ptag-panel{border-radius:var(--radius-sm)}`
 * —— 与本文件后方 §16 的同**选择器**规则（`--radius-md`）完全重复，级联上后者必胜，前者永不生效。
 * 「同一选择器写两条、后者静默覆盖前者」与「对象键重复」是同族缺陷：改前一条毫无效果，
 * 而读代码的人会以为 4px 生效。已删除，保留后方那条（8px）。 */

/* 其余三个抽屉（关联 / 专属价 / 可见客户）共用的字段与骨架 */
.shell.hc-m .drw-rel .field label,
.shell.hc-m .drw .field label{
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-medium);
  color:var(--color-text-2);
}
.shell.hc-m .drw-rel .field label .req,
.shell.hc-m .drw .field label .req{color:var(--color-danger)}
.shell.hc-m .drw-rel .field label .opt,
.shell.hc-m .drw .field label .opt{
  color:var(--color-text-3);
  font-weight:var(--font-weight-regular);
}
/* 注：商家端「加入购物车 / 选择规格」两个弹窗**曾经**在批 4 被误改成 `.mp-modal`，已于
 * 2026-10-06 回滚为 `.hc-modal`（判端依据见本文件 §七）。本层的 `.mp-modal` 现在**只**服务
 * 「搜索别名」弹窗（30-prod.js，唯一的商家端弹层使用者）。 */

/* ---------------------------------------------------------------
 * 8.4 商品图片图集（2026-10-12 抽屉重构 · 二次改版）：一排 6 格纯缩略图
 * ---------------------------------------------------------------
 * 掌柜定稿：图片区就是一条 **6 等分**的缩略图条带 + 其下一行操作。
 *   · 上一版的「左 72px 竖排缩略图 + 右 1:1 大图」已整体退场 —— 竖排栏带 `max-height:240px`，
 *     6 张主图时只能看到 3 张、要滚动才看得全（掌柜报的就是这个）。
 *   · 右栏可用宽 ≈ 547px（1400 抽屉 − 48 `.drw-b` padding − 16 gap → 右列 ≈ 581 − 32 卡内距
 *     − 2 边框）⇒ `repeat(6, minmax(0,1fr))` + 8px gap 时每格 ≈ 84px。
 *   · 「＋」只在**不满 6 张**时渲染（core.js 侧控制），跟在末尾占一格；满 6 张自动消失。
 * 类名 `pimg-*` 仍是自建命名空间，**不复用**客户端详情页的 `.pd-*` / `.gal-th`：后者的交互
 * 写死 `t.closest('.pd-gallery')`，且其视觉覆盖只挂在 `.shell.hc-c` 作用域下，商家端拿不到。
 * 结构：`#prod-imgs.pimg` > `.pimg-rail`（6 等分缩略图 + 「＋」）+ `.pimg-ops`（操作行）。
 * 🔴 `#img-prev` 挂在**条带容器** `.pimg-rail` 上 —— 它是粘贴目标判定锚点
 *   （`boot.js` 的 `hcImgPasteTarget` 只判「元素存在 + 在 `.drw` 内」，不看几何、不写内容）。
 * 🔴 `#prod-img-file` 藏在 `.pimg-add` 的 `<label>` 内（`boot.js` 按 **id** 命中，与位置无关）。 */
.shell.hc-m.hc-mprod .drw-prod .pimg-wrap{margin-top:var(--space-3)}
.shell.hc-m.hc-mprod .drw-prod .pimg{display:flex;flex-direction:column;gap:var(--space-3)}
/* 6 等分：格子宽度与图片数量无关（不足 6 张时右侧留白、「＋」紧跟末尾），刻度稳定。 */
.shell.hc-m.hc-mprod .drw-prod .pimg-rail{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2);
}
.shell.hc-m.hc-mprod .drw-prod .pimg-th{
  width:100%;aspect-ratio:1/1;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--color-border-2);border-radius:var(--radius-md);background:var(--color-bg-4);
}
/* 2026-10-12 §8.5：`.pimg-th` 的 hover 反馈由「只改 border-color（浅灰底上几乎看不出）」
 *   加强为「主色描边 + 轻阴影」——**纯 paint**，不参与布局（禁改尺寸类属性；见 §8.5 ③ 的说明）。 */
.shell.hc-m.hc-mprod .drw-prod .pimg-th:hover{border-color:var(--color-primary);box-shadow:0 2px 8px rgba(22,100,255,.14)}
.shell.hc-m.hc-mprod .drw-prod .pimg-th.on{
  border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-bg);
}
.shell.hc-m.hc-mprod .drw-prod .pimg-th img{width:100%;height:100%;object-fit:contain;display:block}
.shell.hc-m.hc-mprod .drw-prod .pimg-add{
  width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--color-border);border-radius:var(--radius-md);
  color:var(--color-text-3);font-size:var(--font-size-h3);cursor:pointer;
  position:relative; /* 供 .busy 的转圈 ::after 定位；**不设 top/left** ⇒ 视觉与布局零变化 */
}
.shell.hc-m.hc-mprod .drw-prod .pimg-add:hover{border-color:var(--color-primary);color:var(--color-primary)}
/* 2026-10-16 §8.6：「＋」上传中的**卡片级 busy 态** —— 转圈 + 禁点，替代原先只有 toast 的裸反馈。
 *   只改 color / border-color / opacity 与 ::after 的绘制，**不碰任何参与布局的属性**（禁尺寸类）。
 *   color:transparent 把「＋」隐掉，只留转圈（纯 paint，不改尺寸）。 */
.shell.hc-m.hc-mprod .drw-prod .pimg-add.busy{
  cursor:progress;color:transparent;border-color:var(--color-primary);pointer-events:none;
}
.shell.hc-m.hc-mprod .drw-prod .pimg-add.busy::after{
  content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;border:2px solid var(--color-primary-bg);border-top-color:var(--color-primary);
  animation:hcRot .7s linear infinite;
}
.shell.hc-m.hc-mprod .drw-prod .pimg-ops{
  display:flex;gap:var(--space-3);align-items:center;margin-top:var(--space-2);
  font-size:var(--font-size-body);color:var(--color-text-3);
}
.shell.hc-m.hc-mprod .drw-prod .pimg-tag{
  display:inline-flex;align-items:center;height:20px;padding:0 var(--space-2);
  border-radius:var(--radius-sm);background:var(--color-primary-bg);color:var(--color-primary);
  font-size:var(--font-size-body);
}
.shell.hc-m.hc-mprod .drw-prod .pimg-note{
  display:flex;align-items:flex-start;gap:var(--space-3);margin-top:var(--space-3);
  font-size:var(--font-size-body);color:var(--color-text-3);line-height:1.7;
}
.shell.hc-m.hc-mprod .drw-prod .pimg-note .link{flex:0 0 auto}
/* 右栏两块的高度分配（2026-10-12）：
 *   · 图片卡**不收缩**（`flex:0 0 auto`）—— 否则空间不足时大图会被压扁；
 *   · 详情卡**可收缩**（`flex:0 1 auto;min-height:0`）—— 空间不足时先压详情卡；
 *     编辑器 `flex:1 1 auto` 吃掉剩余高度，`min-height:120px` 保底可写。
 * 实测 1440×900：图片卡 370 + 详情卡 ≈348 = 732，**两块恰好都常驻可见**；
 * 更高视口时编辑区自动变高；更矮视口（768）撑到 min 后由右栏自身滚动兜底，不破版。
 * ⚠️ 不做 `position:sticky` 工具栏（原依据：自研 `.rt-toolbar` 自带 `margin-bottom:8px`，吸顶时那条缝隙会
 *   露出滚动内容 —— 该工具栏已于 2026-10-12 换成 WangEditor V5、类亦于 2026-10-14 死 CSS 清理删除，
 *   **结论保留**）：而编辑区自身可滚，工具栏在其上方常态可见。 */
.shell.hc-m.hc-mprod .drw-prod .pform-img{flex:0 0 auto}
/* 🔴 2026-10-12 **第二版修正**（交互评估后）——本块取代上方 1310–1317 那段旧口径注释：
 *   旧版 = `max-height`（只有上限、没有定高）+ 详情卡 `flex:0 1 auto` + 编辑器 `flex:1 1 auto`。
 *   缺陷（真浏览器实测 1440×900）：右栏只写上限制 ⇒ **列高仍由内容决定**；编辑器 `flex-basis:auto`
 *   ⇒ **盒高取自内容**（placeholder 撑到 194.05）。两者叠加 ⇒「详情为空 ↔ 有一个字」时
 *   编辑器 194.05 → 120（**−74.05px**），且**整个右栏 732 → 657.95（−74px）**。
 *   修后实测：编辑器恒 194.05（比旧版 166 更宽裕）、空↔有内容 delta **0.00**、右栏恒 732。 */

/* ================================================================
 * 8.5 商品编辑抽屉 · 交互与视觉优化（2026-10-12）
 * ================================================================
 * 依据：`ABC/商家端商品编辑页-交互重构优化方案-2026-10-12.md`（真浏览器取证实测）。
 * 全部为**纯样式**：控件尺寸 / 点击区 / 编辑器图片限宽。**不动结构、不动接口、不动字段**。
 *
 * 🔴 只允许 hover / focus 改「颜色 / 背景 / 边框色 / 阴影 / 透明度」——
 *   本批新增规则**一律避开几何伪类**（唯一例外见 ⑩ `:disabled`，那是状态而非尺寸）。
 *    已实测坐实：真 hover / 真 focus 对抽屉几何位移 **0**、`animationstart` **0**、
 *    `MutationObserver` **0**、`layout-shift` **0**；全站 hover/focus 规则里改布局属性的
 *    抽屉内命中 5 条，全是 `transform`（合成层，不参与布局）或 `font-weight:500`
 *    （**Windows 中文下静默失效**）⇒ 均零位移。故「闪动」根因不在伪类，而在上方的高度分配与图片限宽。
 *
 * 🔴 取数脚本：`_assess/tmp/rte-flicker/probe{,2,3,4}.js`（含**负向对照**）＋ `report*.json`。
 *    修后实测：图片渲染宽 800 → 512.4（`#prod-info` scrollWidth 816 → 544，横向溢出 272 → 0）；
 *    「300 字 + 800px 大图 + hover 往返」26 次采样唯一值 `[194.05]`（零振荡）。
 *
 *    ⚠️ 本文件 §8.4 与 `merchant.css` 的基础 `.rt-edit` 规则均**未被删除**，本块以更高特异性覆盖。
 * ================================================================ */

/* ① 编辑器内图片 / 表格限宽
 * 缺陷：全库**没有** `.rt-edit img` 规则（只有客户端 `.rt-content img{max-width:100%}`，base.css:768）
 *   ⇒ 1688 详情图 800×800 在 544px 宽的编辑框里按原始尺寸渲染 + 横向滚动条，且商家端所见 ≠ 客户端所得。 */
.shell.hc-m.hc-mprod .drw-prod .pform-detail .rt-edit img{max-width:100%;height:auto;border-radius:8px;margin:8px 0}
.shell.hc-m.hc-mprod .drw-prod .pform-detail .rt-edit table{max-width:100%;border-collapse:collapse}
.shell.hc-m.hc-mprod .drw-prod .pform-detail .rt-edit td,
.shell.hc-m.hc-mprod .drw-prod .pform-detail .rt-edit th{border:1px solid var(--color-border-2);padding:4px 8px}

/* ② 单行输入 / 下拉：竖向留白 9px → 11px、最小高 40px
 *   🔴 用 **`.drw-prod .input` 全量覆盖**，不要按容器逐个列举（.fg / .kv-row / .sp-ed …）——
 *     `#c1688-url` 挂在采集卡的一个裸 flex 容器里，列举式写法**实测就漏了它**（复验时仍是 33px）。
 *   实测旧值：.input 33 / select.input 35 / #c1688-url 33 / .ssel-t 39。 */
.shell.hc-m.hc-mprod .drw-prod .input{padding:12px 14px;min-height:44px;font-size:var(--font-size-h4)}
/* `.sfx`（× / ¥ 前缀盒）内的 input 保持「无边框 + 只留竖向内距」的原设计，只借用上面的竖向增量 */
.shell.hc-m.hc-mprod .drw-prod .sfx .input{padding-left:0;padding-right:0}
.shell.hc-m.hc-mprod .drw-prod .ssel-t{padding:12px 14px;min-height:44px;font-size:var(--font-size-h4)}

/* ③ 抽屉内按钮 32 → 36px
 * 🔴 **不动全局 `--m-ctrl-h`（32px）** —— 它在 pages.css 有 8 处引用（工具栏 / 筛选 chip / 列设置…），
 *   改令牌会波及整个商家端。本条第 (0,5,0) 同特异性且靠后 ⇒ 覆盖 §8.2 的 `height:var(--m-ctrl-h)`。 */
.shell.hc-m.hc-mprod .drw-prod .btn{height:38px}

/* ④ 点击区扩容（实测旧值：.sc-op 26×26（↑ ↓ ✕ 三连，gap 2px））
 * ⚠️ 字号只能取源力档位（10/12/13/14/16/18/20/24）—— 本处曾写 15px，被 `merchant-type-scale-smoke` 拦下。
 * 【2026-10-12】原第 4 条 `.rt-btn{min-width:36px;height:34px;…}`（自研富文本工具栏按钮）已删 ——
 *   工具栏换成 wangEditor 的 `#prod-info-toolbar`，同口径尺寸改由 §8.6 ③ 的 `.w-e-bar-item button` 承担。 */
.shell.hc-m.hc-mprod .drw-prod .sc-op{width:34px;height:34px;font-size:16px}
.shell.hc-m.hc-mprod .drw-prod .sc-ops{gap:4px}
/* 文字型操作（.kv-x「移除」/ .pimg-ops 内 4 个链接 / .pimg-note「清空全部图片」）实测仅 19–20px 高。
 * 🔴 用 **inline-flex + min-height** 撑高命中区，**不用 `::after` 向外扩 8px** ——
 *   外扩垫会与相邻控件抢点击（本仓有过「浮层吃掉主操作」的教训）。代价：所在行会高约 12px。 */
.shell.hc-m.hc-mprod .drw-prod .kv-x,
.shell.hc-m.hc-mprod .drw-prod .pimg-ops .link,
.shell.hc-m.hc-mprod .drw-prod .pimg-note .link{display:inline-flex;align-items:center;min-height:34px;padding:0 8px}

/* ⑤ 工具栏与编辑区留白 —— 【2026-10-12】原两条（`.rt-toolbar` 间距 / `.rt-btn` 收窄 transition）
 *   已随自研工具栏退场而删除；wangEditor 工具栏的留白与内距见 §8.6 ②。
 *   历史背景保留：`merchant.css` 那条 `.rt-btn{transition:.14s}` 等价于 `transition: all`，
 *   会连带过渡尺寸类属性（当年即为此收窄）；wangEditor 自带样式无此问题。 */

/* ⑥ 规格参数「＋ 添加一行参数」视觉突出（虚线描边 + 主色，与同级 ghost 按钮区分） */
.shell.hc-m.hc-mprod .drw-prod [data-act="kv-add"]{border:1px dashed var(--color-primary);color:var(--color-primary);background:transparent}
.shell.hc-m.hc-mprod .drw-prod [data-act="kv-add"]:hover{background:var(--color-primary-bg)}

/* ⑦ 图片缩略图 hover 加强 —— **已就地写进 §8.4 的 `.pimg-th:hover`**
 *   （不在两处各写一条同选择器规则：靠「同特异性 + 靠后者胜出」隐式覆盖，会留一条死规则） */

/* ⑧ 保存失败错误条（配合 product-modals.js 的「失败不再 render()、保留已填内容」） */
.shell.hc-m.hc-mprod .drw-prod .pf-panes .save-err{
  border:1px solid var(--color-danger);background:var(--color-danger-bg);color:var(--color-danger);
  border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-size-body);line-height:1.6;
}

/* ⑨ 保存中锁的禁用态（配合 product-modals.js 的 in-flight 锁） */
.shell.hc-m.hc-mprod .drw-prod .btn:disabled{opacity:.6;cursor:not-allowed}

/* ⑩ 字段级行内错误提示（2026-10-16 阶段②b）—— **浮动式**：absolutely 定位，**不推动任何布局**。
 *   锚定到 `.field` 底边下方，落在 `.field` 自身 14px 的 margin 区内 ⇒ 下方字段不动。
 *   字号走 `--font-size-body`（12px）+ 行高 1.1 ⇒ 约 13.2px，正好落进 14px 间距。
 *   🔴 **不得硬编码字号/字重**：本项目源力字阶只有 10/12/13/14/16/18/20/24px、字重上限 600
 *      （首版误用 11.5px / 9px / font-weight:700 ⇒ `merchant-type-scale-smoke`
 *        与 `deptbuy-guard-smoke` 两条测试同时报红，已改回令牌）。 */
.shell.hc-m.hc-mprod .drw-prod .field{position:relative;margin-bottom:var(--space-4)}
.shell.hc-m.hc-mprod .drw-prod .field .field-err{
  position:absolute;left:0;top:100%;
  color:var(--color-danger);font-size:var(--font-size-body);line-height:1.1;
  pointer-events:none;white-space:nowrap;
}
.shell.hc-m.hc-mprod .drw-prod .field.has-err > label{color:var(--color-danger)}
.shell.hc-m.hc-mprod .drw-prod .field.has-err .input,
.shell.hc-m.hc-mprod .drw-prod .field.has-err .ssel-t{border-color:var(--color-danger)}

/* ================================================================
 * 8.6 商品详情富文本 · WangEditor V5 覆盖（2026-10-12）
 * ================================================================
 * 背景：自研 contenteditable + 自研工具栏已退场（`RT_TOOLS` / `rtToolbarHtml` / `bindRichTextToolbar`
 *   与 `merchant.css` 的 `.rt-btn` / `.rt-sep` / `.rt-hint` / `.rt-edit:empty::before` 一并删除）。
 *   现在两段式：`#prod-info-toolbar`（wangEditor 工具栏）＋ `#prod-info.rt-edit`（编辑器宿主）。
 *
 * 🔴 两处**不可改名**的锚点（既有护栏逐字钉住，见 test/mprod-two-col-smoke.js）：
 *    · `.pform-detail .rt-edit{flex:1 1 0;…}`（§8.4）—— 高度分配靠它，宿主 div 必须仍带 `.rt-edit`；
 *    · `.pform-detail .rt-edit img{max-width:100%;…}`（§8.5 ①）—— 详情图限宽，宿主仍是其祖先。
 * 🔴 门禁：字号只取源力八档（本块用 13px）、字重不新增、圆角只取 `var(--radius-*)`
 *    —— `merchant-type-scale-smoke` / `merchant-modal-ns-smoke` 会拦。
 * 🔴 wangEditor 自带 `style.css` 由 JS **懒加载**注入到 `<head>` 末尾，天然晚于本文件
 *    ⇒ 本块靠「更晚 + 更高特异性（`.shell.hc-m.hc-mprod .drw-prod` 前缀）」双重胜出，无需 `!important`。
 * ================================================================ */

/* ① 编辑器宿主：撑满详情卡剩余高度（高度分配见 §8.4），自身不滚动（滚动体是内部的 .w-e-scroll） */
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info{display:flex;flex-direction:column;overflow:hidden;padding:0}
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info .w-e-text-container{height:100%;min-height:120px}
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info .w-e-scroll{height:100%}
/* 正文内距从 `.rt-edit` 下移到这里（wangEditor 的可编辑节点是 `[data-slate-editor]`，字号沿用外框的 14px） */
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info [data-slate-editor]{padding:12px 16px;min-height:100%}
/* 占位文案：取代自研的 `.rt-edit:empty::before`（`data-placeholder` 由 wangEditor 自己渲染） */
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info .w-e-text-placeholder{color:var(--color-text-3);font-style:normal}
/* ② 工具栏条：描边 + 卡片底 + 与编辑区留白；z-index 保证它的下拉浮层盖在编辑区之上 */
.shell.hc-m.hc-mprod .drw-prod #prod-info-toolbar{border:1px solid var(--color-border-2);border-radius:var(--radius-md);background:var(--color-bg-card);margin-bottom:10px;position:relative;z-index:2}
/* ②b 工具栏压成**单行横向滚动**（2026-10-12 掌柜拍板）。
 *   问题：29 项在 546px 宽的右栏折成 **3 行 / 130px** ⇒ 详情编辑区被压到 `min-height:120px`
 *     （§8.4 记录改造前恒 ~194px）。
 *   做法：强制不换行 + 横向滚动 ⇒ 工具栏恒 1 行，编辑区回到 ~194px；标题下拉也不再逼近右栏底边。
 *   🔴 **必须配套**：wangEditor 的下拉面板（`.w-e-select-list` / `.w-e-drop-panel`）是 `.w-e-bar-item`
 *     （`position:relative`）内部的 `position:absolute` 元素；滚动容器的 `overflow-x:auto` 会让
 *     `overflow-y` 一并变 `auto`，**把标题 / 字号两个下拉整块裁掉**。故把 `.w-e-bar-item` 改成
 *     `position:static` ⇒ 面板改以 `#prod-info-toolbar`（`position:relative`）为包含块、逃逸裁剪，
 *     落在工具栏左上角正下方（`headerSelect` 本就是最左项，位置正好；字号等右侧项的面板会左对齐，
 *     属可接受的折中 —— 换来「编辑区高度」与「下拉可用」两者兼得）。 */
.shell.hc-m.hc-mprod .drw-prod #prod-info-toolbar .w-e-bar{padding:4px 6px;background:transparent;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.shell.hc-m.hc-mprod .drw-prod #prod-info-toolbar .w-e-bar-item{position:static;flex:0 0 auto}
.shell.hc-m.hc-mprod .drw-prod #prod-info-toolbar .w-e-bar-divider{flex:0 0 auto}
.shell.hc-m.hc-mprod .drw-prod #prod-info-toolbar .w-e-select-list{max-height:200px}
/* ③ 按钮点击区对齐被替代的自研 `.rt-btn`（曾为 34×36 / 13px，见 §8.5 ④ 的变更说明） */
.shell.hc-m.hc-mprod .drw-prod #prod-info-toolbar .w-e-bar-item button{min-width:36px;height:34px;padding:0 10px;font-size:var(--font-size-h4)}
/* ④ 懒加载失败时的降级态（product-form.js 的 mountProdEditor 给宿主加 `.rt-edit-fail`）：
 *   只读呈现原详情 + toast 提示；此时保存不会改动已有详情（见该函数的注释）。 */
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info.rt-edit-fail{padding:12px 16px;overflow:auto;font-size:var(--font-size-h4);color:var(--color-text-3)}

/* ⑤ 折行与自适应（2026-10-13）：编辑区实际渲染的 `<pre>` / `<table>` / `<img>` 与客户端 `.rt-content` 同口径。
 *   🔴 **必须用高特异性**：wangEditor 的 `dist/css/style.css` 是**懒加载**的（晚于本文件注入）
 *      ⇒ 同特异性下 vendor 会胜，故这里用 `.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info …`。
 *   🔴 `<pre>` 的 UA 默认 `white-space:pre` 永不折行 —— 掌柜库里那件把散文塞进 `<pre>` 的商品，
 *      最长行 84 汉字 ≈ 1092px，远超左栏约 700px，是本次「横向滚动条」的直接来源。 */
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info table{width:100%!important;max-width:100%;table-layout:fixed}
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info th,
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info td{overflow-wrap:anywhere;word-break:break-word}
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info img{max-width:100%;height:auto}
/* 🔴 `pre > code` 必须单独覆盖：wangEditor 的 `style.css` 对它显式写了
 *    `display:block; overflow:auto; white-space:pre; word-break:normal` —— 即"不折行 + 自身横滚"。
 *    只覆盖父级 `pre` 不够（真浏览器实测：`#prod-info` 自身不溢出，但内部 `<code>` 的
 *    `scrollWidth=1147 > clientWidth=484`，块内仍留着一条横向滚动条）。 */
.shell.hc-m.hc-mprod .drw-prod .pform-detail #prod-info pre>code{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}

/* ================================================================
 * 九、批次 5：旧商户色板退场 + 抽屉骨架与浮层收口
 * ================================================================
 * 本批解决**跨页色相不一致**这一根因，而非逐个改样式。
 *
 * 背景（实测）：styles.css 里有**两处**旧商户色板重映射块 ——
 *   `.shell.hc-mprod{ … }`（L1895，31 个令牌）与 `.shell.hc-mcat{ … }`（L2534，28 个令牌）。
 * 它们把整页令牌改写成另一套色板：`--pri:#0064E0`（旧商户蓝，≠ 源力 #1664FF）、
 * `--pri-weak:#FFF6DA`（**品牌黄**当作主色弱底！）、`--ink:#1D1D1F`、
 * `--line:#E4E7EC`、`--ok:#1E8E3E`、`--warn:#B26A00`、`--err:#D93025` …
 * 由于这两页的**全部**样式（含 165 条 `.drw-rel` 抽屉规则）都读这些令牌，
 * 逐条覆写既不现实（165 条）也易漏。故本批改为**在更高特异性上重写这套令牌** ——
 * 一处改动即让该页所有令牌驱动样式回到源力色板。
 *
 * 🔴 佐证「必须重写而非覆写」：`.shell.hc-mprod` 段内品牌关键色字面量共 47 处、
 *    `.shell.hc-mcat` 11 处（`.shell.hc-c` 客户端 4 处**不动**）。其中令牌形态的
 *    由本节 9.1 一次性解决；剩余**字面量**形态由 9.2/9.3 定点补齐。
 * 🔴 灰阶字面量（`#1D1D1F` / `#86868B` / `#E4E7EC` / `#F7F9FB` 等）**刻意不动**：
 *    与源力同色系、差值 2~3%（`#F7F9FB` vs `--color-bg-4:#F6F8FA`、`#1D1D1F` vs
 *    `--color-text-1:#0C0D0E`），肉眼不可辨；本批只清**色相**层面的冲突。
 *    【2026-10-07 批次 13 补】`merchant.css` 中 `.mp-dd-root` / `.mp-modal` 基线区块
 *    的 11 处灰阶/蓝冲突字面量已迁移到源力令牌；因该浮层在 body 下、 pages.css
 *    §9.3 已做视觉覆盖，基线清理属于技术债务缩减，不产生视觉差异。
 * ================================================================ */

/* ---------------------------------------------------------------
 * 9.1 旧商户色板 → 源力（**全商家端**）
 * ---------------------------------------------------------------
 * 覆盖面（2026-10-07 批次 8 扩大）：原只限定 `.shell.hc-mprod` / `.shell.hc-mcat` 两页，
 *   实测发现**其余 11 个商家端页面**（工作台 / 订单管理 / 订单详情 / 客户管理 / 客户详情 /
 *   员工权限 / 品牌 / 单位 / 导航页签 / 搜索盲区 / 图片存储 / 系统设置 / 帮助中心）的令牌
 *   仍是 `:root` 的**客户端时代值** —— 浏览器实测：`--pri:#0064E0`（旧商户蓝）、
 *   `--pri-weak:#FFF6DA`（品牌黄）、`--ink:#0A1317`、`--t5:#9AA3AD`。
 *   凡这些页面里用旧令牌写的规则（含模板内联 `var(--pri)`）都会渲染成旧色。
 *   ⇒ 本批把重写**上提到 `.shell.hc-m` 根**，一处生效、覆盖全部商家端页面。
 *
 * 特异性 (0,2,0)：与 `base.css` 的 `:root`(0,1,0) 及两处旧商户块 `.shell.hc-mprod` /
 *   `.shell.hc-mcat`(均 0,2,0) 相比，**同特异性但本文件加载更晚 ⇒ 必胜**。
 * 映射原则：同语义直接对应；`--pri-weak` 由黄改蓝（这是本批最大的观感修正）。 */
.shell.hc-m{
  /* 文本四档 */
  --ink:var(--color-text-1);
  --t1:var(--color-text-1);
  --t2:var(--color-text-2);
  --t3:var(--color-text-3);
  --t4:var(--color-text-3);
  --t5:var(--color-text-4);
  /* 描边 / 发丝线 */
  --line:var(--color-border-2);
  --line2:var(--color-border-3);
  --line3:var(--color-border-2);
  --line4:var(--color-border-2);
  --line5:var(--color-border-2);
  --bd:var(--color-border-2);
  --bd-strong:var(--color-border-3);
  --bd-soft:var(--color-border-2);
  /* 面 */
  --canvas:var(--color-bg-1);
  --sf:var(--color-bg-4);
  --sf2:var(--color-bg-2);
  --surface:var(--color-bg-5);
  /* 主色：旧商户蓝 #0064E0 → 源力蓝 #1664FF；弱底由品牌黄 → 源力浅蓝 */
  --pri:var(--color-primary);
  --pri-600:var(--color-primary-click);
  --pri-weak:var(--color-primary-bg);
  --pri-100:var(--primary-3);
  /* 【2026-10-07 批次 8 补两处缺口】
   *  · `--pri-200`：基线只在客户端块（`.shell.hc-c,.hc-modal`）里定义 ⇒ **商家端一直是未定义**，
   *    凡 `var(--pri-200)`（如 `.nt-cat-chip:hover` 的描边）都会在计算值阶段失效、回落 currentColor。
   *    此处补上与 `--pri-100` 同族的源力值，让该令牌在商家端首次真正生效。
   *  · `--pri-action`：基线的"方案 A"取值是**墨黑** `#1C1C1E`（客户端 2026-09-18 选定），
   *    商家端沿用墨黑会与源力「主色填空」的语义冲突（如商品抽屉里 `.sp-mode` 的多规格开关）。
   *    源力约定填色面走**主色** ⇒ 指向 `--color-primary`。
   *  （`.mc-day.sel` / `.seg .it.on` / `.pg-n.on` 等已在批次 1~2 直接改用源力令牌，不受此项影响。） */
  --pri-200:var(--primary-3);
  --pri-action:var(--color-primary);
  --pri-action-press:var(--color-primary-click);
  /* 状态色 */
  --ok:var(--color-success);
  --ok-weak:var(--color-success-bg);
  --ok-ink:var(--color-success);
  --warn:var(--color-warning);
  --warn-weak:var(--color-warning-bg);
  --warn-ink:var(--color-warning);
  --err:var(--color-danger);
  --err-weak:var(--color-danger-bg);
  --err-ink:var(--color-danger);
}

/* ---------------------------------------------------------------
 * 9.2 令牌无法覆盖的**字面量**：按语义分组补齐
 * ---------------------------------------------------------------
 * 以下规则在 styles.css 里直接写字面量色，故不受 9.1 影响。
 * 每条都以 `.shell.hc-m.hc-mprod` 双类限定壳（(0,5,0) > 基线 (0,4,0)）。 */

/* —— 主色（旧商户蓝 #0064E0 一族）—— */
.shell.hc-m.hc-mprod .drw-rel .rl-strong{color:var(--color-primary)}
.shell.hc-m.hc-mprod .drw-rel .rl-cnt{
  background:var(--color-primary-bg);
  color:var(--color-primary);
}
.shell.hc-m.hc-mprod .drw-rel .rl-row.drop-before::before,
.shell.hc-m.hc-mprod .drw-rel .rl-row.drop-after::after{background:var(--color-primary)}
.shell.hc-m.hc-mprod .drw-rel .rl-note-ta{
  color:var(--color-text-1);
  background:var(--color-bg-1);
  border-color:var(--color-primary);
}
.shell.hc-m.hc-mprod .drw-rel .rl-ck.on{
  background:var(--color-primary);
  border-color:var(--color-primary);
}
.shell.hc-m.hc-mprod .drw-rel .vis-sw:focus-visible{
  outline-color:var(--color-primary);
}
.shell.hc-m.hc-mprod .drw-rel .vis-sw.on .vis-sw-tx b{color:var(--color-primary)}
.shell.hc-m.hc-mprod .drw-rel .vis-ap:hover{border-color:var(--primary-3)}
.shell.hc-m.hc-mprod .drw-rel .vis-ap.on{
  border-color:var(--color-primary);
  background:var(--color-primary-bg);
}
.shell.hc-m.hc-mprod .drw-rel .vis-ap.on b{color:var(--color-primary)}
/* 表格选中行 / 首行高亮：旧的两档浅蓝 → 源力主色弱底两档 */
.shell.hc-m.hc-mprod .mp-card tbody tr.on td{background:var(--color-primary-bg)}
.shell.hc-m.hc-mprod .mp-card tbody tr.on:hover td{background:var(--primary-2)}

/* —— 【2026-10-24 3.12 / A4】孤儿货 与 自动下架 两枚徽标 ——
 * 都走既有状态色族（不引入新色相）：
 *   `.orphan` = 红：**谁都买不到**的失效态，比「缺货」更严重（缺货至少还能询价）；
 *   `.autooff` = 中性灰：系统自动撤下，不是商家的操作，**不该用红色吓人**（补回货就自己回来）。
 * 🔴 两枚都必须和 `.off`（手动停用，灰）在视觉上可分 —— 掌柜要一眼看出「这条要不要我管」。 */
.shell.hc-m.hc-mprod .mp-badge.orphan{
  background:var(--color-danger-bg);
  color:var(--color-danger);
}
.shell.hc-m.hc-mprod .mp-badge.autooff{
  background:var(--color-bg-subtle);
  color:var(--color-text-3);
  border:1px dashed var(--color-border-2);
}
.shell.hc-m.hc-mprod .mp-ops .a.warn{color:var(--color-warning);font-weight:500}

/* 状态色（绿 / 黄 / 红三族）—— */
.shell.hc-m.hc-mprod .mp-badge.ok{
  background:var(--color-success-bg);
  color:var(--color-success);
}
.shell.hc-m.hc-mprod .mp-badge.warn,
.shell.hc-m.hc-mprod .mp-badge.vis.zero{
  background:var(--color-warning-bg);
  color:var(--color-warning);
}
.shell.hc-m.hc-mprod .mp-badge.err{
  background:var(--color-danger-bg);
  color:var(--color-danger);
}
.shell.hc-m.hc-mprod .mp-chip{
  background:var(--color-warning-bg);
  border-color:var(--color-warning);
  color:var(--color-warning);
}
.shell.hc-m.hc-mprod .drw-rel .rl-warn{color:var(--color-warning)}
.shell.hc-m.hc-mprod .drw-rel .rl-cand-tbl tr.is-off .rl-cst{color:var(--color-warning)}
.shell.hc-m.hc-mprod .drw-rel .rl-badge.green{
  background:var(--color-success-bg);
  color:var(--color-success);
}
.shell.hc-m.hc-mprod .drw-rel .rl-badge.red{
  background:var(--color-danger-bg);
  color:var(--color-danger);
}

/* —— 「专属商品」徽标：旧为紫（#F0EEFE/#5B4BD6，是站点第 4 个色相）——
 * 源力约定「单一主色 + 中性色 + 状态色」，故并入主色（信息）族；与 .mp-badge.ok（绿·在售）
 * 仍可区分：绿=在售、蓝=可见范围有约束、黄=缺货/无人可见、红=已停用。 */
.shell.hc-m.hc-mprod .mp-badge.vis{
  background:var(--color-primary-tag-bg);
  color:var(--color-primary);
}

/* —— 「1688货源」采集来源徽标（2026-10-11 掌柜「颜色字体 ui 设计优化下，显眼点」→ 选定橙色方案）——
 * 口径：**实心橙 + 白字 + 加粗**。掌柜的诉求是「一眼就是 1688」，故这次**刻意破例**：
 *   源力约定「单一主色 + 中性色 + 状态色」被打破，新增 `--color-source`（定义见 merchant/styles/theme.css，
 *   取值与对比度取舍的理由也写在那里）。**这是掌柜点选并批准的破例**，不是随手加色。
 * 与状态色不冲突：本徽章在**名称列**，绿·在售 / 黄·缺货 / 红·停用 在**状态列**，不共处一行。
 * 🔴 首版曾用「实心主色蓝」守约定 —— 掌柜否掉，理由是要品牌识别度而非体系自洽。
 * 🔴 字重取 `var(--font-weight-semibold)`（=600），**不可写 700**：源力字阶只有 400/500/600，
 *   `merchant-type-scale-smoke` 与 `deptbuy-guard-smoke` 两条守卫都会报红（本次实测各拦一次）。
 * ⚠️ 仅商家端可见 —— 客户端下发路径已剥除该标记（server.js stripClientOnly）。
 * 备选方案对比图：`_assess/tmp/spec-srcbadge/shot-variant-compare.png` / `shot-shades2.png`。 */
.shell.hc-m.hc-mprod .mp-badge.src{
  background:var(--color-source);
  color:var(--color-on-primary);
  font-weight:var(--font-weight-semibold);
  letter-spacing:.2px;
}

/* —— 分类管理页：卡片元信息警示色 —— *
 * 第二个选择器 `.cat-ghost.cc` 是拖影克隆，挂在 **body** 上（拿不到 .shell 作用域），
 * 故必须同时写裸选择器，否则拖拽时颜色会跳回旧值。 */
.shell.hc-m.hc-mcat .cc-meta.warn,
.cat-ghost.cc .cc-meta.warn{color:var(--color-warning)}

/* ---------------------------------------------------------------
 * 9.3 浮层：`.mp-dd-root`（商品管理「更多 ▾ / 列设置」）与 `.ssel`（品牌 / 单位可搜索下拉）
 * ---------------------------------------------------------------
 * 两者都 `document.body.appendChild`（见 30-prod.js:21 / 60-boot.js:1982）⇒
 * **位于 `.shell` 之外**，`.shell.hc-m` 前缀匹配不到，只能裸写类名。
 * 二者均为商家端专用命名空间（`mp-` / `ssel` 前缀，客户端不引用），故裸写安全。 */

/* 「更多 ▾ / 列设置」浮层 —— 灰阶与蓝 |
 * 基线在 styles.css:2051 起已有一批硬编码色，此处整段收口。 */
.mp-dd-root .mp-menu{
  background:var(--color-bg-1);
  border-color:var(--color-border-2);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
}
.mp-dd-root .mp-menu a{color:var(--color-text-2)}
.mp-dd-root .mp-menu a:hover{background:var(--color-bg-4);color:var(--color-text-1)}
.mp-dd-root .mp-menu a.danger{color:var(--color-danger)}
.mp-dd-root .mp-menu .go,
.mp-dd-root .mp-menu .hd{color:var(--color-text-3)}
.mp-dd-root .mp-menu .hd{border-bottom:1px solid var(--color-border-2)}
.mp-dd-root .mp-pop{
  background:var(--color-bg-1);
  border-color:var(--color-border-2);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
}
.mp-dd-root .mp-pop-h{color:var(--color-text-3)}
.mp-dd-root .mp-pop label{color:var(--color-text-1)}
.mp-dd-root .mp-pop label input{accent-color:var(--color-primary)}

/* 品牌 / 单位可搜索下拉：触发器在 `.shell.hc-m` 内，浮层在 body 上 → 分开写 */
.shell.hc-m .ssel-t{
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-1);
}
.shell.hc-m .ssel-t:hover{border-color:var(--primary-3)}
.shell.hc-m .ssel-t:focus-visible{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--state-focus);
}
.shell.hc-m .ssel-t .ssel-a{color:var(--color-text-3)}
.ssel-pop{
  background:var(--color-bg-1);
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
}
.ssel-q{
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-1);
}
.ssel-q:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--state-focus);
}
.ssel-opt{
  border-radius:var(--radius-sm);
  color:var(--color-text-1);
}
.ssel-opt:hover{background:var(--color-bg-4)}
.ssel-opt.on{
  background:var(--color-primary-bg);
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
}

/* ---------------------------------------------------------------
 * 9.4 页面级高特异性规则的补漏（2026-10-06 视觉验证发现）
 * ---------------------------------------------------------------
 * 🔴 缘起：批次 2~5 我写的是**通用** `.shell.hc-m X`（3 类），但 styles.css 里这两页
 *    有一批**页面级**规则是 4~5 类（如 `.shell.hc-mprod .mp-foot .pg-n`）⇒ 我的规则**静默失效**。
 *    浏览器实测首例：商品管理的当前页码仍是**深色实底 #1C1C1E + 999px 胶囊**
 *    （我的 `.shell.hc-m .pg-n.on` 只盖住了边框色，背景与圆角被压过）。
 *    随后用「同叶类名可比特异性」脚本全量扫出 17 组同类漏网，本节逐组补齐。
 * 🔴 形态纪律：本节一律用「**双类限定壳** + 原页面级后缀」（多一层类）来稳压，
 *    不写 `!important`。凡属**布局契约**的（如 `.hc-mcust-nav .cnv-main>.tbl-wrap` 的
 *    overflow、`.cnv-main .toolbar` 的 margin）**刻意不补** —— 那些是视口固定布局所需，
 *    基线必须胜出（见批 3 的 §8.0）。 */

/* —— ① 表尾分页（.mp-foot）：深色实底 + 999px 胶囊 → 源力蓝 + 4px ——
 * 2026-10-07 批次 14：分页控件高度统一为 var(--m-ctrl-h) 32px。 */
.shell.hc-m.hc-mprod .mp-foot .pg-bar{
  background:none;
  color:var(--color-text-3);
  font-size:var(--font-size-body);
}
.shell.hc-m.hc-mprod .mp-foot .pg-n{
  height:var(--m-ctrl-h);
  min-width:var(--m-ctrl-h);
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-2);
  font-weight:var(--font-weight-regular);
}
.shell.hc-m.hc-mprod .mp-foot .pg-n:hover:not(:disabled){
  background:var(--color-bg-4);
  border-color:var(--primary-3);
  color:var(--color-primary);
}
.shell.hc-m.hc-mprod .mp-foot .pg-n.on{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-on-primary);
  font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mprod .mp-foot .pg-n.on:disabled{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-on-primary);
}
.shell.hc-m.hc-mprod .mp-foot .pg-size select,
.shell.hc-m.hc-mprod .mp-foot .pg-inp,
.shell.hc-m.hc-mprod .mp-foot .pg-go{
  height:var(--m-ctrl-h);
  border:1px solid var(--color-border-3);
  border-radius:var(--radius-sm);
  background:var(--color-bg-1);
  color:var(--color-text-2);
  font-size:var(--font-size-body);
}
.shell.hc-m.hc-mprod .mp-foot .pg-info{color:var(--color-text-3)}
.shell.hc-m.hc-mprod .mp-foot .pg-info b{color:var(--color-text-1);font-weight:var(--font-weight-medium)}
.shell.hc-m.hc-mprod .mp-foot .pg-ell{color:var(--color-text-4)}
.shell.hc-m.hc-mprod .mp-foot .pg-jump{color:var(--color-text-3)}

/* —— ② 抽屉内缩略图：10/9/8px 圆角 → 4px（宽高不动）—— */
.shell.hc-m.hc-mprod .drw-rel .rl-prod .thumb,
.shell.hc-m.hc-mprod .drw-rel .rl-pv-it .thumb,
.shell.hc-m.hc-mprod .drw-rel .rl-ev .thumb,
.shell.hc-m.hc-mprod .drw-rel .rl-pvi .thumb,
.shell.hc-m.hc-mprod .drw-rel .rl-c2-in .thumb,
.shell.hc-m.hc-mprod .drw-rel .rl-bi .thumb{border-radius:var(--radius-sm)}

/* —— ③ 抽屉内的下拉（.rl-add）：10px 圆角 → 4px（高度 40 属布局，保留）—— */
.shell.hc-m.hc-mprod .drw-rel .rl-add .sel select{
  border-radius:var(--radius-sm);
  border-color:var(--color-border-3);
  color:var(--color-text-2);
}

/* —— ④ 分类抽屉的关闭按钮（.drw-cat .drw-x）：8px 圆角 + 描边令牌化 —— */
.shell.hc-m.hc-mcat .drw-cat .drw-x{
  border-radius:var(--radius-sm);
  border-color:var(--color-border-3);
  color:var(--color-text-2);
  font-size:var(--font-size-lead);
}
.shell.hc-m.hc-mcat .drw-cat .drw-x:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:var(--color-primary-bg);
}

/* —— ⑤ 商品页面包屑：基线用 --t5（灰 #A1A1A6）→ 源力三档灰 —— */
.shell.hc-m.hc-mprod .content>.crumb{
  color:var(--color-text-3);
  font-size:var(--font-size-body);
  margin-bottom:var(--space-3);
}

/* —— ⑥ 抽屉内的紧凑文字链：字号收敛到源力字阶（12px / 11.5px 混用 → 统一）—— */
.shell.hc-m.hc-mprod .drw-rel .rl-ops .link,
.shell.hc-m.hc-mprod .drw-rel .vis-ops .link{font-size:var(--font-size-body)}
.shell.hc-m.hc-mprod .drw-rel .rl-ev .link{font-size:var(--font-size-body)}

/* ================================================================
 * 十、批次 8：字重收口（源力字重上限 = 600）
 * ================================================================
 * 背景：`shared/base.css` 是**两端共用**的基础层、写于客户端时代，其中大量规则用
 *   `font-weight:700`；商家端层只覆写了其中一部分 ⇒ **未被覆写**的元素仍以 700 渲染，
 *   而源力字阶只有 400 / 500 / 600 三档（见 theme.css）。
 *
 * 实测（2026-10-07 浏览器逐页扫描 16 个商家端页面，按「旧色 / 字重 700」两类签名取证）：
 *   · **颜色层面已干净** —— 旧商户蓝 `#0064E0`、旧黄底 `#FFF6DA` 命中 **0**；
 *     `base.css` 中 `.shell.hc-mprod/.hc-mcat` 的灰阶字面量由 pages.css §9 覆盖、
 *     属**刻意保留**（见 §九：与源力差 2~3%）；批次 13 额外清理了 `merchant.css`
 *     中 `.mp-dd-root` / `.mp-modal` 基线的 11 处字面量。
 *   · **字重是唯一系统性残留**，共四类：
 *       ① `<b>` / `<strong>` 浏览器默认 700 —— 商家端从未统一；
 *       ② `.avatar`（首字徽标）：base.css 给 700，商家端只改了底色 / 字色；
 *       ③ 品牌管理 / 单位管理的分类项 `.cat-it .ci-name`：base.css 只给 14px、未给字重
 *          ⇒ 700，且字号 14 与分类管理页**同名同构**元素的 13 / 500 不一致（同一组件两副面孔）；
 *       ④ 员工与权限「角色与权限矩阵」单元格：**内联** `font-weight:700`（模板里写的，
 *          外部样式表压不住）—— 本批一并改为语义类。
 *   · 另有 `merchant/styles/merchant.css`（**直移**过来的商家端业务样式，从未过源力层）
 *     内 **15 处** `font-weight:700`，已就地统一为 `var(--font-weight-semibold)`。
 *
 * 边界：只改**字重 / 字阶**，不动几何；一律 `.shell.hc-m` 前缀（客户端 `.shell.hc-c`
 *   与客户端企业中心 `.shell.hc-mem` 均不受影响 —— `.hc-m` 不匹配 `hc-mem`）。
 * ================================================================ */

/* 10.1 `<b>` / `<strong>` 统一到源力 semibold。
 * 特异性 (0,1,1) —— 低于既有 `.shell.hc-m .x b` 形态的规则（如 `.kpi b` 本就是 600），
 * 故只兜住「此前无人管」的那些，不覆盖任何既有精确设定。 */
.shell.hc-m b,
.shell.hc-m strong{font-weight:var(--font-weight-semibold)}

/* 10.2 首字徽标（侧栏用户 / 客户行 / 员工行）：700 → semibold */
.shell.hc-m .avatar{font-weight:var(--font-weight-semibold)}

/* 10.3 分类项名称：品牌管理 / 单位管理与分类管理**同名同构**，此处统一为 13 / 500
 * （相对基线的 14 / 700：字号收进源力字阶、字重降一档），三页从此一致。 */
.shell.hc-m .cat-it .ci-name{
  font-size:var(--font-size-lead);
  font-weight:var(--font-weight-medium);
}

/* 10.4 员工与权限 · 角色权限矩阵单元格（模板已改为语义类，见 _customers-all.js 的 mPermView） */
.shell.hc-m .mx-v{font-weight:var(--font-weight-semibold)}
.shell.hc-m .mx-v.ok{color:var(--color-success)}
.shell.hc-m .mx-v.info{color:var(--color-primary)}
.shell.hc-m .mx-v.dash,
.shell.hc-m .mx-dash{color:var(--color-text-4);font-weight:var(--font-weight-regular)}

/* ================================================================
 * 十一、批次 9：帮助中心（.shell.hc-m.hc-mhelp）
 * ================================================================
 * 本批是**内容结构**重构（前八批只改视觉语言）：把「一张卡 + 5 条要点」改成设计稿的
 *   文档式结构 —— 顶部 info 提示 + 两栏（左·目录 / 右·正文）+ 6 个分区。
 * 依据：设计稿 `hengcai-merchant-console/pages/help.html`（结构 / 间距 / 字阶逐条对齐）。
 *
 * 🔴 三条命名与作用域纪律：
 *   1. **一律 `hlp-` 前缀 + 双类限定壳 `.shell.hc-m.hc-mhelp`** —— 设计稿用的是 `help-*`，
 *      `.help-card` 已被侧栏「需要帮助？」卡片占用（`merchant/styles/merchant.css`），
 *      沿用会相撞；而更短更顺手的 `hp-` 也**已被占用** —— `shared/base.css` 的开发者元素定位器
 *      `#hc-picker-ui` 用了 `.hp-title/.hp-body/.hp-ft/...`（两处都存在 `.hp-body`）。
 *      故取**独占前缀 `hlp-`**：既避开 `.help-card`，也不与 `hp-*` 共享命名空间。
 *      ⚠️ 前缀只防**撞名**，真正的隔离靠上方的双类限定壳；二者缺一不可
 *      （`test/deptbuy-guard-smoke.js §18` 对「壳」有逐条断言）。
 *   2. **左上目录用 `<button data-act="help-jump">` 而非 `<a href="#id">`** —— 见
 *      `shared/boot.js` 该动作的注释（history 路由下 hash 会触发整页 render）。样式上按
 *      设计稿的 `.anchor-item` 还原：2px 左指示条 + 文字块 hover/选中底色。
 *   3. **FAQ 用原生 `<details>/<summary>`** —— 零 JS；展开态由 `[open]` 驱动（箭头翻转 + 题干预色）。
 *
 * 🔴 与设计稿的**两处刻意偏差**（均已在上方视图函数注释里说明）：
 *   · 不渲染设计稿页头的「联系客服」按钮、提示条右侧的「查看红线清单」链 —— 本站无对应功能，
 *     渲染出来就是死控件；
 *   · 不渲染每个分区的 20px 装饰图标之外的小图标（FAQ 每行那枚）—— 保留分区图标（wayfinding 有效），
 *     省掉 FAQ 行的重复装饰；因此答案段**不做** `calc(16px + gap)` 缩进（那是对齐图标的，
 *     图标不在就会显得莫名右移）。
 * ================================================================ */

/* 11.1 顶部说明条：站内既有 `.alert` 是**警告**语义（黄底），本条是**说明**语义 ⇒ 单独一类，
 * 用源力 info 语义（主色弱底 + 主色文字），不动共享 `.alert`。 */
.shell.hc-m.hc-mhelp .hlp-alert{
  display:flex;align-items:flex-start;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  background:var(--color-info-bg);color:var(--color-primary);
  border-radius:var(--radius-sm);
  font-size:var(--font-size-h4);line-height:var(--line-height-h4);
  margin-bottom:var(--space-5);
}
.shell.hc-m.hc-mhelp .hlp-alert .i{
  flex-shrink:0;width:16px;height:16px;margin-top:3px;
  border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-on-primary);
  font-size:var(--font-size-caption);font-weight:var(--font-weight-medium);
  display:flex;align-items:center;justify-content:center;
}

/* 11.2 两栏骨架：左·目录 1fr / 右·正文 2fr（设计稿 help-cols） */
.shell.hc-m.hc-mhelp .hlp-cols{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:var(--space-6);align-items:start;
}
.shell.hc-m.hc-mhelp .hlp-card{
  background:var(--color-bg-card);border:1px solid var(--color-border-2);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-1);
}
/* 窄屏堆叠（媒体查询统一置于 §十一 末尾：与 11.3 的 `.hlp-toc{position:sticky}` 同特异性，
 * 必须靠**加载顺序在后**取胜，否则 sticky 会反过来压掉这里的 static） */

/* 11.3 目录（吸顶）：`.content` 是滚动容器（overflow-y:auto），sticky 相对它生效 */
.shell.hc-m.hc-mhelp .hlp-toc{
  position:sticky;top:0;
  padding:var(--space-5) var(--space-3) var(--space-4);
}
.shell.hc-m.hc-mhelp .hlp-toc-t{
  padding:0 var(--space-3) var(--space-2);
  font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);
  line-height:var(--line-height-h4);color:var(--color-text-1);
}
.shell.hc-m.hc-mhelp .hlp-toc-list{display:flex;flex-direction:column;gap:var(--space-1)}
.shell.hc-m.hc-mhelp .hlp-toc-row{display:flex;align-items:center;gap:var(--space-2)}
.shell.hc-m.hc-mhelp .hlp-anchor{
  flex:1;min-width:0;height:32px;display:flex;align-items:stretch;gap:var(--space-1);
  padding:0;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer;
}
.shell.hc-m.hc-mhelp .hlp-bar{flex-shrink:0;width:2px;background:var(--color-bg-4)}
.shell.hc-m.hc-mhelp .hlp-anchor-t{
  flex:1;display:flex;align-items:center;min-width:0;padding:var(--space-2) 6px;
  border-radius:var(--radius-sm);
  font-size:var(--font-size-lead);font-weight:var(--font-weight-regular);
  line-height:var(--line-height-h4);color:var(--color-text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shell.hc-m.hc-mhelp .hlp-anchor:hover .hlp-anchor-t{background:var(--color-bg-4);color:var(--color-text-1)}
.shell.hc-m.hc-mhelp .hlp-anchor.on .hlp-bar{background:var(--primary-6);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.shell.hc-m.hc-mhelp .hlp-anchor.on .hlp-anchor-t{
  background:var(--color-bg-4);color:var(--primary-6);font-weight:var(--font-weight-medium);
}
.shell.hc-m.hc-mhelp .hlp-anchor:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.shell.hc-m.hc-mhelp .hlp-toc-n{
  flex-shrink:0;padding-right:var(--space-3);
  font-size:var(--font-size-caption);line-height:var(--line-height-caption);color:var(--color-text-3);
}

/* 11.4 正文分区卡：图标 + 标题 + 右侧计数，头部分隔线下压一条发丝线 */
.shell.hc-m.hc-mhelp .hlp-body{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.shell.hc-m.hc-mhelp .hlp-sec{padding:var(--space-6);scroll-margin-top:var(--space-6)}
.shell.hc-m.hc-mhelp .hlp-sec-h{
  display:flex;align-items:center;gap:var(--space-3);
  padding-bottom:var(--space-4);margin-bottom:var(--space-5);
  border-bottom:1px solid var(--color-border-2);
}
.shell.hc-m.hc-mhelp .hlp-sec-ic{
  flex-shrink:0;width:20px;height:20px;color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;
}
.shell.hc-m.hc-mhelp .hlp-sec-ic svg{width:20px;height:20px;display:block}
.shell.hc-m.hc-mhelp .hlp-sec-t{
  margin:0;font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);
  line-height:var(--line-height-h4);color:var(--color-text-1);
}
.shell.hc-m.hc-mhelp .hlp-sec-meta{
  margin-left:auto;white-space:nowrap;
  font-size:var(--font-size-caption);line-height:var(--line-height-caption);color:var(--color-text-3);
}

/* 11.5 快速上手：编号圆点 + 标题 / 说明两行 */
.shell.hc-m.hc-mhelp .hlp-steps{display:flex;flex-direction:column;gap:var(--space-5);margin:0;padding:0;list-style:none}
.shell.hc-m.hc-mhelp .hlp-step{display:flex;gap:var(--space-4)}
.shell.hc-m.hc-mhelp .hlp-num{
  flex-shrink:0;width:24px;height:24px;border-radius:var(--radius-full);
  background:var(--color-primary-bg);color:var(--color-primary);
  font-size:var(--font-size-body);font-weight:var(--font-weight-medium);
  display:flex;align-items:center;justify-content:center;
}
.shell.hc-m.hc-mhelp .hlp-step-b{min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.shell.hc-m.hc-mhelp .hlp-step-t{
  font-size:var(--font-size-lead);font-weight:var(--font-weight-medium);
  line-height:var(--line-height-h4);color:var(--color-text-1);
}
.shell.hc-m.hc-mhelp .hlp-step-d{
  font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--color-text-2);
}

/* 11.6 要点列表：主色圆点 + 「键：正文」（键为 text-1/500） */
.shell.hc-m.hc-mhelp .hlp-list{display:flex;flex-direction:column;gap:var(--space-4)}
.shell.hc-m.hc-mhelp .hlp-item{display:flex;gap:var(--space-3)}
.shell.hc-m.hc-mhelp .hlp-dot{
  flex-shrink:0;width:6px;height:6px;margin-top:7px;
  border-radius:var(--radius-full);background:var(--color-primary);
}
.shell.hc-m.hc-mhelp .hlp-tx{
  min-width:0;font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--color-text-2);
}
.shell.hc-m.hc-mhelp .hlp-key{color:var(--color-text-1);font-weight:var(--font-weight-medium)}

/* 11.7 「前往图片存储 ›」 */
.shell.hc-m.hc-mhelp .hlp-more{margin-top:var(--space-5)}
.shell.hc-m.hc-mhelp .hlp-more a{
  display:inline-flex;align-items:center;gap:var(--space-1);
  font-size:var(--font-size-lead);line-height:var(--line-height-h4);
  color:var(--color-link);cursor:pointer;
}
.shell.hc-m.hc-mhelp .hlp-more a:hover{color:var(--color-primary-hover);text-decoration:underline}

/* 11.8 常见问题：原生 details 手风琴（默认全收起，与设计稿一致；展开态纯 CSS 驱动，零 JS 状态） */
.shell.hc-m.hc-mhelp .hlp-faq{display:flex;flex-direction:column}
.shell.hc-m.hc-mhelp .hlp-qa{border-top:1px solid var(--color-border-2)}
.shell.hc-m.hc-mhelp .hlp-qa:first-child{border-top:0}
.shell.hc-m.hc-mhelp .hlp-qa-q{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) 0;cursor:pointer;list-style:none;
  font-size:var(--font-size-h4);font-weight:var(--font-weight-regular);
  line-height:var(--line-height-h4);color:var(--color-text-1);
}
.shell.hc-m.hc-mhelp .hlp-qa-q::-webkit-details-marker{display:none}
.shell.hc-m.hc-mhelp .hlp-qa-q:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.shell.hc-m.hc-mhelp .hlp-chev{
  margin-left:auto;flex-shrink:0;width:16px;height:16px;
  color:var(--color-text-3);transition:transform .15s ease;
  display:flex;align-items:center;justify-content:center;
}
.shell.hc-m.hc-mhelp .hlp-chev svg{width:16px;height:16px;display:block}
.shell.hc-m.hc-mhelp .hlp-qa[open] .hlp-chev{transform:rotate(180deg)}
.shell.hc-m.hc-mhelp .hlp-qa[open] .hlp-qa-q{color:var(--color-primary)}
.shell.hc-m.hc-mhelp .hlp-qa-a{
  margin:0;padding:0 0 var(--space-4);
  font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--color-text-3);
}

/* 11.9 窄屏堆叠：目录回到文档流（去掉吸顶，否则会压在正文上）。
 * 断点 1080 与本文档既有 `@media (min-width:1081px)`（§8.1）互补，不改动其它页面。
 * 🔴 本块**必须留在 §十一 末尾**：`.hlp-toc{position:sticky}` 在 11.3，同特异性只能靠顺序取胜。 */
@media (max-width:1080px){
  .shell.hc-m.hc-mhelp .hlp-cols{grid-template-columns:minmax(0,1fr)}
  .shell.hc-m.hc-mhelp .hlp-toc{position:static}
}

/* ================================================================
 * 十二、批次 10：图片存储（.shell.hc-m.hc-mcos）
 * ================================================================
 * 依据设计稿 `hengcai-merchant-console/pages/image-storage.html`：**分节卡 setting-group**
 *   = 左 intro（标题 + 描述，灰底 + 右发丝线）+ 右 form 区；页面顶部一条 info 说明条；
 *   页头右侧两个动作按钮。四节：存储通道 / 缩略图策略 / 用量概览 / 上传记录。
 *
 * 🔴 三条命名与作用域纪律（与 §十一 同款）：
 *   1. **一律 `csg-`（cos setting-group）前缀 + 双类限定壳 `.shell.hc-m.hc-mcos`** ——
 *      前缀防撞名，限定壳做真隔离（缺壳则规则泄漏到全站，属静默问题）。
 *   2. **表单控件复用既有词汇**（`.fg` / `.field` / `.input` / `.select` / `.btn` / `.badge`），
 *      本批**只新增两类版式**：分节骨架（`.csg*`）与内容小件（格式 chips / 统计行 / 事实卡）。
 *      理由：本站目标是「统一组件」，不是再造一套控件语言。
 *   3. **窄屏媒体查询必须放在本段末尾** —— 同特异性只靠加载顺序取胜（§十一 已踩过：写在基础
 *      规则之前会被反压，静默失效）。
 *
 * 🔴 令牌映射（设计稿用的是它自己那套 `--color-*`，同名未必同值，必须逐个核对）：
 *   · 设计稿 `--color-bg-1` 当「intro 灰底」用，但源力 `--color-bg-1` 是**纯白** ⇒ 改用
 *     `--color-bg-4`(#F6F8FA)；
 *   · 设计稿 `--color-tag-info-bg` 源力**无此令牌**（引用即静默失效）⇒ 改用 `--color-info-bg`。
 *
 * 🔴 与设计稿的**三处刻意偏差**（理由见视图层同一区块注释）：
 *   · 不渲染「上传记录」表 —— 本站**无上传日志数据源**（`/api/cos/config` 不返回、库里无表），
 *     渲染出来就是一张永远空/假的表；
 *   · 不渲染「对象存储已用 2.4 GB / 上限 50 GB」进度条 —— 同上，无数据源（COS 用量需另调桶侧接口）；
 *   · 保留设计稿**没有**的「旧图迁移」分节 —— 那是本站真实功能，重构不得因设计稿未画而删。
 * ================================================================ */

/* 12.1 分节卡：左 intro 220px + 右 form 区（设计稿 setting-group 的两栏骨架） */
.shell.hc-m.hc-mcos .csg{
  display:grid;grid-template-columns:220px minmax(0,1fr);
  background:var(--color-bg-card);border:1px solid var(--color-border-2);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow:hidden;
}
.shell.hc-m.hc-mcos .csg+.csg{margin-top:var(--space-5)}
.shell.hc-m.hc-mcos .csg-h{
  padding:var(--space-6);background:var(--color-bg-4);border-right:1px solid var(--color-border-2);
}
.shell.hc-m.hc-mcos .csg-t{
  margin:0;font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);
  line-height:var(--line-height-h4);color:var(--color-text-1);
}
.shell.hc-m.hc-mcos .csg-d{
  margin:var(--space-2) 0 0;font-size:var(--font-size-caption);
  line-height:var(--line-height-caption);color:var(--color-text-3);
}
.shell.hc-m.hc-mcos .csg-b{padding:var(--space-6);min-width:0}
.shell.hc-m.hc-mcos .csg-b>.fg{margin:0}
/* 节内动作条（保存 / 测试）：与表单同一列，不贴边 */
.shell.hc-m.hc-mcos .csg-act{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-5);
}
.shell.hc-m.hc-mcos .csg-act .hint{flex:1 1 100%}

/* 12.2 只读行（连通状态 / 派生信息）：只读输入 + 状态标签并排 */
.shell.hc-m.hc-mcos .csg-in{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.shell.hc-m.hc-mcos .csg-in .input{flex:0 1 320px;min-width:0;max-width:320px}

/* 12.3 图片格式白名单 chips（设计稿 hc-filetags，固定事实、不可编辑） */
.shell.hc-m.hc-mcos .csg-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.shell.hc-m.hc-mcos .csg-tag{
  display:inline-flex;align-items:center;height:24px;padding:0 var(--space-3);
  border-radius:var(--radius-sm);background:var(--color-info-bg);color:var(--color-link);
  font-size:var(--font-size-body);line-height:1;
}

/* 12.4 用量概览：左统计行（虚线分隔）+ 右事实卡（设计稿 usage-grid / stat-list / usage-meter） */
.shell.hc-m.hc-mcos .csg-stats{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-6);align-items:start;
}
.shell.hc-m.hc-mcos .csg-list{display:flex;flex-direction:column;gap:var(--space-3)}
.shell.hc-m.hc-mcos .csg-srow{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding-bottom:var(--space-3);border-bottom:1px dashed var(--color-border-2);
}
.shell.hc-m.hc-mcos .csg-srow:last-child{border-bottom:0;padding-bottom:0}
.shell.hc-m.hc-mcos .csg-sl{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m.hc-mcos .csg-sv{
  font-size:var(--font-size-h3);font-weight:var(--font-weight-medium);color:var(--color-text-1);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.shell.hc-m.hc-mcos .csg-sv .u{font-size:var(--font-size-body);font-weight:var(--font-weight-regular);color:var(--color-text-3)}
.shell.hc-m.hc-mcos .csg-facts{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-bg-4);
}
.shell.hc-m.hc-mcos .csg-fact{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.shell.hc-m.hc-mcos .csg-fl{font-size:var(--font-size-body);color:var(--color-text-2)}
.shell.hc-m.hc-mcos .csg-fv{
  font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-1);
  font-variant-numeric:tabular-nums;text-align:right;
}

/* 12.5 图片存储页的常用小件（沿用既有词汇做微调，不新造控件） */
.shell.hc-m.hc-mcos .cosgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}
.shell.hc-m.hc-mcos .cosst{
  border:1px solid var(--color-border-2);border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4);background:var(--color-bg-2);
}
.shell.hc-m.hc-mcos .cosst b{
  display:block;font-size:var(--font-size-h2);line-height:var(--line-height-h3);
  font-variant-numeric:tabular-nums;color:var(--color-text-1);
}
.shell.hc-m.hc-mcos .cosst span{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m.hc-mcos .cospb{
  height:8px;border-radius:var(--radius-full);background:var(--color-bg-5);
  overflow:hidden;margin:var(--space-4) 0 var(--space-3);
}
.shell.hc-m.hc-mcos .cospb>b{display:block;height:100%;width:0;background:var(--color-primary);transition:width .25s ease}

/* 12.6 顶部说明条：**说明**语义（源力 info 弱底 + 主色文字）。
 * 与 §十一 的 `.hlp-alert` 同款，但**各写一份** —— 两者分属不同页的命名空间；若日后出现
 * 第三处，应提取为共享类。站内既有 `.alert` 是**警告**语义（黄底），语义不同故不复用。 */
.shell.hc-m.hc-mcos .csg-info{
  display:flex;align-items:flex-start;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  background:var(--color-info-bg);color:var(--color-primary);
  border-radius:var(--radius-sm);
  font-size:var(--font-size-h4);line-height:var(--line-height-h4);
  margin-bottom:var(--space-5);
}
.shell.hc-m.hc-mcos .csg-info .i{
  flex-shrink:0;width:16px;height:16px;margin-top:3px;
  border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-on-primary);
  font-size:var(--font-size-caption);font-weight:var(--font-weight-medium);
  display:flex;align-items:center;justify-content:center;
}

/* 12.7 窄屏堆叠：intro 转上栏（右发丝线换下发丝线）。
 * 🔴 必须留在 §十二 末尾：与 12.1 的 grid 同特异性，只能靠顺序取胜。 */
@media (max-width:1080px){
  .shell.hc-m.hc-mcos .csg{grid-template-columns:minmax(0,1fr)}
  .shell.hc-m.hc-mcos .csg-h{border-right:0;border-bottom:1px solid var(--color-border-2)}
  .shell.hc-m.hc-mcos .csg-stats{grid-template-columns:minmax(0,1fr)}
}

/* ================================================================
 * 十四、批次 15/16：非外壳 surface 令牌对齐
 * ================================================================
 * 🔴 根因（与批 8 同一条规律：「令牌重写的作用域就是覆盖面」）：
 *    §9.1 把旧商户令牌在 **`.shell.hc-m`** 上重写为源力 —— 但商家端有若干 surface
 *    **不在 `.shell` 之内**，故重写**罩不到**它们，令牌回落 `:root` 的**客户端时代值**：
 *      ① `.login`（#m-login 登录页，`render.js` 直接塞进 `#app`，无外壳）
 *      ② `#boot`（冷启动闪屏，`index.html` 里的 body 级节点）
 *      ③ `#toast-root`（Toast 挂 body，`.toast` 读 `--ink` / `--ok` / `--err`）
 *      ④ `#modal-root`（**批次 16 新增**：弹层宿主。商家端口径的弹窗（`.mp-modal` 或
 *         未挂命名空间的 `.modal`）以及弹窗模板里的**内联** `var(--warn-weak)` 等，
 *         都在 `.shell` 之外 ⇒ 同样读 `:root` 旧值）
 *    浏览器实测（本地 3210，批次 15 CDP 取证）：
 *      登录页 `.login .brand-logo` / `.login .lp ul .d` 背景 = `rgb(0,100,224)`（**旧商户蓝**）、
 *      `.login` 的 `--pri` = `#0064E0`；`#boot .brand-logo` 同为 `rgb(0,100,224)`（闪屏可见约 78ms）。
 *    批次 16 CDP 取证（`#modal-root`）：商家端「批量设置分类」弹窗 `--pri-action = #1C1C1E`
 *      （墨黑）、`--pri = #0064E0`，主按钮实渲染 `rgb(28,28,30)` 胶囊 —— 与页内源力蓝矩形不一致。
 *
 * 方案：与 §9.1 **同构**的令牌块，作用域换成这几处 surface（它们共用同一套旧令牌）。
 *   · `.login`(0,1,0) / `#toast-root` / `#modal-root` / `#boot`(1,0,0) 均**高于或等于** `:root`(0,1,0)，
 *     且本文件晚于 `base.css` 加载 ⇒ 同特异性亦必胜。
 *   · 🔴 **对客户端弹窗安全**：客户端弹窗元素**自身**带 `.hc-modal`（`base.css:849` 把整套令牌
 *     在元素级重映射），元素级声明**胜过**从 `#modal-root` 继承来的值 —— 自定义属性按继承规则
 *     取值，与选择器特异性无关。故本块不会改变任何客户端弹窗取色。
 *   · 只重映射**色相类**令牌；`--page`（#boot 底色）在 §9.1 也未重映射，此处保持一致不动。
 *   · 不做成 `:root` 级重映射：那会改变 `.mp-modal` 等已按 `--color-*` 显式写死的规则的
 *     环境值，扩大爆炸半径；本批按「surface 清单」精确覆盖，新增 surface 时须同步补进来。
 * ================================================================ */
.login,
#boot,
#toast-root,
#modal-root{
  /* 主色 */
  --pri:var(--color-primary);
  --pri-600:var(--color-primary-click);
  --pri-100:var(--primary-3);
  --pri-200:var(--primary-3);
  --pri-weak:var(--color-primary-bg);
  --pri-action:var(--color-primary);
  --pri-action-press:var(--color-primary-click);
  --on-action:var(--color-on-primary);
  /* 文本四档 */
  --ink:var(--color-text-1);
  --t1:var(--color-text-1);
  --t2:var(--color-text-2);
  --t3:var(--color-text-3);
  --t4:var(--color-text-3);
  --t5:var(--color-text-4);
  /* 描边 / 发丝线 */
  --line:var(--color-border-2);
  --line2:var(--color-border-3);
  --line3:var(--color-border-2);
  --line4:var(--color-border-2);
  --line5:var(--color-border-2);
  --bd:var(--color-border-2);
  --bd-strong:var(--color-border-3);
  --bd-soft:var(--color-border-2);
  /* 面 */
  --canvas:var(--color-bg-1);
  --sf:var(--color-bg-4);
  --sf2:var(--color-bg-2);
  --surface:var(--color-bg-5);
  /* 状态色 */
  --ok:var(--color-success);
  --ok-weak:var(--color-success-bg);
  --ok-ink:var(--color-success);
  --warn:var(--color-warning);
  --warn-weak:var(--color-warning-bg);
  --warn-ink:var(--color-warning);
  --err:var(--color-danger);
  --err-weak:var(--color-danger-bg);
  --err-ink:var(--color-danger);
  /* 阴影两档：`.login` 的 `.switch-end button.on` 与 Toast 都在用 */
  --sh1:var(--shadow-1);
  --sh2:var(--shadow-2);
}

/* ================================================================
 * 十五、批次 16：商家端非源力圆角档位收口
 * ================================================================
 * 源力圆角只有五档：`--radius-sm` 4px / `--radius-md` 8px / `--radius-lg` 12px /
 *   `--radius-xl` 16px / `--radius-full` 9999px（见 colors_and_type.css 与 README 圆角表）。
 *
 * 🔴 靶子怎么来的（**运行时审计**，不是静态扫）：CDP 遍历 16 个商家端页面 + 抽屉 /
 *   浮层 / 弹窗逐态，收集**计算值** `borderTopLeftRadius`，凡不在五档内即登记。
 *   基准态 13 页为 **0 条**；打开抽屉 / 分类卡 / 分页后才暴露出 5 / 7 / 9 / 10 / 11 / 14px 等
 *   离档值（它们大多写在 `shared/base.css` 的商家页作用域里、或 merchant.css 的业务块里）。
 *   本批按「**渲染态清单**」逐条收口，把值映射到**最接近的源力档**（不改变视觉意图）。
 *
 * ⚠️ 只覆盖**渲染态实测到**的那些规则；`base.css` 里未被任何页面渲染到的离档值
 *   属**潜伏债**，不属本批（它们被更高特异性的规则压着，见 §9 系列）。
 * ================================================================ */

/* —— 分类 / 品牌 / 单位列表卡（`.cat-it` 是通用列表卡词汇，客户端不动 ⇒ 加壳限定）—— */
.shell.hc-m .cat-it{border-radius:var(--radius-md)}
.shell.hc-m .cat-it .ci-badge{border-radius:var(--radius-full)}
.shell.hc-m.hc-mcat .mc-grid .cat-it .ci-ops{border-radius:var(--radius-full)}
.shell.hc-m.hc-mcat .cc-thumb{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
/* 拖影克隆挂在 body 上（拿不到 .shell 作用域）⇒ 必须补一份裸选择器，否则拖拽时圆角跳回旧值 */
.cat-ghost.cc .cc-thumb{border-radius:var(--radius-lg) var(--radius-lg) 0 0}

/* —— 分类管理工具栏（`.mc-search` / `.mc-seg` 均为胶囊）—— */
.shell.hc-m.hc-mcat .mc-search{border-radius:var(--radius-full)}
.shell.hc-m.hc-mcat .mc-seg{border-radius:var(--radius-full)}
.shell.hc-m.hc-mcat .mc-seg-b{border-radius:var(--radius-full)}

/* —— 商品管理：状态徽标前置圆点 + 批量条勾选圆点 —— */
.shell.hc-m.hc-mprod .mp-badge i{border-radius:var(--radius-full)}
.shell.hc-m.hc-mprod .mp-batch .ic{border-radius:var(--radius-full)}

/* —— 通用分页（订单 / 品牌 / 单位 / 搜索盲区页用的是全局 `.pg-bar`，不是 `.mp-foot`）—— */
/* 🔴 2026-10-25 Notion 重构：分页「每页条数」下拉是控件 ⇒ 4px → 8px（与 `.sel select` 同档）。 */
.shell.hc-m .pg-bar .pg-size select{border-radius:var(--radius-md)}

/* —— 抽屉关闭按钮 / 全站开关轨道（`.sp-toggle .tg` 是共用控件）——
 * 🔴 2026-10-25 Notion 重构：`.drw-x` 是按钮 ⇒ 4px → 8px（DESIGN.md "buttons 8px"）。
 *   `.sp-toggle .tg` 本来就是 9999px 胶囊轨道，不动。 */
.shell.hc-m .drw-x{border-radius:var(--radius-md)}
.shell.hc-m .sp-toggle .tg{border-radius:var(--radius-full)}

/* —— 商品抽屉：富文本编辑器 / 卡片字段前缀格 / 标签选择区 —— */
/* 【2026-10-12】原 `.shell.hc-m .rt-toolbar{border-radius:var(--radius-md)}` 改为 wangEditor 的
 *  工具栏条（`.w-e-bar`）。编辑器**外框**圆角仍由 `merchant.css` 的 `.rt-edit{var(--radius-md)}` 承担。 */
.shell.hc-m.hc-mprod .drw-prod #prod-info-toolbar .w-e-bar{border-radius:var(--radius-md)}
.shell.hc-m .sfx .pre{border-radius:var(--radius-md) 0 0 var(--radius-md)}
.shell.hc-m.hc-mprod .drw-prod .ptag-sel{border-radius:var(--radius-md)}
.shell.hc-m.hc-mprod .drw-prod .ptag-panel{border-radius:var(--radius-md)}
.shell.hc-m.hc-mprod .drw-prod .ptag-ck{border-radius:var(--radius-sm)}

/* ================================================================
 * 十六、批次 18：商家端排版档位收口（字号 / 字重）
 * ================================================================
 * 源力字阶只有八档：**10(caption) / 12(body) / 13(lead) / 14(h4) / 16(h3) / 18(h2) / 20(h1) / 24(display)**；
 * 字重只有三档：**400 / 500 / 600**（源力 components.css 全库仅 3 处 700/800，2 处属 Steps 组件）。
 *
 * 🔴 靶子来自**运行时审计**（与本仓批 16 同法）：CDP 遍历 13 个商家端页面 + 5 个交互态，
 *    收集**计算值** `font-size` / `font-weight`，凡不在档内即登记。结果分三类，**处置方式不同**：
 *   ① **真实商家 UI**：17 / 15 / 22 / 11px 与 700 —— 本批全部收口（见下）。
 *   ② **商品详情的粘贴内容**（`qk-md-*` 一族，共 44 个元素渲染 700）—— **不改其自身样式**：
 *      `base.css` 既有约定「第三方富文本属用户内容，不得改写（改它等于动业务数据）」。
 *      ⚠️ 但实测查清了那 44 个 700 的**真实来源**（CDP `CSS.getMatchedStylesForNode` + 祖先链）：
 *      它们自身**既无内联 font-weight、也无匹配规则、文档内更无 `<style>`** —— 700 全部来自
 *      **继承**：掌柜的粘贴内容把整段包在一个 `<h1>` 里，而 `.rt-edit h1` 此前**未定义**
 *      ⇒ 落浏览器默认 **h1 = 700 / 28px**，其下 `ul` / `li` / `p` / `ol` 一律继承 700。
 *      ⇒ 本批给 `.rt-edit h1` 补上源力值后，这些元素**随继承自动落到 600**（700→600，微降、
 *      更符合源力 semibold，且不再是"浏览器默认的意外加粗"）。**这不是改写用户内容，是补全自己的样式**。
 *   ③ **开发工具**（`#hc-picker-btn` / `#hc-picker-tip` / `#hc-picker-ui`，51 个元素，改后仍 700）——
 *      **刻意不改**：元素定位器自带品牌色 `#1F6FFF`，不消费源力令牌。
 *   注：① 里另有一处**不是离档而是"漏写 ⇒ 落浏览器默认"**（比离档更糟，因为值随浏览器变）：
 *      · `.hlp-anchor` 未声明 font-size ⇒ `button` 默认 **13.3333px**（下方补 lead 13px）。
 *   `merchant.css` 内的离档声明（17/15/22/11px，共 18 处）已**就地替换为令牌**；
 *   本节只管**写在 `shared/base.css` 里**的那些（按既有纪律：不改共享文件语义，用双类限定壳覆盖）。
 * ================================================================ */

/* 16.1 字号：17px → 16px(h3) */
.shell.hc-m.hc-mprod .mp-foot .pg-n.arw{font-size:var(--font-size-h3)}   /* base.css:1567（‹ › 箭头） */

/* 16.2 字号：15px → 16px(h3)；列设置按钮的 ⚙ 图标比正文大一档更清晰 */
.shell.hc-m.hc-mprod .mp-colbtn{font-size:var(--font-size-h3)}           /* base.css:1461 */

/* 16.3 字号：11px → 12px(body)。源力无 11px 档；这批都是「徽标 / 字段名 / 浮层小标题」，
 *      与源力同类组件（StatusTag / page-header-tag 均用 body 12px）对齐。 */
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-head{font-size:var(--font-size-body)}  /* 8.8 SKU 表头（原 .sc-k 卡片标签随卡片退场） */
.shell.hc-m.hc-mcat .mc-seg-b em{font-size:var(--font-size-body)}        /* base.css:2037 分段计数徽标 */
.shell.hc-m.hc-mcat .mc-nav-hint{font-size:var(--font-size-body)}        /* base.css:2065 拖动提示 */
.shell.hc-m.hc-mcat .mc-nav .ci-badge{font-size:var(--font-size-body)}   /* base.css:2074 一级分类计数 */
.shell.hc-m.hc-mprod .mp-scroll-hint{font-size:var(--font-size-body)}    /* base.css:1606 抽屉滚动提示 */

/* 16.3b 分类卡（网格）的占位字与元信息：11px → 12px。
 *   🔴 拖影克隆 `.cat-ghost.cc` 挂在 body（拿不到 `.shell` 作用域）⇒ 必须补一份裸选择器，
 *      否则拖动时字号会跳回旧值（与 §十五 圆角同一坑）。 */
.shell.hc-m.hc-mcat .cc-ph em{font-size:var(--font-size-body)}           /* base.css:2094 「未配图」 */
.cat-ghost.cc .cc-ph em{font-size:var(--font-size-body)}
.shell.hc-m.hc-mcat .cc-meta{font-size:var(--font-size-body)}            /* base.css:2098 元信息行 */
.cat-ghost.cc .cc-meta{font-size:var(--font-size-body)}

/* 16.4 字重：700 → 500/600。
 *      🔴 根因：`pages.css §10.1` 的 `.shell.hc-m b,.shell.hc-m strong` 只能兜住**元素级**默认，
 *      兜不住 `base.css` 里**显式写死 700** 的那几条规则（特异性更高）。 */
.shell.hc-m .sfx .pre{font-weight:var(--font-weight-medium)}             /* base.css:557 数值前缀格 ×/¥ */
.shell.hc-m.hc-mprod .drw-prod .spr-g .input.i-v{font-weight:var(--font-weight-medium)}  /* 8.8 SKU 属性值（原 .sc-name 卡片结构退场） */
.shell.hc-m.hc-mprod .mp-batch .ic{font-weight:var(--font-weight-semibold)} /* base.css:1499 批量条勾选 ✓ */

/* 16.5 🔴 **弹窗在 `.shell` 之外**（`#modal-root`），故 `.shell.hc-m b` 兜不住它里面的 `<b>`。
 *      批 16 已给商家端弹窗挂 `.mp-modal`，此处借它把字重收口（不写 `#modal-root b` —— 那会串改
 *      **客户端**弹窗 `.hc-modal`，客户端有自己的设计系统）。 */
.mp-modal b,.mp-modal strong{font-weight:var(--font-weight-semibold)}

/* 16.6 帮助中心目录按钮：未声明 font-size ⇒ `button` 默认 13.3333px。
 *      文本实际由内层 `.hlp-anchor-t`（lead 13px）渲染，故此项**无视觉变化**，纯消除离档计算值。 */
.shell.hc-m.hc-mhelp .hlp-anchor{font-size:var(--font-size-lead)}

/* 16.7 **商家端登录页**（`/m/login`）—— 它不在 `.shell` 内，故前面所有 `.shell.hc-m` 规则都罩不到。
 *      两条来源都在共享 `base.css`：`.brand-logo`（15px/700）、`.login .lp .big`（32px/700）。
 *      🔴 限定用 `.login:not(.lg-c)`：两端登录页结构同源，**客户端登录页靠 `.lg-c` 区分**
 *      （`client/views/auth.js` 渲染 `class="login lg-c"`）。本文件虽只被商家端加载，
 *      仍显式写出 `:not(.lg-c)` 以自证「不碰客户端」。
 *      📌 32px 是营销主视觉、非数据台尺寸；源力字阶上限为 display 24px，故一并收口（与批 14 把
 *      控件高 40/34/30 → 32 同一口径）。 */
.login:not(.lg-c) .brand-logo{font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold)}
.login:not(.lg-c) .lp .big{font-size:var(--font-size-display);font-weight:var(--font-weight-semibold)}

/* 16.8 登录页的 `<b>` / `<h2>` 等：同样因为不在 `.shell` 内，`pages.css §10.1` 的
 *      `.shell.hc-m b` 兜不住 ⇒ 落浏览器默认 **700**（实测 5 处）。此处补同一口径。 */
.login:not(.lg-c) b,
.login:not(.lg-c) strong,
.login:not(.lg-c) h1,
.login:not(.lg-c) h2,
.login:not(.lg-c) h3{font-weight:var(--font-weight-semibold)}

/* 16.9 登录页主按钮：来源是共享 `base.css` 的 `.btn{font-weight:700}`（(0,1,0)），
 *      而商家端在 `.shell` 内用的是 `.shell.hc-m .btn{font-weight:medium}`（`shell.css:111`）。
 *      登录页不在 `.shell` 内 ⇒ 此处补同一口径，让两端按钮字重一致。
 *      📌 仅改**字重**（属本批排版范围）；按钮几何（`height:38px` / `border-radius:999px`）
 *         已在**批次 19 §十七** 收口。 */
.login:not(.lg-c) .btn{font-weight:var(--font-weight-medium)}

/* ================================================================
 * 十七、批次 19：商家端登录页控件几何收口（高度 / 圆角 / 内距）
 * ================================================================
 * 🔴 靶子来自**运行时审计**（CDP 实测 `/m/login` 全部控件计算值，批次 19 取证）：
 *    `.login .btn`   → height **38px** / border-radius **999px** / padding 0 20px
 *    `.login .input` → 由 padding 9px 撑出 height **39px** / border-radius **8px**
 *    `.login .brand-logo` → border-radius **10px**（不在源力圆角五档内）
 *    三者共同来源：**共享 `base.css`** 的 `.btn` / `.input` / `.brand-logo`
 *    （`:root` 时代的「胶囊 + 高控件」语言），而商家端在 `.shell` 内早已改口径：
 *      `.shell.hc-m .btn`   = `32px(--m-ctrl-h)` / `4px(--radius-sm)` / `0 var(--space-4)`
 *      `.shell.hc-m .input` = `4px(--radius-sm)` / `6px var(--space-3)`（⇒ 32px 高）
 *      `.shell.hc-m .brand-logo` = `32px` / `4px(--radius-sm)`（侧栏品牌标）
 *
 * 处置：登录页**不在 `.shell` 内**（`render.js` 直接塞 `#app`）⇒ 所有 `.shell.hc-m` 规则罩不到，
 *   故按既有纪律（**不动共享 `base.css` 语义**，用限定壳在 `pages.css` 覆盖）在此收口，
 *   口径与 `.shell.hc-m` **逐字对齐**，使登录页控件与页内控件同高同圆角。
 *
 * 🔴 限定用 `.login:not(.lg-c)`（同 §16.7）：两端登录页结构同源，客户端登录页 `class="login lg-c"`
 *   （`client/views/auth.js:16`），`:not()` 让「不碰客户端」写在选择器里自证。
 *   `.btn` (0,3,0) / `.input` (0,3,0) / `.brand-logo` (0,3,0) 均高于 base.css 的 (0,1,0)，
 *   且本文件晚于 `base.css` 加载 ⇒ 必胜。
 *
 * ⚠️ 刻意不动（不是漏网）：
 *   · `.login .card`（`border-radius:16px`）—— 登录页整卡被内联改成 `transparent/none`，
 *     圆角不可见，且 16px 本就在源力档内（`--radius-xl`）。
 *   · `.login .lp ul .d`（`border-radius:50%`）—— 10×10 方盒的 `50%` 与 `--radius-full` 等价（正圆），非离档。
 *   · `.login .switch-end button`（`merchant.css:36`，`height:30px`）—— 商家端登录页**不渲染**
 *     `.switch-end`（仅客户端登录页有），属不加载/不匹配的死规则；与批 17 删 `.login.lg-c` 同族，
 *     留待后续统一清理。
 * ================================================================ */

/* 17.1 主按钮（唯一 CTA）：高度 32px / 圆角 8px / padding 0 16px（= `.shell.hc-m .btn`）。
 *      🔴 2026-10-25 Notion 重构：圆角由 `--radius-sm`(4px) 改为 `--radius-md`(8px)
 *      （DESIGN.md "buttons 8px"），与 `shell.css §4.1` 同步；登录页不在 `.shell` 内，
 *      故必须在此再写一遍才能吃到同一口径。 */
.login:not(.lg-c) .btn{
  height:var(--m-ctrl-h);border-radius:var(--radius-md);padding:0 var(--space-4);
}

/* 17.2 输入框：padding 6px var(--space-3)（⇒32px 高）/ 圆角 8px（= `.shell.hc-m .input`）。
 *      `textarea.input` 不设 height，行高自适应，只统一圆角与左右内距。
 *      🔴 2026-10-25 Notion 重构：圆角 4px → 8px，同 §17.1。 */
.login:not(.lg-c) .input,
.login:not(.lg-c) select.input,
.login:not(.lg-c) textarea.input{
  border-radius:var(--radius-md);padding:6px var(--space-3);
}

/* 17.3 品牌标（左栏 + 右卡共 2 处）：10px（离档）→ 4px（`--radius-sm`，与 `.shell.hc-m .brand-logo`
 *      同口径 —— 同一产品的同一品牌标，圆角应一致；10px 在源力五档内无对应值）。 */
.login:not(.lg-c) .brand-logo{border-radius:var(--radius-sm)}

/* ===============================================================
 * 【2026-10-11】1688 采购下单：订单详情卡片 / 采购弹层 / 订单列表筛选
 * 纪律：① 只用既有令牌（新令牌必须定义在 shared/base.css :root，否则 css-token-scope-smoke 报红）；
 *       ② 字重 **≤600**（merchant-type-scale-smoke 与 deptbuy-guard-smoke 都会拦 700）；
 *       ③ 作用域：详情/列表在 `.shell.hc-m.hc-mprod` 内，而**弹层挂在 #modal-root（.shell 之外）**
 *          ⇒ 弹层样式必须挂 `.mp-modal` 前缀（见本文件 §七的说明），写 `.shell.*` 一律不生效。
 * =============================================================== */

/* —— 订单详情 · 「客户与交付信息 ＋ 收货二维码」**双栏**（2026-10-12 掌柜指令） ——
 * 左 = 客户与交付信息（kv 行多，给略宽的 1.15fr）· 右 = 收货二维码。
 * 🔴 必须抵消 `.card + .card{margin-top:16px}`（base.css）：两卡在 grid 里是**同级兄弟**，
 *   不抵消的话右卡会被整体下推 16px、两栏顶边不齐。 */
.shell.hc-m.hc-mord .ord-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:16px;align-items:start}
.shell.hc-m.hc-mord .ord-two > .card{margin-top:0}
/* 窄屏降级单栏：两栏并排会把 kv 的值挤到折行，竖排更好读 */
@media (max-width:1080px){
  .shell.hc-m.hc-mord .ord-two{grid-template-columns:minmax(0,1fr)}
}

/* —— 订单明细：行尾「1688 采购」列（2026-10-11 · **明细行级**重构） ——
 * 🔴 作用域是 `hc-mord`（订单列表 + 订单详情两页），**不是 `hc-mprod`** —— 后者只挂在商品管理页。
 *   早前一版误挂 `hc-mprod` ⇒ 整段样式在订单页**从未生效**（实测：工具条没变成 flex、按钮堆在左侧）。
 * 行尾单元格三件：跳转链接 / 状态标签 / 录入钮。链接用**纯文本链接**形态而不是 .btn ——
 *   一张几十行的表里塞几十个描边按钮太重，同屏还有「售价 / 小计」等数值列，视觉会被按钮压过。 */
.shell.hc-m.hc-mord .ord-po{white-space:nowrap}
/* 竖两行：① 跳转按钮 ② 状态标签 + 录入钮 —— 列宽只有 ~170px，三件平铺会挤到第三行（实测） */
.shell.hc-m.hc-mord .po-cell{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.shell.hc-m.hc-mord .po-cell-b{display:flex;align-items:center;gap:8px}
.shell.hc-m.hc-mord .po-go{font-size:var(--font-size-h4);color:var(--color-primary);text-decoration:none;border:0;background:none;padding:0;cursor:pointer}
.shell.hc-m.hc-mord .po-go:hover{text-decoration:underline}
/* 无链接态：置灰 + 禁用（hover 的具体原因由 title 给：「缺少1688商品链接，无法跳转」） */
.shell.hc-m.hc-mord .po-go.off,
.shell.hc-m.hc-mord .po-go.off:hover{color:var(--color-text-4);text-decoration:none;cursor:not-allowed}
.shell.hc-m.hc-mord .ord-po .po-na{font-size:var(--font-size-h4);color:var(--color-text-4)}

/* 采购状态标签（**可点切换**）：待采购 = 中性、已采购 = 成功色 */
.shell.hc-m.hc-mord .po-st{display:inline-flex;align-items:center;height:20px;padding:0 8px;cursor:pointer;
  border-radius:9999px;font-size:12px;font-weight:var(--font-weight-semibold);white-space:nowrap;
  background:var(--color-bg-4);color:var(--color-text-3)}
.shell.hc-m.hc-mord .po-st:hover{box-shadow:inset 0 0 0 1px var(--color-border-2)}
.shell.hc-m.hc-mord .po-st.on{background:var(--color-success-bg);color:var(--color-success)}

/* 「＋ 录入 / 改单号」小钮（虚线胶囊；已采购时改成实线以示「可改」） */
.shell.hc-m.hc-mord .po-add{height:20px;padding:0 8px;border:1px dashed var(--color-border-2);border-radius:9999px;
  background:none;font-family:inherit;font-size:12px;color:var(--color-text-2);cursor:pointer}
.shell.hc-m.hc-mord .po-add:hover{border-color:var(--color-primary);color:var(--color-primary)}
.shell.hc-m.hc-mord .po-add.edit{border-style:solid}

/* —— 采购录入弹窗（2026-10-12 掌柜：由「行内展开子行」改为**弹窗**，并要求「弹窗大点、方便录入」） ——
 * 🔴 弹窗挂在 #modal-root、位于 `.shell` 之外 ⇒ `.shell.hc-m.hc-mord` 前缀一律匹配不到，
 *   必须按 `.mp-modal` 命名空间裸写（同本文件 §七 的约定）。
 * 宽度：`.mp-modal.po-rec`(0,2,0) > 基础层 `.modal{width:480px}`(0,1,0) ⇒ 稳胜；
 *   **刻意不传** modal() 的 `wide:true` —— 商家端 `.mp-modal.wide` 只有 640px，比这里要的窄。 */
.mp-modal.po-rec{width:820px;max-width:94vw}
/* 顶部行摘要：录之前先一眼确认「录的是哪一行」 */
.mp-modal .po-rec-h{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
  border-radius:var(--radius-sm);background:var(--color-bg-5)}
.mp-modal .po-rec-item{flex:1 1 auto;min-width:0}
.mp-modal .po-rec-n{font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);color:var(--color-text-1)}
.mp-modal .po-rec-m{margin-top:4px;font-size:var(--font-size-lead);color:var(--color-text-3)}
.mp-modal .po-rec-st{flex:0 0 auto}
.mp-modal .po-rec-link{margin-top:10px;font-size:var(--font-size-lead);color:var(--color-text-3);overflow-wrap:anywhere}
/* 字段：整宽 + 加高（录入友好）—— 用 padding 抬高度、**不写死 height**，免得与基础层 .input 打架 */
.mp-modal .po-rec-fld{display:block;margin-top:16px}
.mp-modal .po-rec-lb{display:block;margin-bottom:8px;font-size:var(--font-size-h4);
  font-weight:var(--font-weight-medium);color:var(--color-text-1)}
.mp-modal .po-rec-fld > .input{width:100%}
.mp-modal .po-rec-in{padding:10px 12px;font-size:var(--font-size-h3);letter-spacing:.3px}
.mp-modal .po-rec-ta{min-height:84px;padding:10px 12px;line-height:1.6;resize:vertical;font-size:var(--font-size-h4)}
.mp-modal .po-rec-tip{margin-top:14px;font-size:var(--font-size-lead);line-height:1.6;color:var(--color-text-4)}
/* 必填 / 选填标记（弹窗不在 .shell 内 ⇒ 作用域必须落在 .mp-modal 上） */
.mp-modal .po-req{font-style:normal;color:var(--color-danger)}
.mp-modal .po-opt{font-style:normal;color:var(--color-text-4)}

/* —— 「集采商品」页签 · 页签条与快速筛选（2026-10-11 新增第三个页签） —— */
.shell.hc-m.hc-mord .mord-tabs{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.shell.hc-m.hc-mord .mord-src-flt{margin-left:auto}   /* 待采购 / 已采购 与主页签并排、靠右 */
.shell.hc-m.hc-mord .mord-src-n{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;
  border-radius:9999px;font-size:12px;font-weight:var(--font-weight-semibold);text-align:center;
  background:var(--color-bg-4);color:var(--color-text-3)}

/* 卡片下方的「按 1688 采购单号过滤本单」搜索框（独立一行、右对齐） */
.shell.hc-m.hc-mord .mord-po-kw{display:flex;justify-content:flex-end;margin-top:10px}
.shell.hc-m.hc-mord .mord-po-kw .input{width:260px;max-width:100%;padding:5px 10px;font-size:var(--font-size-h4)}
/* 明细表空态（搜索 / 筛选后无匹配行） */
.shell.hc-m.hc-mord .mord-empty{text-align:center;padding:28px;color:var(--color-text-4)}

/* ---------------------------------------------------------------
 * 8.6.x 订单明细「改价」：售价单元格就地编辑（2026-10-18 掌柜需求）
 * ---------------------------------------------------------------
 * 结构（`_shell-orders.js` 的 mOrdPriceCell / mpxBegin）：
 *   td.mpx                基础态：主价；改过价的（.chg）主价上色 + 下方小字「原 ¥xx」
 *   td.mpx.edt            可点（仅「待发货 + 管理员」）；hover 出描边与浅底，暗示点得动
 *   td.mpx.editing        编辑态：[¥][输入] **单行**（2026-10-19 起「保存 / 取消」按钮已下线，
 *                         保存 = Enter 或点页面别处，放弃 = Esc）
 * 🔴 为什么输入框是 `flex:1 + width:100%` 且右对齐：售价列固定 116px，`.cart-tbl td` 左右内距 14px
 *   ⇒ 编辑态内容宽只有约 96px（`.editing` 把内距收窄到 10px），必须让输入框吃满剩余宽度；
 *   数字右对齐是为了与原价文本的右边缘对齐（列内金额才 «扫» 得动）。
 * 🔴 行高由左侧 60px 缩略图撑着（60 + 8×2 = 76px），单行 24px 的输入框**不改变行高**
 *   （2026-10-18 曾因「输入 + 两个按钮」竖排两行而专门讨论过行高，按钮下线后该约束消失）。
 * 🔴 色值一律走令牌（`css-token-scope-smoke` 只校验 base.css 的引用面，pages.css 靠自觉）；
 *   字重上限 600（`--font-weight-semibold`）—— 700 会被 merchant-type-scale 守卫拦下。 */
.shell.hc-m.hc-mord .mpx{white-space:nowrap}
.shell.hc-m.hc-mord .mpx .mpx-v{font-variant-numeric:tabular-nums}
.shell.hc-m.hc-mord .mpx.chg .mpx-v{color:var(--color-primary)}
/* ⚠️ `原 ¥xx` 那行**必须显式写回 regular**：它挂在 `td.num` 下，而 base.css 的
 *   `.tbl .num{font-weight:700;color:var(--ink)}` 会被继承 —— 不写就是「加粗的小字原价」，
 *   反而比主价更抢眼（视觉层级倒置）。 */
.shell.hc-m.hc-mord .mpx .mpx-old{display:block;margin-top:2px;font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);color:var(--color-text-4);
  text-decoration:line-through;font-variant-numeric:tabular-nums}
.shell.hc-m.hc-mord .mpx.edt{cursor:pointer}
.shell.hc-m.hc-mord .mpx.edt:hover{background:var(--color-primary-bg);box-shadow:inset 0 0 0 1px var(--primary-3)}
/* 【2026-10-24 C1/A6】缺货预询**待报价**行的售价单元格。
 * 掌柜裁定：预询下单不锁价（`price=0` 只表示「等你核价」），所以这里**不能显示 ¥0.00**
 * （会被当成白送），改用文字「待报价」+ 暖色底，让它在明细里一眼可辨；
 * 右侧参考价不划删除线（它不是作废的旧价，而是核价依据）。
 * 🔴 色值只用真实存在的令牌（`--warn-ink` / `--warn-weak` / `--t4`）——
 *   本文件里 `--color-primary` / `--font-weight-regular` 这类名字**并未定义**，
 *   写上去等于整条声明失效（CSS 变量缺失 ⇒ invalid at computed-value time ⇒ 回落继承）。 */
.shell.hc-m.hc-mord .mpx .mpx-v.pend{color:var(--warn-ink);font-weight:600}
.shell.hc-m.hc-mord .mpx.is-pend{background:var(--warn-weak)}
.shell.hc-m.hc-mord .mpx .mpx-old.mpx-ref{text-decoration:none;color:var(--t4)}
/* 单元格内距只在编辑态收窄（纯 paint 之外只动这一格的 padding，不影响列宽与行高） */
.shell.hc-m.hc-mord .mpx.editing{padding:5px 10px;background:var(--color-bg-4);box-shadow:inset 0 0 0 1px var(--primary-3)}
.shell.hc-m.hc-mord .mpx .mpx-ed{display:flex;align-items:center;gap:3px}
.shell.hc-m.hc-mord .mpx .mpx-cur{color:var(--color-text-3);font-size:var(--font-size-body)}
.shell.hc-m.hc-mord .mpx .mpx-in{flex:1 1 auto;min-width:0;width:100%;height:24px;padding:0 4px;
  font-family:inherit;font-size:var(--font-size-h4);line-height:22px;font-variant-numeric:tabular-nums;
  text-align:right;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-bg-1);color:var(--color-text-1)}
.shell.hc-m.hc-mord .mpx .mpx-in:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--state-focus)}
/* 「操作与审计」卡里的改价条目（商品 + 原价→新价 + 专属价动作） */
.shell.hc-m.hc-mord .mpx-lg{margin-top:4px;font-size:var(--font-size-body);line-height:1.6;color:var(--color-text-3)}
/* 改价确认窗：`#modal-root` 在 `.shell` 之外 ⇒ 作用域必须落在 `.mp-modal` 上（本仓既有纪律） */
.mp-modal .mpx-cf-t{font-size:var(--font-size-h4);line-height:1.7;color:var(--color-text-1)}
.mp-modal .mpx-cf-g{margin-top:12px;padding:10px 12px;border-radius:var(--radius-md);
  background:var(--color-bg-4);font-size:var(--font-size-h4);color:var(--color-text-1)}
.mp-modal .mpx-cf-p{display:block;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--color-text-3)}
.mp-modal .mpx-cf-p b{color:var(--color-primary);font-weight:var(--font-weight-semibold)}
.mp-modal .mpx-cf-tip{margin-top:14px;font-size:var(--font-size-lead);line-height:1.8;color:var(--color-text-2)}

/* —— 订单列表：「包含集采商品」勾选 + 「集采 N 件 · 待采购 M」列 —— */
.shell.hc-m.hc-mord .mq-flts .flt-src{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.shell.hc-m.hc-mord .mq-flts .flt-src .meta{white-space:nowrap}
.shell.hc-m.hc-mord .mq-src{font-size:var(--font-size-h4);color:var(--color-text-2);white-space:nowrap}
.shell.hc-m.hc-mord .mq-src-todo{margin-left:6px;font-size:12px;color:var(--color-warning);white-space:nowrap}


/* ---------------------------------------------------------------
 * 8.7 全表单校验的可视标记（2026-10-18）
 * ---------------------------------------------------------------
 * 三档锚点（见 product-form.js 的 hcProdErrMark）：
 *   · .field（基础信息）→ 复用 8.5 十 的 .has-err + 浮动 .field-err；
 *   · .kv-row / .sp-row → 行描红 + 行**之后**插一条 .pf-err-msg（行内是 flex/grid，插进去会挤坏列）；
 *   · 兜底 → 控件本身 .pf-err。
 * 只改 border-color / color（纯 paint），不改任何尺寸 —— 校验不能引发布局抖动。 */
.shell.hc-m.hc-mprod .drw-prod .pf-err,
.shell.hc-m.hc-mprod .drw-prod .kv-row.has-err .input,
.shell.hc-m.hc-mprod .drw-prod .sp-row.has-err .input,
.shell.hc-m.hc-mprod .drw-prod .sp-row.has-err .ssel-t{border-color:var(--color-danger)}
.shell.hc-m.hc-mprod .drw-prod .sp-row.has-err{border-color:var(--color-danger)}
.shell.hc-m.hc-mprod .drw-prod .pf-err-msg{
  margin:0 0 var(--space-3);color:var(--color-danger);
  font-size:var(--font-size-body);line-height:1.5;
}

/* ---------------------------------------------------------------
 * 8.8 销售规格 · 维度录入区 + SKU 表格（2026-10-18）
 * ---------------------------------------------------------------
 * 结构（`product-form.js` 的 `spEditorBody`）：
 *   #sp-ed-wrap
 *     .sp-dim-sec      维度录入（.sp-dim-head / #sp-dim-rows / .sp-dim-foot + 生成规格）
 *     .sp-ed-bar       统计 + 载入预制 + 重算 + 新增一条（原样）
 *     .sp-tbl-wrap     横向滚动兜底 + 列宽变量
 *       .sp-tbl-head   表头（**在 #sp-ed 之外** ⇒ 不污染 spRows() / sp-add 的锚点）
 *       #sp-ed         若干 .sp-row（**仍是 .sp-row**，读取契约零改动）
 *
 * 🔴 列宽只在一处定义（`--sp-tbl-cols`），表头与数据行共用 ⇒ 永不列错位。
 * 🔴 行内字段契约（`.i-n/.i-v/.i-u/.i-b/.i-p/.i-oc/.i-on/.i-img/.i-dims`）不得改名 ——
 *   `readSpEdRows` / 校验 / 自动算价 / 保存映射全部按类名取值。
 * 🔴 hover 只改颜色与背景（纯 paint），不带任何几何属性 —— 否则会复现「抽屉内滚动抖动」。
 * 字号只取源力八档、颜色只用令牌（`merchant-type-scale-smoke` / `mp-color-token-smoke` 会拦）。
 * ================================================================ */

/* ① 维度录入区 */
.shell.hc-m.hc-mprod .drw-prod .sp-dim-sec{
  border:1px solid var(--color-border-2);border-radius:var(--radius-lg);
  background:var(--color-bg-4);padding:var(--space-3);margin-bottom:var(--space-3);
}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-head{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-t{display:inline-flex;align-items:baseline;gap:var(--space-2);font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);color:var(--color-text-1)}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-sub{font-size:var(--font-size-body);font-weight:var(--font-weight-regular);color:var(--color-text-3)}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-empty{
  margin-top:var(--space-2);padding:var(--space-4);border:1px dashed var(--color-border);
  border-radius:var(--radius-md);background:var(--color-bg-1);
  font-size:var(--font-size-body);line-height:1.7;color:var(--color-text-3);
}
/* 🔴 【2026-10-18 第四批】维度区按参考图重构：**表头行 + 规格名窄列 + 规格值方格横排**。
 *   🔴 两列宽度**只在 --sp-dim-cols 定义一次**，表头（.sp-dim-hd）与数据行（.sp-dim-row）共用
 *      —— 手工维护两套必然列错位（与 SKU 表 --sp-tbl-cols 同一纪律）。
 *   🔴 规格值用 flex-wrap —— 一行塞不下 16 个取值时**往下折行**，而不是把抽屉撑宽。
 *   🔴 「＋ 添加规格值」在**取值流内**（跟着换行），不再独占一列。 */
.shell.hc-m.hc-mprod .drw-prod .sp-dim-sec{--sp-dim-cols:150px minmax(0,1fr)}
.shell.hc-m.hc-mprod .drw-prod #sp-dim-rows{display:flex;flex-direction:column;gap:var(--space-2)}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-hd{
  display:grid;grid-template-columns:var(--sp-dim-cols);gap:var(--space-3);
  padding:0 var(--space-1) 6px;border-bottom:1px solid var(--color-border-2);
  font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-3);
}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-row{
  display:grid;grid-template-columns:var(--sp-dim-cols);gap:var(--space-3);align-items:start;
}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-nm{display:flex;align-items:center;gap:4px}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-nm .i-dim-n{flex:1 1 auto;min-width:0;min-height:34px}
/* 规格值方格：白底细框 + 左对齐文字 + 右侧两枚小图标（对齐参考图的「格」形态） */
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vals{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:34px;
}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vals .sp-chip{
  display:inline-flex;align-items:center;gap:6px;min-width:132px;min-height:34px;
  padding:0 6px 0 10px;border:1px solid var(--color-border-2);
  border-radius:var(--radius-sm);background:var(--color-bg-card);color:var(--color-text-1);
  font-size:var(--font-size-body);line-height:1.5;white-space:nowrap;
}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vals .sp-chip b{
  flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;font-weight:var(--font-weight-regular);
}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vals .sp-chip-cp,
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vals .sp-chip-x{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:18px;height:18px;font-style:normal;cursor:pointer;color:var(--color-text-3);
}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vals .sp-chip-cp:hover{color:var(--color-primary)}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vals .sp-chip-x:hover{color:var(--color-danger)}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vals .i-dim-v{
  flex:0 1 180px;min-width:132px;min-height:34px;padding:0 10px;
  border:1px solid var(--color-border-2);border-radius:var(--radius-sm);
  box-shadow:none;background:var(--color-bg-card);outline:none;
  font-size:var(--font-size-body);color:var(--color-text-1);
}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vals .i-dim-v:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--state-focus)}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vadd{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:34px;padding:0 12px;border:1px dashed var(--color-border);
  border-radius:var(--radius-sm);background:transparent;color:var(--color-text-2);
  font-size:var(--font-size-body);cursor:pointer;white-space:nowrap;
}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-vadd:hover{border-color:var(--color-primary);color:var(--color-primary)}
.shell.hc-m.hc-mprod .drw-prod .sp-chip{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
  border-radius:var(--radius-full);background:var(--color-primary-bg);color:var(--color-primary);
  font-size:var(--font-size-body);line-height:1.5;white-space:nowrap;
}
.shell.hc-m.hc-mprod .drw-prod .sp-chip b{font-weight:var(--font-weight-medium)}
.shell.hc-m.hc-mprod .drw-prod .sp-chip-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;font-style:normal;cursor:pointer;color:var(--color-text-3);
}
.shell.hc-m.hc-mprod .drw-prod .sp-chip-x:hover{color:var(--color-danger)}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-3);
}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-cnt{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m.hc-mprod .drw-prod .sp-dim-cnt.bad{color:var(--color-danger)}

/* ② SKU 表格：列宽单一来源（表头与数据行共用）
 * 🔴 2026-10-23 新增「货名（单据用）」列（`.i-bn`）：客户看的规格值要简洁（"四连文件框"），
 *   仓库看单据要认得出货（"得力 6689 四连文件框"）—— 两者不能挤在同一个格子里。
 *   固定列合计 34+38+108+100+72+76+104+44 = 576px，两个弹性列吃剩余；加了 150px 最小宽后
 *   `--sp-tbl-min` 从 1010 → 1170（抽屉正文宽约 1390，仍不出现横向滚动）。 */
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-wrap{
  --sp-tbl-cols:34px 38px minmax(110px,1fr) minmax(150px,1.3fr) minmax(150px,1.2fr) 108px 100px 72px 76px 104px 44px;
  --sp-tbl-min:1170px;
  overflow-x:auto;border:1px solid var(--color-border-2);border-radius:var(--radius-lg);
  background:var(--color-bg-card);
}
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-head,
.shell.hc-m.hc-mprod .drw-prod .spr-g{
  display:grid;grid-template-columns:var(--sp-tbl-cols);
  gap:var(--space-2);align-items:center;min-width:var(--sp-tbl-min);
}
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-head{
  padding:var(--space-2) var(--space-3);background:var(--color-bg-4);
  border-bottom:1px solid var(--color-border-2);
  font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-3);
}
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-head .c{text-align:center}
/* 【2026-10-23 P1】货名格：输入 + 「选」按钮（从基础商品库挑）。只包这一格，
   不动其它列的宽度契约（--sp-tbl-cols 的轨道数不变）。 */
.shell.hc-m.hc-mprod .drw-prod .sp-bn-wrap{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.shell.hc-m.hc-mprod .drw-prod .sp-bn-wrap .i-bn{flex:1 1 auto;min-width:0}
.shell.hc-m.hc-mprod .drw-prod .sp-bn-pick{flex:0 0 auto;height:30px;padding:0 var(--space-2);font-size:var(--font-size-body)}
/* 基础商品选择器：弹窗在 #modal-root（.shell 之外），故用独立类名裸写，不挂 .shell 前缀 */
.bp-pick-list{max-height:340px;overflow:auto;border:1px solid var(--color-border-2);border-radius:var(--radius-md,8px);margin-top:var(--space-2)}
.bp-pick-it{display:grid;grid-template-columns:92px 1fr 92px 84px;gap:var(--space-2);align-items:center;
  padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-border-3);cursor:pointer;font-size:var(--font-size-body)}
.bp-pick-it:first-child{border-top:0}
.bp-pick-it:hover{background:var(--color-bg-4)}
.bp-pick-it.off{opacity:.6}
.bp-pick-it .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-pick-it .p{text-align:right;font-variant-numeric:tabular-nums}
.bp-pick-it .t{text-align:right;color:var(--color-text-4)}
/* 【2026-10-18 第二批】批量设置区（对齐参考图同名功能）。
 * 🔴 字段**限定为本仓已有列**：包装方式 / 售价 / 订货编码 / 启用状态。
 *   **进价 / 供货价 / 库存 / 重量 / 体积**仍属进销存口径，本仓不做（2026-09-19 拍板不变）。
 *   🆕 【2026-10-21 掌柜裁定】箱规 / 起订量 / 购买步长**不是进销存，是「包装换算」**，本次重启：
 *     理由是客户端出现真实混淆（`¥0.99 ~ ¥135 / 支` 里的 135 其实是箱价），
 *     不把包装结构化就永远说不清「这个价按哪个单位算」。规格图仍不做批量：逐条配更安全。 */
/* ============================================================
 * 【2026-10-21 包装换算】B 区 —— 规格与包装拆开后的**唯一**包装录入口
 * ------------------------------------------------------------
 * 为什么单独一块：单位与换算基数原先在每一行各填一次，同一个包装事实要填三遍
 *   （属性值文本「12 支 / 盒」+ 单位「盒」+ 换算基数 12），填歪了没有任何提示。
 *   收进 B 区后按「包装签名（单位|内容量）」识别，改一处写穿全部同签名的行。
 * 🔴 明细表的「包装」列是**只读**（`.sp-pk-cell`）：能改的地方只有这里，避免又出现第二个真相源。
 * ============================================================ */
.shell.hc-m.hc-mprod .drw-prod .sp-pk-sec{
  border:1px solid var(--color-border-2);border-radius:var(--radius-lg);
  background:var(--color-bg-4);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);
}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-head{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-tip{font-size:var(--font-size-body);color:var(--color-text-3)}
/* 包装单位一键填入（2026-10-22）：中文输入法打「包」被选成「从」，
 * 与其事后纠错，不如给一排常用词。（只填值，不豁免校验） */
.shell.hc-m.hc-mprod .drw-prod .sp-pk-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-quick-lb{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-q{padding:3px 10px;border:1px solid var(--color-border-2);border-radius:9999px;background:var(--color-bg-2);font-size:var(--font-size-body);line-height:1.6;color:var(--color-text-2);cursor:pointer;user-select:none;transition:border-color .15s,color .15s,background-color .15s}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-q:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-bg)}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-quick-tip{font-size:var(--font-size-body);color:var(--color-text-3);opacity:.85}
/* 填入后短暂高亮目标行，让「填到哪一行」看得见 */
.shell.hc-m.hc-mprod .drw-prod .sp-pk-row.sp-pk-hit .i-pk-u{border-color:var(--color-primary);background:var(--color-primary-bg)}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-tbl{margin-top:var(--space-2)}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-hd,
.shell.hc-m.hc-mprod .drw-prod .sp-pk-row{
  /* 🔴 表头 6 格 = 行 6 格（2026-10-22 修）：此前是 7 轨，而表头只写了 6 格、行里的「预览」又
   * 跨 2 列 ⇒ 行实际占 7 格而表头只有 6 格，删除按钮被推到第 7 列、与表头「删除」错位。 */
  /* 含量列 120 → 176（2026-10-22）：表头「含量（1 单位 = ? 个）」在 120px 下被挤成三行。
   * 「预览」列吃掉剩余宽度 ⇒ 起订 / 步长 / 删除 靠右，与表头逐格对齐。 */
  display:grid;grid-template-columns:104px 176px minmax(180px,1fr) 84px 84px 44px;
  gap:var(--space-2);align-items:center;
}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-hd{
  padding:var(--space-2) 0;border-bottom:1px solid var(--color-border-2);
  font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-3);
}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-hd .c{text-align:center}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-hd em{font-style:normal;color:var(--color-danger)}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-row{padding:6px 0;border-top:1px solid var(--color-border-3)}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-row:first-child{border-top:0}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-box{display:flex;gap:6px}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-prev{font-size:var(--font-size-body);color:var(--color-text-3);align-self:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-n{font-size:var(--font-size-body);color:var(--color-text-3);font-variant-numeric:tabular-nums}
.shell.hc-m.hc-mprod .drw-prod .sp-pk-empty{padding:12px 0;font-size:var(--font-size-body);color:var(--color-text-3)}
/* 明细表的只读包装列 */
.shell.hc-m.hc-mprod .drw-prod .sp-pk-cell{
  display:inline-flex;align-items:center;min-height:32px;padding:0 8px;border-radius:8px;
  background:var(--color-bg-4);color:var(--color-text-2);font-size:var(--font-size-body);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.shell.hc-m.hc-mprod .drw-prod .sp-bt-sec{
  border:1px solid var(--color-border-2);border-radius:var(--radius-lg);
  background:var(--color-bg-4);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);
}
.shell.hc-m.hc-mprod .drw-prod .sp-bt-head{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.shell.hc-m.hc-mprod .drw-prod .sp-bt-t{
  display:inline-flex;align-items:baseline;gap:var(--space-2);
  font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);color:var(--color-text-1);
}
.shell.hc-m.hc-mprod .drw-prod .sp-bt-sub{font-size:var(--font-size-body);font-weight:var(--font-weight-regular);color:var(--color-text-3)}
.shell.hc-m.hc-mprod .drw-prod .sp-bt-n{font-size:var(--font-size-body);color:var(--color-text-3);font-variant-numeric:tabular-nums}
.shell.hc-m.hc-mprod .drw-prod .sp-bt-bar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-2)}
.shell.hc-m.hc-mprod .drw-prod .sp-bt-f{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--font-size-body);color:var(--color-text-2);white-space:nowrap;
}
.shell.hc-m.hc-mprod .drw-prod .sp-bt-f .input{min-height:34px;padding:4px 8px;max-width:180px}
.shell.hc-m.hc-mprod .drw-prod .sp-bt-f .i-bt{margin:0}
/* 行首勾选列（34px，与表头 .c-s 对齐） */
.shell.hc-m.hc-mprod .drw-prod .spr-sel{display:inline-flex;align-items:center;justify-content:center;min-height:28px}
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-head .c-s{text-align:center}
/* 【2026-10-18】多维时隐藏「规格名称」列。🔴 列宽必须同步从 11 列切到 10 列 ——
 *   只 display:none 而不改 --sp-tbl-cols，表头与数据行会各多出一条空轨道（右侧留白 + 末列挤位）。
 *   🔴 .i-n 节点**保留**（只隐藏）：删掉它 readSpEdRows 会读到 '' ⇒ 一维已填的组名被静默清空。
 *   🔴 display:none 的 grid item 不生成盒子、不占轨道 ⇒ 表头与数据行同步隐藏即自动对齐。 */
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-wrap.no-n{
  --sp-tbl-cols:34px 38px minmax(200px,1.6fr) minmax(150px,1.2fr) 108px 100px 72px 76px 104px 44px;
  --sp-tbl-min:1050px;
}
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-wrap.no-n .sp-tbl-head .c-n,
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-wrap.no-n .spr-g .i-n{display:none}
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-head em{font-style:normal;color:var(--color-danger)}
/* 表体：行之间用 1px 分隔线（不再是一张张卡片） */
.shell.hc-m.hc-mprod .drw-prod .sp-list{gap:0;min-width:var(--sp-tbl-min)}
.shell.hc-m.hc-mprod .drw-prod .sp-row{
  border:0;border-top:1px solid var(--color-border-3);border-radius:0;
  background:var(--color-bg-1);counter-increment:sp-row;
}
.shell.hc-m.hc-mprod .drw-prod .sp-list{counter-reset:sp-row}
.shell.hc-m.hc-mprod .drw-prod .sp-list>.sp-row:first-child{border-top:0}
.shell.hc-m.hc-mprod .drw-prod .sp-row:hover{background:var(--color-bg-4);box-shadow:none}
.shell.hc-m.hc-mprod .drw-prod .sp-row.off{opacity:.62}
.shell.hc-m.hc-mprod .drw-prod .spr-g{padding:6px var(--space-3)}
/* 序号列：CSS counter（原卡片的 `.sc-idx` 永远显示 `#`，这里顺带把序号真正做出来） */
.shell.hc-m.hc-mprod .drw-prod .spr-idx{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;font-size:var(--font-size-body);
  color:var(--color-text-3);font-variant-numeric:tabular-nums;
}
.shell.hc-m.hc-mprod .drw-prod .spr-idx::before{content:counter(sp-row)}
.shell.hc-m.hc-mprod .drw-prod .spr-g .input{min-height:38px;padding:8px 10px}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sfx .input{padding:8px 6px}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sfx .pre{width:22px;padding-right:0}
.shell.hc-m.hc-mprod .drw-prod .spr-g .i-u{padding-right:6px}
.shell.hc-m.hc-mprod .drw-prod .spr-p{display:flex;flex-direction:column;gap:2px;min-width:0}
.shell.hc-m.hc-mprod .drw-prod .spr-p .auto-chip{align-self:flex-start}
/* 已关联基础商品的规格行：售价只读（价由那条商品决定），并给一句出处提示。
 * 108px 的窄列里 10px 提示会折成两行 —— 这是刻意的：文案必须看得见，不能只放 title（触屏无 hover）。 */
.shell.hc-m.hc-mprod .drw-prod .spr-g .i-p[readonly]{
  background:var(--color-bg-4);color:var(--color-text-3);cursor:not-allowed;
}
.shell.hc-m.hc-mprod .drw-prod .spr-p .sp-lock-tip{
  align-self:flex-start;font-size:var(--font-size-caption);color:var(--color-text-3);line-height:1.3;
}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sc-ops{margin-left:0;justify-content:center}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sp-img-cell{gap:6px;flex-wrap:nowrap}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sp-img-th{width:34px;height:34px}
/* 【2026-10-27】规格图改成可点上传的 label：给可点暗示。
 * 🔴 `.sp-img-in{display:contents}` 是必需的 —— 回填只换这一层（保住 label 里的 file input），
 *   它自己不参与布局，里面的 img / 占位才仍受 .sp-img-th 的 flex 约束（否则缩略图会溢出/错位）。 */
.shell.hc-m.hc-mprod .drw-prod .spr-g .sp-img-th{cursor:pointer}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sp-img-th:hover{border-color:var(--color-primary);background:var(--color-bg-2)}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sp-img-in{display:contents}
/* 【2026-10-28】这一格没有自己的图、显示的是**基础商品的图**（继承）⇒ 淡化 + 虚线框。
 * 目的：让人一眼看出「这图不是在这条规格上设的」，否则清空后又冒出图，会以为是清空失败。
 * 🔴 只影响显示，`.i-img` 仍是空串 ⇒ 保存不会把它落库。 */
.shell.hc-m.hc-mprod .drw-prod .spr-g .sp-img-in img.sp-img-inherit{opacity:.5}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sp-img-th:has(.sp-img-inherit){border-style:dashed;background:var(--color-bg-2)}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sp-img-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;font-size:var(--font-size-body);
}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sp-toggle{gap:6px}
.shell.hc-m.hc-mprod .drw-prod .spr-g .sp-toggle i{font-size:var(--font-size-body)}
/* 行内错误位：列在 grid 之外（块级），错误消息不会变成新的 grid item */
.shell.hc-m.hc-mprod .drw-prod .sp-row-msg{
  padding:0 var(--space-3) 8px 46px;
  font-size:var(--font-size-body);line-height:1.5;color:var(--color-danger);
}
.shell.hc-m.hc-mprod .drw-prod .sp-row-msg[hidden]{display:none}
/* 表格行的出错态：没有外边框 ⇒ 用底色 + `.sfx` 描边表达（`.input` 在 `.sfx` 里本身无边框） */
.shell.hc-m.hc-mprod .drw-prod .sp-row.has-err{background:var(--color-danger-bg)}
.shell.hc-m.hc-mprod .drw-prod .sp-row.has-err .sfx{border-color:var(--color-danger)}
/* 空态在表格容器里（无行时出现） */
.shell.hc-m.hc-mprod .drw-prod .sp-tbl-wrap .sp-empty{border:0;border-radius:0;min-width:var(--sp-tbl-min)}

/* ============================================================
   【2026-10-23 P2】送货单 / 拣货单：屏幕预览 + A4 打印
   ------------------------------------------------------------
   🔴 这组样式**不在 `.shell` 里**：`#print-root` 直接挂在 body 上（与 `#modal-root` 同一层），
      所以选择器一律裸写 `#print-root ...`，不套 `.shell.hc-m` 前缀（套了就一条都不生效）。
   🔴 **物理尺寸用 mm（纸张边距/线宽），字号仍走项目的 px 档位**：
      · A4 是物理介质，mm 才是它自己的单位（打印缩放不会跑版）；
      · 但 `font-size` 仍然只能用 10/12/13/14/16/18/20/24px —— 那是 `merchant-type-scale-smoke`
        的唯一口径。首版我用了 pt，门禁立刻报「非源力排版档位」；**该改的是实现，不是放宽判据**
        （12px ≈ 9pt，打出来一样）。
   🔴 颜色写死黑白灰是**有意的**：纸上没有主题变量，深色模式下也不能把单据打成夜色。
   ============================================================ */
/* 订单详情「订单处理」条里的打印按钮组：**独立类名**，刻意不复用 `.od-bar-btns` ——
   那个类名在 `morder-state-smoke` 里代表「状态操作卡」（终态必须为 0），打印是另一回事。 */
.od-bar-print{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-left:auto}
#print-root{position:fixed;inset:0;z-index:9999;overflow:auto;padding:var(--space-4);background:var(--color-bg-4)}
#print-root .prt-bar{max-width:210mm;margin:0 auto var(--space-3);display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
#print-root .prt-bar-t{font-size:var(--font-size-h3)}
#print-root .prt-bar-s{font-size:var(--font-size-body);color:var(--color-text-3)}
#print-root .prt-bar-sp{flex:1}
#print-root .prt-sheet{max-width:210mm;min-height:297mm;margin:0 auto;padding:14mm 12mm;background:#fff;color:#111;
  font-size:12px;line-height:1.5;box-shadow:0 2px 18px rgba(0,0,0,.14)}
#print-root .prt-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:8mm;
  padding-bottom:3mm;border-bottom:1.2pt solid #111}
#print-root .prt-co{display:flex;flex-direction:column;gap:1mm;min-width:0}
#print-root .prt-co-n{font-size:var(--font-size-h2);letter-spacing:.4pt}
#print-root .prt-co-s{font-size:12px;color:#555}
#print-root .prt-ti{text-align:right;flex:0 0 auto}
#print-root .prt-ti-n{margin:0;font-size:24px;letter-spacing:3pt;font-weight:600;line-height:1.1}
#print-root .prt-ti-m{display:flex;gap:4mm;justify-content:flex-end;margin-top:1.5mm;font-size:12px;color:#333}
#print-root .prt-ti-no{font-size:var(--font-size-h4)}
#print-root .prt-meta{width:100%;margin:4mm 0 3mm;border-collapse:collapse;font-size:12px}
#print-root .prt-meta th{width:22mm;text-align:left;font-weight:400;color:#555;padding:.8mm 0;vertical-align:top}
#print-root .prt-meta td{padding:.8mm 0;color:#111}
#print-root .prt-tbl{width:100%;border-collapse:collapse;margin-top:1mm;font-size:12px}
#print-root .prt-tbl th{background:#f2f2f2;border:.5pt solid #999;padding:1.4mm 1.2mm;font-weight:600;text-align:left;font-size:12px}
#print-root .prt-tbl td{border:.5pt solid #bbb;padding:1.3mm 1.2mm;vertical-align:top}
#print-root .prt-tbl .c{text-align:center}
#print-root .prt-tbl .r{text-align:right;font-variant-numeric:tabular-nums}
#print-root .prt-ck{display:inline-block;width:4mm;height:4mm;border:.6pt solid #666;vertical-align:-.6mm}
#print-root .prt-sum{display:flex;gap:6mm;flex-wrap:wrap;align-items:baseline;margin-top:3mm;font-size:12px}
#print-root .prt-sum b{font-size:14px}
#print-root .prt-cn b{letter-spacing:.5pt}
#print-root .prt-sign{display:flex;align-items:flex-end;gap:2mm;flex-wrap:wrap;margin-top:12mm;font-size:12px;color:#333}
#print-root .prt-sign i{display:inline-block;width:32mm;border-bottom:.5pt solid #333;height:4mm}
#print-root .prt-sign i.short{width:20mm}
#print-root .prt-foot{margin-top:8mm;padding-top:2mm;border-top:.5pt dashed #bbb;font-size:var(--font-size-caption);color:#888;text-align:center}

@media print{
  /* 纸张边距交给 `.prt-sheet` 的 padding（@page margin=0 才能保证「预览=打印」）。 */
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff !important}
  body > *:not(#print-root){display:none !important}
  #print-root{position:static;inset:auto;padding:0;overflow:visible;background:#fff}
  #print-root .prt-bar{display:none !important}
  #print-root .prt-sheet{max-width:none;min-height:0;margin:0;padding:12mm;box-shadow:none}
  /* 明细行不许跨页截断；表头每页重复 —— 不然第二页的表格是无头的裸行。 */
  #print-root tr,#print-root .prt-sign{page-break-inside:avoid}
  #print-root thead{display:table-header-group}
  #print-root .prt-sum{page-break-inside:avoid}
}

/* 【2026-10-24】商品编辑页「客户端详情页版式」：.fg 是 1fr 1fr 两列栅格，
   本字段是两张并排的单选卡，必须**跨两列**，否则挤在半列里、说明文字折成 4 行（实测）。 */
.shell.hc-m.hc-mprod .drw-prod #f-disp-field{grid-column:1/-1}
.shell.hc-m.hc-mprod .drw-prod #f-disp-field .cm-op{flex:1 1 320px}

/* ================================================================
 * 十八、2026-10-25 Notion 重构 · 内容面去阴影（收口层）
 * ================================================================
 * 背景：DESIGN.md 明令 "Do not add shadows to content cards —— the system uses
 *   hairline borders only, shadows appear only on the product UI mockup and nav bar"。
 *   全站阴影审计（CDP 逐页扫 `.shell.hc-m *` 的计算 box-shadow）抓到 5 处内容面投影，
 *   本节按项目既有纪律统一收口：**不动共享 base.css**，用同选择器在本文件覆盖
 *   （同特异性、本文件晚于 base.css 加载 ⇒ 必胜）。
 *
 * 覆盖对象与理由：
 *  ① `base.css:2355`  `.shell.hc-mcat .mc-seg-b.on`  `0 1px 3px rgba(0,0,0,.08)`
 *     —— 分段控件选中态。容器 `.mc-seg` 本身有 `--surface` 底，白片已经与容器形成对比，
 *        投影纯属「抬起来」的拟物感，直接删。
 *  ② `base.css:2419`  `.mc-grid .cat-it .ci-ops`      `0 1px 4px rgba(0,0,0,.12)`
 *  ③ `base.css:2429`  `.cats3.sorting .mc-grid .cat-it::after` 同上
 *     —— 这两处是**浮在缩略图上的小白片/抓手点阵**，压在图上看不清，确需一层分隔。
 *        但按 DESIGN.md 该用**发丝线**而非投影，故把投影换成 `1px solid rgba(0,0,0,.08)`
 *        （Notion 的标准分隔件），功能不损失、口径归位。
 *  ④ `pages.css:2101` `.shell.hc-m.hc-mhelp .hlp-card` `var(--shadow-1)`
 *  ⑤ `pages.css:2267` `.shell.hc-m.hc-mcos .csg`        `var(--shadow-1)`
 *     —— 帮助中心与图片存储的卡片，本就是 `1px 发丝线 + 白底`，投影是多余的，
 *        显式 `box-shadow:none`（与 §4.2 `.card` 同口径）。
 *
 * ⚠️ 另有一处已修：`shell.css` 的 `.shell.hc-m .tbl-wrap` 漏写 `box-shadow:none`
 *   （共享层 base.css:225 的 `.tbl-wrap` 带 `var(--sh1)`，而 `.shell.hc-m` 的令牌桥接
 *    pages.css:1644-1692 没有映射 `--sh1/--sh2` ⇒ 回落到 base.css:31 的旧值）。
 *   那一处影响**每一张表格卡**，已在 shell.css §4.3 补齐，不在此重复。 */
.shell.hc-mcat .mc-seg-b.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:none}
.shell.hc-mcat .mc-grid .cat-it .ci-ops{
  background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.08);box-shadow:none}
.shell.hc-mcat .cats3.sorting .mc-grid .cat-it::after{
  background-color:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.08);box-shadow:none}
.shell.hc-m.hc-mhelp .hlp-card{box-shadow:none}
.shell.hc-m.hc-mcos .csg{box-shadow:none}