/* ============================================================================
 * wstat V2 皮肤 · 仪表（Instrument）
 * ----------------------------------------------------------------------------
 * 为什么是"覆盖式皮肤"而不是改源码：
 *   public/assets/*-<hash>.js|css 是构建产物，包里没有前端源码（无 src/、
 *   无 package.json、无 vite 配置）。所以只能在 index.html 里多挂一份样式，
 *   用同名 selector 但更高特异性把视觉盖掉，不动任何构建产物。
 *
 * 特异性约定（重要）：
 *   构建产物里各路由的 CSS 是**按需动态加载**的，加载时机晚于本文件。
 *   所以本文件里所有"应用自有类"的覆盖都写成 `body .xxx`（0,1,1），
 *   比产物里的 `.xxx`（0,1,0）高一级，跟加载顺序无关。
 *   深色块再叠一层 → `body[theme-mode="dark"]`（0,1,1）本身就压得住产物的 `.xxx`。
 *
 * 主题开关：
 *   日间 → html[data-theme="light"]
 *   夜间 → html[data-theme="dark"] + body[theme-mode="dark"]
 *   后者是 Semi Design 自己的暗色开关（产物里已有整套 body[theme-mode=dark] 令牌），
 *   两个都设是为了：head 里就能定 data-theme 避免闪色，body 就绪后再补 theme-mode
 *   让 Semi 内的暗色分支也生效。
 * ========================================================================== */

/* ==========================================================================
 * 1. V2 设计令牌 —— 日间 A「冷灰工控白」
 * ======================================================================== */
:root {
  --w-bg:        #eef1f5;   /* 页面画布 */
  --w-panel:     #f7f9fb;   /* 卡片面 */
  --w-panel-2:   #e6ebf1;   /* 侧栏 / 工具条面 */
  --w-line:      #d3dae2;   /* 主分隔线 */
  --w-line-2:    #c3ccd7;   /* 控件描边 */
  --w-hair:      #e0e5eb;   /* 细行线 */
  --w-gline:     #d8dee5;   /* 图表网格线 */
  --w-tx:        #1b232c;   /* 正文 */
  --w-tx-2:      #4c5865;   /* 次级 */
  --w-muted:     #5a6672;   /* 标签 / 说明 */
  --w-faint:     #97a2ae;   /* 占位 / 禁用 */
  --w-accent:    #a1651b;   /* 强调（图形：折线、边条、焦点环） */
  --w-accent-ink:#8d5714;   /* 强调（当文字用，对比度更高） */
  --w-on-accent: #f7f9fb;   /* 压在强调色上的文字 */
  --w-ok:        #1c7348;   /* 成功 / 涨（中国习惯：跌为绿） */
  --w-bad:       #b53926;   /* 危险 / 跌（中国习惯：涨为红） */
  --w-warn:      #8d5714;
  --w-blue:      #29689f;
  --w-purple:    #6a5cc4;
  --w-pink:      #a3567c;
  --w-nav:       #dde5ee;   /* 导航 hover / 当前项底 */
  --w-code-bg:   #1b232c;   /* 代码块（两套主题都保持"终端"观感） */
  --w-code-fg:   #d8e0e8;
  --w-code-line: #313b47;
  --w-grid:      rgba(27, 35, 44, .035);

  /* 等宽在前、中文兜底在后：
     Consolas / Cascadia Mono 没有中文字形，中文会自动落到雅黑 —— 得到
     「数字等宽对齐 + 中文不成方块」的效果。末位补 system-ui 防裸奔。 */
  --w-mono: "Cascadia Mono", "Consolas", ui-monospace, "SFMono-Regular", Menlo, "Liberation Mono", monospace;
  --w-cjk:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --w-font: var(--w-mono), var(--w-cjk);
  --w-radius: 0;            /* V2 是方角 */
}

/* ==========================================================================
 * 2. V2 设计令牌 —— 夜间（与样稿 v2-instrument.html 逐值一致）
 * ======================================================================== */
