/* ===== Theme Variables (AI Optical · Light default) ===== */
:root {
  --bg-primary: #FAF5FF;
  --bg-secondary: #FFFFFF;
  --bg-card: linear-gradient(135deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.4) 100%);
  --bg-card-solid: rgba(255,255,255,0.6);
  --bg-input: #F3EEFD;
  --bg-section-alt: #FFFFFF;
  --bg-header: rgba(255,255,255,0.72);
  --bg-modal: rgba(255,255,255,0.92);
  --bg-dropdown: rgba(255,255,255,0.96);
  --text-primary: #1E1B4B;
  --text-secondary: #57538A;
  --text-muted: #8A86A8;
  --text-link: #6D28D9;
  --text-link-hover: #7C3AED;
  --border-color: rgba(109,40,217,0.12);
  --border-hover: rgba(124,58,237,0.4);
  --border-input: rgba(109,40,217,0.2);
  --overlay-bg: rgba(30,27,75,0.4);
  --shadow-sm: 0 2px 10px rgba(109,40,217,0.08);
  --shadow-lg: 0 16px 48px rgba(109,40,217,0.14);
  --shadow-card-hover: 0 12px 32px rgba(124,58,237,0.16);
  --btn-ghost-bg: rgba(124,58,237,0.06);
  --btn-ghost-border: rgba(124,58,237,0.18);
  --btn-ghost-color: #4C1D95;
  --btn-ghost-hover: rgba(124,58,237,0.1);
  --loader-bg: #FAF5FF;
  --loader-progress-bg: rgba(124,58,237,0.16);
  --announce-bg: rgba(124,58,237,0.07);
  --announce-border: rgba(124,58,237,0.18);
  --announce-label-bg: rgba(124,58,237,0.14);
  --stats-bg: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(8,145,178,0.04));
  --stats-border: rgba(124,58,237,0.16);
  --cta-bg: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(8,145,178,0.04) 100%);
  --cta-border: rgba(124,58,237,0.18);
  --hero-gradient-1: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(124,58,237,0.1) 0%, transparent 70%);
  --hero-gradient-2: radial-gradient(ellipse 80% 50% at 30% 100%, rgba(8,145,178,0.08) 0%, transparent 60%);
  --grid-line: rgba(109,40,217,0.08);
}

/* ===== Dark Theme (Deep Purple Night) ===== */
[data-theme="dark"] {
  --bg-primary: #0B0620;
  --bg-secondary: #140A2E;
  --bg-card: linear-gradient(135deg, rgba(124,58,237,0.1) 0%, rgba(8,145,178,0.05) 100%);
  --bg-card-solid: rgba(255,255,255,0.05);
  --bg-input: #1D1238;
  --bg-section-alt: #140A2E;
  --bg-header: rgba(11,6,32,0.82);
  --bg-modal: #1A0F33;
  --bg-dropdown: #1A0F33;
  --text-primary: #EDE9FE;
  --text-secondary: #A5A0C8;
  --text-muted: #77719B;
  --text-link: #A78BFA;
  --text-link-hover: #67E8F9;
  --border-color: rgba(237,233,254,0.1);
  --border-hover: rgba(167,139,250,0.4);
  --border-input: rgba(237,233,254,0.14);
  --overlay-bg: rgba(0,0,0,0.6);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
  --shadow-card-hover: 0 0 40px rgba(167,139,250,0.1);
  --btn-ghost-bg: rgba(255,255,255,0.05);
  --btn-ghost-border: rgba(237,233,254,0.12);
  --btn-ghost-color: #EDE9FE;
  --btn-ghost-hover: rgba(255,255,255,0.08);
  --loader-bg: radial-gradient(ellipse 120% 80% at 50% 0%, #1E1240 0%, #12082B 45%, #0B0620 100%);
  --loader-progress-bg: rgba(237,233,254,0.12);
  --announce-bg: rgba(167,139,250,0.08);
  --announce-border: rgba(167,139,250,0.2);
  --announce-label-bg: rgba(167,139,250,0.16);
  --stats-bg: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(8,145,178,0.04));
  --stats-border: rgba(167,139,250,0.16);
  --cta-bg: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(8,145,178,0.04) 100%);
  --cta-border: rgba(167,139,250,0.2);
  --hero-gradient-1: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(124,58,237,0.14) 0%, transparent 70%);
  --hero-gradient-2: radial-gradient(ellipse 80% 50% at 30% 100%, rgba(8,145,178,0.08) 0%, transparent 60%);
  --grid-line: rgba(167,139,250,0.06);
}

/* ===== Theme Toggle ===== */
.theme-btn {
  width: 36px; height: 36px; border-radius: 8px; border: none;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  font-size: 17px; transition: all 0.25s; display: flex;
  align-items: center; justify-content: center;
}
.theme-btn:hover { background: rgba(124,58,237,0.12); color: var(--text-primary); }
.sidebar .theme-btn { width: 100%; justify-content: flex-start; gap: 12px; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: inherit; }
.sidebar .theme-btn .sicon { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }

/* ===== Glass panels ===== */
.card, .feat-card, .step-card, .audience-card, .sec-card, .marquee-card,
.hero-panel, .sidebar-foot, .auth-box, .rank-card, .market-bar {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
:root .card, :root .feat-card, :root .step-card, :root .audience-card, :root .sec-card,
:root .marquee-card, :root .hero-panel, :root .sidebar-foot, :root .auth-box, :root .rank-card, :root .market-bar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
[data-theme="dark"] .card, [data-theme="dark"] .feat-card, [data-theme="dark"] .step-card,
[data-theme="dark"] .audience-card, [data-theme="dark"] .sec-card, [data-theme="dark"] .marquee-card,
[data-theme="dark"] .hero-panel, [data-theme="dark"] .sidebar-foot, [data-theme="dark"] .auth-box,
[data-theme="dark"] .rank-card, [data-theme="dark"] .market-bar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ===== Heading type ===== */
h1, h2, h3, h4, h5 {
  font-family: 'Space Grotesk', 'Noto Sans SC', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ===== Transition helpers ===== */
.theme-transition * { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease !important; }