/* public/css/theme.css
 *
 * Phase 14 — surface stylesheet.
 *
 * Themes set the --theme-* CSS variables on <html>; this stylesheet
 * binds them to the surfaces that should change colour. We use
 * :where() everywhere so specificity stays at 0 — that way page-local
 * CSS (rarity tints, .danger-box, .success-box, hljs colours, etc)
 * still wins, only the global page chrome shifts.
 *
 * If a page has not loaded this stylesheet, nothing changes. If it has
 * loaded it but no theme is equipped, --theme-* vars are set to the
 * platform default and the page looks identical to pre-Phase-14.
 */

/* ---- Page background --------------------------------------------- */
/* Specificity (0,0,2) on purpose — every student page declares its own
   `body { background: #0A0C1A; }` in a <style> block (specificity (0,0,1)).
   Without the extra `html` qualifier, our :where(body) lost the cascade. */
html body {
  background: var(--theme-bg, #0A0C1A);
  color: var(--theme-text, #FFFFFF);
  color-scheme: var(--theme-color-scheme, dark);
}

html :is(h1, h2, h3, h4, h5, h6, .text-white) {
  color: var(--theme-text, #FFFFFF) !important;
}
html .text-text-secondary { color: var(--theme-text-secondary, #9CA3C0) !important; }
html .text-text-tertiary { color: var(--theme-text-tertiary, #6B7194) !important; }
html :is(input, textarea, select) {
  color: var(--theme-text, #FFFFFF);
}
html :is(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--theme-text-tertiary, #6B7194) 86%, transparent);
}

/* The ambient-bg div on most pages uses two radial gradients. We
   re-paint them via the theme vars; if a page doesn't have this div,
   the rule has no effect. */
html .ambient-bg {
  background:
    radial-gradient(circle 650px at 50% 12%, var(--theme-bg-glow-1, rgba(120,50,220,0.13)) 0%, transparent 60%),
    radial-gradient(circle 500px at 18% 88%, var(--theme-bg-glow-2, rgba(80,40,180,0.09)) 0%, transparent 55%);
}

/* ---- Glass-card surface ------------------------------------------ */
html .glass-card {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--theme-surface, rgba(30,33,70,0.55)) 100%, transparent) 0%,
    color-mix(in srgb, var(--theme-surface, rgba(15,17,42,0.6))    92%, transparent) 100%);
  border-color: var(--theme-surface-edge, rgba(139,92,246,0.15));
}

/* ---- Primary button ---------------------------------------------- */
html .btn-primary {
  background: linear-gradient(135deg, var(--theme-primary, #7C3AED), var(--theme-primary-deep, #6D28D9));
  color: var(--theme-on-primary, #fff);
}
html .btn-primary:hover {
  box-shadow: 0 8px 22px var(--theme-primary-glow, rgba(124,58,237,0.45));
}

/* Secondary button uses a tinted version of primary. */
html .btn-secondary {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 10%, transparent);
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 25%, transparent);
  color: var(--theme-text-secondary, #B8BDD9);
}
html .btn-secondary:hover,
html .btn-secondary.active {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 22%, transparent);
}

/* ---- Sidebar shell and nav state --------------------------------- */
html .sidebar {
  background: transparent !important;
  background-color: transparent !important;
  border-right: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html .sidebar .brand-name .text-primary-light {
  color: var(--theme-primary, #8B5CF6);
}
/* The brand is text-only in both editions; legacy inline marks stay hidden
   until old page templates are retired. */
html .sidebar .logo-area > .relative,
html .sidebar .logo-area > svg {
  display: none !important;
}
html .sidebar .nav-item.active,
html .nav-item.active {
  background: linear-gradient(135deg, var(--theme-primary, #7C3AED), var(--theme-primary-deep, #6D28D9));
  box-shadow: 0 0 18px var(--theme-primary-glow, rgba(139,92,246,0.50));
}
html .sidebar .nav-item.active {
  color: var(--theme-on-primary, #fff);
}
html :is(.sidebar .nav-item, .nav-item):not(.active) {
  color: var(--theme-text-secondary, #7B82A0);
}
html .sidebar .nav-item:hover,
html .nav-item:hover {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 9%, transparent);
}
html .sidebar-toggle {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 10%, transparent);
  color: var(--theme-chip-fg, #C4B5FD);
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 18%, transparent);
}
html .sidebar-toggle:hover {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 20%, transparent);
  color: var(--theme-on-primary, #fff);
}

/* ---- Progress bar ------------------------------------------------ */
html .progress-fill {
  background: linear-gradient(90deg, var(--theme-progress-1, #7C3AED), var(--theme-progress-2, #8B5CF6));
  box-shadow: 0 0 12px var(--theme-primary-glow, rgba(139,92,246,0.45));
}

/* ---- Generic chip (chips on shop, profile, knowledge base, …) --- */
html .chip:not(.success):not(.warn):not(.cyan):not(.muted):not(.danger):not(.rare):not(.epic):not(.legendary):not(.mythic):not(.secret) {
  background: var(--theme-chip, rgba(139,92,246,0.12));
  color: var(--theme-chip-fg, #C4B5FD);
}
html .metric-chip:not(.text-warn):not(.text-success):not(.text-danger):not(.text-primary-light) {
  background: var(--theme-chip, rgba(139,92,246,0.08));
  color: var(--theme-chip-fg, #C4B5FD);
}

/* ---- Stat tiles (profile page) ----------------------------------- */
html .stat-tile {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 8%, transparent);
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 18%, transparent);
}

/* ---- Sidebar / topbar shells (where they reference primary glow) - */
html .glass-card.no-hover {
  border-color: var(--theme-surface-edge, rgba(139,92,246,0.15));
}

/* ---- Shared controls added after the original theme rollout -------
   These selectors cover newer student pages (AI, help requests,
   messages and the rebuilt task sessions). Status/error/success colors
   intentionally stay semantic; only neutral chrome follows the theme. */
html .text-primary-light {
  color: var(--theme-primary, #8B5CF6) !important;
}
html :is(.top-dropdown, .message-menu, .dialog, .modal-scroll, .reply-composer, .info-box) {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--theme-surface, rgba(30,33,70,.55)) 92%, var(--theme-bg, #0A0C1A)),
    color-mix(in srgb, var(--theme-bg, #0A0C1A) 90%, var(--theme-surface, rgba(30,33,70,.55))));
  border-color: var(--theme-surface-edge, rgba(139,92,246,.18));
}
html .pill:not(.success):not(.warn):not(.danger):not(.rare):not(.epic):not(.legendary):not(.mythic):not(.secret) {
  background: var(--theme-chip, rgba(139,92,246,.12));
  color: var(--theme-chip-fg, #C4B5FD);
}
html :is(.answer-input, .chat-input, .help-composer textarea) {
  background: color-mix(in srgb, var(--theme-bg, #0A0C1A) 88%, transparent);
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 34%, transparent);
}
html :is(.answer-input, .chat-input, .help-composer textarea):focus {
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 76%, white 8%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #7C3AED) 13%, transparent);
}
html :is(.tab-btn.active, .task-chip.active, .task-nav-item.active) {
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 48%, transparent);
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 18%, transparent);
  color: var(--theme-chip-fg, #C4B5FD);
}
html .request-card:hover {
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 44%, transparent);
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 9%, var(--theme-surface, transparent));
}
html .msg-student {
  background: linear-gradient(135deg, var(--theme-primary, #7C3AED), var(--theme-primary-deep, #6D28D9));
  color: var(--theme-on-primary, #fff);
  box-shadow: 0 4px 15px var(--theme-primary-glow, rgba(124,58,237,.3));
}
html .msg-tutor {
  background: color-mix(in srgb, var(--theme-surface, rgba(30,33,70,.55)) 86%, var(--theme-bg, #0A0C1A));
  border-color: var(--theme-surface-edge, rgba(255,255,255,.05));
}
html .reply-quote {
  border-left-color: var(--theme-primary, #7C3AED);
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 8%, transparent);
}
html .ask-ai-task {
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 48%, transparent);
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--theme-primary, #7C3AED) 28%, transparent),
    color-mix(in srgb, var(--theme-primary-deep, #6D28D9) 18%, transparent));
  color: var(--theme-chip-fg, #ECFEFF);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--theme-primary-glow, rgba(124,58,237,.35)) 45%, transparent);
}
html ::selection {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 42%, transparent);
  color: #fff;
}
html ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 38%, transparent);
}

/* ---- Built-in light appearance ---------------------------------- */
html[data-theme-tone="light"] .glass-card {
  box-shadow: 0 10px 28px rgba(15, 23, 42, .09);
}
html[data-theme-tone="light"] .glass-card::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--theme-primary) 24%, transparent),
    color-mix(in srgb, var(--theme-primary) 5%, transparent));
}
html[data-theme-tone="light"] :is(.btn-muted, .metric-chip, .chip.muted) {
  background: rgba(15, 23, 42, .055);
  border-color: rgba(71, 85, 105, .16);
  color: var(--theme-text-secondary);
}
html[data-theme-tone="light"] :is(.progress-track, .progress-bar) {
  background: rgba(71, 85, 105, .14);
}
html[data-theme-tone="light"] :is(.inventory-control, .select-input, .search-input, .form-control) {
  background: rgba(255, 255, 255, .88) !important;
  border-color: var(--theme-surface-edge) !important;
  color: var(--theme-text) !important;
}
html[data-theme-tone="light"] option {
  background: #FFFFFF !important;
  color: #171923 !important;
}
html[data-theme-tone="light"] :is(.top-dropdown, .message-menu, .dialog, .modal-scroll, .reply-composer) {
  box-shadow: 0 16px 42px rgba(15, 23, 42, .13);
}
html[data-theme-tone="light"] :is(.topbar-pill, .notify-btn) {
  background: color-mix(in srgb, var(--theme-surface, #fff) 90%, var(--theme-primary, #5B4BE1) 10%);
  border-color: color-mix(in srgb, var(--theme-primary, #5B4BE1) 28%, transparent);
  color: var(--theme-text, #171923);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}
html[data-theme-tone="light"] :is(.topbar-pill, .notify-btn):hover {
  background: color-mix(in srgb, var(--theme-surface, #fff) 78%, var(--theme-primary, #5B4BE1) 22%);
  color: var(--theme-text, #171923);
}
html[data-theme-tone="light"] :is(.dropdown-row, .profile-quick-btn) {
  color: var(--theme-text, #171923);
}
html[data-theme-tone="light"] :is(.dropdown-row, .profile-quick-btn):hover {
  color: var(--theme-primary-deep, #4338CA);
  background: color-mix(in srgb, var(--theme-primary, #5B4BE1) 12%, white);
}
html[data-theme-tone="light"] .notification-item {
  color: var(--theme-text, #171923);
  background: rgba(255, 255, 255, .72);
  border-color: var(--theme-surface-edge, rgba(71,85,105,.2));
}
html[data-theme-tone="light"] .mini-progress { background: rgba(71, 85, 105, .16); }
html[data-theme-tone="light"] :is(.btn-primary, .nav-item.active, .bg-primary, .bg-primary-light) {
  color: var(--theme-on-primary, #fff) !important;
}
html[data-theme-tone="light"] :is(.btn-primary, .nav-item.active, .bg-primary, .bg-primary-light) .text-white {
  color: var(--theme-on-primary, #fff) !important;
}
html[data-theme-tone="light"] :is(.showcase-slot, .sound-toggle, .collection-pill) {
  color: var(--theme-text-secondary);
  border-color: var(--theme-surface-edge);
  background: color-mix(in srgb, var(--theme-primary) 6%, white);
}
html[data-theme-tone="light"] .sidebar .ai-nav-badge {
  background: rgba(255,255,255,.58);
  color: var(--theme-chip-fg);
}
html[data-theme-tone="light"] .rarity-badge {
  color: #26313D;
  text-shadow: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--r1, var(--theme-primary)) 18%, white),
    color-mix(in srgb, var(--r2, var(--theme-primary-deep)) 11%, white));
}

/* ---- Theme identities -------------------------------------------
   The loader inserts one layer on every page. It sits inside the body's
   stacking context, behind application chrome, and never receives input. */
html {
  background: var(--theme-bg, #0A0C1A);
}
html body {
  isolation: isolate;
}
html[data-live-wallpaper] body {
  background-color: transparent !important;
  background-image: none !important;
}
html .theme-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
html .theme-fx__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(.88) contrast(.96);
  transition: opacity .45s ease;
}
html .theme-fx__video.is-ready {
  opacity: 1;
}
html .theme-fx__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
html .theme-fx::before,
html .theme-fx::after {
  content: '';
  position: absolute;
  inset: -12%;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, background-position, opacity;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  html .theme-fx__video { display: none; }
}

/* Common and calm themes: texture, not another plain colour fill. */
html[data-theme="graphite-theme"] .theme-fx::before {
  opacity: .16;
  background: repeating-linear-gradient(128deg, transparent 0 22px, rgba(203,213,225,.12) 23px, transparent 24px 48px);
}
html[data-theme="coffee-theme"] .theme-fx::before {
  opacity: .22;
  background: radial-gradient(circle at 86% 18%, transparent 0 110px, rgba(208,154,104,.12) 112px 114px, transparent 116px);
}
html[data-theme="coffee-theme"] .glass-card { box-shadow: 0 12px 34px rgba(42,22,13,.38), inset 0 1px rgba(244,216,194,.04); }
html[data-theme="ocean-theme"] .theme-fx::before {
  opacity: .18;
  background: repeating-radial-gradient(ellipse at 50% 118%, transparent 0 62px, rgba(45,212,191,.16) 64px 66px, transparent 68px 112px);
}
html[data-theme="notebook-theme"] .theme-fx::before {
  inset: 0;
  opacity: .44;
  background:
    linear-gradient(90deg, transparent 0 72px, rgba(220,38,38,.28) 73px 74px, transparent 75px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(37,99,235,.18) 32px 33px);
}
html[data-theme="notebook-theme"] .glass-card { border-left: 3px solid rgba(220,38,38,.32); box-shadow: 0 8px 22px rgba(30,64,175,.09); }

/* Subject themes. */
html[data-theme="biology-theme"] .theme-fx::before {
  opacity: .22;
  background:
    radial-gradient(circle at 18px 18px, rgba(132,204,22,.20) 0 7px, transparent 8px),
    radial-gradient(circle at 66px 58px, transparent 0 15px, rgba(74,222,128,.16) 16px 18px, transparent 19px);
  background-size: 96px 96px;
  animation: themeCellDrift 24s linear infinite;
}
html[data-theme="biology-theme"] .glass-card { box-shadow: 0 16px 38px rgba(22,101,52,.18); }
html[data-theme="chemistry-theme"] .theme-fx::before {
  opacity: .24;
  background:
    radial-gradient(circle, rgba(34,211,238,.22) 0 3px, transparent 4px) 0 0 / 83px 83px,
    radial-gradient(circle, transparent 0 9px, rgba(163,230,53,.16) 10px 11px, transparent 12px) 35px 28px / 117px 117px;
  animation: themeBubbles 18s linear infinite;
}
html[data-theme="exam-night"] .theme-fx::before {
  inset: 0;
  opacity: .62;
  background:
    radial-gradient(circle at 82% 13%, rgba(219,234,254,.30) 0 42px, rgba(96,165,250,.10) 43px 65px, transparent 66px),
    radial-gradient(circle, rgba(255,255,255,.70) 0 1px, transparent 1.5px) 0 0 / 91px 91px,
    radial-gradient(circle, rgba(147,197,253,.55) 0 1px, transparent 1.5px) 31px 17px / 127px 127px;
  animation: themeStars 36s linear infinite;
}
html[data-theme="geometry-theme"] .theme-fx::before {
  inset: 0;
  opacity: .20;
  background:
    linear-gradient(rgba(96,165,250,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.14) 1px, transparent 1px),
    repeating-linear-gradient(32deg, transparent 0 118px, rgba(251,113,133,.18) 119px 120px, transparent 121px 238px);
  background-size: 44px 44px, 44px 44px, auto;
}
html[data-theme="geometry-theme"] .glass-card { border-radius: 5px; box-shadow: 8px 8px 0 rgba(59,130,246,.05); }
html[data-theme="ice-theme"] .theme-fx::before {
  opacity: .20;
  background:
    linear-gradient(145deg, transparent 0 42%, rgba(125,211,252,.16) 42.5% 43.5%, transparent 44% 100%),
    linear-gradient(35deg, transparent 0 58%, rgba(186,230,253,.12) 58.5% 59.5%, transparent 60% 100%);
  background-size: 170px 140px, 210px 180px;
}
html[data-theme="russian-classic"] .theme-fx::before {
  inset: 0;
  opacity: .16;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(232,192,122,.22) 8.1% 8.2%, transparent 8.3% 91.7%, rgba(232,192,122,.22) 91.8% 91.9%, transparent 92%),
    repeating-linear-gradient(0deg, transparent 0 45px, rgba(232,192,122,.08) 46px 47px);
}
html[data-theme="history-archive"] .theme-fx::before {
  inset: 0;
  opacity: .33;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(146,64,14,.12), transparent 58%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(120,83,45,.11) 120px 121px);
}
html[data-theme="history-archive"] .glass-card { border-bottom: 2px solid rgba(154,52,18,.25); box-shadow: 0 10px 24px rgba(69,40,20,.10); }
html[data-theme="math-blueprint"] .theme-fx::before {
  inset: 0;
  opacity: .26;
  background:
    linear-gradient(rgba(125,211,252,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,211,252,.15) 1px, transparent 1px),
    radial-gradient(circle at 72% 28%, transparent 0 86px, rgba(250,204,21,.16) 87px 89px, transparent 90px);
  background-size: 32px 32px, 32px 32px, auto;
}

/* Coding, art and language themes. */
html[data-theme="pink-theme"] .theme-fx::before {
  opacity: .16;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(244,114,182,.25) 0 18px, transparent 19px),
    radial-gradient(ellipse at 84% 72%, rgba(236,72,153,.20) 0 28px, transparent 29px);
  background-size: 180px 180px, 260px 260px;
}
html[data-theme="matrix-theme"] .theme-fx::before {
  inset: -20% 0;
  opacity: .26;
  background:
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(34,197,94,.10) 32px, transparent 33px 64px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(74,222,128,.19) 19px, transparent 20px 37px);
  background-size: 100% 100%, 100% 148px;
  animation: themeMatrixRain 9s linear infinite;
}
html[data-theme="matrix-theme"] .theme-fx::after {
  inset: 0;
  opacity: .13;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(187,247,208,.18) 4px);
}
html[data-theme="cyber-grid"] .theme-fx::before {
  inset: -40% -15%;
  opacity: .28;
  background:
    linear-gradient(rgba(34,211,238,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(219,39,119,.18) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(520px) rotateX(58deg) translateY(18%);
  animation: themeCyberGrid 12s linear infinite;
}
html[data-theme="python-dark"] .theme-fx::before {
  inset: 0;
  opacity: .20;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(59,130,246,.20) 8.1% 8.3%, transparent 8.4% 12%, rgba(250,204,21,.16) 12.1% 12.3%, transparent 12.4%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(191,219,254,.08) 28px 29px);
}
html[data-theme="terminal-amber"] .theme-fx::before {
  inset: -10% 0;
  opacity: .24;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(251,191,36,.13) 23px, transparent 24px 46px),
    linear-gradient(90deg, transparent 0 9%, rgba(251,191,36,.20) 9.1% 9.3%, transparent 9.4%);
  animation: themeTerminalScan 8s linear infinite;
}
html[data-theme="sakura-calm"] .theme-fx::before {
  inset: -25%;
  opacity: .28;
  background:
    radial-gradient(ellipse, rgba(253,164,175,.52) 0 4px, transparent 5px) 0 0 / 92px 118px,
    radial-gradient(ellipse, rgba(249,168,212,.38) 0 3px, transparent 4px) 41px 33px / 137px 151px;
  transform: rotate(-12deg);
  animation: themePetals 20s linear infinite;
}
html[data-theme="literature-ink"] .theme-fx::before {
  opacity: .18;
  background:
    radial-gradient(ellipse at 16% 70%, rgba(190,24,93,.28), transparent 22%),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(226,232,240,.10) 36px 37px);
}
html[data-theme="literature-ink"] .glass-card { box-shadow: inset 3px 0 rgba(226,232,240,.12), 0 15px 38px rgba(0,0,0,.24); }
html[data-theme="physics-field"] .theme-fx::before {
  inset: -25%;
  opacity: .28;
  background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 42px, rgba(45,212,191,.18) 43px 44px, transparent 45px 82px);
  animation: themeFieldPulse 8s ease-in-out infinite alternate;
}
html[data-theme="physics-field"] .theme-fx::after {
  opacity: .22;
  background: linear-gradient(105deg, transparent 20%, rgba(217,70,239,.22) 49%, transparent 52%);
  animation: themeFieldSweep 12s ease-in-out infinite;
}

/* Premium themes make their motion and silhouettes unmistakable. */
html[data-theme="space-theme"] .theme-fx::before {
  inset: 0;
  opacity: .72;
  background:
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.5px) 0 0 / 73px 73px,
    radial-gradient(circle, rgba(167,139,250,.70) 0 1.2px, transparent 1.8px) 27px 35px / 109px 109px,
    radial-gradient(ellipse at 70% 34%, rgba(99,102,241,.18), transparent 34%);
  animation: themeStars 42s linear infinite;
}
html[data-theme="aurora-theme"] .theme-fx::before {
  inset: -20%;
  opacity: .36;
  background: linear-gradient(112deg, transparent 12%, rgba(52,211,153,.34) 32%, rgba(34,211,238,.22) 45%, rgba(124,58,237,.30) 59%, transparent 79%);
  background-size: 190% 100%;
  filter: blur(14px);
  animation: themeAurora 11s ease-in-out infinite alternate;
}
html[data-theme="gold-theme"] .theme-fx::before {
  inset: -30%;
  opacity: .18;
  background: repeating-conic-gradient(from 45deg at 50% 50%, rgba(245,158,11,.28) 0 2deg, transparent 2deg 22deg);
}
html[data-theme="gold-theme"] .glass-card { box-shadow: 0 16px 40px rgba(180,83,9,.20), inset 0 1px rgba(253,230,138,.08); }
html[data-theme="volcano-theme"] .theme-fx::before {
  inset: -20% 0;
  opacity: .32;
  background:
    radial-gradient(circle, rgba(251,191,36,.70) 0 2px, transparent 3px) 0 0 / 89px 113px,
    radial-gradient(circle, rgba(239,68,68,.58) 0 1px, transparent 2px) 31px 41px / 127px 149px;
  animation: themeEmbers 14s linear infinite;
}
html[data-theme="volcano-theme"] .theme-fx::after {
  inset: 48% -10% -25%;
  opacity: .30;
  background: radial-gradient(ellipse at 50% 100%, rgba(249,115,22,.56), transparent 62%);
  animation: themeFlare 4s ease-in-out infinite alternate;
}
html[data-theme="electric-theme"] .theme-fx::before {
  opacity: .31;
  background:
    repeating-linear-gradient(116deg, transparent 0 84px, rgba(250,204,21,.30) 85px 87px, transparent 88px 178px),
    repeating-linear-gradient(64deg, transparent 0 132px, rgba(96,165,250,.25) 133px 134px, transparent 135px 250px);
  animation: themeElectric 3.6s steps(2, end) infinite;
}
html[data-theme="neon-city"] .theme-fx::before {
  inset: 34% 0 0;
  opacity: .34;
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(236,72,153,.24) 43px 45px, transparent 46px 82px),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(34,211,238,.18) 59px 61px, transparent 62px 118px);
  clip-path: polygon(0 38%, 7% 38%, 7% 15%, 14% 15%, 14% 52%, 23% 52%, 23% 4%, 31% 4%, 31% 35%, 40% 35%, 40% 20%, 49% 20%, 49% 58%, 59% 58%, 59% 9%, 68% 9%, 68% 43%, 77% 43%, 77% 26%, 87% 26%, 87% 50%, 94% 50%, 94% 16%, 100% 16%, 100% 100%, 0 100%);
  animation: themeCityGlow 5s ease-in-out infinite alternate;
}
html[data-theme="neon-city"] .theme-fx::after {
  opacity: .20;
  background: repeating-linear-gradient(104deg, transparent 0 78px, rgba(34,211,238,.22) 79px, transparent 80px 158px);
  animation: themeRain 9s linear infinite;
}
html[data-theme="solar-flare"] .theme-fx::before {
  inset: -30%;
  opacity: .44;
  background: radial-gradient(circle at 76% 18%, rgba(254,240,138,.78) 0 5%, rgba(251,146,60,.40) 6% 11%, rgba(220,38,38,.18) 12% 18%, transparent 34%);
  animation: themeSolarPulse 6s ease-in-out infinite alternate;
}
html[data-theme="solar-flare"] .theme-fx::after {
  inset: -45%;
  opacity: .18;
  background: repeating-conic-gradient(from 0deg at 76% 18%, rgba(251,146,60,.34) 0 2deg, transparent 3deg 15deg);
  animation: themeQuantum 38s linear infinite;
}
html[data-theme="quantum-theme"] .theme-fx::before {
  inset: -32%;
  opacity: .34;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 52px, rgba(192,132,252,.20) 53px 55px, transparent 56px 104px),
    conic-gradient(from 0deg, transparent, rgba(192,132,252,.34), transparent 31%, rgba(34,211,238,.31), transparent 63%);
  border-radius: 50%;
  animation: themeQuantum 20s linear infinite;
}
html[data-theme="quantum-theme"] .theme-fx::after {
  inset: 18% 28%;
  opacity: .44;
  border: 1px solid rgba(34,211,238,.30);
  border-radius: 50%;
  box-shadow: 0 0 45px rgba(192,132,252,.24), inset 0 0 38px rgba(34,211,238,.16);
  animation: themeOrbit 8s ease-in-out infinite alternate;
}
html[data-theme="rgb-theme"] .theme-fx::before {
  inset: -25%;
  opacity: .22;
  background: conic-gradient(from 0deg, rgba(168,85,247,.32), rgba(34,211,238,.28), rgba(34,197,94,.24), rgba(245,158,11,.26), rgba(236,72,153,.28), rgba(168,85,247,.32));
  filter: blur(42px);
  animation: themeQuantum 18s linear infinite;
}
html[data-theme="periodic-theme"] .theme-fx::before {
  inset: 0;
  opacity: .20;
  background:
    linear-gradient(rgba(163,230,53,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.13) 1px, transparent 1px);
  background-size: 78px 78px;
}
html[data-theme="periodic-theme"] .theme-fx::after {
  inset: 8% 12%;
  opacity: .24;
  background:
    radial-gradient(ellipse at 18% 24%, transparent 0 42px, rgba(163,230,53,.25) 43px 44px, transparent 45px),
    radial-gradient(ellipse at 82% 68%, transparent 0 62px, rgba(34,211,238,.22) 63px 64px, transparent 65px),
    radial-gradient(circle at 18% 24%, rgba(163,230,53,.50) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 68%, rgba(34,211,238,.48) 0 4px, transparent 5px);
}
html[data-theme="periodic-theme"] .glass-card { box-shadow: inset 0 0 0 1px rgba(163,230,53,.05), 0 14px 34px rgba(8,145,178,.13); }
html[data-theme="hologram-theme"] .theme-fx::before {
  inset: 0;
  opacity: .25;
  background:
    linear-gradient(rgba(103,232,249,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.15) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(680px) rotateX(48deg) scale(1.4) translateY(15%);
  animation: themeHologramGrid 12s linear infinite;
}
html[data-theme="hologram-theme"] .theme-fx::after {
  opacity: .26;
  background: linear-gradient(105deg, transparent 30%, rgba(103,232,249,.25) 48%, rgba(167,139,250,.20) 52%, transparent 70%);
  background-size: 220% 100%;
  animation: themeHologramSweep 7s ease-in-out infinite;
}
html[data-theme="mystic-forest-theme"] .theme-fx::before {
  inset: 0;
  opacity: .38;
  background:
    radial-gradient(circle at 14% 28%, rgba(253,224,71,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 18%, rgba(134,239,172,.65) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 72%, rgba(245,158,11,.62) 0 2px, transparent 3px),
    repeating-linear-gradient(101deg, transparent 0 10%, rgba(3,45,32,.72) 11% 13%, transparent 14% 22%);
  background-size: 170px 170px, 210px 210px, 240px 240px, auto;
  animation: themeForestFireflies 9s ease-in-out infinite alternate;
}
html[data-theme="mystic-forest-theme"] .theme-fx::after {
  inset: 8% 4%;
  opacity: .16;
  background:
    conic-gradient(from 30deg at 24% 42%, transparent 0 32%, rgba(134,239,172,.5) 33% 34%, transparent 35% 100%),
    radial-gradient(circle at 70% 60%, transparent 0 54px, rgba(245,158,11,.4) 55px 56px, transparent 57px);
  animation: themeForestSymbols 14s linear infinite;
}
html[data-theme="underwater-city-theme"] .theme-fx::before {
  inset: 0;
  opacity: .34;
  background:
    radial-gradient(circle, transparent 0 5px, rgba(165,243,252,.46) 6px 7px, transparent 8px),
    radial-gradient(circle, transparent 0 3px, rgba(125,211,252,.38) 4px 5px, transparent 6px);
  background-size: 110px 150px, 76px 120px;
  background-position: 0 120px, 34px 180px;
  animation: themeUnderwaterBubbles 11s linear infinite;
}
html[data-theme="underwater-city-theme"] .theme-fx::after {
  inset: 0;
  opacity: .24;
  background:
    linear-gradient(112deg, transparent 12%, rgba(224,242,254,.22) 28%, transparent 43%),
    linear-gradient(180deg, transparent 58%, rgba(8,47,73,.65) 59% 100%),
    repeating-linear-gradient(90deg, transparent 0 8%, rgba(14,116,144,.25) 9% 12%, transparent 13% 19%);
  animation: themeUnderwaterLight 8s ease-in-out infinite alternate;
}

@keyframes themeCellDrift { to { background-position: 96px 48px, -117px 76px; } }
@keyframes themeBubbles { from { background-position: 0 110px, 35px 145px; } to { background-position: 0 -110px, 35px -145px; } }
@keyframes themeStars { to { background-position: 73px 73px, -109px 109px, 0 0; } }
@keyframes themeMatrixRain { to { background-position: 0 0, 0 296px; } }
@keyframes themeCyberGrid { to { background-position: 0 92px, 92px 0; transform: perspective(520px) rotateX(58deg) translateY(10%); } }
@keyframes themeTerminalScan { to { background-position: 0 184px, 0 0; } }
@keyframes themePetals { to { background-position: 92px 236px, -137px 302px; } }
@keyframes themeFieldPulse { to { transform: scale(1.08) rotate(3deg); opacity: .38; } }
@keyframes themeFieldSweep { 0%,100% { transform: translateX(-28%); } 50% { transform: translateX(28%); } }
@keyframes themeAurora { from { background-position: 0 0; transform: skewX(-4deg); } to { background-position: 100% 0; transform: skewX(4deg); } }
@keyframes themeEmbers { from { background-position: 0 220px, 31px 300px; } to { background-position: 0 -220px, 31px -300px; } }
@keyframes themeFlare { to { opacity: .46; transform: scale(1.08); } }
@keyframes themeElectric { 0%,100% { opacity: .12; transform: translate(0); } 45% { opacity: .34; transform: translate(7px,-3px); } 48% { opacity: .18; transform: translate(-4px,5px); } }
@keyframes themeCityGlow { to { opacity: .48; filter: brightness(1.22); } }
@keyframes themeRain { to { background-position: 158px 360px; } }
@keyframes themeSolarPulse { to { transform: scale(1.08); filter: brightness(1.16); } }
@keyframes themeQuantum { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes themeOrbit { to { transform: rotate(14deg) scale(1.07); } }
@keyframes themeHologramGrid { to { background-position: 0 112px, 112px 0; } }
@keyframes themeHologramSweep { 0%,100% { background-position: 180% 0; opacity: .14; } 50% { background-position: -80% 0; opacity: .34; } }
@keyframes themeForestFireflies { to { background-position: 42px -22px, -35px 30px, 28px 42px, 0 0; filter: saturate(1.18); } }
@keyframes themeForestSymbols { to { transform: rotate(360deg) scale(1.04); } }
@keyframes themeUnderwaterBubbles { from { background-position: 0 150px, 34px 190px; } to { background-position: 0 -160px, 34px -130px; } }
@keyframes themeUnderwaterLight { to { transform: translateX(3%) skewX(2deg); opacity: .32; } }

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .theme-fx::before,
  html[data-theme] .theme-fx::after,
  html[data-theme="rgb-theme"] { animation: none !important; }
}

/* =============================================================
   Mythic RGB-theme animation. Enabled when [data-theme="rgb-theme"]
   is on <html>. Cycles the primary accent through the spectrum so
   the chrome literally pulses. Keep duration long (10s) so it's
   ambient rather than seizure-inducing.
   ============================================================= */
@keyframes rgbThemeShift {
  0%   { --theme-primary: #A855F7; --theme-primary-deep: #7E22CE; }
  20%  { --theme-primary: #22D3EE; --theme-primary-deep: #0E7490; }
  40%  { --theme-primary: #22C55E; --theme-primary-deep: #15803D; }
  60%  { --theme-primary: #F59E0B; --theme-primary-deep: #B45309; }
  80%  { --theme-primary: #EC4899; --theme-primary-deep: #BE185D; }
  100% { --theme-primary: #A855F7; --theme-primary-deep: #7E22CE; }
}
/* @property declarations make CSS-variable animation actually interpolate
   in browsers that support them. Without these, the animation is a hard
   step. Safe fallback when @property isn't supported (Safari < 16.4): the
   step-wise transition still cycles correctly. */
@property --theme-primary {
  syntax: '<color>'; inherits: true; initial-value: #7C3AED;
}
@property --theme-primary-deep {
  syntax: '<color>'; inherits: true; initial-value: #6D28D9;
}
:where(html[data-theme="rgb-theme"]) {
  animation: rgbThemeShift 10s linear infinite;
}

/* =============================================================
   Reduced-motion respect: kill the RGB animation for users who
   asked the OS to dial down motion.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :where(html[data-theme="rgb-theme"]) {
    animation: none;
  }
}