:root[data-theme="dark"],
body[theme-mode="dark"] {
  --w-bg:        #0e1116;
  --w-panel:     #141a21;
  --w-panel-2:   #111720;
  --w-line:      #232b36;
  --w-line-2:    #2e3846;
  --w-hair:      #1a212a;
  --w-gline:     #1d242e;
  --w-tx:        #c9d4e0;
  --w-tx-2:      #8b98a8;
  --w-muted:     #7d8997;
  --w-faint:     #5d6773;
  --w-accent:    #d9a05b;
  --w-accent-ink:#d9a05b;
  --w-on-accent: #0e1116;
  --w-ok:        #57c08a;
  --w-bad:       #e06c5a;
  --w-warn:      #d9a05b;
  --w-blue:      #6fa8d6;
  --w-purple:    #8b7fd6;
  --w-pink:      #c98fb0;
  --w-nav:       #182029;
  --w-code-bg:   #111720;
  --w-code-fg:   #c9d4e0;
  --w-code-line: #232b36;
  --w-grid:      rgba(200, 215, 230, .04);
}

/* ==========================================================================
 * 3. Semi 语义令牌覆盖（浅色）
 *    产物里这套令牌定义在 `body,body[theme-mode=dark] .semi-always-light,...`
 *    （特异性 0,0,1）。这里同样写 `body` 但排在后面 → 同权重靠后者胜。
 *    不用 `:root` 单独打，因为产物那条直接落在 body 上，会压过继承值。
 * ======================================================================== */
:root,
body,
:root[data-theme="light"] body {
  --semi-color-bg-0: var(--w-panel);
  --semi-color-bg-1: var(--w-bg);
  --semi-color-bg-2: var(--w-panel);
  --semi-color-bg-3: var(--w-panel-2);
  --semi-color-bg-4: var(--w-nav);
  --semi-color-nav-bg: var(--w-panel-2);

  --semi-color-text-0: var(--w-tx);
  --semi-color-text-1: var(--w-tx-2);
  --semi-color-text-2: var(--w-muted);
  --semi-color-text-3: var(--w-faint);

  --semi-color-border: var(--w-line);
  --semi-color-fill-0: rgba(27, 35, 44, .045);
  --semi-color-fill-1: rgba(27, 35, 44, .075);
  --semi-color-fill-2: rgba(27, 35, 44, .115);

  --semi-color-primary: var(--w-accent-ink);
  --semi-color-primary-hover: #7a4a10;
  --semi-color-primary-active: #6b400c;
  --semi-color-primary-disabled: rgba(141, 87, 20, .35);
  --semi-color-primary-light-default: rgba(141, 87, 20, .10);
  --semi-color-primary-light-hover: rgba(141, 87, 20, .16);
  --semi-color-primary-light-active: rgba(141, 87, 20, .22);

  --semi-color-link: var(--w-accent-ink);
  --semi-color-link-hover: var(--w-accent);
  --semi-color-link-active: #6b400c;
  --semi-color-link-visited: var(--w-accent-ink);
  --semi-color-focus-border: var(--w-accent);

  --semi-color-success: var(--w-ok);
  --semi-color-success-hover: #17603c;
  --semi-color-success-active: #124d30;
  --semi-color-success-light-default: rgba(28, 115, 72, .10);
  --semi-color-success-light-hover: rgba(28, 115, 72, .16);
  --semi-color-success-light-active: rgba(28, 115, 72, .22);

  --semi-color-danger: var(--w-bad);
  --semi-color-danger-hover: #9c3021;
  --semi-color-danger-active: #83291c;
  --semi-color-danger-light-default: rgba(181, 57, 38, .10);
  --semi-color-danger-light-hover: rgba(181, 57, 38, .16);
  --semi-color-danger-light-active: rgba(181, 57, 38, .22);

  --semi-color-warning: var(--w-warn);
  --semi-color-warning-hover: #7a4a10;
  --semi-color-warning-active: #6b400c;
  --semi-color-warning-light-default: rgba(141, 87, 20, .10);
  --semi-color-warning-light-hover: rgba(141, 87, 20, .16);
  --semi-color-warning-light-active: rgba(141, 87, 20, .22);

  --semi-color-info: var(--w-blue);
  --semi-color-info-light-default: rgba(41, 104, 159, .10);

  --semi-color-tertiary: var(--w-muted);
  --semi-color-default: var(--w-panel-2);
  --semi-color-default-hover: var(--w-nav);
  --semi-color-default-active: var(--w-line);

  --semi-color-disabled-text: rgba(27, 35, 44, .30);
  --semi-color-disabled-border: var(--w-line);
  --semi-color-disabled-bg: var(--w-panel-2);
  --semi-color-disabled-fill: rgba(27, 35, 44, .04);
  --semi-color-shadow: rgba(27, 35, 44, .06);
  --semi-color-overlay-bg: rgba(20, 26, 33, .45);
  --semi-color-highlight-bg: rgba(161, 101, 27, .20);
  --semi-color-highlight: var(--w-tx);
  --semi-shadow-elevated: 0 0 1px rgba(27, 35, 44, .18), 0 4px 14px rgba(27, 35, 44, .07);

  /* V2 方角 */
  --semi-border-radius-extra-small: 0;
  --semi-border-radius-small: 0;
  --semi-border-radius-medium: 0;
  --semi-border-radius-large: 0;

  /* 图表 / 数据色：改成 V2 色系 */
  --semi-color-data-0:  #a1651b;
  --semi-color-data-1:  #29689f;
  --semi-color-data-2:  #1c7348;
  --semi-color-data-3:  #6a5cc4;
  --semi-color-data-4:  #a3567c;
  --semi-color-data-5:  #b53926;
  --semi-color-data-6:  #78828c;
  --semi-color-data-7:  #2b6f6a;
  --semi-color-data-8:  #6b6f22;
  --semi-color-data-9:  #7a5230;
  --semi-color-data-10: #4a6b8a;
  --semi-color-data-11: #7d4a72;
  --semi-color-data-12: #4a6b3a;
  --semi-color-data-13: #96543c;
  --semi-color-data-14: #55606e;
  --semi-color-data-15: #94701f;
  --semi-color-data-16: #47568c;
  --semi-color-data-17: #96506a;
  --semi-color-data-18: #1f6b78;
  --semi-color-data-19: #8a7355;
}

