/* ============================================================
   衡采办公 · 企业采购下单系统 —— 可交互原型样式
   视觉对齐设计稿验收版：钴蓝主色 / 胶囊按钮 / 白卡 / 状态徽章
   ============================================================ */
:root{
  --pri:#0064E0; --pri-600:#0457CB; --pri-weak:#EAF2FE; --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;
  --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;
  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}
.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}
.brand-name{font-weight:700;color:var(--ink);font-size:15px;line-height:1.2}
.brand-sub{font-size:11px;color:var(--t4);line-height:1.2}
.side-sep{height:1px;background:var(--line4);margin:0}
.nav-cap{font-size:12px;color:#6E7B88;padding:16px 24px 6px;font-weight:600}
.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)}
.side-foot{margin-top:auto;padding:12px}
.help-card{background:var(--sf);border-radius:12px;padding:12px 14px;font-size:12px;color:var(--t3)}
.help-card b{color:var(--t1);font-size:12px;display:block;margin-bottom:4px}
.help-card a{font-size:12px;font-weight:700}
.side-user{margin-top:10px;background:var(--sf);border-radius:12px;padding:8px 10px;display:flex;gap:10px;align-items:center}
.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)}
.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）：hamb 桌面客户端常驻（商家端桌面仍隐藏，窄屏两端显示）；
 * 折叠后 .side 隐藏、.main flex 自动占满；body.side-collapsed 由 hcSide() 切换并持久化 localStorage('hc-side') */
body.side-collapsed .side{display:none}
.topbar .hamb{display:none;font-size:20px;color:var(--t3);width:32px;height:32px;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}
.topbar .hamb:hover{background:var(--sf);color:var(--ink)}
/* ===== 客户端顶部导航框架（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-logo{width:34px;height:34px;border-radius:10px;background:var(--pri);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(15,98,206,.22)}
.c-brand-t{display:flex;flex-direction:column;line-height:1.12}
.c-brand-t b{font-size:16px;color:var(--ink);font-weight:800;letter-spacing:.2px}
.c-brand-t i{font-style:normal;font-size:11px;color:var(--t4)}
.c-nav{display:flex;align-items:center;gap:2px;margin-left:8px;min-width:0}
.c-it{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--t2);text-decoration:none;transition:all .14s;white-space:nowrap}
.c-it:hover{background:var(--sf);color:var(--ink)}
.c-it.on{color:var(--pri-600);background:var(--pri-weak)}
.c-it .c-cnt{min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--err);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.c-dd{position:relative;display:inline-flex}
.c-dd-t{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;background:none;border-radius:10px;font-size:14px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .14s;font-family:inherit}
.c-dd-t:hover{background:var(--sf);color:var(--ink)}
.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-p{position:absolute;top:calc(100% + 8px);left:0;min-width:172px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(10,23,42,.14);padding:6px;display:none;z-index:80}
.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{display:block;padding:9px 12px;border-radius:8px;font-size:13px;color:var(--t2);text-decoration:none;white-space:nowrap}
.c-dd-p a:hover{background:var(--pri-weak);color:var(--pri-600)}
.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}
.c-me-t{display:flex;flex-direction:column;line-height:1.15;max-width:160px}
.c-me-t b{font-size:13px;color:var(--t1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-me-t i{font-style:normal;font-size:11px;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 移动汉堡（≤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}
}
.search{background:var(--surface);border-radius:999px;height:34px;display:flex;align-items:center;gap:8px;padding:0 14px;width:340px;max-width:46vw;color:var(--t4);font-size:12px}
.search input{background:none;border:none;outline:none;flex:1;font-size:12px}
.topbar .sp{flex:1}
.topbar .aux{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--t3)}
.content{flex:1;padding:16px 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:820px){.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);color:#fff}
.btn.pri:hover{background:var(--pri-600)}
.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)}
.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}

/* ---------- 徽章 / 状态 ---------- */
.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}
.tbl-scroll{overflow-x:auto}
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}
.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}
.btn-mini{border:1px solid var(--line2);background:#fff;border-radius:999px;height:30px;padding:0 12px;font-size:12px;color:var(--t2);font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.btn-mini.primary{border-color:var(--pri);color:var(--pri)}

/* ---------- 表单 ---------- */
.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}
.err-txt{color:var(--err);font-size:12px;margin-top:4px}
.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 ---------- */
.kpis{display:flex;gap:12px;flex-wrap:wrap}
.kpi{flex:1 1 200px;background:#fff;border-radius:14px;box-shadow:var(--sh1);padding:14px 18px;border-left:3px solid transparent}
.kpi b{font-size:24px;color:var(--ink)}
.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-main{display:flex;gap:22px}
.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{display:flex;align-items:baseline;gap:10px}
.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{display:flex;border-bottom:1px solid var(--line);margin:14px 0}
.detail-tabs button{padding:9px 18px;font-size:14px;color:var(--t3);border-bottom:2px solid transparent;font-weight:600}
.detail-tabs button.on{color:var(--pri);border-bottom-color:var(--pri)}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px}
.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{display:flex;align-items:center;gap:12px;background:var(--sf2);border-radius:10px;padding:10px 12px;margin-bottom:8px;flex-wrap:wrap}
.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}

/* ---------- 购物车 / 提交栏 ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 342px;gap:16px;align-items:start}
.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}
.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{display:flex;min-height:100vh;background:#fff}
.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 .brand-row{display:flex;gap:10px;align-items:center;margin-bottom:22px}
.login h2{font-size:26px;color:var(--ink);margin-bottom:6px}
.login .sub2{color:var(--t3);font-size:14px;margin-bottom:22px}
.login .switch-end{display:flex;gap:6px;background:var(--sf);border-radius:999px;padding:4px;margin-bottom:22px}
.login .switch-end button{flex:1;height:30px;border-radius:999px;font-size:12px;color:var(--t3);font-weight:600}
.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)}

/* ---------- 相似推荐大卡（详情页 v2 优化） ---------- */
.sim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:14px;margin-top:14px}
.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{padding:10px 12px 12px;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)}
.sim-in{font-size:12px;color:var(--ok-ink);background:var(--ok-weak);border-radius:999px;padding:3px 10px;font-weight:600;white-space:nowrap}

