/* ==========================================================================
   主题层 · 浅色 / 深色（theme.css）
   --------------------------------------------------------------------------
   加载顺序：styles.css → …16 个业务样式… → polish.css → theme.css（本文件，最后）

   【设计原理】
   polish.css:22-105 定义了完整色阶 → polish.css:91-104 映射为语义别名
   （--ink/--bg/--surface/--line/--muted/--blue…）→ 其余 16 个业务 CSS 里有
   1018 处 var() 消费这些别名。因此**深色主题只需要翻转这一层 token**，
   业务界面自动跟随，无需逐个改业务规则。

   【中性色阶的翻转规则】
   按「语义角色」翻转，而不是按数值翻转：
     --n-0   浅色里是"最亮的表面"  → 深色里就是"最深的表面"
     --n-900 浅色里是"最深的主文字" → 深色里就是"最亮的主文字"
   这样 1018 处 var(--n-*) 无需任何改动即可保持正确对比关系。

   【默认策略】
   跟随系统 prefers-color-scheme。<html data-theme> 一旦被 /theme-init.js
   或用户手动设置，就以 data-theme 为准（特异性 0,1,1，稳定胜出）。
   ========================================================================== */

/* ==========================================================================
   00 浏览器原生配色
   styles.css:22 锁死了 color-scheme: light，不覆盖的话深色主题下
   <select> 下拉、日期控件、滚动条、表单自动填充都会保持浅色，非常显眼。
   ========================================================================== */
:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* ==========================================================================
   01 登录页专属 token（浅色取值）
   登录页原为纯深色视觉，这里抽成变量，深色在下一段覆盖，
   两套共用同一批选择器规则（见第 04 节）。
   ========================================================================== */