/* ==========================================================================
 * 4. Semi 语义令牌覆盖（深色）
 *    两个入口都要有：
 *     · :root[data-theme="dark"] body —— 只要 head 里同步设好 data-theme 就成立，
 *       样式表在 head 解析、body 一出现规则立刻命中，因此**首帧就是深色，不闪**；
 *       特异性 (0,2,1) 高于产物 `body`(0,0,1) 与 `body[theme-mode=dark]`(0,1,1)。
 *     · body[theme-mode="dark"] —— Semi 自己的开关，覆盖 .semi-always-dark 等分支。
 * ======================================================================== */
:root[data-theme="dark"],
:root[data-theme="dark"] body,
body[theme-mode="dark"] {
  --semi-color-bg-0: #141a21;
  --semi-color-bg-1: #0e1116;
  --semi-color-bg-2: #141a21;
  --semi-color-bg-3: #1b222b;
  --semi-color-bg-4: #232b36;
  --semi-color-nav-bg: #111720;

  --semi-color-text-0: #c9d4e0;
  --semi-color-text-1: #aab7c5;
  --semi-color-text-2: #8b98a8;
  --semi-color-text-3: #6b7683;

  --semi-color-border: #232b36;
  --semi-color-fill-0: rgba(200, 215, 230, .06);
  --semi-color-fill-1: rgba(200, 215, 230, .10);
  --semi-color-fill-2: rgba(200, 215, 230, .15);

  --semi-color-primary: #d9a05b;
  --semi-color-primary-hover: #e3b075;
  --semi-color-primary-active: #c08d4a;
  --semi-color-primary-disabled: rgba(217, 160, 91, .35);
  --semi-color-primary-light-default: rgba(217, 160, 91, .16);
  --semi-color-primary-light-hover: rgba(217, 160, 91, .22);
  --semi-color-primary-light-active: rgba(217, 160, 91, .28);

  --semi-color-link: #d9a05b;
  --semi-color-link-hover: #e3b075;
  --semi-color-link-active: #c08d4a;
  --semi-color-link-visited: #d9a05b;
  --semi-color-focus-border: #d9a05b;

  --semi-color-success: #57c08a;
  --semi-color-success-light-default: rgba(87, 192, 138, .16);
  --semi-color-success-light-hover: rgba(87, 192, 138, .22);
  --semi-color-success-light-active: rgba(87, 192, 138, .28);

  --semi-color-danger: #e06c5a;
  --semi-color-danger-light-default: rgba(224, 108, 90, .16);
  --semi-color-danger-light-hover: rgba(224, 108, 90, .22);
  --semi-color-danger-light-active: rgba(224, 108, 90, .28);

  --semi-color-warning: #d9a05b;
  --semi-color-warning-light-default: rgba(217, 160, 91, .16);
  --semi-color-warning-light-hover: rgba(217, 160, 91, .22);
  --semi-color-warning-light-active: rgba(217, 160, 91, .28);

  --semi-color-info: #6fa8d6;
  --semi-color-info-light-default: rgba(111, 168, 214, .16);

  --semi-color-tertiary: #8b98a8;
  --semi-color-default: #1b222b;
  --semi-color-default-hover: #232b36;
  --semi-color-default-active: #2e3846;

  --semi-color-disabled-text: rgba(200, 215, 230, .30);
  --semi-color-disabled-border: #232b36;
  --semi-color-disabled-bg: #1b222b;
  --semi-color-disabled-fill: rgba(200, 215, 230, .05);
  --semi-color-shadow: rgba(0, 0, 0, .30);
  --semi-color-overlay-bg: rgba(8, 11, 15, .68);
  --semi-color-highlight-bg: rgba(217, 160, 91, .24);
  --semi-color-highlight: #c9d4e0;
  --semi-shadow-elevated: inset 0 0 0 1px rgba(200, 215, 230, .10), 0 4px 14px rgba(0, 0, 0, .40);

  --semi-color-data-0:  #d9a05b;
  --semi-color-data-1:  #6fa8d6;
  --semi-color-data-2:  #57c08a;
  --semi-color-data-3:  #8b7fd6;
  --semi-color-data-4:  #c98fb0;
  --semi-color-data-5:  #e06c5a;
  --semi-color-data-6:  #8b98a8;
  --semi-color-data-7:  #4fa39c;
  --semi-color-data-8:  #9aa84f;
  --semi-color-data-9:  #b58055;
  --semi-color-data-10: #7fa0c0;
  --semi-color-data-11: #b07fa8;
  --semi-color-data-12: #86a86b;
  --semi-color-data-13: #cf8871;
  --semi-color-data-14: #93a0b0;
  --semi-color-data-15: #c8a45c;
  --semi-color-data-16: #7f8fd0;
  --semi-color-data-17: #cf88a2;
  --semi-color-data-18: #55a8b5;
  --semi-color-data-19: #bfa684;
}