/* ---------- 商品图片（上传真实图 / 占位兜底） ---------- */
.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)}
.zoom-hint{position:absolute;left:0;right:0;bottom:0;padding:8px 0;text-align:center;font-size:12px;color:#fff;background:linear-gradient(transparent,rgba(15,23,42,.55));pointer-events:none;opacity:0;transition:opacity .15s}
.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}
.img-pre{width:88px;height:88px;border-radius:12px;border:1px dashed var(--line2);background:var(--sf);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--t4);font-size:22px;font-weight:700;flex-shrink:0;position:relative}
.img-pre img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------- 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}
.modal.wide{width:760px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.scroll{max-height:260px;overflow:auto}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.qtile{background:#fff;border-radius:14px;box-shadow:var(--sh1);padding:14px 16px;cursor:pointer;transition:.15s;position:relative}
.qtile:hover{box-shadow:var(--sh2);border-color:var(--pri-100)}
.qtile .q1 b{font-size:15px;color:var(--ink)}
.qtile .q2{font-size:12px;color:var(--t4);margin:4px 0}
.qtile .q3{font-size:12px;color:var(--t3)}
.qtile .badge{position:absolute;top:12px;right:12px}
.feed{background:#fff;border-radius:16px;box-shadow:var(--sh1);padding:16px 18px;margin-top:16px}
.feed-row{display:flex;gap:10px;align-items:center;padding:7px 0;font-size:12px;color:var(--t2);border-bottom:1px solid var(--line5)}
.feed-row:last-child{border-bottom:none}
.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:1180px){ .quick{grid-template-columns:repeat(2,1fr)} .fg{grid-template-columns:1fr} }

/* ---------- 响应式（窄屏折叠，无固定宽度） ---------- */
@media (max-width:1180px){
  .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:820px){
  .topbar .search{display:none}
  .topbar .hamb{display:inline-flex}
  .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-mask{position:fixed;inset:0;background:rgba(10,19,23,.35);z-index:95;animation:drwFade .18s ease}
.drw{position:fixed;top:0;right:0;bottom:0;width:1000px;max-width:96vw;background:#fff;z-index:96;display:flex;flex-direction:column;box-shadow:-16px 0 48px rgba(0,0,0,.16);animation:drwIn .22s ease}
.drw-h{display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid var(--line)}
.drw-x{cursor:pointer;color:var(--t4);font-size:14px;white-space:nowrap}
.drw-x:hover{color:var(--ink)}
.drw-tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--line)}
.drw-tabs button{border:none;background:none;padding:12px 14px;font-size:14px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent}
.drw-tabs button.on{color:var(--pri);border-bottom-color:var(--pri)}
.drw-b{flex:1;overflow:auto;padding:16px 24px}
.drw-f{display:flex;align-items:center;gap:12px;padding:12px 24px;border-top:1px solid var(--line);background:var(--sf);flex-wrap:wrap}
/* 商品管理表格行内小按钮 */
.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}
/* 参数键值行（商品规格参数 / 预制分类参数通用） */
.kv-row{display:grid;grid-template-columns:minmax(120px,200px) minmax(160px,1fr) 44px;gap:8px;margin-bottom:8px;align-items:center}
.kv-row .kv-x{text-align:center;font-size:12px;white-space:nowrap}

/* 参数键值行：模板编辑器（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 控件（商品参数 · 多选类型） */
.vchips{display:flex;flex-wrap:wrap;gap:6px}
.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{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:36px;padding:3px 8px;border:1px solid var(--line2);border-radius:8px;background:#fff;transition:border-color .15s}
.opt-ed:focus-within{border-color:var(--pri)}
.opt-ed.off{background:var(--surface);opacity:.55}
.opt-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sf);border:1px solid var(--line2);border-radius:999px;padding:3px 6px 3px 11px;font-size:12px;color:var(--t2);cursor:grab;user-select:none;transition:border-color .15s,box-shadow .15s}
.opt-chip:hover{border-color:var(--pri-100)}
.opt-chip.dragging{opacity:.55;border-color:var(--pri)}
.opt-chip .opt-x{color:var(--t4);cursor:pointer;font-style:normal;font-size:12px;line-height:1;padding:2px 5px;border-radius:999px}
.opt-chip .opt-x:hover{color:#fff;background:var(--err)}
.opt-add{border:none;outline:none;background:none;flex:1 1 110px;min-width:110px;font-size:12px;padding:6px 2px;color:var(--ink)}
.opt-add:disabled{cursor:not-allowed}
.opt-add::placeholder{color:var(--t4)}

/* ---------- 订单管理：客户 / 时间筛选（自适应换行） ---------- */
.mq-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mq-flts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mq-rt{display:flex;gap:10px;align-items:center;margin-left:auto}
.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-cust input{width:200px;max-width:100%;height:32px;border-radius:999px;font-size:12px}
.flt-on-tag{font-size:12px;color:var(--pri);background:var(--pri-weak);border-radius:999px;padding:2px 8px;font-weight:600;white-space:nowrap}
.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{position:relative;display:inline-flex;flex-direction:column}
.mcal-trig{display:inline-flex;align-items:center;gap:8px;height:32px;min-width:196px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:12px;color:var(--t1);cursor:pointer;user-select:none;transition:border-color .15s,box-shadow .15s;justify-content:space-between}
.mcal-trig:hover{border-color:var(--line2)}
.mcal-wrap.open .mcal-trig{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-weak)}
.mcal-val{font-variant-numeric:tabular-nums;letter-spacing:.2px;white-space:nowrap}
.mcal-val.ph{color:var(--t4)}
.mcal-x{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-style:normal;color:var(--t4);background:var(--sf);flex-shrink:0}
.mcal-x:hover{color:#fff;background:var(--err)}
.mcal-caret{width:8px;height:8px;border-right:1.5px solid var(--t4);border-bottom:1.5px solid var(--t4);transform:rotate(45deg);flex-shrink:0;transition:transform .15s;margin-top:-3px}
.mcal-wrap.open .mcal-caret{transform:rotate(-135deg);margin-top:3px}
.mcal-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:70;background:#fff;border:1px solid var(--line3);border-radius:12px;box-shadow:var(--sh2);padding:12px 12px 8px;max-width:94vw}
.mcal-body{display:flex;gap:8px}
.mcal-panel{width:236px}
.mcal-h{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:6px}
.mcal-nav{display:flex;gap:2px}
.mcal-arrow{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t4);font-style:normal;font-size:14px;line-height:1;cursor:pointer}
.mcal-arrow:hover{background:var(--sf);color:var(--t1)}
.mcal-title{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.mcal-week{display:flex;margin-bottom:2px}
.mcal-week b{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--t4);padding:3px 0}
.mcal-grid{border-collapse:collapse;width:100%;table-layout:fixed}
.mcal-grid td{padding:0}
.mc-day{height:32px;cursor:pointer;color:var(--t2)}
.mc-ink{display:flex;align-items:center;justify-content:center;width:100%;height:32px;border-radius:50%;font-size:14px;font-variant-numeric:tabular-nums;color:inherit}
.mc-day:hover .mc-ink{background:var(--sf);color:var(--t1)}
.mc-day.wkd .mc-ink{color:var(--t4)}
.mc-day.adj .mc-ink{color:var(--t5);cursor:default}
.mc-day.adj:hover .mc-ink{background:transparent;color:var(--t5)}
.mc-day.tdy .mc-ink{box-shadow:inset 0 0 0 1px var(--pri);font-weight:600;color:var(--pri-600)}
.mc-day.inq{background:var(--pri-weak)}
.mc-day.inq .mc-ink{color:var(--pri-600)}
.mc-day.sel .mc-ink,.mc-day.first-sel .mc-ink,.mc-day.last-sel .mc-ink{background:var(--pri);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-600)}
.mcal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line4);font-size:12px}
.mcal-hint{color:var(--t3);font-variant-numeric:tabular-nums}
.mcal-today{color:var(--pri);font-weight:600;cursor:pointer}
.mcal-today:hover{text-decoration:underline}
@media (max-width:760px){
  .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)}
.req-mark{color:var(--err);font-style:normal;font-weight:700}
/* 仅读屏可用的文本（无障碍，不可见但可朗读） */
.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}

/* ============================================================
 * 订单管理 · 客户筛选下拉（自制可搜索弹层，对齐日期选择器）
 * ============================================================ */
