/* ============================================================
 * 智企办公 · 公共基础样式（public/shared/base.css）
 * 位置：公共基础层 —— 商家端与客户端**共用**的基础令牌与原子组件。
 * 准入：只允许放设计令牌、布局骨架、按钮/卡片/徽章/表格/表单/弹层等**无业务语义**的原子样式。
 * 🔴 禁止放入商家端或客户端的业务页面样式（那两类分别归 merchant/styles/ 与 client/styles/）。
 * 由 styles.css 按「选择器真实使用端」实证拆分而来（见 _assess/tmp/split-css2.js）。
 * ============================================================ */
/* ============================================================
   智企办公 · 企业采购下单系统 —— 可交互原型样式
   视觉对齐设计稿验收版：钴蓝主色 / 胶囊按钮 / 白卡 / 状态徽章
   ============================================================ */
:root{
  /* ── 方案 A（2026-09-18 掌柜选定）：黄守品牌位、主行动转墨黑、蓝退为文字 ──
  * --pri-action 专供「填色面」（主按钮 / 选中 chip / 当前页码 / 开关开启 / 勾选框）；
  * --pri / --pri-600 色值不变，只收窄用途 —— 文字、描边、≤4px 指示图形继续用蓝。 */
  --pri-action:#1C1C1E; --pri-action-press:#333338;
  --pri:#0064E0; --pri-600:#0457CB; --pri-weak:#FFF6DA; --pri-100:#CDE1FD;
  --ink:#0A1317; --t1:#1C1E21; --t2:#303B47; --t3:#44515C; --t4:#5F6C78; --t5:#9AA3AD;
  --line:#DEE3E9; --line2:#CED0D4; --line3:#E9EDF2; --line4:#EDF1F5; --line5:#F1F4F7;
  /* 边框语义三档（2026-09-10 P2 设计评审）：strong=分隔/描边 · default=主容器 · soft=内嵌元素 */
  --bd-strong:#CED0D4; --bd:#DEE3E9; --bd-soft:#E9EDF2;
  /* 无图占位统一色（2026-09-10 设计评审）：商品/分类首字徽标用品牌蓝灰，替代冷灰 #9FB0C0 */
  --ph-c:#8FA8DC;
  /* 模板列表分类色点三档（2026-09-19 全量重设计）：纯视觉索引、不承载业务语义。
   * d0 复用品牌蓝；d1/d2 为本组件专属，命名限定在模板抽屉内使用。 */
  --dot-teal:#0FBCB0; --dot-coral:#FF9999;
  --page:#F2F4F7; --canvas:#FFFFFF; --sf:#F7F9FB; --surface:#F1F4F7; --sf2:#FBFCFD;
  --ok:#31A24C; --ok-weak:#E6F4EA; --ok-ink:#117A32;
  --warn:#E8930C; --warn-weak:#FDEBD4; --warn-ink:#A85D00;
  --err:#E41E3F; --err-weak:#FCE9EE; --err-ink:#C22643;
  --sh1:0 1px 4px rgba(15,23,42,.04); --sh2:0 6px 16px rgba(15,23,42,.08);
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  /* ── 安全留白令牌（2026-10-02 全局布局排查）──
   * 为什么需要：后代 outline（开发预览的「2px 虚线 + 1px offset」= 向外扩 3px）画在 border box
   * **之外**，而 overflow 的裁切发生在 padding box —— 子元素一旦贴住内壁，那一侧的虚线就被削掉。
   * 分两档：--pad-card 8px（卡片 / 表格卡 / 弹窗等大容器）；--pad-tight 4px（滚动层、内嵌小卡等紧凑容器）。
   * 三条铁律：
   *   ① 凡设裁切（overflow:hidden/clip）的容器，四周内边距 ≥8px；
   *   ② 子元素与容器内壁 ≥6px（= 轮廓外扩 3px + 3px 余量）；
   *   ③ 例外只有五类，且每类都必须在原地注释写明原因：
   *      (a) 纯文本截断工具类 —— overflow:hidden + text-overflow:ellipsis，裁切对象是自身那一行文本，无元素子节点；
   *      (b) 滚动容器 —— overflow:auto/scroll 必须在自身边界裁切（无法回避），取 --pad-tight 的最小可行值；
   *      (c) 有意的出血设计 —— 图片框 / SVG 图标框 / 定高芯片条（后者改用 overflow:clip + overflow-clip-margin 兜底）；
   *      (d) 应用外壳 —— .shell / .main / .content / 目录页 flex 布局列（.cat-flex / .cat-main）/ 企业中心两栏（.ent-flex）/ 抽屉两栏通铺；
   *      (e) 第三方富文本自带样式 —— 商品 info 是掌柜粘贴导入的 HTML（如夸克导出：qk-md-* 类 + 内联 overflow:hidden），
   *          属用户内容而非本工程样式，不得改写（改它等于动业务数据）。
   *   ④ 判据侧须同步：几何审计要把 overflow-clip-margin 计入有效内壁（仅当该轴为 clip 时才计），
   *      否则 (c) 的定高芯片条会被误报成「轮廓被削」的假阳性。
   * 新增容器一律引用令牌，不写字面数字。 */
  --pad-card:8px; --pad-tight:4px;
  /* ---- 视口高度中的「固定占用」高度（页头 + 页脚 + 内外边距的堆叠值） ----------------
   * 2026-10-13 分辨率自适应改造：原先这 5 个魔术数字散落在 3 个文件里各自硬编码，
   * 页头高度一变就要改 6 处。收敛成具名令牌后只改这里。
   * 🔴 商品抽屉右栏的 168px **刻意不纳入** —— 它被 test/mprod-drawer-geo-smoke.js 与
   *    test/mprod-two-col-smoke.js 逐字钉死（56 头 + 64 脚 + 24×2 内距的推导值）。 */
  --vh-chrome-mcat:236px;      /* 分类管理：.cats3 > .mc-work 的 max-height */
  --vh-chrome-side:210px;      /* 侧栏式列表：.mem-rail（成员）/ .cats3 .cats-col（分类） */
  --vh-chrome-nav:153px;       /* 客户端目录左栏 .cat-tree（顶栏 60 + 页签 + 余量） */
  /* 🔴 2026-10-14 四改：64px → 160px。旧值让白卡**比「贴顶后的可用高度」还高 30px**
   *   （贴顶后顶部落在视口 y=94 ⇒ 可用 = 100vh−94；旧值给的是 100vh−64）⇒ 白卡顶不动、被父容器夹住
   *   ⇒ 短页签下退化成普通元素、切页签时右侧模块上下跳 80px（三视口实测）。
   *   硬条件推导见 `client/styles/pages.css` 的 `.pd-buy` 段：扣减量必须 ≥ 144px。 */
  --vh-chrome-pd:160px;        /* 客户端详情右栏 .pd-buy（贴顶后到视口底的占用 + 安全余量） */
  --vh-chrome-pd-drawer:150px; /* 详情**抽屉**里的 .pd-buy（在上一档基础上再加抽屉头/体) */
  /* ── 共享层自足的**源力基础档位**（2026-10-07 批次 16 补）──
   * 🔴 规则：**base.css 一旦以 var() 形式引用某令牌，该令牌就必须在「两端都会加载的样式表」里可见**
   *    —— 只定义在某一端的样式表（如 `merchant/styles/theme.css`）里，另一端会「解析不到 ⇒ 计算值
   *    回退初始值」，且**不报错、门禁也看不见**。
   * 事故（批次 12 引入、批次 16 发现）：`.modal` 的圆角 / 阴影取源力 `--radius-md` / `--shadow-3`，
   *    标题字重取 `--font-weight-medium` —— 这三个令牌当时只在 `merchant/styles/theme.css` 的 `:root`
   *    里定义，而客户端**不加载**该文件。CDP 实测客户端「注册新企业」弹窗：圆角 0px、
   *    阴影 none、标题字重 400（本应 8px / shadow-3 / 500）—— 即**方角 + 无阴影 + 标题掉字重**。
   * 取值与 `merchant/styles/theme.css` 完全一致（该文件加载更晚，商家端仍以它为准；两端同值故无冲突）。
   * 🔴 【2026-10-07 批次 20 更新】事故**根因已消除**：`.modal` 的基础几何已改回**字面量**（不再引用
   *    这三个令牌），客户端弹窗随之恢复原样。这三条定义**保留**，作为「共享层可安全引用的源力档位锚点」
   *    —— 任何共享层规则日后若引用它们，仍能正确解析（这正是批次 16 建立的不变量，守卫继续钉住）。
   * 回归判据：`test/css-token-scope-smoke.js`。 */
  --radius-md:8px;
  --shadow-3:0px 5px 15px 0px rgba(12,13,14,0.08), 0px 2px 4px 0px rgba(12,13,14,0.04);
  --font-weight-medium:500;
  font-family:"Segoe UI Variable Text","Segoe UI","Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--page);color:var(--t1);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--t1)}
a{color:var(--pri);text-decoration:none;cursor:pointer}
::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-thumb{background:#D3DAE2;border-radius:8px}
/* ---------- 布局框架（桌面优先，无固定宽度） ---------- */
.shell{display:flex;min-height:100vh}
.side{width:232px;background:var(--canvas);border-right:1px solid var(--line4);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.side .brand{display:flex;align-items:center;gap:10px;padding:16px 20px}
/* 品牌行三段：logo + 文字（可收缩）+ 折叠按钮。
 * 「· 商家端」后缀已删（2026-10-06）—— 下一行「运营后台」已经说了同一件事，
 * 且加了折叠按钮后品牌行可用宽度从 146 降到 108，原名会折成两行。 */
.side .brand .brand-tx{flex:1 1 auto;min-width:0}
.brand-logo{width:36px;height:36px;border-radius:10px;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.nav{padding:0 12px;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:8px;padding:0 12px;height:40px;border-radius:8px;color:var(--t3);font-weight:500;font-size:14px;position:relative}
.nav a:hover{background:var(--sf5)}
.nav a.on{background:var(--pri-weak);color:var(--pri-600);font-weight:700}
.nav a.on::before{content:"";position:absolute;left:0;top:12px;width:3px;height:16px;border-radius:2px;background:var(--pri)}
.nav .cnt{margin-left:auto;font-size:12px;background:var(--warn-weak);color:var(--warn-ink);border-radius:10px;padding:1px 8px;font-weight:700}
.nav .cnt.b{background:var(--pri-weak);color:var(--pri-600)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--pri-weak);color:var(--pri-600);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}
.side-user .u{font-size:12px;font-weight:700;color:var(--t1)}
.side-user .c{font-size:11px;color:var(--t4)}
/* 退出登录（2026-10-06：商家端顶栏删除后，由顶栏迁到侧栏最底部 —— 掌柜指定「放在左下角导航栏的底下」）。
 * ≤1180px 侧栏收成 64px 图标栏 → 只留 ⏻ 图标（与 .nav a span / .side-user .u 的既有隐藏口径一致）。 */
.side-out{width:100%;margin-top:10px}
@media (max-width:1080px){
  .side-out{width:30px;padding:0;margin:10px auto 0}
  .side-out .side-out-tx{display:none}
  .side-out .side-out-ic{display:inline}
}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;background:var(--canvas);border-bottom:1px solid var(--line4);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:20}
/* 左侧导航折叠（2026-09-09 建 / 2026-10-06 改：入口从顶栏迁出）：
 * `body.side-collapsed` 由 hcSide() 切换并持久化 localStorage('hc-side')，折叠后 .side 隐藏、.main 占满。
 * 入口两处 ——
 *   ① `.side-fold`：侧栏品牌行右端，>1180px 可见（64px 图标栏放不下，那档交给 ②）；
 *   ② `.side-hamb`：`.main` 内的定位按钮，**折叠态下恒常显示** —— 否则折叠后侧栏与按钮一起消失，
 *      叠加 localStorage 持久化就会把人永久锁在无导航状态（旧顶栏 hamb 只在 ≤820px 显示，正是这个隐患）；
 *      ≤820px 也显示（窄屏收起侧栏的入口），此时挪到 64px 图标栏右侧、不压住品牌。 */
body.side-collapsed .side{display:none}
@media (max-width:1080px){ .side-fold{display:none} }
@media (max-width:900px){ .side-hamb{display:inline-flex;left:74px} }
/* ===== 客户端顶部导航框架（2026-09-10 · 重构：左侧栏 → 顶部导航 + 全页面视口化）=====
 * shell 纵向 100vh：header 常驻，.main flex 撑满，.content 为各页统一滚动域（content 内滚动）；
 * 商品目录页经 hc-cat-page（文件尾媒体）把 .content 再改为不可滚双栏容器。 */
.shell.hc-c{flex-direction:column;min-height:0;height:100vh;overflow:hidden}
.shell.hc-c .main{flex:1 1 auto;min-height:0;overflow:hidden}
.shell.hc-c .content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 24px 40px 32px}
/* 顶部导航 header（沿用 .topbar 容器与软渲染同步锚） */
.shell.hc-c .c-top{gap:6px;padding:0 14px 0 8px;height:60px;z-index:40}
.c-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0;margin-right:4px;border-radius:10px;padding:3px 10px 3px 4px}
.c-brand:hover{background:var(--sf)}
.c-nav{display:flex;align-items:center;gap:2px;margin-left:8px;min-width:0}
.c-it.on{color:var(--pri-600);background:var(--pri-weak)}
.c-dd.on>.c-dd-t{color:var(--pri-600);background:var(--pri-weak)}
.c-dd .c-arr{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--t4);margin-top:2px;transition:transform .15s}
.c-dd.open .c-arr{transform:rotate(180deg)}
.c-dd.open .c-dd-p{display:block;animation:c-dd-in .14s ease}
@keyframes c-dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.c-dd-p a.on{color:var(--pri-600);font-weight:700;background:var(--pri-weak)}
.c-me{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:2px 4px}
.c-me .avatar{width:30px;height:30px;font-size:11px}
/* 移动汉堡（≤900 显示，展开 .c-nav 为下拉面板） */
.c-hamb{display:none}
@media (max-width:900px){
  .c-hamb{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;font-size:18px;border-radius:9px;color:var(--t3);background:var(--sf);border:1px solid var(--line)}
  .shell.hc-c .c-top .c-brand-t,.shell.hc-c .c-top .c-me-t{display:none}
  .c-nav{position:fixed;top:60px;left:8px;right:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(10,23,42,.16);flex-direction:column;align-items:stretch;padding:10px 8px;display:none;z-index:70;max-height:calc(100vh - 76px);overflow-y:auto}
  .c-nav.open{display:flex}
  .c-it,.c-dd-t{width:100%;justify-content:flex-start;height:42px;border-radius:9px}
  .c-dd{flex-direction:column;align-items:stretch}
  .c-dd-p{position:static;box-shadow:none;border:none;padding:0 0 4px 14px;animation:none}
  .c-dd.open .c-dd-p{display:block}
}
/* 顶栏（.topbar）的基类仍由**客户端**头部复用（`<header class="topbar c-top">`，见 .shell.hc-c 一组）：
 * 商家端 2026-10-06 已删除顶栏实例，`.search` / `.aux` 两条随之删除（它们只服务过商家端顶栏）。 */
.topbar .sp{flex:1}
/* 商家端内容区（客户端由 .shell.hc-c .content 覆盖为 30/48/28）。
 * 2026-10-06 顶栏删除后上内边距 16 → 22：原先这 16px 是紧贴 64px 顶栏的视觉余量，
 * 顶栏没了就直接顶到窗口上沿，显得局促。 */
.content{flex:1;padding:22px 24px 40px 32px;width:100%;margin:0 auto}
.crumb{font-size:12px;color:var(--t4);margin-bottom:6px}
/* 顶栏内嵌面包屑（客户端 header 一体化 · 2026-09-09）：汉堡后显示当前位置，
 * 单行省略防溢出；a 跳转保持主题色；商家端 content 内原 .crumb 不受影响 */