/* ==========================================================================
 * 5. 基础排版 —— 字体、画布、滚动条
 * ======================================================================== */
html {
  background: var(--w-bg);
  color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }

/* 字体覆盖为什么要这么高的特异性：
   产物里的 Semi 令牌块本身带 font-family:Inter，而且**深色块那条是
   `body[theme-mode=dark],body .semi-always-dark,...`，特异性 (0,1,1)，
   比 `body`(0,0,1) 高** —— 只写 body 的话浅色能生效、一切到深色字就变回 Inter。
   所以这里用 (0,1,1) 打平再加后置胜出；组件层用 [class*="semi-"] 兜全，
   免得把 100 多条 .semi-xxx { font-family: Inter } 一条条列出来。 */
:root,
html,
:root body,
body,
:root body [class*="semi-"] {
  font-family: var(--w-font);
}
:root body {
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--w-bg);
  color: var(--w-tx);
  line-height: 1.55;
}

/* 数字一律等宽对齐 —— 统计表里最关键的一条 */
body .semi-table,
body .semi-table-cell,
body .metric-value,
body .stat-value,
body .sd-value,
body .sd-strip-val,
body .dim-pct {
  font-variant-numeric: tabular-nums;
}

/* 滚动条：V2 细条，两主题同形不同色 */
body * { scrollbar-width: thin; scrollbar-color: var(--w-line-2) transparent; }
body ::-webkit-scrollbar { width: 9px; height: 9px; }
body ::-webkit-scrollbar-track { background: transparent; }
body ::-webkit-scrollbar-thumb {
  background: var(--w-line-2);
  border: 2px solid var(--w-bg);
  border-radius: 0;
}
body ::-webkit-scrollbar-thumb:hover { background: var(--w-muted); }
body ::-webkit-scrollbar-corner { background: transparent; }

