/* =============================================================
   卡密系统公共样式层（C 版设计系统）
   1) :root 放设计令牌；深色只改令牌（html[data-theme="dark"]），
      不再逐组件写 dark 覆盖规则（改造前是 4 个 dark 块 ≈150 行重复）。
   2) 两端共用组件收在这里；页面专属规则留在各自 <style>。
   3) 主题解析由 common.js 的 applyTheme() 负责：
      agent_theme = auto|dark|light，auto 时按 matchMedia 落到实际值。
   ============================================================= */

:root {
  /* 面 */
  --bg:#f2f3f7; --card:#fff; --card-2:#f5f6fa; --chip:#f4f6fb;
  /* 字：--text 正文 / --title 标题与卡名 / --ink-2 次级数字与导航 / --chip-ink 操作块 / --muted 提示 / --muted-2 统计灰 / --faint 最弱 */
  --text:#222; --title:#333; --text-2:#555a68; --ink-2:#666; --chip-ink:#444;
  --muted:#999; --muted-2:#8a8f9c; --faint:#bbb;
  /* 线 */
  --line:#f0f1f5; --line-2:#e5e6eb; --line-3:#e0e0e0; --dash:#e6e8f0;
  /* 输入 */
  --field-bg:#fff; --field-bd:#ddd; --field-ink:#000;
  /* 品牌：--brand 是描边/文字用色（深色下变亮），--brand-solid 是填充底色（两端同色） */
  --brand:#4a6cf7; --brand-solid:#4a6cf7; --brand-soft:#eef1fd; --brand-line:#c9d3f5;
  --chip-on-bg:#2b3a67;
  --hd:linear-gradient(135deg,#4a5f9e,#3d4d85);
  --key-bg:#f5f7ff; --key-bd:#4a6cf7;
  /* 语义色 */
  --ok:#2ba471; --warn:#d54941; --warn-soft:#fde8e6; --warn-line:#f7c6c0; --orange:#e37318;
  --dis-bg:#c9d3f5; --dis-ink:#8a8f9c;
  /* 其他 */
  --shadow:0 1px 4px rgba(0,0,0,.05); --shadow-l:0 1px 3px rgba(0,0,0,.12);
  --mask:rgba(0,0,0,.45); --toast:rgba(0,0,0,.75);
  --r-s:8px; --r-m:12px; --r-l:16px; --r-pill:22px;
  --nav-h:54px; --safe-b:env(safe-area-inset-bottom, 0px);
}

html[data-theme="dark"] {
  --bg:#15161a; --card:#1e2026; --card-2:#15161a; --chip:#252838;
  --text:#d7d9e0; --title:#e8e9ee; --text-2:#c7cad4; --ink-2:#9aa0b0; --chip-ink:#b9bfd0;
  --muted:#7a8092; --muted-2:#7a8092; --faint:#6e7383;
  --line:#2a2c34; --line-2:#33364a; --line-3:#33364a; --dash:#2a2c34;
  --field-bg:#15161a; --field-bd:#33364a; --field-ink:#d7d9e0;
  --brand:#7d95ff; --brand-soft:#252838; --brand-line:#2e3654;
  --chip-on-bg:#4a6cf7;
  --hd:linear-gradient(135deg,#2b3a67,#232637);
  --key-bg:#232637; --key-bd:#7d95ff;
  --ok:#4bd08a; --warn:#e0655d; --warn-soft:rgba(213,73,65,.18); --warn-line:rgba(213,73,65,.4); --orange:#e59a52;
  --dis-bg:#2e3654; --dis-ink:#6a7086;
  --shadow:none; --shadow-l:none;
  --mask:rgba(0,0,0,.6); --toast:rgba(20,22,28,.92);
}

/* ---------- 色系预设（只改本机 localStorage:agent_accent；blue 即上面的默认值） ---------- */
html[data-accent="navy"] {
  --brand:#3d5aa8; --brand-solid:#3d5aa8; --brand-soft:#edf0f8; --brand-line:#c3cde6;
  --hd:linear-gradient(135deg,#33477e,#2b3a67); --key-bg:#f2f4fa; --key-bd:#3d5aa8;
  --chip-on-bg:#1f2b4d; --dis-bg:#c3cde6;
}
html[data-theme="dark"][data-accent="navy"] {
  --brand:#8fa5e8; --brand-soft:#262c42; --brand-line:#333c5c;
  --hd:linear-gradient(135deg,#2b3a67,#232637); --key-bg:#23283a; --key-bd:#8fa5e8;
  --chip-on-bg:#3d5aa8; --dis-bg:#333c5c;
}
html[data-accent="green"] {
  --brand:#178f6d; --brand-solid:#178f6d; --brand-soft:#e8f6f1; --brand-line:#b6e0d1;
  --hd:linear-gradient(135deg,#1f6d57,#17564a); --key-bg:#f1faf6; --key-bd:#178f6d;
  --chip-on-bg:#14503f; --dis-bg:#b6e0d1;
}
html[data-theme="dark"][data-accent="green"] {
  --brand:#4bd0a1; --brand-soft:#1f3230; --brand-line:#2b4a45;
  --hd:linear-gradient(135deg,#1d5b4b,#173f36); --key-bg:#1e2b2a; --key-bd:#4bd0a1;
  --chip-on-bg:#178f6d; --dis-bg:#2b4a45;
}
html[data-accent="purple"] {
  --brand:#7b5cf0; --brand-solid:#7b5cf0; --brand-soft:#f1edfe; --brand-line:#d6ccfa;
  --hd:linear-gradient(135deg,#5b45b8,#4a3fa0); --key-bg:#f6f4ff; --key-bd:#7b5cf0;
  --chip-on-bg:#3f2f7a; --dis-bg:#d6ccfa;
}
html[data-theme="dark"][data-accent="purple"] {
  --brand:#a794ff; --brand-soft:#2a2544; --brand-line:#3a3260;
  --hd:linear-gradient(135deg,#3b3168,#2a2544); --key-bg:#262240; --key-bd:#a794ff;
  --chip-on-bg:#7b5cf0; --dis-bg:#3a3260;
}
html[data-accent="orange"] {
  --brand:#d9700f; --brand-solid:#d9700f; --brand-soft:#fdf1e4; --brand-line:#f7d7b3;
  --hd:linear-gradient(135deg,#a85a14,#8a4712); --key-bg:#fdf6ee; --key-bd:#d9700f;
  --chip-on-bg:#7a4008; --dis-bg:#f7d7b3;
}
html[data-theme="dark"][data-accent="orange"] {
  --brand:#f0a04b; --brand-soft:#33291c; --brand-line:#4a3a24;
  --hd:linear-gradient(135deg,#5a3d17,#3d2a12); --key-bg:#2e2519; --key-bd:#f0a04b;
  --chip-on-bg:#b8681a; --dis-bg:#4a3a24;
}
/* 色块选择器：颜色写死，让用户在切换前就看到效果 */
.acc-row { display:flex; gap:8px; margin-top:10px; }
.acc-row button { flex:1; border:2px solid var(--line-2); border-radius:10px; padding:9px 0 8px; font-size:11px; font-weight:700; color:#fff; }
.acc-row button.on { border-color:var(--text); }
.acc-row .blue { background:#4a6cf7; }
.acc-row .navy { background:#3d5aa8; }
.acc-row .green { background:#178f6d; }
.acc-row .purple { background:#7b5cf0; }
.acc-row .orange { background:#d9700f; }

/* ---------- 基础 ---------- */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
body.has-nav { padding-bottom:calc(var(--nav-h) + var(--safe-b) + 8px); }
a { color:var(--brand); }
.wrap { padding:12px; }

/* ---------- 顶栏 ---------- */
header { position:relative; background:var(--hd); color:#fff; padding:18px 16px 14px; }
header h1 { font-size:19px; font-weight:600; }
header .sub { font-size:12px; opacity:.85; margin-top:3px; }
header .center { text-align:center; }
header .points-bar { display:inline-block; margin-top:10px; background:rgba(255,255,255,.2); border-radius:var(--r-pill); padding:5px 16px; font-size:13px; }
header .points-bar b { font-size:17px; }
header .logout { position:absolute; top:16px; left:16px; background:rgba(255,255,255,.2); color:#fff; border:none; border-radius:var(--r-s); padding:6px 12px; font-size:12px; }
#syncBadge { font-size:11px; font-weight:400; background:rgba(255,255,255,.22); padding:3px 9px; border-radius:10px; vertical-align:3px; margin-left:6px; white-space:nowrap; }
.statbar { display:flex; gap:8px; margin-top:10px; }
.stat { flex:1; background:rgba(255,255,255,.15); border-radius:9px; padding:7px 10px; }
.stat b { font-size:17px; display:block; }
.stat span { font-size:10px; opacity:.85; }

/* ---------- 同步条 / 工具条 ---------- */
.syncbar { display:flex; align-items:center; gap:8px; background:var(--card); border-bottom:1px solid var(--line); padding:7px 12px; font-size:12px; color:var(--muted); }
.syncbar .dot { width:7px; height:7px; border-radius:50%; background:var(--faint); flex:0 0 auto; }
.syncbar .dot.ok { background:var(--ok); }
.syncbar .dot.bad { background:var(--warn); }
.syncbar .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.syncbar .act-btn { border:1px solid var(--line-2); background:var(--card-2); color:var(--brand); border-radius:var(--r-pill); padding:5px 12px; font-size:12px; font-weight:700; white-space:nowrap; }

/* ---------- C 版设计系统：扁平顶栏（替代大块渐变头） ---------- */
.topbar { display:flex; align-items:center; gap:10px; background:var(--card); border-bottom:1px solid var(--line-2); padding:13px 14px; }
.topbar .who { flex:1; min-width:0; font-size:16px; font-weight:800; color:var(--title); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar .bal { flex:0 0 auto; font-size:15px; font-weight:800; color:var(--brand); white-space:nowrap; }
.topbar .bal small { font-size:11px; font-weight:600; color:var(--muted); margin-left:2px; }

/* ---------- C 版设计系统：厂家 chips 横滑 ---------- */
.chips { display:flex; gap:7px; overflow-x:auto; margin:2px 0 10px; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chips button { flex:0 0 auto; border:1px solid var(--line-2); background:var(--card); color:var(--text-2); border-radius:var(--r-pill); padding:7px 13px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.chips button.on { background:var(--chip-on-bg); border-color:var(--chip-on-bg); color:#fff; }

/* ---------- C 版设计系统：规格单列行（替代双列卡片） ---------- */
.rows { background:var(--card); border-radius:var(--r-m); box-shadow:var(--shadow); overflow:hidden; margin-bottom:12px; }
.rows .row { display:flex; align-items:center; gap:10px; padding:12px 13px; border-bottom:1px solid var(--line); }
.rows .row:last-child { border-bottom:none; }
.rows .row .n { flex:1; min-width:0; }
.rows .row .n b { display:block; font-size:15px; font-weight:700; color:var(--title); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rows .row .n i { font-style:normal; display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.rows .row .n .dtl { display:inline; font-size:10px; color:var(--muted); font-weight:400; margin-left:5px; font-style:normal; }
.rows .row .bar { height:4px; border-radius:2px; background:var(--line); margin-top:6px; overflow:hidden; }
.rows .row .bar i { display:block; height:100%; background:var(--ok); }
.rows .row .bar i.low { background:var(--warn); }
.rows .row .c { flex:0 0 auto; text-align:right; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--title); }
.rows .row .c small { display:block; font-size:10px; color:var(--muted); font-weight:400; }
.rows .row .c.low { color:var(--warn); }
.rows .row .b { flex:0 0 auto; min-width:96px; min-height:48px; border:none; border-radius:var(--r-pill); background:var(--brand-solid); color:#fff; font-size:15px; font-weight:700; padding:12px 20px; white-space:nowrap; }
.rows .row .b.rep { background:var(--warn); }
.rows .row.out { opacity:.6; }
.rows .row.out .c, .rows .row.out .b { color:var(--dis-ink); }
.rows .row.out .b { background:var(--dis-bg); color:var(--dis-ink); }

/* ---------- C 版设计系统：弹层吸底操作条 ---------- */
.copybar { position:sticky; bottom:-24px; margin:14px -16px -24px; padding:10px 16px 14px; background:var(--card); border-top:1px solid var(--line-2); }
.copybar .btn { margin:0; }

/* ---------- 底部导航（C 版替代顶部 Tab） ---------- */
.navb { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; background:var(--card); border-top:1px solid var(--line-2); padding-bottom:var(--safe-b); min-height:var(--nav-h); }
.navb button { flex:1; border:none; background:none; padding:7px 0 8px; font-size:10px; color:var(--muted); line-height:1.4; }
.navb button em { display:block; font-size:17px; font-style:normal; margin-bottom:1px; }
.navb button.on { color:var(--brand); font-weight:700; }

/* ---------- 卡片 ---------- */
.card, .sp, .spec-card, .agent-card, .rec { background:var(--card); border-radius:var(--r-m); }
.card, .sp, .spec-card, .agent-card { box-shadow:var(--shadow); }
.sp { padding:14px; margin-bottom:12px; }
.sp h3 { font-size:15px; margin:0 0 10px; color:var(--title); }
.sp h3 .hd-n { float:right; font-size:11px; color:var(--muted); font-weight:400; }
/* 设置/我的页的信息卡 */
.spec-card { padding:14px; margin-bottom:12px; }
.spec-name { font-size:18px; font-weight:700; color:var(--title); }
.spec-name small { font-size:12px; color:var(--muted); font-weight:400; margin-left:6px; }
.cnt { font-size:13px; color:var(--ink-2); margin-top:4px; }
.cnt b { color:var(--brand); font-size:16px; }
.empty-tip { text-align:center; color:var(--muted); padding:50px 20px; font-size:14px; line-height:1.8; }
.tip { font-size:12px; color:var(--muted); margin-top:6px; }
.danger { color:var(--warn) !important; }

/* ---------- 厂家分组条 ---------- */
.cat-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:16px 0 10px; padding:9px 12px; border-radius:10px; color:#fff; font-size:14px; font-weight:700; letter-spacing:.3px; box-shadow:var(--shadow-l); }
.cat-title:first-child { margin-top:2px; }
.cat-title .n { font-size:11px; font-weight:400; opacity:.92; color:#fff; white-space:nowrap; flex:1; text-align:right; }
.cat-title .cb-l { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-edit { flex:0 0 auto; background:rgba(255,255,255,.24); border-radius:12px; padding:5px 10px; font-size:11px; font-weight:700; color:#fff; cursor:pointer; }

/* ---------- 按钮 ---------- */
.btn { display:block; width:100%; padding:11px 0; border:none; border-radius:var(--r-s); font-size:15px; text-align:center; }
.btn-row { display:flex; gap:8px; margin-top:12px; }
.btn-row .btn { flex:1; width:auto; }
.btn-take, .btn-primary { background:var(--brand-solid); color:#fff; font-weight:600; }
.btn-take:disabled, .btn-primary:disabled { background:var(--dis-bg); color:var(--dis-ink); }
.btn-import, .btn-secondary { background:var(--brand-soft); color:var(--brand); }
.btn-import { flex:0 0 90px; }
.btn-secondary { margin-top:10px; }
.btn-sm { border:none; border-radius:7px; padding:9px 4px; font-size:12px; flex:1; white-space:nowrap; }
.btn-sm-primary { background:var(--brand-soft); color:var(--brand); }
.btn-sm-danger { background:var(--warn-soft); color:var(--warn); flex:0 0 60px; }
.rename-btn { background:var(--brand-soft); color:var(--brand); border:none; border-radius:7px; padding:6px 10px; font-size:12px; white-space:nowrap; }
.rename-btn:disabled { opacity:.35; }
.act { border:none; border-radius:11px; text-align:center; padding:13px 0; font-size:14px; background:var(--chip); color:var(--chip-ink); }
.act.main { color:#fff; font-weight:600; background:var(--brand-solid); }
.act.main2 { background:var(--brand-soft); color:var(--brand); font-weight:600; }
.act:disabled { opacity:.55; }
.toolbar { display:flex; gap:8px; margin-bottom:12px; }
.toolbar .btn, .toolbar button { flex:1; width:auto; font-size:13px; padding:9px 0; background:var(--card); color:var(--ink-2); border:1px solid var(--line-3); border-radius:var(--r-s); }
.toolbar .btn.onb, .toolbar button.onb { border-color:var(--brand); color:var(--brand); font-weight:600; }
.theme-btn.onb { background:var(--brand-solid) !important; color:#fff !important; border-color:var(--brand-solid) !important; }

/* ---------- 输入 ---------- */
.cfg-in { width:100%; border:1px solid var(--field-bd); border-radius:var(--r-s); padding:11px 10px; font-size:15px; margin-top:8px; background:var(--field-bg); color:var(--text); }
.search { width:100%; border:1px solid var(--field-bd); border-radius:var(--r-s); padding:10px; font-size:14px; margin-bottom:10px; background:var(--field-bg); color:var(--text); }
.filter-sel { width:100%; border:1px solid var(--line-3); border-radius:var(--r-s); padding:9px 10px; font-size:14px; margin-bottom:8px; background:var(--field-bg); color:var(--title); }
.qty-row { display:flex; gap:10px; align-items:center; margin:14px 0 4px; }
.qty-btn { flex:0 0 56px; height:48px; border:none; border-radius:10px; background:var(--brand-soft); color:var(--brand); font-size:24px; font-weight:600; }
.qty-row input { flex:1; height:48px; border:1px solid var(--field-bd); border-radius:10px; text-align:center; font-size:20px; font-weight:700; background:var(--field-bg); color:var(--text); }

/* ---------- 弹层 ---------- */
.mask { position:fixed; inset:0; background:var(--mask); z-index:100; display:none; align-items:flex-end; }
.mask.show { display:flex; }
.sheet { background:var(--card); color:var(--text); width:100%; border-radius:var(--r-l) var(--r-l) 0 0; padding:18px 16px 24px; max-height:85vh; overflow-y:auto; }
.sheet h3 { font-size:17px; margin-bottom:12px; color:var(--title); }
.sheet textarea { width:100%; height:160px; border:1px solid var(--field-bd); border-radius:var(--r-s); padding:10px; font-size:14px; font-family:monospace; background:var(--field-bg); color:var(--text); }
.sheet input[type=text], .sheet input[type=password], .sheet input[type=number] { width:100%; border:1px solid var(--field-bd); border-radius:var(--r-s); padding:12px 10px; font-size:15px; margin-bottom:10px; background:var(--field-bg); color:var(--text); }
.key-box { background:var(--key-bg); border:1px dashed var(--key-bd); border-radius:10px; padding:16px 12px; margin:10px 0; text-align:center; }
.key-box .key { font-family:monospace; font-size:16px; font-weight:700; word-break:break-all; white-space:pre-line; text-align:left; line-height:1.8; color:var(--title); user-select:all; -webkit-user-select:all; }
.copied-tag { display:inline-block; margin-top:8px; font-size:12px; color:var(--ok); }
.key-list { max-height:52vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.key-row { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.key-row .kk { flex:1; word-break:break-all; }
.key-row .st { font-size:11px; white-space:nowrap; }
.stock-timeline { margin:4px 0 8px; }
.stock-move { display:grid; grid-template-columns:14px minmax(0,1fr); gap:8px; }
.stock-move-track { position:relative; display:flex; justify-content:center; }
.stock-move-track::after { content:''; position:absolute; top:15px; bottom:-4px; width:2px; background:var(--line); }
.stock-move:last-child .stock-move-track::after { display:none; }
.stock-move-track i { position:relative; z-index:1; width:10px; height:10px; margin-top:8px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 3px var(--card); }
.stock-move.in .stock-move-track i { background:var(--ok); }
.stock-move.out .stock-move-track i { background:var(--orange); }
.stock-move.warn .stock-move-track i { background:var(--warn); }
.stock-move-body { min-width:0; margin-bottom:7px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--card-2); }
.stock-move-head, .stock-move-meta { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.stock-move-head { font-size:13px; }
.stock-move-head b { min-width:0; overflow-wrap:anywhere; }
.stock-move-head strong { white-space:nowrap; color:var(--text-2); }
.stock-move.in .stock-move-head strong { color:var(--ok); }
.stock-move.out .stock-move-head strong { color:var(--orange); }
.stock-move.warn .stock-move-head strong { color:var(--warn); }
.stock-move-meta { margin-top:4px; font-size:11px; color:var(--muted); }
.stock-move-meta span:first-child { min-width:0; overflow-wrap:anywhere; }
.stock-move-meta span:last-child { flex:0 0 auto; white-space:nowrap; }
.stock-move-meta b { color:var(--text-2); }
.stock-move-actor { margin-top:5px; color:var(--ink-2); font-size:12px; line-height:1.5; }
.stock-move-location { margin-top:5px; color:var(--brand); font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.stock-move.neutral .stock-move-track i { background:var(--brand); }
.timeline-day { position:sticky; top:0; z-index:2; padding:9px 4px; background:var(--card); color:var(--title); font-size:13px; font-weight:700; }
.timeline-notice { line-height:1.7; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
.timeline-notice b { color:var(--warn); }
.move-details { margin-top:9px; padding-top:7px; border-top:1px dashed var(--line-2); }
.move-details > summary { cursor:pointer; color:var(--brand); font-size:12px; padding:4px 0; }
.move-facts { display:grid; grid-template-columns:minmax(70px,auto) minmax(0,1fr); gap:6px 12px; margin:10px 0; font-size:12px; line-height:1.6; }
.move-facts dt { color:var(--muted); }
.move-facts dd { margin:0; color:var(--text-2); overflow-wrap:anywhere; }
.move-key-list { max-height:40vh; overflow-y:auto; }
.move-key-list .key-row .st { display:none; }
#tabLog > .toolbar { overflow-x:auto; }
#tabLog > .toolbar button { flex:1 0 80px; }
@media(max-width:480px) {
  .stock-move-meta { flex-direction:column; gap:3px; }
  .stock-move-body { padding:10px; }
}
.move-keys { margin-top:6px; font-size:11px; color:var(--muted); }
.move-keys summary { cursor:pointer; color:var(--brand); }
.move-keys div { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.move-keys code { padding:2px 5px; border-radius:4px; background:var(--chip); color:var(--text-2); word-break:break-all; }

/* ---------- 侧边抽屉（C 版新增） ---------- */
.drawer-mask { position:fixed; inset:0; background:var(--mask); z-index:110; display:none; }
.drawer-mask.show { display:block; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:86%; max-width:340px; background:var(--card); color:var(--text); z-index:111; transform:translateX(100%); transition:transform .22s ease; padding:16px 14px 24px; overflow-y:auto; box-shadow:-2px 0 12px rgba(0,0,0,.16); }
.drawer.show { transform:translateX(0); }
.drawer h3 { font-size:16px; margin-bottom:4px; word-break:break-all; color:var(--title); }
.drawer .x { position:absolute; top:12px; right:12px; border:none; background:var(--chip); color:var(--muted); border-radius:50%; width:28px; height:28px; font-size:14px; }
.drawer dl { margin:12px 0 0; }
.drawer dt { font-size:11px; color:var(--muted); margin-top:10px; }
.drawer dd { font-size:14px; font-weight:700; margin:2px 0 0; word-break:break-all; }

/* ---------- 记录条目 ---------- */
.rec { border-radius:10px; padding:12px 14px; margin-bottom:8px; }
.rec .k { font-family:monospace; font-size:14px; color:var(--text); word-break:break-all; user-select:all; -webkit-user-select:all; }
.rec .meta { font-size:12px; color:var(--muted); margin-top:5px; display:flex; justify-content:space-between; gap:8px; }
.rec .meta .spec-tag { color:var(--brand); font-weight:600; }
.rec .meta .agent-tag { color:var(--orange); font-weight:600; }
.rec .undo { color:var(--orange); font-size:12px; border:none; background:none; margin-top:4px; }
.card-timeline { margin-top:12px; }
.card-event { display:grid; grid-template-columns:14px minmax(0,1fr); gap:9px; }
.card-event-track { position:relative; display:flex; justify-content:center; }
.card-event-track::after { content:''; position:absolute; top:15px; bottom:-5px; width:2px; background:var(--line); }
.card-event:last-child .card-event-track::after { display:none; }
.card-event-track i { position:relative; z-index:1; width:10px; height:10px; margin-top:8px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 3px var(--card); }
.card-event.import .card-event-track i { background:var(--ok); }
.card-event.take .card-event-track i { background:var(--orange); }
.card-event.warn .card-event-track i { background:var(--warn); }
.card-event-body { min-width:0; margin-bottom:8px; padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:var(--card-2); }
.card-event-title { font-size:13px; font-weight:700; color:var(--text); }
.card-event-detail { margin-top:4px; font-size:12px; line-height:1.6; color:var(--text-2); overflow-wrap:anywhere; }
.card-event-time { margin-top:5px; font-size:11px; color:var(--muted); }

/* ---------- 统计面板内构件 ---------- */
.sp-grid { display:flex; flex-wrap:wrap; gap:8px; }
.sp-num { flex:1 1 30%; min-width:86px; background:var(--card-2); border-radius:10px; padding:10px 6px; text-align:center; }
.sp-num b { display:block; font-size:18px; color:var(--brand); }
.sp-num small { font-size:11px; color:var(--muted-2); }
.sp-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.sp-row:last-child { border-bottom:none; }
.sp-row .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-row .v { font-weight:600; white-space:nowrap; }
.sp-row .m { color:var(--muted-2); font-size:12px; white-space:nowrap; }
.ag-row { flex-wrap:wrap; }
.ag-row > .m { flex:1 1 100%; white-space:normal; line-height:1.6; }
.hbar { height:5px; border-radius:3px; background:var(--brand-soft); overflow:hidden; margin-top:4px; }
.hbar i { display:block; height:100%; background:var(--brand); }
.day-hd { cursor:pointer; }
.day-brk { display:none; background:var(--card-2); border-radius:var(--r-s); padding:2px 10px; margin:2px 0 6px; }
.day-brk.open { display:block; }
.day-line { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12px; border-bottom:1px dashed var(--dash); }
.day-line:last-child { border-bottom:none; }
.day-line .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2); }
.day-line .v { font-weight:600; white-space:nowrap; }
.day-line .m { color:var(--muted-2); white-space:nowrap; }
.link-grp { font-size:12px; font-weight:700; color:var(--brand); margin:14px 0 4px; }
.link-inherit { font-size:11px; color:var(--muted); margin:-2px 0 6px 2px; word-break:break-all; }
.spec-row { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line); }
.spec-row:last-child { border-bottom:none; }
.spec-row .spec-label { flex:1; font-weight:600; word-break:break-all; }
.spec-row input.price-in { width:70px; border:1px solid var(--field-bd); border-radius:7px; padding:8px 6px; font-size:14px; text-align:center; background:var(--field-bg); color:var(--text); }
.spec-row .unit { font-size:12px; color:var(--muted); white-space:nowrap; }

/* ---------- 剩余库存明细（提取结果弹层） ---------- */
.stk-toggle { margin-top:10px; font-size:13px; font-weight:700; color:var(--brand); cursor:pointer; user-select:none; }
.stk-detail { display:none; margin-top:8px; background:var(--card-2); border:1px solid var(--dash); border-radius:10px; padding:8px 10px; max-height:34vh; overflow:auto; }
.stk-detail.open { display:block; }
.stk-sum { font-size:12px; color:var(--ink-2); margin-bottom:6px; }
.stk-cat { font-size:12px; font-weight:700; color:var(--muted-2); margin:8px 0 4px; }
.stk-cat small { font-weight:400; color:var(--muted); }
.stk-row { display:flex; align-items:baseline; gap:8px; font-size:13px; padding:4px 0; border-bottom:1px solid var(--line); }
.stk-row .nm { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stk-row .c { font-weight:700; white-space:nowrap; }
.stk-row .p { font-size:11px; color:var(--muted); white-space:nowrap; }
.stk-row.cur { color:var(--brand); }
.stk-row.cur .c::after { content:' ◀ 本次'; font-size:11px; font-weight:400; }
.stk-row.zero .c { color:var(--faint); }

/* ---------- 仪表盘构件（C 版新增） ---------- */
.kpi { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.kpi > div { background:var(--card); border-radius:10px; padding:11px 8px; text-align:center; box-shadow:var(--shadow); cursor:pointer; }
.kpi b { display:block; font-size:19px; line-height:1.2; }
.kpi span { font-size:10px; color:var(--muted); }
.kpi .warn b { color:var(--warn); }
.kpi .ok b { color:var(--ok); }
.alert { border-radius:10px; padding:9px 11px; font-size:12px; line-height:1.7; margin-top:10px; background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-line); }
.alert.info { background:var(--brand-soft); color:var(--brand); border-color:transparent; }
.alert .go { float:right; font-weight:700; text-decoration:underline; }
.quick { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; margin-top:10px; }
.quick button { background:var(--card); border:none; border-radius:10px; padding:11px 2px; font-size:11px; color:var(--text-2); box-shadow:var(--shadow); }
.quick em { display:block; font-size:18px; font-style:normal; margin-bottom:3px; }
.wl { display:flex; align-items:center; gap:8px; font-size:12px; padding:6px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.wl:last-child { border-bottom:none; }
.wl .n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wl .t { flex:0 0 74px; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.wl .t i { display:block; height:100%; background:var(--ok); }
.wl .t i.low { background:var(--warn); }
.wl .v { flex:0 0 40px; text-align:right; font-weight:700; }
.wl .v.low { color:var(--warn); }
.ring { width:112px; height:112px; border-radius:50%; position:relative; margin:4px auto 8px; }
.ring::after { content:''; position:absolute; inset:22px; border-radius:50%; background:var(--card); }
.ring b { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; font-size:16px; }
.ring b small { font-size:9px; color:var(--muted); font-weight:400; }
.lgnd { font-size:11px; color:var(--text-2); }
.lgnd i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.lgnd div { padding:3px 0; }
.linechart { width:100%; height:78px; display:block; }
.linechart .grid-l { stroke:var(--line); stroke-width:1; }
.linechart .curve { fill:none; stroke:var(--brand); stroke-width:2; }
.linechart .area { fill:var(--brand-soft); opacity:.75; }
.linechart .pt { fill:var(--brand); }
.linechart text { fill:var(--muted); font-size:8px; }
.linechart .pk { fill:var(--brand); font-size:9px; font-weight:700; }

/* ---------- 登录 / 空态 / 提示 ---------- */
.agent-login-mask { position:fixed; inset:0; background:var(--hd); z-index:200; display:flex; align-items:center; justify-content:center; }
.agent-login-mask.hidden { display:none; }
.agent-login-box { background:var(--card); border-radius:var(--r-l); padding:30px 24px; width:88%; max-width:340px; text-align:center; }
.agent-login-box h2 { font-size:20px; margin-bottom:6px; color:var(--title); }
.agent-login-box .sub { font-size:13px; color:var(--muted); margin-bottom:20px; }
.agent-login-box input { width:100%; border:1px solid var(--field-bd); border-radius:10px; padding:13px 12px; font-size:15px; margin-bottom:12px; background:var(--field-bg); color:var(--text); }
.agent-login-box .login-btn { width:100%; padding:13px 0; border:none; border-radius:10px; background:var(--brand-solid); color:#fff; font-size:16px; font-weight:600; margin-top:4px; }
.agent-login-box .back-btn { width:100%; padding:11px 0; border:none; border-radius:10px; background:var(--chip); color:var(--ink-2); font-size:14px; margin-top:10px; }
.agent-login-box .err { color:var(--warn); font-size:13px; margin-top:8px; display:none; }
.verify-wrap { max-width:360px; margin:60px auto; padding:0 16px; text-align:center; }
.verify-wrap .icon { font-size:48px; margin-bottom:16px; }
.verify-wrap h2 { font-size:18px; margin-bottom:8px; color:var(--title); }
.verify-wrap .desc { font-size:13px; color:var(--muted); margin-bottom:24px; }
.verify-wrap input { width:100%; border:1px solid var(--field-bd); border-radius:var(--r-s); padding:13px 12px; font-size:16px; text-align:center; margin-bottom:12px; background:var(--field-bg); color:var(--text); }
.verify-wrap .btn { margin-bottom:12px; }
.center-msg { text-align:center; padding:80px 20px; }
.center-msg .icon { font-size:48px; margin-bottom:12px; }
.center-msg .msg { font-size:16px; color:var(--ink-2); line-height:1.8; }
.footer { text-align:center; padding:20px 12px 30px; font-size:11px; color:var(--faint); line-height:1.8; }
.loading { text-align:center; padding:60px 20px; color:var(--muted); font-size:14px; }
.loading .spinner { display:inline-block; width:28px; height:28px; border:3px solid var(--line-2); border-top-color:var(--brand); border-radius:50%; animation:kami-spin .7s linear infinite; margin-bottom:12px; }
@keyframes kami-spin { to { transform:rotate(360deg); } }
.toast { position:fixed; left:50%; bottom:100px; transform:translateX(-50%); background:var(--toast); color:#fff; padding:9px 18px; border-radius:var(--r-pill); font-size:14px; z-index:999; opacity:0; transition:opacity .25s; pointer-events:none; white-space:normal; max-width:82vw; text-align:center; }
.toast.show { opacity:1; }
.ver-line { text-align:center; color:var(--faint); font-size:11px; padding:14px 0 20px; }