.flt-cust{position:relative;display:inline-flex;align-items:center;gap:6px}
.flt-cust .mcal-wrap{width:196px}
.cust-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:70;width:100%;min-width:196px;background:#fff;border:1px solid var(--line3);border-radius:12px;box-shadow:var(--sh2);padding:8px 6px 6px}
.cust-q{display:flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--line2);border-radius:8px;background:#fff;transition:border-color .15s,box-shadow .15s}
.cust-q:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-weak)}
.cust-qi{font-size:14px;color:var(--t4);line-height:1;flex-shrink:0}
.cust-q input{border:none;outline:none;background:none;width:100%;font-size:12px;padding:6px 0;color:var(--t1)}
.cust-q input::placeholder{color:var(--t4)}
.mc-list{display:flex;flex-direction:column;gap:1px;margin-top:6px;max-height:216px;overflow:auto}
.mc-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;font-size:14px;color:var(--t2);cursor:pointer;white-space:nowrap;transition:background .12s}
.mc-opt:hover{background:var(--sf);color:var(--t1)}
.mc-opt.on{background:var(--pri-weak);color:var(--pri-600);font-weight:600}
.mc-check{width:6px;height:11px;border-right:1.6px solid var(--pri);border-bottom:1.6px solid var(--pri);transform:rotate(45deg);flex-shrink:0}
.mc-empty{padding:18px 10px;text-align:center;font-size:12px;color:var(--t4)}
.mc-foot{margin-top:6px;padding:6px 8px 2px;border-top:1px solid var(--line4);font-size:12px;color:var(--t4)}
@media (max-width:760px){
  .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}
.pg-go{height:34px;border-radius:9px;border:1px solid var(--line2);background:#fff;color:var(--t2);
  font-size:14px;font-weight:600;padding:0 14px;cursor:pointer;transition:all .14s}
.pg-go:hover{border-color:var(--pri);color:var(--pri)}
.pg-go:active{transform:translateY(1px)}
/* 置于 tbl-foot 下方时去掉重复分隔 */
.tbl-foot + .pg-bar{border-top:none}
@media (max-width:760px){
  .pg-size{margin-left:0}
  .pg-bar{gap:8px}
  .pg-n{min-width:34px;height:34px}
}

/* ============================================================
 * 商品多规格（商家编辑 / 客户端选择 / 各处标签回显）
 * ============================================================ */
.sp-sw{user-select:none}
.sp-ed td{padding:5px 6px;vertical-align:middle}
.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}
.sp-pick-card{margin-top:12px;padding:12px 14px}
.sp-pick-list{display:flex;flex-direction:column;gap:8px}
.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)}
.sp-opt input{accent-color:var(--pri);margin-top:3px;width:15px;height:15px}
.sp-opt .so-l{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--t2);line-height:1.5}
.sp-opt .so-l b{color:var(--t1);font-weight:700}
.sp-opt .so-l small{color:var(--t3);font-size:12px}
.sp-opt i{margin-left:auto;align-self:center;color:var(--pri);font-weight:900;opacity:0;transition:opacity .15s;font-style:normal}
.sp-opt.on i{opacity:1}

/* ============================================================
 * 详情页大号数量步进（与主按钮 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)}

/* ============================================================
 * 商品新增 / 编辑 · 右侧滑出面板（800px）
 * ============================================================ */
.drw.drw-prod{width:800px;max-width:96vw}
.drw-prod .drw-b{display:flex;flex-direction:column;gap:14px;padding:16px 20px 28px}
.drw-prod .pform-sec{margin:0;padding:14px 16px;border-radius:14px;box-shadow:none;border:1px solid var(--line)}
.drw-prod .pform-sec .card-title{margin-bottom:4px}
.drw-prod .fg{margin-top:10px}
.drw-prod .sp-ed-wrap{box-shadow:none}
@media (max-width:900px){ .drw.drw-prod{width:96vw} .drw-prod .fg{grid-template-columns:1fr} }

/* ============================================================
 * 销售规格（多规格）· SKU 卡片式编辑器
 * ============================================================ */