:root,
html[data-theme="light"] {
  --login-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  /* 浅色登录页原本看着"像一张白板"：veil 是 55% 的白色遮罩，把底下三处极光和点阵
     全冲掉了，而极光本身又只有 22%/14%/14%。这里把遮罩压到 32%、极光与点阵提上来，
     并把底色渐变末端拉开，恢复与深色版同款的层次，同时保持浅色的干净。 */
  --login-dots: radial-gradient(circle at 1px 1px, rgb(20 27 42 / 11%) 1px, transparent 0);
  --login-ambient-1: radial-gradient(46% 42% at 22% 18%, rgb(96 130 214 / 30%) 0%, rgb(96 130 214 / 0%) 60%);
  --login-ambient-2: radial-gradient(40% 40% at 84% 24%, rgb(18 128 111 / 20%) 0%, rgb(18 128 111 / 0%) 60%);
  --login-ambient-3: radial-gradient(56% 50% at 72% 98%, rgb(184 128 42 / 18%) 0%, rgb(184 128 42 / 0%) 60%);
  --login-bg-base: linear-gradient(150deg, #fbfcfe 0%, #eef3fb 46%, #dff1ec 100%);
  --login-blob: radial-gradient(circle, rgb(126 154 232 / 26%) 0%, transparent 66%);
  --login-veil: radial-gradient(120% 90% at 88% 30%, rgb(255 255 255 / 32%) 0%, transparent 58%);
  --login-sheen: linear-gradient(180deg, rgb(255 255 255 / 60%) 0%, transparent 22%);

  --login-fg: #141b2a;
  --login-fg-strong: #0b1220;
  --login-fg-muted: rgb(20 27 42 / 70%);
  --login-fg-soft: rgb(20 27 42 / 52%);
  --login-placeholder: rgb(20 27 42 / 40%);

  --login-glass-bg: rgb(255 255 255 / 68%);
  --login-glass-bg-hover: rgb(255 255 255 / 86%);
  --login-glass-bg-focus: rgb(255 255 255 / 97%);
  --login-glass-border: rgb(20 27 42 / 13%);
  --login-glass-border-hover: rgb(20 27 42 / 22%);
  --login-glass-inset: rgb(255 255 255 / 85%);
  --login-focus-border: rgb(77 103 155 / 88%);
  --login-focus-ring: rgb(77 103 155 / 18%);

  --login-brand-a: #5a78c4;
  --login-brand-b: #3f5da0;
  --login-brand-shadow: rgb(40 66 128 / 30%);
  --login-brand-inset: rgb(255 255 255 / 32%);

  --login-shop-bg: rgb(18 128 111 / 12%);
  --login-shop-bg-hover: rgb(18 128 111 / 22%);
  --login-shop-border: rgb(18 128 111 / 48%);
  --login-shop-border-hover: rgb(18 128 111 / 75%);
  --login-shop-fg: #0e6a5b;
  --login-shop-fg-hover: #0b5347;

  --login-chip-bg: rgb(255 255 255 / 58%);
  --login-chip-bg-hover: rgb(255 255 255 / 80%);
  --login-chip-border: rgb(20 27 42 / 13%);
  --login-chip-fg: rgb(20 27 42 / 80%);

  /* 复选框（自绘）：浅色 color-scheme 下浏览器原生未选中复选框的顶边描边
     几乎不可见——实测顶边与填充色对比度只有 Δ60，其余三边是 Δ411，
     于是"记住账号/记住密码"看上去缺了上边框。统一改为四边自绘描边。 */
  --login-cb-border: rgb(20 27 42 / 42%);
  --login-cb-border-hover: rgb(20 27 42 / 62%);
  --login-cb-bg: rgb(255 255 255 / 92%);

  --login-mark-bg: rgb(255 255 255 / 72%);
  --login-mark-border: rgb(20 27 42 / 15%);
  --login-mark-shadow: rgb(35 74 134 / 14%);

  --login-divider: rgb(20 27 42 / 13%);
  --login-error: #b42318;
  --login-env-dot: var(--amber-500);
}

/* ==========================================================================
   02 深色主题：翻转 token 层
   ========================================================================== */
html[data-theme="dark"] {
  /* 中性色阶：按语义角色翻转（0 = 最深表面，900 = 最亮文字） */
  --n-0:   #161c2b;
  --n-25:  #1a2131;
  --n-50:  #1e2637;
  --n-100: #232c40;
  --n-200: #2c3649;
  --n-300: #3a465c;
  --n-400: #4f5c75;
  --n-500: #6d7a92;
  --n-600: #8d99af;
  --n-700: #adb8ca;
  --n-800: #ced6e4;
  --n-900: #e9eff8;

  /* 品牌 墨黛蓝：整体提亮，保证在深色底上仍有足够对比 */
  --brand-50:  #1b2438;
  --brand-100: #212d47;
  --brand-200: #2a3a5c;
  --brand-300: #38507e;
  --brand-400: #4a6ba5;
  --brand-500: #6d8cc4;
  --brand-600: #89a4d2;
  --brand-700: #a8bce0;
  --brand-800: #c6d4ec;
  --brand-900: #e2eaf8;

  /* 辅助 松石青 */
  --teal-50:  #10241f;
  --teal-100: #143028;
  --teal-300: #2f7d6d;
  --teal-500: #35b39c;
  --teal-600: #4cc7b0;
  --teal-700: #7fdcc9;

  /* 强调 琥珀金 */
  --amber-50:  #2a2213;
  --amber-100: #3a2d15;
  --amber-300: #8a6a24;
  --amber-500: #d9a441;
  --amber-600: #e8b85c;
  --amber-700: #f2cf8c;

  /* 图表序列色（仪表盘 / 透视表 / 图例共用） */
  --series-1: #6d8cc4;
  --series-2: #35b39c;
  --series-3: #d9a441;
  --series-4: #9b8ae8;
  --series-5: #e0758c;
  --series-6: #8d99af;

  /* 语义色：深色一律改为「深背景 + 亮字」 */
  --ok-text: #6ee7b7;      --ok-bg: #10291f;       --ok-border: #1e5138;
  --warn-text: #fcd34d;    --warn-bg: #2e2410;     --warn-border: #5c4715;
  --bad-text: #fca5a5;     --bad-bg: #31161a;      --bad-border: #6b2a2f;
  --info-text: #93c5fd;    --info-bg: #10243a;     --info-border: #1e4a75;
  --neutral-text: #ced6e4; --neutral-bg: #232c40;  --neutral-border: #3a465c;

  /* 页面底色：比卡片表面更深一层，拉开层次 */
  --bg: #0f141e;

  /* 中间语义变量（由 polish.css 引入，这里整体翻转） */
  --surface-solid: #1a2130;
  --surface-2: #202839;
  --surface-3: #252e41;
  --shadow-ink-rgb: 0 0 0;
  --overlay: rgb(0 0 0 / 62%);

  /* 阴影：深色下改用纯黑并提高不透明度，否则卡片会"漂浮感全失" */
  --sd-1: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px -1px rgb(0 0 0 / 30%);
  --sd-2: 0 1px 2px rgb(0 0 0 / 36%), 0 8px 18px -10px rgb(0 0 0 / 55%);
  --sd-3: 0 2px 4px rgb(0 0 0 / 42%), 0 20px 40px -18px rgb(0 0 0 / 70%);
  --sd-brand: 0 8px 18px -8px rgb(0 0 0 / 62%);
  --sd-inset-top: inset 0 1px 0 rgb(255 255 255 / 6%);
  --ring: 0 0 0 3px rgb(109 140 196 / 30%);
  --ring-danger: 0 0 0 3px rgb(252 165 165 / 26%);

  /* —— 登录页（深色取值） —— */
  --login-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  --login-dots: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 6%) 1px, transparent 0);
  --login-ambient-1: radial-gradient(46% 42% at 22% 18%, rgb(96 130 214 / 44%) 0%, rgb(96 130 214 / 0%) 60%);
  --login-ambient-2: radial-gradient(40% 40% at 84% 24%, rgb(18 128 111 / 30%) 0%, rgb(18 128 111 / 0%) 60%);
  --login-ambient-3: radial-gradient(56% 50% at 72% 98%, rgb(184 128 42 / 16%) 0%, rgb(184 128 42 / 0%) 60%);
  --login-bg-base: linear-gradient(150deg, #17223a 0%, #1e2c4d 44%, #2a3d68 100%);
  --login-blob: radial-gradient(circle, rgb(126 154 232 / 26%) 0%, transparent 66%);
  --login-veil: radial-gradient(120% 90% at 88% 30%, rgb(0 0 0 / 26%) 0%, transparent 58%);
  --login-sheen: linear-gradient(180deg, rgb(255 255 255 / 3%) 0%, transparent 22%);

  --login-fg: #ffffff;
  --login-fg-strong: #ffffff;
  --login-fg-muted: rgb(255 255 255 / 72%);
  --login-fg-soft: rgb(255 255 255 / 56%);
  --login-placeholder: rgb(255 255 255 / 40%);

  --login-glass-bg: rgb(255 255 255 / 7%);
  --login-glass-bg-hover: rgb(255 255 255 / 10%);
  --login-glass-bg-focus: rgb(255 255 255 / 10%);
  --login-glass-border: rgb(255 255 255 / 18%);
  --login-glass-border-hover: rgb(255 255 255 / 30%);
  --login-glass-inset: rgb(255 255 255 / 6%);
  --login-focus-border: rgb(126 154 232 / 90%);
  --login-focus-ring: rgb(126 154 232 / 26%);

  --login-brand-a: #5a78c4;
  --login-brand-b: #3f5da0;
  --login-brand-shadow: rgb(40 66 128 / 46%);
  --login-brand-inset: rgb(255 255 255 / 22%);

  --login-shop-bg: rgb(18 128 111 / 26%);
  --login-shop-bg-hover: rgb(18 128 111 / 42%);
  --login-shop-border: rgb(45 190 160 / 60%);
  --login-shop-border-hover: rgb(45 190 160 / 85%);
  --login-shop-fg: #eafaf5;
  --login-shop-fg-hover: #ffffff;

  --login-chip-bg: rgb(255 255 255 / 7%);
  --login-chip-bg-hover: rgb(255 255 255 / 12%);
  --login-chip-border: rgb(255 255 255 / 15%);
  --login-chip-fg: rgb(255 255 255 / 82%);

  /* 复选框（自绘）：深色下原生绘制本就四边完整，这里仍走同一套自绘规则，
     保证两种主题的边框粗细、圆角、勾选态完全一致。 */
  --login-cb-border: rgb(255 255 255 / 46%);
  --login-cb-border-hover: rgb(255 255 255 / 70%);
  --login-cb-bg: rgb(255 255 255 / 10%);

  --login-mark-bg: rgb(255 255 255 / 16%);
  --login-mark-border: rgb(255 255 255 / 28%);
  --login-mark-shadow: rgb(0 0 0 / 22%);

  --login-divider: rgb(255 255 255 / 12%);
  --login-error: #ffb3b3;
  --login-env-dot: var(--amber-300);
}

/* ==========================================================================
   03 深色：需要「同特异性」覆盖的高特异性选择器
   dashboard-builder.css:3-12 与 polish.css:1007-1035 两组用了 :has()，
   特异性高达 0,3,0 / 0,4,0。这里用 [data-theme] 前缀把特异性顶到 0,4,0 / 0,5,0，
   与加载顺序无关地稳定胜出。
   ========================================================================== */
