/* 南韬CRM - 左右布局 · 双皮肤（v0.7.44 B-0/B-1）
 *
 * 结构纪律（方案 docs/方案-UI改造B与B+-20261007.md §1.4）：
 *   ① 只有下面两个 token 块允许出现色值字面量；其余规则一律 var(--*)，裸 # / rgba() = 0 处（有门禁脚本）。
 *   ② 组件规则只有一份，两套皮肤靠换 token 值切换；不允许 [data-skin="light"] .xxx{} 这类单皮肤补丁。
 *      唯一例外是 §皮肤不对称块（阴影/浮层表达方式），集中写在文件末尾并注释说明。
 *   ③ 皮肤值由 Jinja 首屏输出到 <html data-skin>，客户端不参与首帧 → 切换不闪。
 *   ④ 亮皮肤下语义色不得直接当文字，一律"浅底深字"（tag ink / tag bg 成对定义）。
 */

/* ============================================================
   共用刻度（不随皮肤变化：圆角 / 间距 / 控件高 / 字号 / 动效 / 层阶）
   —— 两套皮肤"长得一样规矩"靠的就是这一层，只有颜色换值
   ============================================================ */
:root {
  /* 圆角：现状 7 档（4/5/6/8/10/12/14）收敛到 antd 派生 4 档 + 胶囊 */
  --r-xs: 2px;
  --r-sm: 4px;
  --r: 6px;          /* antd borderRadius 种子 */
  --r-lg: 8px;       /* 种子 6 → LG=8 */
  --r-pill: 999px;   /* 徽章/药丸：等高等圆角，不占刻度 */

  /* 间距：antd sizeUnit×sizeStep=4 的官方刻度 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* 控件高度：controlHeight 32 的派生族 */
  --ctl-xs: 16px;
  --ctl-sm: 24px;
  --ctl: 32px;
  --ctl-lg: 40px;

  /* 字号（11px 这档取消，最小 12px；13px 保留以维持既有信息密度，偏差已记 CHANGELOG） */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-num: 26px;
  --lh: 1.5714;      /* antd lineHeight 种子 */

  /* 动效：motionDuration Fast/Mid/Slow */
  --t-fast: .1s;
  --t-mid: .2s;
  --t-slow: .3s;

  /* 层阶：禁止再写裸数字 */
  --z-under: 1;
  --z-inline: 2;     /* 输入框 ✕ 等局部覆盖 */
  --z-sticky: 10;    /* 顶栏 */
  --z-pop: 60;       /* 可搜索下拉 / 产品选择面板 */
  --z-mask: 1200;    /* 模态遮罩 */
  --z-mask-top: 1201; /* 遮罩之上的面板（图标选择器、toast） */

  --font: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color-scheme: dark;
}

/* ============================================================
   皮肤 A：暗色（默认）——保留现有蓝相底色，借用 antd 的 alpha 层级
   对比度均已按 WCAG 公式实测（数字见 _ui_gate.py 输出与 CHANGELOG）
   ============================================================ */
:root, html[data-skin="dark"] {
  color-scheme: dark;

  /* 面 / 容器 / 浮层 */
  --bg: #0f1420;
  --panel: #171d2b;
  --panel2: #1d2434;
  --panel3: #222b3d;        /* 浮层比容器再亮一档（暗色用亮度表达层级，不靠阴影） */

  /* 线 */
  --line: #2a3344;          /* 弱分隔线 */
  --line2: #374153;         /* 控件描边 */
  --line3: #46536b;         /* 强描边（聚焦/选中） */

  /* 文字四级（白字 alpha 阶梯） */
  --text: #e5e9f0;
  --mut: #a8b3c4;
  --dim: #7b87a0;           /* 原 #5c667a 实测仅 3.19 不合格，提到 5.10 */
  --faint: #5c667a;         /* 仅装饰性、不承载信息 */

  /* 品牌与主色：文字/链接级用 --primary，实心按钮底用 --primary-btn */
  --primary: #4da3ff;       /* on bg 7.01 ✅ / on tint 底 4.58 ✅ */
  --primary-ink: #4da3ff;   /* 暗皮肤文字级与填充级同色 */
  --primary-btn: #2f6fd6;   /* 白字压它 4.81 ✅（现状直接用 #4da3ff 只有 2.63，本次一并修） */
  --primary-btn-hover: #3d82e8;
  --on-primary: #ffffff;
  --primary-soft: rgba(77, 163, 255, .12);
  --primary-softer: rgba(77, 163, 255, .08);
  --primary-softest: rgba(77, 163, 255, .05);
  --primary-faint: rgba(77, 163, 255, .06);
  --ring: rgba(77, 163, 255, .22);

  /* 语义色：暗皮肤下这些值可直接当文字 */
  --ok: #22c55e;
  --warn: #f59e0b;
  --err: #ff7875;           /* 原 #ef4444 在 tint 底只有 3.86，提亮一档 → 5.24 ✅ */
  --info: #4da3ff;
  --purple: #b9a5fb;        /* 原 #a78bfa 在 tint 底 4.44 差一点，提亮 */
  --neutral-ink: #a8b3c4;

  /* 语义色按用途分档（截图验收抓出来的失分点）：
     --*-text = 当文字用（大数字、提示、必填星号），--*-btn = 实心按钮底（白字压它） */
  --ok-text: #22c55e;      --warn-text: #f59e0b;   --err-text: #ff7875;
  --purple-text: #b9a5fb;  --info-text: #4da3ff;
  --ok-btn: #15803d;       --warn-btn: #b45309;    --err-btn: #b91c1c;

  /* 语义"标签"成对（浅底深字规则的暗色版：tint 底 + 同色相文字） */
  --tag-info-bg: rgba(77, 163, 255, .15);
  --tag-info-ink: #4da3ff;
  --tag-ok-bg: rgba(34, 197, 94, .15);
  --tag-ok-ink: #22c55e;
  --tag-warn-bg: rgba(245, 158, 11, .15);
  --tag-warn-ink: #f59e0b;
  --tag-err-bg: rgba(239, 68, 68, .15);
  --tag-err-ink: #ff7875;
  --tag-purple-bg: rgba(167, 139, 250, .15);
  --tag-purple-ink: #b9a5fb;
  --tag-gray-bg: rgba(139, 148, 167, .15);
  --tag-gray-ink: #a8b3c4;
  --tag-neutral-bg: rgba(139, 148, 167, .12);
  --chip-bg: rgba(139, 148, 167, .12);

  /* 轻提示底（flash 条） */
  --ok-soft: rgba(34, 197, 94, .1);
  --warn-soft: rgba(245, 158, 11, .1);
  --err-soft: rgba(239, 68, 68, .1);

  /* 表格/斑马/悬浮 */
  --row-hover: rgba(77, 163, 255, .05);
  --zebra: rgba(255, 255, 255, .015);
  --scrollbar: #374153;

  /* 登录页渐变 */
  --grad-a: #1b2436;
  --grad-b: #0f1420;

  /* 货品选择弹窗：暗皮肤下保留"白卡片"这一既成视觉（v0.6.9 为对比度特意改的），
     亮皮肤下它与页面同色系，自然融合 */
  --sheet-bg: #ffffff;
  --sheet-ink: #1f2329;
  --sheet-mut: #646a73;
  --sheet-faint: #9aa2ab;
  --sheet-line: #e5e8ec;
  --sheet-line2: #d8dde3;
  --sheet-head: #fafbfc;
  --sheet-hover: #f2f5f8;
  --sheet-accent: #2f6fed;

  /* 图表渐变 */
  --bar-a: #2f6fd6;
  --bar-b: #4da3ff;
  --track: #1d2434;

  /* 遮罩与阴影（暗色阴影几乎不可见 → 用遮罩加深 + 亮边框代替） */
  --mask: rgba(6, 9, 16, .62);
  --sh-pop: 0 6px 18px rgba(0, 0, 0, .45);
  --sh-modal: 0 12px 40px rgba(0, 0, 0, .5);
}

