/* ============================================================
   NM Operator Console — 仓库运营控制台（仓库主理人/仓管工作台）
   视觉家族：德国账册 × 珠宝暖金（承 portal），气质：调度台 Leitstand
   —— 更密、更工具化、动作优先、扫码枪友好、印章红警报
   ============================================================ */

:root{
  /* 纸与线（承 portal） */
  --canvas:#ece7db;
  --canvas-2:#e6e0d1;
  --card:#fffdf8;
  --card-2:#f7f3ea;
  --card-3:#f1ecdf;
  --line:#e2dbc7;
  --line-strong:#cfc6ab;

  /* 墨色文字 */
  --ink:#1a211c;
  --ink-2:#4c5449;
  --ink-3:#858a7b;

  /* 品牌松绿 / 黄铜 / 印章红 */
  --pine:#1c3529;
  --pine-grad-a:#22402f;
  --pine-grad-b:#152820;
  --pine-line:#2f4d3c;
  --pine-rgb:28,53,41;
  --brass:#9c7728;
  --brass-2:#b78f39;
  --brass-soft:#c9a45c;
  --brass-pale:#efe3c4;
  --brass-rgb:156,119,40;
  --brass-soft-rgb:201,164,92;
  --seal:#b5432e;
  --seal-2:#9c3623;
  --seal-rgb:181,67,46;

  /* 合规红绿灯三态 */
  --lt-green:#1e8a4e; --lt-green-glow:rgba(30,138,78,.26);
  --lt-amber:#c8892a; --lt-amber-glow:rgba(200,137,42,.30);
  --lt-red:#c23b26;   --lt-red-glow:rgba(194,59,38,.26);

  /* 平台色 */
  --c-etsy:#c26a1e;
  --c-shopify:#1f8a54;
  --c-tiktok:#3f5fa6;
  --c-manual:#7a7266;

  /* 语义底/字 */
  --ok-bg:#e4f0e8;    --ok-fg:#1c6a3f;
  --warn-bg:#f7ecd2;  --warn-fg:#875f10;
  --info-bg:#e6edf6;  --info-fg:#39598f;
  --mut-bg:#eae5d8;   --mut-fg:#69705f;
  --seal-bg:#f6e2dc;
  --scan-ok:#1e8a4e;

  /* 字体（系统字体栈，零网络） */
  --font-display:"Didot","Bodoni 72","GFS Didot","Hoefler Text","Songti SC",Georgia,serif;
  --font-serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong",Georgia,serif;
  --font-sans:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","SF Mono","Menlo",ui-monospace,monospace;

  --shadow-sm:0 1px 2px rgba(40,50,35,.06), 0 1px 0 rgba(255,255,255,.55) inset;
  --shadow-md:0 6px 20px -10px rgba(30,45,30,.28), 0 1px 0 rgba(255,255,255,.5) inset;
  --shadow-lg:0 24px 60px -22px rgba(20,35,25,.5);
  --radius:12px;
  --rail-w:238px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--canvas);
  color:var(--ink);
  font-size:13.5px;line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1200px 640px at 88% -10%, rgba(var(--brass-rgb),.09), transparent 60%),
    radial-gradient(900px 720px at -8% 110%, rgba(var(--pine-rgb),.10), transparent 62%),
    var(--canvas);
}
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit;border:none;background:none}
input,select{font-family:inherit}
svg{display:block}
::selection{background:var(--brass-soft);color:#1b231d}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:5px}

/* ===== 布局骨架：书脊 rail + 主区 ===== */
.shell{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh}

/* ---- 左侧：账册书脊 + 工位 ---- */
.rail{
  background:linear-gradient(176deg,var(--pine-grad-a),var(--pine-grad-b));
  color:#e9e4d5;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  border-right:1px solid rgba(0,0,0,.3);
  box-shadow:2px 0 0 rgba(var(--brass-soft-rgb),.30) inset, -1px 0 24px rgba(20,35,25,.14);
}
.rail-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 15px;
  border-bottom:1px solid rgba(233,228,213,.12)}