html[data-theme="dark"] .shell:has(.modular-overview) {
  --bg: #0f141e;
  --surface: #161c2b;
  --surface-muted: #1e2637;
  --line: #2c3649;
  --line-strong: #3a465c;
  --ink: #e9eff8;
  --muted: #8d99af;
  --blue: #6d8cc4;
  --blue-hover: #89a4d2;
  --blue-soft: #1b2438;
}
html[data-theme="dark"] .shell:has(.modular-overview) .workspace {
  background:
    radial-gradient(1100px 380px at 8% -8%, rgb(255 255 255 / 4%) 0%, rgb(255 255 255 / 0%) 62%),
    linear-gradient(180deg, #0f141e 0%, #141a26 340px, #141a26 100%);
}
html[data-theme="dark"] .shell:has(.modular-overview) .sidebar {
  background: linear-gradient(180deg, #161c2b 0%, #141a26 100%);
}
html[data-theme="dark"] .shell:has(.modular-overview) .nav-item.active {
  background: rgb(109 140 196 / 16%);
  color: #e9eff8;
}

/* 仪表盘热力/对比序列色（不走 --n-*，需单独给深色版） */
html[data-theme="dark"] .overview-dashboard {
  --dashboard-positive-1: #1e2637;
  --dashboard-positive-2: #2a3a5c;
  --dashboard-positive-3: #4a6ba5;
  --dashboard-positive-4: #89a4d2;
  --dashboard-negative-1: #2e2410;
  --dashboard-negative-2: #5c4715;
  --dashboard-negative-3: #a8792c;
  --dashboard-negative-4: #e8b85c;
}

/* 含 ID 的高特异性规则 */
html[data-theme="dark"] #toast.toast {
  background: #1a2130;
  border-color: var(--n-200);
  color: var(--n-800);
  box-shadow: var(--sd-3);
}
html[data-theme="dark"] #toast.toast.success { background: #1a2130; }
html[data-theme="dark"] #toast.toast.error { background: #1a2130; }
html[data-theme="dark"] #toast.toast.info { background: #1a2130; }

/* ==========================================================================
   04 登录页：两套主题共用同一批规则，配色全部走 --login-* 变量
   （polish.css 第 15 节原本是写死的深色，这里用 0,2,x 特异性整体接管）
   ========================================================================== */
.login-screen {
  background-image:
    var(--login-noise),
    var(--login-dots),
    var(--login-ambient-1),
    var(--login-ambient-2),
    var(--login-ambient-3),
    var(--login-bg-base);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: auto, 30px 30px, auto, auto, auto, auto;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
.login-screen::before {
  background: var(--login-blob);
}
.login-screen::after {
  background: var(--login-veil), var(--login-sheen);
}

.login-intro,
.login-intro .brand { color: var(--login-fg); }
.login-intro h1 { color: var(--login-fg-strong); }
.login-intro p { color: var(--login-fg-muted); }
.login-intro .brand-mark {
  /* 必须显式给文字色：polish.css 里这个标记是白色（深色登录页的遗产），
     而浅色主题下底是 72% 白 —— 不覆盖就成了白底白字，标记看着像个空白方块。 */
  color: var(--login-fg-strong);
  background: var(--login-mark-bg);
  border: 1px solid var(--login-mark-border);
  box-shadow: inset 0 1px 0 var(--login-glass-inset), 0 8px 20px var(--login-mark-shadow);
}

.login-steps span {
  color: var(--login-chip-fg);
  background: var(--login-chip-bg);
  border: 1px solid var(--login-chip-border);
}

.login-form h2 { color: var(--login-fg-strong); }
.login-form .field > span { color: var(--login-fg-muted); }
.login-form input {
  background: var(--login-glass-bg);
  border: 1px solid var(--login-glass-border);
  color: var(--login-fg);
  box-shadow: inset 0 1px 0 var(--login-glass-inset);
}
.login-form input::placeholder { color: var(--login-placeholder); }
.login-form input:hover { border-color: var(--login-glass-border-hover); }
.login-form input:focus {
  background: var(--login-glass-bg-focus);
  border-color: var(--login-focus-border);
  box-shadow: 0 0 0 3px var(--login-focus-ring);
}
.login-form .field-reveal { color: var(--login-fg-soft); }
.login-form .field-reveal:hover {
  color: var(--login-fg-strong);
  background: var(--login-chip-bg-hover);
}
.login-form .form-error { color: var(--login-error); }

.login-form .button.primary {
  color: #fff;
  border: 1px solid var(--login-glass-border);
  background: linear-gradient(180deg, var(--login-brand-a) 0%, var(--login-brand-b) 100%);
  box-shadow: 0 12px 26px var(--login-brand-shadow), inset 0 1px 0 var(--login-brand-inset);
}

.login-form .login-link { color: var(--login-fg-muted); }
.login-form .login-link:hover { color: var(--login-fg-strong); }
.login-signup { color: var(--login-fg-soft); }

.login-meta {
  border-top: 1px solid var(--login-divider);
  color: var(--login-fg-soft);
}
.login-env::before { background: var(--login-env-dot); }

.shop-button {
  color: var(--login-shop-fg);
  background: var(--login-shop-bg);
  border: 1px solid var(--login-shop-border);
}
.shop-button:hover {
  color: var(--login-shop-fg-hover);
  background: var(--login-shop-bg-hover);
  border-color: var(--login-shop-border-hover);
}

/* —— 登录页新增：记住账号 / 记住密码 —— */
.login-remember {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 16px;
}
.login-remember label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--login-fg-muted);
  cursor: pointer;
  user-select: none;
}
.login-remember input[type="checkbox"] {
  /* 自绘复选框（不再依赖浏览器原生绘制）。
     根因：浅色主题继承 :root 的 color-scheme: light，Chrome 对**未选中**的
     原生复选框只把顶边描边画成极浅色（实测顶边与填充色对比度 Δ60，
     左/右/下三边都是 Δ411），于是浅色下看上去"缺了上边框"，深色下正常。
     改成四边显式描边后，两套主题的边框完全一致。 */
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid var(--login-cb-border);
  border-radius: 3px;
  background-color: var(--login-cb-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
  cursor: pointer;
  flex: none;
  transition: border-color var(--feedback) var(--ease-out),
    background-color var(--feedback) var(--ease-out);
}
.login-remember input[type="checkbox"]:hover { border-color: var(--login-cb-border-hover); }
.login-remember input[type="checkbox"]:checked {
  border-color: var(--login-brand-a);
  background-color: var(--login-brand-a);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-5.9'/%3E%3C/svg%3E");
}
.login-remember input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--login-focus-border);
  outline-offset: 2px;
}
.login-remember label:hover { color: var(--login-fg-strong); }
.login-remember-help {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  color: var(--login-fg-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.login-remember-help:hover { color: var(--login-fg-strong); }

/* 账号输入框内的「× 取消记住」图标：复用密码眼睛按钮的定位与配色 */
.login-form .field-clear { color: var(--login-fg-soft); }
.login-form .field-clear:hover {
  color: var(--login-fg-strong);
  background: var(--login-chip-bg-hover);
}
.login-form .field-clear:focus-visible {
  outline: 0;
  box-shadow: var(--ring);
}

/* 一键登录（已记住账号时出现）：Ghost 次级按钮，不抢主按钮的视觉权重。
   没有可用令牌时按钮会让位给下面那行说明。 */
.login-quick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--login-glass-border);
  background: var(--login-chip-bg);
  color: var(--login-fg-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--feedback) var(--ease-out),
    background-color var(--feedback) var(--ease-out),
    border-color var(--feedback) var(--ease-out);
}
.login-quick:hover:not(:disabled) {
  color: var(--login-fg-strong);
  border-color: var(--login-glass-border-hover);
  background: var(--login-chip-bg-hover);
}
.login-quick:focus-visible {
  outline: 0;
  box-shadow: var(--ring);
}
.login-quick:disabled {
  opacity: 0.6;
  cursor: default;
}
.login-quick-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--login-fg-soft);
}