/* ============================================================
   皮肤 B：亮色（antd 亮色取向：白容器 + 浅灰布局底 + 黑字 alpha 阶梯）
   语义色拆成"填充用色"和"文字用色"两组，因为实测亮底上绿/黄当文字全部不合格
   ============================================================ */
html[data-skin="light"] {
  color-scheme: light;

  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel2: #f7f9fc;
  --panel3: #ffffff;

  --line: #e8ebf0;
  --line2: #d8dde3;
  --line3: #b7c0cc;

  /* 黑字 alpha 阶梯（与暗皮肤同一套比例思想，数值按实测调整） */
  --text: rgba(0, 0, 0, .88);
  --mut: rgba(0, 0, 0, .65);
  --dim: rgba(0, 0, 0, .6);   /* 暗皮肤用 .45 档，亮皮肤压不到那么低（实测 .45 只有 3.35） */
  --faint: rgba(0, 0, 0, .35);

  --primary: #1677ff;         /* 描边/填充/焦点环用（白底 4.10 属组件级，达标） */
  --primary-ink: #0958d9;     /* 文字/链接必须用这一档：#1677ff 压在 #f5f7fa 上只有 3.82 不合格 */
  --primary-btn: #0958d9;     /* 白字压它 6.16 ✅（种子 #1677ff 压白字只有 4.10） */
  --primary-btn-hover: #1677ff;
  --on-primary: #ffffff;
  --primary-soft: #e6f4ff;
  --primary-softer: #f0f7ff;
  --primary-softest: #f5faff;
  --primary-faint: #f0f7ff;
  --ring: rgba(22, 119, 255, .2);

  --ok: #52c41a;
  --warn: #faad14;
  --err: #ff4d4f;
  --info: #1677ff;
  --purple: #722ed1;
  --neutral-ink: #595959;

  /* 亮皮肤实测：绿 #52c41a 当文字只有 2.27、黄 #faad14 只有 1.90，加深到 -7 档仍不够，
     所以文字与实心按钮底一律取深档（与下方 tag-*-ink 同值，白字压它们全部 ≥4.5） */
  --ok-text: #237804;      --warn-text: #8c5400;   --err-text: #cf1322;
  --purple-text: #531dab;  --info-text: #0958d9;
  --ok-btn: #237804;       --warn-btn: #8c5400;    --err-btn: #cf1322;

  /* 浅底深字（实测全部 ≥4.5） */
  --tag-info-bg: #e6f4ff;   --tag-info-ink: #0958d9;      /* 5.50 */
  --tag-ok-bg: #f6ffed;     --tag-ok-ink: #237804;        /* 5.44 */
  --tag-warn-bg: #fffbe6;   --tag-warn-ink: #8c5400;      /* 5.97 */
  --tag-err-bg: #fff1f0;    --tag-err-ink: #cf1322;       /* 5.07 */
  --tag-purple-bg: #f9f0ff; --tag-purple-ink: #531dab;    /* 8.88 */
  --tag-gray-bg: #fafafa;   --tag-gray-ink: #595959;      /* 6.71 */
  --tag-neutral-bg: #f2f4f7; --chip-bg: #f2f4f7;

  --ok-soft: #f6ffed;
  --warn-soft: #fffbe6;
  --err-soft: #fff1f0;

  --row-hover: #f5f9ff;
  --zebra: rgba(0, 0, 0, .015);
  --scrollbar: #d3dae3;

  --grad-a: #eef3fa;
  --grad-b: #f5f7fa;

  --sheet-bg: #ffffff;
  --sheet-ink: #1f2329;
  --sheet-mut: #646a73;
  --sheet-faint: #9aa2ab;
  --sheet-line: #e5e8ec;
  --sheet-line2: #d8dde3;
  --sheet-head: #fafbfc;
  --sheet-hover: #f2f5f8;
  --sheet-accent: #0958d9;

  --bar-a: #1677ff;
  --bar-b: #69b1ff;
  --track: #eef1f5;

  /* 亮皮肤才用真阴影表达层级 */
  --mask: rgba(15, 23, 32, .45);
  --sh-pop: 0 6px 16px rgba(15, 23, 42, .12);
  --sh-modal: 0 12px 32px rgba(15, 23, 42, .18);
}