.seal{
  width:40px;height:40px;flex:none;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.02em;
  color:var(--brass-soft);
  background:radial-gradient(circle at 34% 28%, rgba(var(--brass-soft-rgb),.24), rgba(var(--brass-soft-rgb),.04));
  border:1.5px solid rgba(var(--brass-soft-rgb),.5);
  box-shadow:0 0 0 3px rgba(var(--brass-soft-rgb),.08), 0 2px 6px rgba(0,0,0,.25) inset;
}
.rail-brand .bt .t{font-family:var(--font-serif);font-weight:700;font-size:16px;letter-spacing:.03em;color:#fff;line-height:1.15}
.rail-brand .bt .t em{font-style:normal;color:var(--brass-soft)}
.rail-brand .bt .s{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(233,228,213,.5);margin-top:3px}

/* 工位卡：显示当前仓管 + 租户（运营端是租户级） */
.station{
  margin:13px 14px 4px;padding:11px 13px;border-radius:11px;
  background:rgba(0,0,0,.2);border:1px solid rgba(var(--brass-soft-rgb),.2);position:relative;
}
.station::before{content:"";position:absolute;left:11px;top:14px;width:7px;height:7px;border-radius:50%;
  background:var(--lt-green);box-shadow:0 0 0 3px rgba(30,138,78,.28)}
.station .who{padding-left:15px}
.station .who b{display:block;color:#fff;font-size:13px;line-height:1.3}
.station .who span{color:var(--brass-soft);font-size:9.5px;font-family:var(--font-mono);letter-spacing:.08em}
.station .tn{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(233,228,213,.16);
  display:flex;align-items:center;justify-content:space-between;font-size:11px;color:rgba(233,228,213,.7)}
.station .tn b{color:#fff;font-family:var(--font-mono);font-size:11px}

.nav{margin-top:11px;flex:1;overflow-y:auto;padding-bottom:8px}
.nav .grp{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(233,228,213,.36);padding:12px 20px 5px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9.5px 20px;font-size:13px;
  color:rgba(233,228,213,.76);border-left:3px solid transparent;transition:.15s;position:relative;
}
.nav a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none;stroke-linecap:round;stroke-linejoin:round}
.nav a:hover{color:#fff;background:rgba(233,228,213,.05)}
.nav a.on{color:#fff;background:linear-gradient(90deg,rgba(var(--brass-soft-rgb),.16),transparent);border-left-color:var(--brass-soft)}
.nav a.on svg{color:var(--brass-soft)}
.nav a .badge{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  background:rgba(var(--seal-rgb),.9);color:#fff;border-radius:20px;padding:1px 8px;min-width:20px;text-align:center}
.nav a .badge.z{background:rgba(233,228,213,.14);color:rgba(233,228,213,.7)}
.nav a.on .badge.z{background:rgba(var(--brass-soft-rgb),.28);color:#fff}

.rail-foot{padding:12px 20px;border-top:1px solid rgba(233,228,213,.1);
  font-size:9.5px;line-height:1.8;color:rgba(233,228,213,.42);font-family:var(--font-mono);letter-spacing:.02em}
.rail-foot b{color:var(--brass-soft);font-weight:600;font-family:var(--font-sans)}

/* ---- 主区 ---- */
.main{display:flex;flex-direction:column;min-width:0}

/* 命令栏（深色，区别于客户门户的浅色顶栏）*/
.cmdbar{
  display:flex;align-items:center;gap:15px;
  background:linear-gradient(180deg,#20392c,#1a3125);
  color:#eee7d6;
  padding:0 22px;height:56px;position:sticky;top:0;z-index:30;
  border-bottom:1px solid var(--pine-line);
  box-shadow:0 1px 0 rgba(var(--brass-soft-rgb),.5), 0 8px 20px -14px rgba(0,0,0,.5);
}
.menu-btn{display:none;padding:4px}
.menu-btn svg{width:23px;height:23px;stroke:#eee7d6;fill:none;stroke-width:1.9;stroke-linecap:round}
.cmdbar h1{font-family:var(--font-serif);font-size:17px;font-weight:700;letter-spacing:.03em;white-space:nowrap;color:#fff}
.cmdbar h1 small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(233,228,213,.5);font-weight:400;margin-top:1px}
.omni{
  flex:1;max-width:380px;display:flex;align-items:center;gap:9px;
  background:rgba(0,0,0,.24);border:1px solid rgba(233,228,213,.16);border-radius:9px;
  padding:8px 13px;color:rgba(233,228,213,.7);font-size:12.5px;
}
.omni svg{width:15px;height:15px;stroke:rgba(233,228,213,.6);fill:none;stroke-width:1.9;stroke-linecap:round}
.omni input{flex:1;background:none;border:none;color:#fff;font-size:12.5px;outline:none}
.omni input::placeholder{color:rgba(233,228,213,.5)}
.omni kbd{font-family:var(--font-mono);font-size:10px;background:rgba(233,228,213,.12);
  border-radius:5px;padding:2px 6px;color:rgba(233,228,213,.7)}
.cmd-right{margin-left:auto;display:flex;align-items:center;gap:11px}

.datasrc{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:5px 10px;border-radius:20px;border:1px solid rgba(200,137,42,.6);color:#e8c887;background:rgba(200,137,42,.14);
}
.datasrc.live{color:#9be0b3;background:rgba(30,138,78,.2);border-color:rgba(30,138,78,.6)}
.ds-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.datasrc.live .ds-dot{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(155,224,179,.5)}70%{box-shadow:0 0 0 6px rgba(155,224,179,0)}100%{box-shadow:0 0 0 0 rgba(155,224,179,0)}}

.lang{display:flex;border:1px solid rgba(233,228,213,.2);border-radius:8px;overflow:hidden}
.lang button{padding:5px 11px;font-size:12px;color:rgba(233,228,213,.72);transition:.15s;background:rgba(0,0,0,.14)}
.lang button.on{background:var(--brass);color:#fff}
.op-av{width:31px;height:31px;border-radius:9px;background:linear-gradient(135deg,var(--brass-2),var(--brass));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-family:var(--font-serif);
  box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* 数据来源提示带 */
.ribbon{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 8px;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(-45deg,#efe4cd 0 15px,#eaddbf 15px 30px);
  color:#7a5a12;transition:.3s;
}
.ribbon.live{background:linear-gradient(90deg,#e7f1e9,#dfece3);color:#1c6a3f;border-bottom-color:#cde2d4}
.ribbon-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.ribbon.live .ribbon-dot{animation:pulse 2s infinite}

/* ===== 视图容器 ===== */
.views{padding:22px}
.page{display:none}
.page.on{display:block}
.page.on .reveal{animation:rise .45s cubic-bezier(.2,.8,.25,1) both}
.page.on .reveal:nth-child(1){animation-delay:.02s}
.page.on .reveal:nth-child(2){animation-delay:.07s}
.page.on .reveal:nth-child(3){animation-delay:.12s}
.page.on .reveal:nth-child(4){animation-delay:.17s}
.page.on .reveal:nth-child(5){animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.page-head .ttl{font-family:var(--font-serif);font-size:22px;font-weight:700;letter-spacing:.02em}
.page-head .sub{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.page-head .acts{display:flex;gap:9px;flex-wrap:wrap}

/* ===== 工作量瓦片（Dashboard 队列 KPI）===== */
.worktiles{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-bottom:18px}
.wt{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px 13px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
  cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;
  animation:rise .45s cubic-bezier(.2,.8,.25,1) both;
}
.wt:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.wt::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--line-strong)}
.wt.hot::before{background:linear-gradient(90deg,var(--seal),var(--seal-2))}
.wt.warn::before{background:linear-gradient(90deg,var(--lt-amber),#b0791d)}
.wt.pine::before{background:var(--pine)}
.wt.gold::before{background:linear-gradient(90deg,var(--brass),var(--brass-soft))}
.wt .wt-top{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.wt .wt-top svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wt .wt-l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase}
.wt .wt-v{font-family:var(--font-display);font-size:36px;line-height:1;margin-top:9px;font-weight:400}
.wt.hot .wt-v{color:var(--seal)}
.wt.warn .wt-v{color:#a06d12}
.wt .wt-d{font-size:11px;margin-top:6px;color:var(--ink-3)}
.wt .wt-go{position:absolute;right:12px;bottom:11px;color:var(--ink-3);opacity:0;transition:.16s}
.wt:hover .wt-go{opacity:1;transform:translateX(2px)}
.wt .wt-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== 通用网格 / 卡片 ===== */
.grid{display:grid;gap:15px;margin-bottom:15px}
/* 防 CSS Grid 撑破：grid 子项默认 min-width:auto 会拒绝收缩到内容最小宽度以下，
   在窄视口（手机 390）会让 1fr 轨道被撑宽 → 横向溢出。统一给 grid 子项 min-width:0。 */
.grid>*, .pp-wrap>*, .worktiles>*, .cli-grid>*, .agent-grid>*, .kpis>*{min-width:0}
.grid-2{grid-template-columns:1fr 1fr}
.grid-32{grid-template-columns:1.5fr 1fr}
.grid-23{grid-template-columns:1fr 1.4fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .2s}
.card:hover{box-shadow:var(--shadow-md)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 17px;border-bottom:1px solid var(--line)}
.hd h3{font-family:var(--font-serif);font-size:14px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center}
.hd .sub{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.hd-ic{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:8px;
  stroke:var(--brass);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bd{padding:15px 17px}
.bd.tight{padding:8px 10px}

/* ===== 预警面板（Dashboard 右侧）===== */
.alerts{display:flex;flex-direction:column}
.alert{display:flex;gap:11px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line);transition:background .12s}
.alert:last-child{border-bottom:none}
.alert:hover{background:var(--card-2)}
.alert-ic{width:32px;height:32px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center}
.alert-ic svg{width:17px;height:17px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.alert.sev-high .alert-ic{background:var(--seal-bg)}.alert.sev-high .alert-ic svg{stroke:var(--seal)}
.alert.sev-med .alert-ic{background:var(--warn-bg)}.alert.sev-med .alert-ic svg{stroke:var(--warn-fg)}
.alert.sev-low .alert-ic{background:var(--info-bg)}.alert.sev-low .alert-ic svg{stroke:var(--info-fg)}
.alert-body{min-width:0;flex:1}
.alert-body b{font-size:13px;display:block;line-height:1.35}
.alert-body span{font-size:11.5px;color:var(--ink-2);display:block;margin-top:2px}
.alert-body .who{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-top:3px}
.alert-go{align-self:center;font-size:11.5px;color:var(--brass);white-space:nowrap}
.empty-note{padding:26px 16px;text-align:center;color:var(--ink-3);font-size:12.5px}
.empty-note svg{width:26px;height:26px;stroke:var(--lt-green);fill:none;stroke-width:1.6;margin:0 auto 8px;stroke-linecap:round;stroke-linejoin:round}

/* ===== 表格（运营端·密）===== */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--line-strong);
  background:var(--card-2);white-space:nowrap;position:sticky;top:0}
td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s}
tbody tr:hover td{background:var(--card-2)}
tbody tr.sel td{background:rgba(var(--brass-rgb),.08)}
.mono{font-family:var(--font-mono);font-size:11.5px}
.num{text-align:right;font-family:var(--font-mono);font-size:12px;white-space:nowrap}
.sku-cell{display:flex;align-items:center;gap:10px}
.sku-img{width:32px;height:32px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;
  background:linear-gradient(135deg,#efe8d7,#e2dbc6);border:1px solid var(--line)}
.sku-cell b{font-size:12.5px;white-space:nowrap}
.sku-cell small{color:var(--ink-3);font-size:11px}
.cli-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.cli-tag i{width:7px;height:7px;border-radius:2px;flex:none;background:var(--brass-soft)}

/* ===== 徽章 / 状态 ===== */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.p-ok{background:var(--ok-bg);color:var(--ok-fg)}
.p-warn{background:var(--warn-bg);color:var(--warn-fg)}
.p-info{background:var(--info-bg);color:var(--info-fg)}
.p-mut{background:var(--mut-bg);color:var(--mut-fg)}
.p-seal{background:var(--seal-bg);color:var(--seal)}
.p-pine{background:rgba(var(--pine-rgb),.1);color:var(--pine)}
.plat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.plat i{width:8px;height:8px;border-radius:2px;flex:none}

/* ===== 按钮 ===== */
.btn{border:1px solid var(--line-strong);background:var(--card);border-radius:9px;padding:7px 14px;font-size:12.5px;
  color:var(--ink);transition:.14s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{border-color:var(--pine);background:var(--card-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.sm{padding:5px 11px;font-size:11.5px}
.btn.pri{background:var(--pine);border-color:var(--pine);color:#fff}
.btn.pri:hover{background:#25452f}
.btn.pri svg{stroke:var(--brass-soft)}
.btn.gold{background:linear-gradient(135deg,var(--brass-2),var(--brass));border-color:var(--brass);color:#fff}
.btn.gold:hover{filter:brightness(1.06)}
.btn.gold svg{stroke:#fff}
.btn.danger{background:var(--seal);border-color:var(--seal);color:#fff}
.btn.danger:hover{background:var(--seal-2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--card-2);border-color:var(--line)}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn.block{width:100%;justify-content:center}

.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;background:var(--card)}
.seg button{padding:6px 13px;font-size:12px;color:var(--ink-2);transition:.13s;border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--pine);color:#fff}

/* ============================================================
   拣货打包工作站 Pick & Pack（扫码枪友好）
   ============================================================ */
.pp-wrap{display:grid;grid-template-columns:340px 1fr;gap:15px;align-items:start}

/* 订单队列 */
.queue{max-height:calc(100vh - 190px);overflow-y:auto}
.qitem{
  display:block;width:100%;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);
  transition:.13s;position:relative;border-left:3px solid transparent;
}
.qitem:hover{background:var(--card-2)}
.qitem.on{background:rgba(var(--brass-rgb),.09);border-left-color:var(--brass)}
.qitem .qtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.qitem .qref{font-family:var(--font-mono);font-size:12.5px;font-weight:600}
.qitem .qmeta{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:11px;color:var(--ink-2)}
.qitem .qmeta .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-3)}
.qitem .qcli{font-size:11px;color:var(--ink-3);margin-top:2px}

/* 工作台 */
.station-panel{min-height:420px}
.sp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--card-2),var(--card))}
.sp-head .sp-ref{font-family:var(--font-mono);font-size:16px;font-weight:600}
.sp-head .sp-cli{font-size:12px;color:var(--ink-2);margin-top:2px}
.sp-body{padding:18px}
.sp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:380px;color:var(--ink-3);text-align:center;gap:12px;padding:30px}
.sp-empty svg{width:52px;height:52px;stroke:var(--line-strong);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.sp-empty b{font-size:15px;color:var(--ink-2);font-family:var(--font-serif)}

/* 流水线步骤条 */
.pipe{display:flex;gap:6px;margin-bottom:18px}
.pipe .step{flex:1;text-align:center;padding:8px 4px;border-radius:8px;background:var(--card-3);
  font-size:11px;color:var(--ink-3);position:relative;border:1px solid var(--line)}
.pipe .step b{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.pipe .step.done{background:var(--ok-bg);color:var(--ok-fg);border-color:#bfe0cd}
.pipe .step.now{background:var(--pine);color:#fff;border-color:var(--pine);box-shadow:0 3px 10px -4px rgba(var(--pine-rgb),.5)}
.pipe .step.now b{opacity:.85;color:var(--brass-soft)}

/* 扫码输入 */
.scanbox{border:2px solid var(--pine);border-radius:14px;padding:16px 18px;background:linear-gradient(180deg,#fff,var(--card-2));margin-bottom:16px;transition:.16s}
.scanbox.flash-ok{border-color:var(--scan-ok);animation:flashok .5s ease}
.scanbox.disabled{opacity:.5;border-color:var(--line-strong);border-style:dashed;pointer-events:none}
@keyframes flashok{0%{background:rgba(30,138,78,.16)}100%{background:var(--card-2)}}
.scanbox .sl{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px;margin-bottom:9px}
.scanbox .sl svg{width:16px;height:16px;stroke:var(--pine);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.scan-input{display:flex;gap:10px;align-items:center}
.scan-input input{
  flex:1;font-family:var(--font-mono);font-size:26px;letter-spacing:.04em;
  padding:12px 16px;border:1.5px solid var(--line-strong);border-radius:11px;
  background:#fff;color:var(--ink);outline:none;min-width:0;transition:.14s;
}
.scan-input input:focus{border-color:var(--brass);box-shadow:0 0 0 4px rgba(var(--brass-rgb),.12)}
.scan-input .scan-btn{font-size:16px;padding:14px 22px;border-radius:11px;font-weight:600}
.scan-hint{margin-top:9px;font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.scan-hint kbd{font-family:var(--font-mono);font-size:10px;background:var(--card-3);border:1px solid var(--line);border-radius:5px;padding:1px 6px}

/* 拣货行进度瓦片 */
.picklines{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.pline{
  display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);transition:.16s;position:relative;overflow:hidden;
}
.pline.done{background:var(--ok-bg);border-color:#bfe0cd}
.pline.just{animation:justscan .6s ease}
@keyframes justscan{0%{background:rgba(30,138,78,.28)}100%{}}
.pline .pl-img{width:44px;height:44px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:linear-gradient(135deg,#efe8d7,#e2dbc6);border:1px solid var(--line)}
.pline .pl-info{min-width:0;flex:1}
.pline .pl-info b{font-size:14px;display:block}
.pline .pl-info .bc{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-top:2px}
.pline .pl-count{font-family:var(--font-display);font-size:30px;line-height:1;white-space:nowrap;color:var(--ink-2)}
.pline .pl-count b{color:var(--pine)}
.pline.done .pl-count b{color:var(--ok-fg)}
.pline .pl-check{width:34px;height:34px;flex:none;border-radius:50%;border:2px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;transition:.2s}
.pline.done .pl-check{background:var(--lt-green);border-color:var(--lt-green)}
.pline .pl-check svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:.2s}
.pline.done .pl-check svg{opacity:1}

/* 出面单结果 */
.label-out{border:1px solid #bfe0cd;background:var(--ok-bg);border-radius:12px;padding:16px 18px;margin-top:4px}
.label-out .lo-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.label-out .lo-top svg{width:22px;height:22px;stroke:var(--ok-fg);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.label-out .lo-top b{font-family:var(--font-serif);font-size:15px;color:var(--ok-fg)}
.label-out .lo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.label-out .lo-k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.label-out .lo-v{font-family:var(--font-mono);font-size:14px;color:var(--ink);margin-top:2px}
.label-out .charged{margin-top:12px;padding-top:11px;border-top:1px dashed #bfe0cd;font-size:12px;color:var(--ink-2)}

.sp-actions{display:flex;gap:10px;margin-top:4px}
.sp-actions .btn{flex:1;justify-content:center;padding:14px;font-size:14.5px;font-weight:600;border-radius:11px}

/* ===== 红屏报警（扫错货，全视口）===== */
.redscreen{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%, #d64832, #a5301f);color:#fff;text-align:center;padding:20px}
.redscreen.on{display:flex;animation:redpulse .5s ease infinite alternate}
@keyframes redpulse{from{background:radial-gradient(circle at 50% 40%,#d64832,#a5301f)}to{background:radial-gradient(circle at 50% 40%,#e4573f,#b5432e)}}
.redscreen .rx{width:120px;height:120px;border-radius:50%;border:6px solid #fff;display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.redscreen .rx svg{width:66px;height:66px;stroke:#fff;fill:none;stroke-width:7;stroke-linecap:round}
.redscreen h2{font-family:var(--font-serif);font-size:46px;font-weight:700;letter-spacing:.04em}
.redscreen .rmsg{font-size:18px;margin-top:12px;opacity:.95;max-width:560px}
.redscreen .rbc{font-family:var(--font-mono);font-size:22px;margin-top:20px;background:rgba(0,0,0,.28);
  border-radius:12px;padding:12px 26px;letter-spacing:.06em;display:inline-block}
.redscreen .rhint{margin-top:26px;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}

/* ============================================================
   入库收货 Inbound（ASN）
   ============================================================ */
.asn-flow{display:flex;gap:6px;flex-wrap:wrap}
.asn-flow .n{font-family:var(--font-mono);font-size:10px;padding:3px 9px;border-radius:6px;background:var(--card-3);color:var(--ink-3);border:1px solid var(--line)}
.asn-flow .n.done{background:var(--ok-bg);color:var(--ok-fg);border-color:#bfe0cd}
.asn-flow .n.now{background:var(--pine);color:#fff;border-color:var(--pine)}
.disc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.disc-row:last-child{border-bottom:none}
.disc-diff.neg{color:var(--seal);font-weight:700}
.disc-diff.pos{color:var(--info-fg);font-weight:700}
.disc-diff.zero{color:var(--ink-3)}

/* ============================================================
   客户管理 Clients（桌面优先）
   ============================================================ */
.cli-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px}
.cli-card{padding:0;overflow:hidden}
.cli-card .cc-head{display:flex;align-items:center;gap:12px;padding:15px 17px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--card-2),var(--card))}
.cli-card .cc-mark{width:42px;height:42px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:700;font-size:17px;color:#fff;
  background:linear-gradient(135deg,var(--pine-grad-a),var(--pine))}
.cli-card .cc-t{min-width:0;flex:1}
.cli-card .cc-t b{font-family:var(--font-serif);font-size:15px;display:block;line-height:1.25}
.cli-card .cc-t span{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
.cli-card .cc-body{padding:14px 17px;display:flex;flex-direction:column;gap:11px}
.cc-lights{display:flex;gap:14px}
.cc-lt{display:flex;flex-direction:column;gap:4px;flex:1}
.cc-lt .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cc-lt .v{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);font-weight:600}
.light{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.light.green{background:var(--lt-green);box-shadow:0 0 0 3px var(--lt-green-glow)}
.light.amber{background:var(--lt-amber);box-shadow:0 0 0 3px var(--lt-amber-glow)}
.light.red{background:var(--lt-red);box-shadow:0 0 0 3px var(--lt-red-glow)}
.cc-bal{display:flex;align-items:baseline;justify-content:space-between;padding-top:11px;border-top:1px dashed var(--line)}
.cc-bal .k{font-size:11.5px;color:var(--ink-2)}
.cc-bal .v{font-family:var(--font-display);font-size:23px}
.cc-bal .v.low{color:var(--seal)}
.cc-shippable{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;padding:7px 11px;border-radius:8px}
.cc-shippable.yes{background:var(--ok-bg);color:var(--ok-fg)}
.cc-shippable.no{background:var(--seal-bg);color:var(--seal)}
.cc-shippable svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cc-foot{display:flex;gap:8px;padding:12px 17px;border-top:1px solid var(--line);background:var(--card-2)}
.cc-foot .btn{flex:1;justify-content:center}

/* ===== 抽屉（客户详情/费率/合规 编辑）===== */
.drawer-scrim{position:fixed;inset:0;z-index:200;display:none;background:rgba(20,30,22,.44);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.drawer-scrim.on{display:block;animation:fade .2s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:201;width:min(520px,100vw);background:var(--card);
  box-shadow:var(--shadow-lg);display:none;flex-direction:column;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.3,.8,.3,1)}
.drawer.on{display:flex;transform:none}
.drawer-head{display:flex;align-items:center;gap:13px;padding:17px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--card-2),var(--card))}
.drawer-head .dh-mark{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:700;font-size:18px;color:#fff;background:linear-gradient(135deg,var(--pine-grad-a),var(--pine))}
.drawer-head .dh-t{flex:1;min-width:0}
.drawer-head .dh-t b{font-family:var(--font-serif);font-size:17px;display:block}
.drawer-head .dh-t span{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.drawer-head .dh-x{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center}
.drawer-head .dh-x svg{width:17px;height:17px;stroke:var(--ink-2);fill:none;stroke-width:2;stroke-linecap:round}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:18px}
.dsection{}
.dsection .dst{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);
  margin-bottom:11px;display:flex;align-items:center;gap:8px}
.dsection .dst svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 表单字段 */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field>label{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.field input[type=text],.field input[type=number],.field select{
  border:1px solid var(--line-strong);background:var(--canvas);border-radius:9px;padding:9px 12px;
  font-family:var(--font-sans);font-size:13.5px;color:var(--ink);transition:.14s;width:100%}
.field input:focus,.field select:focus{outline:none;border-color:var(--brass);background:var(--card)}
.field .mono-in{font-family:var(--font-mono)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* 合规三态选择 */
.lucid-seg{display:flex;gap:8px}
.lucid-opt{flex:1;text-align:center;padding:10px 6px;border-radius:9px;border:1.5px solid var(--line);
  background:var(--card);font-size:12px;transition:.14s;display:flex;flex-direction:column;align-items:center;gap:5px}
.lucid-opt .light{width:11px;height:11px}
.lucid-opt.on.valid{border-color:var(--lt-green);background:var(--ok-bg)}
.lucid-opt.on.unverified{border-color:var(--lt-amber);background:var(--warn-bg)}
.lucid-opt.on.expired{border-color:var(--lt-red);background:var(--seal-bg)}

/* 费率卡编辑表 */
.rate-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.rate-tbl th{padding:8px 10px;font-size:9px}
.rate-tbl td{padding:7px 10px}
.rate-tbl input{width:92px;font-family:var(--font-mono);font-size:12px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:7px;background:var(--canvas);text-align:right}
.rate-tbl input:focus{outline:none;border-color:var(--brass);background:#fff}
.rate-tbl .base{color:var(--ink-3);font-family:var(--font-mono);font-size:11px}
.rate-ovr{color:var(--brass);font-weight:600}
.drawer-foot{padding:14px 20px;border-top:1px solid var(--line);background:var(--card-2);display:flex;gap:10px}
.drawer-foot .btn{flex:1;justify-content:center;padding:11px}

/* ===== Agents ===== */
.credit-bar{display:flex;align-items:center;gap:14px;padding:14px 17px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:15px}
.credit-meter{flex:1;height:10px;border-radius:6px;background:var(--card-3);overflow:hidden;border:1px solid var(--line)}
.credit-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-soft));border-radius:6px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.credit-num{font-family:var(--font-display);font-size:22px;white-space:nowrap}
.credit-num small{font-size:12px;color:var(--ink-3);font-family:var(--font-sans)}
.agent-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.agent-card{padding:0;overflow:hidden}
.agent-card .ac-head{display:flex;align-items:center;gap:12px;padding:15px 17px;border-bottom:1px solid var(--line)}
.agent-card .ac-ic{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#efe8d7,#e4ddc9);border:1px solid var(--line)}
.agent-card .ac-ic svg{width:20px;height:20px;stroke:var(--pine);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.agent-card .ac-t b{font-family:var(--font-serif);font-size:15px;display:block}
.agent-card .ac-t span{font-size:10.5px;font-family:var(--font-mono);color:var(--ink-3)}
.agent-card .ac-body{padding:14px 17px}
.agent-card .ac-desc{font-size:12px;color:var(--ink-2);line-height:1.5;margin-bottom:13px;min-height:36px}
.agent-out{margin-top:13px;border-top:1px dashed var(--line);padding-top:12px}
.agent-out .ao-count{font-family:var(--font-display);font-size:28px;line-height:1}
.agent-out .ao-list{margin-top:10px;display:flex;flex-direction:column;gap:7px;max-height:230px;overflow-y:auto}
.ao-item{display:flex;align-items:center;gap:9px;font-size:12px;padding:8px 10px;border-radius:8px;background:var(--card-2);border:1px solid var(--line)}
.ao-item .sev{width:6px;height:6px;border-radius:50%;flex:none}
.ao-item .sev.high{background:var(--seal)}.ao-item .sev.medium{background:var(--lt-amber)}.ao-item .sev.low{background:var(--info-fg)}
.ao-item b{font-family:var(--font-mono)}
.ao-item .r{margin-left:auto;color:var(--ink-3);font-size:11px;white-space:nowrap}

/* ===== 空/骨架/toast ===== */
.skel{background:linear-gradient(90deg,var(--canvas-2) 25%,#f4efe4 50%,var(--canvas-2) 75%);
  background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:6px;color:transparent!important}
@keyframes shimmer{to{background-position:-200% 0}}
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);opacity:0;
  background:var(--ink);color:#fff;font-size:12.5px;padding:11px 20px;border-radius:10px;
  transition:.25s;pointer-events:none;z-index:9998;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.err{background:var(--seal)}
#toast.ok{background:var(--pine)}

/* 段落说明 */
.note{display:flex;gap:10px;align-items:flex-start;border-radius:11px;padding:11px 14px;font-size:12px;border:1px solid;line-height:1.5}
.note svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.note.info{background:var(--info-bg);border-color:#d0dcee;color:var(--info-fg)}
.note.warn{background:var(--warn-bg);border-color:#ecd9a8;color:var(--warn-fg)}
.note.sample{background:var(--seal-bg);border-color:#e6c4bb;color:var(--seal)}
.tag-sample{color:var(--seal);border:1px dashed var(--seal);padding:2px 8px;border-radius:20px;background:var(--seal-bg);font-size:10px;font-family:var(--font-mono);letter-spacing:.06em}

/* ============================================================
   银行对账 Reconciliation
   ============================================================ */
.wt.ok::before{background:linear-gradient(90deg,var(--lt-green),#2aa261)}
.wt.ok .wt-v{color:var(--lt-green)}
.wt.ghost::before{background:linear-gradient(90deg,#69705f,#9aa08e)}
.wt.ghost .wt-v{color:var(--mut-fg)}
.rc-tiles{grid-template-columns:repeat(4,1fr)}
.rc-tile{cursor:pointer}
.rc-tile.sel{border-color:var(--brass);box-shadow:0 0 0 3px rgba(var(--brass-rgb),.14), var(--shadow-sm)}
.rc-emoji{font-size:15px;line-height:1}
.csvbox{
  width:100%;font-family:var(--font-mono);font-size:11.5px;line-height:1.6;
  border:1px solid var(--line-strong);background:var(--canvas);border-radius:10px;
  padding:11px 13px;color:var(--ink);resize:vertical;min-height:120px;transition:.14s;
}
.csvbox:focus{outline:none;border-color:var(--brass);background:#fff}
.csvbox::placeholder{color:var(--ink-3);opacity:.7}
.rc-list{padding:8px 0;max-height:calc(100vh - 340px);overflow-y:auto}
.rc-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--line);position:relative;
}
.rc-row:last-of-type{border-bottom:none}
.rc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lt-green)}
.rc-row.warn::before{background:var(--lt-amber)}
.rc-row.bad::before{background:var(--lt-red)}
.rc-row.ghost::before{background:#9aa08e}
.rc-main{display:flex;align-items:center;gap:8px;min-width:0;flex:1;flex-wrap:wrap}
.rc-main b.mono{font-size:12px}
.rc-arrow{color:var(--ink-3);font-size:12px}
.rc-detail{font-size:11.5px;color:var(--ink-2)}
.rc-cli{font-size:11px;color:var(--ink-3);white-space:nowrap}
.rc-amt{font-family:var(--font-mono);font-size:13px;white-space:nowrap}
.rc-amt.neg{color:var(--seal)}

/* ============================================================
   电子发票 E-Invoice
   ============================================================ */
.hash{color:var(--ink-3);font-size:11px;cursor:help}
.field input[type=month]{
  border:1px solid var(--line-strong);background:var(--canvas);border-radius:9px;padding:9px 12px;
  font-size:13px;color:var(--ink);transition:.14s;width:100%}
.field input[type=month]:focus{outline:none;border-color:var(--brass);background:var(--card)}

/* ============================================================
   平台连接 Platforms
   ============================================================ */
.pf-list{padding:6px 0}
.pf-row{display:flex;align-items:center;gap:13px;padding:13px 17px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pf-row:last-of-type{border-bottom:none}
.pf-mark{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:14px;font-family:var(--font-serif)}
.pf-info{flex:1;min-width:180px}
.pf-info b{font-size:13.5px;display:block;font-family:var(--font-serif)}
.pf-info span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:1px}
.pf-key{font-size:10.5px!important;color:var(--ink-3)!important;letter-spacing:.03em}
.pf-result{padding:0 17px 13px}

/* ============================================================
   系统健康卡（Outbox）
   ============================================================ */
.health-bad{border-color:#e6c4bb;box-shadow:0 0 0 3px rgba(var(--seal-rgb),.07), var(--shadow-sm)}
.ob-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.ob{background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center}
.ob b{display:block;font-family:var(--font-display);font-size:24px;line-height:1.1}
.ob span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:3px}
.ob.ok b{color:var(--lt-green)}
.ob.warn b{color:var(--warn-fg)}
.ob.bad{background:var(--seal-bg);border-color:#e6c4bb}
.ob.bad b{color:var(--seal)}
.ob.bad span{color:var(--seal)}
.ob-fails{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.ob-fail{display:flex;align-items:center;gap:9px;font-size:11.5px;padding:8px 11px;border-radius:8px;
  background:var(--seal-bg);border:1px solid #e6c4bb;min-width:0}
.ob-fail .mono{color:var(--seal);font-size:10.5px}
.ob-fail b{font-family:var(--font-mono);font-size:11px;white-space:nowrap}
.ob-fail .err{color:var(--ink-2);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:right}

/* 底部标签栏（手机）*/
.botnav{display:none}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1240px){
  .worktiles{grid-template-columns:repeat(3,1fr)}
  .grid-32,.grid-23{grid-template-columns:1fr}
}
@media (max-width:1040px){
  :root{--rail-w:66px}
  .rail-brand{justify-content:center;padding:16px 0 12px}
  .rail-brand .bt,.station .who span,.station .tn,.nav .grp,.nav a span,.rail-foot{display:none}
  .station{margin:10px 8px;padding:9px 6px}
  .station .who{padding-left:0;text-align:center}
  .station::before{left:50%;transform:translateX(-50%);top:8px}
  .station .who b{font-size:0}
  .nav a{justify-content:center;padding:13px 0;border-left-width:0;border-left:3px solid transparent}
  .nav a.on{border-left-width:3px}
  .nav a .badge{position:absolute;top:6px;right:10px;margin:0;font-size:9px;padding:0 5px;min-width:16px}
  .pp-wrap{grid-template-columns:300px 1fr}
  .agent-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .worktiles{grid-template-columns:repeat(2,1fr)}
  .rc-tiles{grid-template-columns:repeat(2,1fr)}
  .pp-wrap{grid-template-columns:1fr}
  .queue{max-height:340px}
  .cli-grid{grid-template-columns:1fr 1fr}
  .field-row3{grid-template-columns:1fr}
  .rc-list{max-height:none}
}
@media (max-width:720px){
  :root{--rail-w:0px}
  .shell{display:block}
  .views{padding:14px;padding-bottom:78px}
  .rail{position:fixed;top:0;left:0;bottom:0;width:248px;z-index:60;transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.3,.8,.3,1)}
  .rail.open{transform:none;--rail-w:248px}
  .rail.open .rail-brand{justify-content:flex-start;padding:18px 18px 14px}
  .rail.open .rail-brand .bt,.rail.open .station .who span,.rail.open .station .tn,
  .rail.open .nav .grp,.rail.open .nav a span,.rail.open .rail-foot{display:revert}
  .rail.open .station{margin:13px 14px 4px;padding:11px 13px}
  .rail.open .station .who{padding-left:15px;text-align:left}
  .rail.open .station::before{left:11px;transform:none;top:14px}
  .rail.open .station .who b{font-size:13px}
  .rail.open .nav a{justify-content:flex-start;padding:11px 20px}
  .rail.open .nav a .badge{position:static}
  .menu-btn{display:block}
  .omni{display:none}
  .cmdbar{padding:0 14px;gap:10px}
  .cmdbar h1{font-size:15px}
  .cmdbar h1 small{display:none}
  .worktiles{grid-template-columns:1fr 1fr;gap:10px}
  .wt .wt-v{font-size:30px}
  .grid-2{grid-template-columns:1fr}
  .cli-grid{grid-template-columns:1fr}
  .drawer{width:100vw}
  .scan-input input{font-size:22px;padding:11px 13px}
  .scan-input .scan-btn{padding:12px 16px;font-size:14px}
  .redscreen h2{font-size:34px}
  .redscreen .rx{width:92px;height:92px}
  .redscreen .rx svg{width:50px;height:50px}
  .scrim{display:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(20,30,22,.42);z-index:55}
  /* 底部标签栏 */
  .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);
    border-top:1px solid var(--line);padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -3px 12px rgba(20,30,22,.07)}
  .botnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;justify-content:center;
    padding:5px 2px;color:var(--ink-3);font-size:10.5px;min-height:52px;position:relative}
  .botnav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .botnav a.on{color:var(--brass)}
  .botnav a .bdg{position:absolute;top:2px;right:calc(50% - 20px);background:var(--seal);color:#fff;
    font-family:var(--font-mono);font-size:8.5px;border-radius:10px;padding:0 4px;min-width:14px;text-align:center}
  /* 表格 → 堆叠卡片 */
  .table-wrap table,.table-wrap thead,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block}
  .table-wrap thead{display:none}
  .table-wrap tr{background:var(--card);border:1px solid var(--line);border-radius:11px;margin-bottom:9px;padding:3px}
  .table-wrap td{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right;
    padding:9px 13px;border:none;border-top:1px solid var(--line);min-height:42px;font-size:13px}
  .table-wrap tr td:first-child{border-top:none}
  .table-wrap td::before{content:attr(data-label);color:var(--ink-3);font-size:11.5px;font-weight:600;text-align:left;white-space:nowrap}
  .table-wrap td.td-head{justify-content:flex-start;font-weight:700}
  .table-wrap td.td-head::before{content:none}
  .btn,.seg button,.lang button{min-height:40px}
}
@media (max-width:420px){
  .worktiles{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.01ms!important}
  .redscreen.on{animation:none}
}

/* ============================================================
   模块 5/8 升级：Dashboard 价值卡 / KPI / 自绘图表 · 耗材 · 设备 · 订单备注
   ============================================================ */

/* ---- 三张价值卡 ---- */
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:14px}
.vcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px 16px;box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden;transition:box-shadow .2s,transform .16s,border-color .2s}
.vcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.vcard::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px}
.vcard.v-sku::before{background:linear-gradient(180deg,#2f4d3c,var(--pine))}
.vcard.v-cons::before{background:linear-gradient(180deg,var(--brass-2),var(--brass))}
.vcard.v-asset::before{background:linear-gradient(180deg,#4a6ea8,#39598f)}
.vc-top{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.vc-ic{font-size:16px;line-height:1}
.vc-l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase}
.vc-pct{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-2);
  background:var(--card-3);padding:1px 7px;border-radius:20px;border:1px solid var(--line)}
.vc-v{font-family:var(--font-display);font-size:29px;line-height:1.05;margin-top:10px;font-weight:400;color:var(--ink)}
.vcard.v-sku .vc-v{color:var(--pine)}
.vcard.v-cons .vc-v{color:var(--brass)}
.vcard.v-asset .vc-v{color:#39598f}
.vc-sub{font-size:11px;color:var(--ink-3);margin-top:5px}
.vc-bar{height:5px;border-radius:4px;background:var(--card-3);overflow:hidden;margin-top:11px;border:1px solid var(--line)}
.vc-bar i{display:block;height:100%;border-radius:4px}
.vcard .wt-go{position:absolute;right:12px;bottom:12px;color:var(--ink-3);opacity:0;transition:.16s}
.vcard:hover .wt-go{opacity:1;transform:translateX(2px)}
.vcard .wt-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- KPI 行 ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 15px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:2px}
.kpi b{font-family:var(--font-display);font-size:24px;line-height:1;font-weight:400;color:var(--ink)}
.kpi span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kpi.amber b{color:#a06d12}
.kpi.red b{color:var(--seal)}
.kpi.amber{border-color:#e6d3a4;background:linear-gradient(180deg,#fbf4e2,var(--card))}
.kpi.red{border-color:#e6c4bb;background:linear-gradient(180deg,#faece8,var(--card))}

/* ---- 图表 3 联 ---- */
.grid-charts{grid-template-columns:repeat(3,1fr)}
.grid-charts .bd{padding:15px 17px}
.donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.chart-donut{width:150px;height:150px;flex:none}
.chart-donut .dn-top{font-family:var(--font-display);font-size:19px;fill:var(--ink)}
.chart-donut .dn-bot{font-family:var(--font-mono);font-size:8.5px;fill:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}
.legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:11px}
.lg-row{display:flex;align-items:flex-start;gap:9px;font-size:12px}
.lg-dot{width:10px;height:10px;border-radius:3px;flex:none;margin-top:4px}
.lg-txt{flex:1;min-width:0}
.lg-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lg-name{color:var(--ink-2);white-space:nowrap}
.lg-pct{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
.lg-val{font-family:var(--font-mono);font-size:12.5px;color:var(--ink);display:block;margin-top:1px}

/* 水平条形图 */
.hbars{display:flex;flex-direction:column;gap:11px}
.hb{display:flex;align-items:center;gap:11px}
.hb-l{width:118px;flex:none;font-family:var(--font-mono);font-size:11px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.hb-l span{display:block;font-family:var(--font-sans);font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-track{flex:1;height:16px;border-radius:5px;background:var(--card-3);overflow:hidden;border:1px solid var(--line)}
.hb-track i{display:block;height:100%;border-radius:5px;min-width:3px;transition:width .5s cubic-bezier(.2,.8,.25,1)}
.hb-v{font-family:var(--font-mono);font-size:12px;width:52px;text-align:right;flex:none;color:var(--ink)}

/* 纵向柱状（7 日趋势） */
.cols{display:flex;align-items:flex-end;gap:9px;height:150px;padding-top:10px}
.col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.col-bar-wrap{width:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.col-bar{width:66%;max-width:34px;background:var(--pine);border-radius:5px 5px 0 0;transition:height .5s cubic-bezier(.2,.8,.25,1)}
.col-bar.hi{background:linear-gradient(180deg,var(--brass-2),var(--brass))}
.col-val{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2);margin-bottom:4px}
.col-x{font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.cols-foot{display:flex;justify-content:space-between;margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:11px;color:var(--ink-3)}
.cols-foot b{font-family:var(--font-mono);color:var(--ink);font-size:12px}

/* ---- 订单备注（拣货台高亮横幅）---- */
.order-note{display:flex;gap:10px;align-items:flex-start;margin:0 17px 0;padding:11px 14px;
  background:linear-gradient(180deg,#fbf1d8,#f7ecd2);border:1px solid #ecd9a8;border-left:4px solid var(--lt-amber);
  border-radius:10px;font-size:12.5px;color:#6f4e0c;line-height:1.5}
.order-note .on-ic{width:18px;height:18px;flex:none;fill:none;stroke:#a06d12;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.order-note .on-k{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#a06d12;margin-bottom:2px}
.q-note{color:#a06d12;font-size:10.5px;font-weight:600}

/* ---- 表格：低库存 / 到期维护行底纹 ---- */
tr.row-low td{background:rgba(181,67,46,.045)}
tr.row-low .td-head b{color:var(--seal)}
.due-flag{color:var(--seal);font-weight:600}

/* ---- BOM 清单 ---- */
.bom-list{display:flex;flex-direction:column;gap:9px;max-height:340px;overflow:auto}
.bom-row{display:flex;align-items:center;gap:12px;padding:9px 11px;background:var(--card-2);border:1px solid var(--line);border-radius:10px}
.bom-sku{flex:none;width:130px;min-width:0}
.bom-sku b{font-family:var(--font-mono);font-size:11.5px;display:block;color:var(--ink)}
.bom-sku span{font-size:10.5px;color:var(--ink-3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bom-chips{display:flex;flex-wrap:wrap;gap:6px}
.bom-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 9px;border-radius:20px;
  background:rgba(var(--brass-rgb),.1);color:var(--brass);border:1px solid rgba(var(--brass-rgb),.22)}
.bom-chip i{font-family:var(--font-mono);font-size:10px;font-style:normal;color:var(--ink-2)}

/* ---- 耗材流水台账 ---- */
.mv-list{display:flex;flex-direction:column}
.mv-row{display:grid;grid-template-columns:1fr auto 1.4fr auto;gap:10px;align-items:center;
  padding:9px 2px;border-bottom:1px solid var(--line);font-size:12px}
.mv-row:last-child{border-bottom:none}
.mv-name{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-delta{font-family:var(--font-mono);font-size:12.5px;text-align:right}
.mv-delta.pos{color:var(--lt-green)}
.mv-delta.neg{color:var(--seal)}
.mv-reason{color:var(--ink-3);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-op{font-size:10.5px;color:var(--ink-3);white-space:nowrap}

/* ---- 响应式（新组件）---- */
@media (max-width:1100px){
  .grid-charts{grid-template-columns:1fr 1fr}
  .grid-charts>*:last-child{grid-column:1 / -1}
}
@media (max-width:900px){
  .vcards{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .grid-charts{grid-template-columns:1fr}
  .grid-charts>*:last-child{grid-column:auto}
  .mv-row{grid-template-columns:1fr auto}
  .mv-reason,.mv-op{display:none}
}
@media (max-width:720px){
  .vcards{grid-template-columns:1fr;gap:10px}
  .kpis{grid-template-columns:1fr 1fr;gap:9px}
  .order-note{margin:0}
  .bom-row{flex-direction:column;align-items:flex-start;gap:7px}
  .bom-sku{width:auto}
}