/* ============================================================================
   DGG 套利控制台 · 设计系统 v2「现代金融」
   ----------------------------------------------------------------------------
   为什么重做（用户原话：「这界面儿我是看够了」「你有没有一点儿美感，
   或者是人的感觉？从心理角度去考虑这个问题」）：

   旧版是**深色终端风** —— 深海军蓝底、金色描边、9.5px 小字、密密麻麻的分隔线。
   那套东西专业但**看着累、有压迫感**，而且小字在 27 寸屏上要眯眼。

   新版换三条根本假设：
     ① **浅色为主**：暖白底 + 纯白卡片。眼睛压力小，长时间看也不累。
     ② **字号放大**：基准从 13px 提到 15px，标签 12px，主数字 56px。
        信息密度换可读性 —— 这是给你的眼睛做的取舍，不是给屏幕做的。
     ③ **留白分层**：不再靠描边切分，靠**留白 + 阴影**。少画线，多留空。

   三层主题（沿用原有语义，只是重新配了色）：
     **7 套主题**，每套在**色相和结构**上都不同（不只是深浅）：
     1. 暖白 Warm      day        米黄底 + 深青绿            柔和、久看不累
     2. 蓝图 Blueprint blueprint  冷白 + 靛蓝 + 等宽数字      清晰、工程感
     3. 墨白 Ink       ink        硬描边 + 零圆角 + 零阴影    极简、锐利
     4. 森林 Forest    forest     米白 + 深苔绿 + 陶土        自然、温暖
     5. 深海 Ocean     ocean      近黑蓝 + 青绿              深色·专业
     6. 终端 Terminal  terminal   纯黑 + 琥珀 + 高对比        深色·盯数字
     7. 暗夜 Midnight  midnight   暖灰 + 珊瑚红 + 大圆角      深色·柔和

   为什么这样分：用户反馈"有几个特别贴近的，比如纯白和那个什么白，感觉特别贴近，
   想要几个差异化比较大的"。所以**光换颜色不够** —— 墨白走零圆角纯描边、
   终端走纯黑高对比、蓝图和终端用等宽数字，结构和字体都跟着变。
   ============================================================================ */