/* ============================================================
   兼容别名层（v0.7.44 新增，随皮肤自动换值）
   为什么要有这一段：模板里有 34 处引用 --t1/--t2/--t3/--bg2/--accent/--text2
   以及若干旧名 --blue/--blue2/--green/--red/--orange，而**这些变量在 style.css 里
   从来没有定义过**（实测 HEAD~5 亦无）——那 34 条声明一直是"静默失效"状态（浏览器
   把无法解析的 var() 当 unset 处理）。本层一次性把它们接到真 token 上，
   既让旧写法生效、又保证双皮肤下自动换值。后续模板可逐步改用正式 token 名。
   ============================================================ */
:root {
  --blue: var(--primary-ink);
  --blue2: var(--primary-btn);
  --green: var(--ok);
  --red: var(--err);
  --orange: var(--warn);
  --accent: var(--primary);
  --accent-weak: var(--primary-soft);
  --green-weak: var(--tag-ok-bg);
  --orange-weak: var(--tag-warn-bg);
  --purple-weak: var(--tag-purple-bg);
  --bg2: var(--panel2);
  --text2: var(--mut);
  --t1: var(--text);
  --t2: var(--mut);
  --t3: var(--dim);
}

/* ===== 基座 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs); line-height: var(--lh); transition: background-color var(--t-mid) ease, color var(--t-mid) ease; }
a { color: var(--primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
/* 键盘可达性：全站统一的焦点环（不改元素形状，只加 ring） */
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }

/* ===== 左右布局 ===== */
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 220px; background: var(--panel); border-right: 1px solid var(--line); padding: var(--s-4) 0; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; transition: width var(--t-mid) ease; }
.brand { padding: 0 18px var(--s-3); font-size: var(--fs-xl); font-weight: 700; color: var(--primary-ink); letter-spacing: 1px; border-bottom: 1px solid var(--line); margin-bottom: 10px; white-space: nowrap; overflow: hidden; }
.brand small { display: block; font-size: var(--fs-xs); color: var(--dim); font-weight: 400; margin-top: 2px; }
/* 菜单栏顶部：全部展开/折叠按钮（v0.7.9） */
.nav-tools { padding: 0 var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); margin-bottom: var(--s-1); }
.nav-tool-btn { width: 100%; background: var(--panel2); border: 1px solid var(--line2); color: var(--mut); border-radius: var(--r); padding: 6px 10px; cursor: pointer; font-size: var(--fs-xs); text-align: center; white-space: nowrap; transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background-color var(--t-fast) ease; }
.nav-tool-btn:hover { border-color: var(--primary-ink); color: var(--primary-ink); background: var(--primary-faint); }
.nav-tool-btn:focus-visible { border-color: var(--primary-ink); }
.nav { flex: 1; overflow-y: auto; overflow-x: hidden; }
.nav::-webkit-scrollbar { width: var(--s-2); }
.nav::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: var(--r-sm); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px 18px; color: var(--mut); font-size: var(--fs); border-left: 3px solid transparent; white-space: nowrap; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.nav a:hover { color: var(--text); background: var(--panel2); text-decoration: none; }
.nav a.active { color: var(--primary-ink); background: var(--primary-softer); border-left-color: var(--primary-ink); }
.nav a .ico { width: 18px; text-align: center; flex-shrink: 0; }
/* 二级目录：模块关联表单独立入口（v0.4.3） */
.nav-sub { display: none; }
.nav-sub.open { display: flex; flex-direction: column; }
.nav-sub a { padding: 7px 18px 7px 46px; font-size: var(--fs-sm); color: var(--dim); border-left: 3px solid transparent; white-space: nowrap; }
.nav-sub a:hover { color: var(--text); background: var(--panel2); }
.nav-sub a.active { color: var(--primary-ink); background: var(--primary-softer); border-left-color: var(--primary-ink); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
/* 顶部栏：折叠按钮 + 全局搜索 + 通用功能按钮 */
.topbar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); background: var(--panel); border-bottom: 1px solid var(--line); flex-shrink: 0; z-index: var(--z-sticky); }
.fold-btn { font-size: 15px; padding: 7px 11px; line-height: 1; }
.topbar .grow { flex: 1; }
.searchbox { display: flex; align-items: center; background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: 7px var(--s-3); width: 360px; max-width: 45vw; transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.searchbox:focus-within { border-color: var(--primary-ink); box-shadow: 0 0 0 2px var(--ring); }
.searchbox input { background: transparent; border: none; outline: none; color: var(--text); width: 100%; font-size: var(--fs); }
.searchbox input::placeholder { color: var(--dim); }
.searchbox button { background: none; border: none; color: var(--mut); cursor: pointer; font-size: 15px; }
.tb-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r-lg); padding: 7px 14px; cursor: pointer; font-size: var(--fs-sm); transition: border-color var(--t-fast) ease, color var(--t-fast) ease; }
.tb-btn:hover { border-color: var(--primary-ink); color: var(--primary-ink); text-decoration: none; }
.tb-btn:active { transform: translateY(1px); }
/* 皮肤切换按钮（v0.7.44 B-0）：无边框窄按钮，只放图标 */
.skin-form { display: inline-flex; }
.skin-toggle { min-width: 34px; justify-content: center; padding: 7px 9px; }
.tb-user { display: flex; align-items: center; gap: var(--s-2); }
.avatar { width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--primary-btn); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--on-primary); font-weight: 600; }
.tb-user .nm { font-size: var(--fs-sm); color: var(--text); }
.tb-user .role { font-size: var(--fs-xs); color: var(--dim); }