/* 焦点环统一走强调色 */
body .semi-button:focus-visible,
body .semi-input-wrapper:focus-within,
body .semi-select:focus-within,
body a:focus-visible,
body button:focus-visible {
  outline: none;
}
body .semi-input-wrapper:focus-within,
body .semi-select-focus,
body .semi-select-selection:focus-within {
  border-color: var(--w-accent) !important;
  box-shadow: inset 0 0 0 1px var(--w-accent) !important;
}

/* ==========================================================================
 * 6. 应用自有类 —— 灰阶全部换成 V2 令牌（两套主题共用，自动跟随）
 * ======================================================================== */
body {
  /* 已在上文设定，这里只补一项：让基础字号下的行高更"仪表"一点 */
  line-height: 1.55;
}

/* --- 面 / 卡片 --- */
body .card,
body .stat-card,
body .chart-box,
body .metric-strip,
body .sd-strip,
body .filter-bar {
  background: var(--w-panel);
  border-color: var(--w-line);
}
body .card,
body .stat-card,
body .chart-box,
body .metric-strip,
body .sd-strip,
body .filter-bar {
  border-radius: var(--w-radius);
}
body .card-title,
body .stat-value,
body .metric-value,
body .dim-title,
body .dim-row,
body .sd-section-title,
body .sd-value,
body .vf-step,
body .mdoc-name,
body .mdoc-scope-title,
body .mdoc-why-q {
  color: var(--w-tx);
}
body .stat-label,
body .stat-sub,
body .metric-label,
body .metric-sub,
body .dim-cols,
body .dim-empty,
body .sd-label,
body .sd-replay-time,
body .sd-info-label,
body .vf-field,
body .chip-label,
body .fb-label,
body .fb-empty,
body .mdoc-src,
body .mdoc-note,
body .mdoc-scope-desc,
body .auth-sub {
  color: var(--w-muted);
}
body .dim-pct,
body .rt-filter-label,
body .sd-strip-label,
body .sd-page-head,
body .sd-page-time,
body .sd-replay-step,
body .mdoc-def,
body .mdoc-why-a {
  color: var(--w-tx-2);
}
body .sd-strip-val,
body .sd-info-value,
body .sd-replay-url {
  color: var(--w-tx);
}

/* --- 细线 --- */
body .metric-item { border-right-color: var(--w-hair); }
body .dim-cols,
body .sd-section-title,
body .sd-info-item,
body .mdoc,
body .mdoc-why { border-bottom-color: var(--w-hair); }
body .dim-foot { border-top-color: var(--w-hair); }
body .dim-row { border-bottom-color: var(--w-hair); }
body .sd-info-item:nth-child(odd) { border-right-color: var(--w-hair); }
body .dim-title:before { background: var(--w-accent); }

/* 进度条 / 占比条
   注意：.dim-bar-fill 画的是「访问量(PV) 占比」，与图表主序列同一个量，
   所以用 --w-accent（琥珀）保持同色系；.sd-dot 是状态点，留在 --w-ok（绿）。 */
body .dim-bar { background: var(--w-hair); }
body .dim-bar-fill { background: var(--w-accent); }
body .metric-label-tip { border-bottom-color: var(--w-line-2); }
body .metric-live { background: var(--w-panel-2); }

/* 状态点 */
body .site-dot-ok,
body .sd-dot { background: var(--w-ok); }
body .site-opt-no {
  color: var(--w-warn);
  background: rgba(141, 87, 20, .10);
}
body .fb-warn { color: var(--w-warn); }
body .fb-cond {
  background: var(--w-panel-2);
  border-color: var(--w-line);
}

/* 校验卡 */
body .vf-card {
  border-color: var(--w-line);
  background: var(--w-panel-2);
}
body .mdoc-scope,
body .sd-info-grid,
body .sd-page-head,
body .sd-page-row,
body .sd-replay-screen { border-color: var(--w-line); }
body .sd-page-row:last-of-type { border-bottom-color: var(--w-line); }

/* 会话明细里的等宽小块 */
body .sd-mono {
  background: var(--w-panel-2);
  color: var(--w-tx);
}
body .mdoc-tag { color: var(--w-accent-ink); background: rgba(141, 87, 20, .10); }
body .mdoc-scope-pages { color: var(--w-accent-ink); }
body .mdoc-why-q:before { color: var(--w-accent-ink); }
body .mdoc-tag-note { color: var(--w-bad); background: rgba(181, 57, 38, .10); }
body .mdoc-note { color: var(--w-warn); }
body .sd-page-head,
body .sd-replay-screen { background: var(--w-panel-2); }