/* ══════════════════════ 令牌：暖白（默认） ══════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   默认主题 = **清朗浅色**（取自原版 CSS 的 `body.light`）
   ══════════════════════════════════════════════════════════════════════════

   用户："我希望整体清朗一些，容易理解。"

   原版 CSS 里本来就有两套：`:root` 是深色黑金，`body.light` 是浅色。
   但它那套浅色一直没生效 —— 原因有两个，都在 `_mt5probe/lighten.py` 里写了：
   `body.light` 的变量块被我删了，且主题类名（`day`）和它要的（`light`）对不上。

   现在：
     · 这份 `:root` 就是原版 `body.light` 的色值（映射到我的令牌名）
     · 主题切换时浅色主题会同时给 body 加 `light` 别名 → 原版的浅色规则生效
     · 深色黑金仍在（切到「黑金」即可），只是**不再是默认**
*/
:root {



  /* 卡片阴影：顶部内高光 + 落影。**这是原版卡片有光的关键**，
     只用外落影会显得平。金/主题色外发光由各主题覆盖。 */
  --card-shadow: none;
  /* —— 底色与表面：分层靠"白度差"和阴影，不靠边框 —— */
  --bg: #ffffff;
  --bg-deep: #f7f8fa;
  --surface-1: #ffffff;
  --surface-2: #f0f3fa;
  --surface-3: #e0e3eb;
  --surface-sunken: #f7f8fa;
  --sidebar: #ffffff;

  /* —— 描边：极轻，只做最小限度的界定 —— */
  --line-1: #eceef2;
  --line-2: #e0e3eb;
  --line-3: #d1d4dc;

  /* —— 文本：四级层次，对比度比旧版更高（可读性优先） —— */
  --text-1: #131722;
  --text-2: #2a2e39;
  --text-3: #787b86;
  --text-4: #9598a1;

  /* —— 品牌与语义色：更饱和、更像消费级金融 App —— */
  --accent: #2962ff;
  --accent-2: #1e53e5;
  --accent-soft: rgba(41,98,255,.10);

  --pos: #26a69a;
  --neg: #ef5350;
  --pos-soft: rgba(15, 157, 88, .12);
  --neg-soft: rgba(229, 72, 77, .12);
  --info: #2962ff;
  --warn:     #e08a00;
  --danger:   #e5484d;
  --neutral: #7b61ff;

  /* —— 方向语义：做大/做小（保留原语义，换成区分度更高的两色） —— */
  --dir-big:   #c77b1a;        /* 做大：琥珀 */
  --dir-small: #3b6ef5;        /* 做小：蓝 */

  /* —— 风险分级 —— */
  --risk-near: #e5484d;
  --risk-mid:  #e08a00;
  --risk-far:  #0f9d58;

  /* —— 尺度：8px 基准栅格（旧版 4px 太碎，8px 更从容） —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 40px;

  /* —— 字号：**整体放大**（这是这一版最重要的改动） ——
     旧版 9.5/10.5/11.5/13 —— 在 27 寸屏上要眯眼。
     新版 12/13/15/17，主数字 56。 */
  --fs-micro: 12px;   /* 标签、单位（旧 9.5） */
  --fs-xs:    13px;   /* 副文本（旧 10.5） */
  --fs-sm:    15px;   /* 表格、正文（旧 11.5） */
  --fs-md:    17px;   /* 卡片标题（旧 13） */
  --fs-lg:    22px;   /* 强调数字（旧 15） */
  --fs-xl:    32px;   /* KPI 主数字（旧 20） */
  --fs-2xl:   56px;   /* 浮动盈亏（旧 26） */

  /* —— 圆角：明显放大（旧版 5~14，太方正） —— */
  --r-1: 8px;  --r-2: 12px;  --r-3: 16px;  --r-4: 20px;

  /* —— 阴影：新版**靠阴影分层**，所以比旧版重要 —— */
  --sh-1: none;
  --sh-2: 0 4px 16px rgba(19,23,34,.12);
  --sh-3: 0 12px 40px rgba(26,26,28,.12), 0 2px 8px rgba(26,26,28,.06);
  --sh-focus: 0 0 0 3px var(--accent-soft);
  --band-fill: rgba(59, 110, 245, .055);   /* 图的"开仓区间带"填充，必须极淡 */

  /* —— 字体族：优先几何无衬线（更现代），回退系统 —— */
  --font-ui: "Inter", "SF Pro Display", -apple-system, "Segoe UI Variable",
             "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  /* 数字：**不用等宽字体** —— 等宽在这里显得像终端。
     改用 UI 字体 + tabular-nums，一样不跳动，但更好看。 */
  --font-num: var(--font-ui);

  /* —— 动效 —— */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-1: .14s;
  --dur-2: .26s;

  /* 兼容旧变量名（模板/JS 里还有引用，逐步淘汰） */
  --radius: 4px;
  --txt: var(--text-1);
  --sub: var(--text-2);
  --dim: var(--text-3);
  --panel: var(--surface-1);
  --panel2: var(--surface-2);
  --line: var(--line-2);
  --line2: var(--line-3);
  --gold: var(--accent);
  --gold2: var(--accent-2);
  --green: var(--pos);
  --red: var(--neg);
  --blue: var(--info);
  --purple: var(--neutral);
  --card-grad: #ffffff;
  --r-3: 4px;
}