.content { padding: var(--s-5); flex: 1; overflow-y: auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); flex-wrap: wrap; gap: 10px; }
.page-head h1 { font-size: var(--fs-2xl); font-weight: 600; }
.page-head .sub { color: var(--mut); font-size: var(--fs-sm); margin-top: 2px; }
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-btn); color: var(--on-primary); border: 1px solid transparent; border-radius: var(--r-lg); padding: 8px var(--s-4); cursor: pointer; font-size: var(--fs-sm); font-weight: 500; min-height: var(--ctl); transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, opacity var(--t-fast) ease; }
.btn:hover { background: var(--primary-btn-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; border: 1px solid var(--line2); color: var(--text); }
.btn.ghost:hover { border-color: var(--primary-ink); color: var(--primary-ink); background: var(--primary-faint); }
.btn.sm { padding: var(--s-1) 10px; font-size: var(--fs-xs); border-radius: var(--r); min-height: var(--ctl-sm); }
.btn.green { background: var(--ok-btn); color: var(--on-primary); }
.btn.red { background: var(--err-btn); color: var(--on-primary); }
.btn.orange { background: var(--warn-btn); color: var(--on-primary); }
/* disabled / loading：状态与主皮肤无关，一律走 token */
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn[disabled]:hover { background: var(--primary-btn); }
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid var(--on-primary); border-top-color: transparent; border-radius: var(--r-pill); animation: btn-spin var(--t-slow) linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ===== 卡片与表格 ===== */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); margin-bottom: var(--s-4); }
.card h3 { font-size: 15px; margin-bottom: var(--s-3); color: var(--text); }
.filters { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.filters input, .filters select { background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r-lg); padding: 7px 10px; font-size: var(--fs-sm); outline: none; min-height: var(--ctl); transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.filters input::placeholder { color: var(--dim); }
.filters input:hover, .filters select:hover { border-color: var(--line3); }
.filters input:focus, .filters select:focus { border-color: var(--primary-ink); box-shadow: 0 0 0 2px var(--ring); }

table.grid { width: 100%; border-collapse: collapse; }
table.grid th { text-align: left; padding: 9px 10px; color: var(--mut); font-size: var(--fs-xs); font-weight: 500; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel2); }
table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tbody tr:nth-child(even) td { background: var(--zebra); }
table.grid tr:hover td { background: var(--row-hover); }
table.grid tr.selected td { background: var(--primary-softer); box-shadow: inset 3px 0 0 var(--primary); }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.opts { white-space: nowrap; }
.opts form { display: inline; }

/* 状态徽章：两套皮肤都用"成对 token"，暗=tint底同色字、亮=浅底深字 */
.badge { display: inline-block; padding: 2px var(--s-2); border-radius: var(--r-pill); font-size: var(--fs-xs); white-space: nowrap; border: 1px solid transparent; }
.b-蓝, .b-新线索, .b-待审批, .b-待开票, .b-待核销, .b-草稿, .b-待处理, .b-待发货, .b-待办, .b-初步接触, .b-需求确认,
.b-已通过, .b-待回款, .b-潜在, .b-咨询, .b-需求, .b-跟进提醒, .b-中型, .b-主联系人 { background: var(--tag-info-bg); color: var(--tag-info-ink); border-color: var(--tag-info-bg); }
.b-绿, .b-已转化, .b-已审批, .b-已生效, .b-已开票, .b-已核销, .b-已解决, .b-已发货, .b-已完成, .b-赢单, .b-合作中, .b-上架, .b-已收,
.b-活跃, .b-启用, .b-正式客户 { background: var(--tag-ok-bg); color: var(--tag-ok-ink); border-color: var(--tag-ok-bg); }
.b-橙, .b-跟进中, .b-部分核销, .b-处理中, .b-部分发货, .b-方案报价, .b-商务谈判, .b-高,
.b-部分回款, .b-审批待办, .b-投诉, .b-休眠, .b-质量投诉, .b-安装调试, .b-维修, .b-退货处理, .b-加急订单 { background: var(--tag-warn-bg); color: var(--tag-warn-ink); border-color: var(--tag-warn-bg); }
.b-红, .b-无效, .b-已拒绝, .b-已终止, .b-已红冲, .b-已关闭, .b-输单, .b-已流失, .b-停用, .b-已逾期, .b-紧急,
.b-已驳回, .b-已转合同, .b-流失, .b-故障, .b-回款提醒, .b-已作废, .b-大型, .b-企业级 { background: var(--tag-err-bg); color: var(--tag-err-ink); border-color: var(--tag-err-bg); }
.b-灰, .b-暂停, .b-低, .b-中, .b-gray { background: var(--tag-gray-bg); color: var(--tag-gray-ink); border-color: var(--tag-gray-bg); }
.b-紫, .b-已履行, .b-已完结, .b-普通待办, .b-工单待办, .b-小型, .b-其他,
.b-需求分析, .b-预付30%, .b-预付50%, .b-月结30天, .b-月结60天, .b-3期 30/40/30, .b-手动工具, .b-电动工具, .b-定制, .b-积极, .b-中性, .b-待回复, .b-消极 { background: var(--tag-purple-bg); color: var(--tag-purple-ink); border-color: var(--tag-purple-bg); }

/* ===== 表单 ===== */
.form-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
/* v0.7.54 客户双字段：编号/名称左右并排（占 2 格，内部 1fr 1fr），原字段依次向后排列、每行 5 个 */
.ap-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; grid-column: span 2; min-width: 0; }
.ap-pair .f-item { min-width: 0; }
.f-item { display: flex; flex-direction: column; gap: 5px; }
.f-item label { color: var(--mut); font-size: var(--fs-sm); }
.f-item .req::after { content: " *"; color: var(--err-text); }
.f-item input, .f-item select, .f-item textarea { background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r-lg); padding: 8px 10px; font-size: var(--fs); outline: none; font-family: inherit; min-height: var(--ctl); transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.f-item input::placeholder, .f-item textarea::placeholder { color: var(--dim); }
.f-item input:hover:not(:focus):not([disabled]), .f-item select:hover:not(:disabled), .f-item textarea:hover:not(:disabled) { border-color: var(--line3); }
.f-item input:focus, .f-item select:focus, .f-item textarea:focus { border-color: var(--primary-ink); box-shadow: 0 0 0 2px var(--ring); }
.f-item input[disabled], .f-item select[disabled], .f-item textarea[disabled], .f-item input[readonly] { background: var(--panel); color: var(--dim); cursor: not-allowed; border-style: dashed; }
/* 字段级错误：边框 + 下方说明（.f-err 由表单模板挂） */
.f-item.has-err input, .f-item.has-err select, .f-item.has-err textarea { border-color: var(--err-btn); }
.f-item .hint { color: var(--dim); font-size: var(--fs-xs); }
.f-item .err-msg { color: var(--err-text); font-size: var(--fs-xs); }
.f-item textarea { min-height: 80px; resize: vertical; }
.f-item.full { grid-column: 1 / -1; }
.form-actions { margin-top: 18px; display: flex; gap: 10px; }

