/* ==========================================================================
   数智星云 API 商城 · 主题方案
   5 套视觉方向，覆盖同一组 token。切换 <html> 上的 .theme-x 即可整体换肤。

   设计原则：
   - 只覆写 token，不改组件结构，保证"换皮肤"而非"改产品"
   - 深色沉浸区（首屏、页脚、地图、代码块）在每套主题中都保持深色，
     但深色色相各不相同——避免浅色主题下出现白底白字的可读性问题
   - 浅色主题反转 ink 系列；深色主题反转 surface/ink 两族
   ========================================================================== */

/* ------------------------------------------------ 顶栏深色态：默认值 */
:root {
  --tb-bg: var(--navy-900);
  --tb-line: rgba(255, 255, 255, .10);
  --tb-text: #EAF2FC;
  --tb-strong: #ffffff;
  --tb-muted: #9CB4D0;
  --tb-hover: rgba(255, 255, 255, .07);
  --tb-active: rgba(59, 130, 214, .18);
  --tb-btn-bg: rgba(255, 255, 255, .06);
}
.topbar.on-dark { background: var(--tb-bg); border-bottom-color: var(--tb-line); color: var(--tb-text); }
.topbar.on-dark .brand-sub { color: var(--tb-muted); }
.topbar.on-dark .nav a { color: var(--tb-muted); }
.topbar.on-dark .nav a:hover { background: var(--tb-hover); color: var(--tb-strong); }
.topbar.on-dark .nav a.active { background: var(--tb-active); color: var(--tb-strong); }
.topbar.on-dark .viewswitch > button {
  background: var(--tb-btn-bg); border-color: var(--tb-line); color: var(--tb-text);
}

/* ==========================================================================
   A · 深空科技  近黑藏青 + 冷光蓝，发光描边与玻璃面板
   适合：领导汇报、第一眼冲击力、科技属性强调
   ========================================================================== */
.theme-a {
  --navy-950: #02060C; --navy-900: #050B14; --navy-800: #0A1526;
  --navy-700: #0F1F35; --navy-600: #162B45; --navy-500: #1E3A5C;

  --blue-700: #1567D6; --blue-600: #2E8BFF; --blue-500: #1F79E8;
  --blue-400: #57A2FF; --blue-300: #8CC0FF; --blue-200: #B9D8FF;

  --bg: #060D18;
  --surface: #0C1A2C;
  --surface-2: #101F33;
  --surface-dark: #0A1526;

  --ink-900: #EAF2FC; --ink-800: #D8E6F5; --ink-700: #B6C9DE;
  --ink-600: #94ABC5; --ink-500: #7B93AF; --ink-400: #617691;
  --ink-300: #4A5F7A;

  --line: rgba(255, 255, 255, .11);
  --line-2: rgba(255, 255, 255, .06);
  --ice-25: #0A1526; --ice-50: #081120; --ice-100: rgba(46, 139, 255, .14);
  --ice-200: rgba(46, 139, 255, .22); --ice-300: rgba(46, 139, 255, .30);

  --ok-bg: rgba(63, 164, 91, .16);
  --warn-bg: rgba(224, 151, 42, .16);
  --danger-bg: rgba(214, 69, 69, .18);
  --info-bg: rgba(46, 139, 255, .16);

  --hero-bg: #040A12; --hero-veil: 4, 10, 18;
  --footer-bg: #040A12; --code-bg: #03080F; --map-bg: #050E1A;
  --metric-bg: rgba(12, 26, 44, .78);
  --metric-label: #7B93AF;

  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, .48), 0 0 0 1px rgba(46, 139, 255, .10);
  --shadow-3: 0 24px 56px rgba(0, 0, 0, .6);

  --head-weight: 660; --head-tracking: -.015em;
  --tb-bg: #050B14; --tb-line: rgba(255, 255, 255, .10);

  --notice-ok-fg: #7FD49A; --notice-warn-fg: #E8C179;
  --notice-danger-fg: #F09A9A; --notice-info-fg: #8CC0FF;
  --badge-ok-fg: #7FD49A; --badge-warn-fg: #E8C179;
  --badge-danger-fg: #F09A9A; --badge-blue-fg: #8CC0FF;
}
.theme-a .card { border-color: rgba(255, 255, 255, .09); }
.theme-a .hero-bg { opacity: .50; }