/* ══════════════════════ 令牌 2/7：蓝图「Blueprint」 ══════════════════════
   冷白底 + 靛蓝 + **等宽数字** —— 工程感。
   和"暖白"的区别不只是色温：数字用等宽字体，整体更偏"图纸"而不是"纸张"。
*/
body.blueprint, [data-theme="blueprint"] {
  --bg:             #eef3fb;
  --bg-deep:        #e6ecf8;
  --surface-1:      #ffffff;
  --surface-2:      #f6f9fe;
  --surface-3:      #e8eefa;
  --surface-sunken: #eef3fb;
  --sidebar:        #f7fafe;

  --line-1: #e2e9f6;
  --line-2: #d2ddf0;
  --line-3: #b8c7e4;

  --text-1: #0b1b3a;
  --text-2: #3a4d75;
  --text-3: #64769b;
  --text-4: #8f9db9;

  --accent:      #1d4ed8;
  --accent-2:    #1a3fae;
  --accent-soft: rgba(29, 78, 216, .10);

  --pos:      #0a8f5b;
  --neg:      #d92d3f;
  --pos-soft: rgba(10, 143, 91, .12);
  --neg-soft: rgba(217, 45, 63, .12);
  --info:     #2563eb;
  --warn:     #c2740a;
  --danger:   #d92d3f;
  --neutral:  #7c3aed;

  --dir-big:   #b45309;
  --dir-small: #2563eb;

  --sh-1: 0 1px 2px rgba(11,27,58,.05);
  --sh-2: 0 2px 8px rgba(11,27,58,.07), 0 10px 28px rgba(11,27,58,.06);
  --sh-3: 0 14px 44px rgba(11,27,58,.14);
  --band-fill: rgba(37, 99, 235, .055);

  /* 结构差异：数字走等宽 —— 这一套整体观感就是"图纸" */
  --font-num: "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
}

/* ══════════════════════ 令牌 3/7：墨白「Ink」 ══════════════════════
   **结构上和其它几套完全不同**：零圆角 + 纯描边 + 零阴影。
   这一套是"瑞士国际主义"那种硬边风格 —— 不靠留白和阴影分层，靠线。
   用户的诉求是"差异化大"，所以这一套故意走另一个极端。
*/
body.ink, [data-theme="ink"] {

  --bg: #f4f5f7;
  --bg-deep:        #f2f2f2;
  --surface-1: #ffffff;
  --surface-2:      #ffffff;
  --surface-3:      #eeeeee;
  --surface-sunken: #fafafa;
  --sidebar:        #ffffff;

  --line-1: #d4d4d4;
  --line-2: #111111;          /* 主描边做成黑色 —— 这是这一套的灵魂 */
  --line-3: #111111;

  --text-1: #000000;
  --text-2: #333333;
  --text-3: #666666;
  --text-4: #999999;

  --accent:      #000000;
  --accent-2:    #000000;
  --accent-soft: #eeeeee;

  --pos:      #007a3d;
  --neg:      #c40000;
  --pos-soft: #e6f5ec;
  --neg-soft: #fdeaea;
  --info:     #0044cc;
  --warn:     #a35a00;
  --danger:   #c40000;
  --neutral:  #5500cc;

  --dir-big:   #8a4b00;
  --dir-small: #0044cc;

  --sh-1: none;
  --sh-2: none;
  --sh-3: 0 0 0 2px #111111;
  --band-fill: #f0f0f0;

  /* 结构差异：零圆角 */
  --r-1: 0;  --r-2: 0;  --r-3: 0;  --r-4: 0;
  --radius: 0;
  --font-num: "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
}

/* ══════════════════════ 令牌 7/7：森林「Forest」 ══════════════════════
   米白底 + 深绿 + 陶土色点缀。色相明显偏绿/暖，和"暖白"的青绿不同：
   这一套的主色是**深苔绿**，警示色是**陶土橙**，整体更像"天然材料"。
*/
body.forest, [data-theme="forest"] {
  --bg:             #f2f1e8;
  --bg-deep:        #eae8dc;
  --surface-1:      #fdfcf7;
  --surface-2:      #f6f4ea;
  --surface-3:      #eae7da;
  --surface-sunken: #f2f1e8;
  --sidebar:        #f9f8f1;

  --line-1: #e4e1d3;
  --line-2: #d5d1bf;
  --line-3: #bcb69f;

  --text-1: #1f2418;
  --text-2: #464d3a;
  --text-3: #6e7659;
  --text-4: #989e83;

  --accent:      #2f5d3a;
  --accent-2:    #234829;
  --accent-soft: rgba(47, 93, 58, .11);

  --pos:      #2f7d3f;
  --neg:      #b4442b;
  --pos-soft: rgba(47, 125, 63, .13);
  --neg-soft: rgba(180, 68, 43, .13);
  --info:     #2a6a8f;
  --warn:     #c07a1e;
  --danger:   #b4442b;
  --neutral:  #6b5a8e;

  --dir-big:   #a55f18;
  --dir-small: #2a6a8f;

  --sh-1: 0 1px 2px rgba(31,36,24,.05);
  --sh-2: 0 2px 8px rgba(31,36,24,.07), 0 10px 28px rgba(31,36,24,.06);
  --sh-3: 0 14px 44px rgba(31,36,24,.15);
  --band-fill: rgba(42, 106, 143, .06);
}