/* 明细行表格 */
.items-box { margin-top: var(--s-4); }
.items-box .add-row { margin-bottom: var(--s-2); }
table.items { width: 100%; border-collapse: collapse; }
table.items th { text-align: left; padding: 7px 8px; font-size: var(--fs-xs); color: var(--mut); background: var(--panel2); border-bottom: 1px solid var(--line); }
table.items td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.items input, table.items select { background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r); padding: 6px 8px; font-size: var(--fs-sm); width: 100%; outline: none; transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
table.items input:focus, table.items select:focus { border-color: var(--primary-ink); box-shadow: 0 0 0 2px var(--ring); }
.item-total { text-align: right; margin-top: 10px; font-size: 15px; color: var(--primary-ink); font-weight: 600; }

/* 仪表盘 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: var(--s-4); }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); transition: border-color var(--t-fast) ease; }
.stat .v { font-size: var(--fs-num); font-weight: 700; color: var(--primary-ink); margin-top: var(--s-1); }
.stat .k { color: var(--mut); font-size: var(--fs-sm); }
.stat .v.green { color: var(--ok-text); } .stat .v.orange { color: var(--warn-text); } .stat .v.purple { color: var(--purple-text); }
.stat-link { display: block; color: inherit; text-decoration: none; }
.stat-link:hover { border-color: var(--primary-ink); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* 提示 */
.flash { margin-bottom: 14px; }
.flash div { padding: 10px 14px; border-radius: var(--r-lg); margin-bottom: var(--s-2); font-size: var(--fs-sm); border: 1px solid; }
.flash .ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-text); }
.flash .error { background: var(--err-soft); border-color: var(--err); color: var(--err-text); }
.flash .warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-text); }

/* 登录页 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at top, var(--grad-a) 0%, var(--grad-b) 60%); }
.login-box { width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-8); }
.login-box h1 { font-size: var(--fs-2xl); text-align: center; color: var(--primary-ink); margin-bottom: var(--s-1); }
.login-box .sub { text-align: center; color: var(--dim); font-size: var(--fs-xs); margin-bottom: 22px; }
.login-box .f-item { margin-bottom: 14px; }
.login-box .btn { width: 100%; justify-content: center; padding: 10px; margin-top: 6px; }
.login-hint { margin-top: 14px; font-size: var(--fs-xs); color: var(--dim); line-height: 1.8; text-align: center; }

/* 详情 */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; }
.detail-grid .d-item { padding: 9px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; }
.detail-grid .d-item:nth-child(odd) { background: var(--zebra); }
.detail-grid .k { color: var(--mut); min-width: 110px; }
.detail-grid .v { color: var(--text); }
/* 空态：从"光秃秃一行"升级为有占位框 */
.empty { color: var(--dim); text-align: center; padding: var(--s-8) 0; font-size: var(--fs-sm); }
.empty::before { content: "—"; display: block; color: var(--faint); font-size: var(--fs-lg); margin-bottom: var(--s-1); }
.err-wrap { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.err-wrap .code { font-size: 56px; font-weight: 700; color: var(--primary-ink); }

/* ===== 第一版 UI 对齐补充 ===== */
/* 左侧菜单分组 */
.nav-group-title { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: var(--fs); color: var(--mut); border-left: 3px solid transparent; cursor: pointer; white-space: nowrap; user-select: none; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.nav-group-title:hover { color: var(--text); background: var(--panel2); }
.nav-group-title.open { color: var(--primary-ink); background: var(--primary-softer); border-left-color: var(--primary-ink); }
.nav-group-title .sub-arrow { margin-left: auto; color: var(--dim); font-size: var(--fs-xs); transition: transform var(--t-fast) ease; }
.nav-group-title.open .sub-arrow { transform: rotate(90deg); color: var(--primary-ink); }
.menu-ico-img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.menu-ico-img.sm { width: 14px; height: 14px; margin-right: var(--s-1); vertical-align: -2px; }
.mi-ico { margin-right: var(--s-1); font-size: var(--fs-sm); }
.nav a .ico { font-size: var(--fs-sm); }
/* 左侧底部用户卡 */
.side-user { display: flex; align-items: center; gap: 10px; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); margin-top: 10px; }
.side-user .nm { font-size: var(--fs-sm); color: var(--text); }
.side-user .role { font-size: var(--fs-xs); color: var(--dim); }
/* 顶部栏页面标题 + 铃铛 */
.page-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); white-space: nowrap; }
.bell { position: relative; }
.bell-badge { position: absolute; top: -6px; right: -6px; background: var(--err); color: var(--on-primary); font-size: 10px; min-width: var(--ctl-xs); height: var(--ctl-xs); border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; padding: 0 var(--s-1); }
/* 回款双 Tab */
.tabs { display: flex; gap: var(--s-1); margin-bottom: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-1); width: fit-content; }
.tab { padding: 8px 18px; border-radius: var(--r-lg); color: var(--mut); font-size: var(--fs-sm); }
.tab:hover { color: var(--text); text-decoration: none; }
.tab.on { background: var(--primary-btn); color: var(--on-primary); font-weight: 500; }
/* 仪表盘图表 */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.dash-grid .two-col-span { grid-column: 1 / -1; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.hbar-list { display: flex; flex-direction: column; gap: var(--s-3); }
.hbar-row { display: flex; align-items: center; gap: 10px; }
.hbar-label { width: 96px; }
.hbar-track { flex: 1; height: 10px; background: var(--track); border-radius: var(--r-sm); overflow: hidden; }
.hbar-fill { height: 100%; background: linear-gradient(90deg, var(--bar-a), var(--bar-b)); border-radius: var(--r-sm); }
.hbar-num { width: 130px; text-align: right; color: var(--mut); font-size: var(--fs-xs); }
.vbar-chart { display: flex; align-items: flex-end; gap: 14px; height: 170px; padding-top: 10px; }
.vbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-1); }
.vbar-bar { width: 60%; max-width: 44px; background: linear-gradient(180deg, var(--bar-b), var(--bar-a)); border-radius: var(--r-sm) var(--r-sm) 0 0; min-height: 2px; }
.vbar-val { color: var(--text); font-size: var(--fs-xs); font-weight: 600; }
.vbar-label { color: var(--dim); font-size: var(--fs-xs); }
/* 最近活动时间线 */
.timeline { list-style: none; }
.timeline li { display: flex; gap: 10px; padding: var(--s-2) 0; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 22px; bottom: -4px; width: 1px; background: var(--line2); }
.timeline li:last-child::before { display: none; }
.tl-dot { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--primary); margin-top: 5px; flex-shrink: 0; }
.tl-body { flex: 1; }
.tl-title { color: var(--text); font-size: var(--fs-sm); }
.tl-meta { color: var(--dim); font-size: var(--fs-xs); margin-top: 2px; }
/* 列表行展开 */
.exp-btn { background: none; border: none; color: var(--mut); cursor: pointer; font-size: var(--fs-xs); }
.exp-btn:hover { color: var(--primary-ink); }
.exp-row td { background: var(--panel2); }
/* 合同表单导入报价 */
.import-quo { float: right; font-weight: 400; font-size: var(--fs-xs); display: inline-flex; gap: var(--s-2); align-items: center; }
.import-quo select { background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r); padding: 5px 8px; font-size: var(--fs-xs); outline: none; }
/* 货品标记（组合装/疑似停用）：由内联 style 硬编码色改为 token 类（B-1b） */
.gp-tag-suite { color: var(--warn); }
.gp-tag-stale { color: var(--dim); }
.gp-count.is-warn { color: var(--err); }