/* --- 涨跌：保持中国习惯（涨红 / 跌绿），只换 V2 的红绿 --- */
body .delta-up   { color: var(--w-bad); background: rgba(181, 57, 38, .10); }
body .delta-down { color: var(--w-ok);  background: rgba(28, 115, 72, .10); }

/* --- 代码块 --- */
body .snippet-code {
  background: var(--w-code-bg);
  color: var(--w-code-fg);
  border: 1px solid var(--w-code-line);
  border-radius: var(--w-radius);
}
body .code-block {
  background: var(--w-panel-2);
  border-color: var(--w-line);
  color: var(--w-tx);
  border-radius: var(--w-radius);
}

/* ==========================================================================
 * 7. Semi 组件微调 —— 方角、描边、导航当前项
 * ======================================================================== */

/* 输入类：V2 是"描边方框"而不是"填充色块" */
body .semi-input-wrapper {
  background-color: transparent;
  border: 1px solid var(--w-line-2);
  border-radius: var(--w-radius);
}
body .semi-input-wrapper:hover { background-color: var(--w-panel-2); }
body .semi-input-wrapper-focus,
body .semi-input-wrapper:focus-within { border-color: var(--w-accent); }
body .semi-input-wrapper input::placeholder { color: var(--w-faint); }

body .semi-select {
  background-color: transparent;
  border: 1px solid var(--w-line-2);
  border-radius: var(--w-radius);
}
body .semi-select:hover { background-color: var(--w-panel-2); }

/* 主按钮：
   产物里 `.semi-button-primary{color:rgba(var(--semi-white),1)}`，而 --semi-white
   在浅/深两套里都是 255,255,255 —— 深色下底变成亮赭 #d9a05b 之后白字只有 2:1。
   所以按形态分开处理：
     实心按钮 → 浅色深赭底配浅字、深色亮赭底配深字，两边都稳过 4.5:1
     无边框/浅色/描边按钮 → 就是文字按钮，底色透明，直接给强调色
   （踩过的坑：只写 `.semi-button-primary` 会把「导出」这类 borderless 按钮的字
    也刷成深色，在深底上直接看不见。） */
body .semi-button.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline) {
  color: var(--w-on-accent);
}
body .semi-button.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
  color: var(--w-on-accent);
}
body .semi-button.semi-button-primary.semi-button-borderless,
body .semi-button.semi-button-primary.semi-button-light,
body .semi-button.semi-button-primary.semi-button-outline {
  color: var(--w-accent-ink);
}
body .semi-button,
body .semi-tag,
body .semi-input-wrapper,
body .semi-select {
  border-radius: var(--w-radius);
}

/* 侧栏导航：当前项 = 左侧 2px 强调条 + 强调色文字 + 导航底
   注意选择器里必须带上 .semi-navigation 这一层：Semi 自带的
   `.semi-navigation-sub .semi-navigation-item-selected` 是两个类 (0,2,0)，
   光写 `body .semi-navigation-item-selected` 只有 (0,1,1) 会输给它，
   底色就会被 --semi-color-primary-light-default 抢走（实测对比度只有 4.37:1，
   差一点点不到 4.5）。加一层后是 (0,2,1)，稳定胜出。 */
body .semi-navigation {
  border-right: 1px solid var(--w-line);
}
body .semi-navigation-item {
  border-radius: 0;
}
body .semi-navigation .semi-navigation-item-selected {
  background-color: var(--w-nav);
  color: var(--w-accent-ink);
  box-shadow: inset 2px 0 0 0 var(--w-accent);
}
body .semi-navigation .semi-navigation-item-selected .semi-navigation-item-text,
body .semi-navigation .semi-navigation-item-selected .semi-icon,
body .semi-navigation .semi-navigation-item-selected span {
  color: var(--w-accent-ink);
}
body .semi-navigation-item:hover:not(.semi-navigation-item-selected) {
  background-color: var(--w-nav);
}

/* 选中态 / 开关 / 复选 / 单选 / 进度 / 标签页下划线 —— 全部走强调色（令牌已覆盖，
   这里再钉一遍 .semi-* 内部写死色的分支） */