/* ==========================================================================
   05 主题切换按钮
   图标含义 = 将要切换到的目标主题：浅色显示月亮（点了变深），深色显示太阳。
   ========================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--feedback) var(--ease-out),
    background-color var(--feedback) var(--ease-out),
    border-color var(--feedback) var(--ease-out);
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--surface-muted);
}
.theme-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--ring);
}
.theme-toggle svg { width: 16px; height: 16px; }

html[data-theme="light"] .theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* 登录页右上角的切换按钮：浮在深色/浅色主视觉之上 */
.login-screen .theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  border-color: var(--login-glass-border);
  background: var(--login-chip-bg);
  color: var(--login-fg-muted);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.login-screen .theme-toggle:hover {
  color: var(--login-fg-strong);
  background: var(--login-chip-bg-hover);
  border-color: var(--login-glass-border-hover);
}

/* ==========================================================================
   06 深色：未被 token 覆盖到的模块补丁
   这些文件里 var() 用得少、硬编码多，靠 token 翻转兜不住，逐块补。
   ========================================================================== */

/* —— 排班模块 roster.css（125 处硬编码、0 处 var —— 主题泄漏最严重） —— */
html[data-theme="dark"] .rep-shell {
  background: var(--surface);
  border-color: var(--n-200);
  color: var(--ink);
}
html[data-theme="dark"] .rep-nav {
  background: var(--surface-solid);
  border-color: var(--n-200);
}
html[data-theme="dark"] .rep-nav nav .active {
  background: var(--brand-50);
  color: var(--brand-600);
}
html[data-theme="dark"] .rep-nav .rep-collapse {
  border-color: var(--n-200);
  color: var(--muted);
}
html[data-theme="dark"] .rep-button {
  border-color: var(--n-300);
  background: var(--surface-2);
  color: var(--ink);
}
html[data-theme="dark"] .rep-button.primary {
  background: var(--brand-400);
  border-color: var(--brand-400);
  color: #0f141e;
}
html[data-theme="dark"] .rep-shell input,
html[data-theme="dark"] .rep-shell select,
html[data-theme="dark"] .rep-dialog input,
html[data-theme="dark"] .rep-dialog select,
html[data-theme="dark"] .rep-dialog textarea {
  background: var(--surface-solid);
  border-color: var(--n-300);
  color: var(--ink);
}
html[data-theme="dark"] .rep-grid th,
html[data-theme="dark"] .rep-table th {
  background: var(--surface-2);
  border-color: var(--n-200);
  color: var(--muted);
}
html[data-theme="dark"] .rep-grid th.today { background: var(--brand-50); }
html[data-theme="dark"] .rep-table td,
html[data-theme="dark"] .rep-grid td {
  border-color: var(--n-200);
  background: var(--surface);
}
html[data-theme="dark"] .rep-entry em { color: var(--muted); }
html[data-theme="dark"] .rep-person { color: var(--ink); }
html[data-theme="dark"] .rep-category .active {
  background: var(--brand-50);
  color: var(--brand-600);
  border-color: var(--brand-300);
}
html[data-theme="dark"] .rep-more {
  border-color: var(--n-200);
  color: var(--muted);
}
html[data-theme="dark"] .rep-muted,
html[data-theme="dark"] .rep-calendar-footer { color: var(--muted); }
html[data-theme="dark"] .rep-recycle-bar {
  border-top-color: var(--n-200);
  background: var(--surface-2);
}
html[data-theme="dark"] .rep-add-cell { color: var(--muted); }
html[data-theme="dark"] .rep-add-cell:hover {
  background: var(--brand-50);
  border-color: var(--brand-400);
  color: var(--brand-600);
}
html[data-theme="dark"] .rep-grid .today {
  background: var(--brand-50) !important;
  box-shadow: inset 0 0 0 1px rgb(109 140 196 / 30%);
}

/* —— 硬编码 + !important，必须用同等 !important 反打 —— */
html[data-theme="dark"] .dw-error,
html[data-theme="dark"] .dw-warning { color: var(--warn-text) !important; }
html[data-theme="dark"] .rep-drop {
  outline: 2px solid var(--brand-400) !important;
  background-image: linear-gradient(rgb(109 140 196 / 12%), rgb(109 140 196 / 12%)) !important;
}

/* —— 仪表盘 dashboard.css —— */
html[data-theme="dark"] .overview-dashboard {
  background: var(--surface);
  border-color: var(--n-200);
  color: var(--ink);
}

/* —— styles.css 里 polish 未接管的角落 —— */
html[data-theme="dark"] .drop-zone {
  background: var(--surface-muted);
  border-color: var(--n-300);
  color: var(--muted);
}
html[data-theme="dark"] .inline-notice {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}
html[data-theme="dark"] .schedule-task {
  background: var(--surface-2);
  border-color: var(--n-200);
  color: var(--ink);
}
html[data-theme="dark"] .stock-block {
  background: var(--surface-2);
  border-color: var(--n-200);
  color: var(--ink);
}
html[data-theme="dark"] .toast.error { color: var(--bad-text); }

/* —— 客户商城（C 端）与登录/后台同源，一并跟随，避免出现半明半暗 —— */
html[data-theme="dark"] .shop-shell {
  --shop-neutral: #141a26;
  --shop-ink: #e9eff8;
  --shop-muted: #8d99af;
  --shop-border: #2c3649;
  --ink: #e9eff8;
  --muted: #8d99af;
  --line: #2c3649;
  background: #0f141e;
}
html[data-theme="dark"] .shop-header,
html[data-theme="dark"] .shop-card,
html[data-theme="dark"] .shop-panel {
  background: var(--surface-solid);
  border-color: var(--n-200);
}

/* ==========================================================================
   07 深色补充：让"留白"与"分隔"在暗底上仍然成立
   ========================================================================== */
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] hr,
html[data-theme="dark"] .divider { border-color: var(--n-200); }
html[data-theme="dark"] ::selection { background: rgb(109 140 196 / 38%); }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--n-300);
  border-radius: var(--r-pill);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--n-400); }

/* 打印时一律回到浅色，保证纸质可读 */
@media print {
  html[data-theme="dark"] { color-scheme: light; }
}

/* ==========================================================================
   08 深色：经营总览与顶栏的「反亮面」补丁
   --------------------------------------------------------------------------
   这些选择器在源样式里写死了浅色底面（未走 --n-*），token 翻转兜不住，
   会在深色底上形成刺眼的亮块。只补深色，浅色保持既有观感不变。
   ========================================================================== */

/* —— 顶栏：搜索框与环境徽标 —— */
html[data-theme="dark"] .workspace-search {
  background: rgb(255 255 255 / 7%);
  border-color: var(--n-200);
}
html[data-theme="dark"] .workspace-search:focus-within {
  background: rgb(255 255 255 / 12%);
}
html[data-theme="dark"] .workspace-search kbd { border-color: var(--n-300); }
html[data-theme="dark"] .environment {
  background: var(--warn-bg);
  color: var(--warn-text);
  border: 1px solid var(--warn-border);
}

/* —— 经营总览：热力图「无数据」格 —— */
html[data-theme="dark"] .overview-dashboard .zero {
  background-color: var(--surface-2);
}

