/* ==========================================================================
   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: #4f2dec; --blue-400: #7c5ff3; --blue-300: #9a80f9; --blue-200: #beabfd;
  --blue-100: #dfd4fe; --blue-050: #fafaff;

  /* ---------- 主紫（两主题相同） ---------- */
  --primary: #8874ff;
  --primary-alt: #8e8eff;
  --primary-deep: #5105a1;
  --primary-gradient: linear-gradient(180deg, #8874ff 0%, #5105a1 100%);
  --primary-glow: 0 0 28px 0 rgba(153, 51, 229, 0.30), 0 0 4px 0 rgba(184, 71, 255, 0.50);
  --primary-glow-strong: 0 0 28px 0 rgba(153, 51, 229, 0.30), 0 0 8px 0 rgba(184, 71, 255, 0.50);
  --tint-04: rgba(142, 142, 255, 0.04);
  --tint-08: rgba(142, 142, 255, 0.08);
  --tint-14: rgba(142, 142, 255, 0.14);
  --tint-24: rgba(142, 142, 255, 0.24);
  --cta-card-gradient: linear-gradient(135deg, #6f3ffa 0%, #9b6bff 100%);
  --purple-lift: 0 4px 14px rgba(124, 95, 243, 0.55), 0 0 18px rgba(155, 107, 255, 0.35);
  --purple-inset-ring: inset 0 0 1px rgba(79, 45, 236, 0.7), 0 0 8px rgba(79, 45, 236, 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: #8874ff;
  --text-link-hover: #a594ff;
  --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: #8e8eff;

  --ghost-bg: rgba(142, 142, 255, 0.04);
  --ghost-border: 0 solid transparent;
  --ghost-hover-bg: rgba(142, 142, 255, 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: linear-gradient(to left, #2a274e 0%, #454181 50%, #2a274e 100%);
  --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(142, 142, 255, 0.14); --nav-active-text: #8874ff; --nav-hover-bg: rgba(142, 142, 255, 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: #8874ff;

  --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: #8e8eff; --bottombar-active-bg: rgba(79, 45, 236, 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: #8874ff; --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: #8874ff; --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, #6a4cff 0%, #2f2a5a 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: #856ffc; --chart-bar-purple-2: #57309d;
  --chart-pos: #4ad17d; --chart-neg: #f05959;
  --chart-s1: #b0b0b0; --chart-s2: #7c3aed; --chart-s3: #a855f7; --chart-s4: #1d4ed8; --chart-s5: #facc15; --chart-s6: #1e3a8a;
  --chart-s7: #4ade80; --chart-s8: #166534; --chart-s9: #6b7280; --chart-s10: #8874ff; --chart-s11: #fb7185;
  --chart-tooltip-bg: #1e2333; --chart-tooltip-border: rgba(255, 255, 255, 0.10);
  --reviews-hero-gradient: linear-gradient(135deg, #2b16a9 0%, #4f2dec 30%, #1e40af 60%, #0d9488 100%);
}

/* ==========================================================================
   亮色
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --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(42, 39, 78, 0.04);
  --glass-6: rgba(42, 39, 78, 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(42, 39, 78, 0.10);
  --divider-soft: rgba(42, 39, 78, 0.08);
  --divider-row: rgba(42, 39, 78, 0.08);
  --hairline: rgba(42, 39, 78, 0.10);
  --border-modal: #e4e7ec;

  --text-1: #2a274e;
  --text-2: rgba(42, 39, 78, 0.80);
  --text-2-alt: rgba(42, 39, 78, 0.70);
  --text-3: rgba(42, 39, 78, 0.55);
  --text-45: rgba(42, 39, 78, 0.55);
  --text-40: rgba(42, 39, 78, 0.40);
  --text-35: rgba(42, 39, 78, 0.45);
  --text-subtle: #637083;
  --text-dim: #637083;
  --text-dim-hover: #8a96a8;
  --text-disabled: rgba(42, 39, 78, 0.25);
  --text-link: #8874ff;
  --text-link-hover: #5f4bc1;
  --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: #4f2dec;

  --ghost-bg: rgba(142, 142, 255, 0.24);
  --ghost-border: 0.5px solid rgba(255, 255, 255, 0.20);
  --ghost-hover-bg: rgba(142, 142, 255, 0.30);
  --outline-border: rgba(42, 39, 78, 0.15);
  --outline-text: rgba(42, 39, 78, 0.60);
  --outline-text-hover: #2a274e;
  --btn-disabled-bg: #e4e4e7; --btn-disabled-text: rgba(42, 39, 78, 0.4);

  --tab-bg: rgba(255, 255, 255, 0.50);
  --tab-selected-bg: linear-gradient(270deg, #573bd7 0%, #8065ec 24.522%, #9a80f9 50%, #775ce7 75.485%, #573bd7 100%);
  --tab-selected-border: 0.5px solid rgba(255, 255, 255, 0.20);
  --tab-text: rgba(42, 39, 78, 0.50); --tab-text-hover: #2a274e; --tab-selected-text: #ffffff;
  --tab-item-hover-bg: transparent;

  --nav-text: #2a274e; --nav-active-bg: rgba(142, 142, 255, 0.14); --nav-active-text: #8874ff; --nav-hover-bg: rgba(142, 142, 255, 0.14);
  --nav-chevron: rgba(42, 39, 78, 0.50);
  --collapse-btn: rgba(42, 39, 78, 0.40); --collapse-btn-hover: rgba(42, 39, 78, 0.70);
  --social-btn-bg: rgba(42, 39, 78, 0.04); --social-btn-hover: rgba(42, 39, 78, 0.10); --social-icon: #2a274e;

  --field-bg: rgba(228, 228, 231, 0.30); --field-border: #e4e4e7; --field-text: #2a274e; --field-placeholder: rgba(42, 39, 78, 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(42, 39, 78, 0.10); --select-text: rgba(42, 39, 78, 0.60); --select-text-hover: #2a274e;
  --chip-bg: rgba(42, 39, 78, 0.06); --chip-text: rgba(42, 39, 78, 0.75);
  --kbd-bg: rgba(42, 39, 78, 0.06); --kbd-border: #e4e7ec; --kbd-text: #637083;

  --table-th-text: rgba(42, 39, 78, 0.40); --table-th-border: rgba(42, 39, 78, 0.10);
  --table-row-border: rgba(42, 39, 78, 0.08); --table-row-hover: rgba(42, 39, 78, 0.02);
  --share-track: rgba(42, 39, 78, 0.10); --share-fill: #8874ff;

  --avatar-ring: 0 0 0 1.5px rgba(42, 39, 78, 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(42, 39, 78, 0.14);
  --skeleton-a: rgba(42, 39, 78, 0.05); --skeleton-b: rgba(42, 39, 78, 0.10);

  --scrollbar-thumb: #ced2da; --scrollbar-thumb-hover: #97a1af;
  --bottombar-bg: #ffffff; --bottombar-border: rgba(42, 39, 78, 0.10); --bottombar-shadow: 0 -8px 24px rgba(42, 39, 78, 0.12);
  --bottombar-text: #97a1af; --bottombar-active: #8e8eff; --bottombar-active-bg: rgba(79, 45, 236, 0.07); --bottombar-hover-bg: #e4e7ec;
  --popover-bg: #ffffff; --popover-border: #e4e7ec; --popover-text: #2a274e; --popover-earn-border: #4f2dec; --popover-earn-text: #4f2dec;
  --overlay: rgba(42, 39, 78, 0.25); --overlay-auth: rgba(10, 13, 24, 0.72);
  --modal-bg: #ffffff; --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: #ffffff; --cookie-text: rgba(10, 10, 10, 0.70); --cookie-link: #4f2dec; --cookie-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  --footer-title: #2a274e; --footer-link: rgba(42, 39, 78, 0.55); --footer-link-hover: #8874ff; --footer-divider: rgba(42, 39, 78, 0.10);
  --footer-legal: rgba(42, 39, 78, 0.55); --footer-legal-link: rgba(42, 39, 78, 0.45); --footer-social-bg: rgba(42, 39, 78, 0.04);
  --toast-bg: #ffffff; --toast-border: rgba(42, 39, 78, 0.10);
  --support-header: linear-gradient(135deg, #6a4cff 0%, #2f2a5a 100%);

  --chart-grid: rgba(42, 39, 78, 0.18); --chart-grid-soft: rgba(42, 39, 78, 0.08);
  --chart-axis: rgba(42, 39, 78, 0.25); --chart-tick: rgba(42, 39, 78, 0.45); --chart-tick-alt: rgba(42, 39, 78, 0.45); --chart-ref: rgba(42, 39, 78, 0.18);
  --chart-bar: #8a8a96; --chart-bar-purple-1: #856ffc; --chart-bar-purple-2: #57309d;
  --chart-pos: #1f9d57; --chart-neg: #dc2626;
  --chart-s1: #8a8a96; --chart-s2: #7c3aed; --chart-s3: #a855f7; --chart-s4: #1d4ed8; --chart-s5: #d9a800; --chart-s6: #1e3a8a;
  --chart-s7: #22c55e; --chart-s8: #166534; --chart-s9: #6b7280; --chart-s10: #8874ff; --chart-s11: #e11d48;
  --chart-tooltip-bg: #fefefe; --chart-tooltip-border: #e4e7ec;
  --reviews-hero-gradient: linear-gradient(135deg, #6c5ce7 0%, #a78bfa 30%, #7c3aed 55%, #2dd4bf 100%);
}