.sp-ed-sec{margin-top:2px}
.sp-ed-head{display:flex;align-items:flex-start;gap:10px;padding-bottom:10px;border-bottom:1px dashed var(--line3)}
.sp-ed-head .card-title{display:flex;flex-direction:column;gap:2px}
/* 多规格模式开关 */
.sp-mode{display:inline-flex;gap:9px;align-items:center;cursor:pointer;user-select:none;flex-shrink:0}
.sp-mode input{display:none}
.sp-mode .mode-tg{position:relative;width:42px;height:22px;border-radius:999px;background:var(--line2);transition:.18s;flex-shrink:0}
.sp-mode .mode-tg::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}
.sp-mode input:checked + .mode-tg{background:var(--pri)}
.sp-mode input:checked + .mode-tg::after{left:22px}
.sp-mode .mode-txt{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.sp-mode .mode-txt b{font-size:12px;color:var(--t1)}
.sp-mode .mode-txt small{font-size:11px;color:var(--t4)}
/* 工具条：统计 + 主按钮 */
.sp-ed-wrap{margin-top:10px}
.sp-ed-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sp-stat{font-size:12px;color:var(--t3);background:var(--pri-weak,#EAF1FF);border-radius:999px;padding:3px 10px;font-weight:600}
.sp-stat b{color:var(--pri);font-variant-numeric:tabular-nums}
/* 规格卡片列表 */
.sp-list{display:flex;flex-direction:column;gap:10px}
.sp-row{border:1px solid var(--line2);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s,opacity .15s}
.sp-row:hover{border-color:var(--pri);box-shadow:0 3px 12px rgba(91,140,255,.12)}
.sp-row.off{opacity:.55;background:#FAFBFC}
.sp-row.off:hover{opacity:.8}
/* 卡片头：规格标识 + 启用 + 操作 */
.sc-top{display:flex;align-items:center;gap:12px;padding:10px 14px 6px;flex-wrap:wrap}
.sc-idx{width:22px;height:22px;border-radius:7px;background:var(--sf);border:1px solid var(--line2);flex-shrink:0;position:relative}
.sc-idx::before{content:'#';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--t4);font-weight:700}
.sc-name{display:flex;flex-direction:column;gap:3px;min-width:150px;flex:1 1 150px}
.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}
.sc-arrow{color:var(--pri);font-weight:800;opacity:.6;flex-shrink:0}
/* 启用 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-ops{display:inline-flex;gap:2px;flex-shrink:0;margin-left:auto}
.sc-op{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);color:var(--t2);font-size:14px;cursor:pointer;transition:.13s;background:#fff}
.sc-op:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-weak,#F0F5FF)}
.sc-op.danger:hover{border-color:var(--err);color:var(--err);background:#FEF2F2}
/* 卡片字段区 */
.sc-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(150px,1.5fr);gap:8px 10px;padding:8px 14px 12px;background:var(--sf2,#F7F9FC);border-top:1px solid var(--line5)}
.sf{display:flex;flex-direction:column;gap:3px;min-width:0}
.sf label{font-size:11px;color:var(--t3);font-weight:600;display:flex;align-items:center;gap:4px;white-space:nowrap}
.sf label em{color:var(--t5);font-style:normal;font-weight:500}
.sf label em.req-t{color:#DC2626}
.sfx{display:flex;align-items:stretch;border:1px solid var(--line2);border-radius:8px;background:#fff;overflow:hidden;transition:border-color .15s}
.sfx:focus-within{border-color:var(--pri);box-shadow:0 0 0 2px rgba(91,140,255,.15)}
.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)}
.sfx .input{border:none;border-radius:0;box-shadow:none;background:transparent;font-size:14px;padding-top:10px;padding-bottom:10px}
.sp-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 14px;border:1px dashed var(--line2);border-radius:14px;background:var(--sf2,#F9FBFF);color:var(--t4);text-align:center}
.sp-empty b{color:var(--t2);font-size:14px}
.sp-empty span{font-size:12px;max-width:520px;line-height:1.7}
/* 行输入数字去原生箭头（卡片内） */
.sc-fields input[type=number]::-webkit-inner-spin-button,.sc-fields input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sc-fields input[type=number]{-moz-appearance:textfield;appearance:textfield}
@media (max-width:720px){ .sc-fields{grid-template-columns:repeat(2,1fr)} }

/* 销售售价「自动」徽标（换算基数联动自动计算的提示） */
.auto-chip{display:none;align-items:center;font-style:normal;font-weight:600;font-size:11px;line-height:1;
  color:var(--pri);background:var(--pri-weak,#EAF1FF);border:1px solid rgba(91,140,255,.35);
  border-radius:999px;padding:2px 6px;letter-spacing:.2px}

/* ============ 客户端商品目录（单表）：订货编码列 = 商品主编码；SKU 订货编码仅在弹窗/详情/订单明细 ============ */
.cat-tbl td{vertical-align:middle;padding:14px 14px}
.cat-tbl .cat-seq{color:var(--t4);font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.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}
/* 规格选择卡：单位 · 销售售价 · SKU 订货编码 */
.sp-opt .so-l small .oc-n{font-family:ui-monospace,Consolas,monospace;color:#B45309;background:#FEF3C7;padding:0 5px;border-radius:6px;font-weight:700}
/* 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}

/* ===== 客户端商品目录：字号适当放大（相对全局表格 +1~2px） ===== */
.cat-tbl{font-size:14px}
.cat-tbl th{font-size:12px;font-weight:700}
.cat-tbl td{font-size:14px}
.cat-tbl .cat-seq{font-size:14px}
.cat-tbl .cat-name .nm{font-size:15px}
.cat-tbl .cat-code{font-size:14px}
.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 .btn-mini{height:32px;font-size:12px;padding:0 12px}
.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{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 13px;border:1px solid var(--line2);border-radius:9px;background:#fff;color:var(--t3);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s,background .15s;white-space:nowrap;flex-shrink:0}
.btn-back:hover{color:var(--pri-600);border-color:var(--pri);background:var(--pri-weak,#F0F5FF)}
.btn-back .arr{font-size:15px;line-height:1}
.back-row{margin:2px 0 12px}
.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);overflow:hidden;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}
#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}
#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}

/* 目录缩略图 60×60 + 行距紧凑（仅商品目录表） */
.cat-tbl td{padding:9px 12px}
.cat-tbl td.cat-img .thumb{width:60px;height:60px;border-radius:8px}
.cat-tbl thead th{padding-top:9px;padding-bottom:9px}

/* ===== 生产模式 · 登录 / 门户 ===== */
.lg-err{margin-top:12px;background:#FEE2E2;border:1px solid #FECACA;color:#B91C1C;border-radius:10px;padding:8px 12px;font-size:12px;line-height:1.6}
.rp .card{padding:22px}
.rp .field{margin-bottom:12px}

/* ===== 商品目录双栏：左侧 260px 分类导航树 + 右侧商品表（2026-09-08 重构） ===== */
.cat-flex{display:flex;align-items:flex-start;gap:16px;margin-top:4px}
/* ===== 客户端顶部业务页签条（卡片式横滚 · 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}
/* 悬浮阴影仅随 hc-cat-page 视口布局的固定卡条常驻（见文末媒体块）；基础滚动布局卡条随页滚动不吸顶、不遮挡 */
.nt-arrow{flex:0 0 24px;width:24px;height:24px;border-radius:999px;border:1px solid var(--line2);background:var(--canvas);color:var(--t3);font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .14s ease;opacity:.8;flex-shrink:0}
.nt-arrow:hover{background:var(--pri-weak);color:var(--pri-600);border-color:var(--pri-100);opacity:1}
.nt-arrow:active{transform:scale(.93)}
.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)}
/* 导航页签弹窗 · 绑定一级分类 chip（点击整片切换；on=选中态主题描边+淡底） */
.nt-cat-chip{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px;padding:7px 15px;font-size:14px;color:var(--t2);cursor:pointer;background:#fff;user-select:none;line-height:1;transition:border-color .15s,background .15s,color .15s}
.nt-cat-chip:hover{border-color:var(--pri-200);background:var(--sf);color:var(--t1)}
.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:640px){
  .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 img{width:100%;height:100%;object-fit:cover;display:block}
.nt-ic svg{width:17px;height:17px}
.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}
.cat-tree{width:460px;flex:0 0 460px;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;height:calc(100vh - 153px);max-height:calc(100vh - 153px);overflow-y:auto;position:sticky;top:138px;scrollbar-width:thin}
/* ===== 客户端目录左栏：商城式分类板块（2026-09-09 弃树形）=====
 * 结构：.cb-top 复位条（全部商品/未分类胶囊）→ 每 .cb-sec 一个一级板块
 * （.cb-h 一级大标题 + 右侧在售计数，点击选整类）→ .cb-grid 内 4 列 .cb-tile
 * （.cb-th 缩略图或首字占位 + .cb-n 名称）。宽度 460px 由 .cat-tree 控制。 */
.cb-top{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.cb-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--t2);background:var(--sf);border:1px solid var(--line);cursor:pointer;user-select:none;transition:all .13s ease;flex-shrink:0}
.cb-pill:hover{background:var(--pri-weak);color:var(--pri-600);border-color:var(--pri-100)}
.cb-pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cb-pill.dim{color:var(--t4);font-weight:500}
.cb-pill .cb-c{font-size:12px;opacity:.75;font-variant-numeric:tabular-nums}
.cb-sec{margin-bottom:8px}
.cb-sec.on .cb-h{border-radius:10px;background:var(--pri-weak);padding-left:10px;padding-right:10px}
.cb-h{display:flex;align-items:center;gap:8px;padding:10px 8px 8px;font-size:16px;font-weight:800;color:var(--ink);cursor:pointer;user-select:none;transition:background .13s;line-height:1.3}
.cb-h:hover{background:var(--surface)}
.cb-sec .cb-h{border-top:1px dashed var(--line3);margin-top:6px;padding-top:12px;border-radius:0}
.cb-sec:first-of-type .cb-h{border-top:none;margin-top:2px;padding-top:6px}
.cb-sec.on .cb-h{border-top:1px solid transparent}
.cb-hn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-cnt{font-size:12px;font-weight:500;color:var(--t4);font-variant-numeric:tabular-nums;flex-shrink:0}
.cb-sec.on .cb-cnt{color:var(--pri-600)}
.cb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:2px 2px 4px}
.cb-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 7px;border:1px solid var(--bd-soft);border-radius:11px;background:var(--canvas);cursor:pointer;user-select:none;text-align:center;transition:all .13s ease;position:relative;min-width:0}
.cb-tile:hover{border-color:var(--pri-100);background:var(--pri-weak);box-shadow:0 3px 8px rgba(15,23,42,.05)}
.cb-tile.on{border-color:var(--pri);background:var(--pri-weak);box-shadow:inset 0 0 0 1px var(--pri)}
.cb-th{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:84px;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,var(--pri-weak),#F2F6FD);font-weight:700;font-size:20px;color:var(--pri-600);flex-shrink:0}
.cb-th img{width:100%;height:100%;object-fit:cover;display:block}
.cb-n{display:block;width:100%;font-size:14px;color:var(--t1);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.cb-tile.on .cb-n{color:var(--pri-600);font-weight:700}
.cb-none{padding:14px 6px 18px;font-size:12px;color:var(--t4);text-align:center}
.cat-main{flex:1;min-width:0}
@media (max-width:1600px){ /* 中大屏仍保持 4 列，适度收窄给商品表留空间 */
  .cat-tree{width:430px;flex-basis:430px}
}
@media (max-width:1360px){
  .cat-tree{width:400px;flex-basis:400px}
}
@media (max-width:1080px){
  .cat-flex{flex-direction:column}
  .cat-tree{width:100%;flex-basis:auto;height:auto;max-height:none;position:static}
  .cb-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
}

/* ===== 分类管理 · 二级缩略图预览（商家端 cat2th-lg） ===== */
.cat2th-lg{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--pri-weak),#F2F6FD);border:1px solid var(--bd-soft);flex-shrink:0;font-size:22px;font-weight:700;color:var(--pri-600)}
.cat2th-lg img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== 可搜索下拉（商品表单品牌 / 单位 ssel） ===== */
.ssel{position:relative;width:100%}
.ssel-t{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line2);border-radius:8px;padding:9px 12px;background:#fff;font-size:14px;color:var(--t2);cursor:pointer;outline:none;text-align:left}
.ssel-t:hover{border-color:var(--line3)}
.ssel-t:focus-visible{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-weak)}
.ssel-t .ssel-lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssel-t .ssel-a{color:var(--t3);font-style:normal;font-size:12px}
.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，2026-09-09 改版：仅名称/单位/换算基数 3 列 + 操作） ===== */
.sps-head{display:grid;grid-template-columns:minmax(160px,1fr) 110px 120px 90px;gap:6px;padding:0 2px 6px;font-size:12px;color:var(--t4);font-weight:600}
.sps-row{display:grid;grid-template-columns:minmax(160px,1fr) 110px 120px 90px;gap:6px;align-items:center;margin-bottom:6px}
.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}
.sps-ops{display:flex;gap:2px;align-items:center;white-space:nowrap}

/* ===== 商品富文本详情 · 编辑器（商家端表单）+ 客户端查看样式 =====
 *  - 工具栏：胶囊按钮行 · 与现有主色（pri）一致 · 选中态/悬停态反馈
 *  - 编辑区：与 .input 同圆角与边框，contenteditable=true，HTML 即可；空时显示 placeholder（:empty::before）
 *  - 查看区：.rt-content 包装客户端渲染的 HTML（h2/h3/p/ul/ol/hr/a 等），与详情卡片视觉协调 */
.rt-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background:var(--sf);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.rt-toolbar .rt-sep{display:inline-block;width:1px;height:16px;background:var(--line2);margin:0 4px;flex-shrink:0}
.rt-btn{min-width:32px;height:30px;padding:0 9px;border:1px solid transparent;border-radius:7px;background:#fff;color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.14s;user-select:none}
.rt-btn:hover{background:var(--pri-weak);color:var(--pri-600);border-color:var(--pri-100)}
.rt-btn:active{transform:translateY(1px)}
.rt-toolbar .rt-hint{font-size:12px;color:var(--t4);margin-left:8px}
.rt-edit{min-height:200px;max-height:480px;overflow:auto;border:1px solid var(--line2);border-radius:10px;background:#fff;padding:14px 16px;font-size:14px;line-height:1.7;color:var(--t1);outline:none;transition:border-color .15s,box-shadow .15s}
.rt-edit:focus{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-weak)}
.rt-edit:empty::before{content:attr(data-placeholder);color:var(--t4);white-space:pre;pointer-events:none}
/* 编辑区内部元素统一样式（contenteditable 自动产出） */
.rt-edit h2,.rt-edit h3{margin:12px 0 6px;font-weight:700;color:var(--ink);line-height:1.4}
.rt-edit h2{font-size:17px;border-bottom:1px dashed var(--line3);padding-bottom:4px}
.rt-edit h3{font-size:15px}
.rt-edit p{margin:6px 0}
.rt-edit ul,.rt-edit ol{padding-left:24px;margin:8px 0}
.rt-edit ul{list-style:disc}
.rt-edit ol{list-style:decimal}
.rt-edit li{margin:3px 0}
.rt-edit a{color:var(--pri);text-decoration:underline}
.rt-edit a:hover{color:var(--pri-600)}
.rt-edit hr{border:none;border-top:1px dashed var(--line2);margin:14px 0}
.rt-edit b,.rt-edit strong{font-weight:700}
.rt-edit i,.rt-edit em{font-style:italic}
.rt-edit u{text-decoration:underline}
.rt-edit blockquote{margin:8px 0;padding:6px 12px;border-left:3px solid var(--pri-100);background:var(--sf);color:var(--t3);border-radius:0 6px 6px 0}
/* 客户端查看样式（与编辑器内部元素一致，仅去掉 placeholder 与焦点样式） */
.rt-content{font-size:14px;line-height:1.85;color:var(--t1);word-break:break-word}
.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%;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)}
@media (max-width:560px){
  .rt-edit{min-height:150px;padding:11px 12px}
  .rt-toolbar{gap:2px;padding:5px 6px}
  .rt-btn{min-width:28px;height:28px;padding:0 6px;font-size: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}
.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}
.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}
.c-drawer-body{flex:1;overflow-y:auto;padding:18px 22px 70px;-webkit-overflow-scrolling:touch}
/* 抽屉宽 1000px：详情主区横向布局充足；窄屏回退全宽 */
@media (max-width:1080px){
  .c-drawer,.c-drawer.w800{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{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:12px}
#cart-drawer .cd-list{flex:1 1 auto;min-height:0;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;overscroll-behavior:contain}
#cart-drawer .cd-row{display:flex;align-items:center;gap:12px;padding:12px}
#cart-drawer .cd-row + .cd-row{border-top:1px solid var(--line3)}
#cart-drawer .cd-thumb{flex:0 0 56px;width:56px;height:56px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sf);border:1px solid var(--line);font-size:17px;font-weight:600;color:var(--t5)}
#cart-drawer .cd-thumb .thumb{width:100%;height:100%;border-radius:0;padding:0;background:transparent}
#cart-drawer .cd-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
#cart-drawer .cd-nm{font-size:14px;font-weight:600;color:var(--ink);display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cart-drawer .cd-nm:hover{color:var(--pri-600);text-decoration:underline}
#cart-drawer .cd-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--t4);line-height:1.6}
#cart-drawer .cd-pre{font-size:11px;font-weight:600;color:var(--warn-ink)}
#cart-drawer .cd-ops{display:flex;align-items:center;gap:8px;font-size:12px}
#cart-drawer .cd-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#cart-drawer .cd-right .cd-amt{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
#cart-drawer .cd-right .cd-amt .wait{font-style:normal;font-size:13px;font-weight:600;color:var(--warn-ink)}
#cart-drawer .cd-qty{display:flex;align-items:center;gap:8px}
/* 「换规格」与数量同行；固定 52px 槽位 —— 单规格商品没有它，留空占位才能让各行步进器落在同一个 x */
#cart-drawer .cd-slot{flex:0 0 52px;width:52px;height:30px;display:flex;align-items:center;justify-content:center;font-size:12px}
#cart-drawer .cd-empty{text-align:center;padding:52px 20px;font-size:13px;color:var(--t4)}
#cart-drawer .cd-sum{flex:0 0 auto;height:64px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 16px}
#cart-drawer .cd-sum-lb{font-size:13px;color:var(--t3)}
#cart-drawer .cd-sum-amt{font-size:24px;font-weight:800;color:var(--pri-600);font-variant-numeric:tabular-nums;margin-right:auto}
#cart-drawer .cd-sum-cnt{font-size:12px;color:var(--t4);white-space:nowrap}
#cart-drawer .cd-form{flex:0 0 auto;display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
#cart-drawer .cd-ent{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t4)}
#cart-drawer .cd-ent b{font-size:13px;font-weight:600;color:var(--ink)}
#cart-drawer .cd-div{height:1px;background:var(--line3)}
#cart-drawer .cd-fd{display:flex;flex-direction:column;gap:5px;position:relative;min-width:0}
#cart-drawer .cd-lb{font-size:12px;font-weight:500;color:var(--t2)}
#cart-drawer .cd-fd .input{width:100%;height:38px;padding:0 10px;font-size:13px;border-radius:10px}
#cart-drawer .cd-fd .err-txt{position:absolute;left:2px;bottom:-14px;font-size:11px}
#cart-drawer .cd-2col{display:flex;gap:14px}
#cart-drawer .cd-2col .cd-fd{flex:1 1 0}
#cart-drawer .cd-fd .req{color:var(--err);font-style:normal}
#cart-drawer .cd-foot{flex:0 0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 16px}
#cart-drawer .cd-exp{display:flex;align-items:center;gap:8px;font-size:12.5px}
#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,.cb-h:focus-visible,.cb-tile: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 反馈（尊重系统减弱动效偏好） */
.cb-th{overflow:hidden}
.cb-th img{transition:transform .22s ease}
.cb-tile:hover .cb-th img,.cb-tile:focus-visible .cb-th img{transform:scale(1.06)}
.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}}
/* 表格自适应：旧的「按列序号隐藏列」规则已删除（2026-09-14）。
 * 它的原目标是序号列(1) 与 单位列(7)，但客户端表格早已没有序号列，
 * 于是这条规则实际藏掉的是**商品列**；本轮又新增了星标列(1)、供货状态并列(7)，
 * 继续保留会把新列误伤。现改为：表格定宽 + 容器内横向滚动，不隐藏任何列。 */
/* 徽章降级：目录行供货状态 = 圆点 + 文字（状态徽章样式仍用于详情/其它页） */
.cat-tbl .st-cell{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap}
.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:1280px){
  .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{position:fixed;z-index:70;background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh2);padding:6px;min-width:200px}