/* —— 经营总览：模块化明细表（搜索框 / 表头） —— */
html[data-theme="dark"] .md-table-search input {
  background: var(--surface-solid);
  border-color: var(--n-300);
  color: var(--ink);
}
html[data-theme="dark"] table.md-table th,
html[data-theme="dark"] .md-data-details table th {
  background: var(--surface-2);
  border-color: var(--n-200);
  color: var(--muted);
}

/* —— 通用表格表头（operations / demand / 员工工作台） —— */
html[data-theme="dark"] .operations-section table thead th,
html[data-theme="dark"] .dw-table th,
html[data-theme="dark"] .employee-workdesk th {
  background: var(--surface-2);
  border-color: var(--n-200);
  color: var(--muted);
}
html[data-theme="dark"] .rep-grid th,
html[data-theme="dark"] .rep-table th { color: var(--muted); }

/* —— 仪表盘：卡片、快捷入口、员工工作台 —— */
html[data-theme="dark"] .dashboard-today-item,
html[data-theme="dark"] .employee-workdesk {
  background: var(--surface);
  border-color: var(--n-200);
  color: var(--ink);
}
html[data-theme="dark"] .dashboard-shortcuts {
  background: var(--n-200);
  border-color: var(--n-200);
}
html[data-theme="dark"] .dashboard-shortcut {
  background: var(--surface-2);
  color: var(--ink);
}
/* 次要文字：源样式写死浅色值，深底下统一走 --muted */
html[data-theme="dark"] .overview-dashboard .page-head p,
html[data-theme="dark"] .dashboard-section-title > span,
html[data-theme="dark"] .dashboard-today-count span,
html[data-theme="dark"] .dashboard-today-name,
html[data-theme="dark"] .dashboard-composition-total span,
html[data-theme="dark"] .dashboard-composition-total strong {
  color: var(--muted);
}
html[data-theme="dark"] .dashboard-composition-total strong { color: var(--ink); }

/* —— 客户商城深色下的中性底面 —— */
html[data-theme="dark"] .shop-header,
html[data-theme="dark"] .shop-card,
html[data-theme="dark"] .shop-panel {
  color: var(--ink);
}

/* —— 经营总览「经典视图」卡片与统计列表（overview 局部覆写过 --surface） —— */
html[data-theme="dark"] .shell:has(.modular-overview) .dashboard-classic,
html[data-theme="dark"] .shell:has(.modular-overview) .dashboard-stat-list,
html[data-theme="dark"] .dashboard-classic,
html[data-theme="dark"] .dashboard-stat-list,
html[data-theme="dark"] .dashboard-ledger {
  background: var(--surface);
  border-color: var(--n-200);
  color: var(--ink);
}
html[data-theme="dark"] .dashboard-classic .dashboard-stat-list strong { color: var(--ink); }
html[data-theme="dark"] .dashboard-classic .dashboard-stat-list dt { color: var(--muted); }

/* ==========================================================================
   09 补充：模块深色覆盖
   --------------------------------------------------------------------------
   补的是业务样式里「写死浅色、token 翻转兜不住」的块：顶栏白条、表格斑马纹、
   侧栏激活态渐变、dashboard 次要文字、客户商城白底卡片、排班自成一体的灰阶、
   确认单的橙表头与纯黑边框、polish 里的半透明亮底等。
   统一加 html[data-theme="dark"] 前缀保证特异性；只影响深色，浅色观感不变。
   已被 polish.css（用 token 重写）或本文件 06/08 节覆盖的项不再重复。
   ========================================================================== */

/* A 顶栏：polish.css:329 .topbar 写死 rgb(255 255 255 / 82%) —— 深色下最显眼的白条 */
html[data-theme="dark"] .topbar {
  background: rgb(22 28 43 / 82%);
}

/* B 表格斑马纹：polish.css:782 偶数行、polish.css:1309 排班偶数行、styles.css:507 悬停行、styles.css:937 子行 */
html[data-theme="dark"] tbody tr:nth-child(even) td { background: rgb(255 255 255 / 4%); }
html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] tbody tr:hover td { background: var(--brand-50); }
html[data-theme="dark"] .rep-project-row:nth-child(even),
html[data-theme="dark"] .rep-seat-row:nth-child(even) { background: rgb(255 255 255 / 4%); }
html[data-theme="dark"] .line-child { background: var(--surface-2); }

/* C 侧栏：polish.css:294 .nav-item.active 渐变右端写死 rgb(239 243 251 / 30%)
   （styles.css:253/303/309/337 的 #364b6b/#e4ebf6 已被 polish.css:232-326 用 token 接管，无需重复） */
html[data-theme="dark"] .sidebar .nav-item.active {
  background: linear-gradient(90deg, var(--brand-100) 0%, rgb(109 140 196 / 16%) 100%);
  color: var(--brand-800);
}