/* ══════════════════════ 令牌 4/7：深海「Ocean」（深色·专业） ══════════════════════
   给"晚上看盘"或"就是喜欢深色"的场景。
   和旧版深色的区别：旧版是**深海军蓝 + 金色描边 + 9.5px 小字**（看着累）；
   这套是**近黑蓝 + 更亮的文字 + 放大后的字号 + 大圆角**，深但通透。
*/
body.ocean, [data-theme="ocean"] {
  --bg:             #0e1117;
  --bg-deep:        #0a0d12;
  --surface-1:      #161b24;
  --surface-2:      #1c222d;
  --surface-3:      #232a37;
  --surface-sunken: #12161d;
  --sidebar:        #12161d;

  --line-1: #212836;
  --line-2: #2b3342;
  --line-3: #3a4457;

  --text-1: #eef2f8;
  --text-2: #a8b4c8;
  --text-3: #77839a;
  --text-4: #5b6579;

  --accent:      #4fd1c5;
  --accent-2:    #38b2a3;
  --accent-soft: rgba(79, 209, 197, .13);

  --pos:      #3ddc84;
  --neg:      #ff6b6b;
  --pos-soft: rgba(61, 220, 132, .15);
  --neg-soft: rgba(255, 107, 107, .15);
  --info:     #5b9dff;
  --warn:     #f5a524;
  --danger:   #ff6b6b;
  --neutral:  #a78bfa;

  --dir-big:   #f5a524;
  --dir-small: #5b9dff;

  --risk-near: #ff6b6b;
  --risk-mid:  #f5a524;
  --risk-far:  #3ddc84;

  --sh-1: 0 1px 2px rgba(0,0,0,.35);
  --sh-2: 0 2px 8px rgba(0,0,0,.40);
  --sh-3: 0 16px 48px rgba(0,0,0,.55);
  --band-fill: rgba(91, 157, 255, .07);
}

/* ══════════════════════ 令牌：终端「Terminal」（深色·高对比） ══════════════════════
   给"要盯数字、要高对比"的场景。近黑底 + 琥珀主色，
   数字对比拉到最高 —— 这是交易终端几十年的做法，不是审美选择，是辨识度。
*/
body.terminal, [data-theme="terminal"] {
  --bg:             #000000;
  --bg-deep:        #000000;
  --surface-1:      #0a0a0a;
  --surface-2:      #111111;
  --surface-3:      #1a1a1a;
  --surface-sunken: #050505;
  --sidebar:        #050505;

  /* 高对比：描边比深海亮得多，边界一眼可见 */
  --line-1: #262626;
  --line-2: #3d3d3d;
  --line-3: #595959;

  --text-1: #ffffff;
  --text-2: #cccccc;
  --text-3: #8f8f8f;
  --text-4: #666666;

  --accent:      #ffb000;
  --accent-2:    #e09600;
  --accent-soft: rgba(255, 176, 0, .14);

  --pos:      #00e08a;
  --neg:      #ff3b30;
  --pos-soft: rgba(0, 224, 138, .16);
  --neg-soft: rgba(255, 59, 48, .16);
  --info:     #4da6ff;
  --warn:     #ffb000;
  --danger:   #ff3b30;
  --neutral:  #b18cff;

  --dir-big:   #ffb000;
  --dir-small: #4da6ff;

  --risk-near: #ff3b30;
  --risk-mid:  #ffb000;
  --risk-far:  #00e08a;

  --sh-1: none;
  --sh-2: 0 0 0 1px #262626;
  --sh-3: 0 0 0 1px #3d3d3d, 0 20px 60px rgba(0,0,0,.9);
  --band-fill: rgba(77, 166, 255, .09);

  /* 结构差异：小圆角 + 等宽数字（终端感） */
  --r-1: 2px; --r-2: 3px; --r-3: 4px; --r-4: 6px;
  --font-num: "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
}

