/* ==========================================================================
   智能型 OA 办公平台 —— 多风格主题库
   通过 <html data-theme="xxx"> 切换；每套主题仅覆盖色板变量，结构样式不变。
   变量分组：品牌色 / 面板背景 / 文字 / 语义色上的文字色 / 圆角 / 密度
   ========================================================================== */

/* KPI 数值渐变兜底 */
:root { --kpi-val-1: #ffffff; --kpi-val-2: #9dc2ff; }

/* ---------- 1. 深空蓝（默认 · 经典科技风） ---------- */
html[data-theme="deepblue"] {
  --brand-rgb: 47, 125, 255;   --brand-2-rgb: 27, 79, 216;   --line-rgb: 84, 152, 255;
  --cyan-rgb: 34, 211, 238;   --purple-rgb: 139, 92, 246;
  --bg-rgb: 6, 10, 19;   --panel-rgb: 15, 24, 42;   --panel-2-rgb: 19, 31, 54;
  --sidebar-rgb: 11, 19, 34;  --sidebar-2-rgb: 8, 14, 26;  --shadow-rgb: 0, 8, 24;
  --text: #e6eefc; --text-2: #a9bcdc; --muted: #7791b8;
  --on-brand: #7fb0ff; --on-green: #4fe0a8; --on-red: #ff8b96;
  --on-orange: #ffc45e; --on-cyan: #6ee7f5; --on-purple: #b79cff; --on-gray: #9db2d4;
  --brand: #2f7dff; --brand-2: #1b4fd8;
  --radius: 14px; --radius-sm: 9px;
  --glow-a: rgba(47, 125, 255, .18); --glow-b: rgba(34, 211, 238, .12); --glow-c: rgba(139, 92, 246, .10);
  --grid-line: rgba(84, 152, 255, .045);
  --bg: #060a13; --bg-2: #0a1120;
  --panel-solid: #0e1728; --panel-2: #131f36;
  --line: rgba(var(--line-rgb), .16); --line-strong: rgba(var(--line-rgb), .34);
  --shadow-rgb: 0, 8, 24;
  --kpi-val-1: #ffffff; --kpi-val-2: #9dc2ff;
  --on-brand-hi: #ffffff;
  --th-bg: rgba(var(--sidebar-rgb), .7); --inset: rgba(var(--sidebar-2-rgb), .55);
  --field-bg: rgba(var(--sidebar-2-rgb), .85);
  --glow-a: .12; --glow-b: .10;
}

/* ---------- 2. 暗夜紫（神秘 · 高级感） ---------- */
html[data-theme="purple"] {
  --brand-rgb: 139, 92, 246;  --brand-2-rgb: 91, 33, 182;   --line-rgb: 167, 139, 250;
  --cyan-rgb: 45, 212, 191;   --purple-rgb: 217, 70, 239;
  --bg-rgb: 10, 7, 20;   --panel-rgb: 24, 18, 43;  --panel-2-rgb: 32, 24, 56;
  --sidebar-rgb: 17, 12, 32; --sidebar-2-rgb: 12, 8, 24;  --shadow-rgb: 4, 2, 12;
  --text: #ece7fb; --text-2: #bdb2e0; --muted: #8b7fb8;
  --on-brand: #c4a9ff; --on-green: #5fe3c0; --on-red: #ff8fa0;
  --on-orange: #ffca6b; --on-cyan: #6ee7d8; --on-purple: #eb9dfb; --on-gray: #a99dc9;
  --brand: #8b5cf6; --brand-2: #5b21b6;
  --radius: 16px; --radius-sm: 10px;
  --glow-a: rgba(139, 92, 246, .20); --glow-b: rgba(217, 70, 239, .12); --glow-c: rgba(45, 212, 191, .08);
  --grid-line: rgba(167, 139, 250, .05);
  --bg: #0a0714; --bg-2: #120c22;
  --panel-solid: #18122b; --panel-2: #201838;
  --line: rgba(var(--line-rgb), .18); --line-strong: rgba(var(--line-rgb), .36);
  --shadow-rgb: 4, 2, 12;
  --kpi-val-1: #f3ecff; --kpi-val-2: #c4a9ff;
  --on-brand-hi: #ffffff;
  --th-bg: rgba(var(--sidebar-rgb), .7); --inset: rgba(var(--sidebar-2-rgb), .55);
  --field-bg: rgba(var(--sidebar-2-rgb), .85);
  --glow-a: .13; --glow-b: .11;
}

/* ---------- 3. 翡翠绿（清新 · 环保） ---------- */
html[data-theme="emerald"] {
  --brand-rgb: 16, 185, 129;  --brand-2-rgb: 5, 150, 105;   --line-rgb: 52, 211, 153;
  --cyan-rgb: 45, 212, 191;   --purple-rgb: 16, 185, 129;
  --bg-rgb: 5, 15, 12;   --panel-rgb: 13, 32, 26;  --panel-2-rgb: 18, 42, 34;
  --sidebar-rgb: 9, 26, 21;  --sidebar-2-rgb: 6, 20, 16;  --shadow-rgb: 0, 10, 8;
  --text: #e2f5ec; --text-2: #a3c9b8; --muted: #74a491;
  --on-brand: #6ee7b7; --on-green: #7ff0c4; --on-red: #ff9191;
  --on-orange: #fcd34d; --on-cyan: #6ee7d8; --on-purple: #86efac; --on-gray: #9bbdae;
  --brand: #10b981; --brand-2: #059669;
  --radius: 12px; --radius-sm: 8px;
  --glow-a: rgba(16, 185, 129, .18); --glow-b: rgba(45, 212, 191, .12); --glow-c: rgba(16, 185, 129, .08);
  --grid-line: rgba(52, 211, 153, .05);
  --bg: #050f0c; --bg-2: #0a1a15;
  --panel-solid: #0d201a; --panel-2: #122a22;
  --line: rgba(var(--line-rgb), .16); --line-strong: rgba(var(--line-rgb), .34);
  --shadow-rgb: 0, 10, 8;
  --kpi-val-1: #eafff5; --kpi-val-2: #6ee7b7;
  --on-brand-hi: #ffffff;
  --th-bg: rgba(var(--sidebar-rgb), .7); --inset: rgba(var(--sidebar-2-rgb), .55);
  --field-bg: rgba(var(--sidebar-2-rgb), .85);
  --glow-a: .12; --glow-b: .10;
}

/* ---------- 4. 暖阳橙（活力 · 商务） ---------- */
html[data-theme="amber"] {
  --brand-rgb: 245, 158, 11;  --brand-2-rgb: 217, 119, 6;   --line-rgb: 251, 191, 36;
  --cyan-rgb: 251, 146, 60;   --purple-rgb: 244, 114, 182;
  --bg-rgb: 18, 12, 6;   --panel-rgb: 38, 27, 16;  --panel-2-rgb: 48, 35, 21;
  --sidebar-rgb: 30, 21, 12; --sidebar-2-rgb: 22, 15, 8;  --shadow-rgb: 12, 6, 0;
  --text: #fdf0dc; --text-2: #d9bd93; --muted: #ab8d63;
  --on-brand: #fcd34d; --on-green: #86efac; --on-red: #ff9a8b;
  --on-orange: #fde68a; --on-cyan: #fdba74; --on-purple: #f9a8d4; --on-gray: #c4ab8b;
  --brand: #f59e0b; --brand-2: #d97706;
  --radius: 14px; --radius-sm: 9px;
  --glow-a: rgba(245, 158, 11, .18); --glow-b: rgba(251, 146, 60, .12); --glow-c: rgba(244, 114, 182, .08);
  --grid-line: rgba(251, 191, 36, .05);
  --bg: #120c06; --bg-2: #1c1409;
  --panel-solid: #261b10; --panel-2: #302315;
  --line: rgba(var(--line-rgb), .16); --line-strong: rgba(var(--line-rgb), .34);
  --shadow-rgb: 12, 6, 0;
  --kpi-val-1: #fff8ec; --kpi-val-2: #fcd34d;
  --on-brand-hi: #2a1a05;
  --th-bg: rgba(var(--sidebar-rgb), .7); --inset: rgba(var(--sidebar-2-rgb), .55);
  --field-bg: rgba(var(--sidebar-2-rgb), .85);
  --glow-a: .12; --glow-b: .10;
}

/* ---------- 5. 冰川银（冷峻 · 专业） ---------- */
html[data-theme="glacier"] {
  --brand-rgb: 56, 152, 220;  --brand-2-rgb: 26, 111, 178;   --line-rgb: 125, 178, 222;
  --cyan-rgb: 103, 200, 226;  --purple-rgb: 129, 140, 248;
  --bg-rgb: 9, 14, 20;   --panel-rgb: 20, 30, 40;  --panel-2-rgb: 26, 38, 50;
  --sidebar-rgb: 15, 23, 31; --sidebar-2-rgb: 11, 18, 25;  --shadow-rgb: 2, 8, 14;
  --text: #e8f0f7; --text-2: #a9bfd1; --muted: #7b93a8;
  --on-brand: #8ecdf5; --on-green: #6ee7b7; --on-red: #fca5a5;
  --on-orange: #fcd34d; --on-cyan: #7ddce8; --on-purple: #a5b4fc; --on-gray: #a3b6c6;
  --brand: #3898dc; --brand-2: #1a6fb2;
  --radius: 8px; --radius-sm: 6px;
  --glow-a: rgba(56, 152, 220, .16); --glow-b: rgba(103, 200, 226, .10); --glow-c: rgba(129, 140, 248, .08);
  --grid-line: rgba(125, 178, 222, .05);
  --bg: #090e14; --bg-2: #0f1720;
  --panel-solid: #141e28; --panel-2: #1a2632;
  --line: rgba(var(--line-rgb), .16); --line-strong: rgba(var(--line-rgb), .32);
  --shadow-rgb: 2, 8, 14;
  --kpi-val-1: #f0f8ff; --kpi-val-2: #8ecdf5;
  --on-brand-hi: #ffffff;
  --th-bg: rgba(var(--sidebar-rgb), .7); --inset: rgba(var(--sidebar-2-rgb), .55);
  --field-bg: rgba(var(--sidebar-2-rgb), .85);
  --glow-a: .11; --glow-b: .09;
}

/* ---------- 6. 中国红（庄重 · 政务） ---------- */
html[data-theme="crimson"] {
  --brand-rgb: 225, 62, 74;   --brand-2-rgb: 176, 32, 44;   --line-rgb: 240, 120, 128;
  --cyan-rgb: 250, 176, 80;   --purple-rgb: 214, 128, 200;
  --bg-rgb: 17, 8, 10;   --panel-rgb: 36, 18, 21;  --panel-2-rgb: 46, 23, 27;
  --sidebar-rgb: 28, 13, 16; --sidebar-2-rgb: 20, 9, 12;  --shadow-rgb: 12, 2, 4;
  --text: #fbe9ea; --text-2: #d9b3b6; --muted: #ab7d81;
  --on-brand: #ff9aa2; --on-green: #6ee7a8; --on-red: #ff9aa2;
  --on-orange: #fcd34d; --on-cyan: #fbc97e; --on-purple: #eda7e6; --on-gray: #c39b9e;
  --brand: #e13e4a; --brand-2: #b0202c;
  --radius: 10px; --radius-sm: 7px;
  --glow-a: rgba(225, 62, 74, .18); --glow-b: rgba(250, 176, 80, .10); --glow-c: rgba(214, 128, 200, .08);
  --grid-line: rgba(240, 120, 128, .05);
  --bg: #11080a; --bg-2: #1c0d10;
  --panel-solid: #241215; --panel-2: #2e171b;
  --line: rgba(var(--line-rgb), .18); --line-strong: rgba(var(--line-rgb), .36);
  --shadow-rgb: 12, 2, 4;
  --kpi-val-1: #fff0f1; --kpi-val-2: #ff9aa2;
  --on-brand-hi: #ffffff;
  --th-bg: rgba(var(--sidebar-rgb), .7); --inset: rgba(var(--sidebar-2-rgb), .55);
  --field-bg: rgba(var(--sidebar-2-rgb), .85);
  --glow-a: .13; --glow-b: .11;
}

/* ---------- 7. 墨韵黑（极简 · 克制） ---------- */
html[data-theme="ink"] {
  --brand-rgb: 214, 219, 228; --brand-2-rgb: 150, 158, 170;  --line-rgb: 120, 128, 140;
  --cyan-rgb: 168, 178, 190;  --purple-rgb: 180, 168, 200;
  --bg-rgb: 10, 10, 11;   --panel-rgb: 22, 22, 24;  --panel-2-rgb: 28, 28, 31;
  --sidebar-rgb: 16, 16, 18; --sidebar-2-rgb: 12, 12, 13;  --shadow-rgb: 0, 0, 0;
  --text: #eceef1; --text-2: #b0b5bd; --muted: #82878f;
  --on-brand: #e8ebf0; --on-green: #9ad9b4; --on-red: #f0a0a6;
  --on-orange: #e8c88a; --on-cyan: #b8c4cf; --on-purple: #cfc4e0; --on-gray: #a8adb5;
  --brand: #d6dbe4; --brand-2: #969eaa;
  --radius: 6px; --radius-sm: 4px;
  --glow-a: rgba(214, 219, 228, .07); --glow-b: rgba(168, 178, 190, .05); --glow-c: rgba(180, 168, 200, .04);
  --grid-line: rgba(120, 128, 140, .04);
  --bg: #0a0a0b; --bg-2: #121213;
  --panel-solid: #161618; --panel-2: #1c1c1f;
  --line: rgba(var(--line-rgb), .14); --line-strong: rgba(var(--line-rgb), .28);
  --shadow-rgb: 0, 0, 0;
  --kpi-val-1: #f4f5f7; --kpi-val-2: #a8aeb8;
  --on-brand-hi: #111214;
  --th-bg: rgba(var(--sidebar-rgb), .7); --inset: rgba(var(--sidebar-2-rgb), .55);
  --field-bg: rgba(var(--sidebar-2-rgb), .85);
  --glow-a: .10; --glow-b: .08;
}

/* ---------- 8. 樱雪白（浅色 · 清爽） ---------- */
html[data-theme="snow"] {
  --brand-rgb: 15, 118, 233;  --brand-2-rgb: 8, 82, 178;    --line-rgb: 30, 90, 170;
  --cyan-rgb: 8, 145, 178;    --purple-rgb: 109, 40, 217;
  --green-rgb: 5, 150, 105;   --orange-rgb: 194, 108, 4;   --red-rgb: 205, 32, 47;   --muted-rgb: 100, 116, 139;
  --bg-rgb: 244, 246, 251;  --panel-rgb: 255, 255, 255; --panel-2-rgb: 244, 247, 252;
  --sidebar-rgb: 255, 255, 255; --sidebar-2-rgb: 247, 249, 253; --shadow-rgb: 15, 23, 42;
  --text: #16203a; --text-2: #3f4d68; --muted: #64748b;
  --bg: #f4f6fb; --bg-2: #eaeef6;
  --panel: rgba(255, 255, 255, .94); --panel-solid: #ffffff; --panel-2: #f4f7fc;
  --line: rgba(15, 60, 130, .13); --line-strong: rgba(15, 60, 130, .28);
  --on-brand: #0f76e9; --on-green: #047857; --on-red: #b91c1c;
  --on-orange: #a16207; --on-cyan: #0e7490; --on-purple: #6d28d9; --on-gray: #475569;
  --brand: #0f76e9; --brand-2: #0852b2;
  --shadow: 0 12px 32px rgba(15, 23, 42, .10);
  --radius: 12px; --radius-sm: 8px;
  --glow-a: rgba(15, 118, 233, .10); --glow-b: rgba(8, 145, 178, .07); --glow-c: rgba(109, 40, 217, .05);
  --grid-line: rgba(15, 60, 130, .035);
  --is-light: 1;
  --kpi-val-1: #16203a; --kpi-val-2: #0f76e9;
  --on-brand-hi: #0b3f8f;
  --th-bg: #eef2f8; --inset: #f7f9fc;
  --field-bg: #f7f9fc;
  --glow-a: .07; --glow-b: .06;
  --kpi-bg: linear-gradient(160deg, #ffffff, #f7f9fc);
}

/* ---------- 9. 雅致灰（浅色 · 商务办公） ---------- */
html[data-theme="linen"] {
  --brand-rgb: 21, 128, 122;  --brand-2-rgb: 13, 94, 89;    --line-rgb: 23, 130, 122;
  --cyan-rgb: 14, 116, 144;   --purple-rgb: 91, 33, 182;
  --green-rgb: 22, 130, 60;   --orange-rgb: 180, 105, 10;  --red-rgb: 190, 42, 48;   --muted-rgb: 110, 116, 124;
  --bg-rgb: 240, 238, 233;  --panel-rgb: 255, 254, 251; --panel-2-rgb: 245, 243, 238;
  --sidebar-rgb: 252, 251, 248; --sidebar-2-rgb: 243, 241, 236; --shadow-rgb: 41, 37, 36;
  --text: #1f2421; --text-2: #3f4a45; --muted: #6e747c;
  --bg: #f0eee9; --bg-2: #e6e3db;
  --panel: rgba(255, 254, 251, .95); --panel-solid: #fffefb; --panel-2: #f5f3ee;
  --line: rgba(23, 90, 80, .14); --line-strong: rgba(23, 90, 80, .30);
  --on-brand: #0f766e; --on-green: #15803c; --on-red: #be2a30;
  --on-orange: #a16207; --on-cyan: #0e7490; --on-purple: #5b21b6; --on-gray: #4b5563;
  --brand: #15807a; --brand-2: #0d5e59;
  --shadow: 0 12px 30px rgba(41, 37, 36, .12);
  --radius: 10px; --radius-sm: 7px;
  --glow-a: rgba(21, 128, 122, .09); --glow-b: rgba(14, 116, 144, .06); --glow-c: rgba(91, 33, 182, .04);
  --grid-line: rgba(23, 90, 80, .035);
  --is-light: 1;
  --kpi-val-1: #1f2421; --kpi-val-2: #15807a;
  --on-brand-hi: #0b4a46;
  --th-bg: #f2efe8; --inset: #f8f6f1;
  --field-bg: #f8f6f1;
  --glow-a: .07; --glow-b: .06;
  --kpi-bg: linear-gradient(160deg, #ffffff, #f7f9fc);
}

/* ---------- 10. 深海蓝（沉稳 · 数据密集） ---------- */
html[data-theme="abyss"] {
  --brand-rgb: 0, 168, 204;   --brand-2-rgb: 0, 122, 148;   --line-rgb: 42, 158, 186;
  --cyan-rgb: 72, 209, 226;   --purple-rgb: 96, 165, 250;
  --bg-rgb: 2, 12, 20;   --panel-rgb: 8, 27, 40;   --panel-2-rgb: 12, 35, 50;
  --sidebar-rgb: 5, 20, 31;  --sidebar-2-rgb: 3, 15, 24;  --shadow-rgb: 0, 6, 12;
  --text: #dff1f8; --text-2: #96bdcd; --muted: #62899b;
  --on-brand: #5fd0e6; --on-green: #52d6a4; --on-red: #ff8fa0;
  --on-orange: #fbbf4c; --on-cyan: #7ee0ee; --on-purple: #9dc0fb; --on-gray: #8fb0c0;
  --brand: #00a8cc; --brand-2: #007a94;
  --radius: 8px; --radius-sm: 5px;
  --glow-a: rgba(0, 168, 204, .18); --glow-b: rgba(72, 209, 226, .10); --glow-c: rgba(96, 165, 250, .07);
  --grid-line: rgba(42, 158, 186, .05);
  --density: compact;
  --bg: #020c14; --bg-2: #061722;
  --panel-solid: #081b28; --panel-2: #0c2332;
  --line: rgba(var(--line-rgb), .16); --line-strong: rgba(var(--line-rgb), .32);
  --shadow-rgb: 0, 6, 12;
  --kpi-val-1: #e2f7fd; --kpi-val-2: #5fd0e6;
  --on-brand-hi: #ffffff;
  --th-bg: rgba(var(--sidebar-rgb), .7); --inset: rgba(var(--sidebar-2-rgb), .55);
  --field-bg: rgba(var(--sidebar-2-rgb), .85);
  --glow-a: .12; --glow-b: .10;
}

/* ==========================================================================
   图表色板（ECharts 专用）
   每套主题给出一组图表专用变量，使所有图表（柱/线/饼/环）与界面同色调：
     --ch-1..6  系列主色      --ch-text  数据标签文字
     --ch-axis  坐标轴/图例   --ch-grid  网格分割线   --ch-line 轴线
     --ch-tip-* 提示框        --ch-pie-border 扇区描边（等于面板底色）
   ========================================================================== */
html[data-theme="deepblue"] {
  --ch-1:#2f7dff; --ch-2:#22d3ee; --ch-3:#8b5cf6; --ch-4:#16c47f; --ch-5:#f59e0b; --ch-6:#ff4d5e;
  --ch-text:#a9bcdc; --ch-axis:#8ba0c4;
  --ch-grid:rgba(84,152,255,.09); --ch-line:rgba(84,152,255,.28);
  --ch-tip-bg:#0b1424; --ch-tip-border:rgba(84,152,255,.38); --ch-tip-text:#e6eefc;
  --ch-pie-border:#0e1728;
}
html[data-theme="purple"] {
  --ch-1:#8b5cf6; --ch-2:#2dd4bf; --ch-3:#a855f7; --ch-4:#22c55e; --ch-5:#f59e0b; --ch-6:#f43f5e;
  --ch-text:#bdb2e0; --ch-axis:#8b7fb8;
  --ch-grid:rgba(167,139,250,.10); --ch-line:rgba(167,139,250,.30);
  --ch-tip-bg:#150f28; --ch-tip-border:rgba(167,139,250,.38); --ch-tip-text:#ece7fb;
  --ch-pie-border:#18122b;
}
html[data-theme="emerald"] {
  --ch-1:#10b981; --ch-2:#2dd4bf; --ch-3:#0ea5e9; --ch-4:#84cc16; --ch-5:#f59e0b; --ch-6:#ef4444;
  --ch-text:#a3c9b8; --ch-axis:#74a491;
  --ch-grid:rgba(52,211,153,.10); --ch-line:rgba(52,211,153,.30);
  --ch-tip-bg:#0a1c17; --ch-tip-border:rgba(52,211,153,.36); --ch-tip-text:#e2f5ec;
  --ch-pie-border:#0d201a;
}
html[data-theme="amber"] {
  --ch-1:#f59e0b; --ch-2:#fb923c; --ch-3:#8b5cf6; --ch-4:#22c55e; --ch-5:#ef4444; --ch-6:#eab308;
  --ch-text:#d9bd93; --ch-axis:#ab8d63;
  --ch-grid:rgba(251,191,36,.10); --ch-line:rgba(251,191,36,.30);
  --ch-tip-bg:#221708; --ch-tip-border:rgba(251,191,36,.36); --ch-tip-text:#fdf0dc;
  --ch-pie-border:#261b10;
}
html[data-theme="glacier"] {
  --ch-1:#3898dc; --ch-2:#67c8e2; --ch-3:#818cf8; --ch-4:#22c55e; --ch-5:#f59e0b; --ch-6:#ef4444;
  --ch-text:#a9bfd1; --ch-axis:#7b93a8;
  --ch-grid:rgba(125,178,222,.10); --ch-line:rgba(125,178,222,.30);
  --ch-tip-bg:#101a24; --ch-tip-border:rgba(125,178,222,.36); --ch-tip-text:#e8f0f7;
  --ch-pie-border:#141e28;
}
html[data-theme="crimson"] {
  --ch-1:#e13e4a; --ch-2:#fab050; --ch-3:#d680c8; --ch-4:#22c55e; --ch-5:#f59e0b; --ch-6:#ef4444;
  --ch-text:#d9b3b6; --ch-axis:#ab7d81;
  --ch-grid:rgba(240,120,128,.10); --ch-line:rgba(240,120,128,.30);
  --ch-tip-bg:#1e0f12; --ch-tip-border:rgba(240,120,128,.36); --ch-tip-text:#fbe9ea;
  --ch-pie-border:#241215;
}
html[data-theme="ink"] {
  --ch-1:#cfd6e0; --ch-2:#9fb0c4; --ch-3:#b9a7e3; --ch-4:#7fd1a3; --ch-5:#e8c88a; --ch-6:#f0a0a6;
  --ch-text:#b0b5bd; --ch-axis:#82878f;
  --ch-grid:rgba(120,128,140,.12); --ch-line:rgba(120,128,140,.32);
  --ch-tip-bg:#1b1b1e; --ch-tip-border:rgba(120,128,140,.40); --ch-tip-text:#eceef1;
  --ch-pie-border:#161618;
}
html[data-theme="abyss"] {
  --ch-1:#00a8cc; --ch-2:#48d1e2; --ch-3:#60a5fa; --ch-4:#34d399; --ch-5:#fbbf4c; --ch-6:#fb7185;
  --ch-text:#96bdcd; --ch-axis:#62899b;
  --ch-grid:rgba(42,158,186,.10); --ch-line:rgba(42,158,186,.30);
  --ch-tip-bg:#04161f; --ch-tip-border:rgba(42,158,186,.38); --ch-tip-text:#dff1f8;
  --ch-pie-border:#081b28;
}
html[data-theme="snow"] {
  --ch-1:#0f76e9; --ch-2:#0891b2; --ch-3:#6d28d9; --ch-4:#059669; --ch-5:#c26c04; --ch-6:#cd202f;
  --ch-text:#3f4d68; --ch-axis:#64748b;
  --ch-grid:rgba(15,60,130,.10); --ch-line:rgba(15,60,130,.24);
  --ch-tip-bg:#ffffff; --ch-tip-border:rgba(15,60,130,.22); --ch-tip-text:#16203a;
  --ch-pie-border:#ffffff;
}
html[data-theme="linen"] {
  --ch-1:#15807a; --ch-2:#0e7490; --ch-3:#5b21b6; --ch-4:#16823c; --ch-5:#b4690a; --ch-6:#be2a30;
  --ch-text:#3f4a45; --ch-axis:#6e747c;
  --ch-grid:rgba(23,90,80,.10); --ch-line:rgba(23,90,80,.24);
  --ch-tip-bg:#fffefb; --ch-tip-border:rgba(23,90,80,.22); --ch-tip-text:#1f2421;
  --ch-pie-border:#fffefb;
}

/* ==========================================================================
   随主题联动的背景氛围（body 光晕 + 网格）
   ========================================================================== */
body {
  background:
    radial-gradient(1200px 700px at 12% -8%, var(--glow-a), transparent 60%),
    radial-gradient(900px 600px at 92% 4%, var(--glow-b), transparent 55%),
    radial-gradient(800px 800px at 50% 110%, var(--glow-c), transparent 60%),
    var(--bg);
}
body::before {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}
/* 浅色主题：登录页左侧改为浅底，渐变标题文字加深以保证对比度 */
html[data-theme="snow"] .login-left,
html[data-theme="linen"] .login-left {
  background:
    radial-gradient(600px 400px at 10% 0%, rgba(var(--brand-rgb), .14), transparent 60%),
    radial-gradient(400px 300px at 90% 90%, rgba(var(--cyan-rgb), .10), transparent 60%),
    linear-gradient(160deg, var(--panel-solid), var(--panel-2));
}
html[data-theme="snow"] .login-card,
html[data-theme="linen"] .login-card { box-shadow: 0 18px 48px rgba(var(--shadow-rgb), .16); }
html[data-theme="snow"] .brand .logo,
html[data-theme="linen"] .brand .logo { box-shadow: 0 6px 18px rgba(var(--brand-rgb), .30); }

html[data-theme="snow"] body::before, html[data-theme="linen"] body::before { opacity: .6; }
html[data-theme="snow"] .sidebar, html[data-theme="linen"] .sidebar { box-shadow: 1px 0 0 var(--line); }
/* 墨韵主题去掉彩色光晕 */
html[data-theme="ink"] body { background: radial-gradient(900px 600px at 50% -10%, rgba(255,255,255,.04), transparent 60%), var(--bg); }

/* ==========================================================================
   主题选择器 UI
   ========================================================================== */
.theme-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer;
  font-size: 13px; transition: .16s; white-space: nowrap; font-family: inherit;
}
.theme-btn:hover { color: var(--text); border-color: var(--line-strong); background: rgba(var(--brand-rgb), .10); }
.theme-dots { display: inline-flex; gap: 3px; }
.theme-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }

.theme-panel {
  position: absolute; right: 20px; top: 56px; width: 306px; z-index: 60;
  max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px;
  -webkit-overflow-scrolling: touch;
}
.theme-panel::-webkit-scrollbar { width: 6px; }
.theme-panel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.theme-panel::-webkit-scrollbar-track { background: transparent; }
.theme-panel h4 { margin: 0 0 4px; font-size: 13.5px; color: var(--text); }
.theme-panel .sub { color: var(--muted); font-size: 11.5px; margin-bottom: 10px; }
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.theme-card {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); cursor: pointer; transition: .16s; background: transparent; text-align: left;
  font-family: inherit; color: var(--text-2);
}
.theme-card:hover { border-color: var(--line-strong); background: rgba(var(--brand-rgb), .10); color: var(--text); }
.theme-card.active { border-color: var(--brand); background: rgba(var(--brand-rgb), .16); color: var(--text); box-shadow: 0 0 0 1px var(--brand) inset; }
.theme-sw { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px; position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.theme-sw i { position: absolute; display: block; border-radius: 2px; }
.theme-sw i.b1 { left: 4px; top: 5px; width: 9px; height: 20px; }
.theme-sw i.b2 { right: 4px; top: 5px; width: 9px; height: 20px; opacity: .55; }
.theme-card .tn { font-size: 12.5px; line-height: 1.25; }
.theme-card .tn small { display: block; color: var(--muted); font-size: 10.5px; }

/* ==========================================================================
   列表序号列 + 紧凑密度
   ========================================================================== */
table.tbl th.col-idx, table.tbl td.col-idx {
  width: 52px; min-width: 52px; text-align: center; color: var(--muted);
  font-variant-numeric: tabular-nums; font-size: 12.5px; user-select: none;
}
table.tbl th.col-idx { background: rgba(var(--brand-rgb), .07); letter-spacing: .5px; }
table.tbl tbody tr:hover td.col-idx { color: var(--brand); }
table.tbl td.col-idx { background: rgba(var(--brand-rgb), .03); }
/* 窄屏隐藏序号，避免挤压 */
@media (max-width: 1100px) { table.tbl th.col-idx, table.tbl td.col-idx { display: none; } }

/* 紧凑密度（深海主题） */
html[data-density="compact"] table.tbl th, html[data-density="compact"] table.tbl td { padding: 7px 9px; }
html[data-density="compact"] .card-bd { padding: 12px; }
html[data-density="compact"] .nav-item { padding: 7px 10px; }