/* ==========================================================================
   tokens.css — 全站设计变量（来源 research/design/tokens.json 全量映射）
   暗色为默认 html[data-theme=dark]；亮色 html[data-theme=light]
   ========================================================================== */

:root {
  /* ---------- 字体 ---------- */
  --font-sans: "Geist", "Geist Fallback", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", Arial, Helvetica, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-inter: "Inter", "Inter Fallback", var(--font-sans);
  --font-manrope: "Manrope", "Manrope Fallback", var(--font-sans);
  --font-serif: "Source Serif 4", "Source Serif 4 Fallback", "Songti SC", "Noto Serif SC", Georgia, "Times New Roman", serif;

  /* ---------- 原始色阶（两套主题共享） ---------- */
  --base-900: #141c25; --base-800: #1a232d; --base-750: #27313f; --base-700: #344051;
  --base-600: #414e62; --base-500: #637083; --base-400: #97a1af; --base-300: #ced2da;
  --base-200: #e4e7ec; --base-100: #f2f4f7; --base-050: #f9fafb;
  --blue-900: #130871; --blue-800: #1d0e88; --blue-700: #2b16a9; --blue-600: #3c20ca;
  --blue-500: var(--ac-strong); --blue-400: #7c5ff3; --blue-300: var(--ac-b300, #9a80f9); --blue-200: #beabfd;
  --blue-100: var(--ac-b100, #dfd4fe); --blue-050: #fafaff;

  /* ---------- 主题色源变量（默认 = 原版紫；html[data-accent=xx] 覆盖这一组即可整站换色，见文件末尾） ---------- */
  --ac: #8874ff; --ac-rgb: 136, 116, 255;
  --ac-alt: #8e8eff; --ac-alt-rgb: 142, 142, 255;
  --ac-deep: #5105a1;
  --ac-strong: #4f2dec; --ac-strong-rgb: 79, 45, 236;
  --ac-hover: #a594ff; --ac-hover-l: #5f4bc1;
  --ac-glow-rgb: 153, 51, 229; --ac-glow2-rgb: 184, 71, 255;
  --ac-lift-rgb: 124, 95, 243; --ac-lift2-rgb: 155, 107, 255;
  --ac-cta-a: #6f3ffa; --ac-cta-b: #9b6bff;
  --ac-support-a: #6a4cff; --ac-support-b: #2f2a5a;
  --ac-chart-1: #856ffc; --ac-chart-2: #57309d; --ac-s2: #7c3aed; --ac-s3: #a855f7;
  --ac-tab-dark: linear-gradient(to left, #2a274e 0%, #454181 50%, #2a274e 100%);
  --ac-tab-light: linear-gradient(270deg, #573bd7 0%, #8065ec 24.522%, #9a80f9 50%, #775ce7 75.485%, #573bd7 100%);
  --ac-hero-dark: linear-gradient(135deg, #2b16a9 0%, #4f2dec 30%, #1e40af 60%, #0d9488 100%);
  --ac-hero-light: linear-gradient(135deg, #6c5ce7 0%, #a78bfa 30%, #7c3aed 55%, #2dd4bf 100%);

  /* ---------- 主色（由源变量派生） ---------- */
  --primary: var(--ac);
  --primary-alt: var(--ac-alt);
  --primary-deep: var(--ac-deep);
  --primary-gradient: linear-gradient(180deg, var(--ac) 0%, var(--ac-deep) 100%);
  --primary-glow: 0 0 28px 0 rgba(var(--ac-glow-rgb), 0.30), 0 0 4px 0 rgba(var(--ac-glow2-rgb), 0.50);
  --primary-glow-strong: 0 0 28px 0 rgba(var(--ac-glow-rgb), 0.30), 0 0 8px 0 rgba(var(--ac-glow2-rgb), 0.50);
  --tint-04: rgba(var(--ac-alt-rgb), 0.04);
  --tint-08: rgba(var(--ac-alt-rgb), 0.08);
  --tint-14: rgba(var(--ac-alt-rgb), 0.14);
  --tint-24: rgba(var(--ac-alt-rgb), 0.24);
  --cta-card-gradient: linear-gradient(135deg, var(--ac-cta-a) 0%, var(--ac-cta-b) 100%);
  --purple-lift: 0 4px 14px rgba(var(--ac-lift-rgb), 0.55), 0 0 18px rgba(var(--ac-lift2-rgb), 0.35);
  --purple-inset-ring: inset 0 0 1px rgba(var(--ac-strong-rgb), 0.7), 0 0 8px rgba(var(--ac-strong-rgb), 0.15);
  --star: #ffcf2f;
  --bonus-yellow: #f6b51e;
  --success-sparkline: #1fc16b;
  --danger-sparkline: #fb3748;
  --gauge-value: rgb(52, 190, 102);

  /* ---------- 圆角 ---------- */
  --r-card: 24px; --r-sidebar: 24px; --r-sidebar-inner: 23px; --r-tab: 22px; --r-input: 22px;
  --r-glass: 20px; --r-row: 16px; --r-tile: 16px; --r-md: 12px; --r-icon-btn: 8px;
  --r-nav: 6px; --r-badge: 6px; --r-pill-lg: 52px; --r-full: 9999px;

  /* ---------- 阴影（通用） ---------- */
  --shadow-xs: 0 1px 2px #141c250d; --shadow-s: 0 1px 3px #141c251a; --shadow-m: 0 4px 6px -1px #141c251a;
  --shadow-l: 0 10px 15px -3px #141c2514; --shadow-xl: 0 20px 25px -5px #141c251a;
  --shadow-xxl: 0 25px 50px -12px #141c2540; --shadow-button: 0 1px 2px #151c240d;
  --shadow-tooltip: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-modal: 0 5px 40px rgba(9, 14, 21, 0.9);

  /* ---------- 间距 / 尺寸 ---------- */
  --sidebar-inset: 24px; --sidebar-w: 280px; --sidebar-w-collapsed: 80px; --sidebar-pad: 16.5px;
  --main-ml: 304px; --main-ml-collapsed: 104px; --content-max: 1600px; --content-px: 24px;
  --header-h: 66px; --section-gap: 32px; --section-gap-m: 24px; --grid-gap: 24px; --grid-gap-m: 16px;
  --card-pad: 16px; --nav-item-h: 36px; --nav-icon: 18px;
  --footer-pt: 48px; --footer-pb: 40px;
  --table-th-h: 39px; --table-row-h: 76px; --table-row-h-compact: 53px;
  --mobile-px: 16px; --bottombar-h: 59px; --mobile-main-pb: calc(88px + env(safe-area-inset-bottom, 0px));

  /* ---------- 字号阶梯 ---------- */
  --fs-page-title: 24px; --fs-hero: 24px; --fs-section: 18px; --fs-body: 16px; --fs-table: 15px;
  --fs-nav: 14px; --fs-sm: 13px; --fs-caption: 12px; --fs-label: 11px; --fs-chip: 10px;

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms; --t-base: 300ms;

  /* 语言切换用国旗（emoji），也可换成 svg */
  --z-sidebar: 50; --z-bottombar: 50; --z-dropdown: 80; --z-cookie: 90; --z-modal: 100; --z-toast: 110; --z-support: 95;
}

/* ==========================================================================
   暗色（默认）
   ========================================================================== */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111525;
  --bg-sticky: #111525;
  --bg-card: #0f1424;
  --bg-card2: #161c32;
  --bg-sidebar: #0f1424;
  --bg-popover: #161c32;
  --bg-tooltip: #1e2333;
  --bg-row-alt: #1a2033;
  --bg-auth-input: #141826;
  --glass-1: rgba(255, 255, 255, 0.01);
  --glass-2: rgba(255, 255, 255, 0.02);
  --glass-3: rgba(255, 255, 255, 0.03);
  --glass-4: rgba(255, 255, 255, 0.04);
  --glass-6: rgba(255, 255, 255, 0.06);
  --card-border: transparent;                 /* 暗色无实体边框，用渐变描边 */
  --card-border-w: 0px;
  --border-gradient: radial-gradient(circle 40px at top left, #7b7d8a, transparent), radial-gradient(circle 40px at bottom right, #7b7d8a, transparent), radial-gradient(circle 40px at top right, #0f1424, transparent), radial-gradient(circle 40px at bottom left, #0f1424, transparent), #404554;
  --divider: rgba(255, 255, 255, 0.10);
  --divider-soft: rgba(255, 255, 255, 0.08);
  --divider-row: rgba(255, 255, 255, 0.06);
  --hairline: #eaecf01a;
  --border-modal: #344051;

  --text-1: #ffffff;
  --text-2: rgba(255, 255, 255, 0.70);
  --text-2-alt: #ced2da;
  --text-3: rgba(255, 255, 255, 0.50);
  --text-45: rgba(255, 255, 255, 0.45);
  --text-40: rgba(255, 255, 255, 0.40);
  --text-35: rgba(255, 255, 255, 0.35);
  --text-subtle: #97a1af;
  --text-dim: #637083;
  --text-dim-hover: #8a96a8;
  --text-disabled: rgba(255, 255, 255, 0.25);
  --text-link: var(--ac-link, var(--ac));
  --text-link-hover: var(--ac-hover);
  --text-on-primary: #ffffff;

  --success: #00ff86; --success-bg: rgba(0, 255, 134, 0.10); --success-chart: #4ad17d;
  --danger: #fb3748; --danger-alt: #f7575f; --danger-bg: rgba(251, 55, 72, 0.10); --danger-chart: #f05959;
  --warning: #ffcf2f; --warning-alt: #e8a83e; --warning-bg: rgba(255, 207, 47, 0.10);
  --info: var(--ac-alt);

  --ghost-bg: rgba(var(--ac-alt-rgb), 0.04);
  --ghost-border: 0 solid transparent;
  --ghost-hover-bg: rgba(var(--ac-alt-rgb), 0.08);
  --outline-border: rgba(255, 255, 255, 0.20);
  --outline-text: rgba(255, 255, 255, 0.50);
  --outline-text-hover: rgba(255, 255, 255, 0.70);
  --btn-disabled-bg: #3c3c3c; --btn-disabled-text: rgba(255, 255, 255, 0.5);

  --tab-bg: rgba(255, 255, 255, 0.02);
  --tab-selected-bg: var(--ac-tab-dark);
  --tab-selected-border: 0 solid transparent;
  --tab-text: rgba(255, 255, 255, 0.50); --tab-text-hover: #ffffff; --tab-selected-text: #ffffff;
  --tab-item-hover-bg: rgba(255, 255, 255, 0.01);

  --nav-text: #ffffff; --nav-active-bg: rgba(var(--ac-alt-rgb), 0.14); --nav-active-text: var(--ac); --nav-hover-bg: rgba(var(--ac-alt-rgb), 0.14);
  --nav-chevron: rgba(255, 255, 255, 0.50);
  --collapse-btn: rgba(255, 255, 255, 0.40); --collapse-btn-hover: rgba(255, 255, 255, 0.70);
  --social-btn-bg: rgba(255, 255, 255, 0.04); --social-btn-hover: rgba(255, 255, 255, 0.10); --social-icon: #ffffff;

  --field-bg: rgba(255, 255, 255, 0.02); --field-border: transparent; --field-text: #ffffff; --field-placeholder: rgba(255, 255, 255, 0.50);
  --auth-field-bg: rgba(255, 255, 255, 0.02); --auth-field-border: rgba(255, 255, 255, 0.10);
  --select-bg: transparent; --select-border: transparent; --select-text: rgba(255, 255, 255, 0.50); --select-text-hover: rgba(255, 255, 255, 0.80);
  --chip-bg: rgba(255, 255, 255, 0.06); --chip-text: rgba(255, 255, 255, 0.75);
  --kbd-bg: rgba(255, 255, 255, 0.06); --kbd-border: #344051; --kbd-text: #97a1af;

  --table-th-text: rgba(255, 255, 255, 0.40); --table-th-border: rgba(255, 255, 255, 0.08);
  --table-row-border: rgba(255, 255, 255, 0.06); --table-row-hover: rgba(255, 255, 255, 0.02);
  --share-track: rgba(255, 255, 255, 0.10); --share-fill: var(--ac);

  --avatar-ring: 0 0 0 1.5px #0f1424;
  --logo-tile-bg: rgba(0, 0, 0, 0.01);
  --logo-tile-inset: inset 3px 3px 4px rgba(255, 255, 255, 0.2), inset -3px -3px 4px rgba(255, 255, 255, 0.2);
  --gauge-track: #344051;
  --skeleton-a: rgba(255, 255, 255, 0.04); --skeleton-b: rgba(255, 255, 255, 0.09);

  --scrollbar-thumb: #344051; --scrollbar-thumb-hover: #414e62;
  --bottombar-bg: #111525; --bottombar-border: rgba(255, 255, 255, 0.08); --bottombar-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  --bottombar-text: #97a1af; --bottombar-active: var(--ac-alt); --bottombar-active-bg: rgba(var(--ac-strong-rgb), 0.07); --bottombar-hover-bg: #344051;
  --popover-bg: #161c32; --popover-border: #344051; --popover-text: #f9fafb; --popover-earn-border: #ffffff; --popover-earn-text: #ffffff;
  --overlay: rgba(0, 0, 0, 0.50); --overlay-auth: rgba(10, 13, 24, 0.72);
  --modal-bg: #0f1424; --modal-border: rgba(42, 39, 78, 0.10); --auth-card-bg: rgba(15, 19, 32, 0.92); --auth-card-border: rgba(255, 255, 255, 0.20);
  --cookie-bg: rgba(15, 20, 36, 0.95); --cookie-text: rgba(255, 255, 255, 0.70); --cookie-link: var(--ac); --cookie-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  --footer-title: #ffffff; --footer-link: rgba(255, 255, 255, 0.45); --footer-link-hover: var(--ac); --footer-divider: rgba(255, 255, 255, 0.08);
  --footer-legal: rgba(255, 255, 255, 0.45); --footer-legal-link: rgba(255, 255, 255, 0.35); --footer-social-bg: rgba(255, 255, 255, 0.04);
  --toast-bg: #1e2333; --toast-border: rgba(255, 255, 255, 0.10);
  --support-header: linear-gradient(135deg, var(--ac-support-a) 0%, var(--ac-support-b) 100%);

  --chart-grid: rgba(255, 255, 255, 0.12); --chart-grid-soft: rgba(255, 255, 255, 0.06);
  --chart-axis: #414e62; --chart-tick: #6b7280; --chart-tick-alt: rgba(255, 255, 255, 0.40); --chart-ref: rgba(255, 255, 255, 0.12);
  --chart-bar: #b0b0b0; --chart-bar-purple-1: var(--ac-chart-1); --chart-bar-purple-2: var(--ac-chart-2);
  --chart-pos: #4ad17d; --chart-neg: #f05959;
  --chart-s1: #b0b0b0; --chart-s2: var(--ac-s2); --chart-s3: var(--ac-s3); --chart-s4: #1d4ed8; --chart-s5: #facc15; --chart-s6: #1e3a8a;
  --chart-s7: #4ade80; --chart-s8: #166534; --chart-s9: #6b7280; --chart-s10: var(--ac); --chart-s11: #fb7185;
  --chart-tooltip-bg: #1e2333; --chart-tooltip-border: rgba(255, 255, 255, 0.10);
  --reviews-hero-gradient: var(--ac-hero-dark);
}

/* ==========================================================================
   亮色
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --ink-rgb: 42, 39, 78;   /* 亮色正文墨色（主题色可覆盖） */
  --bg: #f4f4f4;
  --bg-sticky: #f4f4f4;
  --bg-card: rgba(228, 228, 231, 0.30);
  --bg-card2: #ffffff;
  --bg-sidebar: rgba(228, 228, 231, 0.30);
  --bg-popover: #ffffff;
  --bg-tooltip: #fefefe;
  --bg-row-alt: #f2f1f9;
  --bg-auth-input: #141826;
  --glass-1: rgba(255, 255, 255, 0.50);
  --glass-2: rgba(255, 255, 255, 0.60);
  --glass-3: rgba(255, 255, 255, 0.65);
  --glass-4: rgba(var(--ink-rgb), 0.04);
  --glass-6: rgba(var(--ink-rgb), 0.06);
  --card-border: #e4e4e7;
  --card-border-w: 1px;
  --border-gradient: radial-gradient(circle 40px at top left, #edecf4, transparent), radial-gradient(circle 40px at bottom right, #edecf4, transparent), radial-gradient(circle 40px at top right, #c2c1d3, transparent), radial-gradient(circle 40px at bottom left, #c2c1d3, transparent), #d6d5e3;
  --divider: rgba(var(--ink-rgb), 0.10);
  --divider-soft: rgba(var(--ink-rgb), 0.08);
  --divider-row: rgba(var(--ink-rgb), 0.08);
  --hairline: rgba(var(--ink-rgb), 0.10);
  --border-modal: #e4e7ec;

  --text-1: rgb(var(--ink-rgb));
  --text-2: rgba(var(--ink-rgb), 0.80);
  --text-2-alt: rgba(var(--ink-rgb), 0.70);
  --text-3: rgba(var(--ink-rgb), 0.55);
  --text-45: rgba(var(--ink-rgb), 0.55);
  --text-40: rgba(var(--ink-rgb), 0.40);
  --text-35: rgba(var(--ink-rgb), 0.45);
  --text-subtle: #637083;
  --text-dim: #637083;
  --text-dim-hover: #8a96a8;
  --text-disabled: rgba(var(--ink-rgb), 0.25);
  --text-link: var(--ac-link, var(--ac));
  --text-link-hover: var(--ac-hover-l);
  --text-on-primary: #ffffff;

  --success: #1f9d57; --success-bg: rgba(31, 157, 87, 0.10); --success-chart: #1f9d57;
  --danger: #fb3748; --danger-alt: #dc2626; --danger-bg: rgba(251, 55, 72, 0.10); --danger-chart: #dc2626;
  --warning: #b47316; --warning-alt: #b47316; --warning-bg: rgba(180, 115, 22, 0.10);
  --info: var(--ac-strong);

  --ghost-bg: rgba(var(--ac-alt-rgb), 0.24);
  --ghost-border: 0.5px solid rgba(255, 255, 255, 0.20);
  --ghost-hover-bg: rgba(var(--ac-alt-rgb), 0.30);
  --outline-border: rgba(var(--ink-rgb), 0.15);
  --outline-text: rgba(var(--ink-rgb), 0.60);
  --outline-text-hover: rgb(var(--ink-rgb));
  --btn-disabled-bg: #e4e4e7; --btn-disabled-text: rgba(var(--ink-rgb), 0.4);

  --tab-bg: rgba(255, 255, 255, 0.50);
  --tab-selected-bg: var(--ac-tab-light);
  --tab-selected-border: 0.5px solid rgba(255, 255, 255, 0.20);
  --tab-text: rgba(var(--ink-rgb), 0.50); --tab-text-hover: rgb(var(--ink-rgb)); --tab-selected-text: #ffffff;
  --tab-item-hover-bg: transparent;

  --nav-text: rgb(var(--ink-rgb)); --nav-active-bg: rgba(var(--ac-alt-rgb), 0.14); --nav-active-text: var(--ac); --nav-hover-bg: rgba(var(--ac-alt-rgb), 0.14);
  --nav-chevron: rgba(var(--ink-rgb), 0.50);
  --collapse-btn: rgba(var(--ink-rgb), 0.40); --collapse-btn-hover: rgba(var(--ink-rgb), 0.70);
  --social-btn-bg: rgba(var(--ink-rgb), 0.04); --social-btn-hover: rgba(var(--ink-rgb), 0.10); --social-icon: rgb(var(--ink-rgb));

  --field-bg: rgba(228, 228, 231, 0.30); --field-border: #e4e4e7; --field-text: rgb(var(--ink-rgb)); --field-placeholder: rgba(var(--ink-rgb), 0.40);
  --auth-field-bg: rgba(255, 255, 255, 0.02); --auth-field-border: rgba(255, 255, 255, 0.10);
  --select-bg: #ffffff; --select-border: rgba(var(--ink-rgb), 0.10); --select-text: rgba(var(--ink-rgb), 0.60); --select-text-hover: rgb(var(--ink-rgb));
  --chip-bg: rgba(var(--ink-rgb), 0.06); --chip-text: rgba(var(--ink-rgb), 0.75);
  --kbd-bg: rgba(var(--ink-rgb), 0.06); --kbd-border: #e4e7ec; --kbd-text: #637083;

  --table-th-text: rgba(var(--ink-rgb), 0.40); --table-th-border: rgba(var(--ink-rgb), 0.10);
  --table-row-border: rgba(var(--ink-rgb), 0.08); --table-row-hover: rgba(var(--ink-rgb), 0.02);
  --share-track: rgba(var(--ink-rgb), 0.10); --share-fill: var(--ac);

  --avatar-ring: 0 0 0 1.5px rgba(var(--ink-rgb), 0.14);
  --logo-tile-bg: rgba(0, 0, 0, 0.01);
  --logo-tile-inset: inset 1px 1px 1px rgba(255, 255, 255, 0.9), inset -1px -1px 3px rgba(255, 255, 255, 0.9);
  --gauge-track: rgba(var(--ink-rgb), 0.14);
  --skeleton-a: rgba(var(--ink-rgb), 0.05); --skeleton-b: rgba(var(--ink-rgb), 0.10);

  --scrollbar-thumb: #ced2da; --scrollbar-thumb-hover: #97a1af;
  --bottombar-bg: #ffffff; --bottombar-border: rgba(var(--ink-rgb), 0.10); --bottombar-shadow: 0 -8px 24px rgba(var(--ink-rgb), 0.12);
  --bottombar-text: #97a1af; --bottombar-active: var(--ac-alt); --bottombar-active-bg: rgba(var(--ac-strong-rgb), 0.07); --bottombar-hover-bg: #e4e7ec;
  --popover-bg: #ffffff; --popover-border: #e4e7ec; --popover-text: rgb(var(--ink-rgb)); --popover-earn-border: var(--ac-strong); --popover-earn-text: var(--ac-strong);
  --overlay: rgba(var(--ink-rgb), 0.25); --overlay-auth: rgba(10, 13, 24, 0.72);
  --modal-bg: #ffffff; --modal-border: rgba(var(--ink-rgb), 0.10); --auth-card-bg: rgba(15, 19, 32, 0.92); --auth-card-border: rgba(255, 255, 255, 0.20);
  --cookie-bg: #ffffff; --cookie-text: rgba(10, 10, 10, 0.70); --cookie-link: var(--ac-strong); --cookie-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  --footer-title: rgb(var(--ink-rgb)); --footer-link: rgba(var(--ink-rgb), 0.55); --footer-link-hover: var(--ac); --footer-divider: rgba(var(--ink-rgb), 0.10);
  --footer-legal: rgba(var(--ink-rgb), 0.55); --footer-legal-link: rgba(var(--ink-rgb), 0.45); --footer-social-bg: rgba(var(--ink-rgb), 0.04);
  --toast-bg: #ffffff; --toast-border: rgba(var(--ink-rgb), 0.10);
  --support-header: linear-gradient(135deg, var(--ac-support-a) 0%, var(--ac-support-b) 100%);

  --chart-grid: rgba(var(--ink-rgb), 0.18); --chart-grid-soft: rgba(var(--ink-rgb), 0.08);
  --chart-axis: rgba(var(--ink-rgb), 0.25); --chart-tick: rgba(var(--ink-rgb), 0.45); --chart-tick-alt: rgba(var(--ink-rgb), 0.45); --chart-ref: rgba(var(--ink-rgb), 0.18);
  --chart-bar: #8a8a96; --chart-bar-purple-1: var(--ac-chart-1); --chart-bar-purple-2: var(--ac-chart-2);
  --chart-pos: #1f9d57; --chart-neg: #dc2626;
  --chart-s1: #8a8a96; --chart-s2: var(--ac-s2); --chart-s3: var(--ac-s3); --chart-s4: #1d4ed8; --chart-s5: #d9a800; --chart-s6: #1e3a8a;
  --chart-s7: #22c55e; --chart-s8: #166534; --chart-s9: #6b7280; --chart-s10: var(--ac); --chart-s11: #e11d48;
  --chart-tooltip-bg: #fefefe; --chart-tooltip-border: #e4e7ec;
  --reviews-hero-gradient: var(--ac-hero-light);
}


/* ==========================================================================
   主题（全局换肤）：html[data-accent="royal|red"]，与暗/亮模式叠加
   品牌色只有两个（2026-10-07 群里给定色号，严禁色差）：红 #C8161D · 深宝蓝 #003C92
   royal = 深宝蓝款（默认、优先）：深宝蓝做主色（按钮/选中/tab），红做点缀（CTA 收尾、图表第二色）
   red   = 红色款：红做主色（按钮/选中），深宝蓝做辅色（tab 选中、图表第二色）
   规则：所有「色块填充」一律用原色号；只有暗底上的「文字/图标」用同色相提亮版（--ac），否则读不清
   质感：主按钮 = 原色 + 顶部 14% 白光泽 + 内高光 + 同色外发光；暗底用带色相的深底 + 顶部极淡品牌氛围光（静态渐变，不吃 GPU）
   不设 data-accent = 原版紫（菜单里不出现，仅作回退）
   ========================================================================== */
html[data-accent] {
  --brand-red: #c8161d; --brand-red-rgb: 200, 22, 29;
  --brand-blue: #003c92; --brand-blue-rgb: 0, 60, 146;
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(0, 0, 0, 0.10) 100%);
}
html[data-accent="royal"] {
  --ac: #4d8ae8; --ac-rgb: 77, 138, 232; --ac-alt: #4d8ae8; --ac-alt-rgb: 77, 138, 232; --ac-deep: #002a68;
  --ac-strong: #003c92; --ac-strong-rgb: 0, 60, 146; --ac-hover: #7aa6ee; --ac-hover-l: #002a68;
  --ac-glow-rgb: 0, 60, 146; --ac-glow2-rgb: 77, 138, 232; --ac-lift-rgb: 0, 60, 146; --ac-lift2-rgb: 77, 138, 232;
  --ac-cta-a: #003c92; --ac-cta-b: #002a68; --ac-support-a: #003c92; --ac-support-b: #001a42;
  --ac-chart-1: #4d8ae8; --ac-chart-2: #c8161d; --ac-s2: #003c92; --ac-s3: #c8161d; --ac-b300: #8fb2ea; --ac-b100: #dbe5f5;
  --ac-tab-dark: var(--sheen), #003c92;
  --ac-tab-light: var(--sheen), #003c92;
  --ac-hero-dark: linear-gradient(135deg, #001a42 0%, #003c92 55%, #c8161d 130%);
  --ac-hero-light: linear-gradient(135deg, #003c92 0%, #1f5cb5 60%, #c8161d 130%);
  --primary-gradient: var(--sheen), #003c92;
  --primary-glow: 0 0 22px 0 rgba(0, 60, 146, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.20), inset 0 0 0 1px rgba(77, 138, 232, 0.35);
  --primary-glow-strong: 0 0 30px 0 rgba(0, 60, 146, 0.70), inset 0 1px 0 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(77, 138, 232, 0.45);
  --cta-card-gradient: linear-gradient(135deg, #003c92 0%, #002a68 62%, #5a1424 100%);
}
html[data-accent="red"] {
  --ac: #e5545a; --ac-rgb: 229, 84, 90; --ac-alt: #e5545a; --ac-alt-rgb: 229, 84, 90; --ac-deep: #8e0f14;
  --ac-strong: #c8161d; --ac-strong-rgb: 200, 22, 29; --ac-hover: #ee7a7f; --ac-hover-l: #8e0f14;
  --ac-glow-rgb: 200, 22, 29; --ac-glow2-rgb: 229, 84, 90; --ac-lift-rgb: 200, 22, 29; --ac-lift2-rgb: 229, 84, 90;
  --ac-cta-a: #c8161d; --ac-cta-b: #8e0f14; --ac-support-a: #c8161d; --ac-support-b: #003c92;
  --ac-chart-1: #e5545a; --ac-chart-2: #003c92; --ac-s2: #c8161d; --ac-s3: #4d8ae8; --ac-b300: #8fb2ea; --ac-b100: #dbe5f5;
  --ac-link: #4d8ae8;
  --ac-tab-dark: var(--sheen), #003c92;
  --ac-tab-light: var(--sheen), #003c92;
  --ac-hero-dark: linear-gradient(135deg, #001a42 0%, #003c92 40%, #c8161d 100%);
  --ac-hero-light: linear-gradient(135deg, #003c92 0%, #1f5cb5 40%, #c8161d 100%);
  --primary-gradient: var(--sheen), #c8161d;
  --primary-glow: 0 0 22px 0 rgba(200, 22, 29, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(229, 84, 90, 0.35);
  --primary-glow-strong: 0 0 30px 0 rgba(200, 22, 29, 0.60), inset 0 1px 0 0 rgba(255, 255, 255, 0.26), inset 0 0 0 1px rgba(229, 84, 90, 0.45);
  --cta-card-gradient: linear-gradient(135deg, #c8161d 0%, #8e0f14 62%, #002a68 100%);
}
/* 亮底：文字/图标直接用原色号（亮底上够清楚） */
html[data-theme="light"][data-accent="royal"] { --ac: #003c92; --ac-rgb: 0, 60, 146; --ac-alt: #003c92; --ac-alt-rgb: 0, 60, 146; --ink-rgb: 10, 24, 52;
  --ghost-bg: rgba(0, 60, 146, 0.08); --ghost-hover-bg: rgba(0, 60, 146, 0.14); --ghost-border: 1px solid rgba(0, 60, 146, 0.16); }
html[data-theme="light"][data-accent="red"] { --ac: #c8161d; --ac-rgb: 200, 22, 29; --ac-alt: #c8161d; --ac-alt-rgb: 200, 22, 29; --ac-link: #003c92; --ink-rgb: 24, 22, 30;
  --ghost-bg: rgba(200, 22, 29, 0.07); --ghost-hover-bg: rgba(200, 22, 29, 0.12); --ghost-border: 1px solid rgba(200, 22, 29, 0.16); }

/* 暗底：深宝蓝款 = 深海军蓝底；红色款 = 微暖炭黑底。描边高光带品牌色温 */
html[data-theme="dark"][data-accent="royal"] {
  --bg: #060b16; --bg-sticky: #060b16; --bg-card: #0a1222; --bg-sidebar: #091020; --bg-card2: #0f1a31; --bg-popover: #0f1a31; --popover-bg: #0f1a31;
  --bg-tooltip: #14213d; --toast-bg: #14213d; --chart-tooltip-bg: #14213d; --bg-row-alt: #0d172c; --bottombar-bg: #060b16; --modal-bg: #0a1222;
  --cookie-bg: rgba(10, 18, 34, 0.96); --avatar-ring: 0 0 0 1.5px #0a1222; --popover-border: #1c2a4a; --border-modal: #1c2a4a;
  --nav-active-bg: rgba(0, 60, 146, 0.42); --nav-active-text: #ffffff; --nav-hover-bg: rgba(0, 60, 146, 0.26);
  --border-gradient: radial-gradient(circle 48px at top left, #4f6fa8, transparent), radial-gradient(circle 48px at bottom right, #4f6fa8, transparent), radial-gradient(circle 40px at top right, #0a1222, transparent), radial-gradient(circle 40px at bottom left, #0a1222, transparent), #1d2944;
  --bg-glow: radial-gradient(1100px 480px at 20% -160px, rgba(0, 60, 146, 0.42), transparent 70%), radial-gradient(700px 320px at 96% -170px, rgba(200, 22, 29, 0.10), transparent 70%);
}
html[data-theme="dark"][data-accent="red"] {
  --bg: #0c0d11; --bg-sticky: #0c0d11; --bg-card: #121318; --bg-sidebar: #111217; --bg-card2: #191a21; --bg-popover: #191a21; --popover-bg: #191a21;
  --bg-tooltip: #1f2029; --toast-bg: #1f2029; --chart-tooltip-bg: #1f2029; --bg-row-alt: #17181e; --bottombar-bg: #0c0d11; --modal-bg: #121318;
  --cookie-bg: rgba(18, 19, 24, 0.96); --avatar-ring: 0 0 0 1.5px #121318; --popover-border: #2a2b35; --border-modal: #2a2b35;
  --nav-active-bg: rgba(200, 22, 29, 0.22); --nav-active-text: #ffffff; --nav-hover-bg: rgba(200, 22, 29, 0.14);
  --border-gradient: radial-gradient(circle 48px at top left, #7f4a4e, transparent), radial-gradient(circle 48px at bottom right, #3f527a, transparent), radial-gradient(circle 40px at top right, #121318, transparent), radial-gradient(circle 40px at bottom left, #121318, transparent), #2c2d36;
  --bg-glow: radial-gradient(950px 440px at 18% -150px, rgba(200, 22, 29, 0.16), transparent 70%), radial-gradient(800px 380px at 94% -170px, rgba(0, 60, 146, 0.30), transparent 70%);
}
/* 亮底：深宝蓝款冷白、红色款暖白 */
html[data-theme="light"][data-accent="royal"] {
  --bg: #f3f5f9; --bg-sticky: #f3f5f9; --bottombar-bg: #ffffff; --bg-row-alt: #edf2fa;
  --nav-active-bg: rgba(0, 60, 146, 0.10);
  --bg-glow: radial-gradient(1000px 420px at 20% -150px, rgba(0, 60, 146, 0.10), transparent 70%);
}
html[data-theme="light"][data-accent="red"] {
  --bg: #f7f6f4; --bg-sticky: #f7f6f4; --bottombar-bg: #ffffff; --bg-row-alt: #f7f1f1;
  --nav-active-bg: rgba(200, 22, 29, 0.08);
  --bg-glow: radial-gradient(900px 380px at 18% -150px, rgba(200, 22, 29, 0.07), transparent 70%), radial-gradient(800px 360px at 92% -160px, rgba(0, 60, 146, 0.07), transparent 70%);
}

/* 页面 CSS 里残留的紫色深浅阶（--acx-*，只在非默认主题定义；默认紫走各处 var() 的原色回退，保证原版像素不变） */
html[data-accent]:not([data-accent="violet"]) {
  --acx-l: color-mix(in srgb, var(--ac) 22%, white);
  --acx-s: color-mix(in srgb, var(--ac) 68%, white);
  --acx-m: var(--ac);
  --acx-d: var(--ac-deep);
  --acx-dd: color-mix(in srgb, var(--ac-deep) 50%, black);
}