/* ══════════════════════ 令牌 6/7：暗夜「Midnight」 ══════════════════════
   **暖灰**底 + 珊瑚红 + 大圆角。和深海的区别很明确：
   深海是冷蓝 + 青绿 + 硬朗；这一套是暖灰 + 珊瑚 + 圆润。
   给"晚上看盘但不想看冷色"的场景。
*/
body.midnight, [data-theme="midnight"] {
  --bg:             #15141a;
  --bg-deep:        #100f14;
  --surface-1:      #1e1c25;
  --surface-2:      #26232f;
  --surface-3:      #302c3a;
  --surface-sunken: #191720;
  --sidebar:        #1a1821;

  --line-1: #2c2936;
  --line-2: #3a3646;
  --line-3: #4d4859;

  --text-1: #f2eff7;
  --text-2: #b5aec6;
  --text-3: #857e96;
  --text-4: #645e73;

  --accent:      #ff7a70;
  --accent-2:    #e8655b;
  --accent-soft: rgba(255, 122, 112, .14);

  --pos:      #4ade9b;
  --neg:      #ff7a70;
  --pos-soft: rgba(74, 222, 155, .15);
  --neg-soft: rgba(255, 122, 112, .15);
  --info:     #8ab4ff;
  --warn:     #f2b544;
  --danger:   #ff7a70;
  --neutral:  #c4a3ff;

  --dir-big:   #f2b544;
  --dir-small: #8ab4ff;

  --risk-near: #ff7a70;
  --risk-mid:  #f2b544;
  --risk-far:  #4ade9b;

  --sh-1: 0 1px 2px rgba(0,0,0,.3);
  --sh-2: 0 4px 14px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.3);
  --sh-3: 0 20px 56px rgba(0,0,0,.6);
  --band-fill: rgba(138, 180, 255, .07);

  /* 结构差异：圆角更大、更"卡片化" */
  --r-1: 10px; --r-2: 16px; --r-3: 22px; --r-4: 28px;
}


/* ══════════════════════ 重置 ══════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ══════════════════════ 排版原语 ══════════════════════ */
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
}
.mono { font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.up   { color: var(--pos) !important; }
.down { color: var(--neg) !important; }
.muted { color: var(--text-2); }
.dim   { color: var(--text-3); }
.weak  { color: var(--text-4); }
.code {
  font-variant-numeric: tabular-nums; font-size: .92em;
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-radius: var(--r-1); padding: 1px 6px;
}
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* 微标签 */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-micro); font-weight: 600;
  color: var(--text-3); background: var(--surface-3);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.tag.solid { background: var(--surface-3); }

/* 徽章：状态语义（新版：实心软底，无描边 —— 更干净） */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-micro); font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  color: var(--text-3); background: var(--surface-3); white-space: nowrap;
}
.badge.ok   { color: var(--pos); background: var(--pos-soft); }
.badge.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.badge.err  { color: var(--neg); background: var(--neg-soft); }
.badge.dim  { color: var(--text-4); }
.badge.info { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }

/* ══════════════════════ 按钮原语 ══════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
.btn:hover { color: var(--text-1); border-color: var(--line-3); box-shadow: var(--sh-1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.primary {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.info { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.btn.danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.btn.danger:hover { background: var(--neg); color: #fff; border-color: var(--neg); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-3); border-color: transparent; box-shadow: none; }
.btn.sm { height: 28px; padding: 0 11px; font-size: var(--fs-micro); }

/* 分段控件 */
.seg { display: inline-flex; gap: 2px; background: var(--surface-3); padding: 3px; border-radius: var(--r-1); }
.seg button {
  height: 26px; padding: 0 12px; font-size: var(--fs-micro); font-weight: 600;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text-3); cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.seg button:hover { color: var(--text-1); }
.seg button.active { color: var(--text-1); background: var(--surface-1); box-shadow: var(--sh-1); }

