/* EnergyX 设计变量。两个维度：
 *   data-skin  = classic（传统企业风：实色面板、深色侧栏）| glass（毛玻璃：极光背景 + 半透明模糊面板）
 *   data-theme = light | dark
 * 页面 CSS 不写死颜色，一律用这里的变量。
 * 金额语义沿用电力行业惯例：--up（红）= 正收益 / 上涨，--down（绿）= 负收益 / 下跌。 */
:root {
  --ink-up-light: #b52a35; --ink-down-light: #087344;
  --ink-up-dark: #fb8c9d; --ink-down-dark: #52d9aa;
  --r: 12px; --r-sm: 8px; --r-lg: 16px;
  --sb-full-w: 208px; --sb-w: var(--sb-full-w); /* 最长导航 108.02px + 缩进/内边距/外框/滚动条 97px，向上取整到 4px */
  --top-h: 56px; --gap: 10px; --seam: 6px; /* gap / seam 保持用户偏好；豁免 4px 阶梯 */ --tabbar-h: 64px;
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px;
  /* Six sizes, with aliases for the existing component roles. */
  --text-caption: 12px; --text-secondary: 13px; --text-body: 14px;
  --text-section: 16px; --text-page-title: 20px; --text-metric: 24px;
  --text-metric-compact: var(--text-page-title); --text-chart: var(--text-caption);
  --leading-body: 1.6; --leading-title: 1.4;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Noto Sans CJK SC", monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* 文字色板：正文 / 次要 / 辅助 / 主色 / 涨 / 跌 / 警告 / 错误。
 * 错误与涨共用红色字形，以文字及图标区分语义；反色仅用于实色按钮与深色侧栏。
 * 业务、导航、管理页共用这些值，图表曲线仍使用独立的 --c1…--c8。 */
:root[data-theme="light"] {
  --ink-main: #18263c; --ink-secondary: #475569; --ink-muted: #4b5870;
  --ink-up-light: #b52a35; --ink-down-light: #087344;
  --ink-up: var(--ink-up-light); --ink-down: var(--ink-down-light); --ink-warn: #8d4c06;
  --ink-error: var(--ink-up); --ink-on-brand: #ffffff;
  --solid-surface: #f4f6fa;
}
:root[data-theme="dark"] {
  --ink-main: #e6ecf7; --ink-secondary: #b4bfd1; --ink-muted: #acbad0;
  --ink-up-dark: #fb8c9d; --ink-down-dark: #52d9aa;
  --ink-up: var(--ink-up-dark); --ink-down: var(--ink-down-dark); --ink-warn: #fbbf24;
  --ink-error: var(--ink-up); --ink-on-brand: #0f1115;
  --solid-surface: #182238;
}
:root { --ink-brand: var(--pri-tx); }

/* ---------------- 传统 · 亮色 ---------------- */
:root[data-skin="classic"][data-theme="light"] {
  --bg: #f4f6f9; --bg-img: none;
  --panel: #ffffff; --panel-2: #fafbfc; --panel-3: #f5f7fa; --hover: #f2f5fa;
  --line: #e5e8ef; --line-2: #d4d9e2;
  --tx: var(--ink-main); --tx-2: var(--ink-secondary); --tx-3: var(--ink-muted); --tx-inv: var(--ink-on-brand);
  --pri: #315fc3; --pri-rgb: 49,95,195; --pri-soft: rgba(49,95,195, .10); --pri-tx: #315fc3;
  --acc: #315fc3; --acc-rgb: 49,95,195;
  --up: var(--ink-up); --up-soft: #fdecea; --down: var(--ink-down); --down-soft: #e7f6ee;
  --warn: var(--ink-warn); --warn-soft: #fff4e0; --err: var(--ink-error); --ok: var(--ink-down); --info: #315fc3;
  --sb-bg: #142238; --sb-tx: rgba(255,255,255,.72); --sb-tx-hi: #fff; --sb-active: #315fc3; --sb-hover: rgba(255,255,255,.08);
  --sb-group: rgba(255,255,255,.58); --sb-line: rgba(255,255,255,.08);
  --top-bg: #ffffff; --top-line: #e5e8ef;
  --shadow: none;
  --shadow-lg: 0 18px 48px -18px rgba(15,23,42,.28);
  --blur: none; --panel-border: 1px solid var(--line);
  --chart-grid: #e9edf3; --chart-axis: #68778d;
  --c1: #315fc3; --c2: #547d94; --c3: #8794a8; --c4: #537e7a; --c5: #797696; --c6: #96856b; --c7: #487dab; --c8: #58677d;
  --grad: linear-gradient(135deg, #315fc3, #547d94);
  color-scheme: light;
}
/* ---------------- 传统 · 暗色 ---------------- */
:root[data-skin="classic"][data-theme="dark"] {
  --bg: #121418; --bg-img: none;
  --panel: #1c1f26; --panel-2: #20242c; --panel-3: #262a33; --hover: #262b35;
  --line: #2c313b; --line-2: #3a404c;
  --tx: var(--ink-main); --tx-2: var(--ink-secondary); --tx-3: var(--ink-muted); --tx-inv: var(--ink-on-brand);
  --pri: #7da8ef; --pri-rgb: 125,168,239; --pri-soft: rgba(125,168,239, .10); --pri-tx: #7da8ef;
  --acc: #7da8ef; --acc-rgb: 125,168,239;
  --up: var(--ink-up); --up-soft: rgba(255,107,94,.13); --down: var(--ink-down); --down-soft: rgba(53,196,124,.13);
  --warn: var(--ink-warn); --warn-soft: rgba(255,171,51,.13); --err: var(--ink-error); --ok: var(--ink-down); --info: #7da8ef;
  --sb-bg: #0c0e12; --sb-tx: rgba(255,255,255,.66); --sb-tx-hi: #fff; --sb-active: #7da8ef; --sb-hover: rgba(255,255,255,.06);
  --sb-group: rgba(255,255,255,.56); --sb-line: rgba(255,255,255,.06);
  --top-bg: #171a20; --top-line: #262b33;
  --shadow: none;
  --shadow-lg: 0 18px 48px -18px rgba(0,0,0,.7);
  --blur: none; --panel-border: 1px solid var(--line);
  --chart-grid: #2a2f39; --chart-axis: #7d8696;
  --c1: #7da8ef; --c2: #7b91ad; --c3: #b4c5df; --c4: #73aaa9; --c5: #a09db7; --c6: #b4a68b; --c7: #597cba; --c8: #7e94a3;
  --grad: linear-gradient(135deg, #7da8ef, #7b91ad);
  color-scheme: dark;
}
/* ---------------- 毛玻璃 · 暗色（默认） ---------------- */
:root[data-skin="glass"][data-theme="dark"],
:root[data-skin="alice"][data-theme="dark"] {
  --bg: #050813;
  --mesh1: rgba(125,168,239,.14); --mesh2: rgba(125,168,239,.09); --mesh3: rgba(125,168,239,.07); --mesh4: rgba(125,168,239,.04);
  --mesh-base: linear-gradient(165deg, #111b2d, #172336);
  --panel: rgba(23,33,51,.94); --panel-2: rgba(255,255,255,.035); --panel-3: rgba(255,255,255,.06); --hover: rgba(255,255,255,.07);
  --line: rgba(148,163,184,.14); --line-2: rgba(148,163,184,.24);
  --tx: var(--ink-main); --tx-2: var(--ink-secondary); --tx-3: var(--ink-muted); --tx-inv: var(--ink-on-brand);
  --pri: #7da8ef; --pri-rgb: 125,168,239; --pri-soft: rgba(125,168,239, .10); --pri-tx: #7da8ef;
  --acc: #7da8ef; --acc-rgb: 125,168,239;
  --up: var(--ink-up); --up-soft: rgba(251,113,133,.14); --down: var(--ink-down); --down-soft: rgba(52,211,153,.13);
  --warn: var(--ink-warn); --warn-soft: rgba(251,191,36,.13); --err: var(--ink-error); --ok: var(--ink-down); --info: #7da8ef;
  --sb-bg: rgba(11,17,35,.52); --sb-tx: #9aa7bd; --sb-tx-hi: #fff; --sb-active: #7da8ef; --sb-hover: rgba(255,255,255,.06);
  --sb-group: #93a2b8; --sb-line: rgba(148,163,184,.12);
  --top-bg: rgba(11,17,35,.42); --top-line: rgba(148,163,184,.14);
  --shadow: none;
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.8);
  --blur: blur(16px); --panel-border: 1px solid var(--line);
  --chart-grid: rgba(148,163,184,.12); --chart-axis: #7c8aa3;
  --c1: #7da8ef; --c2: #7b91ad; --c3: #b4c5df; --c4: #73aaa9; --c5: #a09db7; --c6: #b4a68b; --c7: #597cba; --c8: #7e94a3;
  --grad: linear-gradient(135deg, #7da8ef, #7b91ad);
  color-scheme: dark;
}
/* ---------------- 毛玻璃 · 亮色 ---------------- */
:root[data-skin="glass"][data-theme="light"],
:root[data-skin="alice"][data-theme="light"] {
  --bg: #eef3fb;
  --mesh1: rgba(49,95,195,.14); --mesh2: rgba(49,95,195,.09); --mesh3: rgba(49,95,195,.07); --mesh4: rgba(49,95,195,.04);
  --mesh-base: linear-gradient(165deg, #edf2fa, #f5f7fb);
  --panel: rgba(255,255,255,.94); --panel-2: rgba(255,255,255,.42); --panel-3: rgba(15,23,42,.04); --hover: rgba(15,23,42,.05);
  --line: rgba(15,23,42,.09); --line-2: rgba(15,23,42,.16);
  --tx: var(--ink-main); --tx-2: var(--ink-secondary); --tx-3: var(--ink-muted); --tx-inv: var(--ink-on-brand);
  --pri: #315fc3; --pri-rgb: 49,95,195; --pri-soft: rgba(49,95,195, .10); --pri-tx: #315fc3;
  --acc: #315fc3; --acc-rgb: 49,95,195;
  --up: var(--ink-up); --up-soft: rgba(190,18,60,.08); --down: var(--ink-down); --down-soft: rgba(4,120,87,.09);
  --warn: var(--ink-warn); --warn-soft: rgba(180,83,9,.09); --err: var(--ink-error); --ok: var(--ink-down); --info: #315fc3;
  --sb-bg: rgba(255,255,255,.56); --sb-tx: #475569; --sb-tx-hi: #0f172a; --sb-active: #315fc3; --sb-hover: rgba(15,23,42,.05);
  --sb-group: #64748b; --sb-line: rgba(15,23,42,.08);
  --top-bg: rgba(255,255,255,.5); --top-line: rgba(15,23,42,.08);
  --shadow: none;
  --shadow-lg: 0 24px 60px -24px rgba(15,23,42,.35);
  --blur: blur(16px); --panel-border: 1px solid var(--line);
  --chart-grid: rgba(15,23,42,.07); --chart-axis: #64748b;
  --c1: #315fc3; --c2: #547d94; --c3: #8794a8; --c4: #537e7a; --c5: #797696; --c6: #96856b; --c7: #487dab; --c8: #58677d;
  --grad: linear-gradient(135deg, #315fc3, #547d94);
  color-scheme: light;
}

:root[data-theme="light"] {
  --up-soft: #fcecee; --down-soft: #e8f4ee; --warn-soft: #fff1d9;
}

/* Alice 完整玻璃材质，glass 为默认入口，alice 保留旧偏好兼容。 */
/* ---------------- 毛玻璃 · 暗色 ---------------- */
:root:is([data-skin="glass"], [data-skin="alice"])[data-theme="dark"] {
  --bg: #050813;
  --mesh1: rgba(56,96,220,.44); --mesh2: rgba(124,58,237,.36); --mesh3: rgba(6,182,212,.26); --mesh4: rgba(219,39,119,.22);
  --mesh-base: linear-gradient(165deg, #0a1226 0%, #070b18 46%, #0d0a20 100%);
  --aur1: #1e3a8a; --aur2: #6d28d9; --aur3: #0e7490; --aur-o1: .48; --aur-o2: .36; --aur-o3: .34;
  --haze: rgba(99,102,241,.20); --spot1: rgba(34,211,238,.13); --spot2: rgba(167,139,250,.14);
  --fg-rgb: 255,255,255; --glass-2: rgba(16,23,45,.34); --glass-hi: rgba(255,255,255,.07);
  --panel: rgba(11,17,35,.52); --panel-2: rgba(255,255,255,.035); --panel-3: rgba(255,255,255,.06); --hover: rgba(255,255,255,.06);
  --line: rgba(148,163,184,.14); --line-2: rgba(148,163,184,.24);
  --tx: var(--ink-main); --tx-2: var(--ink-secondary); --tx-3: var(--ink-muted); --tx-inv: var(--ink-on-brand);
  --pri: #22d3ee; --pri-rgb: 34,211,238; --pri-soft: rgba(34,211,238,.10); --pri-tx: #22d3ee;
  --acc: #818cf8; --acc-rgb: 129,140,248;
  --sb-bg: rgba(11,17,35,.52); --sb-tx: var(--ink-secondary); --sb-tx-hi: #ffffff; --sb-active: #22d3ee; --sb-hover: rgba(255,255,255,.06);
  --sb-group: var(--ink-muted); --sb-line: rgba(148,163,184,.14);
  --top-bg: linear-gradient(180deg, rgba(11,17,35,.52), rgba(16,23,45,.34)); --top-line: rgba(148,163,184,.16);
  --shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 44px -28px rgba(0,0,0,.85);
  --blur: blur(22px) saturate(1.7); --panel-border: 1px solid rgba(148,163,184,.16);
  --c1: #22d3ee; --c2: #a78bfa; --c3: #f472b6; --c4: #34d399; --c5: #fbbf24; --c6: #fb7185; --c7: #60a5fa; --c8: #fb923c;
  --grad: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #f472b6 100%);
}
/* ---------------- 毛玻璃 · 亮色 ---------------- */
:root:is([data-skin="glass"], [data-skin="alice"])[data-theme="light"] {
  --bg: #f3f6fb;
  --mesh1: rgba(96,165,250,.46); --mesh2: rgba(167,139,250,.40); --mesh3: rgba(103,232,249,.34); --mesh4: rgba(244,114,182,.26);
  --mesh-base: linear-gradient(165deg, #eef3fb 0%, #e9eef9 46%, #f1ecfb 100%);
  --aur1: #93c5fd; --aur2: #c4b5fd; --aur3: #67e8f9; --aur-o1: .55; --aur-o2: .45; --aur-o3: .4;
  --haze: rgba(99,102,241,.20); --spot1: rgba(34,211,238,.13); --spot2: rgba(167,139,250,.14);
  --fg-rgb: 15,23,42; --glass-2: rgba(255,255,255,.62); --glass-hi: rgba(255,255,255,.9);
  --panel: rgba(255,255,255,.56); --panel-2: rgba(255,255,255,.42); --panel-3: rgba(15,23,42,.04); --hover: rgba(15,23,42,.05);
  --line: rgba(15,23,42,.10); --line-2: rgba(15,23,42,.17);
  --tx: var(--ink-main); --tx-2: var(--ink-secondary); --tx-3: var(--ink-muted); --tx-inv: var(--ink-on-brand);
  --pri: #07536a; --pri-rgb: 7,83,106; --pri-soft: rgba(6,182,212,.10); --pri-tx: #07536a;
  --acc: #4f46e5; --acc-rgb: 79,70,229;
  --sb-bg: rgba(255,255,255,.56); --sb-tx: var(--ink-secondary); --sb-tx-hi: #0f172a; --sb-active: #07536a; --sb-hover: rgba(15,23,42,.05);
  --sb-group: var(--ink-muted); --sb-line: rgba(15,23,42,.10);
  --top-bg: linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.62)); --top-line: rgba(15,23,42,.12);
  --shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px -28px rgba(15,23,42,.34);
  --blur: blur(22px) saturate(1.5); --panel-border: 1px solid rgba(15,23,42,.12);
  --c1: #0891b2; --c2: #6366f1; --c3: #db2777; --c4: #059669; --c5: #d97706; --c6: #e11d48; --c7: #2563eb; --c8: #ea580c;
  --grad: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #f472b6 100%);
}

/* AI 信息层唯一色源：PowerX dashboard/assets/aimode.css。
   两种材质共用语义色；经典页面不继承此作用域。 */
body.ex-ai-mode[data-ai-theme][data-ai-skin] {
  --x-bg: #f2f5fb; --x-panel: #fff; --x-panel2: #f7f9fd;
  --x-line: #e4e9f2; --x-line2: #eef2f8;
  --x-text: #16213a; --x-sub: #5b6781; --x-mute: #8a94a9;
  --x-brand: var(--brand-fill); --x-brand2: var(--brand-peer); --x-brand-soft: var(--brand-soft); --x-brand-ink: var(--brand-ink);
  --x-up: #e5484d; --x-up-soft: #fdecec;
  --x-down: #16a34a; --x-down-soft: #e7f6ec;
  /* PowerX 装饰绿：仅用于状态点、完成环与对勾圆底色，文字仍用语义绿。明暗取值一致。 */
  --x-ok-bright: #22c55e;
  --x-warn: #d97706; --x-warn-soft: #fff4e0;
  --x-info: #2563eb; --x-info-soft: #eaf1ff;
  --x-grad-start: var(--brand-fill); --x-grad-middle: color-mix(in srgb,var(--brand-fill),var(--brand-peer)); --x-grad-end: var(--x-brand2);
  --x-step-peer: var(--brand-peer);
  --x-grad: linear-gradient(120deg,var(--x-grad-start) 0%,var(--x-grad-middle) 55%,var(--x-grad-end) 100%);
  --x-step-grad: linear-gradient(90deg,var(--x-brand),var(--x-step-peer));
  --ai-white: #fff;
  --ai-badge-panel: rgba(255,255,255,.85); --ai-badge-line: #cfe0fb;
  --ai-shadow-color: rgba(20,35,70,.05);
  --pri-soft: var(--x-brand-soft); --info: var(--x-info); --info-soft: var(--x-info-soft);
  --ok-soft: var(--x-down-soft); --err-soft: var(--x-up-soft);
  --ai-action: var(--x-brand); --ai-action-hover: var(--x-brand-ink);
  --ai-status-done: var(--x-down); --ai-status-running: var(--x-brand);
  --ai-status-attention: var(--x-warn); --ai-status-attention-ink: var(--ai-white);
  --ai-status-waiting: var(--x-mute); --ai-status-high: var(--x-up);
  --ai-ink-primary: var(--x-text); --ai-ink-secondary: var(--x-sub); --ai-ink-muted: var(--x-mute);
  --ai-ink-accent: var(--x-brand-ink); --ai-ink-violet: var(--x-brand-ink);
  --ai-teal: var(--x-down); --ai-ink-warn: var(--x-warn);
  --up: var(--x-up); --down: var(--x-down); --up-soft: var(--x-up-soft); --down-soft: var(--x-down-soft);
  --ai-text: var(--x-text); --ai-text-2: var(--x-sub); --ai-text-3: var(--x-mute);
  --ai-accent: var(--x-brand); --ai-accent-ink: var(--x-brand-ink); --ai-accent-dark: var(--x-brand-ink);
  --ai-accent-rgb: var(--brand-rgb); --ai-accent-start: var(--x-brand); --ai-accent-end: var(--x-step-peer);
  --ai-panel: var(--x-panel); --ai-panel-2: var(--x-panel2); --ai-panel-3: var(--x-line2);
  --ai-line: var(--x-line); --ai-line-2: var(--x-line); --ai-chart-grid: var(--x-line2);
  --ai-blue-soft: var(--x-brand-soft); --ai-violet-soft: var(--x-brand-soft); --ai-teal-soft: var(--x-down-soft);
  --ai-warning-soft: var(--x-warn-soft); --ai-success-soft: var(--x-down-soft); --ai-up-soft: var(--x-up-soft);
  --ai-edge: var(--x-line); --ai-edge-strong: var(--x-line); --ai-edge-neutral: var(--x-line);
  --ai-fill-base: var(--x-panel); --ai-fill-soft: var(--x-panel2);
  --ai-ink-ok: var(--x-down); --ai-ink-error: var(--x-up);
  --ai-chart-axis: var(--x-sub); --ai-side-ink: var(--x-sub); --ai-side-muted: var(--x-mute);
  --ai-accent-peer: var(--x-brand2); --ai-surface-shadow: 0 1px 2px var(--ai-shadow-color),0 6px 20px var(--ai-shadow-color);
  --ai-control-shadow: 0 1px 3px var(--ai-shadow-color);
  --ai-selected: var(--x-brand-soft); --ai-soft: var(--x-panel2); --ai-raised: var(--x-panel2);
  --ai-chart: var(--x-panel); --ai-control-flat: var(--x-panel); --ai-control: var(--x-panel);
  --ai-surface: var(--x-panel); --ai-surface-alt: var(--x-panel); --ai-kpi: var(--x-panel);
  --ai-bg: var(--x-bg); --ai-side-bg: var(--x-panel); --ai-top-bg: var(--x-panel);
  --ai-hover: var(--x-panel2); --ai-nav-selected: var(--x-brand-soft);
  --ai-scene-plate: var(--x-panel); --ai-orb: var(--x-brand);
  --warn: var(--x-warn); --warn-soft: var(--x-warn-soft); --ok: var(--x-down); --err: var(--x-up);
  --c1: var(--brand-chart); --c2: var(--brand-peer); --c3: var(--brand-c3); --c4: var(--brand-c4);
  --c5: var(--x-up); --c6: var(--x-down); --c7: var(--x-sub); --c8: var(--x-mute);
}
body.ex-ai-mode[data-ai-theme=dark][data-ai-skin] {
  --x-bg: #0d1424; --x-panel: #141d31; --x-panel2: #18233b;
  --x-line: #25314b; --x-line2: #1e2a42;
  --x-text: #e6ecf8; --x-sub: #a3afc6; --x-mute: #7b88a3;
  --x-brand-soft: var(--brand-soft); --x-brand-ink: var(--brand-ink);
  --x-up-soft: #3a1d22; --x-down-soft: #15301f;
  --x-warn-soft: #3a2b12; --x-info-soft: #1a2a4d;
  --ai-badge-panel: rgba(20,30,55,.85); --ai-badge-line: #2f4a80;
  --ai-shadow-color: rgba(0,0,0,.18);
}