/* D dashboard.css：19 处写死 #5d6b80 的次要文字 + 统计值/标题的深色字 + 白底容器 */
html[data-theme="dark"] .dashboard-today-flags button,
html[data-theme="dark"] .dashboard-shortcut small,
html[data-theme="dark"] .dashboard-stat dt,
html[data-theme="dark"] .dashboard-stat small,
html[data-theme="dark"] .dashboard-panel-subtitle,
html[data-theme="dark"] .dashboard-heat-summary,
html[data-theme="dark"] .dashboard-heat-months,
html[data-theme="dark"] .dashboard-heat-weekdays,
html[data-theme="dark"] .dashboard-heat-legend,
html[data-theme="dark"] .dashboard-metric-note,
html[data-theme="dark"] .dashboard-state-list small,
html[data-theme="dark"] .dashboard-table-note,
html[data-theme="dark"] .dashboard-readiness summary small,
html[data-theme="dark"] .dashboard-unavailable p { color: var(--n-700); }
html[data-theme="dark"] .dashboard-shortcut strong,
html[data-theme="dark"] .dashboard-stat dd,
html[data-theme="dark"] .dashboard-heat-summary strong,
html[data-theme="dark"] .dashboard-day-head strong { color: var(--n-900); }
html[data-theme="dark"] .dashboard-today-flags .has-overdue { color: var(--bad-text); }
html[data-theme="dark"] .dashboard-today-flags .has-unknown { color: var(--warn-text); }
/* 指标切换条（#f4f6fa 底 + 选中白块）与快捷入口的 hover/按压态 */
html[data-theme="dark"] .dashboard-metric-tabs { background: var(--surface-2); border-color: var(--n-200); }
html[data-theme="dark"] .dashboard-metric-tabs button { color: var(--n-700); }
html[data-theme="dark"] .dashboard-metric-tabs button:hover { background: var(--n-100); color: var(--brand-600); }
html[data-theme="dark"] .dashboard-metric-tabs button[aria-pressed="true"],
html[data-theme="dark"] .dashboard-metric-tabs button.active {
  background: var(--surface-3);
  color: var(--brand-800);
  box-shadow: var(--sd-1);
}
html[data-theme="dark"] .dashboard-metric-tabs button.working { background: var(--n-100); }
html[data-theme="dark"] .dashboard-shortcut:hover { background: var(--surface-3); }
html[data-theme="dark"] .dashboard-shortcut:active,
html[data-theme="dark"] .dashboard-shortcut.working { background: var(--n-100); }
/* 热力图「无数据」格与几处白底容器 */
html[data-theme="dark"] .overview-dashboard .unknown { background-color: var(--surface-2); border-color: var(--n-400); }
html[data-theme="dark"] .dashboard-day-detail { background: var(--surface); }
html[data-theme="dark"] .dashboard-task-filter { background: var(--surface-2); }
html[data-theme="dark"] .overview-dashboard .dashboard-unavailable { background: var(--surface-2); }
html[data-theme="dark"] .overview-dashboard .color-4 { background: #a8a2c4; }
/* 经营总览下方「员工工作台」（employee-workdesk.css:4/21/23 写死 #536378 / #8b3c2e） */
html[data-theme="dark"] .wd-heading p,
html[data-theme="dark"] .wd-footnote,
html[data-theme="dark"] .wd-asof,
html[data-theme="dark"] .wd-result,
html[data-theme="dark"] .employee-workdesk td small { color: var(--n-600); }
html[data-theme="dark"] .wd-blockers { color: var(--bad-text); }

/* E storefront.css 客户商城：导航带 / 部门 / 商品卡 / 图片位写死白底，正文灰字偏暗 */
html[data-theme="dark"] .shop-navigation-band { background: var(--surface-solid); border-block-color: var(--n-200); }
html[data-theme="dark"] .shop-departments,
html[data-theme="dark"] .shop-shell .shop-categories,
html[data-theme="dark"] .shop-shell .shop-cart-button,
html[data-theme="dark"] .shop-shell .shop-products .product-card {
  background: var(--surface-solid);
  border-color: var(--n-200);
}
html[data-theme="dark"] .shop-shell .shop-products .product-card:hover { border-color: var(--n-300); }
html[data-theme="dark"] .shop-product-media,
html[data-theme="dark"] .shop-shell .shop-products .product-image,
html[data-theme="dark"] .shop-shell .shop-detail-layout .shop-detail-image,
html[data-theme="dark"] .cart-image { background: var(--surface-2); border-color: var(--n-200); }
html[data-theme="dark"] .cart-kit-content { border-block-color: var(--n-200); }
html[data-theme="dark"] .shop-preview-notice {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}
html[data-theme="dark"] .shop-feature { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .shop-feature.feature-1 { background: var(--warn-bg); color: var(--warn-text); }
html[data-theme="dark"] .shop-shell .shop-categories button { color: var(--n-700); }
html[data-theme="dark"] .shop-shell .shop-categories button.active {
  background: rgb(173 75 49 / 26%);
  color: #eda892;
}
html[data-theme="dark"] .shop-navigation-note,
html[data-theme="dark"] .shop-search > svg,
html[data-theme="dark"] .hero-price > span:last-child,
html[data-theme="dark"] .shop-rental-bar > .save-state,
html[data-theme="dark"] .shop-estimate small,
html[data-theme="dark"] .detail-image-caption,
html[data-theme="dark"] .cart-image .image-missing { color: var(--n-600); }
html[data-theme="dark"] .shop-shell .shop-estimate { color: var(--n-600); border-top-color: var(--n-200); }
html[data-theme="dark"] .hero-copy > p,
html[data-theme="dark"] .shop-shell .page-head p { color: var(--n-700); }
html[data-theme="dark"] .hero-price { color: var(--n-800); }
html[data-theme="dark"] .shop-shell .shop-business-switch select { color: var(--ink); }
/* storefront.css:2-13 在 .shop-shell 里重定义了一套浅色局部 token，深色下要把它们拉回暗色，
   否则 shop.css:361「拍摄用途」选中按钮、搜索建议 hover 等一票 var(--blue-soft) 仍是浅蓝块 */
html[data-theme="dark"] .shop-shell {
  --blue: #89a4d2;
  --blue-hover: #a8bce0;
  --blue-soft: var(--brand-50);
}
html[data-theme="dark"] .shop-hero { background: linear-gradient(135deg, var(--n-100) 0%, var(--surface-2) 100%); }
html[data-theme="dark"] .shop-shell .hero-copy h1 { color: var(--n-900); }
html[data-theme="dark"] .hero-product > span { color: var(--n-800); }
html[data-theme="dark"] .hero-product small { color: var(--n-600); }
html[data-theme="dark"] .hero-price strong { color: #f0a58e; }
/* 品牌名 / 导航 / 分类标题在 storefront.css:66-141 写死深色字，暗底上几乎不可见 */
html[data-theme="dark"] .shop-shell .shop-brand { color: var(--n-900); }
html[data-theme="dark"] .shop-brand small { color: var(--n-600); }
html[data-theme="dark"] .shop-shell .shop-account .button.text { color: var(--n-700); }
html[data-theme="dark"] .shop-business-switch > span { color: var(--n-600); }
html[data-theme="dark"] .shop-shell .shop-nav button { color: var(--n-600); }
html[data-theme="dark"] .shop-shell .shop-nav button.active { color: #eda892; }
html[data-theme="dark"] .shop-departments summary { color: var(--n-800); }
html[data-theme="dark"] .rental-label { color: var(--n-800); }
html[data-theme="dark"] .rental-label span { color: var(--n-600); }
html[data-theme="dark"] .shop-feature small { color: var(--n-600); }
html[data-theme="dark"] .shop-feature.feature-1 small { color: var(--warn-text); opacity: .8; }
html[data-theme="dark"] .shop-shell .shop-rental-bar,
html[data-theme="dark"] .shop-shell .shop-controls:not(.shop-rental-bar):not(.cart-rental-plan) {
  background: var(--surface-solid);
  border-color: var(--n-200);
}
html[data-theme="dark"] .shop-shell .shop-search { background: var(--surface-2); }
html[data-theme="dark"] .shop-shell .shop-search input { color: var(--ink); }
/* 主按钮在深色下用亮品牌蓝底，配深字保证对比（storefront.css:29/114 原本是白字） */
html[data-theme="dark"] .shop-shell .button.primary,
html[data-theme="dark"] .shop-shell .hero-action { color: #10151f; }

/* F roster.css 排班：0 处 var、自成灰阶 —— theme.css 06 节已补约 20 条，这里补齐剩余 */
html[data-theme="dark"] .rep-nav h1,
html[data-theme="dark"] .rep-nav-user,
html[data-theme="dark"] .rep-tabs { border-color: var(--n-200); }
html[data-theme="dark"] .rep-nav nav button { color: var(--n-700); }
html[data-theme="dark"] .rep-nav nav button:hover { background: var(--n-100); }
html[data-theme="dark"] .rep-nav-user span,
html[data-theme="dark"] .rep-month-actions > span,
html[data-theme="dark"] .rep-weekbar,
html[data-theme="dark"] .rep-section-head p,
html[data-theme="dark"] .rep-hint,
html[data-theme="dark"] .rep-stats span,
html[data-theme="dark"] .rep-settlement-groups span,
html[data-theme="dark"] .rep-editor-entry em,
html[data-theme="dark"] .rep-add-pending { color: var(--n-600); }
html[data-theme="dark"] .rep-collapse { background: transparent; }
html[data-theme="dark"] .rep-button.text { color: var(--brand-600); }
html[data-theme="dark"] .rep-button.danger { color: var(--bad-text); }
html[data-theme="dark"] .rep-button.arrow { color: var(--n-700); }
html[data-theme="dark"] .rep-grid-wrap,
html[data-theme="dark"] .rep-table-wrap { background: var(--surface-solid); border-color: var(--n-200); }
html[data-theme="dark"] .rep-grid th strong { color: var(--n-900); }
html[data-theme="dark"] .rep-grid th.today strong { color: var(--brand-700); }
html[data-theme="dark"] .rep-project-row > td { border-bottom-color: var(--n-200); }
html[data-theme="dark"] .rep-card-title { color: var(--n-900); }
html[data-theme="dark"] .rep-subtitle,
html[data-theme="dark"] .rep-more summary,
html[data-theme="dark"] .rep-logout { color: var(--n-700); }
html[data-theme="dark"] .rep-logout { background: transparent; }
html[data-theme="dark"] .rep-entry { color: var(--ink); }
html[data-theme="dark"] .rep-entry small { color: var(--n-700); }
html[data-theme="dark"] .rep-entry em { background: rgb(255 255 255 / 8%); }
html[data-theme="dark"] .rep-entry.pending { color: var(--n-600); }
html[data-theme="dark"] .rep-entry.external > span { color: var(--brand-600); }
html[data-theme="dark"] .rep-entry button:hover { color: var(--bad-text); }
/* 座位行（浅绿）/ 请假行（浅灰）/ 人员文字带 !important */
html[data-theme="dark"] .rep-grid .rep-seat-row td { background: var(--ok-bg); border-color: var(--ok-border); }
html[data-theme="dark"] .rep-grid .rep-leave-row td { background: var(--surface-2); }
html[data-theme="dark"] .rep-leave-row .rep-pool-title { color: var(--n-600); }
html[data-theme="dark"] .rep-pool-title span { color: var(--amber-600); }
html[data-theme="dark"] .rep-leave-row .rep-person { color: var(--n-600) !important; }
html[data-theme="dark"] .rep-availability.rep-button { color: var(--ok-text); }
html[data-theme="dark"] .rep-role-list { background: var(--surface-solid); border-color: var(--n-200); }
html[data-theme="dark"] .rep-role-row { border-bottom-color: var(--n-200); }
html[data-theme="dark"] .rep-stats > div { background: var(--surface-solid); border-color: var(--n-200); }
html[data-theme="dark"] .rep-settlement-groups > div { background: var(--info-bg); border-color: var(--info-border); }
html[data-theme="dark"] .rep-status { color: var(--ok-text); }
html[data-theme="dark"] .rep-tag { background: var(--neutral-bg); color: var(--neutral-text); }
html[data-theme="dark"] .rep-dialog { background: var(--surface-solid); color: var(--ink); }
html[data-theme="dark"] .rep-dialog > header,
html[data-theme="dark"] .rep-dialog footer { border-color: var(--n-200); }
html[data-theme="dark"] .rep-project-picker { background: var(--surface-2); border-color: var(--n-300); }
html[data-theme="dark"] .rep-people-editor { background: var(--surface-2); border-color: var(--n-200); }
html[data-theme="dark"] .rep-editor-entries { background: var(--surface-solid); border-color: var(--n-300); }
html[data-theme="dark"] .rep-green { color: var(--ok-text); }
html[data-theme="dark"] .rep-editor-seat { background: var(--ok-bg); border-color: var(--ok-border); }
html[data-theme="dark"] .rep-editor-seat button { background: rgb(110 231 183 / 14%); color: var(--ok-text); }
html[data-theme="dark"] .rep-search-results button,
html[data-theme="dark"] .rep-replace-panel [data-pick] { background: var(--surface-solid); border-color: var(--n-200); }
html[data-theme="dark"] .rep-search-results small,
html[data-theme="dark"] .rep-replace-panel small { color: var(--n-600); }
html[data-theme="dark"] .rep-error { color: var(--bad-text); }
html[data-theme="dark"] .rep-replace-panel,
html[data-theme="dark"] .rep-color-pop { background: var(--surface-solid); border-color: var(--n-200); }

/* G confirmation.css 确认单：#f8cbad 橙表头 + #000/#222 纯黑边框 + 整页白纸 */
html[data-theme="dark"] .confirmation-scroll { background: var(--surface-muted); }
html[data-theme="dark"] .confirmation-paper { background: var(--surface); border-color: var(--n-300); color: var(--ink); }
html[data-theme="dark"] .confirmation-banner,
html[data-theme="dark"] .confirmation-meta-row,
html[data-theme="dark"] .confirmation-daily { border-color: var(--n-300); }
html[data-theme="dark"] .confirmation-number,
html[data-theme="dark"] .confirmation-status,
html[data-theme="dark"] .confirmation-column-head,
html[data-theme="dark"] .confirmation-paper .confirmation-column-head > th,
html[data-theme="dark"] .confirmation-signatures,
html[data-theme="dark"] .confirmation-paper .confirmation-signatures > td,
html[data-theme="dark"] .confirmation-total-row,
html[data-theme="dark"] .quote-workbench .quote-lines .confirmation-column-head th {
  background: var(--brand-100);
  color: var(--n-800);
}
html[data-theme="dark"] .confirmation-column-head,
html[data-theme="dark"] .confirmation-category,
html[data-theme="dark"] .confirmation-total-row { border-block-color: var(--n-300); }
html[data-theme="dark"] .confirmation-category,
html[data-theme="dark"] .confirmation-paper .confirmation-category > th,
html[data-theme="dark"] .confirmation-daily h3,
html[data-theme="dark"] .quote-workbench .quote-lines .confirmation-category th {
  background: var(--warn-bg);
  color: var(--warn-text);
}
html[data-theme="dark"] .confirmation-daily h3 { border-block-color: var(--n-300); }
html[data-theme="dark"] .confirmation-meta-row > div > span,
html[data-theme="dark"] .confirmation-meta-row > div > b { border-right-color: var(--n-200); }
html[data-theme="dark"] .confirmation-title h2 { color: var(--n-800); }
html[data-theme="dark"] .confirmation-table .quantity-multiple { background: var(--n-200); }
html[data-theme="dark"] .confirmation-table .numeric:hover { border-color: var(--n-300); background: var(--surface-3); }
html[data-theme="dark"] .confirmation-table .numeric:focus { outline-color: var(--brand-400); background: var(--surface-3); }
html[data-theme="dark"] .confirmation-table .numeric[readonly],
html[data-theme="dark"] .confirmation-table .quantity-unit,
html[data-theme="dark"] .confirmation-price-rule,
html[data-theme="dark"] .confirmation-editor-note { color: var(--n-700); }
html[data-theme="dark"] .confirmation-note { color: var(--series-4); }
html[data-theme="dark"] .confirmation-final-total { color: var(--bad-text); }
html[data-theme="dark"] .confirmation-daily h4 { background: var(--surface-3); }
html[data-theme="dark"] .confirmation-editor-note { border-bottom-color: var(--n-200); }
html[data-theme="dark"] .kit-source-raw { background: var(--surface-2); border-color: var(--n-200); }
html[data-theme="dark"] .kit-edit-row input:not([type="checkbox"]) { border-color: var(--n-300); }

/* H polish.css 半透明亮底残留：空状态 / 工具条 / 新增面板 / 步骤条 / 拖放区 / 图片位 / 底栏渐变 */
html[data-theme="dark"] .empty {
  background: radial-gradient(60px 60px at 50% 30%, rgb(255 255 255 / 5%), transparent 70%);
}
html[data-theme="dark"] .md-toolbar { background: rgb(26 33 48 / 88%); }
html[data-theme="dark"] .quote-steps { background: rgb(26 33 48 / 90%); }
html[data-theme="dark"] .md-add-panel,
html[data-theme="dark"] .dw-drop { background: rgb(255 255 255 / 5%); color: var(--n-600); }
html[data-theme="dark"] .md-add-panel:hover,
html[data-theme="dark"] .dw-drop:hover,
html[data-theme="dark"] .dw-drop.is-over { background: var(--brand-50); color: var(--brand-700); }
html[data-theme="dark"] .image-missing {
  background: repeating-linear-gradient(135deg, var(--n-100) 0 8px, var(--n-200) 8px 16px);
  color: var(--n-600);
}
html[data-theme="dark"] .product-image {
  background: linear-gradient(160deg, var(--surface-3) 0%, var(--surface-2) 100%);
}
html[data-theme="dark"] .quote-bottom,
html[data-theme="dark"] .quote-action-bar {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 100%);
}
html[data-theme="dark"] .rep-weekbar {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-2));
}

/* I styles.css 其余：pre 代码块白底、商品卡 hover 白底
   （101 聚焦环 / 156 按钮 hover / 237 侧栏底 / 575 遮罩 / 782 浮层阴影 / 818 价格 /
     968 底栏 / 1165-1173 信息条 / 1215 库存块 / 1445-1454 抽屉阴影
     均已被 polish.css 的 token 规则或本文件 06 节接管，不重复覆盖） */
html[data-theme="dark"] pre { background: var(--surface-2); color: var(--n-800); }
html[data-theme="dark"] .product-card:hover { background: var(--surface-3); }

/* ------------------------------------------------------------------ 10 页面加载骨架
   页面数据到达前先用与目标结构近似的灰条占位，避免"顶栏侧栏已渲染、中间一大片空白"
   的割裂感（实测经营总览要等约 2.7 秒）。全部走中性色令牌，深色下自动跟随。
   只做视觉占位：整块 aria-hidden，且尊重"减少动态效果"偏好。 */
.page-skeleton { display: flex; flex-direction: column; gap: 16px; }
.page-skeleton .sk-head {
  display: flex; align-items: center; gap: 12px; padding: 2px 0 6px;
}
.page-skeleton .sk-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.page-skeleton .sk-card,
.page-skeleton .sk-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel, 16px);
  background: var(--surface);
}
.page-skeleton .sk-card {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
}
.page-skeleton .sk-panel {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px;
}
.page-skeleton .sk-row {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: 12px;
}
.page-skeleton .sk-line {
  height: 12px; border-radius: 6px; background: var(--n-100);
}
.page-skeleton .sk-title { width: 132px; height: 22px; border-radius: 7px; }
.page-skeleton .sk-sub { width: 236px; }
.page-skeleton .sk-action {
  margin-left: auto; width: 116px; height: 30px;
  border-radius: var(--radius-control, 10px); background: var(--n-100);
}
.page-skeleton .sk-sm { width: 62px; }
.page-skeleton .sk-lg { width: 104px; height: 22px; border-radius: 7px; }
.page-skeleton .sk-md { width: 190px; height: 15px; }
.page-skeleton .sk-w2 { width: 72%; }
.page-skeleton .sk-w3 { width: 48%; }
.page-skeleton .sk-line,
.page-skeleton .sk-action {
  animation: sk-pulse 1.4s ease-in-out infinite;
}
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (max-width: 1100px) {
  .page-skeleton .sk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .page-skeleton .sk-cards { grid-template-columns: minmax(0, 1fr); }
  .page-skeleton .sk-row { grid-template-columns: 1.6fr 1fr; }
  .page-skeleton .sk-w3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-skeleton .sk-line,
  .page-skeleton .sk-action { animation: none; }
}