/* ===== 原型对齐补充（v0.4.1：数据看板/系统管理/产品资料/联系人） ===== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.dim { color: var(--dim); }
/* 系统管理 kv */
.kv { display: grid; gap: var(--s-3); }
.kv-item { display: flex; gap: var(--s-3); align-items: flex-start; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3) 14px; }
.kv-label { width: 150px; flex-shrink: 0; color: var(--mut); font-size: var(--fs-sm); }
.kv-val { flex: 1; color: var(--text); font-size: var(--fs-sm); line-height: 1.6; }
/* 产品卡片网格 */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.prod-card { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); display: flex; flex-direction: column; gap: 6px; transition: border-color var(--t-fast) ease; }
.prod-card:hover { border-color: var(--primary-ink); }
.pd-code { color: var(--dim); font-size: var(--fs-xs); }
.pd-name { color: var(--text); font-size: var(--fs); font-weight: 600; }
.pd-cat { color: var(--mut); font-size: var(--fs-xs); }
.pd-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-1); }
.pd-price { color: var(--primary-ink); font-weight: 700; font-size: 15px; }
.pd-actions { display: flex; gap: var(--s-2); justify-content: flex-end; border-top: 1px dashed var(--line); padding-top: 10px; }

/* ===== v0.4.2：跟进时间线（按天分组）/ 通知中心 / 列表统计卡 ===== */
.tl-day { color: var(--mut); font-size: var(--fs-sm); font-weight: 600; margin: 14px 0 var(--s-2); border-bottom: 1px dashed var(--line); padding-bottom: var(--s-1); }
.tl-day:first-child { margin-top: 0; }
.tl-item { display: flex; gap: var(--s-3); padding: var(--s-2) 0; position: relative; }
.tl-item .tl-axis { width: 10px; flex-shrink: 0; position: relative; }
.tl-item .tl-axis::after { content: ""; position: absolute; top: 22px; bottom: -8px; left: 4px; width: 1px; background: var(--line2); }
.tl-item:last-child .tl-axis::after { display: none; }
.tl-time { width: 44px; flex-shrink: 0; color: var(--dim); font-size: var(--fs-xs); padding-top: 4px; text-align: right; }
.tl-card { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px var(--s-3); }
.tl-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-1); flex-wrap: wrap; }
.tl-type { color: var(--primary-ink); font-size: var(--fs-sm); font-weight: 600; }
.tl-entity { color: var(--mut); font-size: var(--fs-xs); background: var(--chip-bg); border-radius: var(--r); padding: 1px var(--s-2); }
.tl-content { color: var(--text); font-size: var(--fs-sm); line-height: 1.6; }
.tl-next { color: var(--warn-text); font-size: var(--fs-xs); margin-top: var(--s-1); }
.tl-owner { color: var(--dim); font-size: var(--fs-xs); margin-top: var(--s-1); }
/* 通知中心 */
.log-list { display: flex; flex-direction: column; }
.log-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); }
.log-row:last-child { border-bottom: none; }
.pv-dot { width: 7px; height: 7px; border-radius: var(--r-pill); flex-shrink: 0; }
.lg-time { color: var(--dim); font-size: var(--fs-xs); flex-shrink: 0; }
.lg-op { color: var(--primary-ink); flex-shrink: 0; font-weight: 600; }
.lg-txt { color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 侧栏折叠（v0.6.1） ===== */
.side-collapsed .sidebar { width: 64px; padding: var(--s-4) 0; }
.side-collapsed .brand { padding: 0 12px var(--s-3); font-size: var(--fs); text-align: center; }
.side-collapsed .brand small { display: none; }
.side-collapsed .nav a { padding: var(--s-3) 0; justify-content: center; gap: 0; }
.side-collapsed .nav a .ico { width: auto; font-size: 15px; }
.side-collapsed .nav-text { display: none; }
.side-collapsed .nav-group-title { height: auto; padding: var(--s-3) 0; justify-content: center; gap: 0; border-left: none; }
.side-collapsed .nav-group-title .nav-text,
.side-collapsed .nav-group-title .sub-arrow { display: none; }
.side-collapsed .nav-group-title .ico { width: auto; font-size: 15px; }
.side-collapsed .nav-sub { display: none; }
.side-collapsed .nav-tools { display: none; }
.side-collapsed .side-user { justify-content: center; padding: 10px 0; }
.side-collapsed .side-user-info { display: none; }

/* ===== 一级菜单二级折叠箭头（v0.6.2） ===== */
.nav a.has-sub .sub-arrow { margin-left: auto; color: var(--dim); font-size: var(--fs-xs); transition: transform var(--t-fast) ease; }
.nav a.has-sub.expanded .sub-arrow { transform: rotate(90deg); color: var(--primary-ink); }
.nav a.has-sub { cursor: pointer; }

/* ===== 分页条（v0.6.3） ===== */
.pager { display: flex; align-items: center; gap: var(--s-2); margin-top: 14px; flex-wrap: wrap; color: var(--mut); font-size: var(--fs-sm); }
.pager b { color: var(--text); }
.pager select { background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r-lg); padding: 6px 8px; font-size: var(--fs-sm); outline: none; min-height: var(--ctl-sm); }
.pager select:focus { border-color: var(--primary-ink); box-shadow: 0 0 0 2px var(--ring); }
.pager .btn { padding: 6px var(--s-3); }
.pager .btn.primary { background: var(--primary-btn); color: var(--on-primary); border-color: var(--primary-btn); }
.pager .btn[disabled] { opacity: .45; cursor: not-allowed; }
.pager-jump input { width: 64px; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r-lg); padding: 6px 8px; font-size: var(--fs-sm); outline: none; text-align: center; }
.pager-jump input:focus { border-color: var(--primary-ink); box-shadow: 0 0 0 2px var(--ring); }
.pager-dot { color: var(--dim); padding: 0 var(--s-1); }