body .semi-tabs-bar-line .semi-tabs-tab-active {
  color: var(--w-accent-ink);
  border-bottom-color: var(--w-accent);
}
body .semi-tabs-bar-line .semi-tabs-tab-active .semi-tabs-tab-line {
  background-color: var(--w-accent);
}
body .semi-switch-checked { background-color: var(--w-accent); }
body .semi-checkbox-checked .semi-checkbox-inner,
body .semi-radio-checked .semi-radio-inner { background-color: var(--w-accent); border-color: var(--w-accent); }
body .semi-progress-track { background-color: var(--w-hair); }
body .semi-progress-line-inner { background-color: var(--w-accent); }
body .semi-tag { border-radius: var(--w-radius); }
body .semi-tag-blue { color: var(--w-accent-ink); background-color: rgba(141, 87, 20, .10); }
body .semi-avatar { border-radius: 0; }

/* 卡片 / 弹窗 / 下拉面板 */
body .semi-card,
body .semi-modal-content,
body .semi-popover-content,
body .semi-dropdown-menu,
body .semi-select-option-list {
  border-radius: var(--w-radius);
  border-color: var(--w-line);
  background-color: var(--w-panel);
}
body .semi-modal-header,
body .semi-modal-footer { border-color: var(--w-hair); }
body .semi-modal-content { box-shadow: var(--semi-shadow-elevated); }
body .semi-select-option-focused,
body .semi-select-option:hover { background-color: var(--w-nav); }
body .semi-select-option-selected { background-color: var(--w-nav); color: var(--w-accent-ink); }

/* 表格 */
body .semi-table-thead > .semi-table-row > .semi-table-row-head {
  background-color: var(--w-panel-2);
  color: var(--w-muted);
  border-bottom: 1px solid var(--w-line);
}
body .semi-table-tbody > .semi-table-row > .semi-table-row-cell { border-bottom: 1px solid var(--w-hair); }
body .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell { background-color: var(--w-nav); }

/* 顶栏 */
body .semi-layout-header {
  background-color: var(--w-panel);
  border-bottom: 1px solid var(--w-line);
}
body .semi-layout-content { background-color: var(--w-bg); }

/* 分割线 / 骨架屏等中性件 */
body .semi-divider { border-color: var(--w-line); }
body .semi-skeleton-shape,
body .semi-skeleton-image { background-color: var(--w-panel-2); }

/* ==========================================================================
 * 7.5 内联样式覆盖（必须 !important）
 *     实测这三处的配色是 React 写在 style 属性上的（不是 CSS）：
 *       header.semi-layout-header  style="background:#fff; border-bottom:1px solid #e5e6eb"
 *       main.semi-layout-content   style="background:#f5f6f8"
 *       aside.semi-layout-sider    style="border-right:1px solid #e5e6eb"
 *     内联样式只有 !important 能压。它们存在于全部 22 个已登录页面，结构稳定，
 *     所以在 CSS 里钉死；其余散落在各路由里的内联硬色交给 wstat-theme.js 的
 *     内联样式改写统一处理（见该文件"内联硬色改写"一节）。
 * ======================================================================== */
body .semi-layout-header {
  background-color: var(--w-panel) !important;
  border-bottom-color: var(--w-line) !important;
}
body .semi-layout-content {
  background-color: var(--w-bg) !important;
}
body .semi-layout-sider {
  border-right-color: var(--w-line) !important;
}

/* 侧栏品牌名是个裸 <a href>，没有作者样式，吃的是浏览器默认链接色
   （data-theme=dark 时 Chrome 给的是 #9E9EFF 淡紫蓝，跟 V2 完全不搭）。
   页脚那个 "Powered by Wstats" 另带内联 color，内联优先级更高，
   所以这条不会误伤它。 */
body .semi-layout-sider a {
  color: var(--w-tx);
}

/* ==========================================================================
 * 8. 登录页 —— 与 V2 统一
 *    结构（从 Login-*.js 反解）：
 *      .auth-page > .auth-card > [logo-badge, .auth-brand, .auth-sub, 表单,
 *                                 PoweredBy（组件里写死 borderTop:#f0f1f3）]
 * ======================================================================== */