/* 登录成功进入后台时给外壳一次很轻的淡入：登录页是整块替换掉的，
   没有过渡会显得"跳一下"。只在 showShell 重建 .shell 时触发一次，
   之后切换业务页面只换 #main，不会反复播放。 */
.shell { animation: shell-in 200ms var(--ease-out, ease-out) both; }
@keyframes shell-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shell { animation: none; }
}

/* ----------------------------------------------- 11 经营总览：可展开的次要区块
   总览改成「仪表盘优先」后，两块待办不再通栏平铺，而是收进可展开面板，
   让主次分明、首屏可控。样式全部走令牌，深浅主题自动跟随。 */
.overview-fold-group { display: flex; flex-direction: column; gap: 12px; }
.overview-fold {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel, 16px);
  background: var(--surface);
  overflow: hidden;
}
.overview-fold > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; cursor: pointer;
  font-weight: 600; color: var(--ink);
  list-style: none;
}
.overview-fold > summary::-webkit-details-marker { display: none; }
.overview-fold > summary > span { flex: 0 0 auto; }
.overview-fold > summary > small {
  font-weight: 400; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 自绘展开箭头：默认三角在深色下颜色不可控，且各浏览器样式不一致 */
.overview-fold > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 7px; height: 7px;
  border-right: 2px solid var(--n-500);
  border-bottom: 2px solid var(--n-500);
  transform: rotate(45deg);
  transition: transform 160ms var(--ease-out, ease-out);
}
.overview-fold[open] > summary::after { transform: rotate(-135deg); }
.overview-fold[open] > summary { border-bottom: 1px solid var(--line); }
.overview-fold > summary:hover { background: var(--surface-2); }
.overview-fold > summary:focus-visible {
  outline: 2px solid var(--brand-500); outline-offset: -2px;
}
@media (max-width: 640px) {
  .overview-fold > summary > small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .overview-fold > summary::after { transition: none; }
}

/* 总览的视觉顺序：DOM 里岗位工作区在前（既有规则，保证各岗位待办不被个人配置挤掉），
   但视觉上让个人仪表盘占主位。order 只影响视觉与绘制顺序，不改 DOM 顺序——
   因此读屏与 Tab 顺序仍按 DOM 走，岗位待办依然先于个人仪表盘被访问到。
   注意：这里必须显式给容器 display:flex，order 在普通 block 布局下不生效。 */
.overview-dashboard { display: flex; flex-direction: column; }
.overview-dashboard > .page-head { order: 0; }
.overview-dashboard > [data-modular-dashboard] { order: 1; }
.overview-dashboard > .overview-fold-group { order: 2; }
.overview-dashboard > .dashboard-classic { order: 3; }