/* ===== 通用：可清除输入框 + 可搜索下拉 + 产品搜索（v0.6.5） ===== */
.clear-wrap { position: relative; display: inline-block; }
.clear-wrap input { padding-right: 26px; }
.clear-wrap textarea { padding-right: 26px; }
.clear-wrap textarea + .clear-x { top: 10px; transform: none; }
.clear-x { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; line-height: 16px; text-align: center; border: none; background: var(--line2); color: var(--text); border-radius: var(--r-pill); font-size: var(--fs-xs); cursor: pointer; padding: 0; display: none; z-index: var(--z-inline); }
.clear-x:hover { background: var(--err); color: var(--on-primary); }
.clear-wrap.has-val .clear-x { display: block; }

/* 可搜索下拉（增强 select） */
.ss-wrap { position: relative; width: 100%; }
.ss-box { position: relative; width: 100%; }
.ss-box input { width: 100%; padding-right: 26px; }
.ss-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--panel3); border: 1px solid var(--line2); border-radius: var(--r-lg); z-index: var(--z-pop); box-shadow: var(--sh-pop); display: none; }
.ss-item { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); cursor: pointer; color: var(--text); border-bottom: 1px solid var(--line); }
.ss-item:hover { background: var(--primary-soft); }
.ss-item .m { color: var(--primary-ink); font-weight: 600; }
.ss-empty { padding: 10px var(--s-3); color: var(--dim); font-size: var(--fs-sm); }

/* 产品明细行：商家编码搜索选择器 */
.prod-cell { position: relative; min-width: 220px; }
.prod-cell select { display: none; }
.pp-input { width: 100%; padding-right: 26px; }
.pp-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; min-width: 320px; max-height: 280px; overflow-y: auto; background: var(--panel3); border: 1px solid var(--line2); border-radius: var(--r-lg); z-index: var(--z-pop); box-shadow: var(--sh-pop); display: none; }
.pp-item { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); cursor: pointer; color: var(--text); border-bottom: 1px solid var(--line); }
.pp-item:hover { background: var(--primary-soft); }
.pp-item .nm { display: block; }
.pp-item .sc { display: block; color: var(--dim); font-size: var(--fs-xs); }
.pp-item .sc .m { color: var(--primary-ink); font-weight: 600; }
.pp-empty { padding: 10px var(--s-3); color: var(--dim); font-size: var(--fs-sm); }

/* ===== 商品选择弹窗（v0.6.8；色值全部 token 化，暗皮肤保留白卡片） ===== */
.gp-mask { position: fixed; inset: 0; background: var(--mask); z-index: var(--z-mask); display: flex; align-items: center; justify-content: center; }
.gp-box { width: 820px; max-width: 94vw; max-height: 82vh; background: var(--sheet-bg); color: var(--sheet-ink); border-radius: var(--r-lg); box-shadow: var(--sh-modal); display: flex; flex-direction: column; overflow: hidden; }
.gp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--sheet-line); font-weight: 700; font-size: var(--fs-lg); color: var(--sheet-ink); background: var(--sheet-head); }
.gp-close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--sheet-mut); cursor: pointer; }
.gp-close:hover { color: var(--sheet-ink); }
.gp-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) 18px; border-bottom: 1px solid var(--sheet-line); align-items: center; background: var(--sheet-bg); }
.gp-filters input { width: 160px; padding: 7px 10px; border: 1px solid var(--sheet-line2); border-radius: var(--r); font-size: var(--fs-sm); background: var(--sheet-bg); color: var(--sheet-ink); }
.gp-filters input:focus { outline: none; border-color: var(--primary-ink); box-shadow: 0 0 0 2px var(--ring); }
.gp-filters input::placeholder { color: var(--sheet-faint); }
.gp-list { flex: 1; overflow-y: auto; padding: var(--s-1) var(--s-3); min-height: 220px; background: var(--sheet-bg); }
.gp-item { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 10px; border-bottom: 1px dashed var(--sheet-line); font-size: var(--fs-sm); cursor: pointer; color: var(--sheet-ink); }
.gp-item:hover { background: var(--sheet-hover); }
.gp-item .nm { flex: 1; color: var(--sheet-ink); }
.gp-item .sc { color: var(--sheet-mut); font-size: var(--fs-xs); white-space: nowrap; }
.gp-item input[type=checkbox] { flex: none; accent-color: var(--primary-ink); }
.gp-empty { text-align: center; color: var(--sheet-mut); padding: 40px 0; font-size: var(--fs-sm); }
.gp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: var(--s-3) 18px; border-top: 1px solid var(--sheet-line); background: var(--sheet-head); }
.gp-count { margin-right: auto; font-size: var(--fs-sm); color: var(--sheet-accent); font-weight: 600; }