.crumb.tb{display:flex;align-items:center;gap:6px;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--t3);max-width:min(52vw,640px);height:32px}
.crumb.tb a{color:var(--pri);font-weight:600}
.crumb.tb a:hover{text-decoration:underline}
@media (max-width:900px){.crumb.tb{max-width:44vw}}
.page-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-title{font-size:22px;font-weight:700;color:var(--ink)}
.tag-chip{font-size:12px;border-radius:999px;padding:2px 10px;font-weight:600}
.tag-chip.blue{background:var(--pri-weak);color:var(--pri-600)}
.tag-chip.gray{background:var(--surface);color:var(--t3)}
.tag-chip.green{background:var(--ok-weak);color:var(--ok-ink)}
.page-sub{font-size:12px;color:var(--t3);margin:2px 0 0}
.page-head .acts{margin-left:auto;display:flex;gap:10px}
/* ---------- 按钮 ---------- */
.btn{height:38px;border-radius:999px;padding:0 20px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:.15s}
.btn.pri{background:var(--pri-action);color:#fff}
.btn.pri:hover{background:var(--pri-action-press)}
.btn.sec{background:var(--canvas);border:1px solid var(--t1);color:var(--t1)}
.btn.sec:hover{background:var(--sf)}
.btn.ghost{background:var(--canvas);border:1px solid var(--line2);color:var(--t1)}
.btn.ghost:hover{background:var(--sf)}
.btn.danger{background:var(--err);color:#fff}
.btn.danger-o{background:var(--canvas);border:1px solid var(--err);color:var(--err)}
.btn.link{background:none;color:var(--pri);padding:0 4px;font-weight:600;font-size:14px}
.btn.link.danger{color:var(--err)}
.btn.sm{height:30px;font-size:12px;padding:0 14px}
.btn.block{width:100%}
.btn:disabled{background:var(--line5);color:var(--t5);cursor:not-allowed}
.btn.pri.sh{box-shadow:0 8px 18px rgba(0,100,224,.26)}
.link{color:var(--pri);cursor:pointer;font-weight:600}
.link.danger{color:var(--err)}
/* 纯文字状态色（门禁禁内联 style 上色）：只改文字色、不改变布局，用于提示文案片段 */
.tx-err{color:var(--err)}
.tx-warn{color:var(--warn)}
.link.dim{color:var(--t3);font-weight:500}
/* ---------- 卡片 ---------- */
.card{background:var(--canvas);border-radius:16px;box-shadow:var(--sh1);padding:16px 20px}
.card + .card{margin-top:16px}
.card-title{font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-title .sub{font-size:12px;color:var(--t4);font-weight:400}
.rule-tip{background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:10px 16px;color:var(--t4);font-size:12px;margin:12px 0 16px;display:flex;gap:10px;align-items:center}
.rule-tip .i{width:26px;height:26px;border-radius:8px;background:var(--pri-weak);color:var(--pri);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
/* 警示变体（2026-10-01）：用于「不可逆 / 易误解」的说明（如清空手机号的后果）。排版与 .rule-tip 同，只换语义色。
 * ⚠️ 必须是**全局类**：弹窗内容渲染在 #modal-root 里、不在 .shell 作用域内，挂到页级选择器下会静默不生效。 */
.rule-tip.warn{background:var(--warn-weak);border-color:var(--warn-weak);color:var(--warn-ink)}
.rule-tip.warn .i{background:var(--warn-ink);color:var(--canvas)}
/* ---------- 徽章 / 状态 ---------- */
.badge{display:inline-flex;align-items:center;height:24px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.badge.amber{background:var(--warn-weak);color:var(--warn-ink)}
.badge.blue{background:var(--pri-weak);color:var(--pri-600)}
.badge.green{background:var(--ok-weak);color:var(--ok-ink)}
.badge.gray{background:var(--surface);color:var(--t3)}
.badge.red{background:var(--err-weak);color:var(--err-ink)}
.pill{display:inline-flex;height:26px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;align-items:center}
/* ---------- 表格 ---------- */
.tbl-wrap{background:#fff;border-radius:16px;box-shadow:var(--sh1);overflow:hidden;padding:var(--pad-card)}
.tbl-scroll{overflow-x:auto;padding:var(--pad-tight)} /* 滚动容器必然在自身边界裁切，取最小可行值见 :root 规范 */
table.tbl{width:100%;border-collapse:collapse;min-width:980px}
.tbl th{background:var(--sf2);color:var(--t4);font-size:12px;font-weight:600;text-align:left;padding:12px 16px;white-space:nowrap}
.tbl td{padding:13px 16px;font-size:14px;border-top:1px solid var(--line5);vertical-align:middle;white-space:nowrap}
.tbl tr:hover td{background:#FBFDFF}
.tbl td .g2{display:flex;gap:10px;align-items:center}
.tbl .thumb{width:40px;height:40px;border-radius:8px;background:var(--surface);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--t4);font-size:16px}
.tbl .thumb.no-img{color:var(--ph-c);font-weight:700}
.tbl .main-name{font-weight:700;color:var(--t1);font-size:14px}
.tbl .main-name a{color:var(--pri);font-weight:600;cursor:pointer}
.tbl .main-name a:hover{text-decoration:underline}
.tbl .meta{font-size:12px;color:var(--t4)}
.tbl .num{font-weight:700;color:var(--ink)}
.tbl .ops a{margin-right:12px;font-size:14px}
.tbl .ops a.danger{color:var(--err)}
.tbl-foot{display:flex;align-items:center;padding:10px 16px;font-size:12px;color:var(--t4);border-top:1px solid var(--line5);background:var(--sf2)}
.tbl-foot .pg{margin-left:auto;display:flex;gap:6px;align-items:center}
/* 「未分类」标记（客户详情「专属可见商品」页签）：与商品管理的 .mp-cat.none 同视觉，
 * 走语义类而非内联上色（门禁 danger-inline 红线：状态色不得写在 style 里）。 */
.tbl .cat-none{color:var(--warn);font-weight:500}
.pg button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);font-size:12px;color:var(--t3);background:#fff}
.pg button.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
/* ---------- 筛选工具条 / 分段 ---------- */
.toolbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 14px;margin-bottom:14px;flex-wrap:wrap}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg .it{border:1px solid var(--line);border-radius:999px;height:32px;padding:0 14px;font-size:12px;color:var(--t3);background:#fff;display:inline-flex;align-items:center;cursor:pointer}
.seg .it.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
.seg .it.warn-on.on{background:var(--warn-weak);color:var(--warn-ink);border-color:transparent;font-weight:700}
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;background:#fff;border:1px solid var(--line2);border-radius:999px;height:34px;padding:0 30px 0 14px;font-size:12px;color:var(--t2);cursor:pointer;outline:none}
.sel::after{content:"⌄";position:absolute;right:12px;top:50%;transform:translateY(-55%);color:var(--t3);pointer-events:none;font-size:12px}
.toolbar .searchbox{background:var(--surface);border-radius:999px;height:34px;display:flex;align-items:center;padding:0 14px;flex:0 0 260px;max-width:100%}
.toolbar .searchbox input{background:none;border:none;outline:none;width:100%;font-size:12px}
/* ---------- 表单 ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--t1);font-weight:600;margin-bottom:6px}
.field label .req{color:var(--err);margin-left:2px}
.field label .opt{color:var(--t4);font-weight:400}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line2);border-radius:8px;padding:9px 12px;outline:none;background:#fff}
.input:focus,textarea.input:focus{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-weak)}
.input.err{border-color:var(--err)}
.input:disabled{background:var(--surface);color:var(--t4)}
textarea.input{resize:vertical;min-height:64px}
.hint{font-size:12px;color:var(--t4);margin-top:4px}
.kv{display:flex;gap:10px;margin-bottom:10px}
.kv .k{width:96px;color:var(--t4);font-size:12px;flex-shrink:0}
.kv .v{color:var(--t1);font-size:14px;font-weight:500}
.stepper{display:inline-flex;align-items:center;gap:4px}
.stepper button{width:26px;height:28px;border:1px solid var(--line2);border-radius:6px;background:#fff;font-size:14px;color:var(--t1);line-height:1}
.stepper button:active{background:var(--surface)}
.stepper button.plus{color:var(--pri);font-weight:700}
.stepper b{width:52px;height:28px;border:1px solid var(--line);border-radius:6px;background:#F9FAFB;display:flex;align-items:center;justify-content:center;font-size:14px}
/* ---------- 状态条 ---------- */
.alert{display:flex;gap:10px;align-items:center;background:var(--warn-weak);border-radius:10px;padding:10px 14px;font-size:14px;color:#7A4A00;margin-bottom:12px}
.alert .ic{width:18px;height:18px;border-radius:50%;background:var(--warn);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.alert a{color:var(--warn-ink);font-weight:700}
.kpi .l{font-size:12px;color:var(--t3)}
.kpi .d{font-size:12px;font-weight:600}
.kpi .d.up{color:var(--ok-ink)} .kpi .d.dn{color:var(--warn-ink)}
.grid-2{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start}
.grid-2.wide{grid-template-columns:1fr 420px}
.prod-img{width:350px;height:350px;border-radius:12px;background:linear-gradient(135deg,#E9EEF4,#F4F7FA);display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--ph-c);flex-shrink:0}
.prod-info{flex:1}
.price-line .p{font-size:22px;color:var(--pri-600);font-weight:700}
.price-line .n{font-size:12px;color:var(--t4)}
.kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 24px;margin:10px 0}
.kv-grid .row .k{font-size:12px;color:var(--t4)}
.kv-grid .row .v{font-size:14px;font-weight:600;color:var(--t1)}
.detail-tabs button.on{color:var(--pri);border-bottom-color:var(--pri)}
.spec-grid .s .k{font-size:12px;color:var(--t4)} .spec-grid .s .v{font-size:14px;font-weight:600}
.reco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}
.reco-card{border:1px solid var(--line3);border-radius:12px;padding:10px;background:var(--sf2);cursor:pointer;transition:.15s}
.reco-card:hover{box-shadow:var(--sh2)}
.reco-card .row1{display:flex;gap:10px;align-items:center}
.reco-card .thumb2{width:52px;height:52px;border-radius:8px;background:var(--surface);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--ph-c)}
.reco-card .nm{font-size:12px;font-weight:600;color:var(--t1);line-height:1.35}
.reco-card .price{font-size:14px;color:var(--pri-600);font-weight:700;margin-top:4px}
.reco-card .add{font-size:12px;color:var(--pri);font-weight:700}
.acc-row .an{font-weight:600;font-size:14px} .acc-row .ad{font-size:12px;color:var(--t4)} .acc-row .desc{font-size:12px;color:var(--t3);flex:1;min-width:180px}
.submit-card .amount{font-size:20px;color:var(--pri-600);font-weight:700}
.dot-list{list-style:none}
.dot-list li{position:relative;padding-left:14px;margin-bottom:8px;font-size:12px;color:var(--t3)}
.dot-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--pri)}
/* ---------- 时间轴 ---------- */
.tl{list-style:none}
.tl li{display:flex;gap:10px;padding:6px 0;align-items:flex-start}
.tl .dot{width:9px;height:9px;border-radius:50%;background:var(--t5);margin-top:5px;flex-shrink:0}
.tl .dot.blue{background:var(--pri)}
.tl b{font-size:12px;color:var(--t1)} .tl span{display:block;font-size:11px;color:var(--t4)}
/* ---------- 弹层 / Toast ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(10,19,23,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
/* 🔴🔴 【2026-10-07 批次 20 · 跨端越界修复】以下 `.modal` 基础几何**必须保持字面量**，不得引用令牌。
 *   原因：`.modal` 是**两端共用**的共享层类 —— 客户端弹窗是 `.modal.hc-modal`（`shared/core.js` 的
 *   `modal()` 生成），商家端弹窗是 `.modal.mp-modal`。批 12 曾把这里的几何改成源力的
 *   `var(--radius-md)` / `var(--shadow-3)` / `--font-weight-medium`，等于**从共享层改了客户端**：
 *   CDP 实测客户端弹窗 圆角 16→8px、宽弹窗 760→640px、标题字重 700→500、三段内距全变。
 *   现已恢复改造前（`public/styles.css` 时代）的原值；**商家端的源力几何改由 `.mp-modal` 专属层承担**
 *   （`merchant/styles/pages.css §七` + `merchant.css`），这才是「改商家端不影响客户端」的正确落点。
 *   值一律写字面量（不引用令牌）⇒ 两端自然共享安全，不依赖任何一端的样式表。 */
.modal{background:#fff;border-radius:16px;width:480px;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,.18);animation:pop .18s ease}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
.modal .mh{font-size:16px;font-weight:700;color:var(--ink);padding:20px 24px 6px}
.modal .mb{padding:6px 24px;font-size:14px;color:var(--t3);line-height:1.7}
.modal .mf{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 20px}
#toast-root{position:fixed;top:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-size:14px;box-shadow:0 8px 20px rgba(0,0,0,.2);display:flex;gap:8px;align-items:center;animation:slidein .2s ease}
.toast.ok .ic{background:var(--ok);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}
@keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
.toast.err .ic{background:var(--err)}
.icon{width:14px;height:14px;border-radius:50%;border:1.6px solid var(--t4);display:inline-block;vertical-align:-2px}
.login .lp{width:44%;min-width:520px;background:var(--ink);color:#fff;padding:56px 48px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.login .lp .big{font-size:32px;font-weight:700;line-height:1.35;margin-top:120px}
.login .lp .txt{color:#9AA6B2;font-size:14px;margin-top:18px;max-width:480px;line-height:1.8}
.login .lp ul{list-style:none;margin-top:38px;max-width:520px}
.login .lp ul li{display:flex;gap:14px;margin-bottom:22px;color:#C9D2DB;font-size:14px;align-items:flex-start}
.login .lp ul .d{width:10px;height:10px;border-radius:50%;background:var(--pri);margin-top:6px;flex-shrink:0}
.login .rp{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px;max-width:720px;margin:0 auto;width:100%}
.login .switch-end button.on{background:#fff;color:var(--ink);box-shadow:var(--sh1)}
.welcome-note{background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:12px;color:var(--t3);margin-top:18px;line-height:1.8}
.welcome-note b{color:var(--t1)}
.sim-card{position:relative;background:#fff;border:1px solid var(--line3);border-radius:14px;overflow:hidden;cursor:pointer;transition:box-shadow .18s,transform .18s,border-color .18s;display:flex;flex-direction:column}
.sim-card:hover{box-shadow:var(--sh2);border-color:var(--pri-100)}
.sim-img{height:108px;background:linear-gradient(135deg,#EDF1F5,#F8FAFC);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:var(--ph-c);position:relative;flex-shrink:0}
.sim-img .go{position:absolute;right:10px;top:10px;font-size:11px;color:var(--t2);background:rgba(255,255,255,.92);border-radius:999px;padding:2px 9px;font-weight:600;opacity:0;transition:opacity .15s}
.sim-card:hover .sim-img .go{opacity:1}
.sim-body{margin:0 var(--pad-card) var(--pad-card);padding:10px 4px 4px;display:flex;flex-direction:column;gap:5px;flex:1}
.sim-name{font-size:14px;font-weight:600;color:var(--t1);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sim-code{font-size:11px;color:var(--t4)}
.sim-note{font-size:12px;line-height:1.6;color:var(--t3);background:var(--sf);border-left:2px solid var(--pri-100);border-radius:6px;padding:5px 9px;margin-top:2px}
.sim-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.sim-price{font-size:15px;font-weight:700;color:var(--pri-600)}
.sim-price small{font-size:12px;font-weight:400;color:var(--t4)}
/* ---------- 商品图片（上传真实图 / 占位兜底） ---------- */
.thumb,.prod-thumb{width:40px;height:40px;border-radius:8px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--t4);font-size:15px}
.thumb.real,.prod-thumb.real{object-fit:cover;padding:0;background:var(--sf)}
.prod-img{position:relative;overflow:hidden}
.prod-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px}
/* 点击查看 800×800 大图 */
.prod-img.zoom{cursor:zoom-in}
.prod-img.zoom:hover{box-shadow:0 4px 16px rgba(15,23,42,.14)}
.prod-img.zoom:hover .zoom-hint{opacity:1}
.img-zoom{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.72);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;cursor:zoom-out}
.img-zoom.show{display:flex}
.img-zoom-box{position:relative;width:800px;max-width:92vw;height:800px;max-height:86vh;background:#fff;border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;overflow:hidden}
.img-zoom-box img{max-width:100%;max-height:100%;object-fit:contain}
.img-zoom-close{position:absolute;top:-38px;right:0;color:#fff;font-size:14px;cursor:pointer;user-select:none}
.img-zoom-size{position:absolute;bottom:-26px;left:0;color:rgba(255,255,255,.72);font-size:12px}
.sim-img{position:relative;overflow:hidden}
.sim-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* ---------- v2 追加组件 ---------- */
.tbl .prod-thumb{width:44px;height:44px;border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--t4);font-size:15px;font-weight:600;flex-shrink:0}
/* 【批次 20】`.modal.wide` 恢复改造前 760px；商家端宽弹窗由 `pages.css` 的 `.mp-modal.wide{width:640px}` 承担 */
.modal.wide{width:760px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.scroll{max-height:260px;overflow:auto}
.qtile .badge{position:absolute;top:12px;right:12px}
.feed-row .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.feed-row .dot.blue{background:var(--pri)} .feed-row .dot.green{background:var(--ok)}
.feed-row .dot.red{background:var(--err)} .feed-row .dot.amber{background:var(--warn)}
.feed-row .dot.gray{background:var(--t5)}
.badge.outline{background:#fff;border:1px solid var(--line2);color:var(--t3)}
input.ck, .tbl input[type=checkbox]{width:16px;height:16px;accent-color:var(--pri);cursor:pointer}
.stepper b input{width:36px;text-align:center;border:none;background:none;font-size:14px;font-weight:700;color:var(--t1);outline:none}
.sel select:disabled{background:var(--sf);color:var(--t5);cursor:not-allowed}
.toolbar .searchbox{margin-left:0}
@media (max-width:1080px){ .quick{grid-template-columns:repeat(2,1fr)} .fg{grid-template-columns:1fr} }
/* ---------- 响应式（窄屏折叠，无固定宽度） ---------- */
@media (max-width:1080px){
  .grid-2,.grid-2.wide,.cart-layout{grid-template-columns:1fr}
  .side{width:64px}
  .side .brand-name,.side .brand-sub,.nav-cap,.nav a span,.nav .cnt,.side-foot .help-card,.side-user .u,.side-user .c{display:none}
  .nav a{justify-content:center;padding:0}
  .side-user{justify-content:center;padding:6px}
}
@media (max-width:900px){
  .main{margin-left:0}
  body.side-collapsed .side{display:none}
  .login .lp{display:none}
  .login .rp{padding:24px}
  .prod-main{flex-direction:column}
  .prod-img{width:min(350px,100%);height:min(350px,88vw)}
  .spec-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .content{padding:12px 10px 32px}
  .btn{height:44px}
}
/* ---------- 右侧滑出面板（商品关联：相似推荐 / 配件适配） ---------- */
@keyframes drwFade{from{opacity:0}to{opacity:1}}
@keyframes drwIn{from{transform:translateX(48px);opacity:.35}to{transform:none;opacity:1}}
.drw-tabs button.on{color:var(--pri);border-bottom-color:var(--pri)}
/* 商品管理表格行内小按钮 */
.op-btn{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid var(--line2);border-radius:6px;font-size:12px;color:var(--t2);background:#fff;cursor:pointer;white-space:nowrap}
.op-btn:hover{border-color:var(--pri);color:var(--pri)}
/* ---------- 分类管理（两级） ---------- */
.cat-it{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.cat-it:hover{border-color:var(--pri-100)}
.cat-it.on{border-color:var(--pri);background:var(--pri-weak)}
.cat-it .ci-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-it .ci-badge{font-size:12px;color:var(--t4);background:var(--sf);border-radius:999px;padding:1px 8px;flex-shrink:0}
.cat-it.on .ci-badge{background:#fff}
.cat-it .ci-ops{margin-left:auto;display:inline-flex;gap:8px;align-items:center;flex-shrink:0}
/* 参数键值行：模板编辑器（5列）/ 商品参数行（3列）通用移除 */
.kv-row.tpl{grid-template-columns:minmax(130px,180px) 84px minmax(110px,150px) minmax(170px,1fr) 44px}
.kv-row.tpl .opts:disabled{opacity:.5;background:var(--surface);color:var(--t4)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:5px 11px;font-size:12px;line-height:1;cursor:pointer;background:#fff;user-select:none;transition:border-color .15s,background .15s}
.chip input{width:14px;height:14px;accent-color:var(--pri);margin:0;cursor:pointer}
.chip:has(input:checked){border-color:var(--pri);background:var(--pri-weak);color:var(--pri);font-weight:600}
.opt-ed.off{background:var(--surface);opacity:.55}
.mq-rt .searchbox{margin-left:0}
.mq-flts .it{border:1px solid var(--line);border-radius:999px;height:32px;padding:0 14px;font-size:12px;color:var(--t3);background:#fff;display:inline-flex;align-items:center;cursor:pointer;white-space:nowrap}
.mq-flts .it.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
.flt{position:relative;display:inline-flex;align-items:center;gap:6px}
.flt-time .dt{width:134px;max-width:100%;height:32px;font-size:12px;border-radius:8px;padding:0 8px}
.flt-sep{color:var(--t4);font-size:12px}
.flt-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--t4);background:var(--sf);cursor:pointer;font-style:normal}
.flt-x:hover{color:#fff;background:var(--err)}
.flt-tx{font-size:12px;color:var(--t4);cursor:pointer;white-space:nowrap;font-weight:600}
.flt-tx:hover{color:var(--err)}
.mcal-wrap.open .mcal-trig{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-weak)}
.mcal-val.ph{color:var(--t4)}
.mcal-wrap.open .mcal-caret{transform:rotate(-135deg);margin-top:3px}
.mc-day.sel .mc-ink,.mc-day.first-sel .mc-ink,.mc-day.last-sel .mc-ink{background:var(--pri-action);color:#fff;font-weight:700}
.mc-day.sel:hover .mc-ink,.mc-day.first-sel:hover .mc-ink,.mc-day.last-sel:hover .mc-ink{background:var(--pri-action-press)}
@media (max-width:900px){
  .mcal-pop{left:auto;right:0}
  .mcal-panel{width:198px}
  .mc-day,.mc-ink,.mc-day .mc-ink{height:28px}
}
/* ============================================================
 * 全局 UX 增强层（尼尔森可用性 / 拉姆斯好设计 / 八大 UX 定律）
 * —— 仅增强交互与可达性，不改任何视觉布局与业务逻辑
 * ============================================================ */
/* 键盘焦点可见性（菲茨/可达性）：仅键盘导航时显示清晰焦点环 */
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.seg .it:focus-visible,.op-btn:focus-visible,.nav a:focus-visible,
.tbl .ops a:focus-visible,.detail-tabs button:focus-visible,.drw-tabs button:focus-visible,
.mcal-arrow:focus-visible,.mc-day .mc-ink:focus-visible{outline-offset:2px}
/* 按压反馈（反馈机制）：点击有即时下沉感，不引起布局位移 */
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:active:not(:disabled){box-shadow:none}
.seg .it:active,.op-btn:active,.pg button:active{transform:translateY(1px)}
/* 尊重系统"减少动态效果"偏好（拉姆斯 · 简洁克制的设计） */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* 全局 Loading 遮罩（多尔蒂阈值 <400ms 反馈） */
.hc-loading{position:fixed;inset:0;z-index:300;background:rgba(247,249,251,.72);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;animation:pop .16s ease}
.hc-loading .hc-spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--pri-100);
  border-top-color:var(--pri);animation:hcRot .7s linear infinite}
.hc-loading .hc-t{font-size:14px;color:var(--t2);font-weight:600}
@keyframes hcRot{to{transform:rotate(360deg)}}
/* 行内按钮忙碌态（点击后防重复提交） */
.btn.busy{pointer-events:none;opacity:.68;position:relative}
.btn.busy::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.12)}
/* 首屏骨架加载（雅各布 · 通用等待认知） */
#boot{position:fixed;inset:0;z-index:400;background:var(--page);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#boot .hc-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--pri-100);border-top-color:var(--pri);animation:hcRot .7s linear infinite}
#boot .hc-t{font-size:14px;color:var(--t3);letter-spacing:.4px}
#boot .hc-brand{font-size:15px;font-weight:700;color:var(--ink)}
/* 表单即时校验成功/错误状态的清晰反馈（反馈机制） */
.input:focus.err{box-shadow:0 0 0 2px var(--err-weak)}
/* 仅读屏可用的文本（无障碍，不可见但可朗读） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 弹层打开时锁定背景滚动（防止背景内容漂移，雅各布 · 通用弹层行为） */
body.hc-no-scroll{overflow:hidden}
/* 表格行链接扩大可点热区（菲茨定律）：文字下方仍 1px 分隔线不误触 */
.tbl .ops a{display:inline-flex;align-items:center;min-height:26px;padding:0 2px}
/* 空结果提示统一版式（反馈 + 雅各布） */
.tbl .empty-hint{text-align:center;padding:46px 16px;color:var(--t4);font-size:14px}
/* 上传/导入拖放热区悬停反馈 */
.dropzone{transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--pri)!important;background:var(--pri-weak)!important}
/* 卡片可点击区整卡 hover 提示（菲茨 · 扩大目标） */
a.card-link{display:block;color:inherit;border-radius:14px}
.mc-opt.on{background:var(--pri-weak);color:var(--pri-600);font-weight:600}
@media (max-width:900px){
  .cust-pop{left:auto;right:0;width:236px}
}
/* ============================================================
 * 统一分页组件（全站列表 · 2026-09-09 高频交互放大版）
 * ============================================================ */
.pg-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;
  border-top:1px solid var(--line5);background:var(--sf2);font-size:14px;color:var(--t2)}
.pg-pages{display:flex;align-items:center;gap:6px}
.pg-n{min-width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:#fff;
  color:var(--t2);font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;cursor:pointer;transition:all .14s;box-shadow:0 1px 0 rgba(10,19,23,.03)}
.pg-n:hover:not(:disabled){border-color:var(--pri);color:var(--pri)}
.pg-n.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
.pg-n:disabled{opacity:.38;cursor:not-allowed}
.pg-ell{color:var(--t4);padding:0 3px;font-size:14px}
.pg-info b{color:var(--t1);font-variant-numeric:tabular-nums;font-weight:700}
.pg-size{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--t3);white-space:nowrap}
.pg-size select{border:1px solid var(--line2);border-radius:9px;height:34px;padding:0 8px;font-size:14px;color:var(--t2);background:#fff;cursor:pointer;outline:none}
.pg-jump{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pg-inp{width:62px;height:34px;border:1px solid var(--line2);border-radius:9px;text-align:center;font-size:14px;padding:0 4px}
/* 置于 tbl-foot 下方时去掉重复分隔 */
.tbl-foot + .pg-bar{border-top:none}
@media (max-width:900px){
  .pg-size{margin-left:0}
  .pg-bar{gap:8px}
  .pg-n{min-width:34px;height:34px}
}
/* ============================================================
 * 商品多规格（商家编辑 / 客户端选择 / 各处标签回显）
 * ============================================================ */
.sp-sw{user-select:none}
.sp-ed .input{padding:5px 7px;font-size:12px;border-radius:7px}
.sp-ed .ops a{margin:0 2px}
.sp-tag-row{margin-top:3px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.sp-tag{display:inline-flex;align-items:center;padding:1px 7px;border-radius:9px;font-size:12px;color:var(--pri-600);
  background:var(--pri-weak,#EAF1FF);font-weight:600;white-space:nowrap}
.sp-tag.red{color:#DC2626;background:#FEE2E2}
/* 订货编码标签（订单明细 SKU 订货编码 tag） */
.sp-tag.oc{color:#B45309;background:#FEF3C7;font-weight:600}
.sp-pick-wrap{margin:10px 0 2px}
/* 【2026-10-14】列表**自身**给高度上限：`.modal` 没有 `max-height`、`.mb` 也不滚动，
 *   规格一多（实测 36 条）会把弹窗底部按钮一起顶出视口、**点不到**。46vh 与部门列表
 *   （`.dp-pick-list`）同一档位。`padding` 是为 hover/选中态的 box-shadow 留出不被裁的边。
 *   ⚠️ 本类现仍由「换规格」弹窗（`spPickModal`）使用；**加购弹窗已改走 `.pk-*`**（见 client pages.css）。
 *   「换规格」是**替换某一行**的规格 ⇒ 单选语义正确，故保留本列表、只补高度上限。 */
.sp-pick-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;padding:2px 4px 6px 2px}
.sp-pick-list .sp-opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line2);border-radius:12px;
  padding:9px 12px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s,box-shadow .15s}
.sp-pick-list .sp-opt:hover{border-color:var(--pri);box-shadow:0 2px 8px rgba(91,140,255,.12)}
.sp-pick-list .sp-opt.on{border-color:var(--pri);background:var(--pri-weak,#F0F5FF);box-shadow:0 2px 10px rgba(91,140,255,.18)}
/* 多维规格矩阵（2026-10-11，颜色×尺码这类）：每维一行 = 维度名 + 选项胶囊；维度数 <2 时不渲染 */
.sp-matrix .spm-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.sp-matrix .spm-name{flex:0 0 56px;font-size:12px;color:var(--t4);line-height:30px}
.sp-matrix .spm-opts{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.sp-matrix .spm-opt{display:inline-flex;align-items:center;padding:5px 12px;border:1px solid var(--line2);border-radius:999px;cursor:pointer;font-size:13px;background:var(--canvas);transition:border-color .15s,background .15s}
.sp-matrix .spm-opt input{display:none}
.sp-matrix .spm-opt:hover{border-color:var(--pri)}
.sp-matrix .spm-opt.on{border-color:var(--pri);background:var(--pri-weak,#F0F5FF);color:var(--pri);font-weight:600}
/* 2026-10-07 删去行尾「✓」勾选标记（spRadioHtml）：选中态已由边框 + 底色 + radio 圆点表达。 */
/* ============================================================
 * 详情页大号数量步进（与主按钮 38px 等高）+ 隐藏原生数字微调箭头
 * ============================================================ */
.stepper.lg button{width:38px;height:38px;border-radius:999px;font-size:17px}
.stepper.lg b{height:38px;border-radius:999px;background:#fff;min-width:56px}
.stepper.lg input[type=number]{height:100%;border:none;background:transparent;outline:none;font-size:14px}
/* 已有外置 −/+ 按钮的步进器，隐藏 number 输入框自带的上下箭头 */
.stepper input[type=number]::-webkit-inner-spin-button,
.stepper input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* 草稿数量输入框（购物车行内直接填写数量） */
.stepper .qty-inp{width:100%;height:100%;border:none;background:transparent;text-align:center;font-size:14px;
  font-weight:700;color:var(--t1);outline:none;-moz-appearance:textfield;appearance:textfield}
.stepper .qty-inp::-webkit-inner-spin-button,.stepper .qty-inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper b:hover{border-color:var(--pri);background:#fff}
.stepper b:focus-within{border-color:var(--pri);background:#fff;box-shadow:0 0 0 2px rgba(91,140,255,.18)}
.drw-prod .pform-sec .card-title{margin-bottom:4px}
.drw-prod .fg{margin-top:10px}
@media (max-width:900px){ .drw.drw-prod{width:96vw} .drw-prod .fg{grid-template-columns:1fr} }
.sp-ed-head .card-title{display:flex;flex-direction:column;gap:2px}
.sp-row.off{opacity:.55;background:#FAFBFC}
.sp-row.off:hover{opacity:.8}
.sc-k{font-size:11px;color:var(--t4);font-weight:600;letter-spacing:.3px}
.sc-k em{color:var(--t5);font-style:normal;font-weight:500;margin-left:4px}
.sc-k em.req-t{color:#DC2626}
.sc-name .input.i-v{font-weight:700}
/* 启用 switch */
.sp-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;flex-shrink:0;padding:2px 0}
.sp-toggle input{display:none}
.sp-toggle .tg{position:relative;width:34px;height:19px;border-radius:999px;background:var(--line2);transition:.18s;flex-shrink:0}
.sp-toggle .tg::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.18s}
.sp-toggle input:checked + .tg{background:var(--ok)}
.sp-toggle input:checked + .tg::after{left:17px}
.sp-toggle i{font-style:normal;font-size:12px;color:var(--t4);font-weight:600}
.sp-toggle input:checked ~ i{color:var(--ok-ink)}
.sc-op.danger:hover{border-color:var(--err);color:var(--err);background:#FEF2F2}
.sfx .pre{width:26px;display:flex;align-items:center;justify-content:center;background:var(--sf);color:var(--t4);font-size:12px;font-weight:700;flex-shrink:0;border-right:1px solid var(--line2);border-radius:7px 0 0 7px}
.sfx .input{border:none;border-radius:0;box-shadow:none;background:transparent;font-size:14px;padding-top:10px;padding-bottom:10px}
@media (max-width:900px){ .sc-fields{grid-template-columns:repeat(2,1fr)} }
.cat-img .thumb{width:80px;height:80px;border-radius:10px;object-fit:cover;display:block;background:var(--sf,#F1F5F9);cursor:zoom-in;border:1px solid var(--line3);flex-shrink:0;overflow:hidden}
.cat-img .thumb.no-img{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#EAF1FC,#F5F8FE);color:var(--ph-c);font-weight:700;font-size:20px;cursor:default}
/* 大图行适配：行高由 80px 缩略图自然撑起，名称两行截断可换行 */
.cat-name{min-width:220px}
.cat-name .nm{font-weight:600;color:var(--t1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;white-space:normal}
.cat-name .nm:hover{color:var(--pri-600);text-decoration:underline}
.cat-code{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--pri-600);background:var(--pri-weak,#EAF1FF);padding:2px 7px;border-radius:7px;font-weight:600;white-space:nowrap}
.cat-cat .c1{font-weight:500;white-space:nowrap}
.cat-cat .c2{color:var(--t4);font-size:12px;white-space:nowrap}
.cat-brand{color:var(--t3)}
.cat-tbl .num{font-variant-numeric:tabular-nums}
/* hover 放大浮层 */
.hv-pop{position:fixed;z-index:9999;pointer-events:none;background:#fff;border-radius:12px;box-shadow:0 12px 36px rgba(15,23,42,.24);padding:6px;max-width:290px}
.hv-pop img{display:block;max-width:278px;max-height:278px;object-fit:contain;border-radius:8px}
.cat-tbl .cat-name .nm{font-size:15px}
.cat-tbl .cat-cat .c1{font-size:14px}
.cat-tbl .cat-cat .c2{font-size:14px}
.cat-tbl .cat-brand{font-size:14px}
.cat-tbl .num{font-size:14px}
.cat-tbl .badge{height:26px;padding:0 12px;font-size:12px}
.cat-tbl .btn.sm{height:32px;font-size:14px;padding:0 16px}
/* 目录行加购按钮「已在购物车 N」态：同一按钮描边高亮（京东/淘宝式，点击继续累加） */
.cat-tbl .btn.sm.incart{background:#fff;border:1.5px solid var(--pri);color:var(--pri-600);font-weight:700;box-shadow:none}
.cat-tbl .btn.sm.incart:hover{background:var(--pri-weak);border-color:var(--pri)}
.cat-tbl .tbl-foot{font-size:12px}
/* ===== 客户端购物车明细：60×60 图（不裁切不变形）/ 规格列 / 紧凑行高 ===== */
.cart-tbl td{vertical-align:middle;padding:8px 14px}
.cart-tbl th{font-size:12px;padding-top:10px;padding-bottom:10px}
.cart-tbl td{font-size:14px}
.cart-tbl td.cart-img .thumb{object-fit:contain;padding:2px;background:#fff;width:60px;height:60px;border-radius:8px} /* 完整展示不裁切 */
.cart-tbl .cart-seq{color:var(--t4);font-size:14px;text-align:center;font-variant-numeric:tabular-nums}
.cart-tbl .cart-name{min-width:280px;max-width:560px}
/* 名称单行显示：列宽弹性吃满表格剩余空间；超长省略号兜底（不换行） */
.cart-tbl .cart-name .nm{font-weight:600;color:var(--t1);font-size:15px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
.cart-tbl .cart-name .nm:hover{color:var(--pri-600);text-decoration:underline}
.cart-tbl .cart-name .meta{font-size:12px;color:var(--warn-ink)}
.cart-tbl .cart-spec .sp-tag-row{margin-top:0;gap:5px}
.cart-tbl .sp-tag{font-size:12px;padding:2px 8px}
.cart-tbl .cart-spec .sp-tag.oc{font-size:12px}
.cart-tbl .ops a{font-size:12px}
.cart-def{display:inline-flex;align-items:center;padding:2px 10px;border-radius:9px;font-size:14px;color:var(--t4);background:#F1F5F9;border:1px dashed var(--line3);white-space:nowrap}
.cart-def.warn{color:#B45309;background:#FEF3C7;border-color:#F3D9A4}
/* hover 原图预览支持 800×800（目录/草稿共用浮层放大） */
.hv-pop{max-width:824px;min-width:120px}
.hv-pop img{max-width:800px;max-height:800px;width:auto;height:auto}
/* 草稿页数量录入框调大 */
.cart-tbl .stepper button{width:30px;height:34px;border-radius:7px;font-size:16px}
.cart-tbl .stepper b{width:66px;height:34px;border-radius:7px;font-size:14px}
.cart-tbl .stepper .qty-inp{font-size:15px;font-weight:700}
/* 草稿合计行信息层级：金额主显 · 分项元信息 · 提示 · 操作 */
.cart-foot{gap:12px;flex-wrap:wrap;padding:12px 16px}
.cart-foot .cf-lb{font-size:12px;color:var(--t3);font-weight:600}
.cart-foot .cf-amt{font-size:21px;font-weight:800;color:var(--pri-600);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.2px}
.cart-foot .cf-cnt{font-size:12px;color:var(--t3);white-space:nowrap}
.cart-foot .cf-cnt b{color:var(--t1)}
.cart-foot .cf-pre{font-size:12px;color:#B45309;background:#FEF3C7;padding:2px 9px;border-radius:999px;font-weight:600;white-space:nowrap}
.cart-foot .cf-note{font-size:12px;color:var(--t5);white-space:nowrap}
.cart-foot .pg a{font-size:12px}
/* 对调后：清空置左，合计信息组贴右 */
.cart-foot .pg{margin-left:0;margin-right:auto}
.cart-foot .cf-lb{margin-left:auto}
.btn-back .arr{font-size:15px;line-height:1}
.page-head .btn-back{margin-right:2px}
/* 订单详情条目明细：80 图完整展示 + 高亮总计行 */
.ov-tbl td.cat-img .thumb{object-fit:contain;padding:2px;background:#fff;width:60px;height:60px}
.ov-tbl .cart-name{min-width:150px}
/* ===== 元素定位器（点选协作工具） ===== */
#hc-picker-btn{position:fixed;right:18px;bottom:18px;z-index:99998;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 10px;border:none;border-radius:999px;background:#1F6FFF;color:#fff;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(31,111,255,.35)}
#hc-picker-btn i{font-style:normal;font-size:16px;line-height:1}
#hc-picker-btn:hover{background:#1457D6}
#hc-picker-btn.on{background:#E5484D}
#hc-picker-tip{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:99999;display:none;padding:8px 16px;border-radius:999px;background:#1A2233;color:#fff;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#hc-picker-tip.on{display:block}
html.hc-picking, html.hc-picking *{cursor:crosshair !important}
.hc-hl{outline:2px dashed #FF6B35 !important;outline-offset:1px}
#hc-picker-ui{position:fixed;right:18px;bottom:64px;z-index:99999;width:330px;max-height:60vh;display:none;flex-direction:column;background:#fff;border:1px solid #DDE4EE;border-radius:14px;box-shadow:0 16px 48px rgba(15,23,42,.25);font-size:12px}
#hc-picker-ui.open{display:flex}
#hc-picker-ui .hp-title{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#F4F7FB;font-weight:700;color:#1A2233;border-radius:13px 13px 0 0}
#hc-picker-ui .hp-close{color:#E5484D;font-weight:600;text-decoration:none}
#hc-picker-ui .hp-body{margin:0;padding:12px 14px;overflow:auto;background:#FBFCFE;color:#334;line-height:1.75;white-space:pre-wrap;word-break:break-all;font-family:ui-monospace,Consolas,monospace;font-size:12px}
#hc-picker-ui .hp-ft{display:flex;gap:8px;padding:10px 14px;border-top:1px solid #ECF0F6;border-radius:0 0 13px 13px}
#hc-picker-ui .hp-copy{flex:1;height:32px;border:none;border-radius:8px;background:#1F6FFF;color:#fff;font-weight:700;cursor:pointer}
#hc-picker-ui .hp-again{height:32px;padding:0 12px;border:1px solid #CBD5E1;border-radius:8px;background:#fff;color:#334;cursor:pointer}
.cat-tbl td.cat-img .thumb{width:60px;height:60px;border-radius:8px}
.rp .card{padding:22px}
.rp .field{margin-bottom:12px}
/* ===== 客户端顶部业务页签条（卡片式横滚 · 2026-09-09）：
 * 单行卡片 + 左右箭头横向滚动（触控/滚轮原生可滚）；单卡片内部 = 左图标(40) + 右两行
 * （加粗主标题 / 浅灰小字备注）；选中态主题色边框 + 淡底色高亮，hover 柔和。
 * 内置【全部】固定末位，使用内置占位图标 + 系统备注，商家端不可自定义。
 * 占位图标 navIcHtml('') 输出内联 svg，颜色随 currentColor（继承 .nt-card-ic）===== */
.nt-bar{margin:8px 0 6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px;display:flex;align-items:center;gap:2px}
.nt-row{display:flex;gap:8px;overflow-x:auto;padding:2px;flex:1;min-width:0;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.nt-row::-webkit-scrollbar{height:6px}
.nt-row::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px}
.nt-row::-webkit-scrollbar-track{background:transparent}
.nt-card{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:7px 13px 7px 7px;border:1.5px solid var(--line3);border-radius:12px;background:var(--canvas);cursor:pointer;user-select:none;text-align:left;transition:all .15s ease;min-width:0;max-width:230px}
.nt-card:hover{border-color:var(--pri-100);background:var(--sf);box-shadow:0 3px 10px rgba(15,23,42,.05)}
.nt-card.on{border-color:var(--pri);background:var(--pri-weak);box-shadow:inset 0 0 0 1px var(--pri)}
.nt-card.on:hover{transform:none;box-shadow:inset 0 0 0 1px var(--pri)}
.nt-card-ic{flex:0 0 40px;width:40px;height:40px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sf);color:var(--pri-600);border:1px solid var(--line4);flex-shrink:0}
.nt-card.on .nt-card-ic{background:#fff;border-color:var(--pri-100)}
.nt-cat-chip.on{border-color:var(--pri);background:var(--pri-weak);color:var(--pri-600);font-weight:600}
.nt-card-ic img{width:100%;height:100%;object-fit:cover;display:block}
.nt-card-ic svg{width:22px;height:22px;stroke-width:1.6}
.nt-card-tx{display:flex;flex-direction:column;min-width:0;justify-content:center}
.nt-card-t{display:block;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;line-height:1.3}
.nt-card.on .nt-card-t{color:var(--pri-600)}
.nt-card-n{display:block;font-size:12px;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;line-height:1.4;margin-top:1px}
@media (max-width:560px){
  .nt-bar{gap:0}
  .nt-card{max-width:190px;padding:6px 10px 6px 6px}
  .nt-card-ic{flex-basis:34px;width:34px;height:34px}
  .nt-card-t,.nt-card-n{max-width:112px}
}
/* ===== 商家端页签图标预览（配置表格行小图 / 弹窗大图 .lg，同占位 svg 逻辑） ===== */
.nt-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;overflow:hidden;background:var(--sf);border:1px solid var(--line4);color:var(--pri-600);flex-shrink:0}
.nt-ic.lg{width:46px;height:46px;border-radius:11px;background:var(--sf)}
.nt-ic.lg svg{width:24px;height:24px}
.nt-ic.lg img{width:100%;height:100%;object-fit:cover}
@media (max-width:1080px){
  .cat-flex{flex-direction:column}
  .cat-tree{width:100%;flex-basis:auto;height:auto;max-height:none;position:static}
  }
.ssel-pop{position:fixed;z-index:1200;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(10,19,23,.16);padding:8px;max-height:320px;display:block}
.ssel-pop .ssel-q{margin-bottom:8px}
.ssel-q{width:100%;box-sizing:border-box;border:1px solid var(--line2);border-radius:8px;padding:7px 10px;font-size:12px;outline:none;background:#fff;display:block}
.ssel-q:focus{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-weak)}
.ssel-opts{display:block;overflow-y:auto;max-height:244px;padding:0}
.ssel-opt{display:flex;align-items:center;box-sizing:border-box;width:100%;min-height:34px;margin:0;padding:5px 10px;border:none;background:transparent;font-size:14px;line-height:1.5;color:var(--t1);text-align:left;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
.ssel-opt + .ssel-opt{margin-top:1px}
.ssel-opt:hover{background:var(--surface)}
.ssel-opt.on{background:var(--pri-weak);color:var(--pri-600);font-weight:700}
.sps-row .input{height:34px;padding:6px 9px;font-size:12px;border-radius:7px}
.sps-row select.input{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;background-size:4px 4px;background-repeat:no-repeat;padding-right:22px}
/* ===== 商品富文本详情 · 编辑器（商家端表单）+ 客户端查看样式 =====
 *  - 工具栏：胶囊按钮行 · 与现有主色（pri）一致 · 选中态/悬停态反馈
 *  - 编辑区：与 .input 同圆角与边框，contenteditable=true，HTML 即可；空时显示 placeholder（:empty::before）
 *  - 查看区：.rt-content 包装客户端渲染的 HTML（h2/h3/p/ul/ol/hr/a 等），与详情卡片视觉协调 */
/* 客户端查看样式（与编辑器内部元素一致，仅去掉 placeholder 与焦点样式） */
/* 2026-10-13 断行加固：`word-break:break-word` 是**弃用值**（保留以兼容旧内核），
 * 标准做法是 `overflow-wrap:anywhere` —— 能从任意位置断（含长 URL / 长单词），
 * 且**可继承**给所有子元素，故后续子规则不必逐条重复。 */
.rt-content{font-size:14px;line-height:1.85;color:var(--t1);word-break:break-word;overflow-wrap:anywhere}
.rt-content h2,.rt-content h3{margin:18px 0 8px;font-weight:700;color:var(--ink);line-height:1.4}
.rt-content h2{font-size:18px;border-bottom:1px dashed var(--line3);padding-bottom:6px}
.rt-content h2:first-child{margin-top:4px}
.rt-content h3{font-size:16px;color:var(--pri-600)}
.rt-content p{margin:8px 0}
.rt-content ul,.rt-content ol{padding-left:24px;margin:10px 0}
.rt-content ul{list-style:disc}
.rt-content ol{list-style:decimal}
.rt-content li{margin:4px 0}
.rt-content a{color:var(--pri);text-decoration:underline;word-break:break-all}
.rt-content a:hover{color:var(--pri-600)}
.rt-content hr{border:none;border-top:1px dashed var(--line2);margin:18px 0}
.rt-content img{max-width:100%;height:auto;border-radius:8px;margin:8px 0}
.rt-content blockquote{margin:10px 0;padding:8px 14px;border-left:3px solid var(--pri);background:var(--pri-weak);color:var(--t2);border-radius:0 8px 8px 0}
.rt-content b,.rt-content strong{font-weight:700;color:var(--ink)}
/* 2026-10-12 补：富文本编辑器换成 WangEditor V5 后，商家端可产出 h1 / h4 / h5、table、pre·code，
 * 而客户端详情此前只样式化到 h2/h3 与列表 ⇒ 这些在客户侧是「裸」的（掌柜粘贴的第三方富文本里本就有 <pre>）。
 * 🔴 只引用本块**已有**的令牌（--ink / --t2 / --line3 / --sf）—— css-token-scope-smoke 要求 base.css 的
 *    每个 var() 都能在「两端都加载」的样式表里解析到，否则另一端会静默回退初始值。
 * 🔴 表格用 max-width 而非 width：wangEditor 会输出内联 style="width: auto;"，写 width 只会被内联样式压住。 */
.rt-content h1,.rt-content h4,.rt-content h5{margin:16px 0 8px;font-weight:700;color:var(--ink);line-height:1.4}
.rt-content h1{font-size:20px}
.rt-content h4{font-size:14px}
.rt-content h5{font-size:14px;color:var(--t2)}
/* 2026-10-13：`table-layout:auto` 下 `max-width:100%` 压不到 min-content 以下 —— 宽表仍会顶出容器。
 * 🔴 `width:100%!important` 是**必需**的：wangEditor V5 会输出**内联** `style="width: auto"`
 *   （bundle 字面量：`'<table style="width: '+…+';"><tbody>'`），同属性硬碰硬只能靠 `!important`。
 *   （本块 2026-10-12 的注释已记过同一坑："写 width 只会被内联样式压住" —— 当时只加了 max-width，不够。） */
.rt-content table{width:100%!important;max-width:100%;table-layout:fixed;border-collapse:collapse;margin:12px 0}
.rt-content th,.rt-content td{border:1px solid var(--line3);padding:6px 10px;text-align:left;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}
.rt-content th{background:var(--sf);font-weight:700;color:var(--ink)}
/* 2026-10-13 🔴 本次报障的**直接来源**：`<pre>` 的 UA 默认 `white-space:pre` **永不折行**。
 *   原先只写 `overflow-x:auto` —— 那只是把溢出**关进代码块自身**（块内横滚），并不解决不折行。
 *   `pre-wrap` 保住 `\n` 换行语义、同时让超长行折行 ⇒ 块内不再产生横向滚动条。
 *   `overflow-x:auto` 保留作兜底（内容真的不可断时仍可局部滚，但正常情况下不会被触发）。 */
.rt-content pre{margin:12px 0;padding:10px 14px;background:var(--sf);border:1px solid var(--line3);border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;overflow-x:auto;font-size:13px;line-height:1.6}
.rt-content code{font-family:Consolas,Monaco,"Courier New",monospace;font-size:13px}
.rt-content pre code{border:none;background:transparent;padding:0}
@media (max-width:560px){
  .rt-edit{min-height:150px;padding:11px 12px}
    }
/* ===== 客户端商品目录 · 商品详情右侧滑出抽屉（2026-09-09 · 宽 1000px） =====
 * 层级低于通用弹层 modal(100)/toast(200)/大图灯箱(200)：抽屉内弹规格选择/图片放大仍可正常覆盖；
 * 高于内容区（页面元素无 fixed 大层级）。遮罩淡入、面板右滑；soft-render 重建时以 .in 保持展开态。 */
body.hc-drawer-lock{overflow:hidden}
.c-drawer-mask{position:fixed;inset:0;background:rgba(10,19,23,.32);z-index:88;opacity:0;pointer-events:none;transition:opacity .22s ease}
.c-drawer-mask.in{opacity:1;pointer-events:auto}
.c-drawer{position:fixed;top:0;right:0;bottom:0;width:1000px;max-width:calc(100vw - 24px);background:var(--page);z-index:89;display:flex;flex-direction:column;transform:translateX(104%);transition:transform .26s cubic-bezier(.22,.68,0,1);box-shadow:-16px 0 44px rgba(10,19,23,.16);border-left:1px solid var(--line)}
/* 购物车抽屉：宽 800px（类名 .w800；max-width 仍受 .c-drawer 的 calc(100vw-24) 约束，
 * ≤1080px 由下方媒体查询整条回退全宽） */
.c-drawer.w800{width:800px}
/* 大号档：宽 1200px（类名 .w-lg，2026-09-19 加宽改造新增）。
 * 采购模板抽屉（#tpl-drawer）用它——7 列表格 table-layout:fixed，商品名列需要更多横向预算。
 * 刻意不改 .c-drawer 默认的 1000px：那一档被商品详情等抽屉共用，统一提档会连带影响它们。
 * ⚠️ 新增宽度类必须同步下方 ≤1080px 的全宽回退选择器，漏改即窄屏横向溢出。 */
.c-drawer.w-lg{width:1200px}
.c-drawer.in{transform:translateX(0)}
.c-drawer-head{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 18px;background:var(--canvas);border-bottom:1px solid var(--line);flex-shrink:0;position:sticky;top:0}
/* 🔴 overflow:hidden 是「面包屑太长时截断」用的，但子元素紧贴左内壁（0px）→
 * 点选高亮的外轮廓（外扩 3px）会被裁掉左边一半（实测三个抽屉共 42 处，2026-10-01 排查第二轮）。
 * 改 overflow:clip + overflow-clip-margin:3px：裁切边界外扩 3px 恰好容下轮廓，**布局零变化**；
 * 老浏览器不认 overflow:clip 时自然退回上面的 overflow:hidden（即现状，不劣化）。 */
.c-drawer-crumb{flex:1;min-width:0;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;overflow:clip;overflow-clip-margin:3px}
.c-drawer-body{flex:1;overflow-y:auto;padding:18px 22px 70px;-webkit-overflow-scrolling:touch}
/* 抽屉宽度三档的整段回退：默认 1000px / .w800 800px / .w-lg 1200px，窄屏一律全宽。
 * ⚠️ 三档必须逐个列进这里 —— 悬空选择器老坑，新增档漏进本行即窄屏横向溢出。
 * 由 test/tpl-smoke.js 的源码守卫断言校验（勿手改单档而漏本行）。 */
@media (max-width:1080px){
  .c-drawer,.c-drawer.w800,.c-drawer.w-lg{width:100vw;max-width:100vw}
  .c-drawer-body{padding:14px 14px 60px}
}
/* ===== 客户端目录页 · 双栏独立滚动（整合进顶部导航框架 · 2026-09-10）=====
 * 通用 .shell.hc-c 框架已保证 header 固定、.content 视口内滚动；目录页 ≥1081px 时
 * 再将 .content 改为不可滚 flex 容器：导航卡条 + 下方左右两栏各自独立滚动（互不干扰）。 */
@media (min-width:1081px){
  .shell.hc-cat-page .content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:10px 16px 10px 24px} /* 标题信息并入顶栏面包屑：让位给双栏 */
  .shell.hc-cat-page .cat-flex{flex:1 1 auto;min-height:0;overflow:hidden;align-items:stretch;margin-top:0}
}
/* ≤1080px 目录页走通用内容滚动：分类面板堆叠于列表上方随 .content 整体滚动
 * （cat-flex/cat-tree/cb-grid 的窄屏断点在基础媒体查询中已定义） */

/* ===== 购物车抽屉（#cart-drawer，宽 800px）行卡明细 + 三层底部（2026-09-14 重构）=====
 * 原实现是一张 9 列表格（定宽列合计 770px）＋ 两行密集表单条，都照 1280px 设计；
 * 宽度收到 800 后可用只有 766px —— 表格必然横向滚动、底部会 wrap 成四五行，故整块重做：
 *   .cd-list 行卡明细（图 56 | 中列 fill | 右列：小计 / 换规格槽 + 步进器）
 *   .cd-sum  汇总条（预估合计 + 项数）
 *   .cd-form 表单卡（采购主体 · 收货地址 · 电话+交期 两列 · 订单备注；字段纵向、输入框 38 高）
 *   .cd-foot 底部条（导出链接 + 提交按钮）
 * 旧的列宽口径（名称弹性列 / 规格 150 / 操作 118 等）随表格一并作废，历史取舍见 REFERENCE.md。 */
#cart-drawer .c-drawer-body{display:flex;flex-direction:column;padding:20px;overflow:hidden}
#cart-drawer .cd-thumb .thumb{width:100%;height:100%;border-radius:0;padding:0;background:transparent}
#cart-drawer .cd-right .cd-amt .wait{font-style:normal;font-size:13px;font-weight:600;color:var(--warn-ink)}
#cart-drawer .cd-fd .input{width:100%;height:38px;padding:0 10px;font-size:13px;border-radius:10px}
#cart-drawer .cd-fd .req{color:var(--err);font-style:normal}
#cart-drawer .cd-foot .btn.pri{height:40px;padding:0 24px;font-size:14px;border-radius:999px}
/* ===== 设计评审落地（2026-09-10）：P0 可达性/动效 · P1 表格自适应列 · 徽章降级 ===== */
/* P0-A 键盘焦点环（输入类 .input 已有 border+weak 聚焦视觉，不重复叠加） */
a:focus-visible,button:focus-visible,select:focus-visible,.link:focus-visible,.c-it:focus-visible,.c-dd-t:focus-visible,
.c-hamb:focus-visible,.nt-card:focus-visible,.nt-arrow:focus-visible,
.sim-card:focus-visible,.qtile:focus-visible,.pg-n:focus-visible,.pg-go:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
/* P0-B 微动效：分类图卡缩略图 hover 轻放大 + 加购按钮 pop 反馈（尊重系统减弱动效偏好） */
.cat-tbl .btn.sm.pulse{animation:cart-pop .34s cubic-bezier(.22,.68,0,1)}
@keyframes cart-pop{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}
.cat-tbl .st-cell .d{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cat-tbl .st-cell .d.ok{background:var(--ok)}
.cat-tbl .st-cell .d.warn{background:var(--warn)}
.cat-tbl .st-cell .d.gray{background:var(--t5)}
/* ===== P2 梯队落地（2026-09-10 设计评审）：数字等宽对齐 + 顶栏中等屏压缩 ===== */
/* 表格/金额/价格数字 tabular-nums：翻页、合计、单价、序号等随列对齐不抖动
 * （对中文/字母字形无副作用，可整表安全应用；原散落声明保留无冲突） */
.tbl,.pg-bar,.price-line .p,.submit-card .amount,.kpi b,.cd-amt b{font-variant-numeric:tabular-nums}
/* 中等屏（≤1280px，双栏目录在 ≤1081 已退全宽，此压缩主要作用于其余页面头区）：
 * 隐去品牌副题与账号副行，顶部导航单行更紧凑 */
@media (max-width:1366px){
  .shell.hc-c .c-brand-t i,.shell.hc-c .c-me-t i{display:none}
  .shell.hc-c .c-brand-t,.shell.hc-c .c-me-t{justify-content:center}
}
/* ===== 商家端商品管理设计优化（2026-09-10 UI Designer）：行操作瘦身 / 工具栏分组 / 自适应列 / 徽章降级 ===== */
/* 禁用批量按钮 title 载体：disabled button 不触发 hover，由外层 span 承载 */
.ttw{display:inline-flex}
/* 工具栏三段分组细分隔线 */
.tb-sep{width:1px;align-self:stretch;min-height:20px;background:var(--line);margin:0 2px;flex-shrink:0}
.tb-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
/* 行内「关联 N ▾」浮层菜单（fixed 定位 · 高于表格低于抽屉/弹层） */
#rel-dd-root{position:static}
.rel-dd-it .go{font-size:12px;color:var(--t4)}
.rel-dd-it:hover .go{color:var(--pri)}
.rel-caret{font-size:10px;color:var(--t4);margin-left:3px}
.op-btn.rel:hover{border-color:var(--pri);color:var(--pri-600);background:var(--pri-weak)}
/* 状态列「被引用 N」徽章降级：灰字文本（与客户端 stDot 方向一致） */
.ref-n{display:inline-block;margin-left:6px;font-size:12px;color:var(--t4);white-space:nowrap}
/* 商品管理表自适应列（复用目录页 nth-child 思路；n=列号含 checkbox 首列） */
@media (max-width:1366px){
  .m-tbl thead th:nth-child(2),.m-tbl tbody tr td:nth-child(2){display:none}
}
@media (max-width:1366px){
  .m-tbl thead th:nth-child(8),.m-tbl tbody tr td:nth-child(8){display:none}
}
/* ============================================================
 * 客户端（企业采购端）设计系统层 —— 2026-09-13 全量重构
 * 依据：设计稿《智企办公 · 客户端页面重构设计》
 * 作用域：.shell.hc-c（工作台）与 .login.lg-c（登录 · 门户）；商家端完全不受影响
 * 内核：单一强调色 var(--pri) · 发丝线替代阴影 · 胶囊主操作 · 18px 卡片圆角
 * ============================================================ */

/* ---------- 1. 令牌重映射：一处改，全端换肤（客户端规则皆由这些变量驱动） ---------- */
/* 🔴 【2026-10-07 批次 20 · 跨端越界修复（客户端侧）】`.login.lg-c` 也纳入本令牌块。
 *   原因：客户端登录页**既不是** `.shell.hc-c`、**也不带** `.hc-modal`（它渲染在 `#app` 里、无外壳），
 *   故本块此前罩不到它 ⇒ `--pri-action` / `--on-action` 回落 `:root` 的墨黑 `#1C1C1E` ⇒
 *   客户端登录页主按钮与品牌标一直是**墨黑**而非品牌黄（CDP 实测确认），`--pri` 也是 `:root` 的旧蓝。
 *   补齐后回到客户端设计系统的品牌黄 / 客户端蓝。🔴 商家端登录页是 `.login`（无 `lg-c`）⇒ 不匹配本块，
 *   两端登录页仍互不影响（与商家端 `pages.css §十七` 的 `.login:not(.lg-c)` 互为镜像）。 */
.shell.hc-c,.hc-modal,.login.lg-c{
  /* ── 主色阶 · 蓝（2026-09-14 主题优化）：客户端 --pri 与商家端 #0064E0 收敛为同一支 ── */
  --pri:#0F62CE; --pri-600:#0B4EA6; --pri-700:#072E63;
  /* 方案 B · 黄即行动（2026-09-18 掌柜选定）：填色面转品牌黄，红只留价格 / 优惠；黄底文字一律走 --on-action */
  --pri-action:#FFD02F; --pri-action-press:#E8BC20; --on-action:#0E1116;
  /* 营销语义色：与 --err 错误红分开（满减 / 折扣 / 专属价） */
  --promo:#C2261B; --promo-weak:#FDECEA;
  --pri-weak:#FFF6DA; --pri-100:#C8DCF9; --pri-200:#9AC0F2;
  /* ── 中性阶 · 冷调灰：--t4 由 3.62 提到 4.54（正文 AA），--t5 降为「占位 / 禁用 / 装饰」专用 ── */
  --ink:#0E1116; --t1:#0E1116; --t2:#333A44; --t3:#55606C; --t4:#6E7783; --t5:#939BA6;
  /* ── 顶栏已于 2026-09-14 改为「品牌黄底 + 深色文字」，下面这两个深色专用值暂时无人引用（保留备用） ── */
  --on-dark:#FFFFFF; --on-dark-mut:#A5A8B5;
  /* ── 表面 4 层 + 发丝线 3 档（此前这几个变量定义了却无人引用，表面色全靠硬编码） ── */
  --line:#E6E9EE; --line2:#D5DAE1; --line3:#F0F2F5; --line4:#F0F2F5; --line5:#F0F2F5;
  --bd-strong:#D5DAE1; --bd:#E6E9EE; --bd-soft:#F0F2F5;
  --page:#F2F4F7; --canvas:#FFFFFF; --sf:#F7F8FA; --sf2:#FBFCFD; --surface:#F1F3F6; --sf5:#F5F7F9;
  /* ── 语义色：ok 4.21 / warn 4.24 原本都不到 AA，这里全部提到 5.0 以上 ── */
  --ok:#0F7B3D; --ok-weak:#E8F5EC; --ok-ink:#0F7B3D;
  --warn:#9A6206; --warn-weak:#FDF3E3; --warn-ink:#9A6206;
  --err:#C0392B; --err-weak:#FBEBE9; --err-ink:#C0392B;
  --info:#0F62CE; --info-weak:#E4EEFC;
  /* 收藏星标专用点缀色：白字压品牌黄只有 1.47（2026-09-18 按 WCAG 相对亮度公式复算） → 黄只做底色/图形，绝不做文字色 */
  --fav:#FFD02F; --fav-deep:#FCB900;
  /* ── 顶栏：品牌黄底 + 深色文字（2026-09-14 掌柜指定「黄底黑字」）── */
  --bar:#FFD02F; --bar-ink:#0E1116; --bar-t:#333A44; --bar-on:#FFFFFF;
  --bar-hover:rgba(14,17,22,.08); --bar-line:rgba(14,17,22,.14);
  --r-sm:8px; --r-md:11px; --r-lg:18px;
  /* 发丝线替代投影：--sh1 由「浮起阴影」改为「1px 描边环」，所有卡片/表格一次性转为扁平描边风格 */
  --sh1:0 0 0 1px #E6E9EE; --sh2:0 12px 32px rgba(0,0,0,.12);
  font-family:"Inter","Noto Sans SC","Segoe UI Variable Text","Segoe UI","Microsoft YaHei UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
}
/* 数字/金额用等宽数字，表格与合计不跳动 */
.shell.hc-c .num,.shell.hc-c .cf-amt,.shell.hc-c .kpi b,.shell.hc-c .nt-c,.shell.hc-c .crail-it i{font-variant-numeric:tabular-nums}
/* ---------- 2. 内容域与页头（标题 26/600 + 说明整行另起） ---------- */
.shell.hc-c .content{padding:30px 48px 28px}
.shell.hc-c .page-head{display:flex;align-items:center;gap:10px;row-gap:8px;flex-wrap:wrap}
.shell.hc-c .page-title{font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.4px;line-height:1.22}
.shell.hc-c .page-head .tag-chip{order:1}
.shell.hc-c .page-head .acts{order:2;margin-left:auto;display:flex;gap:10px;align-items:center}
.shell.hc-c .page-sub{order:3;flex-basis:100%;font-size:14px;color:var(--t3);line-height:1.5;margin:0}
.shell.hc-c .tag-chip{font-size:12px;font-weight:500;padding:5px 11px;border-radius:999px}
.shell.hc-c .back-row{margin-bottom:10px}
/* ---------- 3. 客户端顶栏（品牌黄底 56px · 深色文字） ---------- */
.shell.hc-c .c-top{height:56px;background:var(--bar);border-bottom:0;padding:0 48px;gap:8px}
.shell.hc-c .c-top .c-brand{border-radius:8px;padding:2px 8px 2px 0;margin-right:0}
.shell.hc-c .c-top .c-brand:hover{background:var(--bar-hover)}
.shell.hc-c .c-top .c-logo{width:28px;height:28px;border-radius:8px;box-shadow:none;background:transparent;color:transparent;display:flex;align-items:center;justify-content:center}
.shell.hc-c .c-top .c-logo img{width:22px;height:22px;display:block}
.shell.hc-c .c-top .c-brand-t b{color:var(--bar-ink);font-size:15px;font-weight:600;letter-spacing:0}
.shell.hc-c .c-top .c-brand-t i{color:var(--bar-t);font-size:11px}
.shell.hc-c .c-top .c-nav{gap:4px;margin-left:24px}
.shell.hc-c .c-top .c-it{height:auto;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:400;color:var(--bar-t)}
.shell.hc-c .c-top .c-it:hover{background:var(--bar-hover);color:var(--bar-ink)}
.shell.hc-c .c-top .c-it.on{background:var(--bar-on);color:var(--bar-ink);font-weight:600}
.shell.hc-c .c-top .c-it.on::before{display:none}
.shell.hc-c .c-top .c-it .c-cnt{min-width:20px;height:18px;font-size:11px;font-weight:600;background:var(--err);color:#fff;padding:0 6px}
.shell.hc-c .c-top .c-it.on .c-cnt{background:var(--bar-ink);color:var(--bar)}
.shell.hc-c .c-top .c-dd-t{height:auto;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:400;color:var(--bar-t)}
.shell.hc-c .c-top .c-dd-t:hover{background:var(--bar-hover);color:var(--bar-ink)}
.shell.hc-c .c-top .c-dd.on>.c-dd-t{background:var(--bar-on);color:var(--bar-ink);font-weight:600}
.shell.hc-c .c-top .c-arr{border-top-color:var(--bar-t)}
.shell.hc-c .c-top .c-me{padding:0}
.shell.hc-c .c-top .c-me .avatar{width:28px;height:28px;background:var(--bar-ink);color:var(--bar);font-size:11px}
.shell.hc-c .c-top .c-me-t b{color:var(--bar-ink);font-size:12px;font-weight:600}
.shell.hc-c .c-top .c-me-t i{color:var(--bar-t);font-size:10px}
.shell.hc-c .c-top .btn.ghost{background:transparent;border-color:transparent;color:var(--bar-t);height:30px;padding:0 10px;font-size:12px;font-weight:400}
.shell.hc-c .c-top .btn.ghost:hover{background:var(--bar-hover);color:var(--bar-ink)}
.shell.hc-c .c-top .c-hamb{background:var(--bar-hover);border-color:transparent;color:var(--bar-ink)}
.shell.hc-c .c-top .c-nav.open{background:var(--canvas);border-color:var(--line)}
.shell.hc-c .c-top .c-nav.open .c-it,.shell.hc-c .c-top .c-nav.open .c-dd-t{width:100%;justify-content:flex-start;border-radius:9px}
.shell.hc-c .c-top .c-nav.open .c-it.on,.shell.hc-c .c-top .c-nav.open .c-dd.on>.c-dd-t{background:var(--pri-weak);color:var(--pri-600)}
/* 顶栏购物车入口（2026-09-14 从目录页工具条上移）：
 * 底色必须够亮 —— 图标是**黑色描边位图**，做深色底会把图标吃掉。
 * 用 --bar-on 白底 + --bar-ink 黑字，正是顶栏既有的「白 + 黑」组合。 */
.shell.hc-c .c-top .c-go{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:32px;padding:0 14px 0 12px;border-radius:999px;border:0;background:var(--bar-on);color:var(--bar-ink);font-family:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.shell.hc-c .c-top .c-go:hover{box-shadow:0 1px 3px rgba(14,17,22,.18)}
.shell.hc-c .c-top .c-go:active{box-shadow:none}
.shell.hc-c .c-top .c-go img{width:16px;height:16px;display:block;flex:0 0 auto}
/* 窄屏降级：顶栏已有 5 个导航项 + 账号 + 退出，此时只留图标（title 仍有提示） */
@media (max-width:1080px){
  .shell.hc-c .c-top .c-go{padding:0;width:32px;justify-content:center}
  .shell.hc-c .c-top .c-go span{display:none}
}
/* ---------- 4. 业务范围页签（胶囊 + 类数；商家配置的分组，与一级分类非同一维度） ---------- */
.shell.hc-c .nt-bar{background:transparent;border:0;border-radius:0;padding:0;margin:0 0 14px;gap:8px}
.shell.hc-c .nt-arrow{flex:0 0 28px;width:28px;height:28px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--t3);font-size:15px;opacity:1}
.shell.hc-c .nt-arrow:hover{background:var(--pri-weak);color:var(--pri-600);border-color:var(--pri-100)}
/* ---------- 5. 一级分类导轨 + 二级分类筛选 ---------- */
.shell.hc-c .cat-flex{gap:22px;margin-top:0}
.shell.hc-c .crail-cap{font-size:12px;font-weight:600;color:var(--t3);letter-spacing:1px;line-height:1.4}
.shell.hc-c .crail-scope{font-size:16px;font-weight:600;color:var(--ink);line-height:1.3;margin-top:4px}
.shell.hc-c .crail-scope-n{font-size:11px;color:var(--t3);line-height:1.5;margin:2px 0 10px}
.shell.hc-c .crail-it{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:10px;cursor:pointer;user-select:none;transition:background .14s}
.shell.hc-c .crail-it:hover{background:rgba(255,255,255,.75)}
.shell.hc-c .crail-it.on{background:#fff}
.shell.hc-c .crail-it b{font-size:14px;font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-c .crail-it.on b{font-weight:600;color:var(--ink)}
.shell.hc-c .crail-it i{font-style:normal;font-size:12px;color:var(--t5);flex-shrink:0}
.shell.hc-c .crail-it.on i{color:var(--pri);font-weight:500}
.shell.hc-c .crail-foot{margin-top:10px;padding-top:10px;border-top:1px solid var(--line3);font-size:11px;color:var(--t5);line-height:1.6}
.shell.hc-c .cat2bar .lb{font-size:12px;color:var(--t3)}   /* 这一条落在 --page 灰底上，t4 只有 4.12，必须用 t3 */
.shell.hc-c .cat2chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--sf2);color:var(--t2);font-size:12px;cursor:pointer;user-select:none;transition:border-color .14s,background .14s,color .14s;white-space:nowrap;font-family:inherit}
.shell.hc-c .cat2chip:hover{border-color:var(--pri);color:var(--pri-600)}
.shell.hc-c .cat2chip.on{background:var(--pri-action);border-color:var(--pri-action);color:var(--on-action);font-weight:600}
/* ---------- 6. 工具条 / 搜索 / 表格 / 分页 ---------- */
.shell.hc-c .toolbar{background:transparent;border:0;border-radius:0;padding:0;margin-bottom:12px;gap:10px}
.shell.hc-c .toolbar .searchbox{background:#fff;border:1px solid var(--line);border-radius:999px;height:40px;padding:0 18px;flex:1 1 260px;max-width:520px}
.shell.hc-c .toolbar .searchbox input{font-size:13px;color:var(--ink)}
.shell.hc-c .toolbar .searchbox input::placeholder{color:var(--t5)}
.shell.hc-c .sel select{height:40px;border-radius:999px;border-color:var(--line);font-size:13px;color:var(--t2);padding:0 32px 0 16px}
.shell.hc-c .tbl-wrap{background:#fff;border-radius:18px;overflow:hidden;padding:var(--pad-card)}
.shell.hc-c table.tbl{min-width:0}
.shell.hc-c .tbl-scroll{padding:var(--pad-tight)}
.shell.hc-c .tbl th{background:var(--sf);color:var(--t3);font-size:12px;font-weight:500;padding:13px 20px;border:0}
.shell.hc-c .tbl td{padding:14px 20px;font-size:13px;color:var(--t3);border-top:1px solid var(--line3);white-space:nowrap}
.shell.hc-c .tbl tr:hover td{background:var(--sf2)}
.shell.hc-c .tbl .thumb{width:46px;height:46px;border-radius:10px;background:var(--sf);color:var(--t5);font-size:15px}
.shell.hc-c .tbl .thumb.no-img{color:var(--t5);font-weight:600}
.shell.hc-c .tbl .main-name,.shell.hc-c .cat-name a{font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.shell.hc-c .tbl .main-name a{color:var(--ink);font-weight:500}
.shell.hc-c .tbl .main-name a:hover,.shell.hc-c .cat-name a:hover{color:var(--pri-600);text-decoration:none}
.shell.hc-c .tbl .meta{font-size:11px;color:var(--t4)}
.shell.hc-c .tbl .num{font-size:14px;font-weight:500;color:var(--ink)}
.shell.hc-c .tbl .ops a{margin-right:12px;font-size:12px}
.shell.hc-c .tbl .ops a:last-child{margin-right:0}
.shell.hc-c .tbl-foot{background:var(--sf2);border-top:1px solid var(--line3);padding:16px 20px;font-size:12px;color:var(--t3)}
.shell.hc-c .tbl-foot .cf-amt{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.3px}
.shell.hc-c .tbl-foot .cf-note{color:var(--t3)}
.shell.hc-c .tbl-foot .cf-pre{color:var(--warn-ink);font-weight:500}
.shell.hc-c .pg button{width:28px;height:28px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--t3);font-size:12px}
.shell.hc-c .pg button.on{background:var(--pri-action);color:var(--on-action);border-color:var(--pri-action);font-weight:600}
.shell.hc-c .pg a{color:var(--pri);font-size:12px}
/* 商品单元格（图 + 名称 + 订货编码三合一）与分类 / 供货状态 */
.shell.hc-c .cat-prod{display:flex;align-items:center;gap:12px;min-width:0}
.shell.hc-c .cat-prod-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
/* 商品名（点击右侧滑出商品详情）：字号 2026-09-17 按掌柜要求「调大一号」14 → 16
 * （项目字号档 11/12/13/14/16，14 的下一档即 16）。字重 500 与配色保持不变。 */
.shell.hc-c .cat-prod-n{font-size:16px;font-weight:500;color:var(--ink);cursor:pointer}
.shell.hc-c .cat-prod-n:hover{color:var(--pri-600)}
/* 🔴 overflow:hidden 原来**没有配省略号**（2026-10-01 排查第二轮发现）：商品编码是不可断行的
 * 长串（如 AP123506），超出卡片宽时被**静默裁掉**（实测每处溢出 7px、客户端目录页 20 处），
 * 用户看不出「还有内容」。补 text-overflow:ellipsis + white-space:nowrap，
 * 与同一行内的 .cat-prod-n（商品名，早已带省略号）口径一致。 */
.shell.hc-c .cat-prod-c{font-size:11px;color:var(--t4);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-c .cat-cat1{font-size:12px;color:var(--t3)}
/* 【2026-10-24 组合款数】「N 款可选」从商品名里挪到价格下方的小字（掌柜 D15）。
 * 为什么必须挪：名称列只有约 130px，`中性笔 · 100 款可选` 会被截成「中性…」；
 * 而款数是「这一条链接有多少可选」的**视图**，不是名字的一部分，放在价格旁反而更直观。 */
.shell.hc-c .cat-cnt{display:block;margin-top:3px;font-size:11px;color:var(--t4);font-variant-numeric:tabular-nums;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-c .cat-cat1 .c2{color:var(--t4)}
.shell.hc-c .st-cell{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t3)}
.shell.hc-c .st-cell i.d{width:6px;height:6px;border-radius:999px;display:inline-block;flex-shrink:0}
.shell.hc-c .st-cell i.d.ok{background:var(--ok)}
.shell.hc-c .st-cell i.d.warn{background:var(--warn)}
.shell.hc-c .st-cell i.d.gray{background:var(--t5)}
/* ---------- 7. 卡片 / 徽章 / 按钮 / 状态条 / 提示 ---------- */
.shell.hc-c .card{border-radius:18px;padding:24px;box-shadow:var(--sh1)}
.shell.hc-c .card + .card{margin-top:18px}
.shell.hc-c .card-title{font-size:15px;font-weight:600;color:var(--ink)}
.shell.hc-c .card-title .sub{font-size:12px;font-weight:400;color:var(--t4)}
.shell.hc-c .badge{height:24px;padding:0 11px;font-size:11px;font-weight:500}
.shell.hc-c .badge.blue{background:var(--pri-weak);color:var(--pri)}
.shell.hc-c .badge.green{background:var(--ok-weak);color:var(--ok)}
.shell.hc-c .badge.amber{background:var(--warn-weak);color:var(--warn)}
.shell.hc-c .badge.gray{background:var(--sf);color:var(--t3)}
.shell.hc-c .badge.red{background:var(--err-weak);color:var(--err-ink)}
.shell.hc-c .badge.outline{background:#fff;border-color:var(--line)}
/* 🔴 客户端弹层（.hc-modal）的按钮语言必须与页内**同源双写**（本文件 `.stepper` 已是这个写法）：
 *   弹层挂在 #modal-root，位于 .shell **之外** ⇒ `.shell.hc-c` 匹配不到，
 *   凡页内给过的按钮规则，弹层都得**同样写一份**，否则静默落回全局 `.btn`。
 *   实测（2026-10-06 视觉验证）两处差异：
 *   ① **几何** —— 全局 `.btn` 是 38px / 字重 700 / padding 0 20px，页内是 42px / 字重 500 / 0 22px
 *      ⇒ 弹层按钮「小一圈、粗一档」（`.sm` 同理 30→34）；
 *   ② **配色** —— 全局 `.btn.pri{color:#fff}` 留下**白字压品牌黄**（对比度 ~1.5:1，远低于 AA），
 *      违反本文件自己定的「黄底文字一律走 --on-action」。
 * 🔴 `.hc-modal` 只出现在客户端弹层（商家端弹层一律不挂它，商家端专属弹层走 `.mp-modal`），
 *    故这两条双写无跨端风险。 */
.shell.hc-c .btn,.hc-modal .btn{height:42px;border-radius:999px;font-size:14px;font-weight:500;padding:0 22px}
.shell.hc-c .btn.sm,.hc-modal .btn.sm{height:34px;font-size:12px;padding:0 16px;font-weight:500}
.shell.hc-c .btn.pri,.hc-modal .btn.pri{background:var(--pri-action);color:var(--on-action)}
.shell.hc-c .btn.pri:hover,.hc-modal .btn.pri:hover{background:var(--pri-action-press)}
.shell.hc-c .btn.ghost{background:transparent;border:1px solid var(--pri);color:var(--pri)}
.shell.hc-c .btn.ghost:hover{background:var(--pri-weak)}
.shell.hc-c .btn.ghost.dim{border-color:var(--line2);color:var(--t3)}
.shell.hc-c .btn.ghost.dim:hover{background:var(--sf)}
.shell.hc-c .btn:disabled{background:var(--line3);color:var(--t5);border-color:transparent}
.shell.hc-c .btn-mini{height:32px;border-radius:999px;border-color:var(--line);background:#fff;color:var(--t2);font-size:12px;font-weight:500;padding:0 14px}
.shell.hc-c .btn-mini:hover{border-color:var(--pri);color:var(--pri-600)}
.shell.hc-c .btn-mini.primary{border-color:var(--pri);color:var(--pri)}
.shell.hc-c .rule-tip{background:var(--sf);border:0;border-radius:14px;padding:14px 20px;font-size:13px;color:var(--t2);margin:12px 0 0}
.shell.hc-c .rule-tip .i{width:16px;height:16px;background:transparent;color:var(--pri);font-size:13px;font-weight:600;border-radius:0}
.shell.hc-c .alert{background:var(--warn-weak);border-radius:14px;padding:14px 18px;font-size:13px;color:var(--warn-ink);line-height:1.6}
.shell.hc-c .hint{font-size:11px;color:var(--t4);line-height:1.7}
.shell.hc-c .kv{margin-bottom:10px}
.shell.hc-c .kv .k{font-size:12px;color:var(--t4)}
.shell.hc-c .kv .v{font-size:13px;font-weight:400;color:var(--ink)}
.shell.hc-c .dot-list{margin:0;padding-left:18px;font-size:13px;color:var(--t3);line-height:2}
.shell.hc-c .dot-list li{margin-bottom:6px}
/* ---------- 8. 分段控件（我的订单状态筛选：白瓷片浮于羊皮纸轨道） ---------- */
.shell.hc-c .seg{display:inline-flex;gap:4px;background:var(--sf);border-radius:999px;padding:4px}
.shell.hc-c .seg .it{border:0;background:transparent;height:30px;padding:0 16px;border-radius:999px;font-size:13px;color:var(--t3)}
.shell.hc-c .seg .it:hover{color:var(--ink)}
.shell.hc-c .seg .it.on{background:#fff;color:var(--ink);font-weight:600}
/* ---------- 9. 表单 / 步进器 / 字段 ---------- */
.shell.hc-c .field{margin-bottom:16px}
.shell.hc-c .field label{font-size:12px;font-weight:400;color:var(--t3);margin-bottom:8px}
.shell.hc-c .field label .req{color:var(--err)}
.shell.hc-c .field label .opt{color:var(--t4)}
.shell.hc-c .input,.shell.hc-c select.input,.shell.hc-c textarea.input{border-radius:11px;border-color:var(--line2);padding:11px 14px;font-size:13px;background:#fff}
.shell.hc-c .input:focus,.shell.hc-c textarea.input:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-weak)}
.shell.hc-c textarea.input{min-height:64px;line-height:1.6}
.shell.hc-c .stepper,.hc-modal .stepper{gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#fff;display:inline-flex;align-items:center}
.shell.hc-c .stepper button,.hc-modal .stepper button{width:26px;height:26px;border:0;border-radius:999px;background:transparent;font-size:14px;color:var(--t3)}
.shell.hc-c .stepper button:hover,.hc-modal .stepper button:hover{background:var(--sf)}
.shell.hc-c .stepper button.plus,.hc-modal .stepper button.plus{color:var(--pri)}
.shell.hc-c .stepper b,.hc-modal .stepper b{width:36px;height:26px;border:0;background:transparent;font-size:13px;font-weight:500;color:var(--ink)}
.shell.hc-c .stepper b input,.hc-modal .stepper b input{font-size:13px;font-weight:500;color:var(--ink)}
/* 详情页买区的大号变体（2026-09-14 恢复）：客户端层的 .stepper 覆写按特异性压掉了全局 .stepper.lg
 * （0,3,1 ＞ 0,2,1），详情页那处 `class="stepper lg"` 一直渲染成 26px、与旁边 42px 的主按钮不齐。
 * 这里按同一套胶囊语法加一档：内距 / 描边 / 圆角 / 按钮透明 / 加号蓝全部沿用，只把尺寸与字号上调。
 * 高度 = 1 + 4 + 32 + 4 + 1 = 42，与 .shell.hc-c .btn 精确等高。
 * 全局 .stepper.lg（643–645 行）保留不动 —— 只删实例、不删样式。 */
.shell.hc-c .stepper.lg{gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#fff}
.shell.hc-c .stepper.lg button{width:32px;height:32px;border:0;border-radius:999px;background:transparent;font-size:16px;color:var(--t3)}
.shell.hc-c .stepper.lg button:hover{background:var(--sf)}
.shell.hc-c .stepper.lg button.plus{color:var(--pri)}
.shell.hc-c .stepper.lg b{width:44px;min-width:0;height:32px;border:0;background:transparent;font-size:14px;font-weight:500;color:var(--ink)}
.shell.hc-c .stepper.lg b input{width:100%;font-size:14px;font-weight:500;color:var(--ink)}
.shell.hc-c .acc-row{border-radius:14px;padding:14px 16px}
/* ---------- 10. 抽屉（商品详情 / 购物车） ---------- */
.shell.hc-c .c-drawer{background:#fff;border-left:1px solid var(--line);box-shadow:-16px 0 44px rgba(0,0,0,.22)}
.shell.hc-c .c-drawer-mask{background:rgba(29,29,31,.30)}
.shell.hc-c .c-drawer-head{padding:20px 28px;border-bottom:1px solid var(--line)}
/* 抽屉头「返回上一个商品」（2026-09-15 补）：与详情页 .back-row 的 .btn-back 同源，
 * 在抽屉头里收窄一档；商品名过长时省略（名称包在 .bk-nm 里才吃得到 ellipsis）。 */
.shell.hc-c .c-drawer-head .btn-back{flex:0 0 auto;height:30px;padding:0 10px;gap:4px;font-family:inherit;font-size:12px;font-weight:500;max-width:260px}
.shell.hc-c .c-drawer-head .btn-back .bk-nm{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-c .c-drawer-body{padding:24px 28px}
.shell.hc-c .sp-tag{background:var(--sf);color:var(--t3);border-radius:999px;font-size:11px;padding:3px 10px}
.shell.hc-c .sp-tag.oc{background:var(--pri-weak);color:var(--pri)}
.shell.hc-c .cart-def{font-size:11px;color:var(--t4)}
.shell.hc-c .cart-def.warn{color:var(--warn-ink)}
/* 详情页：价格行与主操作 */
.shell.hc-c .price-line .p{font-size:32px;font-weight:600;color:var(--ink);letter-spacing:-.6px}
.shell.hc-c .price-line .n{font-size:13px;color:var(--t3)}
.shell.hc-c .price-line .n span{color:var(--t4)}
.shell.hc-c .prod-img{border-radius:18px;background:var(--sf);overflow:hidden}
.shell.hc-c .prod-img .zoom-hint{background:rgba(255,255,255,.92);border-radius:999px;font-size:11px;color:var(--t2);padding:4px 12px}
.shell.hc-c .detail-tabs{border-bottom:1px solid var(--line);display:flex;gap:6px;margin:22px 0 18px}
.shell.hc-c .detail-tabs button{border:0;background:transparent;padding:10px 14px;font-size:13px;color:var(--t3);border-radius:0;font-family:inherit}
.shell.hc-c .detail-tabs button.on{color:var(--pri-600);font-weight:600;box-shadow:inset 0 -2px 0 0 var(--pri)}
.shell.hc-c .spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.shell.hc-c .spec-grid .s .k{font-size:11px;color:var(--t4)}
.shell.hc-c .spec-grid .s .v{font-size:13px;font-weight:500;color:var(--ink);margin-top:4px}
.shell.hc-c .kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.shell.hc-c .kv-grid .row .k{font-size:11px;color:var(--t4)}
.shell.hc-c .kv-grid .row .v{font-size:13px;font-weight:500;color:var(--ink);margin-top:4px}
.shell.hc-c .rt-content{font-size:13px;color:var(--t2);line-height:1.9}
/* 相似推荐与配件 */
.shell.hc-c .sim-grid{gap:16px;margin-top:14px}
.shell.hc-c .sim-card{border-radius:14px;border-color:var(--line3)}
.shell.hc-c .sim-card:hover{border-color:var(--pri-100);box-shadow:0 6px 20px rgba(0,0,0,.07)}
.shell.hc-c .sim-img{background:var(--sf);color:var(--t5);font-size:30px}
.shell.hc-c .sim-name{font-size:13px;font-weight:500;color:var(--ink)}
.shell.hc-c .sim-code{font-size:11px;color:var(--t4)}
.shell.hc-c .sim-note{background:var(--sf);border-left:2px solid var(--pri-100);font-size:11px;color:var(--t3);border-radius:8px}
.shell.hc-c .sim-price{font-size:13px;font-weight:500;color:var(--pri)}
.shell.hc-c .acc-row{background:var(--sf2);border:1px solid var(--line3);border-radius:14px;margin-bottom:8px}
.shell.hc-c .acc-row .ad{color:var(--t3)}   /* 行卡底是 --sf2，t4 只有 4.42 */
/* 相似推荐行列表（2026-09-14 由 .sim-grid 大图卡改为与 .acc-row 同构的紧凑行）——
 * 列宽：图 48 | 名称组 fill | 售价 110 | 供货状态 104 | 操作 132 | 箭头 16，gap 12，行内距 14/16。
 * 操作列 132 是按最坏内容定的：「✓ 已在购物车 · 2」11.5px 约 98px 宽，116 会顶破行。 */
.shell.hc-c .sim-list{display:flex;flex-direction:column;margin-top:12px}
/* ═══ 相似推荐行（仅客户端 `.shell.hc-c`）═══
 * 【2026-10-14 掌柜指令】「参考适配配件列表进行优化改造，并从视觉和布局上区分开两列表的排版」。
 * 🔴 布局改造：改前右侧四个**固定列**（售价 110 + 供货 104 + 操作 132 + 箭头 16 + 间隙 60 = 422）
 *   把 `.sr-main` 压到只剩 **122px** ⇒ 商品名折成 4 行、行高 124～164px（配件行只有 71.6）。
 *   修法 = ① **把「供货状态」并进 `.sr-meta`**（见 `.sr-stb`，省下整列 116px）② 售价 110→100、操作 132→120
 *   ③ 备注单行省略 ⇒ 名称块拿回 **262px**、商品名 1～2 行。
 * 🔴 形态差异（掌柜要「一眼分得出来」）：
 *   配件行 = 扁平灰底 `--sf2` / **无边框** / 圆角 10 / 价格内联在名称块第二行 / **行不可点**；
 *   相似行 = **白底 `--canvas` + 1px 边框 + 左侧 3px 主题色条** / 圆角 14 / **独立红色价格列** /
 *            **整行可点**（行末箭头 `.sr-go` 已按 2026-10-14 掌柜指令删除 —— 整行本身即入口，箭头冗余）。
 * 🔴 左侧色条用 `box-shadow:inset` 而不是 `border-left`：不占布局宽度（border-left 会把内容整体右推）、
 *   也不会在圆角处留下缺口。 */
.shell.hc-c .sim-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--canvas);border:1px solid var(--line3);box-shadow:inset 3px 0 0 var(--pri);margin-bottom:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.shell.hc-c .sim-row:hover{border-color:var(--pri-100);box-shadow:inset 3px 0 0 var(--pri),0 2px 8px rgba(15,23,42,.06)}
.shell.hc-c .sim-row .thumb{width:48px;height:48px;border-radius:10px;background:var(--sf);color:var(--t5);font-size:16px;font-weight:600;flex:0 0 48px;box-sizing:border-box}
.shell.hc-c .sim-row .sr-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.shell.hc-c .sim-row .sr-name{font-size:14px;font-weight:500;color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* meta 行：编码 · 品牌 · 单位 ＋（供货状态徽章 —— 原独立列 104px 已并入此处）。
 * 🔴 这里从「纯文字」改成 flex：徽章是胶囊、需要与同行文字**垂直居中对齐**；纯 inline 排会错位。 */
.shell.hc-c .sim-row .sr-meta{font-size:11.5px;color:var(--t3);line-height:1.6;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.shell.hc-c .sim-row .sr-stb{display:inline-flex;flex:0 0 auto}
.shell.hc-c .sim-row .sr-note{font-size:11.5px;color:var(--t3);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-c .sim-row .sr-price{flex:0 0 100px;text-align:right;font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.shell.hc-c .sim-row .sr-act{flex:0 0 120px;display:flex;align-items:center;justify-content:center}
.shell.hc-c .sim-row .sr-act .btn-mini{white-space:nowrap;padding:0 12px}
.shell.hc-c .sim-row .sr-act .sim-in{padding:4px 8px;font-size:11.5px}
/* ---------- 11. 订单 / 提交卡 ---------- */
.shell.hc-c .cart-layout{gap:22px}
/* 整页购物车（#c-cart）列预算重排（2026-09-18）：2026-09-18 掌柜要求不删任何列并新增「订货编码」列，
 * 十列在 1000+px 内装下的唯一办法是把水平 padding 由 20 收到 12（每列省 16px、十列共 160px）。
 * 带 .cart-layout 前缀是必须的 —— `.shell.hc-c .tbl th/td` 的 padding 是共用的，
 * 不加前缀会连带改坏订单详情页 / 采购模板抽屉 / 商家端那几张 .cart-tbl。 */
.shell.hc-c .cart-layout .tbl th,
.shell.hc-c .cart-layout .tbl td{padding-left:12px;padding-right:12px}
/* 订货编码列：等宽数字，纵向对齐更好核 */
.shell.hc-c .cart-layout .tbl .cart-oc{font-variant-numeric:tabular-nums}
/* 购物车「售价」列改回中性墨黑（2026-09-18 掌柜指定）。
 * 单价是原始参照信息、不承担促单语义，营销红让它看起来像折扣价；
 * 行末「金额」列（10-client.js:711；表头原「预估小计」，2026-09-18 掌柜改名为「金额」）
 * 与底部「预估合计」（.cf-amt）仍走 --promo 营销红。
 * 为什么给该 td 新增 .cart-price：上面那条 ".shell.hc-c .tbl .num" 是 4 个类、
 * 同时命中单价列与小计列（两列 DOM 结构完全相同），不加类名无法只改单价这一列；
 * 本条 5 个类，特异性高于它。字重未动：仍由上层规则给到 700（掌柜只要求改颜色）。 */
.shell.hc-c .cart-tbl .cart-price .num{color:var(--ink)}
/* 订单详情「成交单价」列改回中性墨黑（2026-09-19 掌柜指定）——
 * 与购物车「售价」列（:1475）同口径：单价是原始参照信息、不承担促单语义，
 * 营销红让它看起来像折扣价。行末「小计」列仍走 --promo 营销红，合计（.cf-amt）同。
 * 为什么给该 td 新增 .ord-price：".shell.hc-c .tbl .num" 是 4 个类、同时命中
 * 成交单价与小计列（两列在 10-client.js:1387-1388 的 DOM 结构完全相同），
 * 不加类名无法只改单价这一列。
 * ★ 与购物车那条的关键区别（初次写错、真机抓出）：购物车是 <td class="cart-price"><span class="num">，
 *   类名在「父子两层」→ 写 ".cart-price .num"（后代）正确；
 *   订单详情是 <td class="num ord-price">，两个类在「同一个元素上」→ 必须写 ".num.ord-price"。
 *   写成 ".ord-price .num" 会因无后代匹配而整条失效（真机实测 unitColor 仍为 rgb(194,38,27)）。
 * 不复用购物车的 .cart-price：两页的表都是 .cart-tbl，同名会互相污染。
 * 字重 / 字号未动：仍由上层规则给到 700 / 14px（掌柜只要求改颜色）。 */
.shell.hc-c .cart-tbl td.num.ord-price{color:var(--ink)}
/* 合计条钉在横滚容器左缘：>=1280 已不横滚，这条是 <1280 的兜底 ——
 * 否则横滚时「清空购物车 / 预估合计」会被容器左缘裁掉（实测位移 36px）。
 * 用 sticky 而不是把它移出 .tbl-wrap：那层带 border-radius:18px + overflow:hidden，
 * 移出会同时丢掉底部圆角、并与表格之间多出 .cart-layout 的 22px gap。 */
.shell.hc-c .cart-layout .tbl-wrap > .tbl-foot{position:sticky;left:0}
.shell.hc-c .submit-card{border-radius:18px;padding:24px}
.shell.hc-c .cart-foot .cf-lb{color:var(--t3)}
.shell.hc-c .tl{list-style:none;padding:0;margin:0}
.shell.hc-c .tl li{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.shell.hc-c .tl .dot{width:8px;height:8px;border-radius:999px;background:var(--bd-strong);margin-top:6px;flex-shrink:0}
.shell.hc-c .tl .dot.blue{background:var(--pri)}
.shell.hc-c .tl li b{font-size:13px;font-weight:500;color:var(--ink);display:block}
.shell.hc-c .tl li span{font-size:11px;color:var(--t4)}
.shell.hc-c .cd-sub{background:var(--sf2);border-top:1px solid var(--line3)}
/* ---------- 客户端登录页（2026-10-16 版式重构 · 照抄参考页实测值） ----------
 * 实测依据（CDP 取渲染后 computed style，非目测）：顶栏 76 · 右列 x773 w432 ·
 *   卡片 432×512 圆角 20 · Tab item 18px(active 500) + bar 高 4 圆角 2 · 输入行高 60 +
 *   border-bottom #eee · 协议 margin 42/13 · 按钮 356×40 圆角 4 · 间距链 20/42/13/86。
 * 🔴 **本段在共享层但全部选择器带 `.lg-c`** —— 商家端登录页是 `.login`（无 lg-c），互不影响。
 * 🔴 **令牌化是硬需求**：precheck 的「客户端层硬编码色」判据只扫 JS（CLIENT_FILES），
 *   client/views/auth.js 的插画 SVG 每个颜色都写成 var(--lgp-*)；令牌缺失 ⇒ SVG 取不到色。
 * 🔴 **渐变文字陷阱**：background-clip:text 不生效时若已写 color:transparent ⇒ 文字整块消失。
 *   故先声明回退色，只在 @supports 命中时才透明化。 */
.shell.hc-c,.hc-modal,.login.lg-c{
  /* ── 登录页私有令牌（2026-10-16）──
   * 🔴 挂在**共用作用域**而不是 `.login.lg-c` 独占：cross-end-isolation-smoke 的
   *   「令牌入口」守卫钉的就是这一条 —— 客户端令牌块必须同时覆盖 shell / 弹层 / 登录页，
   *   否则登录页引用到的 var() 会解析失败（整块样式塌回浏览器默认）。
   * 前缀 `--lgp-*`（login page）保证不会与既有令牌冲突，也不会漏进商家端。 */
  /* —— 页面基调 —— */
  --lgp-canvas:#FFFFFF; --lgp-white:#FFFFFF;
  /* —— 标题：取自参考页标题 SVG 的两个 linearGradient（自下而上） —— */
  --lgp-ttl-a:#4C2500; --lgp-ttl-b:#802400;
  --lgp-sub-a:#603004; --lgp-sub-b:#9E5F00;
  /* —— 交互色：主行动黄直接复用项目令牌（方案 B「黄即行动」），跟随主题自动一致 —— */
  --lgp-yellow:var(--pri-action); --lgp-yellow-d:var(--pri-action-press); --lgp-ink:#222;
  --lgp-accent:#FF6000; --lgp-line:#EEE; --lgp-hover:#F5F5F5;
  --lgp-hover-weak:#FAFAFA;
  --lgp-err-bg:#FCE9EE; --lgp-err-bd:#F5C6D0; --lgp-err-ink:#C22643;
  /* —— 插画：笔记本外壳/内屏/键盘 三组渐变 —— */
  --lgp-shell-a:#F2F6FC; --lgp-shell-b:#DCE5F1;
  --lgp-in-a:#FFFFFF;   --lgp-in-b:#E9F0FA;
  --lgp-deck-a:#F5F8FC; --lgp-deck-b:#DCE5F0;
  --lgp-shadow:#8CA6C6; --lgp-beam:#D4E5FB;
  /* —— 插画：纸箱（顶/右/左 三个受光面） —— */
  --lgp-box-t:#DCE9FC; --lgp-box-r:#BDD4F6; --lgp-box-l:#A2C1EE;
  --lgp-ybox-t:#FFE9A8; --lgp-ybox-r:#F3CF6E; --lgp-ybox-l:#E2BA52;
  /* —— 插画：打印纸堆（顶/右/左） —— */
  --lgp-ream-t:#FFFFFF; --lgp-ream-r:#E7EDF5; --lgp-ream-l:#D5DFEA;
  /* —— 插画：键盘面厚度/侧面/键帽/触控板 —— */
  --lgp-deck-edge:#C6D3E4; --lgp-deck-side:#B7C6DA; --lgp-key:#D2DDEB;
  --lgp-pad:#FBFDFF; --lgp-pad-line:#D6E0EC;
  /* —— 插画：屏幕边/厚度/内屏边 —— */
  --lgp-screen-thick:#C2D0E2; --lgp-screen-edge:#C9D6E6; --lgp-inner-edge:#CDD9EA;
  /* —— 插画：屏内 UI（顶栏/图标/色块/文字线/主行动块） —— */
  --lgp-ui-bar:#CFDFF4; --lgp-ui-dot:#7FA8E6; --lgp-ui-chip:#B7CCEA;
  --lgp-ui-t1:#A8C6F0; --lgp-ui-t2:#C9DCF7; --lgp-ui-l1:#BDCCDE; --lgp-ui-l2:#D2DCE8;
  /* —— 插画：文件夹（封面 t / 右侧 r / 底面 d / 左侧 l） —— */
  --lgp-fd-t:#6FA3EC; --lgp-fd-r:#4A87E0; --lgp-fd-d:#2F73D6; --lgp-fd-l:#1F5CBB;
  /* —— 插画：悬浮订单卡 + 完成勾 —— */
  --lgp-card-sh:#B9CBE2; --lgp-card-ln:#E2EAF4; --lgp-card-l1:#C2CFDF;
  --lgp-card-l2:#DBE3ED; --lgp-card-l3:#E9EEF5;
  --lgp-ok-bg:#E6F4EA; --lgp-ok:#31A24C;
}
.login.lg-c{position:fixed;inset:0;overflow:auto;background:var(--lgp-canvas);color:var(--lgp-ink)}
/* 背景光晕：左上暖、右下淡冷（对应参考页整页背景的氛围） */
.login.lg-c .lgp-bg{position:absolute;inset:0;
  background:
    radial-gradient(720px 620px at 4% 2%, rgba(255,249,236,.9) 0%, rgba(255,249,236,0) 62%),
    radial-gradient(560px 520px at 0% 96%, rgba(255,244,241,.8) 0%, rgba(255,244,241,0) 60%),
    linear-gradient(180deg,#fff 0%,#FDFEFF 70%,#F8FAFD 100%);}
/* 顶栏（实测高 76 / padding 0 24） */
.login.lg-c .lgp-top{position:relative;z-index:2;height:76px;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between}
.login.lg-c .lgp-brand{display:flex;align-items:center;height:76px;gap:7px}
.login.lg-c .lgp-logo{width:36px;height:36px;border-radius:9px;background:var(--lgp-yellow);color:var(--lgp-ink);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.login.lg-c .lgp-brand-name{font-size:17px;font-weight:600;color:var(--lgp-ink)}
.login.lg-c .lgp-nav{display:flex;align-items:center;height:76px}
.login.lg-c .lgp-nav a{display:flex;align-items:center;height:30px;padding:0 10px;border-radius:15px;
  font-size:16px;color:#333;text-decoration:none;transition:background .16s}
.login.lg-c .lgp-nav a:hover{background:var(--lgp-hover)}
/* 主体：左插画 + 右列（实测右列 x773 w432，右侧留白 235） */
/* 🔴 用 `align-items:flex-start` + 子项 `margin:auto`（而非 align-items:center）——
 *   flex 居中在**内容高于容器**时会同时溢出上下两端，顶部永远滚不到，
 *   表现为「顶栏被顶飞 / 底部内容看不见」。auto margin 在空间不足时退化为 0，只从顶部排。 */
.login.lg-c .lgp-main{position:relative;z-index:1;display:flex;align-items:flex-start;
  min-height:calc(100vh - 76px);padding:0 235px 0 24px}
.login.lg-c .lgp-art{flex:1 1 auto;min-width:0;display:flex;justify-content:center;
  margin-top:auto;margin-bottom:auto}
.login.lg-c .lgp-art svg{width:100%;max-width:740px;height:auto;display:block}
.login.lg-c .lgp-col{flex:0 0 432px;width:432px;margin-top:auto;margin-bottom:auto}
/* 标题（颜色取自参考页 SVG 的渐变，副标题字距显著加宽） */
.login.lg-c .lgp-head h1{font-size:40px;line-height:1.3;font-weight:700;letter-spacing:-1px;
  color:var(--lgp-ttl-a);background:linear-gradient(0deg,var(--lgp-ttl-a) 0%,var(--lgp-ttl-b) 100%);
  -webkit-background-clip:text;background-clip:text}
.login.lg-c .lgp-head p{margin:14px 0 0;font-size:17px;line-height:1.8;font-weight:400;letter-spacing:.18em;
  color:var(--lgp-sub-a);background:linear-gradient(0deg,var(--lgp-sub-a) 0%,var(--lgp-sub-b) 100%);
  -webkit-background-clip:text;background-clip:text}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .login.lg-c .lgp-head h1,.login.lg-c .lgp-head p{color:transparent}
}
/* 登录卡（实测 432×512 圆角 20 + 极浅扩散阴影）
 * 🔴 用 min-height 而非 height：内容（错误提示等）变多时不裁切，矮屏也能自然增高；
 *   900 高屏下仍精确落在实测的 512。 */
.login.lg-c .lgp-card{margin-top:28px;width:432px;height:auto;min-height:512px;background:var(--lgp-white);
  border-radius:20px;box-shadow:0 0 10px 2px rgba(0,0,0,.05);padding:32px 38px;box-sizing:border-box}
/* Tab（item 18px · 间距 48 · 下划条高 4 圆角 2） */
.login.lg-c .lgp-tabs{display:flex;height:38px}
.login.lg-c .lgp-tab{font-size:18px;line-height:18px;font-weight:400;color:#666;
  padding-bottom:8px;margin-right:48px;position:relative}
.login.lg-c .lgp-tab.on{font-weight:500;color:var(--lgp-ink)}
.login.lg-c .lgp-tab.on::after{content:"";display:block;margin-top:8px;height:4px;
  border-radius:2px;background:var(--lgp-yellow)}
/* 行式表单（实测行高 60 + 底边 1px #eee；label 14px #666） */
.login.lg-c .lgp-row{display:flex;align-items:center;height:60px;border-bottom:1px solid var(--lgp-line)}
.login.lg-c .lgp-row:first-child{margin-top:20px}
/* 🔴【2026-10-16 掌柜报「鼠标一进输入区就看不见鼠标」· 实测取证后的交互修复】
 *   先说结论：**这不是 CSS 遮罩或 cursor:none**。真浏览器 CDP 取证（`probe-cursor.js`）：
 *     · 该区域 5 个采样点 `elementFromPoint` 全部命中真实 `INPUT`（无任何透明层覆盖）；
 *     · 全仓 `cursor:none` **零命中**；`z-index≥500` 的浮层矩形**零覆盖**；
 *     · input 的 computed `cursor = text` —— 光标是**Windows 系统 I 型文本光标**，
 *       不是被藏起来，而是**太细**（1px 竖线）叠在 336px 宽的白卡上、且该行高 60px 空旷，
 *       缺少「鼠标在这」的视觉落点 ⇒ 眼睛找不到它。
 *   页面能做的正解（不依赖系统光标形态）：
 *   ① **hover 反馈**：原先**完全没有** `:hover` 规则 —— 鼠标移入到未聚焦期间，
 *      整行与「未聚焦态」像素级相同 ⇒ 视觉上「鼠标消失」。现补：底线由 `#EEE` 加深到
 *      `#D8D8D8` + label 由 `#666` 提亮到 `#555`，让光标位置有落点。
 *   ② **焦点反馈**（上一轮已做）：底线变主色黄 + label 提亮。hover 与 focus 梯度必须
 *      可区分，否则「悬停」与「已聚焦」看起来一样 ⇒ 梯度 = 灰 → 黄。
 *   ③ **左内边距**：实测 input `padding: 0px` ⇒ 文字**紧贴**「账号」标签（实测 label 右缘 263
 *      正是 input 左缘），点击位置不可预期。补 12px 左内边距，文字与标签之间有呼吸。
 *   作用域必须 `.lg-c`（商家端登录页是 `.login`，其 `.input:focus` 是品牌蓝圆角框）。 */
.login.lg-c .lgp-row{display:flex;align-items:center;height:60px;border-bottom:1px solid var(--lgp-line);
  position:relative;transition:border-color .12s ease}
/* 🔴【2026-10-16 掌柜第二次报「鼠标放在哪一行都分不清」· 实测驱动的加强】
 *   上轮只把 hover 底线从 `#EEE` 加深到 `#D8D8D8` —— 实测值差 **8 级灰**（238→216），
 *   在纯白卡上肉眼几乎看不出 ⇒ 掌柜仍「分不清在账号框还是密码框」。
 *   本轮把 hover 信号加强到**肉眼可辨**，且**不靠颜色单一通道**：
 *   ① 底线加深到 `#C9C9C9`（238→201，差 37 级）+ **加粗到 2px**（尺寸通道，颜色失效也看得出）；
 *   ② 整行加**极浅底色** `#FAFAFA`（面积通道）；
 *   ③ label 提亮到 `#444`。
 *   三通道并存的理由：掌柜的光标「时好时坏、登录页最严重」，说明光标本身不可靠
 *   （疑似驱动/硬件加速/缩放导致的绘制问题，非本页 CSS 缺陷）⇒ **界面必须能不依赖光标
 *   就让人知道鼠标在哪**。
 *   🔴 高度与内边距不可变（行高 60、padding 0 12px）⇒ 加粗底线只在底部**向内**长 1px，
 *   不会顶高整行、不会造成布局跳动（布局跳动在登录页是硬伤）。 */
.login.lg-c .lgp-row label{width:69px;flex:0 0 69px;font-size:14px;color:#666}
/* 🔴🔴 **层叠顺序纪律**：状态规则（`:hover` / `:focus-within`）必须排在**基础规则之后**。
 *   实测踩坑：初版把 `.lgp-row:hover label{color:#444}` 写在 1375 行，而基础
 *   `.lgp-row label{color:#666}` 在 1389 行 —— **同优先级下位置靠后者胜出**
 *   ⇒ hover 时 label 颜色**根本没变**（实测 base=hover=`rgb(102,102,102)`）。
 *   这类失效**不会报错、门禁与截图也看不出来**，只有真浏览器读 computed 才发现。
 *   故下方把三个状态块**统一移到基础规则之后**，且每块都写明它必须在此处之后。 */
.login.lg-c .lgp-row:hover{border-bottom-color:#C9C9C9;border-bottom-width:2px;background:var(--lgp-hover-weak)}
.login.lg-c .lgp-row:hover label{color:#444}
/* 悬停时的光标替代提示：行首一个小三角，标示「这一行是输入区」
 * （不依赖系统光标颜色/形状也能定位）。用 border 画，无需图片资源。 */
.login.lg-c .lgp-row:hover::before{content:"";position:absolute;left:-14px;top:50%;
  width:0;height:0;margin-top:-5px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:6px solid var(--lgp-yellow)}
/* 聚焦态与悬停态**同样加粗**，否则「已聚焦」会比「仅悬停」显得更弱 —— 层级反了。
 *   聚焦的区分靠**颜色**（主色黄）而非粗细：黄 vs 灰在白底上对比强烈。
 *   三角改墨黑：聚焦是更强的状态，标记也应更强。 */
.login.lg-c .lgp-row:focus-within{border-bottom-width:2px}
.login.lg-c .lgp-row:focus-within::before{content:"";position:absolute;left:-14px;top:50%;
  width:0;height:0;margin-top:-5px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:6px solid var(--lgp-ink)}
/* 光标形态显式声明（实测 computed 本就是 text，写出来是为了「意图可读」+ 防止将来
   被共享层的某个 cursor 规则改掉）。整行 label 区也是文本录入的一部分，
   一并给 text —— 否则鼠标从 input 移到 label 上会突变成箭头，读起来像「界面卡住了」。 */
.login.lg-c .lgp-row input,.login.lg-c .lgp-row label{cursor:text}
.login.lg-c .lgp-row input{flex:1;min-width:0;height:100%;border:0;outline:none;background:transparent;
  padding:0 0 0 12px;   /* 🔴 实测原为 0px：文字紧贴 label（实测 label 右缘 = input 左缘）⇒ 点击位置不可预期 */
  font-family:inherit;font-size:14px;color:#000}
.login.lg-c .lgp-row input::placeholder{color:#BBB}
/* 🔴【2026-10-16 掌柜报「录入框底色是蓝色块」】根因 = **浏览器自动填充高亮**，不是我们的样式：
 *   ① 本页给账号/密码写了 autocomplete="username" / "current-password"（为回车提交 + 密码管理器），
 *      Chrome/Edge 一旦认出该站点的账号密码，就由 **UA 样式表**给输入框加一层淡蓝底 + 改文字色；
 *   ② UA 样式优先级**高于**作者声明的普通声明 ⇒ 我们写的 `background:transparent` 盖不住它
 *      （真浏览器实测：未填充态 `backgroundColor = rgba(0,0,0,0)` 透明，而掌柜看到的是蓝块）；
 *   ③ 页面里没有任何规则命中它 —— 这两个 input 是**裸标签**（无 `.input`），实测 class 为空。
 * 压掉方式（标准三件套，缺一条就失效）：
 *   -webkit-text-fill-color  恢复文字色（只写 background 时填充后文字仍会变浅）
 *   box-shadow:inset 0 0 0 1000px  用**内阴影**把 UA 那层底刷掉 —— 比 background 可靠，
 *              因为它画在 UA 填充层之下、不受 transition 干扰；
 *   transition  超长时长的 background-color —— Chrome 只在**值变化那一刻**重绘高亮，
 *              把这次重绘推迟到用户离开页面之后（否则加载瞬间会闪一下蓝）。
 * 🔴 作用域必须带 `.lg-c`：商家端登录页是 `.login`（无 lg-c），且它的 `.input:focus`
 *   是品牌蓝圆角框 —— 一旦漏作用域，两端会一起变色。 */
/* 焦点反馈（原先**完全缺失**：点进输入框看不出焦点在哪）。做法克制 —— 只把底部线换成主色、
 * label 提亮，不加边框、不改底色，与参考页 focus 行为一致。 */
.login.lg-c .lgp-row:focus-within{border-bottom-color:var(--lgp-yellow)}
.login.lg-c .lgp-row:focus-within label{color:var(--lgp-ink)}
.login.lg-c .lgp-row input:-webkit-autofill,
.login.lg-c .lgp-row input:-webkit-autofill:hover,
.login.lg-c .lgp-row input:-webkit-autofill:focus,
.login.lg-c .lgp-row input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--lgp-ink);
  box-shadow:0 0 0 1000px var(--lgp-white) inset;
  caret-color:var(--lgp-ink);
  transition:background-color 100000s ease-out 0s;
}
/* 协议行（实测 margin 42/13 · 文字 #999 · 链接 #FF6000） */
.login.lg-c .lgp-protocol{margin:42px 0 13px;display:flex;align-items:center;gap:8px;
  height:24px;font-size:14px;color:#999;line-height:1}
.login.lg-c .lgp-ck{width:16px;height:16px;flex:0 0 16px;display:flex;align-items:center;justify-content:center}
.login.lg-c .lgp-ck i{position:relative;width:14px;height:14px;border-radius:2px;background:var(--lgp-yellow)}
.login.lg-c .lgp-ck i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:2px solid var(--lgp-ink);border-top:0;border-left:0;transform:rotate(40deg)}
.login.lg-c .lgp-protocol a{color:var(--lgp-accent);text-decoration:none}
.login.lg-c .lgp-protocol a:hover{text-decoration:underline}
/* 主按钮（实测 356×40 圆角 4 bg #FFD100 字 #222/500/14px） */
.login.lg-c .lgp-btn{width:100%;height:40px;border:0;border-radius:4px;background:var(--lgp-yellow);
  color:var(--lgp-ink);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;
  transition:background .15s,transform .08s}
.login.lg-c .lgp-btn:hover{background:#F5C800}
.login.lg-c .lgp-btn:active{transform:scale(.995)}
.login.lg-c .lgp-btn:disabled{opacity:.7;cursor:default;transform:none}
/* 错误提示（覆盖旧版式残留值；文案来源见 render.js 的 __hcLoginErr） */
.login.lg-c .lg-err{margin:12px 0 0;padding:9px 11px;border-radius:4px;
  background:var(--lgp-err-bg);border:1px solid var(--lgp-err-bd);color:var(--lgp-err-ink);
  font-size:12.5px;line-height:1.5}
/* 底部引导（实测距按钮 86 + padding-top 10） */
.login.lg-c .lgp-bottom{margin-top:86px;padding-top:10px;display:flex;justify-content:center;
  align-items:center;font-size:14px;line-height:14px;color:#666}
.login.lg-c .lgp-bottom a{color:var(--lgp-accent);text-decoration:none}
.login.lg-c .lgp-bottom a:hover{text-decoration:underline}
/* 版权（列内居中） */
.login.lg-c .lgp-foot{margin:52px 0 0;text-align:center;font-size:14px;color:#666}
/* 登录条件说明：把这三条「会登不上的情况」摆出来（部门制度那批闸门的用户侧解释） */
.login.lg-c .lgp-note{margin:14px 0 0;text-align:center;font-size:12px;line-height:1.6;color:#999}
/* ---------- 响应式：断点沿用项目既有档位（1080 / 560） ----------
 * 🔴 1366 是「两侧仍放得下」的临界：实测布局要求 24+740+432+235=1431，
 *   1366 屏放不下 ⇒ 先收右留白、再收右列宽，最后才隐藏插画。 */
/* ---------- 响应式：只用项目既有档位（1080 / 560 与白名单的 1366） ----------
 * 🔴 曾加过 `max-width:1431px` 与 `max-height:800px` 两个**自造档位**，被
 *   responsive-breakpoint-smoke 判为「口径碎片化」⇒ 已撤除：横向改由既有 1366 档承接；
 *   纵向（1366×768 等笔记本）改由卡片的 min-height + auto 高度自然增高，
 *   版权行落在首屏之外时页面可滚动（与参考页同样处理）。 */
@media (max-width:1366px){
  .login.lg-c .lgp-main{padding-right:32px}
  .login.lg-c .lgp-col{flex:0 0 400px;width:400px}
  .login.lg-c .lgp-card{width:400px;padding:28px 32px}
}
@media (max-width:1080px){
  .login.lg-c .lgp-art{display:none}
  .login.lg-c .lgp-main{padding:0 24px;justify-content:center}
  .login.lg-c .lgp-col{flex:0 1 432px;width:100%;max-width:432px}
  .login.lg-c .lgp-head{text-align:center}
  .login.lg-c .lgp-foot{text-align:center}
}
@media (max-width:560px){
  .login.lg-c .lgp-top{padding:0 16px}
  .login.lg-c .lgp-main{padding:0 16px 32px}
  .login.lg-c .lgp-col{flex:0 1 auto;width:100%;max-width:none}
  .login.lg-c .lgp-card{width:100%;padding:24px 20px}
  .login.lg-c .lgp-head h1{font-size:30px}
  .login.lg-c .lgp-head p{font-size:15px;letter-spacing:.1em}
  .login.lg-c .lgp-bottom{margin-top:40px}
}
/* ---------- 13. 目录页视口布局收口（page-head 恢复显示，替代隐藏式设计） ---------- */
@media (min-width:1081px){
  .shell.hc-cat-page .content{padding:26px 48px 24px;display:flex;flex-direction:column;overflow:hidden}
  .shell.hc-cat-page .page-head{display:flex}
  .shell.hc-cat-page .nt-bar{flex:0 0 auto;box-shadow:none;margin:0 0 14px}
  .shell.hc-cat-page .cat-flex{flex:1 1 auto;min-height:0;overflow:hidden;align-items:stretch}
  .shell.hc-cat-page .cat-tree{position:static;top:auto;height:auto;max-height:none;overflow-y:auto;overflow-x:hidden}
  .shell.hc-cat-page .cat-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .shell.hc-cat-page .toolbar{flex:0 0 auto;margin-bottom:12px}
  .shell.hc-cat-page .cat2bar{flex:0 0 auto}
  .shell.hc-cat-page .tbl-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:var(--pad-card)}
  .shell.hc-cat-page .tbl-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--pad-tight)}
  .shell.hc-cat-page .tbl-foot{flex:0 0 auto}
  .shell.hc-cat-page .pg-bar{flex:0 0 auto}
  .shell.hc-cat-page .rule-tip{flex:0 0 auto;margin-top:12px}
}
/* ============================================================
 * 客户端目录页 · 布局稳定性修复（2026-09-13）
 * 掌柜反馈：切换一级分类时页面上下闪动、最顶部黑色导航栏变高变窄。
 * 实测根因三处：
 *   1) .c-top 是 .shell（纵向 flex）的子项，默认 flex-shrink:1；而 .content 的
 *      flex-basis 是 auto（由内容撑高）。内容一长就产生"欠账"，欠账按基准尺寸
 *      比例摊到各子项 → 顶栏被压到 min-content（56px → 实测 34.8px），
 *      且压缩量随内容高度变化 → 顶栏高度跳变 + 整页上下闪动。
 *   2) .tbl-scroll / .cat-tree 的滚动条"出现/消失"会改变可用宽度，表格列随之
 *      重排 → 视觉上"变宽变窄"。
 *   3) 分页条页码区（‹ 1 2 3 ›）在只有一页时不渲染；且 .pg-n 未纳入客户端尺寸
 *      体系（36px，比其他控件 34px 高），分页条高度在 49 / 51 之间跳。
 * 修复：顶栏退出收缩；.main/.content 改为按剩余空间定高（basis 0）；滚动条槽位
 *      常驻；页码区恒常渲染并把分页控件统一到 32px，分页条定高 56px。
 * ============================================================ */
.shell.hc-c .c-top{flex:0 0 auto;min-height:56px}
.shell.hc-c .main{flex:1 1 0}
.shell.hc-c .content{flex:1 1 0}
.shell.hc-c .tbl-scroll,.shell.hc-c .cat-tree{scrollbar-gutter:stable}
.shell.hc-c .pg-n{min-width:28px;height:28px;border-radius:999px;font-size:12px;font-weight:500;
  padding:0 8px;border-color:var(--line);color:var(--t3);box-shadow:none}
.shell.hc-c .pg-n:hover:not(:disabled){border-color:var(--pri);color:var(--pri)}
.shell.hc-c .pg-n.on{background:var(--pri-action);border-color:var(--pri-action);color:var(--on-action);font-weight:600;opacity:1}
.shell.hc-c .pg-info,.shell.hc-c .pg-size{font-size:12px;color:var(--t5)}
.shell.hc-c .pg-go{height:32px;font-size:12px;font-weight:500;border-radius:999px;padding:0 12px;
  border-color:var(--line);color:var(--t2)}
@media (min-width:1081px){
  .shell.hc-cat-page .content{flex:1 1 0}
  .shell.hc-cat-page .cat-tree{min-height:0}
  /* 🔴 目录页分页条**不锁单行**（2026-10-01 全局布局排查第二轮）。
   * 1081~1360px 区间右栏（.cat-main）最窄只剩 ~520px，而分页条四段内容
   * （页码区 318 + 共N条 63 + 每页条数 149 + 跳转 160 + gap）共需 ~745px ——
   * 锁 nowrap 会撑破 .tbl-wrap（overflow:hidden）→ 右侧最多 **221px 被静默裁掉**。
   * 这里**删掉 nowrap**，恢复 .pg-bar 基础定义的 flex-wrap:wrap：窄容器自动折两行（内容完整）。
   * 高度变化不会连带顶栏抖动 —— 顶栏已在 2026-09-13 退出 flex 收缩（见 .c-top{flex:0 0 auto;min-height:56px}）。 */
}
/* 二级分类筛选条 · 定高（2026-09-13）
 * 恒常渲染 + 单行 + 左右箭头滚动：高度恒定，chip 再多也不换行、不撑高，
 * 因此切换一级分类时下方表格与分页条不再上下位移。
 * 横向滚动条隐藏（由左右箭头承担滚动），避免滚动条出现/消失再带来宽度抖动。
 * 2026-09-19 高度 32 → 34：chip 本体就是 32px，原容器同为 32px 属**零余量**，
 * 任何边框 / 亚像素舍入都会被 overflow:hidden 削掉边缘 1px。改为「留 2px」，
 * 与 .tagbar（容器 28 / chip 26）松紧度**成对一致** —— 两条一紧一松会显得不成套。 */
.shell.hc-c .cat2bar{display:flex;align-items:center;gap:8px;height:34px;flex:0 0 auto;
  flex-wrap:nowrap;overflow:hidden;overflow:clip;overflow-clip-margin:6px;margin-bottom:12px}
.shell.hc-c .cat2bar .lb{flex:0 0 auto}
.shell.hc-c .cat2-scroll{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.shell.hc-c .cat2-scroll::-webkit-scrollbar{display:none}
.shell.hc-c .cat2-scroll .cat2chip{flex:0 0 auto}
.shell.hc-c .cat2-hint{font-size:12px;color:var(--t5);white-space:nowrap}
/* ============================================================
 * 分页组件 · 尺寸重做（2026-09-13 · 掌柜反馈"按钮/圆圈太小、交互不方便"）
 * 定位：分页是列表页点击频次最高的控件之一，不能按"紧凑数据区"的尺度做。
 * 尺度：页码圆形 38px（原 28px，+36%），与工具条的搜索框/下拉同级（40px 档），
 *       字形 15px（翻页箭头 18px），分页条定高 70px —— 仍保持前一轮的"定高"约束，
 *       切换分类时该条高度与位置依旧完全不动。
 * 形态：默认无边框、透明底（去掉一排小方框的噪音，视觉更"大气"）；
 *       悬停 → 浅灰圆底；当前页 → 实心强调色圆底 + 白字，一眼可辨当前位置。
 * ============================================================ */
.shell.hc-c .pg-bar{display:flex;align-items:center;gap:10px;box-sizing:border-box;
  min-height:70px;padding:16px 20px;font-size:13px;color:var(--t3)}
.shell.hc-c .pg-pages{display:flex;align-items:center;gap:10px;min-height:38px}
.shell.hc-c .pg-n{min-width:38px;height:38px;border-radius:999px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:500;line-height:1;color:var(--t2);
  background:transparent;border:1px solid transparent;box-shadow:none;cursor:pointer;
  transition:background .14s,color .14s,border-color .14s}
.shell.hc-c .pg-n:hover:not(:disabled){background:var(--sf);color:var(--ink)}
.shell.hc-c .pg-n:active:not(:disabled){background:var(--bd)}
.shell.hc-c .pg-n:disabled{opacity:.30;cursor:not-allowed;background:transparent}
.shell.hc-c .pg-n.arw{font-size:18px;padding:0}
.shell.hc-c .pg-n.on{background:var(--pri-action);border-color:var(--pri-action);color:var(--on-action);font-weight:600}
.shell.hc-c .pg-n.on:disabled{opacity:1;background:var(--pri-action);border-color:var(--pri-action);color:var(--on-action)}
.shell.hc-c .pg-ell{min-width:20px;text-align:center;font-size:14px;color:var(--t5);padding:0 2px}
.shell.hc-c .pg-info{font-size:13px;color:var(--t3);margin-left:6px;white-space:nowrap}
.shell.hc-c .pg-info b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.shell.hc-c .pg-size{font-size:13px;color:var(--t3)}
.shell.hc-c .pg-size select{height:38px;font-size:13px;border-radius:999px;
  border-color:var(--line);padding:0 32px 0 14px;color:var(--t2)}
.shell.hc-c .pg-jump{font-size:13px;color:var(--t3)}
.shell.hc-c .pg-inp{height:38px;width:58px;font-size:14px;border-radius:999px;
  border-color:var(--line2);padding:0 6px}
.shell.hc-c .pg-go{height:38px;font-size:13px;font-weight:500;border-radius:999px;
  padding:0 18px;background:#fff;border:1px solid var(--line);color:var(--t2);
  transition:border-color .14s,color .14s,background .14s}
.shell.hc-c .pg-go:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-weak)}
/* ============================================================
 * 客户端「业务范围」模块卡片条（2026-09-13 重做：胶囊 → 卡片）
 * 目的：业务范围是「模块入口」（商家配置的一组一级分类），必须与下方两层
 *   一级分类导轨（面板内白底行 · 圆角 10 · 高 40 · 一行）
 *   二级分类 chip（胶囊 · 圆角 999 · 高 32 · 一词）
 * 在形状 / 体量 / 信息量三处同时区分开，客户一眼看得出自己在哪一层。
 * 卡片 = 圆角 14 · 高 64 · 两行：范围名 + 计数 ｜ 内含一级分类预览（最多 3 个 + 等）。
 * 定高约束：.nt-bar 恒 66px、卡片恒 64px；横向滚动条隐藏（改用左右箭头滚动），
 * 因此卡片条高度不随「卡片数量 / 是否溢出」变化，不重新引入切换抖动。
 * ============================================================ */
.shell.hc-c .nt-bar{height:66px;align-items:center;gap:10px}
.shell.hc-c .nt-row{height:66px;gap:10px;padding:0;align-items:center;
  scrollbar-width:none;-ms-overflow-style:none}
.shell.hc-c .nt-row::-webkit-scrollbar{display:none}
.shell.hc-c .nt-mod{position:relative;display:flex;align-items:center;gap:8px;
  flex:0 0 auto;box-sizing:border-box;height:52px;min-width:96px;padding:var(--pad-card) 16px;border-radius:14px;
  background:#fff;border:1px solid var(--line);cursor:pointer;text-align:left;overflow:hidden;
  font-family:inherit;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
/* 卡片左侧页签图标：已上传用图片，未上传为四宫格占位（svg 走 currentColor）；
 * 选中态翻成白底 + 主色，与卡片整体的 pri-weak 底形成层次。 */
.shell.hc-c .nt-mod-ic{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;overflow:hidden;background:var(--sf);color:var(--t5);flex-shrink:0}
.shell.hc-c .nt-mod-ic img{width:100%;height:100%;object-fit:cover;display:block}
.shell.hc-c .nt-mod-ic svg{width:15px;height:15px}
.shell.hc-c .nt-mod.on .nt-mod-ic{background:#fff;color:var(--pri)}
.shell.hc-c .nt-mod:hover{border-color:var(--pri-200);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.shell.hc-c .nt-mod:active{transform:translateY(1px)}
.shell.hc-c .nt-mod-top{display:flex;align-items:center;gap:8px;min-width:0}
.shell.hc-c .nt-mod-n{font-size:15px;font-weight:600;color:var(--ink);line-height:1.25;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-c .nt-mod.on{background:var(--pri-weak);border-color:var(--pri)}
.shell.hc-c .nt-mod.on .nt-mod-n{color:var(--pri-600)}
.shell.hc-c .nt-mod.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pri)}
.shell.hc-c .nt-mod:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.cats3 .cats-col > .card-title{flex:0 0 auto}
/* 列表行：操作默认隐藏，悬停/聚焦整行时以浮层覆盖右侧（不引发回流，名称宽度不跳） */
.cats3 .cat-it{position:relative}
.cats3 .cat-it .ci-ops{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:none;align-items:center;gap:8px;padding-left:16px;border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 16px)}
.cats3 .cat-it.on .ci-ops{background:linear-gradient(90deg,rgba(234,242,254,0),var(--pri-weak) 16px)}
.cats3 .cat-it:hover .ci-ops,.cats3 .cat-it:focus-within .ci-ops{display:inline-flex}
/* 右栏页签（沿用商家端既有 .detail-tabs 语法，仅在栏内收紧间距） */
.cats3 .detail-tabs{margin:10px 0 0;gap:2px;flex:0 0 auto}
.cats3 .detail-tabs button{font-size:13px;padding:9px 14px;display:inline-flex;align-items:center;gap:6px;background:transparent}
@media (max-width:1366px){
  .cats3{grid-template-columns:260px minmax(0,1fr)}
  .cats3 .cats-col:nth-child(3){grid-column:1 / -1;max-height:none}
}
@media (max-width:900px){
  .cats3{grid-template-columns:minmax(0,1fr)}
  .cats3 .cats-col{max-height:none;min-height:0}
  .cats3 .cats-col:nth-child(3){grid-column:auto}
}
/* ============================================================
 * 分类管理 · 拖动排序「动效版」（2026-09-13 二版）
 * 掌柜反馈：只给一条落点横杠，一疏忽就不知道手上拖的是哪一行。
 * 因此补齐三件事：
 *   1) 拖影 .cat-ghost —— 抓住的那一行整行"抬起来"跟光标走（阴影 + 微放大），
 *      跟手用 rAF 插值（LERP=.45），有轻微重量感；"我拖的是谁"从此一眼可见。
 *   2) 空位 .cat-it.dragging —— 原位置留一个灰色虚线空框、内容淡出到 30%，
 *      明确"这里腾出来了、松手会落到别处"；高度不变，所以其他行不会跳动。
 *   3) 落点横杠 .cat-drop-line —— 从「给目标行挂伪元素」改为「列表内独立元素」，
 *      靠 transform 位移 + transition 在行间**平滑滑动**（旧版是硬跳），
 *      两端各一个锚点圆点。用 offsetTop(内容坐标) 定位，滚动时不漂移。
 * 另：松手时拖影"飞"向落点并淡出，落位行有一次轻微回弹，衔接不突兀。
 * 注意：拖影挂在 body 上（不在 .cats3 内），靠的是顶层基础类 .cat-it / .ci-*；
 *      .cats3 作用域内才有的规则（隐藏 .ci-ops）必须在 .cat-ghost 下补一份。
 * ============================================================ */
.cats3 .cat-it{cursor:grab;user-select:none;-webkit-user-select:none}
.cats3 .cat-it:active{cursor:grabbing}
/* 空位：原行留在列表里当占位，内容淡出、边框转灰虚线（覆盖选中态配色，确保一眼看出是"空位"） */
.cats3 .cat-it.dragging{border-style:dashed;border-color:var(--line2);background:var(--sf);box-shadow:none}
.cats3 .cat-it.dragging > *{opacity:.30}
/* 拖影 */
.cat-ghost{position:fixed;left:0;top:0;margin:0;box-sizing:border-box;z-index:9999;
  pointer-events:none;cursor:grabbing;will-change:transform;transform-origin:50% 50%;
  border-color:var(--pri-200);box-shadow:0 16px 36px rgba(0,0,0,.20),0 4px 10px rgba(0,0,0,.10);
  animation:catGhostIn .16s ease-out}
@keyframes catGhostIn{from{box-shadow:0 0 0 rgba(0,0,0,0)}}
.cats3 .cat-drop-line.on{opacity:1}
/* 落位回弹（只动 transform 与 box-shadow，不碰 background，避免与选中态配色打架） */
@keyframes catDropIn{
  0%{transform:scale(.99);box-shadow:0 0 0 2px var(--pri-100),0 10px 24px rgba(0,102,204,.18)}
  55%{transform:scale(1.006)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,102,204,0)}
}
.cats3 .cat-it.cat-drop-in{animation:catDropIn .42s cubic-bezier(.2,.7,.3,1)}
body.cat-dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
body.cat-dragging .cats3 .cat-it{cursor:grabbing}
body.cat-dragging .cats3 .cat-it .ci-ops{display:none}
/* ============================================================
 * 客户端 · B2C 配色落地（2026-09-18 方案 B · 黄即行动）
 * 作用域 .shell.hc-c —— 只追加覆盖、不改全局规则：价格与加购按钮的全局规则商家端也在引用。
 * 边界：红只给「价格 / 优惠标签」；所有实心控件走品牌黄 + 深字（--on-action）。
 * ============================================================ */
/* 价格统一为营销色（原 :1434 走蓝、:1448 走近黑，两种都不是 B2C 的阅读习惯） */
.shell.hc-c .reco-card .price,
.shell.hc-c .sim-price,
.shell.hc-c .sim-row .sr-price{color:var(--promo);font-weight:700}
/* 注：.cat-tbl .btn.sm.incart 是「已在购物车 N」的已完成态（10-client.js:388-391；
   不在购物车时才用 .btn.pri），属信息提示而非促单动作，故不随促单红走，保持中性白底＋蓝描边。
   「＋ 加入购物车」按钮用的是 .btn.pri，已随 --pri-action 自动转黄（深字），无需额外规则。 */
/* 主按钮投影：全局 :148 写死蓝 rgba(0,100,224,.26)，不改全局、只覆盖客户端 */
.shell.hc-c .btn.pri.sh{box-shadow:0 8px 18px rgba(232,188,32,.40)}
/* 售价与金额统一为营销红（2026-09-18 补漏）—— 原先分散在多处、且颜色不一：
 *   目录售价列 .tbl .num（10-client.js:408）、商品详情大价格 .price-line .p、购物车单价/小计、
 *   订单金额列 —— 都走 var(--ink) 近黑；购物车/订单合计 .cf-amt / .cd-sum-amt 走 var(--pri-600) 蓝。
 *   B2C 语境下「钱」应统一为一支暖色。注意 .num 在页面里只用于金额（数量列在 10-client.js:1350 是裸 <td>）；
 *   导出 PDF 的 exportOrderPDF 虽然也用 .num 渲染数量，但它不在 .shell.hc-c 内，不受影响。 */
.shell.hc-c .tbl .num,
.shell.hc-c .cd-amt .num,
.shell.hc-c .price-line .p,
.shell.hc-c .tbl-foot .cf-amt,
.shell.hc-c .cart-foot .cf-amt,
.shell.hc-c #cart-drawer .cd-sum-amt{color:var(--promo);font-weight:700}
/* 方案 B（黄即行动）：黄底必须配深字 —— 黄底白字仅 1.47:1，--on-action 为 12.9:1。
   .mc-day 的选中日是全局规则（:502，商家端也引用），故只能在此追加覆盖。 */
.shell.hc-c .mc-day.sel .mc-ink,
.shell.hc-c .mc-day.first-sel .mc-ink,
.shell.hc-c .mc-day.last-sel .mc-ink{color:var(--on-action)}
/* ============================================================
 * 商家端 · 商品管理设计系统层（2026-09-13 重构落地）
 * 作用域 .shell.hc-mprod —— 仅「商品管理」页生效，不污染其他商家端页面
 * 依据设计文件 725418223745636：
 *   01 列表主视图 / 02 批量选择与行内操作 / 03 商品编辑抽屉 /
 *   05 商品关联侧滑面板 / 设计系统规范（原 04 批量导入弹层已于 2026-09-16 删除）
 * 令牌：accent #0064E0 · ink #1D1D1F · ink-3 #6E6E73 · hairline #E4E7EC
 *       surface #F7F9FB · ok #1E8E3E · warn #B26A00 · err #D93025
 * 密度：侧边栏 232 · 顶栏 56 · 内容边距 24 · 卡片圆角 12 · 控件高 38 · 表格行高 52
 * ============================================================ */
.shell.hc-mprod{
  --ink:#1D1D1F; --t1:#1D1D1F; --t2:#333333; --t3:#6E6E73; --t4:#86868B; --t5:#A1A1A6;
  --line:#E4E7EC; --line2:#D2D2D7; --line3:#EDEDF0; --line4:#F0F0F0; --line5:#F0F0F2;
  --bd:#E4E7EC; --bd-strong:#CED0D4; --bd-soft:#EDEDF0;
  --canvas:#fff; --sf:#F7F9FB; --sf2:#FAFBFC; --surface:#F1F3F6;
  --pri:#0064E0; --pri-600:#0457CB; --pri-weak:#FFF6DA; --pri-100:#CFE2F7;
  --ok:#1E8E3E; --ok-weak:#EAF6EE; --ok-ink:#1E8E3E;
  --warn:#B26A00; --warn-weak:#FFF8EC; --warn-ink:#8A5200;
  --err:#D93025; --err-weak:#FDECEA; --err-ink:#C2261B;
}
/* 左右内距流体化（2026-10-13）：原为恒 24px，直到 ≤900 突降到 16px —— 两档之间没有过渡。
 * 2vw 在 1200px 视口恰为 24（与旧宽屏值一致），1000px 时为 20，≤900 仍由下面的媒体块接管 16。 */
.shell.hc-mprod .content{padding:22px clamp(16px,2vw,24px) 32px}
.shell.hc-mprod .content>.crumb{font-size:12px;color:var(--t5);margin-bottom:14px}
.shell.hc-mprod .mp-body{display:flex;flex-direction:column;gap:16px}
.shell.hc-mprod .num,.shell.hc-mprod .mp-pc,.shell.hc-mprod .mp-price{font-variant-numeric:tabular-nums}
/* ---------- 页头 ---------- */
.shell.hc-mprod .mp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.shell.hc-mprod .mp-title{font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.4px;line-height:1.2;margin:0}
.shell.hc-mprod .mp-sub{font-size:13px;color:var(--t3);line-height:1.5;margin-top:5px}
.shell.hc-mprod .mp-head-ops{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-top:2px}
/* ---------- 工具行 ---------- */
.shell.hc-mprod .mp-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.shell.hc-mprod .mp-seg{display:inline-flex;gap:4px;background:#ECEEF2;border-radius:999px;padding:4px;flex-shrink:0}
.shell.hc-mprod .mp-seg .it{height:32px;padding:0 14px;border:0;background:transparent;border-radius:999px;
  font-size:12px;font-weight:400;color:var(--t3);cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .14s,color .14s}
.shell.hc-mprod .mp-seg .it:hover{color:var(--ink)}
.shell.hc-mprod .mp-seg .it.on{background:#fff;color:var(--ink);font-weight:600}
.shell.hc-mprod .mp-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:#fff;
  border:1px solid var(--bd-strong);border-radius:999px;flex:1 1 260px;min-width:200px;transition:border-color .15s}
.shell.hc-mprod .mp-search:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-weak)}
.shell.hc-mprod .mp-search .ic{color:var(--t4);font-size:14px;flex-shrink:0}
.shell.hc-mprod .mp-search input{border:0;outline:0;background:none;width:100%;font-size:13px;color:var(--ink);font-family:inherit}
.shell.hc-mprod .mp-search input::placeholder{color:var(--t5)}
.shell.hc-mprod .mp-colbtn{width:40px;height:40px;flex-shrink:0;border:1px solid var(--bd-strong);background:#fff;
  border-radius:10px;color:var(--t3);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.shell.hc-mprod .mp-colbtn:hover{border-color:var(--pri);color:var(--pri)}
/* ---------- 筛选行 ---------- */
.shell.hc-mprod .mp-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shell.hc-mprod .mp-filters>.lb{font-size:12px;color:var(--t5);flex-shrink:0}
.shell.hc-mprod .mp-sel{position:relative;flex-shrink:0}
.shell.hc-mprod .mp-sel select{appearance:none;-webkit-appearance:none;height:34px;padding:0 30px 0 12px;
  border:1px solid var(--bd-strong);border-radius:10px;background:#fff;font-size:12px;color:var(--t2);
  cursor:pointer;outline:none;font-family:inherit;transition:border-color .15s}
.shell.hc-mprod .mp-sel select:hover{border-color:var(--pri-100)}
.shell.hc-mprod .mp-sel select:focus{border-color:var(--pri)}
.shell.hc-mprod .mp-sel::after{content:"⌄";position:absolute;right:11px;top:50%;transform:translateY(-56%);
  color:var(--t3);font-size:12px;pointer-events:none}
.shell.hc-mprod .mp-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;
  background:#FFF8EC;border:1px solid #F0DDBB;color:#8A5200;font-size:12px;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:.15s}
.shell.hc-mprod .mp-chip:hover{border-color:var(--warn)}
.shell.hc-mprod .mp-chip.on{background:var(--warn);border-color:var(--warn);color:#fff;font-weight:600}
.shell.hc-mprod .mp-reset{border:0;background:none;padding:0 4px;font-size:12px;color:var(--pri);
  cursor:pointer;font-family:inherit;font-weight:500;white-space:nowrap}
.shell.hc-mprod .mp-reset:hover{text-decoration:underline}
/* ---------- 批量操作条（勾选后浮现 · 深色常驻于工具区下方） ---------- */
.shell.hc-mprod .mp-batch{display:flex;align-items:center;gap:12px;background:var(--ink);
  border-radius:12px;padding:10px 12px 10px 16px;flex-wrap:wrap}
.shell.hc-mprod .mp-batch .ic{width:16px;height:16px;border-radius:999px;background:var(--ok);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.shell.hc-mprod .mp-batch-tx{flex:1;min-width:180px;font-size:13px;color:#fff;line-height:1.4}
.shell.hc-mprod .mp-batch-tx b{font-weight:600}
.shell.hc-mprod .mp-batch .sep{width:1px;height:20px;background:rgba(255,255,255,.22);flex-shrink:0}
.shell.hc-mprod .mp-batch .b{height:30px;padding:0 14px;border:1px solid transparent;border-radius:999px;background:#fff;
  color:var(--ink);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;font-family:inherit;transition:.14s}
.shell.hc-mprod .mp-batch .b:hover{background:#EDEFF2}
.shell.hc-mprod .mp-batch .b.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.shell.hc-mprod .mp-batch .b.ghost:hover{background:rgba(255,255,255,.14)}
.shell.hc-mprod .mp-batch .b.warn{color:var(--err)}
/* ---------- 商品表格卡 ---------- */
.shell.hc-mprod .mp-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:var(--pad-card)}
.shell.hc-mprod .mp-card .tbl-scroll{overflow-x:auto;scrollbar-gutter:stable;padding:var(--pad-tight)}
.shell.hc-mprod .mp-card table.tbl{width:100%;min-width:1200px;border-collapse:collapse;table-layout:fixed}
.shell.hc-mprod .mp-card .tbl th{height:44px;padding:var(--pad-tight) 16px;background:#F7F9FB;color:var(--t3);
  font-size:12px;font-weight:500;text-align:left;white-space:nowrap;vertical-align:middle;border:0}
.shell.hc-mprod .mp-card .tbl th.r{text-align:right}
/* 🔴 表格单元格的**纵向**留白按「行高预算」取 --pad-tight（4px），**不要**强抬到 6px（2026-10-02 掌柜裁定）。
 * td{height:52px} 是写死的行高预算，内容实高 43.6px → 52 − 4×2 = 44 ≥ 43.6 刚好放下；
 * 抬到 6px 需 43.6 + 6×2 = 55.6px，整表行高会从 52 撑到 55.6 —— 属**视觉变化**，违反「零视觉修缺陷」。
 * 口径：纵向 ≥3px（够覆盖选中轮廓外扩即可），横向仍 ≥6px。见 docs/code-wiki/07-render-and-interaction.md §7.5。 */
.shell.hc-mprod .mp-card .tbl td{height:52px;padding:var(--pad-tight) 16px;font-size:13px;color:var(--t2);
  border-top:1px solid var(--line5);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .mp-card .tbl th.c-cb,.shell.hc-mprod .mp-card .tbl td.c-cb{padding-left:16px;padding-right:0}
.shell.hc-mprod .mp-card tbody tr:hover td{background:#FAFBFC}
.shell.hc-mprod .mp-card tbody tr.on td{background:#F5F9FF}
.shell.hc-mprod .mp-card tbody tr.on:hover td{background:#EEF5FF}
.shell.hc-mprod .mp-card tbody tr.off td{color:var(--t5)}
.shell.hc-mprod .mp-card tbody tr.off .mp-pn{color:var(--t4);font-weight:500}
.shell.hc-mprod .mp-card tbody tr.off .mp-price{color:var(--t4)}
.shell.hc-mprod .mp-card tbody tr.off .mp-thumb{opacity:.62}
.shell.hc-mprod .mp-card .empty{text-align:center;padding:46px 16px;color:var(--t4);font-size:13px}
/* 列设置：隐藏可选列 */
.shell.hc-mprod .mp-card.h-cat .col-cat,
.shell.hc-mprod .mp-card.h-brand .col-brand,
.shell.hc-mprod .mp-card.h-unit .col-unit,
.shell.hc-mprod .mp-card.h-st .col-st{display:none}
.shell.hc-mprod .mp-thumb{width:36px;height:36px;border-radius:8px;background:#F1F3F6;color:var(--t5);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0;overflow:hidden}
.shell.hc-mprod .mp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 带图的缩略图可点击（点击开灯箱看原图，见 zoom-img）——手型提示只给有图的那种 */
.shell.hc-mprod .mp-thumb img[data-act]{cursor:pointer}
.shell.hc-mprod .mp-prod{display:flex;align-items:center;gap:10px;min-width:0}
.shell.hc-mprod .mp-prod-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
/* 商品名：flex 容器 —— 名称本身负责省略号，右侧「专属商品」标签固定不缩（2026-09-28） */
.shell.hc-mprod .mp-pn{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:600;
  color:var(--ink);line-height:1.3;max-width:100%}
.shell.hc-mprod .mp-pn-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-mprod .mp-pn > .mp-badge{flex:0 0 auto;height:19px;padding:0 7px;font-size:10.5px}
.shell.hc-mprod .mp-pc{font-size:11px;color:var(--t5);line-height:1.3}
.shell.hc-mprod .mp-pc .w{color:var(--warn)}
.shell.hc-mprod .mp-cat{font-size:12px;color:var(--t2)}
.shell.hc-mprod .mp-cat.none{color:var(--warn);font-weight:500}
.shell.hc-mprod .mp-dash{color:#C4C9D0}
.shell.hc-mprod .mp-unit{font-size:12px;color:var(--t3)}
.shell.hc-mprod .mp-price{font-size:13px;font-weight:500;color:var(--ink);text-align:right;display:block}
.shell.hc-mprod .mp-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;
  font-size:11px;font-weight:500;white-space:nowrap}
.shell.hc-mprod .mp-badge i{width:5px;height:5px;border-radius:999px;background:currentColor;flex-shrink:0}
.shell.hc-mprod .mp-badge.ok{background:#EAF6EE;color:#1E8E3E}
.shell.hc-mprod .mp-badge.warn{background:#FFF4E6;color:#B26A00}
.shell.hc-mprod .mp-badge.off{background:#F1F3F6;color:#6E6E73}
.shell.hc-mprod .mp-badge.err{background:#FDECEA;color:#C2261B}
/* 采集来源徽章「1688货源」（2026-10-11）：**实心橙 + 白字**。
 * 本行只是**字面量兜底** —— 商家端由 merchant/styles/pages.css 用 `--color-source` 令牌覆盖，
 * 与 .ok / .warn / .err / .vis 完全同一套两层模式。
 * 🔴 这里是**字面量**、不是 `var(--color-source)`：base.css 是两端共用的共享层，
 *   引用只在 merchant 侧定义的令牌会让客户端解析不到（test/css-token-scope-smoke 会报红）——
 *   而本徽章本就只在商家端渲染。令牌定义见 merchant/styles/theme.css（含取值与对比度的理由）。
 * 掌柜口径：「颜色字体优化下，显眼点」→ 从**中性灰淡底**先改实心蓝（守约定）、再按掌柜点选改橙色（破例）。
 * 仅商家端可见 —— 客户端下发路径已剥除该标记（server.js stripClientOnly）。 */
.shell.hc-mprod .mp-badge.src{background:#D9480F;color:#FFFFFF}
.shell.hc-mprod .mp-ref{display:block;font-size:11px;color:var(--err);margin-top:3px}
.shell.hc-mprod .mp-ops{display:flex;align-items:center;gap:12px}
.shell.hc-mprod .mp-ops .a{font-size:12px;font-weight:500;color:var(--pri);cursor:pointer;white-space:nowrap}
.shell.hc-mprod .mp-ops .a:hover{text-decoration:underline}
.shell.hc-mprod .mp-ops .a.muted{color:var(--t3);font-weight:400}
.shell.hc-mprod .mp-ops .a.muted:hover{color:var(--ink);text-decoration:none}
/* ---------- 表尾：统计 + 分页 ---------- */
.shell.hc-mprod .mp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;background:#F7F9FB;border-top:1px solid var(--line5);flex-wrap:wrap}
.shell.hc-mprod .mp-foot{padding:9px 16px}
.shell.hc-mprod .mp-foot-st{flex:0 1 auto;min-width:0;font-size:12px;color:var(--t3);line-height:1.45;white-space:nowrap}
.shell.hc-mprod .mp-foot .pg-bar{padding:0;margin:0;border:0;background:none;gap:10px;font-size:12px;color:var(--t3)}
.shell.hc-mprod .mp-foot .pg-n{min-width:34px;height:34px;border-radius:999px;border:0;background:transparent;
  font-size:13px;font-weight:500;color:var(--t2);padding:0 9px}
.shell.hc-mprod .mp-foot .pg-n:hover:not(:disabled){background:#ECEEF2;color:var(--ink)}
.shell.hc-mprod .mp-foot .pg-n.on{background:var(--pri-action);color:#fff;font-weight:600}
.shell.hc-mprod .mp-foot .pg-n.on:disabled{opacity:1;background:var(--pri-action);color:#fff}
.shell.hc-mprod .mp-foot .pg-n:disabled{opacity:.32;background:transparent}
.shell.hc-mprod .mp-foot .pg-n.arw{font-size:17px;padding:0}
.shell.hc-mprod .mp-foot .pg-size select{height:34px;border-radius:999px;border-color:var(--bd-strong);font-size:12px;padding:0 28px 0 12px}
.shell.hc-mprod .mp-foot .pg-info{font-size:12px;color:var(--t3);margin-left:0;white-space:nowrap}
.shell.hc-mprod .mp-foot .pg-info b{color:var(--ink);font-weight:600}
.shell.hc-mprod .mp-foot .pg-ell{font-size:13px;color:var(--t5);min-width:18px;text-align:center}
.shell.hc-mprod .mp-foot .pg-inp{height:34px;width:54px;border-radius:999px;border-color:var(--bd-strong);font-size:13px}
.shell.hc-mprod .mp-foot .pg-go{height:34px;border-radius:999px;border-color:var(--bd-strong);font-size:12px;font-weight:500}
.shell.hc-mprod .mp-foot .pg-jump{font-size:12px;color:var(--t3)}
.mp-dd-root .mp-menu a.danger{color:#D93025}
.mp-dd-root .mp-menu .go{font-size:11px;color:#86868B}
.mp-dd-root .mp-menu .hd{padding:4px 14px 8px;font-size:11px;color:#86868B;border-bottom:1px solid #F0F0F2;margin-bottom:4px}
@keyframes mpPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* ---------- 03 商品编辑抽屉（880 · 头尾 64 · 卡片 12 圆角 16 内距） ---------- */
.shell.hc-mprod .drw.drw-prod{width:880px;max-width:96vw}
.shell.hc-mprod .drw-prod .drw-h{height:64px;padding:0 28px;gap:16px;border-bottom:1px solid var(--line5)}
.shell.hc-mprod .drw-prod .drw-b{padding:22px 28px;gap:14px;background:var(--sf)}
.shell.hc-mprod .drw-prod .pform-sec{background:#fff;border:1px solid #E8EAED;border-radius:12px;padding:16px;box-shadow:none}
.shell.hc-mprod .drw-prod .pform-sec+.pform-sec,.shell.hc-mprod .drw-prod .card+.card{margin-top:0}
.shell.hc-mprod .drw-prod .drw-f{height:64px;padding:0 28px;gap:12px;border-top:1px solid var(--line5);background:#fff}
.shell.hc-mprod .drw-prod .btn{height:38px;font-size:13px;font-weight:500;padding:0 20px}
.shell.hc-mprod .drw-prod .btn.pri{padding:0 22px}
.shell.hc-mprod .drw-x{height:32px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--bd-strong);
  border-radius:999px;font-size:12px;color:var(--t2);font-weight:400}
.shell.hc-mprod .drw-x:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-weak)}
/* 滚动提示层：抽屉内容超出视口时贴底渐隐提示 */
.shell.hc-mprod .mp-scroll-hint{position:absolute;left:0;right:0;bottom:64px;height:56px;display:flex;align-items:flex-end;
  justify-content:center;gap:6px;padding-bottom:8px;font-size:11px;color:var(--t4);
  background:linear-gradient(to bottom,rgba(247,249,251,0) 0%,rgba(247,249,251,.92) 62%,var(--sf) 100%);
  pointer-events:none;z-index:2}
.shell.hc-mprod .drw-prod{position:fixed}
/* ---------- 04 .mp-modal 弹层基座（2026-09-16 起仅供「搜索别名」等本页弹层使用）
   注意：#modal-root 是 #app 的兄弟节点、位于 .shell 之外，
   因此这类弹层样式使用不带作用域的 .mp-modal 命名空间。
   原「批量导入弹层」的 .mp-steps / .mp-drop / .mp-sum 已随该功能于 2026-09-16 删除 ---------- */
.mp-modal .mh{padding:0 24px;height:60px;display:flex;align-items:center;font-size:16px;font-weight:600;border-bottom:1px solid #F0F0F2}
.mp-modal .mb{padding:16px 24px;font-size:13px;color:#333}
.mp-modal .mf .btn{height:36px;font-size:13px;font-weight:500;padding:0 18px;border-radius:999px}
.mp-modal .mf .btn.pri{padding:0 20px}
/* ---------- 05 商品关联侧滑面板（2026-09-14 重构 · 1000px · 行卡 / 双栏 / 客户端预览） ----------
 * 结构：head(80) → 页签条(72,仅 sim) → 主体(灰底 20 内距) → 底部动作条(76)
 * 硬约束：行内各列走固定宽度 + 弹性商品列吃剩余，任一列不得溢出抽屉（1000px 定宽，不依赖 96vw）。 */
.shell.hc-mprod .drw.drw-rel{width:1000px;max-width:96vw}
.shell.hc-mprod .drw-rel .drw-h{padding:0 20px;height:80px;gap:14px;border-bottom:1px solid var(--line5)}
.shell.hc-mprod .drw-rel .rl-h-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.shell.hc-mprod .drw-rel .rl-h-tx b{font-size:15px;font-weight:600;color:#1D1D1F}
.shell.hc-mprod .drw-rel .rl-h-tx span{font-size:11.5px;color:#86868B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-h-x{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:#F5F5F7;color:#1D1D1F;font-size:14px;flex:0 0 auto}
.shell.hc-mprod .drw-rel .rl-h-x:hover{background:#ECECEE}
/* 页签条：胶囊分段；右侧一行交互提示 */
.shell.hc-mprod .drw-rel .rl-tabs{display:flex;align-items:center;justify-content:space-between;gap:14px;height:72px;padding:0 20px;flex:0 0 auto}
.shell.hc-mprod .drw-rel .rl-seg{display:inline-flex;align-items:center;gap:2px;height:32px;padding:3px;border-radius:999px;background:#F5F5F7;box-sizing:border-box}
.shell.hc-mprod .drw-rel .rl-seg button{border:none;background:none;height:26px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:400;color:#6E6E73;cursor:pointer;white-space:nowrap;font-family:inherit}
.shell.hc-mprod .drw-rel .rl-seg button.on{background:#fff;color:#1D1D1F;font-weight:600}
.shell.hc-mprod .drw-rel .rl-tabs-hint{font-size:11px;color:#A1A1A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 主体 */
.shell.hc-mprod .drw-rel .drw-b{padding:20px;background:#F7F9FB;display:flex;flex-direction:column;gap:14px}
.shell.hc-mprod .drw-rel .rl-card{background:#fff;border:1px solid #E4E7EC;border-radius:14px;display:flex;flex-direction:column}
.shell.hc-mprod .drw-rel .rl-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px;padding:0 14px;border-bottom:1px solid #F0F0F2;flex:0 0 auto}
.shell.hc-mprod .drw-rel .rl-h-l{display:flex;align-items:center;gap:8px;min-width:0}
.shell.hc-mprod .drw-rel .rl-h-l b{font-size:13px;font-weight:600;color:#1D1D1F;white-space:nowrap}
.shell.hc-mprod .drw-rel .rl-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 7px;box-sizing:border-box;border-radius:999px;background:#E9F1FE;color:#0064E0;font-size:11px;font-weight:600}
.shell.hc-mprod .drw-rel .rl-mut{font-size:11px;color:#86868B;white-space:nowrap}
.shell.hc-mprod .drw-rel .rl-warn{font-size:11px;color:#B26A00;white-space:nowrap}
.shell.hc-mprod .drw-rel .rl-strong{color:#0064E0;font-weight:600}
.shell.hc-mprod .drw-rel .rl-card-f{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 14px;background:#F7F9FB;border-top:1px solid #F0F0F2;flex:0 0 auto;border-radius:0 0 13px 13px}
.shell.hc-mprod .drw-rel .rl-empty{padding:44px 16px;text-align:center;font-size:12px;color:#A1A1A6}
.shell.hc-mprod .drw-rel .rl-empty.sm{padding:26px 12px}
.shell.hc-mprod .drw-rel .rl-body > .rl-card{flex:1 1 auto;min-height:0}
.shell.hc-mprod .drw-rel .rl-body > .rl-pv{flex:0 0 auto}
/* 已关联 / 反向引用行卡 */
.shell.hc-mprod .drw-rel .rl-list{flex:1 1 auto;min-height:0;overflow:auto}
.shell.hc-mprod .drw-rel .rl-row{display:flex;align-items:center;padding:14px;border-bottom:1px solid #F0F0F2;position:relative;background:#fff}
.shell.hc-mprod .drw-rel .rl-row:last-child{border-bottom:none}
.shell.hc-mprod .drw-rel .rl-row:hover{background:#FCFCFD}
.shell.hc-mprod .drw-rel .rl-row.is-off .rl-prod-tx b,
.shell.hc-mprod .drw-rel .rl-row.is-off .rl-price,
.shell.hc-mprod .drw-rel .rl-row.is-off .rl-prod-tx span{color:#9A9AA0}
.shell.hc-mprod .drw-rel .rl-row.dragging{opacity:.4}
.shell.hc-mprod .drw-rel .rl-row.drop-before::before,
.shell.hc-mprod .drw-rel .rl-row.drop-after::after{content:'';position:absolute;left:14px;right:14px;height:2px;background:#0064E0;border-radius:2px}
.shell.hc-mprod .drw-rel .rl-row.drop-before::before{top:-1px}
.shell.hc-mprod .drw-rel .rl-row.drop-after::after{bottom:-1px}
.shell.hc-mprod .drw-rel .rl-grip{width:44px;flex:0 0 44px;height:40px;display:grid;grid-template-columns:repeat(2,4px);grid-auto-rows:4px;gap:4px;place-content:center;cursor:grab;border-radius:8px}
.shell.hc-mprod .drw-rel .rl-grip:active{cursor:grabbing}
.shell.hc-mprod .drw-rel .rl-grip:hover{background:#F5F5F7}
.shell.hc-mprod .drw-rel .rl-grip span{width:4px;height:4px;border-radius:999px;background:#C7C7CC}
.shell.hc-mprod .drw-rel .rl-prod{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px}
.shell.hc-mprod .drw-rel .rl-prod .thumb{width:40px;height:40px;border-radius:10px;box-sizing:border-box}
.shell.hc-mprod .drw-rel .rl-prod-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.shell.hc-mprod .drw-rel .rl-prod-tx b{font-size:13px;font-weight:500;color:#1D1D1F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-prod-tx span{font-size:11px;color:#86868B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-note{width:200px;flex:0 0 200px;box-sizing:border-box;margin:0 8px;padding:6px 8px;border-radius:8px;font-size:11.5px;line-height:17px;color:#6E6E73;cursor:text;max-height:46px;overflow:hidden}
.shell.hc-mprod .drw-rel .rl-note:hover{background:#F5F5F7}
.shell.hc-mprod .drw-rel .rl-note i{font-style:normal;color:#A1A1A6}
.shell.hc-mprod .drw-rel .rl-note-ta{display:block;width:100%;box-sizing:border-box;font-family:inherit;font-size:11.5px;line-height:17px;color:#1D1D1F;background:#fff;border:1px solid #0064E0;border-radius:8px;padding:4px 6px;resize:none;outline:none}
.shell.hc-mprod .drw-rel .rl-price{width:100px;flex:0 0 100px;text-align:right;font-size:13px;font-weight:500;color:#1D1D1F;font-variant-numeric:tabular-nums}
.shell.hc-mprod .drw-rel .rl-st{width:108px;flex:0 0 108px;padding-left:12px;box-sizing:border-box}
.shell.hc-mprod .drw-rel .rl-badge{display:inline-flex;align-items:center;height:22px;padding:0 10px;box-sizing:border-box;border-radius:999px;font-size:11px;font-weight:500;white-space:nowrap}
.shell.hc-mprod .drw-rel .rl-badge.green{background:#EBF7EE;color:#1E8E3E}
.shell.hc-mprod .drw-rel .rl-badge.red{background:#FDECEA;color:#D93025}
.shell.hc-mprod .drw-rel .rl-ops{width:100px;flex:0 0 100px;display:flex;align-items:center;gap:12px}
.shell.hc-mprod .drw-rel .rl-ops .link{font-size:12px}
/* 客户端预览条 */
.shell.hc-mprod .drw-rel .rl-pv{background:#fff;border:1px solid #E4E7EC;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.shell.hc-mprod .drw-rel .rl-pv-h{font-size:11px;color:#86868B}
.shell.hc-mprod .drw-rel .rl-pv-r{display:flex;gap:12px}
.shell.hc-mprod .drw-rel .rl-pv-it{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:#F7F9FB}
.shell.hc-mprod .drw-rel .rl-pv-it .thumb{width:32px;height:32px;border-radius:8px;font-size:12px;box-sizing:border-box}
.shell.hc-mprod .drw-rel .rl-pv-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.shell.hc-mprod .drw-rel .rl-pv-tx b{font-size:11.5px;font-weight:500;color:#1D1D1F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-pv-tx span{font-size:11px;color:#86868B}
/* 反向引用 + 客户端预览（配件适配 · 并排两栏；配件独有的反查必须留在本屏） */
.shell.hc-mprod .drw-rel .rl-body > .rl-duo{flex:0 0 auto}
.shell.hc-mprod .drw-rel .rl-duo{display:flex;align-items:stretch;gap:14px;max-height:210px}
.shell.hc-mprod .drw-rel .rl-duo > .rl-card{flex:1 1 0;min-width:0}
.shell.hc-mprod .drw-rel .rl-duo .rl-list{flex:1 1 auto;min-height:0;overflow:auto}
.shell.hc-mprod .drw-rel .rl-rev .rl-rev-l{max-height:172px}
.shell.hc-mprod .drw-rel .rl-ev{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid #F0F0F2}
.shell.hc-mprod .drw-rel .rl-ev:last-child{border-bottom:none}
.shell.hc-mprod .drw-rel .rl-ev .thumb{width:36px;height:36px;border-radius:9px;flex:0 0 36px;font-size:14px;box-sizing:border-box}
.shell.hc-mprod .drw-rel .rl-ev-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.shell.hc-mprod .drw-rel .rl-ev-tx b{font-size:12.5px;font-weight:500;color:#1D1D1F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-ev-tx span{font-size:11px;color:#86868B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-ev .link{flex:0 0 auto;font-size:11.5px;white-space:nowrap}
.shell.hc-mprod .drw-rel .rl-pvi{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #F0F0F2}
.shell.hc-mprod .drw-rel .rl-pvi:last-child{border-bottom:none}
.shell.hc-mprod .drw-rel .rl-pvi .thumb{width:28px;height:28px;border-radius:8px;flex:0 0 28px;font-size:12px;box-sizing:border-box}
.shell.hc-mprod .drw-rel .rl-pvi b{flex:1 1 auto;min-width:0;font-size:11.5px;font-weight:500;color:#1D1D1F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-pvi span{flex:0 0 auto;font-size:11px;color:#86868B;white-space:nowrap}
/* 添加相似商品 · 双栏 */
.shell.hc-mprod .drw-rel .rl-add{display:flex;gap:20px;flex:1 1 auto;min-height:0}
.shell.hc-mprod .drw-rel .rl-add-l{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:14px}
.shell.hc-mprod .drw-rel .rl-add-r{flex:0 0 300px;width:300px;min-height:0;display:flex;flex-direction:column}
.shell.hc-mprod .drw-rel .rl-flt{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.shell.hc-mprod .drw-rel .rl-search{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;box-sizing:border-box;border-radius:999px;background:#fff;border:1px solid #E4E7EC}
.shell.hc-mprod .drw-rel .rl-search svg{flex:0 0 16px}
.shell.hc-mprod .drw-rel .rl-search input{flex:1 1 auto;min-width:0;border:none;outline:none;background:none;font-family:inherit;font-size:12px;color:#1D1D1F}
.shell.hc-mprod .drw-rel .rl-search input::placeholder{color:#A1A1A6}
.shell.hc-mprod .drw-rel .rl-add .sel{flex:0 0 auto}
.shell.hc-mprod .drw-rel .rl-add .sel select{height:40px;border-radius:10px;font-size:12px;min-width:168px}
.shell.hc-mprod .drw-rel .rl-cand-card{flex:1 1 auto;min-height:0}
.shell.hc-mprod .drw-rel .rl-cand-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--pad-tight)}
.shell.hc-mprod .drw-rel .rl-cand-tbl{table-layout:fixed;width:100%;min-width:0}
.shell.hc-mprod .drw-rel .rl-cand-tbl th{position:sticky;top:0;z-index:1;height:44px;padding:var(--pad-tight) 8px;box-sizing:border-box;background:#F7F9FB;font-size:11px;font-weight:400;color:#86868B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-cand-tbl td{padding:11px 8px;box-sizing:border-box;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid #F0F0F2}
.shell.hc-mprod .drw-rel .rl-cand-tbl th:first-child,
.shell.hc-mprod .drw-rel .rl-cand-tbl td:first-child{padding-left:14px}
.shell.hc-mprod .drw-rel .rl-cand-tbl th:last-child,
.shell.hc-mprod .drw-rel .rl-cand-tbl td:last-child{padding-right:14px}
.shell.hc-mprod .drw-rel .rl-cand-tbl .rl-c1{width:44px}
.shell.hc-mprod .drw-rel .rl-cand-tbl .rl-c3{width:104px}
.shell.hc-mprod .drw-rel .rl-cand-tbl .rl-c4{width:88px;text-align:right;font-variant-numeric:tabular-nums}
.shell.hc-mprod .drw-rel .rl-cand-tbl .rl-c5{width:62px}
.shell.hc-mprod .drw-rel .rl-cand-tbl tr.pick{cursor:pointer}
.shell.hc-mprod .drw-rel .rl-cand-tbl tr.pick:hover td{background:#FBFDFF}
.shell.hc-mprod .drw-rel .rl-cand-tbl tr.is-off td{color:#9A9AA0}
.shell.hc-mprod .drw-rel .rl-c2-in{display:flex;align-items:center;gap:10px;min-width:0}
.shell.hc-mprod .drw-rel .rl-c2-in .thumb{width:36px;height:36px;border-radius:9px;font-size:13px;box-sizing:border-box;flex:0 0 36px}
.shell.hc-mprod .drw-rel .rl-c2-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.shell.hc-mprod .drw-rel .rl-c2-tx b{font-size:12.5px;font-weight:500;color:#1D1D1F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-c2-tx span{font-size:11px;color:#86868B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-cand-tbl tr.is-off .rl-c2-tx b{color:#9A9AA0}
.shell.hc-mprod .drw-rel .rl-cst{font-size:10.5px;font-weight:500;color:#A1A1A6}
.shell.hc-mprod .drw-rel .rl-cand-tbl tr.is-off .rl-cst{color:#B26A00}
.shell.hc-mprod .drw-rel .rl-ck{display:inline-block;width:18px;height:18px;box-sizing:border-box;border:1.6px solid #C7C7CC;border-radius:5px;position:relative;vertical-align:middle}
.shell.hc-mprod .drw-rel .rl-ck.dis{background:#F7F9FB;border-color:#E4E7EC}
.shell.hc-mprod .drw-rel .rl-ck.on{background:#0064E0;border-color:#0064E0}
.shell.hc-mprod .drw-rel .rl-ck.on::after{content:'';position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}
.shell.hc-mprod .drw-rel .rl-pager{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;height:40px;border-top:1px solid #F0F0F2;background:#fff}
.shell.hc-mprod .drw-rel .rl-pg{width:26px;height:26px;border:1px solid #E4E7EC;background:#fff;border-radius:8px;color:#3C3C43;font-size:13px;line-height:1;cursor:pointer}
.shell.hc-mprod .drw-rel .rl-pg:disabled{opacity:.38;cursor:default}
/* 已选篮子 */
.shell.hc-mprod .drw-rel .rl-basket{flex:1 1 auto;min-height:0}
.shell.hc-mprod .drw-rel .rl-bi-l{flex:1 1 auto;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.shell.hc-mprod .drw-rel .rl-bi{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:#F7F9FB}
.shell.hc-mprod .drw-rel .rl-bi .thumb{width:32px;height:32px;border-radius:8px;font-size:12px;box-sizing:border-box;flex:0 0 32px}
.shell.hc-mprod .drw-rel .rl-bi-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.shell.hc-mprod .drw-rel .rl-bi-tx b{font-size:11.5px;font-weight:500;color:#1D1D1F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-bi-tx span{font-size:10.5px;color:#86868B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mprod .drw-rel .rl-note-box{flex:0 0 auto;border-top:1px solid #F0F0F2;padding:14px;display:flex;flex-direction:column;gap:6px}
.shell.hc-mprod .drw-rel .rl-note-box label{font-size:11px;color:#86868B}
.shell.hc-mprod .drw-rel .rl-ta{width:100%;box-sizing:border-box;font-family:inherit;font-size:11.5px;line-height:17px;border-radius:10px;resize:none;padding:10px}
/* 底部动作条 */
.shell.hc-mprod .drw-rel .drw-f{height:76px;padding:0 20px;gap:10px;border-top:1px solid var(--line5);background:#fff;flex:0 0 auto;flex-wrap:nowrap}
.shell.hc-mprod .drw-rel .rl-sp{flex:1 1 auto}
.shell.hc-mprod .drw-rel .btn{height:36px;font-size:13px;font-weight:500;padding:0 16px}
.shell.hc-mprod .drw-rel .btn.pri{padding:0 22px}
.shell.hc-mprod .drw-rel .btn[disabled]{opacity:.45;cursor:default}
/* ---------- 窄屏降级 ---------- */
@media (max-width:900px){
  .shell.hc-mprod .content{padding:16px}
  .shell.hc-mprod .mp-title{font-size:22px}
}
/* ---------- 06 商品「指定客户可见」抽屉（2026-09-28） ----------
 * 复用 .drw.drw-rel（1000px 定宽，见 :2026）+ .rl-* 双栏骨架（:2120 起的添加态）。
 * 结构：head(80) → 可见档开关（**单枚开关**）→ [批量：追加 / 覆盖] → 主体(灰底 20 内距 · 左右双栏) → 底部动作条(76)。
 * 只新增 .vis-* 覆写，**不新增抽屉宽度档** → 不触碰 .c-drawer 的 ≤1080px 回退清单。 */
/* 可见档开关（2026-09-28 收口：原「两枚单选卡」.vis-modes / .vis-mode / .vis-radio 已删）。
 * 类名直接带上全站标准开关 .sp-toggle（:714 起的轨道 .tg 与滑块几何），此处只覆写
 * 「整行 · 文案在左 · 开关在右」与 ON 态配色 —— 单一来源，将来改 .sp-toggle 这里同步受益。
 * 🔴 .tg 在 DOM 里必须排在 .vis-sw-tx **之前**（.sp-toggle 的 input:checked + .tg 靠相邻兄弟选择器），
 *    故用 row-reverse 把开关视觉翻到右侧 —— 切勿为省事调换 DOM 顺序，否则轨道会失去几何样式。 */
.shell.hc-mprod .drw-rel .vis-sw{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;
  gap:14px;width:100%;box-sizing:border-box;padding:14px 20px;flex:0 0 auto;border:0;
  border-bottom:1px solid var(--line5);background:#fff;color:inherit;font-family:inherit;text-align:left;transition:.14s}
.shell.hc-mprod .drw-rel .vis-sw:hover{background:#FAFBFC}
.shell.hc-mprod .drw-rel .vis-sw:focus-visible{outline:2px solid #0064E0;outline-offset:-2px}
.shell.hc-mprod .drw-rel .vis-sw-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.shell.hc-mprod .drw-rel .vis-sw-tx b{font-size:13px;font-weight:600;color:#1D1D1F}
.shell.hc-mprod .drw-rel .vis-sw.on .vis-sw-tx b{color:#0064E0}
.shell.hc-mprod .drw-rel .vis-sw-tx i{font-style:normal;font-size:11.5px;line-height:16px;color:#86868B}
.shell.hc-mprod .drw-rel .vis-sw.on .tg{background:var(--ok)}
.shell.hc-mprod .drw-rel .vis-sw.on .tg::after{left:17px}
/* 「指定客户可见」却一个客户都没加 → 保存后无人可见：右栏**复用既有的 .rl-warn（:2055）**，
 * 不再重复定义（该规则带 white-space:nowrap，故文案必须短到不折行）。 */

/* 批量：追加 / 覆盖 */
.shell.hc-mprod .drw-rel .vis-apply{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.shell.hc-mprod .drw-rel .vis-apply-lb{flex:0 0 auto;font-size:12px;color:#86868B;white-space:nowrap}
.shell.hc-mprod .drw-rel .vis-ap{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;
  height:44px;padding:0 14px;box-sizing:border-box;border:1px solid #E4E7EC;border-radius:12px;background:#fff;
  cursor:pointer;font-family:inherit;transition:.14s}
.shell.hc-mprod .drw-rel .vis-ap:hover{border-color:#C9D6E8}
.shell.hc-mprod .drw-rel .vis-ap.on{border-color:#0064E0;background:#F5F9FF}
.shell.hc-mprod .drw-rel .vis-ap b{flex:0 0 auto;font-size:12.5px;font-weight:600;color:#1D1D1F}
.shell.hc-mprod .drw-rel .vis-ap.on b{color:#0064E0}
.shell.hc-mprod .drw-rel .vis-ap i{font-style:normal;font-size:11px;color:#86868B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 主体双栏：左=全部企业客户（含搜索），右=已授权可见客户；两卡吃满高度，列表内部滚动 */
.shell.hc-mprod .drw-rel .vis-tw{align-items:stretch}
.shell.hc-mprod .drw-rel .vis-tw > .rl-add-l > .rl-card,
.shell.hc-mprod .drw-rel .vis-tw > .rl-add-r > .rl-card{flex:1 1 auto;min-height:0}
.shell.hc-mprod .drw-rel .vis-tw .rl-add-r{flex:0 0 400px;width:400px}
.shell.hc-mprod .drw-rel .vis-tw.is-drop{opacity:.5;pointer-events:none}
.shell.hc-mprod .drw-rel .vis-card .rl-flt{padding:12px 14px;border-bottom:1px solid #F0F0F2}
.shell.hc-mprod .drw-rel .vis-card .rl-card-h{gap:8px}
.shell.hc-mprod .drw-rel .vis-ops{width:104px;flex:0 0 104px;justify-content:flex-end}
.shell.hc-mprod .drw-rel .vis-ops .link{font-size:12px}
.shell.hc-mprod .drw-rel .vis-added{font-size:11.5px;color:#A1A1A6;white-space:nowrap}
/* 行内「专属商品」标记（商品管理列表 · 商品名称旁） */
.shell.hc-mprod .mp-badge.vis{background:#F0EEFE;color:#5B4BD6}
.shell.hc-mprod .mp-badge.vis.zero{background:#FFF4E6;color:#B26A00}
/* ============================================================
 * 客户端目录页 · 左侧导航重构（2026-09-14）
 * 结构（自上而下，对应浏览优先级）：① 我的收藏（置顶常驻）
 *   ② 商家预制品类（navTabs）③ 全部商品分类（CAT1 全树 + 全部商品 + 未分类）
 * 宽度 240px（原 258）；两组条目统一 圆角 10 / 高 40；分组标题为浅灰小字、不可点击。
 * 层级区分靠「分组标题 + 有无图标 + 是否带计数 + 卡片/列表两种形态」，而非换色 ——
 *   我的收藏=白底卡片（含图标），品类=带图标的列表项，分类=纯文字列表项。
 * 稳定性：内滚区固定内容宽（scrollbar-gutter:stable），滚动条出现/消失不改左栏宽度，
 *   右侧表格列不会随之重排（沿用 2026-09-13「滚动条引起列宽重排」的教训）。
 * ============================================================ */
.shell.hc-c .cat-tree{width:220px;flex:0 0 220px;box-sizing:border-box;padding:12px;
  background:var(--sf);border:1px solid transparent;border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;
  scrollbar-gutter:auto} /* overflow:hidden 仍是滚动容器，会把槽位白占掉 10px → 显式关掉 */
/* ① 我的收藏 */
.shell.hc-c .cnav-fav{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:12px;background:#fff;border:1px solid var(--line);cursor:pointer;user-select:none;
  transition:border-color .14s,box-shadow .14s,background .14s}
.shell.hc-c .cnav-fav:hover{border-color:var(--pri-200);box-shadow:0 3px 10px rgba(15,23,42,.06)}
.shell.hc-c .cnav-fav.on{background:var(--pri-weak);border-color:var(--pri)}
.shell.hc-c .cnav-fav:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.shell.hc-c .cnav-fav-ic{width:28px;height:28px;flex:0 0 28px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:9px;background:var(--pri-weak);color:var(--pri)}
.shell.hc-c .cnav-fav.on .cnav-fav-ic{background:#fff}
.shell.hc-c .cnav-fav-ic svg{width:16px;height:16px;display:block}
.shell.hc-c .cnav-fav-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.shell.hc-c .cnav-fav-tx b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.2}
.shell.hc-c .cnav-fav-tx i{font-style:normal;font-size:11px;color:var(--t4);line-height:1.2}
.shell.hc-c .cnav-fav.on .cnav-fav-tx b{color:var(--pri-600)}
.shell.hc-c .cnav-fav.on .cnav-fav-tx i{color:var(--pri)}
/* ②③ 两组共用内滚区 */
.shell.hc-c .cnav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
/* 收藏卡置顶吸附：滚动到「全部商品分类」中后段时仍能一键回到收藏 */
/* 【2026-10-08】补齐**容器侧**的 flex 列声明 + 8px 间距（掌柜反馈两卡「基本挨着了」）：
 *   两张卡（我的收藏 / 常购商品）此前是**块级堆叠、零 margin/gap** ⇒ 上下 1px 边框直接贴住。
 *   子项自己早写着 `flex:0 0 auto`（见 .cnav-fav），说明这里本就是按纵向 flex 列设计的，
 *   只是容器缺了 `display:flex` —— 于是 `flex` 属性一直没生效、间距也无人提供。
 *   间距取 8px（= --pad-card，与 §7.5「内壁留白 ≥8px」同档）。 */
.shell.hc-c .cnav-pin{position:sticky;top:0;z-index:2;background:var(--sf);padding-bottom:10px;
  display:flex;flex-direction:column;gap:8px}
.shell.hc-c .cnav-grp{font-size:11px;font-weight:600;color:var(--t5);letter-spacing:.5px;
  padding:9px 10px 5px;line-height:1.4;cursor:default;user-select:none}
.shell.hc-c .cnav-it{display:flex;align-items:center;gap:9px;height:40px;padding:0 10px;
  border-radius:10px;cursor:pointer;user-select:none;transition:background .14s}
.shell.hc-c .cnav-it:hover{background:rgba(255,255,255,.85)}
.shell.hc-c .cnav-it.on{background:var(--pri-weak)}
.shell.hc-c .cnav-it b{flex:1 1 auto;min-width:0;font-size:14px;font-weight:400;color:var(--t2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-c .cnav-it.on b{font-weight:600;color:var(--pri-600)}
.shell.hc-c .cnav-it i{font-style:normal;font-size:12px;color:var(--t5);flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.shell.hc-c .cnav-it.on i{color:var(--pri);font-weight:500}
.shell.hc-c .cnav-ic{width:24px;height:24px;flex:0 0 24px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:7px;overflow:hidden;background:#fff;color:var(--t5)}
.shell.hc-c .cnav-ic img{width:100%;height:100%;object-fit:cover;display:block}
.shell.hc-c .cnav-ic svg{width:14px;height:14px}
.shell.hc-c .cnav-it.on .cnav-ic{color:var(--pri)}
.shell.hc-c .cnav-none{padding:4px 10px 10px;font-size:12px;color:var(--t5);line-height:1.6}
/* ---------- 中间栏：附属商品分类树（跟随最左主导航，2026-09-14）----------
 * 主导航 = 集合切换（上层），本栏 = 当前集合内的一级分类细化（下层）；
 * 空间位置本身表达层级，客户不必再从一条长竖列表里分辨哪几个是集合、哪几个是分类。
 * 收藏视图下本栏不渲染（catalogView 决定），.cat-main 是 flex:1 → 列表顺势占满整行。
 * 稳定性：与左栏同法，滚动条槽位固定（scrollbar-gutter:stable）——
 *   中间栏宽度变化会把右侧表格的可用宽度改掉，列宽随之重排（2026-09-13 的老教训）。 */
.shell.hc-c .ctree{width:200px;flex:0 0 200px;box-sizing:border-box;padding:12px 10px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;scrollbar-gutter:auto}
.shell.hc-c .ctree-head{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--t5);
  letter-spacing:.5px;padding:2px 10px 9px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;user-select:none}
.shell.hc-c .ctree-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
/* 白底栏内的条目：hover 用浅灰（左栏在灰底上，用白底 hover，两者不能共用同一条） */
.shell.hc-c .cnav-it.ctree-it:hover{background:var(--sf)}
/* ---------- 商品表：新增星标列 + 定宽列 ----------
 * table-layout:fixed 让「列宽即所见」：th 上写的宽度就是渲染宽度（auto 布局下
 * 会被长名称/长品牌挤变形，以致列的疏密看起来忽好忽坏）。商品列为弹性列吃剩余宽度。 */
.shell.hc-c table.cat-tbl{width:100%;table-layout:fixed;min-width:860px}
.shell.hc-c .cat-tbl th,.shell.hc-c .cat-tbl td{padding-left:14px;padding-right:14px}
.shell.hc-c .cat-tbl th.c-star,.shell.hc-c .cat-tbl td.c-star{padding-left:14px;padding-right:0;width:44px}
.shell.hc-c .cat-tbl td.c-star{text-align:left}
.shell.hc-c .cat-tbl td:nth-child(n+3):nth-child(-n+7){overflow:hidden;text-overflow:ellipsis}
/* 收藏按钮：由「透明底 + 纯图标」改为**常驻底色**（2026-09-17 掌柜指定「设计成带有底色的收藏按钮」）。
 * 未收藏 = 中性浅底 + 空心灰星；已收藏 = 暖金浅底 + 深金星。
 * 图标按状态给的是 fill=currentColor（收藏）/ stroke=currentColor（未收藏），
 * 所以这里只驱动 color 就够 —— 两种形态会各自正确上色，不必改 SVG。
 * 底色一律取令牌；hover 只做「加深一档」的提示，不抢已收藏态的颜色语义。 */
.shell.hc-c .fav-btn{width:26px;height:26px;padding:0;border:0;background:var(--sf);color:var(--t4);
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;
  transition:color .14s,background .14s,transform .14s}
.shell.hc-c .fav-btn svg{width:16px;height:16px;display:block}
.shell.hc-c .fav-btn:hover{background:var(--line3);color:var(--fav-deep)}
.shell.hc-c .fav-btn.on{background:var(--warn-weak);color:var(--fav-deep)}
.shell.hc-c .fav-btn.on:hover{background:var(--warn-weak);color:var(--fav)}
.shell.hc-c .fav-btn:active{transform:scale(.92)}
.shell.hc-c .cat-tbl .cat-prod-tx{min-width:0}
.shell.hc-c .cat-tbl .cat-prod-n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-c .cat-empty{padding:56px 24px;text-align:center;color:var(--t5);font-size:13px;
  line-height:1.7;white-space:normal}
/* 窄屏：两栏导航依次横置于列表上方（沿用原 ≤1080 堆叠策略），限高内滚避免把列表推到屏外。
 * 主导航 220 / 分类树 200 两栏并排在 1080 以下会把商品表挤到只剩一列宽，
 * 因此改为纵排：先集合、再分类、最后列表（导航的浏览顺序也正好是这个次序）。 */
@media (max-width:1080px){
  .shell.hc-c .cat-tree{width:100%;flex:0 0 auto;max-height:300px}
  .shell.hc-c .cnav-scroll{max-height:210px}
  .shell.hc-c .ctree{width:100%;flex:0 0 auto;max-height:290px;margin-top:-6px}
  .shell.hc-c .ctree-scroll{max-height:212px}
}
/* ---------- 目录页工具条：右上角「查看购物车并提交」按钮（2026-09-14） ----------
 * 该按钮原在列表下方汇总栏（.rule-tip），掌柜要求移到工具条、与搜索/品牌同行右端。
 * 工具条基础样式是 flex-wrap:wrap，加按钮后 1081px 下会折行（内容约 554 > 可用 493）
 * → 高度 40→80；右端动作的出现/消失会跨越折行临界，导致页面上下跳（本页老坑）。
 * 故本页工具条不折行，改由搜索框让出宽度；下限 100px，保证 1081 仍单行且不溢出。
 * 注意：不要去改全局的 .toolbar（商家端多处在用），一律用 .shell.hc-c 作用域。
 * 【2026-09-16】原右端动作「重置筛选」（`[data-act="f-reset"]`）已按掌柜要求删除，
 *   其专属的 `flex:0 0 auto;white-space:nowrap` 规则与注释一并移除。
 * 【2026-09-17】掌柜指定把搜索框调大：宽 260→550、高 40→50。
 *   宽度用 `flex:0 0 550px` —— grow=0（不被拉伸）、**shrink=0（宽屏严格等于 550）**。
 *   ⚠ 必须同时写 `max-width:none`：上层 `.shell.hc-c .toolbar .searchbox` 写过 `max-width:520px`，
 *     不显式覆盖就会漏下来（第一次改完实测恒为 520，就是这个原因 —— 只覆盖 flex 是不够的）。
 *   之所以不是 `0 1`：实测 1440 视口下 `.cat-main` 只有 704px，shrink=1 会把搜索框压到 520。
 *   ≤1400 视口容器确实不够，故在媒体查询里回退为 `flex:0 1 550px`（可收缩，下限 100px），
 *   保证**依旧单行不折行、不溢出**，不会触发上面那条「折行导致页面上下跳」的老坑。
 *   高度 50 覆盖的是下面 `.shell.hc-c .toolbar .searchbox`（3 类）的 40 —— 本条 4 类，胜出。 */
.shell.hc-c .cat-main .toolbar{flex-wrap:nowrap}
.shell.hc-c .cat-main .toolbar .searchbox{flex:0 0 550px;min-width:0;max-width:none;height:50px}
/* 框内文字放大加粗（2026-09-17 掌柜指定）：13px 常规 → 15px / 600。
 * 特异性 0,5,1 > 上层 `.shell.hc-c .toolbar .searchbox input`（0,4,1），稳胜。
 * 只作用于目录页工具条 —— 商家端订单管理等处的 .searchbox 不受影响。 */
.shell.hc-c .cat-main .toolbar .searchbox input{font-size:15px;font-weight:600;flex:1 1 auto;min-width:0}
/* 右侧「清空搜索」按钮（2026-09-17 掌柜指定）：一键清空，省去逐字删除。
 * input 必须让出宽度（flex:1 1 auto + min-width:0）—— 上层给的是 width:100%，不让位会把按钮挤出容器。
 * 按钮**空输入时自动隐藏**，用原生 :placeholder-shown 判定（挂在 input 的相邻兄弟选择器上）：
 *   好处是零 JS 状态 —— 实时跟随输入值，不必在每次按键时同步 DOM，也就不会干扰输入焦点。 */
.shell.hc-c .cat-main .toolbar .searchbox .kw-clear{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:8px;padding:0;border:0;border-radius:50%;background:var(--sf);color:var(--t3);font-size:12px;line-height:1;cursor:pointer}
.shell.hc-c .cat-main .toolbar .searchbox .kw-clear:hover{background:var(--line2);color:var(--t1)}
.shell.hc-c .cat-main .toolbar .searchbox input:placeholder-shown + .kw-clear{opacity:0;pointer-events:none}
.shell.hc-c .cat-main .toolbar .sel{flex:0 1 auto;min-width:110px}
/* 品牌下拉与搜索框**等高**（2026-09-17 掌柜指定：搜索框已调 50，下拉同步到 50）。
 * 只改高度、不改字号 —— 两侧字号本就同为 13px，只调一边反而会不齐。
 * 特异性 0,5,0 > 上层 `.shell.hc-c .sel select`（0,3,0）的 height:40px，稳胜。
 * 🔴 max-width:100%（2026-10-01 全局布局排查第二轮）：原生 select 的宽度按**最长 option**
 *    （实测 170px）定死，右栏收窄时 .sel 被 flex 压到 ~120px 而 select 不跟着缩 →
 *    超出部分撑破 .toolbar（overflow:visible）与祖先 .cat-main，被静默裁掉（实测 40~45px）。 */
.shell.hc-c .cat-main .toolbar .sel select{height:50px;max-width:100%}
/* 【2026-10-08】品牌下拉的**焦点环改为内嵌**（outline-offset:-2px）。为什么必须这样修：
 *   .cat-main 是 `overflow:hidden` 的**应用外壳**（§7.5 豁免类 d「通铺/铺满是布局意图」）⇒ **不许给它加 padding**；
 *   而 .toolbar 在该容器顶部且 `padding:0` ⇒ 这个 50px 的下拉与 .cat-main 顶边**完全齐平**（实测 gap = 0）。
 *   默认 `select:focus-visible`（base.css :821 一族）是「2px 实线 + 2px 外扩」= 向外扩 4px，
 *   越过内壁后被 overflow:hidden 静默裁掉 ⇒ 顶部那一横看不见（掌柜反馈）。
 *   改内嵌后整圈落在自身 border box 内：**零布局变化、零裁切**。
 *   特异性 (0,6,1) > :821 的 `select:focus-visible` (0,1,1)，稳胜，无需 !important。 */
.shell.hc-c .cat-main .toolbar .sel select:focus-visible{outline-offset:-2px}
.shell.hc-c .cat-main .toolbar .btn.sm{flex:0 0 auto}
/* ============================================================
 * 【2026-09-15】客户端左栏「导航页签」卡片调大（掌柜两次反馈，本段为**第二档**）
 * 只作用于 .cnav-it.cnav-it-tab —— 不影响 .cnav-it.ctree-it（左栏一级分类项），
 * 也不动 .cnav-it 基础规则（遵「只追加作用域层」约定）。
 * 特异性：.shell.hc-c .cnav-it.cnav-it-tab = 4 类 > 基础 .shell.hc-c .cnav-it = 3 类，且位置更后。
 * 累计幅度（相对原始基础规则）：行高 40→52（+30%）、字号 14→16、图标 24→28、内距 10→14、间距 9→11。
 * 第一档为 46/15/26/12/10；本段直接覆盖其值，**不要再追加第三段**。
 * ============================================================ */
.shell.hc-c .cnav-it.cnav-it-tab{height:52px;padding:0 14px;gap:11px}
.shell.hc-c .cnav-it.cnav-it-tab b{font-size:16px}
.shell.hc-c .cnav-it.cnav-it-tab i{font-size:13px}
.shell.hc-c .cnav-it.cnav-it-tab .cnav-ic{width:28px;height:28px;flex:0 0 28px}
.shell.hc-c .cnav-it.cnav-it-tab .cnav-ic svg{width:16px;height:16px}
/* ---------- 06 搜索别名弹层（2026-09-15 · mp-modal 命名空间：弹层在 .shell 之外，不进 hc-mprod 作用域） ---------- */
.mp-modal .al-hint{font-size:12px;color:#86868B;line-height:1.6;margin-bottom:10px}
/* ---------- 07 订单详情排版（2026-09-16 · 主操作上移为整宽横条、导出移至页头右上角、审计置明细之下） ----------
 * 「订单处理」由右栏卡片改为整宽横向动作条：标题与说明在左、动作按钮在右 ——
 * 整宽卡片里若沿用 .btn.block，三个按钮会被拉成上千像素宽的巨型按钮，故改为行内排布。
 */
.od-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.od-bar-main .hint{margin-top:6px;line-height:1.7}
@media (max-width:900px){
  .od-bar-btns{width:100%}
  .od-bar-btns .btn{flex:1}
}
/* 整宽后改用两列键值网格：长文本（地址 / 备注）跨满两列，免得单列键值行在整宽下留一大片空白 */
.kv-grid .row.span-2{grid-column:1 / -1}
.kv-grid .row.span-2 .v{font-weight:500;line-height:1.75}
/* .dot-list 的 ul 默认缩进（padding-left:40px）叠在 li 的 14px 上会让整条列表内缩、与卡片左缘对不齐；
 * 客户端侧已有 .shell.hc-c .dot-list 覆盖，这里补齐基础层（内联 margin-top 仍生效）。 */
.dot-list{margin:0;padding-left:0}
/* ---------- 08 订单明细 · 原「右冻结列」（**已于 2026-10-12 整块移除**） ----------
 * 2026-09-16 引入：横向滚动时把表末的「成交单价」钉在右缘，便于商家对单时常驻可见。
 * 2026-10-12 掌柜点选删除该列 —— 它与「售价（快照）」在本系统里**恒等**（下单那一刻即把成交价
 *   锁成售价快照，且 PUT /api/order 拒收 prices），属重复信息。列既已不存在，冻结机制整套移除
 *   （base.css / 视图层均无引用方，`.tbl` 的其它表从未用过它）。
 * ⚠️ 若日后又要给表格加右冻结列，**别照抄旧位移算法** —— 本表是 table-layout:auto，
 *   目标列宽随内容浮动，写死 `right` 位移量会同时产生「压边」与「裂缝（底层列从缝里透出）」两种缺陷。 */
/* ============================================================
 * 商家端「分类管理」· 两栏主从 + 详情抽屉（2026-09-16 重构落地）
 * 依据设计稿 Ardot 726476961587148：主视图 / 二级分类详情抽屉 / 新增二级分类弹窗
 * 作用域 .shell.hc-mcat —— 仅「分类管理」页生效，不污染其他商家端页面。
 * 布局：原三栏级联（280 / 320 / 1fr）+ 右栏三个页签
 *       → 左 248 一级分类导航 + 右侧二级分类卡片网格；详情移入 560 抽屉、三段同屏。
 * 令牌沿用「商品管理」那套设计系统层：accent #0064E0 · ink #1D1D1F · ink-3 #6E6E73
 *       hairline #E4E7EC · surface #F7F9FB · warn #B26A00 · err #D93025
 * 密度：一级导航 248 · 卡片圆角 12 · 控件高 38
 * 约定：既有 .cats3 / .cat-it 规则一条不改，只在本层按更高特异性覆盖布局；
 *       卡片拖影挂在 body 上、不在本作用域内，故卡片外观用组合选择器补一份字面色值。
 * ============================================================ */
.shell.hc-mcat{
  --ink:#1D1D1F; --t1:#1D1D1F; --t2:#333333; --t3:#6E6E73; --t4:#86868B; --t5:#A1A1A6;
  --line:#E4E7EC; --line2:#D2D2D7; --line3:#EDEDF0; --line4:#F0F0F0; --line5:#F0F0F2;
  --bd:#E4E7EC; --bd-strong:#CED0D4; --bd-soft:#EDEDF0;
  --canvas:#fff; --sf:#F7F9FB; --sf2:#FAFBFC; --surface:#F1F3F6;
  --pri:#0064E0; --pri-600:#0457CB; --pri-weak:#FFF6DA; --pri-100:#CFE2F7;
  --ok:#1E8E3E; --ok-weak:#EAF6EE;
  --warn:#B26A00; --warn-weak:#FFF8EC;
  --err:#D93025; --err-weak:#FDECEA;
}
.shell.hc-mcat .content{padding:22px clamp(16px,2vw,24px) 32px}
.shell.hc-mcat .page-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.shell.hc-mcat .page-title{font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.4px;line-height:1.2}
.shell.hc-mcat .page-sub{font-size:13px;color:var(--t3);line-height:1.5;flex:1 1 420px;min-width:0}
/* ---------- 工具栏 ---------- */
.shell.hc-mcat .mc-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.shell.hc-mcat .mc-search{display:flex;align-items:center;gap:8px;width:260px;height:38px;padding:0 13px;
  border:1px solid var(--line);border-radius:999px;background:#fff;flex-shrink:0}
.shell.hc-mcat .mc-search .mc-si{color:var(--t5);font-size:14px;flex-shrink:0}
.shell.hc-mcat .mc-search input{flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;
  font-size:13px;color:var(--ink)}
.shell.hc-mcat .mc-search:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-weak)}
.shell.hc-mcat .mc-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--surface);flex-shrink:0}
.shell.hc-mcat .mc-seg-b{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:0;border-radius:999px;background:transparent;font-size:13px;color:var(--t3);
  cursor:pointer;transition:background .15s,color .15s}
.shell.hc-mcat .mc-seg-b em{font-style:normal;font-size:11px;font-weight:600;color:var(--t4);
  font-variant-numeric:tabular-nums}
.shell.hc-mcat .mc-seg-b:hover{color:var(--ink)}
.shell.hc-mcat .mc-seg-b.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.shell.hc-mcat .mc-seg-b.on em{color:var(--pri)}
.shell.hc-mcat .mc-grow{flex:1 1 auto;min-width:0}
.shell.hc-mcat .mc-bar .btn.on{background:var(--pri-weak);border-color:var(--pri-100);color:var(--pri-600)}
.shell.hc-mcat .mc-bar .btn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
/* ---------- 两栏（覆盖 .cats3 的三栏栅格） ---------- */
.shell.hc-mcat .cats3{grid-template-columns:248px minmax(0,1fr);gap:16px;align-items:stretch}
.shell.hc-mcat .cats3 > .cats-col,
.shell.hc-mcat .cats3 > .mc-work{max-height:calc(100vh - var(--vh-chrome-mcat))}
/* ---------- 左栏 · 一级分类导航 ---------- */
.shell.hc-mcat .mc-nav{padding:12px;min-height:280px}
.shell.hc-mcat .mc-nav .card-title{font-size:13px;font-weight:600;padding:0 2px}
.shell.hc-mcat .mc-nav-hint{font-size:11px;color:var(--t5);padding:6px 2px 0;line-height:1.5}
.shell.hc-mcat .mc-nav .cats-list{margin-top:8px}
.shell.hc-mcat .mc-nav .cat-it{height:40px;padding:0 10px;border:1px solid transparent;border-radius:8px;
  margin-bottom:2px;background:transparent}
.shell.hc-mcat .mc-nav .cat-it:hover{border-color:var(--line);background:var(--sf)}
.shell.hc-mcat .mc-nav .cat-it.on{border-color:transparent;background:var(--pri-weak)}
.shell.hc-mcat .mc-nav .cat-it.on .ci-name{color:var(--pri-600);font-weight:600}
.shell.hc-mcat .mc-nav .cat-it.on .ci-badge{background:#fff;color:var(--pri-600)}
.shell.hc-mcat .mc-nav .ci-name{flex:1 1 auto;min-width:0;font-size:13px;font-weight:500}
.shell.hc-mcat .mc-nav .ci-badge{font-size:11px;background:transparent;color:var(--t4);padding:1px 6px}
.shell.hc-mcat .mc-nav .ci-badge.zero{color:var(--warn);background:var(--warn-weak)}
/* 拖拽手柄：常显 —— 让「可拖动」不再只在悬停时才被发现；进入排序模式后加强 */
.shell.hc-mcat .ci-grip{display:inline-flex;align-items:center;color:var(--line2);flex-shrink:0;
  cursor:grab;transition:color .15s}
.shell.hc-mcat .mc-nav .cat-it:hover .ci-grip{color:var(--t4)}
.shell.hc-mcat .cats3.sorting .ci-grip{color:var(--pri)}
.shell.hc-mcat .mc-nav .cat-it .ci-ops{background:linear-gradient(90deg,rgba(255,255,255,0),#fff 16px)}
.shell.hc-mcat .mc-nav .cat-it:hover .ci-ops{background:linear-gradient(90deg,rgba(247,249,251,0),var(--sf) 16px)}
.shell.hc-mcat .mc-nav .cat-it.on .ci-ops{background:linear-gradient(90deg,rgba(234,242,254,0),var(--pri-weak) 16px)}
/* ---------- 右区 · 二级分类卡片网格 ---------- */
.shell.hc-mcat .mc-work{display:flex;flex-direction:column;min-width:0;min-height:0;gap:12px}
.shell.hc-mcat .mc-work-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.shell.hc-mcat .mc-work-hd b{font-size:13px;font-weight:600;color:var(--ink)}
.shell.hc-mcat .mc-work-hd span{font-size:12px;color:var(--t4)}
.shell.hc-mcat .mc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:12px;align-content:start;margin-top:0;padding:2px 4px 6px 2px;overflow-y:auto;min-height:0}
.shell.hc-mcat .mc-grid-empty{grid-column:1 / -1;padding:34px 16px;border:1px dashed var(--line2);
  border-radius:12px;background:var(--sf2);color:var(--t4);font-size:13px;line-height:1.9;text-align:center}
/* 卡片外观用组合选择器：拖影 .cat-ghost.cc 是原卡片的克隆、挂在 body 上，拿不到本作用域的令牌，
 * 所以这一组只写字面色值，让「被拖起的卡片」与网格里的卡片长得一模一样。 */
.shell.hc-mcat .mc-grid .cat-it, .cat-ghost.cc{display:block;margin:0;padding:0;
  border:1px solid #E4E7EC;border-radius:12px;background:#fff}
.shell.hc-mcat .mc-grid .cat-it{position:relative;
  transition:border-color .15s,box-shadow .15s}
.shell.hc-mcat .mc-grid .cat-it:hover{border-color:var(--pri-100);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.shell.hc-mcat .mc-grid .cat-it.on{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-weak)}
.shell.hc-mcat .cc-thumb, .cat-ghost.cc .cc-thumb{display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1 / 1;background:#F1F3F6;overflow:hidden;border-radius:11px 11px 0 0}
.shell.hc-mcat .cc-thumb img, .cat-ghost.cc .cc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shell.hc-mcat .cc-ph, .cat-ghost.cc .cc-ph{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;width:100%;height:100%;color:#D2D2D7;background:#FAFBFC;
  box-shadow:inset 0 0 0 1px #EDEDF0}
.shell.hc-mcat .cc-ph em, .cat-ghost.cc .cc-ph em{font-style:normal;font-size:11px;color:#A1A1A6}
.shell.hc-mcat .cc-body, .cat-ghost.cc .cc-body{display:block;margin:0 var(--pad-card) var(--pad-card);padding:9px 2px 2px}
.shell.hc-mcat .cc-body .ci-name, .cat-ghost.cc .ci-name{display:block;font-size:13px;font-weight:500;
  color:#1D1D1F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell.hc-mcat .cc-meta, .cat-ghost.cc .cc-meta{display:block;margin-top:3px;font-size:11px;color:#86868B;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.shell.hc-mcat .cc-meta.warn, .cat-ghost.cc .cc-meta.warn{color:#B26A00}
/* 卡片操作：浮在缩略图右上角，不挤压卡片主体 */
.shell.hc-mcat .mc-grid .cat-it .ci-ops{display:none;position:absolute;right:8px;top:8px;margin:0;
  padding:0 9px 0 14px;height:26px;transform:none;align-items:center;gap:8px;border-radius:999px;
  background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(0,0,0,.12);font-size:12px}
.shell.hc-mcat .mc-grid .cat-it:hover .ci-ops,
.shell.hc-mcat .mc-grid .cat-it:focus-within .ci-ops{display:inline-flex}
/* 排序模式：卡片抓手可视，同时抑制「误点开抽屉」 */
.shell.hc-mcat .cats3.sorting .mc-grid .cat-it{cursor:grab}
.shell.hc-mcat .cats3.sorting .mc-grid .cat-it .ci-ops{display:none!important}
.shell.hc-mcat .cats3.sorting .mc-grid .cat-it::after{content:"";position:absolute;left:8px;top:8px;
  width:22px;height:22px;border-radius:999px;background-color:rgba(255,255,255,.94);
  background-image:radial-gradient(var(--pri) 1.1px,transparent 1.2px);
  background-size:7px 7px;background-position:4px 4px;background-repeat:repeat;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
/* ---------- 二级分类详情抽屉（1000 · 三段同屏 · 2026-09-17 加宽并重排） ---------- */
.shell.hc-mcat .drw.drw-cat{width:1000px;max-width:96vw}
.shell.hc-mcat .mc-drw-hd{display:flex;flex-direction:column;gap:4px;min-width:0}
.shell.hc-mcat .mc-drw-crumb{font-size:12px;color:var(--t4)}
.shell.hc-mcat .mc-drw-tt{font-size:17px;font-weight:600;color:var(--ink);line-height:1.25}
.shell.hc-mcat .mc-drw-b{display:flex;flex-direction:column;gap:22px;padding:20px}
.shell.hc-mcat .mc-sec{display:flex;flex-direction:column;gap:10px}
.shell.hc-mcat .mc-sec-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.shell.hc-mcat .mc-sec-hd b{font-size:13px;font-weight:600;color:var(--ink)}
.shell.hc-mcat .mc-sec-hd span{font-size:11px;color:var(--t4)}
.shell.hc-mcat .mc-note{font-size:12px;line-height:1.75;color:var(--t3);background:var(--sf);
  border-radius:10px;padding:10px 12px}
.shell.hc-mcat .mc-note b{color:var(--ink)}
.shell.hc-mcat .mc-thumb-row{display:flex;align-items:center;gap:16px}
.shell.hc-mcat .mc-thumb-ops{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.shell.hc-mcat .mc-thumb-ops .hint{font-size:12px;color:var(--t4);line-height:1.7}
.shell.hc-mcat .mc-sec-ft{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;
  border-top:1px solid var(--line4)}
.shell.hc-mcat .mc-sec .sps-head{margin-top:0}
/* 参数行（.kv-row.tpl）曾是 560 抽屉的适配产物：当时内容区仅 520px，小于全局最小列宽合计 570px，
   会把行尾的「移除」挤出可视区（2026-09-16 实测）。抽屉 2026-09-17 加宽到 1000 后内容区约 930px，
   压缩的成因已消失，故撤销该覆写、回到全局 .kv-row.tpl —— 「候选选项」列因此从约 166px 放宽到约 400px。 */

@media (max-width:1366px){
  .shell.hc-mcat .cats3{grid-template-columns:220px minmax(0,1fr)}
}
@media (max-width:1080px){
  .shell.hc-mcat .cats3{grid-template-columns:minmax(0,1fr)}
  .shell.hc-mcat .cats3 > .cats-col,
  .shell.hc-mcat .cats3 > .mc-work{max-height:none}
  .shell.hc-mcat .mc-nav{min-height:0}
  .shell.hc-mcat .mc-nav .cats-list{max-height:240px}
}
/* ============================================================
   采购模板（2026-09-17 新增）—— 只**追加**作用域层，不改动任何既有规则
   ① .shell.hc-c .tpl-* ：购物车页内的【采购模板】模块（整页 #c-cart）
   ② .hc-tpl-modal …    ：新建 / 加载 / 编辑 / 重命名 / 删除弹层
      —— #modal-root 挂在 .shell **之外**，拿不到 .shell 作用域的规则，故按弹层类名单独写；
         需要同时作用于两处的（.tpl-empty）用双写选择器。
   ③ 色值一律走 :root 的 --* 令牌，不写硬编码色（门禁 hardcoded-color 盯新增硬编码色）。
   ============================================================ */
.shell.hc-c .tpl-list{display:flex;flex-direction:column;margin-top:4px}
.shell.hc-c .tpl-nm{font-size:14px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:10px;min-width:0}
.shell.hc-c .tpl-src{font-size:12px;font-weight:400;color:var(--pri)}
.shell.hc-c .tpl-empty,.hc-tpl-modal .tpl-empty{border:1px dashed var(--line2);border-radius:10px;padding:18px;text-align:center;font-size:13px;color:var(--t5)}
.shell.hc-c .tpl-empty{margin-top:8px}
.hc-tpl-modal .tpl-modes .btn.block{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  height:auto;padding:12px 16px;line-height:1.5;text-align:left;white-space:normal}
.hc-tpl-modal .tpl-modes .btn.block span{font-size:12px;font-weight:400;opacity:.85}
.hc-tpl-modal .tpl-modes .btn.block b{font-size:14px}
/* ---------- 11b. 购物车提交卡：下沉到商品列表下方（2026-09-17 掌柜点选 div.card.submit-card 指定） ----------
   原布局 = .cart-layout 两栏（商品表格 1fr ＋ 提交卡 342px 窄栏），表单字段在窄栏里被迫纵向堆叠；
   现改单列纵向 —— 提交卡全宽落在「商品列表 → 采购模板」之后（模板卡仍在最上面贴着列表，见 10-client.js 注释）。
   ① **只覆盖列定义、保留 grid 与 gap**：有意不写 display:block，否则原有的 22px 行距要另配一套 margin；
      列宽用 minmax(0,1fr) 而非 1fr —— 表格 min-width 1380px，1fr 的 min-content 会自动撑破网格。
   ② 卡片自带的 margin-top（`.card + .card` 各 16px；原还有「采购模板」旧卡 `.tpl-card`，该类已于
      2026-10-14 死 CSS 清理删除）会与 gap 叠加成 38px，故容器内清零，行距只由 gap 提供。
   ③ 全宽后字段改 .sc-grid 栅格：企业信息条 → 收货地址（跨列）→ 电话 · 交期 · 备注（三列）→ 操作区。
   抽屉版购物车（#cart-drawer 的 .cd-form）不引用本组选择器，其字段纵向布局保持不变。
   ==================================================================== */
.shell.hc-c .cart-layout{grid-template-columns:minmax(0,1fr)}

.shell.hc-c .cart-layout > .card + .card{margin-top:0}
.shell.hc-c .submit-card .sc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;margin-top:14px;align-items:start}
.shell.hc-c .submit-card .sc-grid > .span-3{grid-column:1 / -1}
.shell.hc-c .submit-card .sc-grid .field{margin-bottom:0}
/* 企业信息条：轻量一行 + 细线分隔，与抽屉版 .cd-ent 同口径（不做色块） */
.shell.hc-c .submit-card .sc-ent{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line4);font-size:14px;font-weight:600;color:var(--t1)}
.shell.hc-c .submit-card .sc-ent .sc-k{font-size:12px;font-weight:400;color:var(--t4);flex:0 0 auto}
/* 操作区：说明靠左、主按钮靠右（原为整宽按钮 ＋ 下方说明） */
.shell.hc-c .submit-card .sc-act{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border-top:1px solid var(--line4);padding-top:16px}
.shell.hc-c .submit-card .sc-act .hint{margin-top:0;flex:1 1 300px;min-width:0}
.shell.hc-c .submit-card .sc-act .btn{flex:0 0 auto;min-width:200px}
/* 窄屏降级：三列 → 两列 → 单列；窄屏按钮恢复整宽 */
@media (max-width:1080px){
  .shell.hc-c .submit-card .sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 两列下「电话 | 交期」占一行，备注（.sc-note）跨全宽 —— 否则它独占半行、右侧空一块 */
  .shell.hc-c .submit-card .sc-grid > .sc-note{grid-column:1 / -1}
}
@media (max-width:900px){
  .shell.hc-c .submit-card .sc-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .shell.hc-c .submit-card .sc-act{flex-direction:column;align-items:stretch}
  .shell.hc-c .submit-card .sc-act .btn{width:100%}
}
/* ===== 11b. 采购模板 · 右侧滑出 1200px 双栏抽屉（2026-09-17 重构 / 2026-09-19 加宽 + 全量重设计） =====
 * 面板宽度走**独立档 .c-drawer.w-lg（1200px）**，刻意不动 .c-drawer 默认的 1000px ——
 * 那一档被商品详情等抽屉共用，统一提档会连带影响它们（.w800 则是购物车抽屉专用档）。
 * ⚠️ 宽度档位分散在**两个文件两处**：本文件顶部的宽度定义 + 上面 ≤1080px 那条全宽回退
 * （".c-drawer,.c-drawer.w800,.c-drawer.w-lg"，悬空选择器老坑）。**必须成对维护**，漏改即窄屏溢出；
 * 该约束由 test/tpl-smoke.js 末尾的「源码守卫」断言钉住。
 * 左栏 .tpl-dr-l = 248px（2026-09-19 二次对齐设计稿：232 → 248），1200px 下右栏得 952px，
 * 新增宽度全部让给无 width 的商品名称列（table-layout:fixed）。
 * 内部规则一律挂 #tpl-drawer 前缀：单靠 .shell.hc-c 与更靠上的 .shell.hc-c .c-drawer-body
 * 同特异性会被压掉，必须靠 ID 特异性稳定取胜（与 #cart-drawer 同一手法）。
 * 色值全部走令牌，客户端层不写死色。
 * —— 2026-09-19 全量重设计 + 二次对齐设计稿（Ardot 727523377144108）四处结构变化，改本段注意联动：
 *   ① 表格由 7 列（含序号）改 **6 列**、末列由占位改**参考金额**：列宽以内联 th width 为准
 *      （76 / fill / 156 / 112 / 104 / 108），本段只负责内边距、行高与对齐；
 *   ② 查看态顶部新增**模板概览条** .tpl-ov（4 张统计卡，纯前端推导、不落库）；
 *   ③ 右栏操作分层：「编辑」为蓝描边按钮，「重命名 / 删除 / 另存为副本」收进 .tpl-more 溢出菜单
 *      （复用站点 .c-dd 范式，仅改触发器外观与菜单右对齐）；
 *   ④ 底部操作区由「右对齐两个按钮」改**左提示 + 右按钮组**（space-between）：主行动是墨黑
 *      「覆盖并加载到购物车」，安全行动是描边「追加到购物车」。
 * ⚠️ 列宽 / 行高 / 缩略图尺寸的**权威口径在设计稿**。本段、10-client.js 的内联 th width、
 *    test/tpl-smoke.js 的列宽断言 —— 三处必须一致，改一处先看另两处。 */
/* 购物车「采购模板」入口卡（2026-09-19 重构，其前身是两个等权 ghost 按钮裸排）。
 * 刻意仍放在 .tbl-wrap **之外** —— 那层带 inline overflow-x:auto，放进去会跟着表格一起横向滚动；
 * 与表体的间距由 .cart-layout 的 gap 给。
 * 视觉与商品详情 / 模板抽屉同源：米黄图标块 + 17px 名称 + 11px 元信息 + 墨黑主按钮 + 蓝描边次按钮。 */
.shell.hc-c .cart-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shell.hc-c .tpl-entry{flex:1 1 100%;display:flex;align-items:center;gap:12px;min-width:0;
  padding:12px 14px;background:var(--canvas);border:1px solid var(--line3);border-radius:var(--r-md);box-shadow:var(--sh1)}
.shell.hc-c .tpl-entry-ic{flex:0 0 38px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);background:var(--pri-weak);color:var(--warn-ink)}
.shell.hc-c .tpl-entry-tx{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.shell.hc-c .tpl-entry-nm{font-size:17px;font-weight:700;color:var(--t1);line-height:1.25}
.shell.hc-c .tpl-entry-mt{font-size:11px;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 本单来源模板标记：米黄胶囊 + 棕字（与模板抽屉左栏的数量徽章同一语义色） */
.shell.hc-c .tpl-entry-src{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:999px;background:var(--pri-weak);color:var(--warn-ink);font-size:11px;font-weight:600;white-space:nowrap}
.shell.hc-c .tpl-entry-src a{cursor:pointer;font-weight:700;padding:0 2px;color:inherit}
.shell.hc-c .tpl-entry-src a:hover{color:var(--err-ink)}
.shell.hc-c .tpl-entry-ops{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:10px}
.shell.hc-c .tpl-entry-ops .btn{height:34px;border-radius:999px;font-size:12.5px;padding:0 16px}
/* 次按钮走蓝描边（比纯 ghost 略强一档，又不与墨黑主按钮抢） */
.shell.hc-c .tpl-entry-ops .btn.ghost{border-color:var(--pri);color:var(--pri)}
.shell.hc-c .tpl-entry-ops .btn.ghost:hover:not(:disabled){background:var(--pri-weak)}
/* 窄屏：文字组与按钮组换行，按钮组左对齐（否则 1080 以下按钮组会被文字挤爆） */
@media (max-width:1080px){
  .shell.hc-c .tpl-entry{flex-wrap:wrap}
  .shell.hc-c .tpl-entry-ops{margin-left:0;flex:1 1 100%;justify-content:flex-start}
}
#tpl-drawer .c-drawer-body{padding:0;display:flex;flex-direction:column;overflow:hidden}
/* 🔴 行项**不可压缩**（flex:0 0 auto）—— 2026-10-01 全局布局排查第二轮（真溢出唯一残留项）。
 * 背景：.tpl-dr-lscroll 是定高/限高的**纵向 flex 滚动容器**（宽屏 = 抽屉可用高；≤1080 由
 *   styles.css:2904 限 max-height:180px）。纵向 flex 的默认 flex-shrink:1 会让「装不下的行」
 *   **优先被压扁**，而不是让容器溢出滚动 —— 行被压到 min-height:62px 后，行内两行
 *   （.tpl-li-h 名称行 + .tpl-li-m 元信息行）可分配高不足，.tpl-li-m 又会二次收缩到 ~12.6px
 *   （自身行高 19.2px）→ 其内 b/span 是 display:block 不可再压 → 上下各被 overflow:hidden
 *   **静默裁掉 3.3px**（实测 ≤1080 堆叠态 3 行全中：OVF n=18 / worst −3.3）。
 * 修法：行高回到内容自然高（桌面端 68.6px），滚动交还容器（.tpl-dr-lscroll overflow-y:auto）。
 *   **桌面端零视觉变化** —— 宽屏列表高 810px 时本就无压缩（free space > 0，shrink 不生效）；
 *   且顺带修掉同一机制在桌面端的**潜在**缺陷：模板数多到超过列表高时，原先同样会把每行压到
 *   62px（每行静默裁 6.6px），改后统一退化为「列表内滚动」。 */
#tpl-drawer .tpl-li{display:flex;flex-direction:column;gap:5px;min-height:62px;box-sizing:border-box;padding:10px;border-radius:12px;border:1px solid transparent;cursor:pointer;flex:0 0 auto}
/* 选中态：米黄底 + 蓝字，**刻意不描边**（设计稿口径 —— 62px 行内再套一圈蓝边会显脏） */
#tpl-drawer .tpl-li.on{background:var(--pri-weak);border-color:transparent}
#tpl-drawer .tpl-li.on .tpl-li-n{color:var(--pri-600);font-weight:700}
/* 元信息行（项数 · 日期）：单行 nowrap 文本行，行高 19.2px 与盒高**恰好相等** → 其内 b/span 四边
 * 贴住内壁（T/B/L 三向 d=0）→ overflow:hidden 会把开发预览轮廓削掉一半（实测 A=21 / B1=21）。
 * 与 .c-drawer-crumb（styles.css:1079）**同一解法**：改 overflow:clip + overflow-clip-margin:3px，
 * 裁切边界外扩 3px 恰好容下 2px 虚线 + 1px offset，**布局零变化**；前置保留 overflow:hidden 让
 * 不支持 clip 的老浏览器退回现状。宽表格/长文本的横向裁切语义不变（本行 text-overflow 为 clip，
 * 子 span 各自带 ellipsis）。 */
#tpl-drawer .tpl-li-m{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t5);overflow:hidden;overflow:clip;overflow-clip-margin:3px;white-space:nowrap}
#tpl-drawer .tpl-li.on .tpl-li-m b{color:var(--warn-ink)}
#tpl-drawer .tpl-dr-ednm .input{width:100%;max-width:320px;height:42px;border-radius:10px}
/* 编辑态头部按钮组：h38 紧凑版（底部另有一组 h42 的，两处都能存 —— 设计稿两处都画了） */
#tpl-drawer .tpl-dr-hbtns .btn{height:38px;border-radius:999px;font-size:13.5px;padding:0 18px}
/* 抽屉头 48px：关闭按钮 30px 蓝描边胶囊（设计稿口径，比 .btn.sm 更扁更圆） */
#tpl-drawer .c-drawer-head{height:48px;padding:0 14px 0 18px}
#tpl-drawer .c-drawer-head .btn{height:30px;padding:0 14px;border-radius:999px;border-color:var(--pri);color:var(--pri);font-size:13px}
/* 「⋯」溢出菜单（2026-09-19 重设计）：复用站点既有 .c-dd / .c-dd-p / .open 范式，
 * 仅覆盖触发器外观与菜单右对齐 —— 抽屉贴着屏幕右边，左对齐会溢出视口。
 * 外观对齐设计稿：34×34 胶囊、--sf 底、--line2 描边、⋯ 15px 粗体 --t4。 */
#tpl-drawer .tpl-more{position:relative;display:inline-flex}
#tpl-drawer .tpl-more-p a.danger{color:var(--err-ink)}
#tpl-drawer .tpl-more-p a.danger:hover{background:var(--err-weak);color:var(--err-ink)}
#tpl-drawer .tpl-rf-btns .btn{height:42px;border-radius:999px;font-size:14.5px;padding:0 20px}
#tpl-drawer .tpl-rf-btns .btn.pri{padding:0 22px}
/* 状态卡：无论现货/待询，值都降为 16px 并与 7px 状态点同排（点在后，先读数后看状态）。
 * ⚠️ 字号必须写进**两个** tone 规则 —— 只写 ok 会让 warn 态回弹成 22px，切换时卡片高度跳动。 */
#tpl-drawer .tpl-ov-c.ok .tpl-ov-v,#tpl-drawer .tpl-ov-c.warn .tpl-ov-v{font-size:17px}
#tpl-drawer .tpl-ov-c.ok .tpl-ov-v{color:var(--ok-ink)}
#tpl-drawer .tpl-ov-c.warn .tpl-ov-v{color:var(--warn-ink)}
/* 窄屏：4 张卡挤在 1 行会把数字压到换行，退成 2×2 */
@media (max-width:1080px){
  #tpl-drawer .tpl-ov{grid-template-columns:repeat(2,1fr)}
}
/* 列预算：抽屉内表格水平内边距统一 10px（对齐设计稿）。table-layout:fixed 下 th 的内联 width
 * 是含 padding 的 border-box，故「列宽 - 20px」才是内容可用宽度，量缩略图 / 数量时按这个算。
 * 带 #tpl-drawer 前缀，不外溢到目录页与商家端表格。 */
#tpl-drawer .tbl th,#tpl-drawer .tbl td{padding-left:10px;padding-right:10px}
/* 缩略图 44×44 / r10（抽屉档专用；站点其它 .thumb 各自有作用域覆盖，互不影响） */
#tpl-drawer .tpl-dtbl .thumb{width:44px;height:44px;border-radius:10px;box-sizing:border-box;background:var(--line4);color:var(--ph-c);font-size:15px;font-weight:700}
#tpl-drawer .tpl-dtbl .sp-tag{padding:3px 8px;border-radius:7px;font-size:12px}
#tpl-drawer .tpl-dtbl .stepper{display:inline-flex}
/* 字号阶梯补档（2026-09-19 字体调大）：以下两处的字号原本继承全站通用类，
 * 不显式覆盖就跟不上抽屉内的 +1 档。 */
#tpl-drawer .input{font-size:14px}
/* 窄屏（≤1080px 时 .c-drawer 已整体退化为全屏）：左右双栏 → 上下堆叠；左栏限高、内部滚动 */
@media (max-width:1080px){
  #tpl-drawer .tpl-dr{flex-direction:column}
  #tpl-drawer .tpl-dr-l{flex:0 0 auto;width:100%;border-right:0;border-bottom:1px solid var(--line3)}
  #tpl-drawer .tpl-dr-lscroll{max-height:180px}
}
/* ============================================================
   二级分类详情抽屉 · 宽屏重排（2026-09-17，抽屉 560 → 1000）
   560 时代「三段纵向平铺」在 520px 内容区里是合理的；换成约 930px 后反而显得松散
   （缩略图只有 72、提示挤在窄列里折行、参数行被压、规格名称被拉成超长输入框）。本次重排：
   ① 缩略图段：图 72 → 96（仍 1:1），操作按钮由竖排改横排，提示独占一行横跨右侧整条带；
   ② 段落卡片化：内容区转灰底、每段抬为白卡，三段边界一眼可辨（三段同屏、无页签）；
   ③ 参数行：见上方注释 —— 撤销压缩覆写，回到全局 5 列；
   ④ 规格模板行：原 minmax(160px,1fr) 在 930px 下会把「规格名称」拉成约 570px 的超长输入框，
      改为该列 1fr + 适中上限，余宽分给单位 / 换算基数 / 操作三列（名称列约占行宽 49%）；
   ⑤ 段落底部：左「＋ 添加」、右「保存」（保存按钮 margin-left:auto 推到行尾）。
   窄屏（≤1080px，抽屉走 max-width:96vw）缩略图与卡片内距各收一档；行仍按 grid 最小列宽自适应，
   不写死像素，避免 96vw 视口下横向溢出。
   ============================================================ */
.shell.hc-mcat .drw-cat .drw-x{display:inline-flex;align-items:center;height:32px;padding:0 12px;
  box-sizing:border-box;border:1px solid var(--bd-strong);border-radius:8px;font-size:13px}
.shell.hc-mcat .drw-cat .drw-x:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-weak)}
.shell.hc-mcat .drw-cat .mc-drw-b{padding:20px 28px 28px;background:var(--sf);gap:16px}
.shell.hc-mcat .drw-cat .mc-sec{background:var(--canvas);border:1px solid var(--line4);border-radius:12px;
  padding:16px 18px;gap:12px}
.shell.hc-mcat .drw-cat .mc-note{border:1px solid var(--line4)}
.shell.hc-mcat .drw-cat .mc-sec-ft .btn.pri{margin-left:auto}
.shell.hc-mcat .drw-cat .mc-thumb-row{align-items:flex-start;gap:20px}
.shell.hc-mcat .drw-cat .cat2th-lg{width:96px;height:96px;font-size:30px;border-radius:14px}
.shell.hc-mcat .drw-cat .mc-thumb-ops{flex:1 1 auto;min-width:0;flex-direction:row;flex-wrap:wrap;
  align-items:center;gap:10px}
.shell.hc-mcat .drw-cat .mc-thumb-ops .hint{flex:1 1 100%}
.shell.hc-mcat .drw-cat .sps-head,
.shell.hc-mcat .drw-cat .sps-row{grid-template-columns:minmax(220px,1fr) 150px 170px 120px}
@media (max-width:1080px){
  .shell.hc-mcat .drw-cat .mc-drw-b{padding:16px}
  .shell.hc-mcat .drw-cat .mc-sec{padding:14px}
  .shell.hc-mcat .drw-cat .cat2th-lg{width:80px;height:80px;font-size:26px}
  .shell.hc-mcat .drw-cat .sps-head,
  .shell.hc-mcat .drw-cat .sps-row{grid-template-columns:minmax(180px,1fr) 130px 150px 104px}
}
   这里用 !important 一劳永逸）。 */
.shell.hc-mcat .drw-cat .mc-drw-tabs{padding:0 28px;gap:4px;flex:0 0 auto}
.shell.hc-mcat .drw-cat .mc-drw-tabs button{padding:13px 14px;font-size:13.5px}
.shell.hc-mcat .drw-cat .mc-drw-tabs button em{font-style:normal;margin-left:7px;padding:1px 7px;
  border-radius:999px;background:var(--line5);color:var(--t4);font-size:11px;font-weight:600;line-height:1.6}
.shell.hc-mcat .drw-cat .mc-drw-tabs button.on em{background:var(--pri-weak);color:var(--pri-600)}
.shell.hc-mcat .drw-cat .ctab-panel[hidden]{display:none!important}
/* ============================================================
   标签体系（2026-09-17）—— 只**追加**作用域层，不改动任何既有规则
   ① .shell.hc-c .tagbar 族    ：客户端商品目录的「第二层标签筛选条」
   ② .shell.hc-mcat .mtag-*    ：商家端分类抽屉第 4 页签【标签】的标签列表
   ③ .shell.hc-mprod .ptag-*   ：商家端商品表单的「标签」多选控件
   色值一律走 :root 的 --* 令牌（白字走 --canvas = #FFFFFF，不写字面 #fff）。
   ============================================================ */
/* ① 客户端标签筛选条：与 .cat2bar 同构（恒常单行 + 内滚 + 左右箭头），但整体**降一档** ——
   它紧挨在二级分类条下方，让「分类筛选 / 标签筛选」两层在视觉上分得出主次。
   —— 2026-09-19 分层可视（掌柜点选方向 B）。三条手段**全是非文字的**：`.cat2bar .lb` 的文字标签
   是掌柜点选删除的、代码注释写着「不要自动补回」，所以层级不能靠加回「分类：/ 标签：」前缀表达：
     ① 左侧竖线 + 整体右缩 16px → 视觉上「挂在上一层下面」；
     ② chip 更小更轻，且**选中态不再用墨黑实心**（原先与 .cat2chip 同为 --pri-action 实心，
        两层选中态长得一模一样，层级反而看不出来）→ 改米黄浅底 + 蓝字，明确轻于分类那层；
     ③ 与 .cat2bar 的松紧度**成对一致**（容器 28 / chip 26，同为留 2px）。 */
.shell.hc-c .tagbar{display:flex;align-items:center;gap:8px;height:28px;flex:0 0 auto;
  flex-wrap:nowrap;overflow:hidden;overflow:clip;overflow-clip-margin:6px;margin:0 0 12px 16px;padding-left:12px;
  border-left:2px solid var(--line2)}
.shell.hc-c .tag-scroll{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.shell.hc-c .tag-scroll::-webkit-scrollbar{display:none}
.shell.hc-c .tagchip{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--canvas);color:var(--t3);font-size:12px;
  cursor:pointer;white-space:nowrap;user-select:none;flex:0 0 auto;
  transition:border-color .15s,background .15s,color .15s}
.shell.hc-c .tagchip:hover{border-color:var(--pri);color:var(--pri-600)}
/* 选中态刻意**轻于**二级分类那层的 --pri-action 墨黑实心：浅底蓝字、无描边 */
.shell.hc-c .tagchip.on{background:var(--pri-weak);border-color:transparent;color:var(--pri-600);font-weight:600}
.shell.hc-c .tag-clr{flex:0 0 auto;font-size:12px;color:var(--t4);cursor:pointer;white-space:nowrap}
.shell.hc-c .tag-clr:hover{color:var(--err)}
/* 箭头按需显隐（2026-09-19）：由 hcBarArrows()（50-render.js）在渲染后实测 scrollWidth，
 * 未溢出即给 bar 加 .no-ovf → 藏起那对无用箭头（两条各一对、共 4 个，视觉偏重）。 */
.shell.hc-c .cat2bar.no-ovf .nt-arrow,
.shell.hc-c .tagbar.no-ovf .nt-arrow{display:none}
/* ② 商家端分类抽屉 · 标签列表（第 4 页签） */
.shell.hc-mcat .drw-cat .mtag-list{display:flex;flex-direction:column;gap:6px}
.shell.hc-mcat .drw-cat .mtag-row{display:flex;align-items:center;gap:14px;padding:10px 14px;
  border-radius:10px;background:var(--sf);flex-wrap:wrap}
.shell.hc-mcat .drw-cat .mtag-n{font-size:13px;font-weight:600;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-mcat .drw-cat .mtag-u{font-size:12px;color:var(--t4);margin-right:auto;white-space:nowrap}
.shell.hc-mcat .drw-cat .mtag-u.zero{color:var(--t5)}
.shell.hc-mcat .drw-cat .mtag-empty{padding:20px 16px;text-align:center;font-size:13px;color:var(--t5);
  border:1px dashed var(--line2);border-radius:10px}
/* ③ 商家端商品表单 · 标签多选（chips + 展开面板）—— 面板是**内联展开**（非 fixed 浮层），
   因此不需要定位计算，也不会被 .drw-b 的 overflow 裁切。 */
.shell.hc-mprod .drw-prod .field-wide{grid-column:1 / -1}
.shell.hc-mprod .drw-prod .ptag-box{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;min-width:0}
.shell.hc-mprod .drw-prod .ptag-sel{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;min-height:38px;padding:6px 10px;box-sizing:border-box;
  border:1px solid var(--line2);border-radius:10px;background:var(--canvas)}
.shell.hc-mprod .drw-prod .ptag-ph{font-size:12.5px;color:var(--t5)}
.shell.hc-mprod .drw-prod .ptag-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1;
  padding:5px 9px;border-radius:999px;background:var(--pri-weak);color:var(--pri-600);font-weight:600;
  cursor:pointer;white-space:nowrap}
.shell.hc-mprod .drw-prod .ptag-chip i{font-style:normal;font-size:10px;opacity:.65}
.shell.hc-mprod .drw-prod .ptag-chip:hover i{opacity:1}
.shell.hc-mprod .drw-prod .ptag-btn{flex:0 0 auto;height:38px;white-space:nowrap}
.shell.hc-mprod .drw-prod .ptag-panel{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;padding:12px;
  border:1px solid var(--line3);border-radius:10px;background:var(--sf)}
.shell.hc-mprod .drw-prod .ptag-panel[hidden]{display:none!important}
.shell.hc-mprod .drw-prod .ptag-opt{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  padding:7px 12px;border-radius:8px;border:1px solid var(--line2);background:var(--canvas);color:var(--t2);
  cursor:pointer;font-family:inherit}
.shell.hc-mprod .drw-prod .ptag-opt:hover{border-color:var(--pri-100)}
.shell.hc-mprod .drw-prod .ptag-opt.on{border-color:var(--pri);background:var(--pri-weak);color:var(--pri-600);font-weight:600}
.shell.hc-mprod .drw-prod .ptag-ck{display:inline-block;width:16px;height:16px;box-sizing:border-box;
  border:1.6px solid var(--line2);border-radius:5px;position:relative;flex:0 0 16px}
.shell.hc-mprod .drw-prod .ptag-opt.on .ptag-ck{background:var(--pri-action);border-color:var(--pri-action)}
.shell.hc-mprod .drw-prod .ptag-opt.on .ptag-ck::after{content:'';position:absolute;left:4px;top:1px;
  width:4px;height:8px;border:2px solid var(--canvas);border-top:none;border-left:none;transform:rotate(45deg)}
/* 标签录入区（2026-09-17：改为「输入 + 回车」逐个添加）—— 常驻在列表上方，
   列表变长时输入框位置不动（放在列表下方会随条目增长被推走，连续录入时手感很差）。 */
.shell.hc-mcat .drw-cat .mtag-add{display:flex;align-items:center;gap:10px}
.shell.hc-mcat .drw-cat .mtag-in{flex:1 1 auto;min-width:0;height:38px;font-size:13px}
.shell.hc-mcat .drw-cat .mtag-add .btn{flex:0 0 auto;height:38px;white-space:nowrap}
/* 图片上传进度条（2026-09-29 COS 浏览器直传）：固定视口顶部的细条 + 百分比胶囊。
 * 做成全站单例浮条、而不是塞进某个预览容器：三条上传入口（商品主图 / 二级分类缩略图 /
 * 导航页签图标）的预览容器各不相同，且后两者在弹窗里、上传途中可能被关掉 ——
 * 挂进任一个都要写三遍，还会随容器销毁而丢掉进度。
 * 配色一律走主题令牌（--pri 填充 / --line3 轨道 / --ink 深色胶囊），四套主题自动适配。 */
#hc-upbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:130;background:var(--line3);display:none}
#hc-upbar.on{display:block}
#hc-upbar>b{display:block;height:100%;width:0;background:var(--pri);transition:width .12s linear}
#hc-upbar>i{position:absolute;right:12px;top:8px;font-style:normal;font-size:12px;line-height:1;padding:5px 10px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:var(--sh2)}
.cos-panel .btn[disabled]{opacity:.45;cursor:not-allowed}
/* ============================================================
 * 企业端「部门与成员账号」两栏（2026-09-30 两栏化）
 * 左栏 = 筛选/部门栏（全部账号 / 未分配账号 / 各部门），右栏 = 成员列表。
 * 作用域仅 .shell.hc-mem，不污染其它页。
 * ⚠️ 部门操作链**刻意不用 hover 浮层**（既有 .cats3 / .hc-mcat .mc-grid 用的是 hover 浮层）：
 *   浏览器实测左栏项宽 222px、浮层宽 208px、浮层起点 x=3px —— 若 hover 即显现，整行只剩 3px 可点，
 *   「点部门筛选」这个主操作会被浮层吃掉；且浮层的不透明底色会把部门名整块盖住（截图实证）。
 *   故改为「选中后在该行**下方**展开一条 12px 操作链」：名字不被遮挡、整行始终可点、无回流抖动外的副作用。
 * ============================================================ */
.shell.hc-mem .mem-cats{display:grid;grid-template-columns:264px minmax(0,1fr);gap:16px;align-items:start}
.shell.hc-mem .mem-rail{display:flex;flex-direction:column;padding:12px;max-height:calc(100vh - var(--vh-chrome-side))}
.shell.hc-mem .mem-rail .card-title{font-size:13px;font-weight:600;padding:0 2px}
.shell.hc-mem .mem-rail-list{flex:1 1 auto;min-height:0;overflow-y:auto;margin-top:8px;padding-right:2px}
.shell.hc-mem .mem-rail-ft{flex:0 0 auto;padding-top:12px;border-top:1px solid var(--line4)}
.shell.hc-mem .mem-rail .cat-it{position:relative;flex-wrap:wrap;min-height:40px;padding:9px 10px;
  border:1px solid transparent;border-radius:8px;margin-bottom:2px;background:transparent}
.shell.hc-mem .mem-rail .cat-it:hover{border-color:var(--line);background:var(--sf)}
.shell.hc-mem .mem-rail .cat-it.on{border-color:transparent;background:var(--pri-weak)}
.shell.hc-mem .mem-rail .cat-it.on .ci-name{color:var(--pri-600);font-weight:600}
/* 选中项的人数更醒目（2026-10-01）：白胶囊 + 加粗 + 放大一档。左栏是扫描区，人数是判断「点哪个部门」
 * 的主要依据；未选中行保持弱化（--t4 / 11px），形成明确的层级差。 */
.shell.hc-mem .mem-rail .cat-it.on .ci-badge{background:var(--canvas);color:var(--pri-600);font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums}
.shell.hc-mem .mem-rail .ci-name{flex:1 1 auto;min-width:0;font-size:13px;font-weight:500}
.shell.hc-mem .mem-rail .ci-badge{font-size:11px;background:transparent;color:var(--t4);padding:1px 6px;flex-shrink:0}
/* 左栏分组标题（2026-10-06）：把「部门」与上方两个固定项【全部账号】【未分配账号】分开 ——
 * 固定项是「账号范围」筛选、部门是另一维度的分组，同列无标题时会让人读成一条连续列表。
 * 上缘一条发丝线 + 小号灰字做区隔；标题刻意弱于部门名（左栏是扫描区，层级靠字号 + 颜色）。 */
.shell.hc-mem .mem-rail .rail-cap{margin:10px 0 4px;padding:10px 2px 0;border-top:1px solid var(--line4);
  font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--t4)}
/* 操作链 / 成员行的小型按钮（2026-10-01 由文字链改按钮）。为什么改：文字链挤成一行时点击目标只有
 * 字身那么大、四条款式相同，误点率高且看不出哪条是危险操作。白底描边 + 6px 圆角把每条分别框出来；
 * 危险项走 --err-ink 语义色（**不内联上色** —— 门禁 danger-inline 会拦）。 */
.shell.hc-mem .mini{height:24px;padding:0 9px;border:1px solid var(--line2);border-radius:6px;
  background:var(--canvas);color:var(--t2);font-size:12px;font-family:inherit;font-weight:400;
  line-height:1;white-space:nowrap;cursor:pointer;transition:all .14s}
.shell.hc-mem .mini:hover{border-color:var(--pri);color:var(--pri-600);background:var(--pri-weak)}
.shell.hc-mem .mini.danger{color:var(--err-ink)}
.shell.hc-mem .mini.danger:hover{border-color:var(--err);color:var(--err-ink);background:var(--err-weak)}
/* 右栏 */
.shell.hc-mem .mem-main{min-width:0}
.shell.hc-mem .mem-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shell.hc-mem .mem-head .card-title{flex:1 1 auto;min-width:0}
.shell.hc-mem .mem-head .acts{margin-left:auto;display:flex;gap:10px;align-items:center}
/* 成员行（2026-10-01）：归属胶囊靠右，其后是统一的【编辑】【移出部门】。 */
.shell.hc-mem .mem-cells{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.shell.hc-mem .mem-acts{display:flex;gap:6px;align-items:center;flex-shrink:0}
.shell.hc-mem .mem-acts .mini{height:26px;padding:0 10px}
/* 右上角**唯一**【添加成员】下拉（2026-10-01）：复用站点既有 .c-dd / .c-dd-p / .open 范式
 * （因而自动继承 60-boot.js 的「点外侧关闭」），仅覆盖外观 —— 触发器沿用 .btn.pri.sm；
 * 菜单右对齐（贴着卡片右边缘，左对齐在窄屏会溢出视口）；菜单项用 button 而非 a，
 * 不再需要 href="#…"，避免一次无意义的 hash 跳转。 */
.shell.hc-mem .mem-add{position:relative;display:inline-flex}
.shell.hc-mem .mem-add .c-arr{border-top-color:currentColor;opacity:.8}
.shell.hc-mem .mem-add-p{left:auto;right:0;min-width:238px}
.shell.hc-mem .mem-add-p .dd-it{display:block;width:100%;text-align:left;padding:9px 12px;border:0;
  border-radius:8px;background:none;color:var(--t2);font-size:13px;font-family:inherit;cursor:pointer;white-space:nowrap}
.shell.hc-mem .mem-add-p .dd-it:hover{background:var(--pri-weak);color:var(--pri-600)}
/* 0 人空状态（2026-10-01）：虚线框 + 居中，明示「这里不是没渲染出来，而是真的没人」，
 * 并指向上方入口。紧接成员列表 / 分页之后（与成员列表区同处一个容器）。 */
.shell.hc-mem .mem-empty{border:1px dashed var(--line2);border-radius:12px;padding:18px 16px;
  text-align:center;font-size:13px;line-height:1.8;color:var(--t3);background:var(--sf2)}
@media (max-width:1080px){ /* 对齐既有 .cat-flex 的堆叠断点（styles.css:950） */
  .shell.hc-mem .mem-cats{grid-template-columns:minmax(0,1fr)}
  .shell.hc-mem .mem-rail{max-height:none}
  .shell.hc-mem .mem-rail-list{max-height:260px}
}
@media (max-width:900px){ /* 站点在 ≤900 把 .c-dd 整体改成「纵向静态面板」（styles.css:111，给顶部导航用的）：
   * 那条规则是全局的，会把本页的下拉也压成静态。本页要的是「按钮 + 浮层」，就地覆盖回来。 */
  .shell.hc-mem .mem-add{position:relative;flex-direction:row;align-items:center}
  .shell.hc-mem .mem-add-p{position:absolute;left:auto;right:0;top:calc(100% + 6px);padding:6px;
    border:1px solid var(--line);box-shadow:0 12px 32px rgba(10,23,42,.14);animation:c-dd-in .14s ease}
}
/* ============================================================
 * 客户端「企业中心」两栏（#c-ent，2026-10-02）
 * 左栏 = 页面级模块导航（企业资料 / 成员账号）；右栏 = 子页内容。
 * 视口骨架照抄目录页 hc-cat-page 的既有范式：≥1081px 把 .content 改为不可滚 flex 容器，
 *   头部区（面包屑 + 页头 + gateC 提示条）钉在顶部，下方 .ent-flex 承接两栏、各自内滚；
 *   【2026-10-03】掌柜点选删除面包屑与页头 ⇒「头部区」已移除，现在 .ent-flex 直接
 *   顶在 .content 的 padding 之下（顶部间距 30px 由 :1252 承担），仅 gateC 提示条留在其上；
 *   ≤1080px 回落通用形态（.content 唯一滚动域），左栏堆叠在内容上方 —— 断点与
 *   .cat-tree（:2385）/ .mem-cats（:3142）同值，不引入第四个阈值。
 * 视觉度量逐值复制目录页左侧导航 .cnav-*（styles.css:2316-2337：--sf 底 / 圆角 18 /
 *   .ent-nav-scroll 带 scrollbar-gutter:stable / 分组标题 11px --t5 / 条目高 40 圆角 10 /
 *   hover rgba(255,255,255,.85) / .on = --pri-weak / 图标位 24px 圆角 7 白底 / svg 14px），
 *   但**刻意不用 .cnav-* 类名**：那套规则带目录页语义（收藏置顶 / 预制品类页签），
 *   套用会让目录页日后重排左栏时**静默**改掉本页左栏 —— 耦合为零，视觉一致。
 * ⚠️ .ent-flex 的 overflow:hidden 属安全留白铁律 ③(d) 的「应用外壳布局行」例外
 *   （与 .cat-flex / .cat-main 同理，已在 :root 的例外清单里登记）—— 四边刻意不留内边距。
 * ⚠️ 命名铁律：类名不能叫 c-nav —— ≤900px 时 .c-nav 被全局规则改成 position:fixed 浮层
 *   （styles.css:110-119），60-boot.js 的 cnav 动作也按 .shell.hc-c .c-nav 查找汉堡面板。
 * ============================================================ */

/* 【2026-10-03】原「头部区」规则 `.shell.hc-ent .ent-head{flex:0 0 auto;margin-bottom:14px}` 已删 ——
   掌柜点选删除面包屑与页头标题，entShell 不再产出 .ent-head（见 10-client.js 的 entShell 注释）。
   原先只靠这14px 下边距撑开的间距，现在由 .content 自身的 padding 承担（:1252 的 30px 48px 28px）
   ⇒ 删后顶部间距反而更宽松，无需补margin。 */

/* ---- 两栏容器：基础形态 = 纵向堆叠（≤1080px 走这条，.content 整体滚动） ---- */
.shell.hc-ent .ent-flex{display:flex;flex-direction:column;gap:12px}
/* 左栏卡片：overflow:hidden + padding:var(--pad-card)=8px → 满足铁律 ①（四周 ≥8px），
   8px 也让所有后代距内壁 ≥6px（铁律 ②）；条目自身 padding:0 10px 叠加后更宽裕。 */
.shell.hc-ent .ent-nav{display:flex;flex-direction:column;overflow:hidden;
  padding:var(--pad-card);background:var(--sf);border:1px solid transparent;border-radius:18px}
/* 内滚区：铁律 ③(b) 滚动容器例外，取 --pad-tight 的最小可行值（同 .tbl-scroll）。 */
.shell.hc-ent .ent-nav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
/* 分组标题：浅灰小字、不可点（层级语言与 .cnav-grp 一致） */
.shell.hc-ent .ent-nav-grp{font-size:11px;font-weight:600;color:var(--t5);letter-spacing:.5px;
  padding:9px 10px 5px;line-height:1.4;cursor:default;user-select:none}
/* 条目：<a> 形态 —— 需显式去掉 a 的主题色与下划线（.cnav-it 是 div，靠 .cnav-it b 压住颜色） */
.shell.hc-ent .ent-nav-it{display:flex;align-items:center;gap:9px;height:40px;padding:0 10px;
  border-radius:10px;color:var(--t2);text-decoration:none;cursor:pointer;user-select:none;transition:background .14s}
.shell.hc-ent .ent-nav-it:hover{background:rgba(255,255,255,.85)}
.shell.hc-ent .ent-nav-it.on{background:var(--pri-weak)}
.shell.hc-ent .ent-nav-it:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:10px}
.shell.hc-ent .ent-nav-it b{flex:1 1 auto;min-width:0;font-size:14px;font-weight:400;color:var(--t2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-ent .ent-nav-it.on b{font-weight:600;color:var(--pri-600)}
/* 图标位：24px 圆角方块，svg 由 14px 视觉尺寸收口（与 .cnav-ic 同度量） */
.shell.hc-ent .ent-nav-ic{width:24px;height:24px;flex:0 0 24px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:7px;overflow:hidden;background:#fff;color:var(--t5)}
.shell.hc-ent .ent-nav-ic svg{width:14px;height:14px;display:block}
.shell.hc-ent .ent-nav-it.on .ent-nav-ic{color:var(--pri)}
/* 右栏：默认（≤1080px）只是普通块，让 .content 统一滚动 */
.shell.hc-ent .ent-main{min-width:0}
@media (max-width:1080px){
  /* 窄屏：左栏通铺在内容上方，限高内滚，避免把右栏推到屏外（与 .cat-tree :2386 同策略） */
  .shell.hc-ent .ent-nav-scroll{max-height:240px}
}
/* ---- ≥1081px：两栏各自内滚（.content 在此断点退出滚动域） ---- */
@media (min-width:1081px){
  .shell.hc-ent .content{display:flex;flex-direction:column;overflow:hidden}
  /* gateC() 提示条：flex 0 0 auto，否则会被 .ent-flex 挤压变形 */
  .shell.hc-ent .content>.alert{flex:0 0 auto}
  .shell.hc-ent .ent-flex{flex:1 1 auto;min-height:0;flex-direction:row;align-items:stretch;
    gap:16px;overflow:hidden}          /* 铁律 ③(d) 例外，见上方块注释 */
  /* 左栏宽度 200px 字面量，不建宽度令牌：现有 5 个侧栏（.side 232 / .cat-tree 220 /
   * .ctree 200 / .mem-cats 264 / .mc-nav 248）全是字面量，为单点消费引入全项目首个宽度
   * 令牌债更大；值只出现在这一条规则里，无漂移风险。取值 = 内容下限 ≈187px（图标 24 +
   * gap 9 + 内边距 20 + 文案 98 + 容器 16 + 滚动槽 10）与「成员页 1081px 边缘 .mem-main
   * 尚有 481px 可用」之间的中点。 */
  .shell.hc-ent .ent-nav{width:200px;flex:0 0 200px}
  .shell.hc-ent .ent-nav-scroll{max-height:none}
  /* 右栏内滚容器。padding 取 var(--pad-tight) 的理由：客户端 --sh1 是 `0 0 0 1px` 的
   * **外扩**描边环（:1245），贴壁会被裁掉 1px —— 与 .tbl-scroll（:1336）同处理。 */
  .shell.hc-ent .ent-main{flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;
    padding:var(--pad-tight)}
}
/* =======================================================================
 * 客户端「系统管理」与「部门采购」（#c-ent:sys，2026-10-03）
 * -----------------------------------------------------------------------
 * 开关本体复用全站既有的 .sp-toggle（CSS-only，靠 input:checked + .tg
 * 相邻兄弟强约束）—— **不新造开关样式**。另造一套会在商家端与客户端之间留下
 * 视觉分叉，而两处的开关语义完全一致。
 * 本段只补「开关所在那一行」的排版，以及购物车部门列的宽度约束。 */

.shell.hc-c .sys-card .sys-row{display:flex;align-items:flex-start;gap:16px;padding:6px 0}
.shell.hc-c .sys-card .sys-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.shell.hc-c .sys-card .sys-tx>b{font-size:14px;color:var(--t1)}
.shell.hc-c .sys-card .sys-tip{font-size:12px;line-height:1.65;color:var(--t4)}
.shell.hc-c .sys-card .sys-tip b{color:var(--t2)}
.shell.hc-c .sys-card .sys-tip2{font-size:12px;line-height:1.6;color:var(--t5)}
/* 开关固定在右侧且**顶部对齐**（不居中）：说明文字常有 2-3 行，居中会让开关悬在半空。
 * flex-shrink:0 是 .sp-toggle 自带的，这里显式重申是因为它处在 flex 容器里，
 * 长说明会试图压缩它。 */
.shell.hc-c .sys-card .sys-sw{flex:0 0 auto;margin-top:2px}
/* 无部门时开关 disabled：置灰，让「为什么不能开」一眼可见（配合文案指引） */
.shell.hc-c .sys-card .sys-sw input:disabled ~ .tg{opacity:.5}
.shell.hc-c .sys-dept-list{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.shell.hc-c .sys-dept-list .sys-tx{gap:2px}
.shell.hc-c .sys-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.shell.hc-c .sys-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  background:var(--sf);border:1px solid var(--line);font-size:12px;color:var(--t2)}
/* 购物车「所属部门」列（2026-10-04 管理员化：点击驱动自定义下拉，替代原生 select）。
   132px 与表头同宽（表头 th 的内联 width 才是权威，此处只约束内容形态）。 */
.shell.hc-c .cart-dept{padding:0 8px}
.shell.hc-c .cart-dept-ctl{display:inline-flex;align-items:center;justify-content:space-between;gap:6px;
  width:100%;min-width:0;height:28px;padding:0 8px;font-size:12px;color:var(--t2);
  background:var(--sf);border:1px solid var(--line);border-radius:8px;cursor:pointer;font-family:inherit;
  text-align:left;transition:border-color .15s,background .15s}
.shell.hc-c .cart-dept-ctl:hover{border-color:var(--pri);background:var(--canvas)}
.shell.hc-c .cart-dept-cur{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 「未指定」字色转淡，与「已指定」一眼可辨（避免空值看起来像没渲染出来） */
.shell.hc-c .cart-dept-ctl.is-empty .cart-dept-cur{color:var(--t4)}
/* 下拉指示三角：与顶栏 .c-arr 同形态，供购物车/订单两处点击控件复用 */
.shell.hc-c .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--t4);flex-shrink:0;transition:transform .15s}
/* 抽屉行卡里的部门行：与 .cd-meta 同节奏（12px、上下留 4px），不额外占一整行的视觉重量 */
.shell.hc-c .cd-dept{margin-top:4px}
.shell.hc-c .cart-dept-txt{font-size:12px;color:var(--t2)}
.shell.hc-c .cart-dept-tip{font-size:11px;color:var(--t5);margin-top:2px;line-height:1.5}
/* 部门下拉弹层：position:fixed（由 60-boot 定位并 append 到 body），层级高于页内浮层。
   🔴 必须**不套 .shell.hc-c 作用域** —— 弹层挂在 body 下，作用域选择器永远匹配不到，
   会表现为「点开是空白浮层」。与既有 .ssel-pop（全局）同范式。 */
.dept-pop{position:fixed;z-index:1200;min-width:132px;background:var(--sf);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--sh2);padding:5px;display:flex;flex-direction:column;gap:2px}
.dept-opt{display:block;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:7px;
  background:none;font-size:12px;color:var(--t2);cursor:pointer;font-family:inherit;white-space:nowrap}
.dept-opt:hover{background:var(--pri-weak);color:var(--pri-600)}
.dept-opt.on{background:var(--pri-weak);color:var(--pri-600);font-weight:600}
/* 部门选项：**一行多个、按名称宽度自适应换行**（部门多时不再一行一个、占五六行）。
   每个选项宽度由内容决定（flex:0 0 auto），整体 flex-wrap 自动折行；过长名称受 max-width 约束不溢出。
   视觉节奏（圆角 / 选中色）与规格弹窗一致 —— 刻意**不套用** .sp-pick-list（不同结构，套用会串样式）。
   🔴 必须**全局**（不套 .shell.hc-c 作用域）—— 部门模块既渲染在弹窗内（#modal-root 挂在 .shell 之外），
   也内联在产品详情页（.shell.hc-c 内），作用域选择器匹配不到弹窗内容，是既有潜在 bug。

   🔴🔴 **2026-10-07 修复（掌柜报「按钮改大点」时挖出）：`.dp-pick` 的**盒子样式**此前只写在
   `merchant/styles/merchant.css`，而**客户端页面不加载 merchant.css** ⇒ 客户端里这些按钮
   完全无样式（无内距/无边框/无胶囊圆角，只剩一行裸文字 + 单选框，实测 52×23 / padding:0）。
   归位判据：`deptModuleHtml()` 在 shared/core.js，**调用点全在客户端**
   （`client/views/detail.js` 详情 hero、`client/views/cart-view.js` 加购弹窗）；
   商家端**不渲染** `.dp-pick` ⇒ 原在 merchant.css 的规则是**两端都落空**的孤儿。
   故整组搬来 shared（与 `.dp-pick-list` 同处），merchant.css 侧已删。 */
.dp-pick{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:1px solid var(--line2);
  border-radius:999px;cursor:pointer;max-width:100%;flex:0 0 auto;background:var(--canvas);
  font-size:14px;line-height:1.2;transition:border-color .15s,background .15s}
.dp-pick:hover{background:var(--sf);border-color:var(--line3)}
.dp-pick input{width:15px;height:15px;accent-color:var(--pri);margin:0;cursor:pointer;flex:0 0 auto}
.dp-pick-list{display:flex;flex-wrap:wrap;gap:8px;max-height:46vh;overflow-y:auto}
/* 选中态由 :has(:checked) 驱动（与 .chip 同写法，:464 已有先例）——
   「未指定」为模板默认选中项（checked），其选中态同样只能靠这个选择器呈现。 */
.dp-pick:has(input:checked){border-color:var(--pri);background:var(--pri-weak)}
.dp-pick .nm{min-width:0;font-size:14px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 部门模块外壳：顶部标题 + 可选项提示。全局（同 .dp-pick，弹窗内外都会用到）。 */
.dept-mod{margin-top:12px}
.dept-mod-h{font-size:13px;color:var(--t2);margin-bottom:8px}
.dept-mod-h .opt{color:var(--t5);font-weight:400}
/* 改部门被并入目标行时的一次短时高亮：合并会让原行消失，
   不给视觉指引就像「点了没反应」。 */
.shell.hc-c .cart-row-hi{background:var(--pri-weak)}
/* 订单列表的部门筛选器：与 .seg 按钮组同行（toolbar 内），高度对齐 seg 的 28px。
   点击驱动自定义下拉（原生 select 的 change 在目标环境不可靠）。 */
.shell.hc-c .ord-flt{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t4);margin-left:10px}
.shell.hc-c .ord-dept-ctl{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  height:28px;min-width:118px;padding:0 10px;font-size:12px;color:var(--t2);background:var(--sf);
  border:1px solid var(--line);border-radius:999px;cursor:pointer;font-family:inherit}
.shell.hc-c .ord-dept-ctl:hover{border-color:var(--pri);background:var(--canvas)}
.shell.hc-c .ord-dept-cur{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* =======================================================================
 * 商家端订单详情 · 订单明细 / 按部门汇总 双 Tab（2026-10-04）
 * -----------------------------------------------------------------------
 * 订单有部门时才渲染 Tab 段；.seg / .it 复用既有分段按钮组样式，本段不复刻。
 * 「按部门汇总」Tab 以 .mord-sec 一块一部门，块间用 .mord-div 虚线分割条区隔；
 * 块内表格复用 .tbl cart-tbl ov-tbl（自带 .tbl-scroll 横向滚动），故不再加边框。
 * 只读展示，沿用既有 CSS 变量，不引入新 token；纯类名命中，不依赖父级作用域。 */
.mord-tabs{margin:8px 0 2px}
/* 单个部门块：表格自带容器，无需额外边框 / 底色，仅留最小节奏 */
.mord-sec{margin:2px 0 0}
.mord-sec-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:6px 0 2px}
.mord-sec-n{font-size:14px;font-weight:700;color:var(--ink)}
.mord-sec-mt{font-size:12px;color:var(--t4)}
.mord-sec-amt{margin-left:auto;font-size:14px;font-weight:700;color:var(--pri-600);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 部门块之间的分割条：虚线横贯整宽，作为醒目的「分割条」视觉区隔 */
.mord-div{height:0;border-top:2px dashed var(--line);margin:14px 0}
/* 停用行附注：随「已停用」徽标同行，只读且不参与发货 */
.mord-off{margin-left:6px;font-size:12px;color:var(--t4);white-space:nowrap}
/* ============================================================
 * 【2026-10-05 代下单 · 独立路由页】#m-order-new（.mn-*）。
 * -----------------------------------------------------------------------
 * 页面为常规路由页（走 .shell 外壳），三段式：顶部客户信息表单 + 中间订单明细表 + 底部操作。
 * 「添加商品」打开右侧 1000px 商品面板 —— 直接复用客户端 .c-drawer / .c-drawer-mask（默认 1000px 档），
 * 本段只管明细表、筛选条与商品条目，不重复定义抽屉外壳。
 * 复用既有 CSS 变量（--sf/--line/--t2/--t4/--pri-600/--canvas 等），不引入新 token；纯类名命中。 */
.mn-sec{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
/* 明细表：整表滚动、不分页 */
.mn-tbl .cart-name{min-width:220px}
@media (max-width:900px){
  .mn-form{grid-template-columns:1fr}
  .mn-tbl select{max-width:110px}
}
/* ============================================================
 * 商家端 · 客户档案页「定制客户端导航」· 三栏目录镜像（2026-10-06 掌柜口径）
 * 只作用在 .shell.hc-mcust（该页壳 class），不污染其它页。
 * 设计语言整段对齐**客户端商品目录页**（.shell.hc-c 的 .cat-tree / .ctree / .cnav-it /
 *   .cat2chip / .tbl-wrap 一组）：左栏灰底 18px 圆角 + 白底 hover（卡片感）；中栏白底描边
 *   18px 圆角；条目统一圆角 10；选中态 --pri-weak 底 + --pri-600 粗体；二级 chips 与
 *   .cat2chip 同语法；**硬编码色值一律禁止**，只用既有令牌。
 * ★ ≥1081px：整页**视口固定**（页面壳另挂 .hc-mcust-nav）——三栏各自内滚，
 *   只有右下商品表在固定高度内滚动；页签栏与一级分类栏**不随商品列表滚动**
 *   （掌柜：商品再多也只滚右下这一块）。与客户端目录页同断点同策略；
 *   ≤1080px 回落文档流（三栏纵排、整页滚动）。
 * ============================================================ */
/* ---------- 三栏骨架（各断点共用） ---------- */
.shell.hc-mcust .cnv-wrap{display:grid;grid-template-columns:216px 188px minmax(0,1fr);gap:18px;align-items:start;margin-top:12px}
.shell.hc-mcust .cnv-rail{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;
  background:var(--sf);border:1px solid transparent;border-radius:18px;padding:12px}
.shell.hc-mcust .cnv-rail-add{flex:0 0 auto;padding:0 0 10px}
.shell.hc-mcust .cnv-rail-add .btn{width:100%}
.shell.hc-mcust .cnv-rail-none{padding:8px 10px 10px;font-size:12px;color:var(--t5);line-height:1.6}
.shell.hc-mcust .cnv-tree{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;
  background:var(--canvas);border:1px solid var(--line);border-radius:18px;padding:12px 10px}
.shell.hc-mcust .cnv-tree-h{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--t5);letter-spacing:.5px;
  padding:2px 10px 9px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-mcust .cnv-main{min-width:0}
/* ---------- 页签条目（左栏）：图标槽 + 名称 + 副行；悬浮时副行**原位换成**操作按钮 ---------- */
.shell.hc-mcust .cnv-rt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;
  cursor:pointer;user-select:none;transition:background .14s}
.shell.hc-mcust .cnv-rt:hover{background:var(--canvas)}   /* 灰底栏上 hover 用白底（客户端 .cnav-it:hover 同法） */
.shell.hc-mcust .cnv-rt.on{background:var(--pri-weak)}
.shell.hc-mcust .cnv-rt-ic{flex:0 0 26px;width:26px;height:26px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:8px;overflow:hidden;background:var(--canvas);color:var(--t5)}
.shell.hc-mcust .cnv-rt.on .cnv-rt-ic{color:var(--pri)}
.shell.hc-mcust .cnv-rt-ic img{width:100%;height:100%;object-fit:cover;display:block}
.shell.hc-mcust .cnv-rt-ic svg{width:15px;height:15px;display:block}
.shell.hc-mcust .cnv-rt-tx{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.shell.hc-mcust .cnv-rt-tx b{font-size:14px;font-weight:400;color:var(--t2);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-mcust .cnv-rt.on .cnv-rt-tx b{font-weight:600;color:var(--pri-600)}
.shell.hc-mcust .cnv-rt-tx i{font-style:normal;font-size:11px;color:var(--t5);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-mcust .cnv-rt.on .cnv-rt-tx i{color:var(--pri)}
.shell.hc-mcust .cnv-rt.off .cnv-rt-tx b{color:var(--t4)}
/* 副行原位互换：悬浮时藏计数、显操作 —— 行高不变，不会把下方条目推下去
 * （11px / gap 6 是压出来的：216px 栏宽下要让「↑ ↓ 编辑 停用 删除」五个操作挤进副行而不折行） */
.shell.hc-mcust .cnv-rt-ops{display:none;gap:6px;font-size:11px;line-height:1.4;white-space:nowrap}
.shell.hc-mcust .cnv-rt:hover .cnv-rt-ops{display:flex}
.shell.hc-mcust .cnv-rt:hover .cnv-rt-tx i{display:none}
/* ---------- 一级分类条目（中栏）：与页签条目同一语法；白底栏上 hover 用浅灰 ---------- */
.shell.hc-mcust .cnv-c1{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;
  cursor:pointer;user-select:none;transition:background .14s}
.shell.hc-mcust .cnv-c1:hover{background:var(--sf)}
.shell.hc-mcust .cnv-c1.on{background:var(--pri-weak)}
.shell.hc-mcust .cnv-c1 b{display:block;font-size:13.5px;font-weight:400;color:var(--t2);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-mcust .cnv-c1.on b{font-weight:600;color:var(--pri-600)}
.shell.hc-mcust .cnv-c1 i{display:block;font-style:normal;font-size:11px;color:var(--t5);margin-top:2px;
  font-variant-numeric:tabular-nums}
.shell.hc-mcust .cnv-c1.on i{color:var(--pri)}
.shell.hc-mcust .cnv-c1-grp{font-size:11px;font-weight:600;color:var(--t5);letter-spacing:.5px;
  padding:10px 10px 5px;line-height:1.4}
/* ---------- 商品区：二级分类 chips（与客户端 .cat2chip 同语法）+ 固定列宽表 ---------- */
.shell.hc-mcust .cnv-c2bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.shell.hc-mcust .cnv-c2chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;
  border-radius:999px;border:1px solid var(--line);background:var(--sf2);color:var(--t2);font-size:12px;
  cursor:pointer;user-select:none;white-space:nowrap;font-family:inherit;
  transition:border-color .14s,background .14s,color .14s}
.shell.hc-mcust .cnv-c2chip:hover{border-color:var(--pri);color:var(--pri-600)}
.shell.hc-mcust .cnv-c2chip.on{background:var(--pri-action);border-color:var(--pri-action);
  color:var(--on-action);font-weight:600}
.shell.hc-mcust .cnv-c2-hint{display:block;font-size:12px;color:var(--t4);margin:0 0 12px}
.shell.hc-mcust .cnv-main .toolbar{margin-bottom:12px}
.shell.hc-mcust .cnv-empty{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;font-size:13px;color:var(--t4);line-height:1.7}
/* 表：table-layout:fixed 让「th 上写的宽度即渲染宽度」—— 商品再多，列宽也不随内容漂移。
 * min-width 620 是按 1440 视口实测的「三栏之下右栏还剩约 690」倒推的：再宽就得横向滚，
 * 而本页最关键的「操作（隐藏 / 恢复）」列一旦滚出视野，掌柜就白进来了。 */
.shell.hc-mcust table.cnv-tbl{width:100%;table-layout:fixed;min-width:620px}
.shell.hc-mcust .cnv-tbl th,.shell.hc-mcust .cnv-tbl td{padding-left:14px;padding-right:14px}
.shell.hc-mcust .cnv-tbl .cnv-cod{white-space:nowrap}
.shell.hc-mcust .cnv-tbl .cnv-cod-t{color:var(--pri);font-weight:600;font-size:13px}
.shell.hc-mcust .cnv-tbl .cnv-prod-n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.hc-mcust .cnv-tbl .cnv-op{text-align:right}
.shell.hc-mcust .cnv-tbl .cnv-tbl-empty{text-align:center;padding:48px 16px;color:var(--t4);white-space:normal}
/* ---------- ≤1080px：三栏纵排、整页滚动（与客户端目录页同断点同策略） ---------- */
@media (max-width:1080px){ /* 对齐既有 .cat-flex / .mem-cats 的堆叠断点（styles.css:950 / :3135） */
  .shell.hc-mcust .cnv-wrap{grid-template-columns:minmax(0,1fr)}
  .shell.hc-mcust .cnv-rail{max-height:300px;overflow-y:auto}
  .shell.hc-mcust .cnv-tree{max-height:290px;overflow-y:auto}
}
/* ---------- ≥1081px：视口固定布局（整页不滚，只有右下商品表滚） ----------
 * 与客户端目录页 .shell.hc-cat-page 的收口方式逐条对应：壳锁 100vh，顶栏退出 flex 收缩，
 * .content 变纵向 flex 容器，骨架吃满剩余高度，滚动全部下沉到各栏内部。
 * 🔴 只在 .hc-mcust-nav（「定制客户端导航」页签）上生效 —— 其余三页签必须保持整页可滚。 */
@media (min-width:1081px){
  .shell.hc-mcust-nav{height:100vh;overflow:hidden}
  .shell.hc-mcust-nav .side{height:100vh;overflow-y:auto}
  .shell.hc-mcust-nav .main{flex:1 1 auto;min-height:0;height:100vh;overflow:hidden}
  .shell.hc-mcust-nav .content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .shell.hc-mcust-nav .content>.crumb,.shell.hc-mcust-nav .content>.page-head,
  .shell.hc-mcust-nav .content>.rule-tip,.shell.hc-mcust-nav .content>.toolbar{flex:0 0 auto}
  .shell.hc-mcust-nav .cnv-wrap{flex:1 1 auto;min-height:0;align-items:stretch;
    grid-template-rows:minmax(0,1fr);overflow:hidden}
  .shell.hc-mcust-nav .cnv-rail-scroll,.shell.hc-mcust-nav .cnv-tree-scroll{flex:1 1 auto;min-height:0;
    overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:thin;
    scrollbar-color:var(--line2) transparent}
  .shell.hc-mcust-nav .cnv-main{min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .shell.hc-mcust-nav .cnv-main>.toolbar,.shell.hc-mcust-nav .cnv-main>.cnv-c2bar,
  .shell.hc-mcust-nav .cnv-main>.cnv-c2-hint,.shell.hc-mcust-nav .cnv-main>.cnv-empty{flex:0 0 auto}
  .shell.hc-mcust-nav .cnv-main>.tbl-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
    overflow:hidden;padding:var(--pad-card)}
  .shell.hc-mcust-nav .cnv-main>.tbl-wrap>.tbl-scroll{flex:1 1 auto;min-height:0;overflow:auto;
    overscroll-behavior:contain;padding:var(--pad-tight)}
  .shell.hc-mcust-nav .cnv-main>.tbl-wrap>.pg-bar{flex:0 0 auto}
}