/* ==========================================================================
   B · 政务专业  浅底 + 政府深蓝，直角、无阴影、高密度
   适合：政府客户、评审汇报、合规与可信优先
   ========================================================================== */
.theme-b {
  --navy-950: #081F3D; --navy-900: #0E2C52; --navy-800: #123560;
  --navy-700: #17406E; --navy-600: #1D4C7E; --navy-500: #24598C;

  --blue-700: #123C78; --blue-600: #1A4E9C; --blue-500: #2159A6;
  --blue-400: #3A76C4; --blue-300: #6D9DD8; --blue-200: #A9C6E8;

  --bg: #F2F5F9;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --surface-dark: #123560;

  --ink-900: #14203A; --ink-800: #1F2E48; --ink-700: #33445F;
  --ink-600: #4C5F79; --ink-500: #66788F; --ink-400: #8B9AAC;
  --ink-300: #AFBAC7;

  --line: #DCE3EC; --line-2: #EAEFF5;
  --ice-25: #F7F9FC; --ice-50: #F2F5F9; --ice-100: #E7EDF5;
  --ice-200: #D6E1EE; --ice-300: #BCCDE0;

  --ok: #2E7D4F; --warn: #B87A15; --danger: #B93B3B;
  --ok-bg: #E9F4EC; --warn-bg: #FBF2E2; --danger-bg: #FAEBEB; --info-bg: #E7EDF5;

  --hero-bg: #0E2C52; --hero-veil: 14, 44, 82;
  --footer-bg: #0E2C52; --code-bg: #14203A; --map-bg: #0E2C52;
  --metric-bg: rgba(14, 44, 82, .72);
  --metric-label: #A9C6E8;

  --r-sm: 2px; --r: 4px; --r-lg: 6px; --r-xl: 8px;
  --shadow-1: none; --shadow-2: none;
  --shadow-3: 0 8px 24px rgba(14, 44, 82, .12);

  --head-weight: 700; --head-tracking: 0;
  --tb-bg: #0E2C52;

  --notice-ok-fg: #2A7148; --notice-warn-fg: #8A6116;
  --notice-danger-fg: #A33131; --notice-info-fg: #1A4E9C;
  --badge-ok-fg: #2A7148; --badge-warn-fg: #8A6116;
  --badge-danger-fg: #A33131; --badge-blue-fg: #1A4E9C;
}
/* 政务风：卡片用描边替代阴影，表格表头加重 */
.theme-b .card { box-shadow: none; }
.theme-b .pcard:hover { box-shadow: none; border-color: var(--blue-600); transform: none; }
.theme-b .tbl th { background: #E7EDF5; color: #33445F; border-bottom: 1px solid #C9D5E4; }
.theme-b .card-bd { padding: 17px; }
.theme-b .sec-title { font-size: 24px; }
.theme-b .btn { border-radius: 3px; }

/* ==========================================================================
   C · 数据驾驶舱  极暗 + 青绿数值，细线分隔、等宽数字，像监控台
   适合：运营监控、大屏投放、内部看板
   ========================================================================== */
.theme-c {
  --navy-950: #05080B; --navy-900: #080C10; --navy-800: #0E141A;
  --navy-700: #131B23; --navy-600: #1A242E; --navy-500: #223040;

  --blue-700: #009C88; --blue-600: #00C2A8; --blue-500: #00AC95;
  --blue-400: #2AD0BA; --blue-300: #6ADFD0; --blue-200: #A8EDE3;

  --bg: #0B1015;
  --surface: #141B23;
  --surface-2: #171F28;
  --surface-dark: #0E141A;

  --ink-900: #DCE7F0; --ink-800: #CBD8E3; --ink-700: #AEBECD;
  --ink-600: #8FA2B4; --ink-500: #75899C; --ink-400: #5D7184;
  --ink-300: #47596B;

  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .045);
  --ice-25: #0E141A; --ice-50: #0B1015; --ice-100: rgba(0, 194, 168, .12);
  --ice-200: rgba(0, 194, 168, .20); --ice-300: rgba(0, 194, 168, .28);

  --ok: #38C97B; --warn: #E8A33D; --danger: #E45B5B;
  --ok-bg: rgba(56, 201, 123, .14); --warn-bg: rgba(232, 163, 61, .14);
  --danger-bg: rgba(228, 91, 91, .16); --info-bg: rgba(0, 194, 168, .13);

  --hero-bg: #06090C; --hero-veil: 6, 9, 12;
  --footer-bg: #06090C; --code-bg: #05080B; --map-bg: #060C11;
  --metric-bg: rgba(14, 20, 26, .85);
  --metric-text: #7FE8D8; --metric-label: #5D7184;

  --r-sm: 3px; --r: 5px; --r-lg: 7px; --r-xl: 10px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .03);
  --shadow-2: 0 2px 10px rgba(0, 0, 0, .5);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, .62);

  --head-weight: 600; --head-tracking: .01em;
  --tb-bg: #080C10;

  --notice-ok-fg: #7FE0A8; --notice-warn-fg: #EFC682;
  --notice-danger-fg: #F0A0A0; --notice-info-fg: #6ADFD0;
  --badge-ok-fg: #7FE0A8; --badge-warn-fg: #EFC682;
  --badge-danger-fg: #F0A0A0; --badge-blue-fg: #6ADFD0;
}
/* 驾驶舱风：数值等宽高对比、KPI 放大、分隔线极细 */
.theme-c .metric .mv, .theme-c .stat .sv, .theme-c .num {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.theme-c .card { border-color: rgba(255, 255, 255, .07); }
.theme-c .card-hd { padding: 12px 16px; }
.theme-c .card-bd { padding: 16px; }
.theme-c .tbl th { background: rgba(255, 255, 255, .025); font-size: 11px; }
.theme-c .sec-title { font-size: 23px; }

/* ==========================================================================
   D · 现代 SaaS  纯白大留白 + 鲜亮蓝，大圆角、分层柔和阴影
   适合：开发者市场、商业产品感、年轻化对外形象
   ========================================================================== */
.theme-d {
  --navy-950: #0A1633; --navy-900: #0F1E42; --navy-800: #16264F;
  --navy-700: #1D3160; --navy-600: #253C71; --navy-500: #2E4883;

  --blue-700: #1D55D6; --blue-600: #2B6BF3; --blue-500: #3D7BF5;
  --blue-400: #6197F8; --blue-300: #9BBCFB; --blue-200: #CBDBFd;

  --bg: #FBFCFD;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --surface-dark: #16264F;

  --ink-900: #0E1726; --ink-800: #1D2939; --ink-700: #344054;
  --ink-600: #556077; --ink-500: #667085; --ink-400: #98A2B3;
  --ink-300: #C3CAD6;

  --line: #EAECF0; --line-2: #F2F4F7;
  --ice-25: #FCFDFE; --ice-50: #FBFCFD; --ice-100: #EFF4FE;
  --ice-200: #DDE8FD; --ice-300: #C3D6FB;

  --ok: #12B76A; --warn: #F79009; --danger: #F04438;
  --ok-bg: #ECFDF3; --warn-bg: #FFFAEB; --danger-bg: #FEF3F2; --info-bg: #EFF4FE;

  --hero-bg: #0F1E42; --hero-veil: 15, 30, 66;
  --footer-bg: #0F1E42; --code-bg: #101828; --map-bg: #0F1E42;
  --metric-bg: rgba(15, 30, 66, .70);
  --metric-label: #9BBCFB;

  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 8px 20px rgba(16, 24, 40, .07), 0 2px 6px rgba(16, 24, 40, .04);
  --shadow-3: 0 20px 44px rgba(16, 24, 40, .13);

  --head-weight: 650; --head-tracking: -.022em;

  --notice-ok-fg: #067647; --notice-warn-fg: #B54708;
  --notice-danger-fg: #B42318; --notice-info-fg: #1D55D6;
  --badge-ok-fg: #067647; --badge-warn-fg: #B54708;
  --badge-danger-fg: #B42318; --badge-blue-fg: #1D55D6;
}
/* SaaS 风：更大留白、按钮胶囊化 */
.theme-d .card-bd { padding: 24px; }
.theme-d .card-hd { padding: 18px 24px; }
.theme-d .card-pad { padding: 24px; }
.theme-d .btn { border-radius: 10px; padding: 10px 18px; }
.theme-d .btn-sm { border-radius: 8px; }
.theme-d .pcard-bd { padding: 18px; }
.theme-d .sec-title { font-size: 27px; }

/* ==========================================================================
   E · 农业生态  暖纸底 + 深绿主色，麦黄点缀，柔和圆角
   适合：农业场景叙事、行业客户共鸣、垂直行业形象
   ========================================================================== */
.theme-e {
  --navy-950: #0E1A14; --navy-900: #16241C; --navy-800: #1C2E24;
  --navy-700: #22382C; --navy-600: #2A4435; --navy-500: #33503F;

  --blue-700: #14563A; --blue-600: #1F6B45; --blue-500: #287A52;
  --blue-400: #3E9A6C; --blue-300: #76BE97; --blue-200: #B0DCC4;

  --bg: #F7F5EF;
  --surface: #FFFFFF;
  --surface-2: #FAF8F3;
  --surface-dark: #1C2E24;

  --ink-900: #1B2A22; --ink-800: #26382E; --ink-700: #3C5044;
  --ink-600: #586C5F; --ink-500: #6F8378; --ink-400: #97A79D;
  --ink-300: #BDC8C1;

  --line: #E4DFD3; --line-2: #EFEBE1;
  --ice-25: #FAF8F3; --ice-50: #F7F5EF; --ice-100: #EDF2EA;
  --ice-200: #DCE8DA; --ice-300: #C3D8C2;

  --ok: #2F8A55; --warn: #C99A2E; --danger: #C0503E;
  --ok-bg: #EAF3EC; --warn-bg: #F8F1DE; --danger-bg: #F8EBE7; --info-bg: #EDF2EA;

  --hero-bg: #16241C; --hero-veil: 22, 36, 28;
  --footer-bg: #16241C; --code-bg: #1B2A22; --map-bg: #16241C;
  --metric-bg: rgba(22, 36, 28, .74);
  --metric-label: #B0DCC4;

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
  --shadow-1: 0 1px 2px rgba(27, 42, 34, .05);
  --shadow-2: 0 6px 18px rgba(27, 42, 34, .07);
  --shadow-3: 0 18px 40px rgba(27, 42, 34, .12);

  --head-weight: 660; --head-tracking: -.012em;
  --tb-bg: #16241C;

  --notice-ok-fg: #2A7348; --notice-warn-fg: #8A6A16;
  --notice-danger-fg: #9C4234; --notice-info-fg: #1F6B45;
  --badge-ok-fg: #2A7348; --badge-warn-fg: #8A6A16;
  --badge-danger-fg: #9C4234; --badge-blue-fg: #1F6B45;
}
/* 农业风：暖调阴影、图片更满 */
.theme-e .pcard-img { height: 140px; }
.theme-e .sec-title { font-size: 25px; }

/* ==========================================================================
   徽标与提示条文字色（各主题通过 --badge-*-fg / --notice-*-fg 控制）
   ========================================================================== */
.badge-ok { color: var(--badge-ok-fg, #2E8249); }
.badge-warn { color: var(--badge-warn-fg, #A9761A); }
.badge-danger { color: var(--badge-danger-fg, #B33535); }
.badge-blue { color: var(--badge-blue-fg, var(--blue-600)); }
.notice-ok { color: var(--notice-ok-fg, #2A7343); }
.notice-warn { color: var(--notice-warn-fg, #8A6116); }
.notice-danger { color: var(--notice-danger-fg, #A33131); }
.notice-info { color: var(--notice-info-fg, #1A5189); }

/* ==========================================================================
   风格切换器（仅原型使用，演示时浮在左下角）
   ========================================================================== */
.stylesw {
  position: fixed; left: 14px; bottom: 12px; z-index: 210;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 100px;
  background: rgba(11, 22, 38, .84); color: #C6D6E8;
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px); font-size: 11.5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.stylesw .sw-label { padding: 0 4px 0 6px; color: #8FA8C4; letter-spacing: .02em; }
.stylesw a {
  padding: 4px 10px; border-radius: 100px; color: #C6D6E8;
  border: 1px solid transparent; white-space: nowrap;
}
.stylesw a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.stylesw a.on { background: #2E8BFF; color: #fff; border-color: #2E8BFF; font-weight: 640; }