.rel-dd-h{padding:5px 8px 7px;font-size:12px;color:var(--t4);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-dd-it{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px;border-radius:9px;color:var(--t2);font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.rel-dd-it:hover{background:var(--pri-weak);color:var(--pri-600)}
.rel-dd-it b{display:inline-flex;min-width:18px;height:18px;border-radius:999px;background:var(--sf2);color:var(--t3);font-size:11px;font-weight:700;align-items:center;justify-content:center;padding:0 5px;margin-left:4px;box-sizing:border-box}
.rel-dd-it:hover b{color:var(--pri-600)}
.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:1500px){
  .m-tbl thead th:nth-child(2),.m-tbl tbody tr td:nth-child(2){display:none}
}
@media (max-width:1280px){
  .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. 令牌重映射：一处改，全端换肤（客户端规则皆由这些变量驱动） ---------- */
.shell.hc-c,.hc-modal{
  /* ── 主色阶 · 蓝（2026-09-14 主题优化）：客户端 --pri 与商家端 #0064E0 收敛为同一支 ── */
  --pri:#0F62CE; --pri-600:#0B4EA6; --pri-700:#072E63;
  --pri-weak:#E4EEFC; --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.74 → 黄只做底色/图形，绝不做文字色 */
  --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:1180px){
  .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);border-color:var(--pri);color:#fff;font-weight:600}
.shell.hc-c .cb-none{padding:14px 6px 18px;font-size:12px;color:var(--t4);text-align:center}

/* ---------- 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}
.shell.hc-c table.tbl{min-width:0}
.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);color:#fff;border-color:var(--pri);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}
.shell.hc-c .cat-prod-n{font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.shell.hc-c .cat-prod-n:hover{color:var(--pri-600)}
.shell.hc-c .cat-prod-c{font-size:11px;color:var(--t4);font-variant-numeric:tabular-nums}
.shell.hc-c .cat-cat1{font-size:12px;color:var(--t3)}
.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)}
.shell.hc-c .btn{height:42px;border-radius:999px;font-size:14px;font-weight:500;padding:0 22px}
.shell.hc-c .btn.sm{height:34px;font-size:12px;padding:0 16px;font-weight:500}
.shell.hc-c .btn.pri{background:var(--pri);color:#fff}
.shell.hc-c .btn.pri:hover{background:var(--pri-600)}
.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 .sim-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--sf2);border:1px solid var(--line3);margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.shell.hc-c .sim-row:hover{border-color:var(--pri-100);background:#fff}
.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}
.shell.hc-c .sim-row .sr-meta{font-size:11.5px;color:var(--t3);line-height:1.4}   /* 行卡底是 --sf2，t4 只有 4.42 */
.shell.hc-c .sim-row .sr-note{font-size:11.5px;color:var(--t3);line-height:1.45}
.shell.hc-c .sim-row .sr-price{flex:0 0 110px;text-align:right;font-size:15px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.shell.hc-c .sim-row .sr-st{flex:0 0 104px;display:flex;align-items:center}
.shell.hc-c .sim-row .sr-act{flex:0 0 132px;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}
.shell.hc-c .sim-row .sr-go{flex:0 0 16px;display:flex;align-items:center;justify-content:flex-end}

/* ---------- 11. 订单 / 提交卡 ---------- */
.shell.hc-c .cart-layout{gap:22px}
.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)}

/* ---------- 12. 登录 / 门户（仅客户端入口 .lg-c；商家端登录保持原样） ---------- */
.login.lg-c{background:#fff}
.login.lg-c .lp{width:50%;min-width:0;background:#000;padding:64px}
.login.lg-c .lp .brand-row{margin-bottom:0}
.login.lg-c .brand-logo{width:28px;height:28px;border-radius:8px;font-size:14px;font-weight:600;background:#0F62CE}
.login.lg-c .lp .big{font-size:40px;font-weight:600;letter-spacing:-.6px;line-height:1.15;margin-top:0}
.login.lg-c .lp .txt{color:#939BA6;font-size:16px;line-height:1.65;margin-top:16px}
.login.lg-c .lp ul li{font-size:14px;color:#939BA6}
.login.lg-c .lp ul .d{width:8px;height:8px;background:#0F62CE}
.login.lg-c .rp{padding:64px;max-width:560px}
.login.lg-c h2{font-size:26px;font-weight:600;letter-spacing:-.4px;color:#0E1116}
.login.lg-c .sub2{font-size:13px;color:#55606C;line-height:1.6}
.login.lg-c .brand-row b{font-size:19px}
.login.lg-c .field label{font-size:12px;font-weight:400;color:#55606C}
.login.lg-c .input{border-radius:11px;border-color:#D5DAE1;padding:12px 14px;font-size:14px}
.login.lg-c .input:focus{border-color:#0F62CE;box-shadow:0 0 0 3px #E4EEFC}
.login.lg-c .btn.pri{background:#0F62CE;border-radius:999px}
.login.lg-c .btn.pri.block{height:48px;font-size:15px;font-weight:500}
.login.lg-c .btn.sm{height:34px;font-size:12px;border-radius:999px}
.login.lg-c .lg-err{background:#FBEBE9;border:1px solid #EBC3BD;color:#C0392B;border-radius:11px}
.login.lg-c .hint{font-size:11px;color:#939BA6}
.login.lg-c .card{box-shadow:none;border:0;background:transparent}
.login.lg-c .welcome-note,.login.lg-c .switch-end{display:none}

/* ---------- 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}
  .shell.hc-cat-page .tbl-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
  .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);border-color:var(--pri);color:#fff;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}
  .shell.hc-cat-page .pg-bar{flex-wrap:nowrap}
}


/* 二级分类筛选条 · 定高（2026-09-13）
 * 恒常渲染 + 单行 + 左右箭头滚动：高度恒为 32px，chip 再多也不换行、不撑高，
 * 因此切换一级分类时下方表格与分页条不再上下位移。
 * 横向滚动条隐藏（由左右箭头承担滚动），避免滚动条出现/消失再带来宽度抖动。 */
.shell.hc-c .cat2bar{display:flex;align-items:center;gap:8px;height:32px;flex:0 0 auto;
  flex-wrap:nowrap;overflow:hidden;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);border-color:var(--pri);color:#fff;font-weight:600}
.shell.hc-c .pg-n.on:disabled{opacity:1;background:var(--pri);border-color:var(--pri);color:#fff}
.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:0 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}


/* ============================================================
 * 商家端「分类管理」· 三栏级联布局（2026-09-13 重构）
 * 栏1 一级分类 → 栏2 二级分类 → 栏3 三个页签（缩略图 / 预制分类参数 / 预制销售规格模板）
 * 作用域限定在 .cats3（仅本页使用），不影响商家端其它页面。
 * ============================================================ */
.cats3{display:grid;grid-template-columns:280px 320px minmax(0,1fr);gap:14px}
/* 三栏等高拉伸（align-items 取默认 stretch）：避免右栏内容多少导致栏高跳动 */
.cats3 > .cats-col{align-self:stretch}
/* 三栏各自限高并内部滚动：换一级分类时右栏不会把整页顶长/顶短 */
.cats3 .cats-col{display:flex;flex-direction:column;min-height:320px;max-height:calc(100vh - 210px);overflow:hidden}
.cats3 .cats-col > .card-title{flex:0 0 auto}
.cats3 .cats-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;margin-top:10px;padding-right:2px}
.cats3 .cats-list::-webkit-scrollbar{width:8px}
.cats3 .cats-list::-webkit-scrollbar-thumb{background:#D2D2D7;border-radius:999px}
.cats3 .cats-list::-webkit-scrollbar-track{background:transparent}

/* 列表行：操作默认隐藏，悬停/聚焦整行时以浮层覆盖右侧（不引发回流，名称宽度不跳） */
.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}
.cats3 .ctab-n{font-size:11px;font-weight:600;color:var(--t4);background:var(--sf);border-radius:999px;padding:1px 7px;line-height:1.6}
.cats3 .detail-tabs button.on .ctab-n{background:var(--pri-weak);color:var(--pri-600)}
.cats3 .ctab-panel{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 2px 2px}
.cats3 .ctab-panel[hidden]{display:none}
.cats3 .ctab-panel::-webkit-scrollbar{width:8px}
.cats3 .ctab-panel::-webkit-scrollbar-thumb{background:#D2D2D7;border-radius:999px}

.cats3 .ctab-desc{font-size:12px;color:var(--t3);line-height:1.75;background:var(--sf);border-radius:10px;padding:10px 12px}
.cats3 .ctab-desc b{color:var(--ink)}
.cats3 .ctab-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line4)}
.cats3 .ctab-hint{font-size:12px;color:var(--t4);flex:1 1 200px;min-width:0}
.cats3 .thumb-row{display:flex;align-items:center;gap:18px;margin-top:16px;flex-wrap:wrap}
.cats3 .thumb-ops{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.cats3 .cats-empty{font-size:13px;color:var(--t4);line-height:1.9;padding:18px 14px;background:var(--sf);border-radius:10px;margin-top:12px}
.cats3 .sps-head{margin-top:14px}
.cats3 #ps-rows,.cats3 #sps-rows{margin-top:12px}

@media (max-width:1240px){
  .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}
.cat-ghost .ci-ops{display:none!important}
@keyframes catGhostIn{from{box-shadow:0 0 0 rgba(0,0,0,0)}}
/* 落点横杠：独立元素 + 平滑滑动 + 两端锚点 */
.cats3 .cats-list{position:relative}
.cats3 .cat-drop-line{position:absolute;left:2px;right:2px;top:0;height:2px;border-radius:2px;
  background:var(--pri);opacity:0;pointer-events:none;
  transition:transform .17s cubic-bezier(.2,.7,.3,1),opacity .12s ease}
.cats3 .cat-drop-line.on{opacity:1}
.cats3 .cat-drop-line::before,
.cats3 .cat-drop-line::after{content:"";position:absolute;top:50%;width:8px;height:8px;
  margin-top:-4px;border-radius:999px;background:var(--pri);box-shadow:0 0 0 2px #fff}
.cats3 .cat-drop-line::before{left:-4px}
.cats3 .cat-drop-line::after{right:-4px}
/* 落位回弹（只动 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}

/* ============================================================
 * 商家端 · 商品管理设计系统层（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:#EAF2FE; --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;
}
.shell.hc-mprod .content{padding:22px 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}
.shell.hc-mprod .mp-card .tbl-scroll{overflow-x:auto;scrollbar-gutter:stable}
.shell.hc-mprod .mp-card table.tbl{width:100%;min-width:1120px;border-collapse:collapse;table-layout:fixed}
.shell.hc-mprod .mp-card .tbl th{height:44px;padding:0 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}
.shell.hc-mprod .mp-card .tbl td{height:52px;padding:0 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}
.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}
.shell.hc-mprod .mp-pn{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:360px}
.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}
.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);color:#fff;font-weight:600}
.shell.hc-mprod .mp-foot .pg-n.on:disabled{opacity:1;background:var(--pri);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)}

/* ---------- 行内更多菜单 / 列设置浮层（挂 body，类名前缀 mp- 命名空间） ---------- */
.mp-dd-root .mp-menu{position:fixed;z-index:120;background:#fff;border:1px solid var(--line,#E4E7EC);
  border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.14);padding:6px 0;min-width:184px;
  display:flex;flex-direction:column;animation:mpPop .14s ease}
.mp-dd-root .mp-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px;font-size:13px;color:#1D1D1F;cursor:pointer;text-decoration:none;white-space:nowrap}
.mp-dd-root .mp-menu a:hover{background:#F7F9FB}
.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}
.mp-dd-root .mp-pop{position:fixed;z-index:120;background:#fff;border:1px solid #E4E7EC;border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.14);padding:10px 12px 12px;min-width:180px;animation:mpPop .14s ease}
.mp-dd-root .mp-pop-h{font-size:11px;color:#86868B;margin-bottom:6px}
.mp-dd-root .mp-pop label{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:13px;color:#1D1D1F;cursor:pointer}
.mp-dd-root .mp-pop label input{accent-color:#0064E0;width:14px;height:14px;cursor:pointer}
@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{height:60px;padding:0 24px;align-items:center;justify-content:flex-end;border-top:1px solid #F0F0F2}
.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;overflow:hidden;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}
.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}
.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:0 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}
}

/* ============================================================
 * 客户端目录页 · 左侧导航重构（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}
/* 收藏卡置顶吸附：滚动到「全部商品分类」中后段时仍能一键回到收藏 */
.shell.hc-c .cnav-pin{position:sticky;top:0;z-index:2;background:var(--sf);padding-bottom:10px}
.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}
.shell.hc-c .fav-btn{width:26px;height:26px;padding:0;border:0;background:transparent;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(--sf);color:var(--fav-deep)}
.shell.hc-c .fav-btn.on{color:var(--fav)}
.shell.hc-c .fav-btn:active{transform:scale(.92)}
.shell.hc-c .cat-tbl .cat-prod-tx{min-width:0;overflow:hidden}
.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` 规则与注释一并移除。 */
.shell.hc-c .cat-main .toolbar{flex-wrap:nowrap}
.shell.hc-c .cat-main .toolbar .searchbox{flex:0 1 260px;min-width:100px}
.shell.hc-c .cat-main .toolbar .sel{flex:0 1 auto;min-width:110px}
.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}
.mp-modal .al-ta{display:block;width:100%;box-sizing:border-box;min-height:128px;padding:10px 12px;
  border:1px solid #D2D2D7;border-radius:10px;background:#fff;font-family:inherit;font-size:13px;line-height:1.7;color:#1D1D1F;resize:vertical}
.mp-modal .al-ta:focus{outline:none;border-color:#0064E0;box-shadow:0 0 0 3px rgba(0,100,224,.12)}
.mp-modal .al-cnt{margin-top:8px;font-size:11px;color:#86868B}

/* ---------- 07 订单详情排版（2026-09-16 · 主操作上移为整宽横条、导出移至页头右上角、审计置明细之下） ----------
 * 「订单处理」由右栏卡片改为整宽横向动作条：标题与说明在左、动作按钮在右 ——
 * 整宽卡片里若沿用 .btn.block，三个按钮会被拉成上千像素宽的巨型按钮，故改为行内排布。
 */
.od-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.od-bar-main{flex:1 1 260px;min-width:0}
.od-bar-main .hint{margin-top:6px;line-height:1.7}
.od-bar-btns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:720px){
  .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-09-16）：成交单价常驻可见 ----------
 * 横向滚动时「成交单价」钉在右缘 —— 它是本单据最核心的一列（2026-09-17 起为只读展示，不可编辑），
 * 也是商家对单时最需要始终看到的一列。
 * 只冻结**最右一列**、位移量固定 right:0，因此不需要任何宽度计算。
 * 为什么不把「成交单价 + 小计」两列一起冻结（更直觉的做法）：那必须知道小计列的真实渲染宽度，
 * 而本表是 table-layout:auto —— 小计列宽随内容浮动（实测待处理 112.06px / 已完成 100.19px /
 * 已关闭 99.00px），写死位移量会同时产生「压边」与「裂缝（底层列从缝里透出来）」两种缺陷。
 * 所以把小计列放在成交单价左侧：滚到最右时两列相邻可见，看中间列时成交单价始终可见。
 * 分隔线用 inset box-shadow 而不是 border-left —— border-collapse:collapse 下 td 的边框
 * 在 sticky 时会画在静态位置，box-shadow 不受影响。
 * 背景必须不透明（否则滚动内容会从冻结列下方透出），行 hover 底色也要一并覆盖。 */
.tbl th.col-frz,.tbl td.col-frz{position:sticky;z-index:2;right:0;background:#fff;box-shadow:inset 1px 0 0 var(--line3)}
.tbl th.col-frz{background:var(--sf2)}
.tbl tbody tr:hover td.col-frz{background:#FBFDFF}
/* 窄屏不冻结：可视内容区已不足（<1081px 时约 800px），冻住最右列会把中间挤得几乎无处可滚 */
@media (max-width:1080px){
  .tbl th.col-frz,.tbl td.col-frz{position:static;box-shadow:none}
}

/* ============================================================
 * 商家端「分类管理」· 两栏主从 + 详情抽屉（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:#EAF2FE; --pri-100:#CFE2F7;
  --ok:#1E8E3E; --ok-weak:#EAF6EE;
  --warn:#B26A00; --warn-weak:#FFF8EC;
  --err:#D93025; --err-weak:#FDECEA;
}
.shell.hc-mcat .content{padding:22px 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 - 236px)}

/* ---------- 左栏 · 一级分类导航 ---------- */
.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;overflow:hidden;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}
.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;padding:9px 10px 10px}
.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)}

/* ---------- 二级分类详情抽屉（560 · 三段同屏） ---------- */
.shell.hc-mcat .drw.drw-cat{width:560px;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}

/* 参数行在 560 抽屉内自适应：全局 .kv-row.tpl 的最小列宽合计 570px > 抽屉内容区 520px，
   会把行尾的「移除」挤出可视区（既有缺陷，2026-09-16 落码实测）。此处只收紧本页抽屉，
   不改全局规则；候选项列仍留 1fr，实际分到约 170px，与改动前一致。 */
.shell.hc-mcat .drw-cat .kv-row.tpl{grid-template-columns:104px 70px 108px minmax(0,1fr) 40px}

@media (max-width:1240px){
  .shell.hc-mcat .cats3{grid-template-columns:220px minmax(0,1fr)}
}
@media (max-width:1000px){
  .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-card{margin-top:16px}
.shell.hc-c .tpl-card .card-title .btn{margin-left:auto}
.shell.hc-c .tpl-list{display:flex;flex-direction:column;margin-top:4px}
.shell.hc-c .tpl-row{display:flex;align-items:center;gap:12px;padding:12px 2px;flex-wrap:wrap;border-top:1px solid var(--line5)}
.shell.hc-c .tpl-row:first-child{border-top:0}
.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-meta{font-size:12px;color:var(--t5)}
.shell.hc-c .tpl-ops{margin-left:auto;display:flex;align-items:center;gap:12px}
.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-empty{margin:8px 0}
/* 加载模式二选一：整块可点的大按钮（同一套模板既能叠加采购、也能做月度固定采购） */
.hc-tpl-modal .tpl-modes{display:flex;flex-direction:column;gap:10px;margin:6px 0 12px}
.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}
.hc-tpl-modal .tpl-fd{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;font-size:13px;color:var(--t3)}
.hc-tpl-modal .tpl-fd > span{font-weight:600;color:var(--t2)}
/* 编辑面板（草稿态）：搜索加行 + 行内改数量 / 移除 */
.hc-tpl-modal .tpl-search{margin:10px 0}
.hc-tpl-modal .tpl-res{max-height:240px;overflow:auto;margin-top:8px}
.hc-tpl-modal .tpl-add-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid var(--line5)}
.hc-tpl-modal .tpl-add-row:first-child{border-top:0}
.hc-tpl-modal .tpl-add-mid{flex:1 1 auto;min-width:0}
.hc-tpl-modal .tpl-sp-sel{width:auto;max-width:230px;height:30px;flex:0 0 auto;font-size:12px}
.hc-tpl-modal .tpl-add-pr{flex:0 0 auto;min-width:76px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.hc-tpl-modal .tpl-ed-n{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-tpl-modal .tpl-ed-m{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12px;color:var(--t5);flex-wrap:wrap}
.hc-tpl-modal .tpl-ed-hd{display:flex;align-items:center;justify-content:space-between;margin:12px 0 6px;font-size:12px;color:var(--t4)}
.hc-tpl-modal .tpl-ed-rows{max-height:300px;overflow:auto;padding:0 10px;border:1px solid var(--line4);border-radius:10px;background:var(--canvas)}
.hc-tpl-modal .tpl-ed-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line5)}
.hc-tpl-modal .tpl-ed-row:first-child{border-top:0}
.hc-tpl-modal .tpl-ed-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.hc-tpl-modal .tpl-ed-row .stepper{flex:0 0 auto}

/* ---------- 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 与 .tpl-card 各 16px）会与 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 > .tpl-card,
.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:1180px){
  .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:820px){
  .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%}
}