/* ══════════════════════ 表单原语 ══════════════════════ */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field > label { font-size: var(--fs-micro); font-weight: 600; color: var(--text-3); }
.input, .select {
  height: 36px; padding: 0 12px; font-size: var(--fs-sm);
  font-family: var(--font-ui); color: var(--text-1);
  background: var(--surface-1);
  border: 1px solid var(--line-2); border-radius: var(--r-1);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input:focus, .select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--sh-focus);
}
.input.num { font-variant-numeric: tabular-nums; }
.input:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-3); }
.field .hint { font-size: var(--fs-micro); color: var(--text-4); line-height: 1.5; }
.field .err { font-size: var(--fs-micro); color: var(--neg); }

/* 开关 */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .sl {
  width: 40px; height: 23px; border-radius: 999px;
  background: var(--line-3);
  transition: background var(--dur-2) var(--ease); position: relative;
}
.switch .sl::before {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease);
}
.switch input:checked + .sl { background: var(--pos); }
.switch input:checked + .sl::before { transform: translateX(17px); }

/* ══════════════════════ 滚动条 ══════════════════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-3); border-radius: 5px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: content-box; }

/* ══════════════════════ 无障碍 / 降级 ══════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.empty {
  text-align: center; color: var(--text-3); padding: var(--sp-7) var(--sp-4);
  font-size: var(--fs-sm); line-height: 1.8;
}
.empty b { color: var(--text-2); }
.sec-t {
  font-size: var(--fs-micro); font-weight: 700; color: var(--text-4);
  text-transform: uppercase; letter-spacing: .8px;
  margin: var(--sp-5) 0 var(--sp-3);
}

/* ══════════════════════ 令牌 8/8：黑金「Heijin」 ══════════════════════
   原版 VPS 上「顶呱呱 套利控制台」的配色：深蓝黑 + 金。

   **值直接取自原版模板**（`audit/templates/dashboard.html` 实测）：
       --bg #101a30   --panel #1b2745   --panel2 #243355
       --line #33436e --line2 #41537f   --gold #ffdf8a  --gold2 #e9b64c
       --green #5ce795 --red #ff8a8a     --txt #f4f6fc
       --sub #b9c5de  --dim #8b9ab8      --radius 12px

   为什么把它作为默认：用户看过原版之后说「我还是喜欢原来的那个版面儿，
   逃离控制台」—— 指的是"这是产品，不是开发工具"。金色 + 深蓝黑是那个
   观感的核心，不是随便挑的颜色。
*/
body.heijin, [data-theme="heijin"] {




  --card-shadow: none;
  --bg: #131722;
  --bg-deep: #0e1117;
  --surface-1: #1e222d;
  --surface-2: #2a2e39;
  --surface-3: #363a45;
  --surface-sunken: #171b26;
  --sidebar: #131722;

  --line-1: #232733;
  --line-2: #2a2e39;
  --line-3: #363a45;

  --text-1: #d1d4dc;
  --text-2: #b2b5be;
  --text-3: #787b86;
  --text-4: #5d606b;

  --accent: #2962ff;
  --accent-2: #1e53e5;
  --accent-soft: rgba(41,98,255,.15);

  --pos: #26a69a;
  --neg: #ef5350;
  --pos-soft: rgba(92, 231, 149, .15);
  --neg-soft: rgba(255, 138, 138, .15);
  --info: #2962ff;
  --warn:     #ffc861;
  --danger:   #ff6b6b;
  --neutral: #9c7bff;

  --dir-big:   #ffc861;
  --dir-small: #6f9cff;

  --risk-near: #ff6b6b;
  --risk-mid:  #ffc861;
  --risk-far:  #5ce795;

  --band-fill: rgba(111, 156, 255, .08);

  /* 原版 --radius: 12px */
  --radius: 4px;
  --r-1: 7px;  --r-2: 12px;  --r-3: 12px;  --r-4: 16px;

  --sh-1: none;
  --sh-2: 0 4px 16px rgba(0,0,0,.5);
  --sh-3: inset 0 1px 0 rgba(255,255,255,.06),
          0 10px 26px rgba(8, 14, 30, .35),
          0 0 34px rgba(255, 200, 90, .05);

  /* 卡片渐变底 —— 原版 `.card` / `.stat` 的底。
     少了这个，只换颜色还是"平板"，出不来顶着金光的那种质感。 */
  --card-grad: #1e222d;
  --r-3: 4px;
}