body .auth-page {
  background: var(--w-bg);
  /* 极淡的坐标纸网格：把"工控/仪表"的语感立住，
     不用渐变、不用发光 —— 那些正是要规避的 AI 味。 */
  background-image:
    linear-gradient(to right, var(--w-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--w-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center center;
}

body .auth-card {
  background: var(--w-panel);
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  /* V2 是"平的面 + 细线"，不用大投影。留一层极轻的抬升暗示即可。 */
  box-shadow: 0 1px 0 0 var(--w-hair), 0 10px 30px rgba(20, 26, 33, .05);
  position: relative;
}
/* 卡顶 2px 强调条 */
body .auth-card::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 2px;
  background: var(--w-accent);
}
html[data-theme="dark"] body .auth-card {
  box-shadow: 0 1px 0 0 var(--w-hair), 0 16px 40px rgba(0, 0, 0, .45);
}

body .auth-brand {
  color: var(--w-tx);
  letter-spacing: .04em;
}
body .logo-badge {
  background: var(--w-accent);
  color: var(--w-on-accent);
  border-radius: var(--w-radius);
  letter-spacing: .06em;
}

/* 组件里把 PoweredBy 的分割线写成了 inline style（border-top:1px solid #f0f1f3），
   inline 优先级最高，只能 !important 盖 —— 否则夜间模式会留一条白线。 */
body .auth-card > div:last-child {
  border-top-color: var(--w-hair) !important;
}

/* 登录页的输入框：V2 描边方框，比应用内更高一点更好点 */
body .auth-card .semi-input-wrapper {
  border: 1px solid var(--w-line-2);
  background-color: var(--w-bg);
}
body .auth-card .semi-input-wrapper:hover { background-color: var(--w-panel-2); }
body .auth-card .semi-input-wrapper-focus { border-color: var(--w-accent); background-color: var(--w-bg); }

/* 登录按钮：全宽方角，字距拉开 */
body .auth-card .semi-button-primary {
  border-radius: var(--w-radius);
  letter-spacing: .12em;
  font-weight: 400;
}

/* ==========================================================================
 * 9. 日/夜间切换按钮（由 wstat-theme.js 注入到顶栏）
 * ======================================================================== */
body .wstat-theme-toggle {
  font-family: var(--w-font);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--w-line-2);
  background: var(--w-panel);
  color: var(--w-tx-2);
  border-radius: var(--w-radius);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
  margin-right: 8px;
}
body .wstat-theme-toggle:hover {
  border-color: var(--w-accent);
  color: var(--w-accent-ink);
}
body .wstat-theme-toggle:focus-visible {
  outline: 2px solid var(--w-accent);
  outline-offset: 1px;
}
body .wstat-theme-toggle svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: block;
}
body .wstat-tt-label { letter-spacing: .06em; }

/* 没有 semi-layout 顶栏、但页面自己画了一层整页页头（如移动看板 /m）：
   绝对定位挂进去，与应用自带按钮（「桌面版」）并排。
   top/right 由 JS 按对方控件的实际 rect 算出来写在行内，这里只兜底。 */
body .wstat-theme-toggle--pagehead {
  position: absolute;
  top: 50%;
  right: 92px;
  z-index: 4;                 /* 待在页头内部，低于页头自身 z-index，不越层 */
  margin-right: 0;
  padding: 3px 8px;
  font-size: 12px;
  background: var(--w-panel);
  border-color: var(--w-line-2);
}

/* 没有顶栏、也没有自建页头的页面（登录 / 注册 / 找回密码 / 大屏）：
   浮动。具体落在哪个角由 JS 做碰撞检测后写行内样式，这里给默认值与观感。 */
body .wstat-theme-toggle--floating {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 50;
  margin-right: 0;
  background: var(--w-panel);
  box-shadow: 0 0 0 1px var(--w-line);
}

/* 窄屏只留图标，别把顶栏挤换行 */
@media (max-width: 860px) {
  body .wstat-tt-label { display: none; }
  body .wstat-theme-toggle { padding: 4px 6px; }
}

/* ==========================================================================
 * 10. 高/宽断点：V2 表头与细线在"高度紧"的视口要收敛
 * ======================================================================== */
@media (max-height: 700px) {
  body .auth-card { padding-top: 24px; padding-bottom: 20px; }
}