.iframe-wrap { height: calc(100vh - 120px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.menu-iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== v0.7.5 FA 图标与锁定 ===== */
.nav-group-title .ico i.fa-solid { font-size: 15px; width: 20px; text-align: center; }
.nav-group-title .ico .mi-ico { display: inline-block; min-width: 20px; text-align: center; }
.sidebar.collapsed .nav-group-title .ico i.fa-solid { font-size: 15px; }
.sidebar.collapsed .nav-group-title .ico { text-align: center; }
.sub i.fa-solid { margin-right: var(--s-1); font-size: var(--fs-sm); color: var(--dim); }
.mg-ico i.fa-solid { color: var(--primary-ink); }
.menu-ico-img.sm { width: 16px; height: 16px; object-fit: contain; vertical-align: -2px; }

/* ============================================================
   B-4（v0.7.45）：滚动条 / 弹层细节 / 减少动效
   —— 全部只引用 token，不含色值字面量
   ============================================================ */
.content::-webkit-scrollbar, .ss-list::-webkit-scrollbar, .pp-list::-webkit-scrollbar,
.gp-list::-webkit-scrollbar, .nav-sub::-webkit-scrollbar { scrollbar-color: var(--scrollbar) transparent; }
.content::-webkit-scrollbar, .ss-list::-webkit-scrollbar, .pp-list::-webkit-scrollbar, .gp-list::-webkit-scrollbar { width: var(--s-3); height: var(--s-3); }
.content::-webkit-scrollbar-thumb, .ss-list::-webkit-scrollbar-thumb, .pp-list::-webkit-scrollbar-thumb,
.gp-list::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: var(--r-pill); }
.content::-webkit-scrollbar-track, .ss-list::-webkit-scrollbar-track, .pp-list::-webkit-scrollbar-track,
.gp-list::-webkit-scrollbar-track { background: transparent; }

/* 弹层通用：统一的入场与描边（阴影值由皮肤 token 给，暗皮肤靠描边，见 SKIN-ASYM 块） */
.ss-list, .pp-list { border-width: 1px; border-style: solid; }
.gp-box { border: 1px solid var(--sheet-line); }
.tb-btn.on, .tb-btn[aria-pressed="true"] { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-soft); }
.skin-toggle i { transition: transform var(--t-mid) ease; }
.skin-toggle:hover i { transform: rotate(18deg); }

/* 无障碍：用户要求减少动效时全部关掉（皮肤切换、侧栏折叠、按钮 loading 之外） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   v0.7.47 M5：列设置孤岛 + 表头固定
   —— 表头固定是纯 CSS（不需要 React）；列隐藏由孤岛切 .col-hidden 类
   ============================================================ */
/* 表头吸顶：滚动容器是 .content（overflow-y:auto），所以 top 抵消掉它 20px 内边距 */
table.grid thead th { position: sticky; top: calc(var(--s-5) * -1); z-index: var(--z-under); }
table.grid thead th::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); }
.col-hidden { display: none !important; }
.island-slot { display: inline-flex; align-items: center; }
.island-cols-host { display: inline-flex; }
.island-cols-body { width: 260px; max-height: 320px; overflow-y: auto; }
.island-cols-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) 0; }
.island-cols-move { display: inline-flex; gap: var(--s-1); }
.island-cols-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.island-cols-tip { font-size: var(--fs-xs); color: var(--dim); }

/* ============================================================
   v0.7.49+ 凭证脱敏（D-20261007-4）：掩码展示 + 按需查看按钮
   —— 只引用 token，不含色值字面量
   ============================================================ */
.secret-field { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.secret-field input { flex: 1; min-width: 160px; }
.secret-field .sf-masked { background: var(--panel); color: var(--mut); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.secret-view { display: inline-flex; align-items: center; gap: var(--s-2); }
.secret-view .sv-val { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.sf-eye { background: var(--panel2); border: 1px solid var(--line2); color: var(--mut); border-radius: var(--r); padding: 6px 10px; font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; transition: border-color var(--t-fast) ease, color var(--t-fast) ease; }
.sf-eye:hover { border-color: var(--primary); color: var(--primary-ink); }
.sf-eye[disabled] { opacity: .45; cursor: not-allowed; }

/* SKIN-ASYM-BEGIN —— 全文件**唯一**允许按皮肤分别写规则的地方（_ui_gate.py 按此哨兵判定）。
   为什么必须存在：层级表达在两套皮肤下物理原理不同——亮皮肤可以用阴影，
   暗皮肤的黑色阴影压在 #0f1420 上几乎不可见，只能靠"更亮的边 + 更亮的底"表达浮起。
   除本块之外出现任何 [data-skin=...] 选择器，门禁直接判失败。 */
html[data-skin="dark"] .ss-list, html[data-skin="dark"] .pp-list { border-color: var(--line3); }
html[data-skin="dark"] .gp-box { border-color: var(--line3); box-shadow: var(--sh-modal), inset 0 0 0 1px var(--line3); }
html[data-skin="dark"] .card, html[data-skin="dark"] .stat, html[data-skin="dark"] .prod-card { border-color: var(--line2); }
/* SKIN-ASYM-END */