/* ========================================================================== THEME-OVERHAULS.CSS - 8 Style Overhauls + Theme Settings toggle UI -------------------------------------------------------------------------- Loaded after theme.css (order matters). Never edits base.css/theme.css. How it works: - JS (app.core.js setThemeOverhaul) sets data-theme-overhaul on BOTH and . - Tokens are declared on html[data-theme-overhaul="x"] AND body[data-theme-overhaul="x"]: * html-level: the derived :root vars (--app-surface*, --btn-*, --pane-bg) recompute from the overhauled base tokens. * body-level: body.dark-mode-active (theme.css) redeclares the same tokens on body; our body[attr] selector ties it at (0,1,1) and wins because this file loads later. Without this, overhauls are invisible in dark mode. - body.dark-mode-active also hard-codes the page background with !important, so each overhaul sets its own body background !important. - Accent gradients: the theme loader sets --g/--g1/--g2/--g3/--amb-c1/ --amb-c2 INLINE on at startup, so each overhaul overrides them with !important (author !important > inline). While an overhaul is active it owns the accent identity; the palette picker applies to the Default style only. Explicit custom colors (--custom-*) still win. - Element rules only touch decoration (surface, radius, border-color, shadows, fonts, backdrop treatment, and decorative pseudo-elements). Quiz-card geometry, fixed-position layering, and scrollbar rules stay untouched. - Accessibility: body.a11y-high-contrast keeps its tokens (guard at the end of this file outranks every overhaul). ========================================================================== */ /* --- Style Overhaul toggle (Theme Settings modal) --- */ .theme-overhaul-toggle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 5px; margin-top: 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--quiz-gen-outline, #334155) 76%, transparent 24%); background: color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.72)) 72%, transparent 28%); } #theme-overhaul-container[hidden], #theme-canvas-wrapper[hidden] { display: none !important; } .overhaul-btn { appearance: none; min-height: 30px; padding: 7px 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #94a3b8; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .overhaul-btn:hover { color: var(--text-q, #f8fafc); background: rgba(255, 255, 255, 0.05); } .overhaul-btn.active { color: #ffffff; border-color: color-mix(in srgb, var(--g1, #60a5fa) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--g1, #60a5fa) 26%, transparent), color-mix(in srgb, var(--g2, #f472b6) 22%, transparent)); } /* --- Shared overhaul plumbing (any overhaul active) --------------------- Each overhaul owns a distinct workspace material and a readable card surface. The Default visual recipe is intentionally not reused here. */ html[data-theme-overhaul], body[data-theme-overhaul] { --pane-bg: var(--overhaul-workspace-bg, var(--overhaul-panel-bg, #080b12)); --pane-bg-elevated: linear-gradient(165deg, color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.6)) 68%, #20262e 32%) 0%, color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.6)) 84%, #13181e 16%) 100%); --quiz-card-bg: var(--custom-quiz-card-bg, var(--overhaul-card-surface, var(--card-bg))); } /* ========================================================================== 1. NEBULA GLASSMORPHISM - frosted violet glass, ultra-rounded ========================================================================== */ html[data-theme-overhaul="glassmorphism"], body[data-theme-overhaul="glassmorphism"] { --bg: #090314; --card-bg: rgba(44, 30, 72, 0.5); --bd: rgba(167, 139, 250, 0.3); --text-main: #f3f0fa; --text-q: var(--custom-text-q, #ffffff); --text-a: var(--custom-text-a, #eae5f5); --choice-bg: var(--custom-choice-bg, rgba(255, 255, 255, 0.05)); --font-main: 'Outfit', 'Inter', sans-serif; --btn-radius-sm: 14px; --btn-radius-md: 18px; --btn-radius-lg: 22px; /* Accent identity: !important beats the inline palette vars set by JS */ --g: linear-gradient(135deg, #818cf8, #a855f7 40%, #ec4899) !important; --g1: #818cf8 !important; --g3: #a855f7 !important; --g2: #ec4899 !important; --amb-c1: #818cf866 !important; --amb-c2: #ec489999 !important; --overhaul-workspace-bg: linear-gradient(118deg, rgba(129, 140, 248, 0.09) 0 1px, transparent 1px 38%), radial-gradient(circle at 18% 20%, rgba(236, 72, 153, 0.16) 0 2px, transparent 3px), linear-gradient(145deg, #120522 0%, #1a0a32 47%, #08030f 100%); --overhaul-panel-bg: linear-gradient(145deg, rgba(44, 30, 72, 0.54), rgba(20, 11, 36, 0.68)); --overhaul-panel-border: rgba(255, 255, 255, 0.12); --overhaul-panel-radius: 24px; --overhaul-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 20px 50px rgba(4, 2, 12, 0.3); --overhaul-card-surface: rgba(37, 23, 61, 0.58); --overhaul-card-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(129, 140, 248, 0.07) 52%, rgba(236, 72, 153, 0.06)); --overhaul-card-border: rgba(255, 255, 255, 0.14); --overhaul-card-radius: 28px; --overhaul-card-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.16), 0 25px 60px rgba(4, 2, 12, 0.42), 0 0 42px rgba(129, 140, 248, 0.1); --overhaul-card-overlay: radial-gradient(100% 130% at 0% 0%, rgba(129, 140, 248, 0.2), transparent 58%), radial-gradient(100% 130% at 100% 0%, rgba(236, 72, 153, 0.16), transparent 60%); --overhaul-card-overlay-opacity: 0.32; --overhaul-card-trim-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055); --overhaul-choice-bg: rgba(255, 255, 255, 0.045); --overhaul-choice-border: rgba(255, 255, 255, 0.11); --overhaul-choice-radius: 18px; --overhaul-choice-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 7px 20px rgba(4, 2, 12, 0.16); --overhaul-choice-filter: blur(16px) saturate(115%); --overhaul-choice-hover-bg: rgba(255, 255, 255, 0.085); --overhaul-choice-hover-border: rgba(196, 181, 253, 0.34); --overhaul-choice-hover-shadow: 0 10px 26px rgba(76, 29, 149, 0.18); --overhaul-choice-hover-transform: translateX(4px); --overhaul-choice-correct-bg: linear-gradient(135deg, rgba(129, 140, 248, 0.28), rgba(168, 85, 247, 0.2)); --overhaul-choice-correct-border: rgba(196, 181, 253, 0.72); --overhaul-choice-correct-shadow: 0 0 22px rgba(168, 85, 247, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1); --overhaul-choice-incorrect-bg: rgba(236, 72, 153, 0.055); --overhaul-choice-incorrect-border: rgba(236, 72, 153, 0.25); --overhaul-dock-bg: rgba(30, 18, 50, 0.78); --overhaul-dock-border: rgba(196, 181, 253, 0.26); --overhaul-dock-radius: 9999px; --overhaul-dock-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 16px 38px rgba(4, 2, 12, 0.34); --overhaul-dock-filter: brightness(1) saturate(1.08); --overhaul-btn-bg: rgba(255, 255, 255, 0.035); --overhaul-btn-border: rgba(255, 255, 255, 0.1); --overhaul-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 5px 14px rgba(4, 2, 12, 0.16); --overhaul-btn-hover-bg: rgba(255, 255, 255, 0.085); --overhaul-btn-hover-border: rgba(255, 255, 255, 0.2); --overhaul-btn-hover-shadow: 0 9px 22px rgba(76, 29, 149, 0.2); --overhaul-btn-active-bg: linear-gradient(135deg, rgba(129, 140, 248, 0.24), rgba(236, 72, 153, 0.2)); } html[data-theme-overhaul="glassmorphism"] { background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #818cf8) 16%, transparent) 0%, transparent 32%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #ec4899) 14%, transparent) 0%, transparent 34%), linear-gradient(170deg, #0b0616 0%, #030107 100%) #090314; } body[data-theme-overhaul="glassmorphism"] { font-family: 'Outfit', 'Inter', sans-serif !important; background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #818cf8) 16%, transparent) 0%, transparent 32%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #ec4899) 14%, transparent) 0%, transparent 34%), linear-gradient(170deg, #0b0616 0%, #030107 100%) #090314 !important; } body[data-theme-overhaul="glassmorphism"] #quiz-card { border-radius: 26px; border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.14), 0 22px 52px rgba(4, 2, 12, 0.42); } body[data-theme-overhaul="glassmorphism"] .glass-btn { border-radius: 16px; } body[data-theme-overhaul="glassmorphism"] #theme-modal { border-radius: 24px; } /* ========================================================================== 2. COZY EARTH - sage & terracotta, matte book-study look ========================================================================== */ html[data-theme-overhaul="cozy-earth"], body[data-theme-overhaul="cozy-earth"] { --bg: #151a17; --card-bg: rgba(32, 39, 34, 0.94); --bd: #3a453c; --text-main: #dfd8c9; --text-q: var(--custom-text-q, #e8ddcc); --text-a: var(--custom-text-a, #d6cdb8); --choice-bg: var(--custom-choice-bg, rgba(155, 178, 156, 0.05)); --font-main: Georgia, Garamond, 'Times New Roman', serif; --btn-radius-sm: 8px; --btn-radius-md: 10px; --btn-radius-lg: 12px; --g: linear-gradient(135deg, #9bb29c, #d6b270 40%, #d68770) !important; --g1: #9bb29c !important; --g3: #d6b270 !important; --g2: #d68770 !important; --amb-c1: #9bb29c66 !important; --amb-c2: #d6877099 !important; --overhaul-workspace-bg: repeating-linear-gradient(0deg, rgba(237, 224, 196, 0.025) 0 1px, transparent 1px 5px), linear-gradient(145deg, #151b17 0%, #202820 54%, #111512 100%); --overhaul-panel-bg: linear-gradient(155deg, #202722, #1b211d); --overhaul-panel-border: #3a453c; --overhaul-panel-radius: 14px; --overhaul-panel-shadow: 0 9px 24px rgba(0, 0, 0, 0.18); --overhaul-card-surface: rgba(32, 39, 34, 0.62); --overhaul-card-gradient: linear-gradient(145deg, rgba(155, 178, 156, 0.045), transparent 42%, rgba(214, 135, 112, 0.035)); --overhaul-card-border: #435047; --overhaul-card-radius: 16px; --overhaul-card-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(232, 221, 204, 0.035); --overhaul-card-overlay: repeating-linear-gradient(0deg, rgba(232, 221, 204, 0.012) 0 1px, transparent 1px 4px), radial-gradient(circle at 12% 12%, rgba(155, 178, 156, 0.11), transparent 42%); --overhaul-card-overlay-opacity: 0.46; --overhaul-card-trim-shadow: inset 0 0 0 1px rgba(155, 178, 156, 0.06); --overhaul-choice-bg: rgba(37, 46, 40, 0.5); --overhaul-choice-border: #3d493f; --overhaul-choice-radius: 12px; --overhaul-choice-shadow: 0 3px 9px rgba(0, 0, 0, 0.11); --overhaul-choice-filter: none; --overhaul-choice-hover-bg: #2b362e; --overhaul-choice-hover-border: #9bb29c; --overhaul-choice-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.14); --overhaul-choice-hover-transform: translateX(2px); --overhaul-choice-correct-bg: rgba(155, 178, 156, 0.15); --overhaul-choice-correct-border: #9bb29c; --overhaul-choice-correct-shadow: 0 5px 15px rgba(155, 178, 156, 0.14); --overhaul-choice-incorrect-bg: rgba(214, 135, 112, 0.075); --overhaul-choice-incorrect-border: rgba(214, 135, 112, 0.42); --overhaul-dock-bg: #202722; --overhaul-dock-border: #435047; --overhaul-dock-radius: 12px; --overhaul-dock-shadow: 0 7px 18px rgba(0, 0, 0, 0.18); --overhaul-dock-filter: none; --overhaul-btn-bg: #252e28; --overhaul-btn-border: #3a453c; --overhaul-btn-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); --overhaul-btn-hover-bg: #2b362e; --overhaul-btn-hover-border: #9bb29c; --overhaul-btn-hover-shadow: 0 4px 12px rgba(155, 178, 156, 0.12); --overhaul-btn-active-bg: rgba(214, 178, 112, 0.16); } html[data-theme-overhaul="cozy-earth"] { background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #9bb29c) 10%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #d68770) 8%, transparent) 0%, transparent 32%), linear-gradient(180deg, #151a17 0%, #1a201c 100%) #151a17; } body[data-theme-overhaul="cozy-earth"] { font-family: Georgia, Garamond, 'Times New Roman', serif !important; background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #9bb29c) 10%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #d68770) 8%, transparent) 0%, transparent 32%), linear-gradient(180deg, #151a17 0%, #1a201c 100%) #151a17 !important; } body[data-theme-overhaul="cozy-earth"] #quiz-card { border-radius: 14px; border-color: #3a453c; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); } body[data-theme-overhaul="cozy-earth"] .glass-btn { border-radius: 10px; } body[data-theme-overhaul="cozy-earth"] #theme-modal { border-radius: 14px; } /* ========================================================================== 3. ROYAL OBSIDIAN - onyx black, gold & bronze trim ========================================================================== */ html[data-theme-overhaul="royal-obsidian"], body[data-theme-overhaul="royal-obsidian"] { --bg: #07070a; --card-bg: rgba(18, 17, 24, 0.94); --bd: #46381e; --text-main: #f0eae1; --text-q: var(--custom-text-q, #f3e5ab); --text-a: var(--custom-text-a, #e8e0d0); --choice-bg: var(--custom-choice-bg, rgba(207, 168, 94, 0.05)); --font-main: Georgia, 'Times New Roman', serif; --btn-radius-sm: 6px; --btn-radius-md: 8px; --btn-radius-lg: 10px; --g: linear-gradient(135deg, #cfa85e, #f3e5ab 40%, #8f6f36) !important; --g1: #cfa85e !important; --g3: #f3e5ab !important; --g2: #8f6f36 !important; --amb-c1: #cfa85e66 !important; --amb-c2: #8f6f3699 !important; --overhaul-workspace-bg: linear-gradient(90deg, transparent 0 49.8%, rgba(207, 168, 94, 0.08) 49.9% 50.1%, transparent 50.2%), radial-gradient(ellipse at 50% 28%, #211b0f 0%, #0d0c0d 42%, #050506 100%); --overhaul-panel-bg: linear-gradient(150deg, rgba(20, 19, 25, 0.97), rgba(8, 8, 11, 0.98)); --overhaul-panel-border: #57431f; --overhaul-panel-radius: 12px; --overhaul-panel-shadow: inset 0 0 0 1px rgba(207, 168, 94, 0.08), 0 14px 38px rgba(0, 0, 0, 0.46); --overhaul-card-surface: rgba(14, 14, 18, 0.62); --overhaul-card-gradient: linear-gradient(145deg, rgba(243, 229, 171, 0.025), transparent 44%, rgba(143, 111, 54, 0.04)); --overhaul-card-border: #66502a; --overhaul-card-radius: 14px; --overhaul-card-shadow: inset 0 0 0 1px rgba(207, 168, 94, 0.2), inset 0 0 0 4px rgba(7, 7, 10, 0.82), inset 0 0 0 5px rgba(243, 229, 171, 0.08), 0 18px 45px rgba(0, 0, 0, 0.58); --overhaul-card-overlay: radial-gradient(circle at 50% -20%, rgba(243, 229, 171, 0.16), transparent 48%), linear-gradient(110deg, transparent 20%, rgba(207, 168, 94, 0.035) 50%, transparent 80%); --overhaul-card-overlay-opacity: 0.38; --overhaul-card-trim-shadow: inset 0 0 0 1px rgba(243, 229, 171, 0.1), inset 0 0 26px rgba(207, 168, 94, 0.035); --overhaul-choice-bg: rgba(20, 19, 24, 0.52); --overhaul-choice-border: #49391e; --overhaul-choice-radius: 8px; --overhaul-choice-shadow: inset 0 1px 0 rgba(243, 229, 171, 0.03), 0 4px 10px rgba(0, 0, 0, 0.2); --overhaul-choice-filter: none; --overhaul-choice-hover-bg: rgba(207, 168, 94, 0.075); --overhaul-choice-hover-border: #cfa85e; --overhaul-choice-hover-shadow: 0 0 14px rgba(207, 168, 94, 0.1); --overhaul-choice-hover-transform: translateX(2px); --overhaul-choice-correct-bg: rgba(207, 168, 94, 0.14); --overhaul-choice-correct-border: #f3e5ab; --overhaul-choice-correct-shadow: 0 0 18px rgba(207, 168, 94, 0.19), inset 0 0 0 1px rgba(243, 229, 171, 0.06); --overhaul-choice-incorrect-bg: rgba(143, 111, 54, 0.06); --overhaul-choice-incorrect-border: rgba(143, 111, 54, 0.45); --overhaul-dock-bg: rgba(14, 14, 18, 0.96); --overhaul-dock-border: #57431f; --overhaul-dock-radius: 10px; --overhaul-dock-shadow: inset 0 0 0 1px rgba(243, 229, 171, 0.06), 0 10px 28px rgba(0, 0, 0, 0.46); --overhaul-dock-filter: none; --overhaul-btn-bg: rgba(20, 19, 24, 0.94); --overhaul-btn-border: #49391e; --overhaul-btn-shadow: inset 0 1px 0 rgba(243, 229, 171, 0.035), 0 3px 8px rgba(0, 0, 0, 0.22); --overhaul-btn-hover-bg: rgba(207, 168, 94, 0.09); --overhaul-btn-hover-border: #cfa85e; --overhaul-btn-hover-shadow: 0 0 14px rgba(207, 168, 94, 0.13); --overhaul-btn-active-bg: linear-gradient(135deg, rgba(143, 111, 54, 0.34), rgba(207, 168, 94, 0.2)); } html[data-theme-overhaul="royal-obsidian"] { background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #cfa85e) 9%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #8f6f36) 8%, transparent) 0%, transparent 32%), linear-gradient(160deg, #07070a 0%, #100f13 60%, #050507 100%) #07070a; } body[data-theme-overhaul="royal-obsidian"] { font-family: Georgia, 'Times New Roman', serif !important; background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #cfa85e) 9%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #8f6f36) 8%, transparent) 0%, transparent 32%), linear-gradient(160deg, #07070a 0%, #100f13 60%, #050507 100%) #07070a !important; } /* Double rule: bronze border + inner gold hairline */ body[data-theme-overhaul="royal-obsidian"] #quiz-card { border-radius: 12px; border-color: #57431f; box-shadow: inset 0 0 0 1px rgba(207, 168, 94, 0.16), inset 0 1px 0 rgba(255, 238, 171, 0.12), 0 15px 40px rgba(0, 0, 0, 0.5); } body[data-theme-overhaul="royal-obsidian"] .glass-btn { border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 238, 171, 0.08), 0 2px 6px rgba(0, 0, 0, 0.2); } body[data-theme-overhaul="royal-obsidian"] #theme-modal { border-radius: 12px; } /* ========================================================================== 4. SAKURA BLOSSOM - deep plum, cherry pink & lilac glow ========================================================================== */ html[data-theme-overhaul="sakura"], body[data-theme-overhaul="sakura"] { --bg: #140d1a; --card-bg: rgba(40, 26, 51, 0.8); --bd: rgba(255, 183, 197, 0.24); --text-main: #eae3f0; --text-q: var(--custom-text-q, #fff0f4); --text-a: var(--custom-text-a, #e9dff0); --choice-bg: var(--custom-choice-bg, rgba(255, 183, 197, 0.05)); --font-main: 'Outfit', 'Inter', sans-serif; --btn-radius-sm: 12px; --btn-radius-md: 16px; --btn-radius-lg: 20px; --g: linear-gradient(135deg, #ffb7c5, #dfb2f4 40%, #b39ddb) !important; --g1: #ffb7c5 !important; --g3: #dfb2f4 !important; --g2: #b39ddb !important; --amb-c1: #ffb7c566 !important; --amb-c2: #b39ddb99 !important; --overhaul-workspace-bg: radial-gradient(circle at 82% 18%, rgba(255, 183, 197, 0.16) 0 8%, transparent 8.3%), linear-gradient(155deg, #24131c 0%, #1b111a 52%, #100a12 100%); --overhaul-panel-bg: linear-gradient(150deg, rgba(47, 30, 58, 0.83), rgba(24, 14, 31, 0.9)); --overhaul-panel-border: rgba(255, 183, 197, 0.24); --overhaul-panel-radius: 20px; --overhaul-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 15px 36px rgba(10, 4, 14, 0.34), 0 0 24px rgba(255, 183, 197, 0.05); --overhaul-card-surface: rgba(35, 21, 45, 0.6); --overhaul-card-gradient: linear-gradient(150deg, rgba(255, 183, 197, 0.065), rgba(223, 178, 244, 0.035) 48%, rgba(12, 7, 17, 0.12)); --overhaul-card-border: rgba(255, 183, 197, 0.3); --overhaul-card-radius: 22px; --overhaul-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 24px rgba(255, 183, 197, 0.1), 0 18px 44px rgba(10, 4, 14, 0.46); --overhaul-card-overlay: radial-gradient(ellipse at 14% 0%, rgba(255, 183, 197, 0.2), transparent 48%), radial-gradient(ellipse at 88% 8%, rgba(223, 178, 244, 0.16), transparent 46%); --overhaul-card-overlay-opacity: 0.38; --overhaul-card-trim-shadow: inset 0 0 0 1px rgba(255, 240, 244, 0.055), inset 0 0 30px rgba(223, 178, 244, 0.035); --overhaul-choice-bg: rgba(255, 183, 197, 0.045); --overhaul-choice-border: rgba(255, 183, 197, 0.17); --overhaul-choice-radius: 14px; --overhaul-choice-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 5px 15px rgba(10, 4, 14, 0.16); --overhaul-choice-filter: blur(8px); --overhaul-choice-hover-bg: rgba(255, 183, 197, 0.085); --overhaul-choice-hover-border: rgba(255, 183, 197, 0.42); --overhaul-choice-hover-shadow: 0 7px 20px rgba(255, 183, 197, 0.1); --overhaul-choice-hover-transform: translateX(3px); --overhaul-choice-correct-bg: rgba(223, 178, 244, 0.14); --overhaul-choice-correct-border: #dfb2f4; --overhaul-choice-correct-shadow: 0 0 18px rgba(223, 178, 244, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); --overhaul-choice-incorrect-bg: rgba(255, 183, 197, 0.055); --overhaul-choice-incorrect-border: rgba(255, 183, 197, 0.29); --overhaul-dock-bg: rgba(35, 21, 45, 0.88); --overhaul-dock-border: rgba(255, 183, 197, 0.28); --overhaul-dock-radius: 20px; --overhaul-dock-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(10, 4, 14, 0.36), 0 0 18px rgba(255, 183, 197, 0.06); --overhaul-dock-filter: brightness(1) saturate(1.04); --overhaul-btn-bg: rgba(255, 255, 255, 0.025); --overhaul-btn-border: rgba(255, 183, 197, 0.17); --overhaul-btn-shadow: 0 3px 8px rgba(10, 4, 14, 0.14); --overhaul-btn-hover-bg: rgba(255, 183, 197, 0.08); --overhaul-btn-hover-border: rgba(255, 183, 197, 0.48); --overhaul-btn-hover-shadow: 0 5px 15px rgba(255, 183, 197, 0.13); --overhaul-btn-active-bg: linear-gradient(135deg, rgba(255, 183, 197, 0.2), rgba(223, 178, 244, 0.18)); } html[data-theme-overhaul="sakura"] { background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #ffb7c5) 12%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #dfb2f4) 11%, transparent) 0%, transparent 32%), linear-gradient(170deg, #140d1a 0%, #1e1227 65%, #0f0a14 100%) #140d1a; } body[data-theme-overhaul="sakura"] { font-family: 'Outfit', 'Inter', sans-serif !important; background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #ffb7c5) 12%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #dfb2f4) 11%, transparent) 0%, transparent 32%), linear-gradient(170deg, #140d1a 0%, #1e1227 65%, #0f0a14 100%) #140d1a !important; } body[data-theme-overhaul="sakura"] #quiz-card { border-radius: 22px; border-color: rgba(255, 183, 197, 0.28); box-shadow: 0 0 22px rgba(255, 183, 197, 0.1), 0 16px 40px rgba(10, 4, 14, 0.42); } body[data-theme-overhaul="sakura"] .glass-btn { border-radius: 14px; } body[data-theme-overhaul="sakura"] #theme-modal { border-radius: 22px; } /* ========================================================================== 5. ABYSSAL DEEP - oceanic blue-black, bioluminescent cyan ========================================================================== */ html[data-theme-overhaul="abyssal-deep"], body[data-theme-overhaul="abyssal-deep"] { --bg: #020612; --card-bg: rgba(8, 18, 36, 0.88); --bd: rgba(0, 240, 255, 0.18); --text-main: #d0e4f2; --text-q: var(--custom-text-q, #e8f7ff); --text-a: var(--custom-text-a, #cfe3f0); --choice-bg: var(--custom-choice-bg, rgba(0, 240, 255, 0.035)); --font-main: 'Inter', sans-serif; --btn-radius-sm: 8px; --btn-radius-md: 10px; --btn-radius-lg: 12px; --g: linear-gradient(135deg, #00f0ff, #38bdf8 40%, #00ffcc) !important; --g1: #00f0ff !important; --g3: #38bdf8 !important; --g2: #00ffcc !important; --amb-c1: #00f0ff66 !important; --amb-c2: #00ffcc99 !important; --overhaul-workspace-bg: repeating-linear-gradient(90deg, rgba(0, 240, 255, 0.035) 0 1px, transparent 1px 54px), repeating-linear-gradient(0deg, rgba(0, 255, 204, 0.025) 0 1px, transparent 1px 54px), linear-gradient(155deg, #02131d 0%, #041e29 52%, #010810 100%); --overhaul-panel-bg: linear-gradient(155deg, rgba(8, 20, 40, 0.94), rgba(2, 7, 18, 0.98)); --overhaul-panel-border: rgba(0, 240, 255, 0.2); --overhaul-panel-radius: 16px; --overhaul-panel-shadow: 0 0 18px rgba(0, 240, 255, 0.055), 0 15px 38px rgba(0, 2, 8, 0.5); --overhaul-card-surface: rgba(4, 10, 22, 0.56); --overhaul-card-gradient: linear-gradient(155deg, rgba(0, 240, 255, 0.045), rgba(4, 10, 22, 0.12) 52%, rgba(0, 255, 204, 0.035)); --overhaul-card-border: rgba(0, 240, 255, 0.24); --overhaul-card-radius: 18px; --overhaul-card-shadow: inset 0 1px 0 rgba(208, 244, 255, 0.045), 0 0 24px rgba(0, 240, 255, 0.09), 0 18px 44px rgba(0, 2, 8, 0.62); --overhaul-card-overlay: radial-gradient(ellipse at 50% 112%, rgba(0, 255, 204, 0.13), transparent 48%), linear-gradient(180deg, rgba(0, 240, 255, 0.055), transparent 38%); --overhaul-card-overlay-opacity: 0.34; --overhaul-card-trim-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.055), inset 0 -22px 44px rgba(0, 255, 204, 0.025); --overhaul-choice-bg: rgba(8, 18, 36, 0.46); --overhaul-choice-border: rgba(0, 240, 255, 0.16); --overhaul-choice-radius: 12px; --overhaul-choice-shadow: 0 5px 16px rgba(0, 2, 8, 0.28); --overhaul-choice-filter: none; --overhaul-choice-hover-bg: rgba(0, 240, 255, 0.07); --overhaul-choice-hover-border: rgba(0, 240, 255, 0.68); --overhaul-choice-hover-shadow: 0 0 14px rgba(0, 240, 255, 0.15); --overhaul-choice-hover-transform: translateX(3px); --overhaul-choice-correct-bg: rgba(0, 255, 204, 0.11); --overhaul-choice-correct-border: #00ffcc; --overhaul-choice-correct-shadow: 0 0 19px rgba(0, 255, 204, 0.2), inset 0 0 16px rgba(0, 255, 204, 0.035); --overhaul-choice-incorrect-bg: rgba(0, 240, 255, 0.025); --overhaul-choice-incorrect-border: rgba(56, 189, 248, 0.22); --overhaul-dock-bg: rgba(4, 10, 22, 0.96); --overhaul-dock-border: rgba(0, 240, 255, 0.24); --overhaul-dock-radius: 14px; --overhaul-dock-shadow: 0 0 14px rgba(0, 240, 255, 0.08), 0 12px 30px rgba(0, 2, 8, 0.52); --overhaul-dock-filter: none; --overhaul-btn-bg: rgba(8, 18, 36, 0.94); --overhaul-btn-border: rgba(0, 240, 255, 0.18); --overhaul-btn-shadow: 0 4px 12px rgba(0, 2, 8, 0.28); --overhaul-btn-hover-bg: rgba(0, 240, 255, 0.07); --overhaul-btn-hover-border: rgba(0, 240, 255, 0.75); --overhaul-btn-hover-shadow: 0 0 13px rgba(0, 240, 255, 0.2); --overhaul-btn-active-bg: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(0, 255, 204, 0.13)); } html[data-theme-overhaul="abyssal-deep"] { background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #00f0ff) 10%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #00ffcc) 8%, transparent) 0%, transparent 32%), linear-gradient(180deg, #020612 0%, #051024 75%, #01030a 100%) #020612; } body[data-theme-overhaul="abyssal-deep"] { font-family: 'Inter', sans-serif !important; background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #00f0ff) 10%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #00ffcc) 8%, transparent) 0%, transparent 32%), linear-gradient(180deg, #020612 0%, #051024 75%, #01030a 100%) #020612 !important; } body[data-theme-overhaul="abyssal-deep"] #quiz-card { border-radius: 14px; border-color: rgba(0, 240, 255, 0.22); box-shadow: 0 0 20px rgba(0, 240, 255, 0.09), 0 14px 36px rgba(0, 2, 8, 0.55); } body[data-theme-overhaul="abyssal-deep"] .glass-btn { border-radius: 10px; } body[data-theme-overhaul="abyssal-deep"] .glass-btn.active { box-shadow: 0 0 12px rgba(0, 240, 255, 0.2); } body[data-theme-overhaul="abyssal-deep"] #theme-modal { border-radius: 14px; } /* ========================================================================== 6. INDIGO NEBULA - royal indigo velvet, gold & violet ========================================================================== */ html[data-theme-overhaul="indigo-nebula"], body[data-theme-overhaul="indigo-nebula"] { --bg: #070514; --card-bg: rgba(26, 19, 54, 0.84); --bd: rgba(167, 139, 250, 0.26); --text-main: #eae6f5; --text-q: var(--custom-text-q, #f6efd2); --text-a: var(--custom-text-a, #e6e0f2); --choice-bg: var(--custom-choice-bg, rgba(167, 139, 250, 0.05)); --font-main: 'Outfit', 'Inter', sans-serif; --btn-radius-sm: 10px; --btn-radius-md: 14px; --btn-radius-lg: 18px; --g: linear-gradient(135deg, #ffd700, #a78bfa 40%, #8b5cf6) !important; --g1: #ffd700 !important; --g3: #a78bfa !important; --g2: #8b5cf6 !important; --amb-c1: #ffd70066 !important; --amb-c2: #8b5cf699 !important; --overhaul-workspace-bg: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px), radial-gradient(circle at 72% 31%, rgba(255, 215, 0, 0.76) 0 1px, transparent 1.6px), radial-gradient(circle at 42% 76%, rgba(167, 139, 250, 0.68) 0 1.2px, transparent 1.8px), linear-gradient(150deg, #10082a 0%, #1b1041 48%, #070416 100%); --overhaul-panel-bg: linear-gradient(150deg, rgba(30, 22, 62, 0.9), rgba(10, 6, 27, 0.96)); --overhaul-panel-border: rgba(167, 139, 250, 0.28); --overhaul-panel-radius: 18px; --overhaul-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 0 24px rgba(139, 92, 246, 0.075), 0 16px 40px rgba(3, 1, 10, 0.48); --overhaul-card-surface: rgba(18, 14, 38, 0.6); --overhaul-card-gradient: linear-gradient(150deg, rgba(255, 215, 0, 0.035), rgba(139, 92, 246, 0.075) 52%, rgba(8, 5, 20, 0.12)); --overhaul-card-border: rgba(167, 139, 250, 0.34); --overhaul-card-radius: 20px; --overhaul-card-shadow: inset 0 2px 0 rgba(255, 215, 0, 0.18), inset 0 0 0 1px rgba(167, 139, 250, 0.055), 0 0 26px rgba(139, 92, 246, 0.13), 0 18px 44px rgba(3, 1, 10, 0.55); --overhaul-card-overlay: radial-gradient(circle at 50% -18%, rgba(255, 215, 0, 0.14), transparent 40%), radial-gradient(circle at 92% 8%, rgba(139, 92, 246, 0.2), transparent 44%); --overhaul-card-overlay-opacity: 0.38; --overhaul-card-trim-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.16), inset 0 0 28px rgba(139, 92, 246, 0.045); --overhaul-choice-bg: rgba(27, 20, 57, 0.48); --overhaul-choice-border: rgba(167, 139, 250, 0.22); --overhaul-choice-radius: 12px; --overhaul-choice-shadow: 0 5px 16px rgba(3, 1, 10, 0.24); --overhaul-choice-filter: blur(6px); --overhaul-choice-hover-bg: rgba(167, 139, 250, 0.1); --overhaul-choice-hover-border: rgba(167, 139, 250, 0.72); --overhaul-choice-hover-shadow: 0 0 16px rgba(139, 92, 246, 0.18); --overhaul-choice-hover-transform: translateX(3px); --overhaul-choice-correct-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(139, 92, 246, 0.14)); --overhaul-choice-correct-border: rgba(255, 215, 0, 0.76); --overhaul-choice-correct-shadow: 0 0 18px rgba(255, 215, 0, 0.14), inset 0 0 14px rgba(139, 92, 246, 0.05); --overhaul-choice-incorrect-bg: rgba(139, 92, 246, 0.045); --overhaul-choice-incorrect-border: rgba(139, 92, 246, 0.25); --overhaul-dock-bg: rgba(18, 14, 38, 0.94); --overhaul-dock-border: rgba(167, 139, 250, 0.3); --overhaul-dock-radius: 18px; --overhaul-dock-shadow: inset 0 2px 0 rgba(255, 215, 0, 0.1), 0 0 20px rgba(139, 92, 246, 0.08), 0 13px 34px rgba(3, 1, 10, 0.48); --overhaul-dock-filter: none; --overhaul-btn-bg: rgba(255, 255, 255, 0.025); --overhaul-btn-border: rgba(167, 139, 250, 0.22); --overhaul-btn-shadow: 0 3px 9px rgba(3, 1, 10, 0.2); --overhaul-btn-hover-bg: rgba(167, 139, 250, 0.1); --overhaul-btn-hover-border: rgba(167, 139, 250, 0.72); --overhaul-btn-hover-shadow: 0 0 14px rgba(139, 92, 246, 0.2); --overhaul-btn-active-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(255, 215, 0, 0.1)); } html[data-theme-overhaul="indigo-nebula"] { background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #ffd700) 9%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #8b5cf6) 13%, transparent) 0%, transparent 32%), linear-gradient(170deg, #070514 0%, #110e28 65%, #05030d 100%) #070514; } body[data-theme-overhaul="indigo-nebula"] { font-family: 'Outfit', 'Inter', sans-serif !important; background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #ffd700) 9%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #8b5cf6) 13%, transparent) 0%, transparent 32%), linear-gradient(170deg, #070514 0%, #110e28 65%, #05030d 100%) #070514 !important; } /* Gold top trim over velvet indigo */ body[data-theme-overhaul="indigo-nebula"] #quiz-card { border-radius: 18px; border-color: rgba(167, 139, 250, 0.32); box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.14), 0 0 22px rgba(139, 92, 246, 0.1), 0 16px 40px rgba(3, 1, 10, 0.48); } body[data-theme-overhaul="indigo-nebula"] .glass-btn { border-radius: 12px; } body[data-theme-overhaul="indigo-nebula"] #theme-modal { border-radius: 18px; } /* ========================================================================== 7. NORD FROST - arctic slate, flat polar minimalism ========================================================================== */ html[data-theme-overhaul="nord-frost"], body[data-theme-overhaul="nord-frost"] { --bg: #2e3440; --card-bg: rgba(59, 66, 82, 0.96); --bd: #4c566a; --text-main: #d8dee9; --text-q: var(--custom-text-q, #eceff4); --text-a: var(--custom-text-a, #d8dee9); --choice-bg: var(--custom-choice-bg, rgba(136, 192, 208, 0.06)); --font-main: 'Inter', sans-serif; --btn-radius-sm: 5px; --btn-radius-md: 6px; --btn-radius-lg: 8px; --g: linear-gradient(135deg, #88c0d0, #8fbcbb 40%, #81a1c1) !important; --g1: #88c0d0 !important; --g3: #8fbcbb !important; --g2: #81a1c1 !important; --amb-c1: #88c0d066 !important; --amb-c2: #81a1c199 !important; --overhaul-workspace-bg: repeating-linear-gradient(90deg, rgba(216, 222, 233, 0.035) 0 1px, transparent 1px 42px), repeating-linear-gradient(0deg, rgba(216, 222, 233, 0.025) 0 1px, transparent 1px 42px), linear-gradient(150deg, #252c38 0%, #303948 56%, #202631 100%); --overhaul-panel-bg: linear-gradient(155deg, #3b4252, #323946); --overhaul-panel-border: #4c566a; --overhaul-panel-radius: 8px; --overhaul-panel-shadow: 0 7px 19px rgba(0, 0, 0, 0.2); --overhaul-card-surface: rgba(59, 66, 82, 0.64); --overhaul-card-gradient: linear-gradient(145deg, rgba(236, 239, 244, 0.025), rgba(136, 192, 208, 0.035)); --overhaul-card-border: #58657b; --overhaul-card-radius: 10px; --overhaul-card-shadow: inset 0 1px 0 rgba(236, 239, 244, 0.045), 0 11px 27px rgba(0, 0, 0, 0.25); --overhaul-card-overlay: linear-gradient(120deg, transparent 20%, rgba(216, 222, 233, 0.05) 50%, transparent 80%); --overhaul-card-overlay-opacity: 0.26; --overhaul-card-trim-shadow: inset 0 0 0 1px rgba(136, 192, 208, 0.045); --overhaul-choice-bg: rgba(67, 76, 94, 0.5); --overhaul-choice-border: #566176; --overhaul-choice-radius: 8px; --overhaul-choice-shadow: 0 3px 8px rgba(0, 0, 0, 0.16); --overhaul-choice-filter: none; --overhaul-choice-hover-bg: #4c566a; --overhaul-choice-hover-border: #88c0d0; --overhaul-choice-hover-shadow: 0 4px 11px rgba(0, 0, 0, 0.18); --overhaul-choice-hover-transform: translateX(2px); --overhaul-choice-correct-bg: rgba(143, 188, 187, 0.16); --overhaul-choice-correct-border: #8fbcbb; --overhaul-choice-correct-shadow: 0 4px 13px rgba(0, 0, 0, 0.18); --overhaul-choice-incorrect-bg: rgba(129, 161, 193, 0.065); --overhaul-choice-incorrect-border: rgba(129, 161, 193, 0.38); --overhaul-dock-bg: #3b4252; --overhaul-dock-border: #58657b; --overhaul-dock-radius: 8px; --overhaul-dock-shadow: 0 7px 18px rgba(0, 0, 0, 0.22); --overhaul-dock-filter: none; --overhaul-btn-bg: #434c5e; --overhaul-btn-border: #566176; --overhaul-btn-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); --overhaul-btn-hover-bg: #4c566a; --overhaul-btn-hover-border: #88c0d0; --overhaul-btn-hover-shadow: 0 4px 11px rgba(0, 0, 0, 0.2); --overhaul-btn-active-bg: rgba(136, 192, 208, 0.18); } html[data-theme-overhaul="nord-frost"] { background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #88c0d0) 9%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #8fbcbb) 8%, transparent) 0%, transparent 32%), linear-gradient(180deg, #2e3440 0%, #242933 100%) #242933; } body[data-theme-overhaul="nord-frost"] { font-family: 'Inter', sans-serif !important; background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #88c0d0) 9%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #8fbcbb) 8%, transparent) 0%, transparent 32%), linear-gradient(180deg, #2e3440 0%, #242933 100%) #242933 !important; } body[data-theme-overhaul="nord-frost"] #quiz-card { border-radius: 8px; border-color: #4c566a; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2); } body[data-theme-overhaul="nord-frost"] .glass-btn { border-radius: 6px; } body[data-theme-overhaul="nord-frost"] #theme-modal { border-radius: 10px; } /* ========================================================================== 8. STEAMPUNK - sepia leather, brass & copper double rules ========================================================================== */ html[data-theme-overhaul="steampunk"], body[data-theme-overhaul="steampunk"] { --bg: #1c140e; --card-bg: rgba(39, 29, 21, 0.96); --bd: #4d3a2b; --text-main: #dfd2c0; --text-q: var(--custom-text-q, #f4eae1); --text-a: var(--custom-text-a, #d9cbb8); --choice-bg: var(--custom-choice-bg, rgba(200, 125, 85, 0.05)); --font-main: Georgia, Garamond, 'Times New Roman', serif; --btn-radius-sm: 3px; --btn-radius-md: 4px; --btn-radius-lg: 6px; --g: linear-gradient(135deg, #d4a373, #c87d55 40%, #b87333) !important; --g1: #d4a373 !important; --g3: #c87d55 !important; --g2: #b87333 !important; --amb-c1: #d4a37366 !important; --amb-c2: #b8733399 !important; --overhaul-workspace-bg: repeating-linear-gradient(135deg, rgba(212, 163, 115, 0.032) 0 2px, transparent 2px 11px), linear-gradient(150deg, #1c140d 0%, #2a1c12 52%, #120d09 100%); --overhaul-panel-bg: linear-gradient(155deg, #2d2118, #211810); --overhaul-panel-border: #5c4530; --overhaul-panel-radius: 6px; --overhaul-panel-shadow: inset 0 0 0 1px rgba(212, 163, 115, 0.055), 0 10px 24px rgba(0, 0, 0, 0.36); --overhaul-card-surface: rgba(39, 29, 21, 0.62); --overhaul-card-gradient: linear-gradient(145deg, rgba(212, 163, 115, 0.035), transparent 46%, rgba(184, 115, 51, 0.045)); --overhaul-card-border: #6b5036; --overhaul-card-radius: 8px; --overhaul-card-shadow: inset 0 0 0 1px rgba(212, 163, 115, 0.2), inset 0 0 0 4px rgba(28, 20, 14, 0.72), inset 0 0 0 5px rgba(200, 125, 85, 0.17), 0 13px 32px rgba(0, 0, 0, 0.43); --overhaul-card-overlay: radial-gradient(circle at 9px 9px, #c87d55 0 2px, #4d3523 2.5px 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 9px) 9px, #c87d55 0 2px, #4d3523 2.5px 4px, transparent 4.5px), repeating-linear-gradient(90deg, rgba(212, 163, 115, 0.018) 0 1px, transparent 1px 5px); --overhaul-card-overlay-opacity: 0.72; --overhaul-card-trim-shadow: inset 0 0 0 1px rgba(212, 163, 115, 0.12), inset 0 0 0 5px rgba(20, 14, 9, 0.22); --overhaul-choice-bg: rgba(54, 41, 30, 0.5); --overhaul-choice-border: #60462f; --overhaul-choice-radius: 6px; --overhaul-choice-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 3px 8px rgba(0, 0, 0, 0.22); --overhaul-choice-filter: none; --overhaul-choice-hover-bg: #423225; --overhaul-choice-hover-border: #c87d55; --overhaul-choice-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.27); --overhaul-choice-hover-transform: translateX(2px); --overhaul-choice-correct-bg: rgba(212, 163, 115, 0.12); --overhaul-choice-correct-border: #d4a373; --overhaul-choice-correct-shadow: 0 0 14px rgba(200, 125, 85, 0.15), inset 0 0 0 1px rgba(212, 163, 115, 0.05); --overhaul-choice-incorrect-bg: rgba(184, 115, 51, 0.055); --overhaul-choice-incorrect-border: rgba(184, 115, 51, 0.38); --overhaul-dock-bg: #2d2118; --overhaul-dock-border: #6b5036; --overhaul-dock-radius: 6px; --overhaul-dock-shadow: inset 0 0 0 1px rgba(212, 163, 115, 0.08), 0 9px 22px rgba(0, 0, 0, 0.36); --overhaul-dock-filter: none; --overhaul-btn-bg: #36291e; --overhaul-btn-border: #60462f; --overhaul-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 3px 7px rgba(0, 0, 0, 0.22); --overhaul-btn-hover-bg: #423225; --overhaul-btn-hover-border: #c87d55; --overhaul-btn-hover-shadow: 0 4px 12px rgba(200, 125, 85, 0.14); --overhaul-btn-active-bg: linear-gradient(135deg, rgba(184, 115, 51, 0.25), rgba(212, 163, 115, 0.15)); } html[data-theme-overhaul="steampunk"] { background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #c87d55) 10%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #d4a373) 8%, transparent) 0%, transparent 32%), linear-gradient(180deg, #1c140e 0%, #291d14 100%) #1c140e; } body[data-theme-overhaul="steampunk"] { font-family: Georgia, Garamond, 'Times New Roman', serif !important; background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #c87d55) 10%, transparent) 0%, transparent 30%), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--g2, #d4a373) 8%, transparent) 0%, transparent 32%), linear-gradient(180deg, #1c140e 0%, #291d14 100%) #1c140e !important; } /* Ornate double rule: copper border + inset brass hairline */ body[data-theme-overhaul="steampunk"] #quiz-card { border-radius: 6px; border-color: #5c4530; box-shadow: inset 0 0 0 1px rgba(212, 163, 115, 0.18), inset 0 0 0 4px rgba(28, 20, 14, 0.6), inset 0 0 0 5px rgba(200, 125, 85, 0.14), 0 10px 24px rgba(0, 0, 0, 0.35); } body[data-theme-overhaul="steampunk"] .glass-btn { border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 4px rgba(0, 0, 0, 0.15); } body[data-theme-overhaul="steampunk"] #theme-modal { border-radius: 8px; } /* ========================================================================== PRODUCTION COMPONENT RESKIN The prototype used sandbox-only class names. This layer maps its visual system onto the real panes, quiz card, choices, controls, and brand. ========================================================================== */ body[data-theme-overhaul]::before, body[data-theme-overhaul]::after { opacity: 0 !important; filter: none !important; } body[data-theme-overhaul] #quiz-pane > .quiz-pane-neural-network { display: none !important; } body[data-theme-overhaul] #quiz-pane, body[data-theme-overhaul] #pdf-pane, body[data-theme-overhaul] #ai-pane { border-color: var(--overhaul-panel-border, var(--bd)) !important; border-radius: var(--overhaul-panel-radius, var(--btn-radius-lg)); } body[data-theme-overhaul] #quiz-pane { background: var(--overhaul-workspace-bg, var(--overhaul-panel-bg, #080b12)); box-shadow: var(--overhaul-workspace-shadow, none); } body[data-theme-overhaul] #pdf-pane, body[data-theme-overhaul] #ai-pane { background: var(--overhaul-panel-bg, transparent); box-shadow: var(--overhaul-panel-shadow, none); } body[data-theme-overhaul] #quiz-card { --quiz-card-surface: var(--overhaul-card-surface, var(--card-bg)); --quiz-card-gradient: var(--overhaul-card-gradient, none); --quiz-card-border: var(--overhaul-card-border, var(--bd)); background-color: var(--overhaul-card-surface, var(--card-bg)) !important; background-image: var(--overhaul-card-gradient, none) !important; border-radius: var(--overhaul-card-radius, var(--btn-radius-lg)); box-shadow: var(--overhaul-card-shadow, none) !important; } body[data-theme-overhaul] #quiz-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body[data-theme-overhaul] #quiz-card::before { background: var(--overhaul-card-overlay, none); opacity: var(--overhaul-card-overlay-opacity, 0.25); } body[data-theme-overhaul] #quiz-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--overhaul-card-trim-shadow, none); opacity: 1; } body[data-theme-overhaul] #quiz-card .question-text { color: var(--text-q); text-shadow: var(--overhaul-question-shadow, none); } body[data-theme-overhaul] #choices .choice:not(.correct):not(.incorrect) { background: var(--overhaul-choice-bg, var(--choice-bg)) !important; border-color: var(--overhaul-choice-border, var(--bd)) !important; border-radius: var(--overhaul-choice-radius, var(--btn-radius-md)); color: var(--text-a) !important; box-shadow: var(--overhaul-choice-shadow, none) !important; backdrop-filter: var(--overhaul-choice-filter, none); -webkit-backdrop-filter: var(--overhaul-choice-filter, none); } body[data-theme-overhaul] #choices .choice:not(.locked):not(.correct):not(.incorrect):hover { background: var(--overhaul-choice-hover-bg, var(--overhaul-choice-bg)) !important; border-color: var(--overhaul-choice-hover-border, var(--g1)) !important; box-shadow: var(--overhaul-choice-hover-shadow, var(--overhaul-choice-shadow)) !important; transform: var(--overhaul-choice-hover-transform, translateX(2px)); } body[data-theme-overhaul] #choices .choice.selected:not(.correct):not(.incorrect) { background: var(--overhaul-choice-active-bg, var(--overhaul-choice-correct-bg)) !important; border-color: var(--overhaul-choice-active-border, var(--overhaul-choice-correct-border, var(--g1))) !important; box-shadow: var(--overhaul-choice-active-shadow, var(--overhaul-choice-correct-shadow, none)) !important; } body[data-theme-overhaul] #choices .choice.correct { background: var(--overhaul-choice-correct-bg) !important; border-color: var(--overhaul-choice-correct-border, var(--g1)) !important; border-radius: var(--overhaul-choice-radius, var(--btn-radius-md)); color: var(--text-q) !important; box-shadow: var(--overhaul-choice-correct-shadow, none) !important; } body[data-theme-overhaul] #choices .choice.incorrect { background: var(--overhaul-choice-incorrect-bg) !important; border-color: var(--overhaul-choice-incorrect-border, var(--g2)) !important; border-radius: var(--overhaul-choice-radius, var(--btn-radius-md)); color: color-mix(in srgb, var(--text-a) 52%, transparent) !important; box-shadow: var(--overhaul-choice-shadow, none) !important; } body[data-theme-overhaul] #choices .choice .label { color: var(--overhaul-choice-label, var(--g1)); opacity: 0.92; } body[data-theme-overhaul] button.glass-btn, body[data-theme-overhaul] .file-label, body[data-theme-overhaul] select.glass-select, body[data-theme-overhaul] input.glass-input { background: var(--overhaul-btn-bg, var(--btn-surface)); border-color: var(--overhaul-btn-border, var(--btn-border)); border-radius: var(--btn-radius-md); color: var(--btn-text); box-shadow: var(--overhaul-btn-shadow, var(--btn-shadow-soft)); } body[data-theme-overhaul] button.glass-btn:hover, body[data-theme-overhaul] .file-label:hover, body[data-theme-overhaul] select.glass-select:hover { background: var(--overhaul-btn-hover-bg, var(--btn-surface-hover)); border-color: var(--overhaul-btn-hover-border, var(--btn-border-strong)); box-shadow: var(--overhaul-btn-hover-shadow, var(--btn-shadow-hover)); } body[data-theme-overhaul] button.glass-btn.active, body[data-theme-overhaul] button.glass-btn[aria-pressed="true"] { background: var(--overhaul-btn-active-bg, var(--overhaul-btn-hover-bg)) !important; border-color: var(--overhaul-choice-correct-border, var(--g1)) !important; box-shadow: var(--overhaul-btn-hover-shadow, none) !important; } body[data-theme-overhaul] .controls-dock { --controls-dock-surface: var(--overhaul-dock-bg); --controls-dock-gradient: none; background-color: var(--overhaul-dock-bg) !important; background-image: none !important; border-color: var(--overhaul-dock-border) !important; border-radius: var(--overhaul-dock-radius); box-shadow: var(--overhaul-dock-shadow) !important; filter: var(--overhaul-dock-filter, none); } body[data-theme-overhaul] .controls-dock:hover { border-color: var(--overhaul-choice-hover-border, var(--overhaul-dock-border)) !important; box-shadow: var(--overhaul-dock-shadow) !important; filter: var(--overhaul-dock-filter, none); transform: translateY(-1px); } body[data-theme-overhaul] .controls-dock > .glass-btn, body[data-theme-overhaul] .controls-dock > .source-wrapper > .glass-btn, body[data-theme-overhaul] .controls-dock > .menu-wrapper > .glass-btn { background: var(--overhaul-control-bg, transparent) !important; border-color: transparent !important; border-radius: calc(var(--overhaul-dock-radius) - 2px) !important; color: var(--overhaul-control-color, var(--btn-text)) !important; box-shadow: none !important; } body[data-theme-overhaul] .controls-dock > .glass-btn:hover, body[data-theme-overhaul] .controls-dock > .source-wrapper > .glass-btn:hover, body[data-theme-overhaul] .controls-dock > .menu-wrapper > .glass-btn:hover { background: var(--overhaul-control-hover-bg, var(--overhaul-btn-hover-bg)) !important; border-color: var(--overhaul-control-hover-border, transparent) !important; color: var(--overhaul-control-hover-color, var(--overhaul-control-color, var(--btn-text))) !important; box-shadow: var(--overhaul-control-hover-shadow, none) !important; } body[data-theme-overhaul] .controls-dock > .glass-btn.active, body[data-theme-overhaul] .controls-dock > .source-wrapper > .glass-btn.active, body[data-theme-overhaul] .controls-dock > .menu-wrapper > .glass-btn.active, body[data-theme-overhaul] .controls-dock > .glass-btn[aria-pressed="true"] { background: var(--overhaul-control-active-bg, var(--overhaul-btn-active-bg)) !important; border-color: var(--overhaul-control-active-border, transparent) !important; color: var(--overhaul-control-active-color, var(--overhaul-control-hover-color, var(--btn-text))) !important; box-shadow: var(--overhaul-control-active-shadow, none) !important; } body[data-theme-overhaul] .srs-rate-btn, body[data-theme-overhaul] .fc-btn { border-radius: var(--btn-radius-sm); } /* High-specificity production popup owners otherwise keep the Default skin. */ body[data-theme-overhaul] #menu-dropdown { background: var(--overhaul-card-overlay, none), var(--overhaul-panel-bg, var(--card-bg)) !important; border-color: var(--overhaul-panel-border, var(--bd)) !important; border-radius: var(--overhaul-panel-radius, var(--btn-radius-lg)); box-shadow: var(--overhaul-panel-shadow, none) !important; } body[data-theme-overhaul] #menu-dropdown .menu-group-trigger, body[data-theme-overhaul] #menu-dropdown .menu-group-panel > button.glass-btn { background: var(--overhaul-btn-bg, var(--btn-surface)) !important; border-color: color-mix(in srgb, var(--overhaul-btn-border, var(--bd)) 72%, transparent) !important; border-radius: var(--btn-radius-md); color: var(--btn-text) !important; box-shadow: var(--overhaul-btn-shadow, none) !important; } body[data-theme-overhaul] #menu-dropdown .menu-group-trigger:hover, body[data-theme-overhaul] #menu-dropdown .menu-group-panel > button.glass-btn:hover { background: var(--overhaul-btn-hover-bg, var(--btn-surface-hover)) !important; border-color: var(--overhaul-btn-hover-border, var(--g1)) !important; box-shadow: var(--overhaul-btn-hover-shadow, none) !important; } body[data-theme-overhaul] #menu-dropdown .menu-group-trigger.active, body[data-theme-overhaul] #menu-dropdown .menu-group.is-open > .menu-group-trigger { background: var(--overhaul-btn-active-bg, var(--overhaul-btn-hover-bg)) !important; border-color: var(--overhaul-choice-correct-border, var(--g1)) !important; } body[data-theme-overhaul] #menu-dropdown .menu-group-panel { border-left-color: var(--overhaul-panel-border, var(--bd)); } body[data-theme-overhaul] #menu-dropdown .gradient-text, body[data-theme-overhaul] #theme-menu-btn .gradient-text, body[data-theme-overhaul] #menu-dropdown .menu-group-title { background: linear-gradient(135deg, var(--g1), var(--g2)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } body[data-theme-overhaul] #theme-modal { background-color: var(--overhaul-card-surface, var(--card-bg)) !important; background-image: var(--overhaul-card-gradient, none), var(--overhaul-card-overlay, none) !important; border-color: var(--overhaul-card-border, var(--bd)) !important; border-radius: var(--overhaul-card-radius, var(--btn-radius-lg)); box-shadow: var(--overhaul-card-shadow, none) !important; } body[data-theme-overhaul] #theme-modal .theme-section { border-bottom-color: color-mix(in srgb, var(--overhaul-panel-border, var(--bd)) 74%, transparent); } body[data-theme-overhaul] #theme-modal .theme-overhaul-toggle, body[data-theme-overhaul] #theme-modal .theme-collapse, body[data-theme-overhaul] #theme-modal .theme-segmented { background: var(--overhaul-btn-bg, var(--btn-surface)); border-color: var(--overhaul-btn-border, var(--bd)); box-shadow: var(--overhaul-btn-shadow, none); } body[data-theme-overhaul] .modal-content { background-color: var(--overhaul-card-surface, var(--card-bg)) !important; background-image: var(--overhaul-card-gradient, none) !important; border-color: var(--overhaul-card-border, var(--bd)) !important; border-radius: var(--overhaul-card-radius, var(--btn-radius-lg)); box-shadow: var(--overhaul-card-shadow, none) !important; } /* Themed desktop welcome surface. The canvas art is a child of #quiz-pane, behind every interactive welcome card and never receives pointer input. */ .theme-canvas-wrapper { position: absolute; inset: 0; z-index: 1; display: none; overflow: hidden; pointer-events: none; isolation: isolate; } .theme-canvas { position: absolute; inset: 0; overflow: hidden; opacity: 0.94; } .theme-canvas .canvas-node { position: absolute; pointer-events: none; transform-origin: center; will-change: transform, opacity; } body.welcome-mode[data-theme-overhaul] #welcome-neural-canvas { display: none !important; } body.welcome-mode[data-theme-overhaul] #theme-canvas-wrapper { display: block; } body.welcome-mode[data-theme-overhaul] #welcome-screen { z-index: 50; background: transparent !important; } body.welcome-mode[data-theme-overhaul] #welcome-screen .welcome-title { font-family: var(--font-main); } body.welcome-mode[data-theme-overhaul] #welcome-screen .welcome-btn { background: var(--overhaul-choice-bg, var(--choice-bg)) !important; border-color: var(--overhaul-choice-border, var(--bd)) !important; border-radius: var(--overhaul-choice-radius, var(--btn-radius-lg)); color: var(--text-a) !important; box-shadow: var(--overhaul-choice-shadow, none) !important; backdrop-filter: var(--overhaul-choice-filter, none); -webkit-backdrop-filter: var(--overhaul-choice-filter, none); } body.welcome-mode[data-theme-overhaul] #welcome-screen .welcome-btn:hover { background: var(--overhaul-choice-hover-bg, var(--overhaul-choice-bg)) !important; border-color: var(--overhaul-choice-hover-border, var(--g1)) !important; box-shadow: var(--overhaul-choice-hover-shadow, none) !important; } body.welcome-mode[data-theme-overhaul] #welcome-screen .welcome-btn.primary-action { background: var(--overhaul-btn-active-bg, var(--overhaul-choice-correct-bg)) !important; border-color: var(--overhaul-choice-correct-border, var(--g1)) !important; box-shadow: var(--overhaul-choice-correct-shadow, none) !important; } body.welcome-mode[data-theme-overhaul] #welcome-screen .welcome-btn strong { color: color-mix(in srgb, var(--text-a) 72%, transparent) !important; } body.welcome-mode[data-theme-overhaul] .welcome-status { background: var(--overhaul-card-surface, var(--card-bg)) !important; border-color: var(--overhaul-card-border, var(--bd)) !important; border-radius: var(--overhaul-card-radius, var(--btn-radius-lg)); box-shadow: var(--overhaul-card-shadow, none) !important; } body.welcome-mode[data-theme-overhaul] .welcome-warmup-card { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* --- Welcome art 1: liquid glass + orbital refraction ------------------- */ body[data-theme-overhaul="glassmorphism"] .theme-canvas { background: radial-gradient(circle at 50% 48%, rgba(129, 140, 248, 0.18), transparent 32%), radial-gradient(circle at 68% 32%, rgba(236, 72, 153, 0.12), transparent 26%); } body[data-theme-overhaul="glassmorphism"] .theme-canvas .n1 { left: 50%; top: 50%; width: clamp(240px, 28vw, 430px); aspect-ratio: 1; background: linear-gradient(135deg, rgba(129, 140, 248, 0.24), rgba(236, 72, 153, 0.13)); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.08), 0 0 80px rgba(129, 140, 248, 0.17); filter: blur(1px); animation: memora-glass-blob 11s ease-in-out infinite alternate; } body[data-theme-overhaul="glassmorphism"] .theme-canvas .n2, body[data-theme-overhaul="glassmorphism"] .theme-canvas .n3 { left: 50%; top: 50%; border: 1px solid rgba(255, 255, 255, 0.19); border-left-color: rgba(129, 140, 248, 0.66); border-right-color: rgba(236, 72, 153, 0.48); border-radius: 50%; box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.035), 0 0 22px rgba(129, 140, 248, 0.08); } body[data-theme-overhaul="glassmorphism"] .theme-canvas .n2 { width: clamp(360px, 46vw, 720px); height: clamp(190px, 26vw, 390px); animation: memora-theme-orbit 17s linear infinite; } body[data-theme-overhaul="glassmorphism"] .theme-canvas .n3 { width: clamp(260px, 34vw, 530px); height: clamp(440px, 50vw, 760px); animation: memora-theme-orbit 23s linear infinite reverse; } body[data-theme-overhaul="glassmorphism"] .theme-canvas .n4 { inset: -30% auto -30% -20%; width: 24%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.11), transparent); transform: skewX(-18deg); animation: memora-glass-sweep 8s ease-in-out infinite; } body[data-theme-overhaul="glassmorphism"] .theme-canvas .n5, body[data-theme-overhaul="glassmorphism"] .theme-canvas .n6 { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.52); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 0 24px rgba(196, 181, 253, 0.58); animation: memora-theme-float 6s ease-in-out infinite alternate; } body[data-theme-overhaul="glassmorphism"] .theme-canvas .n5 { left: 22%; top: 28%; } body[data-theme-overhaul="glassmorphism"] .theme-canvas .n6 { right: 18%; bottom: 24%; animation-delay: -3s; } @keyframes memora-glass-blob { 0% { transform: translate(-50%, -50%) rotate(-8deg) scale(0.94); border-radius: 42% 58% 64% 36% / 52% 38% 62% 48%; } 50% { transform: translate(-50%, -50%) rotate(6deg) scale(1.04); border-radius: 62% 38% 43% 57% / 38% 58% 42% 62%; } 100% { transform: translate(-50%, -50%) rotate(14deg) scale(0.98); border-radius: 48% 52% 34% 66% / 63% 42% 58% 37%; } } @keyframes memora-theme-orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes memora-glass-sweep { 0%, 15% { transform: translateX(-60vw) skewX(-18deg); opacity: 0; } 42%, 58% { opacity: 0.55; } 85%, 100% { transform: translateX(150vw) skewX(-18deg); opacity: 0; } } @keyframes memora-theme-float { from { transform: translate3d(-12px, 14px, 0) scale(0.84); opacity: 0.42; } to { transform: translate3d(18px, -22px, 0) scale(1.12); opacity: 0.92; } } /* --- Welcome art 2: breathing sage lotus + wandering firefly ----------- */ body[data-theme-overhaul="cozy-earth"] .theme-canvas { background: radial-gradient(ellipse at 50% 66%, rgba(155, 178, 156, 0.16), transparent 34%), linear-gradient(180deg, transparent 54%, rgba(214, 178, 112, 0.045)); } body[data-theme-overhaul="cozy-earth"] .theme-canvas .n1, body[data-theme-overhaul="cozy-earth"] .theme-canvas .n2, body[data-theme-overhaul="cozy-earth"] .theme-canvas .n3, body[data-theme-overhaul="cozy-earth"] .theme-canvas .n4, body[data-theme-overhaul="cozy-earth"] .theme-canvas .n5 { --lotus-angle: 0deg; left: 50%; top: 64%; width: clamp(68px, 6.5vw, 108px); height: clamp(150px, 18vw, 270px); transform-origin: 50% 100%; border-radius: 80% 12% 75% 18%; background: linear-gradient(180deg, rgba(155, 178, 156, 0.56), rgba(83, 104, 88, 0.09)); border: 1px solid rgba(214, 178, 112, 0.2); box-shadow: inset 0 0 30px rgba(232, 221, 204, 0.06), 0 0 24px rgba(155, 178, 156, 0.08); animation: memora-lotus-breathe 7s ease-in-out infinite alternate; } body[data-theme-overhaul="cozy-earth"] .theme-canvas .n1 { --lotus-angle: -58deg; } body[data-theme-overhaul="cozy-earth"] .theme-canvas .n2 { --lotus-angle: -29deg; animation-delay: -0.7s; } body[data-theme-overhaul="cozy-earth"] .theme-canvas .n3 { --lotus-angle: 0deg; animation-delay: -1.4s; } body[data-theme-overhaul="cozy-earth"] .theme-canvas .n4 { --lotus-angle: 29deg; animation-delay: -2.1s; } body[data-theme-overhaul="cozy-earth"] .theme-canvas .n5 { --lotus-angle: 58deg; animation-delay: -2.8s; } body[data-theme-overhaul="cozy-earth"] .theme-canvas .n6 { left: 16%; top: 42%; width: 8px; height: 8px; border-radius: 50%; background: #f3d492; box-shadow: 0 0 8px #f3d492, 0 0 22px rgba(214, 178, 112, 0.72); animation: memora-firefly-path 12s ease-in-out infinite; } @keyframes memora-lotus-breathe { from { transform: translate(-50%, -100%) rotate(var(--lotus-angle)) scaleY(0.82) scaleX(0.92); opacity: 0.52; } to { transform: translate(-50%, -100%) rotate(var(--lotus-angle)) scaleY(1.08) scaleX(1.03); opacity: 0.92; } } @keyframes memora-firefly-path { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0.35; } 22% { transform: translate3d(26vw, -18vh, 0) scale(1.2); opacity: 1; } 48% { transform: translate3d(58vw, 9vh, 0) scale(0.92); opacity: 0.55; } 72% { transform: translate3d(38vw, 30vh, 0) scale(1.18); opacity: 0.9; } } /* --- Welcome art 3: rotating golden oracle ----------------------------- */ body[data-theme-overhaul="royal-obsidian"] .theme-canvas { background: radial-gradient(circle at 50% 50%, rgba(207, 168, 94, 0.14), transparent 36%); } body[data-theme-overhaul="royal-obsidian"] .theme-canvas .n1, body[data-theme-overhaul="royal-obsidian"] .theme-canvas .n2, body[data-theme-overhaul="royal-obsidian"] .theme-canvas .n3 { left: 50%; top: 50%; aspect-ratio: 1; border: 1px solid rgba(207, 168, 94, 0.42); box-shadow: inset 0 0 24px rgba(207, 168, 94, 0.05), 0 0 18px rgba(207, 168, 94, 0.08); animation: memora-oracle-spin 25s linear infinite; } body[data-theme-overhaul="royal-obsidian"] .theme-canvas .n1 { width: clamp(330px, 42vw, 680px); } body[data-theme-overhaul="royal-obsidian"] .theme-canvas .n2 { width: clamp(235px, 30vw, 490px); animation-direction: reverse; animation-duration: 18s; } body[data-theme-overhaul="royal-obsidian"] .theme-canvas .n3 { width: clamp(145px, 18vw, 300px); animation-duration: 13s; border-style: double; } body[data-theme-overhaul="royal-obsidian"] .theme-canvas .n4 { left: 50%; top: 50%; width: clamp(58px, 7vw, 104px); aspect-ratio: 1; background: linear-gradient(135deg, #3a2a13, #f3e5ab 48%, #8f6f36 52%, #100e0a); border: 1px solid rgba(243, 229, 171, 0.66); box-shadow: 0 0 26px rgba(207, 168, 94, 0.28); animation: memora-oracle-gem 4.8s ease-in-out infinite alternate; } body[data-theme-overhaul="royal-obsidian"] .theme-canvas .n5, body[data-theme-overhaul="royal-obsidian"] .theme-canvas .n6 { left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #f3e5ab; box-shadow: 0 0 14px rgba(243, 229, 171, 0.7); animation: memora-oracle-satellite 12s linear infinite; } body[data-theme-overhaul="royal-obsidian"] .theme-canvas .n6 { animation-direction: reverse; animation-duration: 16s; } @keyframes memora-oracle-spin { from { transform: translate(-50%, -50%) rotate(45deg); } to { transform: translate(-50%, -50%) rotate(405deg); } } @keyframes memora-oracle-gem { from { transform: translate(-50%, -50%) rotate(45deg) scale(0.82); filter: brightness(0.8); } to { transform: translate(-50%, -50%) rotate(225deg) scale(1.08); filter: brightness(1.25); } } @keyframes memora-oracle-satellite { from { transform: translate(-50%, -50%) rotate(0deg) translateX(clamp(150px, 22vw, 350px)); } to { transform: translate(-50%, -50%) rotate(360deg) translateX(clamp(150px, 22vw, 350px)); } } /* --- Welcome art 4: luminous sakura wheel + drifting petal ------------ */ body[data-theme-overhaul="sakura"] .theme-canvas { background: radial-gradient(circle at 50% 50%, rgba(255, 183, 197, 0.14), transparent 32%), radial-gradient(circle at 72% 28%, rgba(223, 178, 244, 0.09), transparent 24%); } body[data-theme-overhaul="sakura"] .theme-canvas .n1, body[data-theme-overhaul="sakura"] .theme-canvas .n2, body[data-theme-overhaul="sakura"] .theme-canvas .n3, body[data-theme-overhaul="sakura"] .theme-canvas .n4, body[data-theme-overhaul="sakura"] .theme-canvas .n5 { --sakura-angle: 0deg; left: 50%; top: 50%; width: clamp(80px, 8vw, 138px); height: clamp(150px, 16vw, 250px); transform-origin: 50% 100%; border-radius: 70% 30% 68% 32% / 80% 52% 48% 20%; background: linear-gradient(180deg, rgba(255, 240, 244, 0.72), rgba(255, 183, 197, 0.16) 58%, rgba(223, 178, 244, 0.03)); border: 1px solid rgba(255, 183, 197, 0.34); box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.1), 0 0 28px rgba(255, 183, 197, 0.13); animation: memora-sakura-bloom 8s ease-in-out infinite alternate; } body[data-theme-overhaul="sakura"] .theme-canvas .n1 { --sakura-angle: 0deg; } body[data-theme-overhaul="sakura"] .theme-canvas .n2 { --sakura-angle: 72deg; animation-delay: -0.8s; } body[data-theme-overhaul="sakura"] .theme-canvas .n3 { --sakura-angle: 144deg; animation-delay: -1.6s; } body[data-theme-overhaul="sakura"] .theme-canvas .n4 { --sakura-angle: 216deg; animation-delay: -2.4s; } body[data-theme-overhaul="sakura"] .theme-canvas .n5 { --sakura-angle: 288deg; animation-delay: -3.2s; } body[data-theme-overhaul="sakura"] .theme-canvas .n6 { left: 12%; top: 20%; width: 34px; height: 52px; border-radius: 72% 28% 66% 34%; background: linear-gradient(145deg, #fff0f4, rgba(255, 183, 197, 0.34)); box-shadow: 0 0 18px rgba(255, 183, 197, 0.26); animation: memora-sakura-drift 15s ease-in-out infinite; } @keyframes memora-sakura-bloom { from { transform: translate(-50%, -100%) rotate(var(--sakura-angle)) scale(0.78); opacity: 0.46; } to { transform: translate(-50%, -100%) rotate(calc(var(--sakura-angle) + 14deg)) scale(1.06); opacity: 0.88; } } @keyframes memora-sakura-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-25deg); opacity: 0; } 12% { opacity: 0.75; } 48% { transform: translate3d(48vw, 24vh, 0) rotate(190deg); opacity: 0.9; } 88% { opacity: 0.52; } 100% { transform: translate3d(82vw, 62vh, 0) rotate(420deg); opacity: 0; } } /* --- Welcome art 5: bioluminescent jellyfish --------------------------- */ body[data-theme-overhaul="abyssal-deep"] .theme-canvas { background: radial-gradient(ellipse at 50% 36%, rgba(0, 240, 255, 0.12), transparent 30%), linear-gradient(180deg, rgba(0, 240, 255, 0.015), rgba(0, 255, 204, 0.055)); } body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n1, body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n2 { left: 50%; top: 36%; border-radius: 52% 48% 16% 16% / 84% 84% 16% 16%; transform: translate(-50%, -50%); animation: memora-jelly-swim 6s ease-in-out infinite alternate; } body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n1 { width: clamp(230px, 28vw, 430px); height: clamp(145px, 17vw, 260px); background: radial-gradient(ellipse at 50% 18%, rgba(232, 247, 255, 0.22), rgba(0, 240, 255, 0.12) 42%, rgba(0, 255, 204, 0.025) 78%); border: 1px solid rgba(0, 240, 255, 0.42); box-shadow: inset 0 -24px 40px rgba(0, 255, 204, 0.08), 0 0 44px rgba(0, 240, 255, 0.17); } body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n2 { width: clamp(170px, 21vw, 320px); height: clamp(105px, 12vw, 188px); border: 1px solid rgba(0, 255, 204, 0.26); box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.08); animation-delay: -0.9s; } body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n3, body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n4, body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n5 { --tentacle-x: 0px; left: calc(50% + var(--tentacle-x)); top: 43%; width: 5px; height: clamp(210px, 28vh, 390px); border-radius: 999px; background: linear-gradient(180deg, rgba(0, 240, 255, 0.52), rgba(0, 255, 204, 0.08) 76%, transparent); box-shadow: 0 0 10px rgba(0, 240, 255, 0.22); transform-origin: top; animation: memora-tentacle-sway 5s ease-in-out infinite alternate; } body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n3 { --tentacle-x: clamp(-110px, -8vw, -55px); } body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n4 { --tentacle-x: 0px; animation-delay: -1.6s; height: clamp(250px, 34vh, 440px); } body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n5 { --tentacle-x: clamp(55px, 8vw, 110px); animation-delay: -3.1s; } body[data-theme-overhaul="abyssal-deep"] .theme-canvas .n6 { left: 18%; bottom: -30px; width: 8px; height: 8px; border: 1px solid rgba(0, 240, 255, 0.54); border-radius: 50%; box-shadow: 14vw 22vh 0 2px rgba(0, 240, 255, 0.09), 34vw 10vh 0 4px rgba(0, 255, 204, 0.08), 61vw 27vh 0 1px rgba(0, 240, 255, 0.12), 72vw 4vh 0 3px rgba(0, 255, 204, 0.08); animation: memora-abyss-bubbles 12s linear infinite; } @keyframes memora-jelly-swim { from { transform: translate(-50%, -50%) translateY(18px) scaleX(1.06) scaleY(0.9); opacity: 0.68; } to { transform: translate(-50%, -50%) translateY(-24px) scaleX(0.94) scaleY(1.08); opacity: 0.96; } } @keyframes memora-tentacle-sway { from { transform: translateX(-50%) rotate(-5deg) scaleY(0.9); opacity: 0.46; } to { transform: translateX(-50%) rotate(7deg) scaleY(1.08); opacity: 0.82; } } @keyframes memora-abyss-bubbles { from { transform: translate3d(0, 15vh, 0) scale(0.7); opacity: 0; } 18% { opacity: 0.65; } to { transform: translate3d(12vw, -115vh, 0) scale(1.18); opacity: 0; } } /* --- Welcome art 6: velvet spiral galaxy ------------------------------- */ body[data-theme-overhaul="indigo-nebula"] .theme-canvas { background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.18), transparent 34%), radial-gradient(circle at 22% 30%, rgba(255, 215, 0, 0.045) 0 1px, transparent 2px), radial-gradient(circle at 76% 68%, rgba(255, 255, 255, 0.055) 0 1px, transparent 2px); background-size: auto, 86px 86px, 132px 132px; } body[data-theme-overhaul="indigo-nebula"] .theme-canvas .n1 { left: 50%; top: 50%; width: clamp(52px, 6vw, 94px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff9d9, #ffd700 26%, #a78bfa 62%, transparent 72%); box-shadow: 0 0 28px rgba(255, 215, 0, 0.35), 0 0 70px rgba(139, 92, 246, 0.3); animation: memora-galaxy-core 4.5s ease-in-out infinite alternate; } body[data-theme-overhaul="indigo-nebula"] .theme-canvas .n2, body[data-theme-overhaul="indigo-nebula"] .theme-canvas .n3, body[data-theme-overhaul="indigo-nebula"] .theme-canvas .n4 { left: 50%; top: 50%; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(167, 139, 250, 0.46); border-bottom-color: rgba(255, 215, 0, 0.28); box-shadow: inset 0 0 18px rgba(139, 92, 246, 0.05), 0 0 18px rgba(139, 92, 246, 0.07); animation: memora-galaxy-arm 18s linear infinite; } body[data-theme-overhaul="indigo-nebula"] .theme-canvas .n2 { width: clamp(280px, 38vw, 610px); height: clamp(95px, 13vw, 210px); } body[data-theme-overhaul="indigo-nebula"] .theme-canvas .n3 { width: clamp(400px, 54vw, 850px); height: clamp(145px, 19vw, 300px); animation-direction: reverse; animation-duration: 25s; } body[data-theme-overhaul="indigo-nebula"] .theme-canvas .n4 { width: clamp(520px, 70vw, 1080px); height: clamp(210px, 27vw, 420px); animation-duration: 34s; opacity: 0.58; } body[data-theme-overhaul="indigo-nebula"] .theme-canvas .n5, body[data-theme-overhaul="indigo-nebula"] .theme-canvas .n6 { left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #fff7c2; box-shadow: 0 0 13px rgba(255, 215, 0, 0.8); animation: memora-galaxy-star 11s linear infinite; } body[data-theme-overhaul="indigo-nebula"] .theme-canvas .n6 { background: #c4b5fd; box-shadow: 0 0 13px rgba(167, 139, 250, 0.8); animation-direction: reverse; animation-duration: 15s; } @keyframes memora-galaxy-core { from { transform: translate(-50%, -50%) scale(0.78); filter: brightness(0.85); } to { transform: translate(-50%, -50%) scale(1.18); filter: brightness(1.25); } } @keyframes memora-galaxy-arm { from { transform: translate(-50%, -50%) rotate(-12deg); } to { transform: translate(-50%, -50%) rotate(348deg); } } @keyframes memora-galaxy-star { from { transform: translate(-50%, -50%) rotate(0deg) translateX(clamp(150px, 25vw, 390px)) scale(0.72); } 50% { opacity: 1; transform: translate(-50%, -50%) rotate(180deg) translateX(clamp(150px, 25vw, 390px)) scale(1.25); } to { transform: translate(-50%, -50%) rotate(360deg) translateX(clamp(150px, 25vw, 390px)) scale(0.72); } } /* --- Welcome art 7: crystalline polar lattice -------------------------- */ body[data-theme-overhaul="nord-frost"] .theme-canvas { background: linear-gradient(135deg, transparent 49.8%, rgba(136, 192, 208, 0.035) 50%, transparent 50.2%), radial-gradient(circle at 50% 50%, rgba(136, 192, 208, 0.12), transparent 34%); background-size: 48px 48px, auto; } body[data-theme-overhaul="nord-frost"] .theme-canvas .n1, body[data-theme-overhaul="nord-frost"] .theme-canvas .n2, body[data-theme-overhaul="nord-frost"] .theme-canvas .n3 { left: 50%; top: 50%; aspect-ratio: 1; border: 1px solid rgba(136, 192, 208, 0.46); box-shadow: inset 0 0 22px rgba(143, 188, 187, 0.045), 0 0 18px rgba(136, 192, 208, 0.07); animation: memora-frost-lattice 24s linear infinite; } body[data-theme-overhaul="nord-frost"] .theme-canvas .n1 { width: clamp(360px, 46vw, 720px); } body[data-theme-overhaul="nord-frost"] .theme-canvas .n2 { width: clamp(250px, 32vw, 500px); animation-direction: reverse; animation-duration: 18s; border-style: dashed; } body[data-theme-overhaul="nord-frost"] .theme-canvas .n3 { width: clamp(150px, 19vw, 300px); animation-duration: 12s; } body[data-theme-overhaul="nord-frost"] .theme-canvas .n4 { left: 50%; top: 50%; width: clamp(62px, 7vw, 108px); aspect-ratio: 1; background: linear-gradient(135deg, rgba(236, 239, 244, 0.9), rgba(136, 192, 208, 0.22) 48%, rgba(76, 86, 106, 0.12) 52%); border: 1px solid rgba(236, 239, 244, 0.66); box-shadow: 0 0 24px rgba(136, 192, 208, 0.24); animation: memora-frost-core 5s ease-in-out infinite alternate; } body[data-theme-overhaul="nord-frost"] .theme-canvas .n5, body[data-theme-overhaul="nord-frost"] .theme-canvas .n6 { left: 50%; top: 50%; width: 3px; height: clamp(280px, 38vw, 590px); background: linear-gradient(transparent, rgba(236, 239, 244, 0.62), transparent); box-shadow: 0 0 10px rgba(136, 192, 208, 0.2); animation: memora-frost-needle 16s linear infinite; } body[data-theme-overhaul="nord-frost"] .theme-canvas .n6 { animation-direction: reverse; animation-duration: 21s; } @keyframes memora-frost-lattice { from { transform: translate(-50%, -50%) rotate(45deg); opacity: 0.46; } 50% { opacity: 0.82; } to { transform: translate(-50%, -50%) rotate(405deg); opacity: 0.46; } } @keyframes memora-frost-core { from { transform: translate(-50%, -50%) rotate(45deg) scale(0.82); filter: brightness(0.88); } to { transform: translate(-50%, -50%) rotate(135deg) scale(1.08); filter: brightness(1.22); } } @keyframes memora-frost-needle { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* --- Welcome art 8: clockwork engine + pendulum ------------------------ */ body[data-theme-overhaul="steampunk"] .theme-canvas { background: radial-gradient(circle at 50% 50%, rgba(200, 125, 85, 0.12), transparent 36%), repeating-linear-gradient(0deg, rgba(212, 163, 115, 0.015) 0 1px, transparent 1px 6px); } body[data-theme-overhaul="steampunk"] .theme-canvas .n1 { left: 50%; top: 12%; width: 7px; height: clamp(260px, 38vh, 470px); background: linear-gradient(90deg, #4d3523, #d4a373 48%, #4d3523 52%); border-radius: 5px; transform-origin: 50% 0; box-shadow: 0 0 9px rgba(200, 125, 85, 0.2); animation: memora-steam-pendulum 4.2s ease-in-out infinite alternate; } body[data-theme-overhaul="steampunk"] .theme-canvas .n1::after { content: ''; position: absolute; left: 50%; bottom: -38px; width: 72px; height: 72px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 38% 32%, #d4a373, #7d4a2f 48%, #24170f 72%); border: 4px double #c87d55; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42); } body[data-theme-overhaul="steampunk"] .theme-canvas .n2, body[data-theme-overhaul="steampunk"] .theme-canvas .n3, body[data-theme-overhaul="steampunk"] .theme-canvas .n4 { --gear-size: 170px; width: var(--gear-size); height: var(--gear-size); border: 12px dashed rgba(200, 125, 85, 0.7); border-radius: 50%; box-shadow: inset 0 0 0 7px rgba(77, 53, 35, 0.86), inset 0 0 0 9px rgba(212, 163, 115, 0.28), 0 0 18px rgba(0, 0, 0, 0.34); animation: memora-steam-gear 13s linear infinite; } body[data-theme-overhaul="steampunk"] .theme-canvas .n2 { left: 18%; top: 52%; --gear-size: clamp(150px, 20vw, 310px); } body[data-theme-overhaul="steampunk"] .theme-canvas .n3 { right: 16%; top: 22%; --gear-size: clamp(120px, 16vw, 250px); animation-direction: reverse; animation-duration: 9s; } body[data-theme-overhaul="steampunk"] .theme-canvas .n4 { right: 24%; bottom: 2%; --gear-size: clamp(90px, 12vw, 190px); animation-duration: 7s; } body[data-theme-overhaul="steampunk"] .theme-canvas .n5, body[data-theme-overhaul="steampunk"] .theme-canvas .n6 { left: 26%; bottom: 6%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(223, 210, 192, 0.16), transparent 68%); filter: blur(8px); animation: memora-steam-puff 7s ease-out infinite; } body[data-theme-overhaul="steampunk"] .theme-canvas .n6 { left: auto; right: 28%; bottom: 14%; animation-delay: -3.5s; } @keyframes memora-steam-pendulum { from { transform: translateX(-50%) rotate(-24deg); } to { transform: translateX(-50%) rotate(24deg); } } @keyframes memora-steam-gear { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes memora-steam-puff { 0% { transform: translate3d(0, 30px, 0) scale(0.45); opacity: 0; } 20% { opacity: 0.42; } 100% { transform: translate3d(30px, -210px, 0) scale(2.2); opacity: 0; } } body.smooth-mode[data-theme-overhaul] .theme-canvas .canvas-node, body.a11y-reduce-motion[data-theme-overhaul] .theme-canvas .canvas-node { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { body[data-theme-overhaul] .theme-canvas .canvas-node { animation-play-state: paused !important; } } /* Brand identity: solid editorial marks and luminous gradients differ by skin. */ body[data-theme-overhaul="glassmorphism"] .app-home-title-text, body[data-theme-overhaul="glassmorphism"] #welcome-screen .welcome-title { background: linear-gradient(135deg, #a5b4fc, #fbcfe8 52%, #f3e8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; letter-spacing: -0.02em; text-shadow: 0 4px 16px rgba(165, 180, 252, 0.22); } body[data-theme-overhaul="cozy-earth"] .app-home-title-text, body[data-theme-overhaul="cozy-earth"] #welcome-screen .welcome-title { background: none; -webkit-text-fill-color: #9bb29c; color: #9bb29c; font-style: italic; letter-spacing: -0.01em; text-shadow: none; } body[data-theme-overhaul="royal-obsidian"] .app-home-title-text, body[data-theme-overhaul="royal-obsidian"] #welcome-screen .welcome-title { background: linear-gradient(135deg, #cfa85e, #f3e5ab); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; letter-spacing: 0.12em; text-shadow: 0 2px 12px rgba(207, 168, 94, 0.2); } body[data-theme-overhaul="sakura"] .app-home-title-text, body[data-theme-overhaul="sakura"] #welcome-screen .welcome-title { background: linear-gradient(135deg, #fff0f4, #ffb7c5 44%, #dfb2f4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; letter-spacing: -0.01em; text-shadow: 0 4px 14px rgba(255, 183, 197, 0.2); } body[data-theme-overhaul="abyssal-deep"] .app-home-title-text, body[data-theme-overhaul="abyssal-deep"] #welcome-screen .welcome-title { background: none; -webkit-text-fill-color: #00f0ff; color: #00f0ff; letter-spacing: 0.1em; text-shadow: 0 0 10px rgba(0, 240, 255, 0.38); } body[data-theme-overhaul="indigo-nebula"] .app-home-title-text, body[data-theme-overhaul="indigo-nebula"] #welcome-screen .welcome-title { background: linear-gradient(135deg, #ffd700, #f6efd2 38%, #a78bfa 72%, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgba(139, 92, 246, 0.26); } body[data-theme-overhaul="nord-frost"] .app-home-title-text, body[data-theme-overhaul="nord-frost"] #welcome-screen .welcome-title { background: none; -webkit-text-fill-color: #8fbcbb; color: #8fbcbb; letter-spacing: 0.05em; text-shadow: none; } body[data-theme-overhaul="steampunk"] .app-home-title-text, body[data-theme-overhaul="steampunk"] #welcome-screen .welcome-title { background: none; -webkit-text-fill-color: #c87d55; color: #c87d55; letter-spacing: 0.05em; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65); } body[data-theme-overhaul="royal-obsidian"] #quiz-card .question-text, body[data-theme-overhaul="indigo-nebula"] #quiz-card .question-text { text-shadow: 0 0 14px color-mix(in srgb, var(--g1) 18%, transparent); } body[data-theme-overhaul="sakura"] #quiz-card::after { box-shadow: var(--overhaul-card-trim-shadow), 0 0 24px rgba(255, 183, 197, 0.08); } body[data-theme-overhaul="abyssal-deep"] #quiz-card::after { box-shadow: var(--overhaul-card-trim-shadow), 0 0 20px rgba(0, 240, 255, 0.07); } body[data-theme-overhaul="indigo-nebula"] #quiz-card::after { box-shadow: var(--overhaul-card-trim-shadow), inset 0 2px 0 rgba(255, 215, 0, 0.18); } /* ========================================================================== SOURCES + QUIZ CONTROL POLISH These tokens keep the production Sources workspace and the quiz control row visually native to each overhaul without changing their geometry or hooks. ========================================================================== */ body[data-theme-overhaul="glassmorphism"] { --overhaul-control-color: #eee9fb; --overhaul-control-hover-bg: rgba(255, 255, 255, 0.075); --overhaul-control-hover-border: rgba(255, 255, 255, 0.12); --overhaul-control-hover-shadow: 0 7px 18px rgba(76, 29, 149, 0.16); --overhaul-control-active-bg: linear-gradient(135deg, rgba(129, 140, 248, 0.24), rgba(236, 72, 153, 0.18)); --overhaul-control-active-border: rgba(216, 180, 254, 0.28); --overhaul-control-active-shadow: 0 0 18px rgba(168, 85, 247, 0.16); --overhaul-source-surface: rgba(31, 18, 51, 0.94); --overhaul-source-gradient: radial-gradient(120% 150% at 0% 0%, rgba(129, 140, 248, 0.2), transparent 56%), radial-gradient(120% 150% at 100% 0%, rgba(236, 72, 153, 0.15), transparent 58%), linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent); --overhaul-source-border: rgba(255, 255, 255, 0.15); --overhaul-source-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 58px rgba(4, 2, 12, 0.5); --overhaul-source-filter: blur(18px) saturate(116%); --overhaul-source-row-bg: rgba(255, 255, 255, 0.045); --overhaul-source-row-border: rgba(255, 255, 255, 0.09); --overhaul-source-row-hover: rgba(255, 255, 255, 0.085); --overhaul-source-row-active: linear-gradient(135deg, rgba(129, 140, 248, 0.2), rgba(236, 72, 153, 0.11)); --overhaul-source-accent: #c4b5fd; --overhaul-source-accent-2: #f9a8d4; --overhaul-source-muted: #aaa1bd; --overhaul-source-footer-bg: rgba(17, 9, 30, 0.72); } body[data-theme-overhaul="cozy-earth"] { --overhaul-control-color: #dfd8c9; --overhaul-control-hover-bg: rgba(155, 178, 156, 0.09); --overhaul-control-hover-border: transparent; --overhaul-control-active-bg: rgba(214, 178, 112, 0.15); --overhaul-control-active-border: rgba(214, 178, 112, 0.22); --overhaul-source-surface: #1c231e; --overhaul-source-gradient: repeating-linear-gradient(0deg, rgba(232, 221, 204, 0.014) 0 1px, transparent 1px 5px), radial-gradient(circle at 10% 0%, rgba(155, 178, 156, 0.11), transparent 42%); --overhaul-source-border: #435047; --overhaul-source-shadow: 0 18px 44px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(232, 221, 204, 0.035); --overhaul-source-filter: none; --overhaul-source-row-bg: #252e28; --overhaul-source-row-border: #39453d; --overhaul-source-row-hover: #2b362e; --overhaul-source-row-active: rgba(155, 178, 156, 0.15); --overhaul-source-accent: #9bb29c; --overhaul-source-accent-2: #d6b270; --overhaul-source-muted: #9e9888; --overhaul-source-footer-bg: #19201b; } body[data-theme-overhaul="royal-obsidian"] { --overhaul-control-color: #e8dba9; --overhaul-control-hover-bg: rgba(207, 168, 94, 0.075); --overhaul-control-hover-border: transparent; --overhaul-control-active-bg: linear-gradient(135deg, rgba(143, 111, 54, 0.34), rgba(207, 168, 94, 0.15)); --overhaul-control-active-border: rgba(243, 229, 171, 0.2); --overhaul-control-active-shadow: 0 0 15px rgba(207, 168, 94, 0.12); --overhaul-source-surface: #0b0b0f; --overhaul-source-gradient: radial-gradient(circle at 50% -20%, rgba(243, 229, 171, 0.11), transparent 46%), linear-gradient(145deg, rgba(207, 168, 94, 0.025), transparent 46%); --overhaul-source-border: #66502a; --overhaul-source-shadow: inset 0 0 0 1px rgba(207, 168, 94, 0.16), inset 0 0 0 4px rgba(7, 7, 10, 0.8), inset 0 0 0 5px rgba(243, 229, 171, 0.06), 0 24px 58px rgba(0, 0, 0, 0.62); --overhaul-source-filter: none; --overhaul-source-row-bg: rgba(20, 19, 24, 0.96); --overhaul-source-row-border: #49391e; --overhaul-source-row-hover: rgba(207, 168, 94, 0.075); --overhaul-source-row-active: rgba(207, 168, 94, 0.14); --overhaul-source-accent: #f3e5ab; --overhaul-source-accent-2: #cfa85e; --overhaul-source-muted: #9f967e; --overhaul-source-footer-bg: #08080b; } body[data-theme-overhaul="sakura"] { --overhaul-control-color: #f6e8f1; --overhaul-control-hover-bg: rgba(255, 183, 197, 0.075); --overhaul-control-hover-border: transparent; --overhaul-control-active-bg: linear-gradient(135deg, rgba(255, 183, 197, 0.17), rgba(223, 178, 244, 0.17)); --overhaul-control-active-border: rgba(255, 183, 197, 0.24); --overhaul-control-active-shadow: 0 0 16px rgba(255, 183, 197, 0.13); --overhaul-source-surface: rgba(32, 19, 41, 0.96); --overhaul-source-gradient: radial-gradient(ellipse at 12% 0%, rgba(255, 183, 197, 0.18), transparent 47%), radial-gradient(ellipse at 88% 7%, rgba(223, 178, 244, 0.14), transparent 45%), linear-gradient(150deg, rgba(255, 255, 255, 0.035), transparent); --overhaul-source-border: rgba(255, 183, 197, 0.3); --overhaul-source-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 26px rgba(255, 183, 197, 0.08), 0 24px 54px rgba(10, 4, 14, 0.54); --overhaul-source-filter: none; --overhaul-source-row-bg: rgba(255, 183, 197, 0.045); --overhaul-source-row-border: rgba(255, 183, 197, 0.16); --overhaul-source-row-hover: rgba(255, 183, 197, 0.085); --overhaul-source-row-active: linear-gradient(135deg, rgba(255, 183, 197, 0.15), rgba(223, 178, 244, 0.12)); --overhaul-source-accent: #ffb7c5; --overhaul-source-accent-2: #dfb2f4; --overhaul-source-muted: #b5a5ba; --overhaul-source-footer-bg: rgba(22, 12, 29, 0.86); } body[data-theme-overhaul="abyssal-deep"] { --overhaul-control-color: #d9fbff; --overhaul-control-hover-bg: rgba(0, 240, 255, 0.065); --overhaul-control-hover-border: transparent; --overhaul-control-hover-shadow: 0 0 13px rgba(0, 240, 255, 0.12); --overhaul-control-active-bg: linear-gradient(135deg, rgba(0, 240, 255, 0.16), rgba(0, 255, 204, 0.11)); --overhaul-control-active-border: rgba(0, 240, 255, 0.24); --overhaul-control-active-shadow: 0 0 16px rgba(0, 240, 255, 0.18); --overhaul-source-surface: #040b18; --overhaul-source-gradient: radial-gradient(ellipse at 50% -18%, rgba(0, 240, 255, 0.13), transparent 47%), linear-gradient(180deg, rgba(0, 255, 204, 0.025), transparent 64%); --overhaul-source-border: rgba(0, 240, 255, 0.26); --overhaul-source-shadow: inset 0 0 24px rgba(0, 240, 255, 0.025), 0 0 24px rgba(0, 240, 255, 0.09), 0 24px 56px rgba(0, 2, 8, 0.68); --overhaul-source-filter: none; --overhaul-source-row-bg: rgba(8, 18, 36, 0.96); --overhaul-source-row-border: rgba(0, 240, 255, 0.16); --overhaul-source-row-hover: rgba(0, 240, 255, 0.07); --overhaul-source-row-active: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(0, 255, 204, 0.08)); --overhaul-source-accent: #00f0ff; --overhaul-source-accent-2: #00ffcc; --overhaul-source-muted: #6c91a7; --overhaul-source-footer-bg: #020711; } body[data-theme-overhaul="indigo-nebula"] { --overhaul-control-color: #eee9fb; --overhaul-control-hover-bg: rgba(167, 139, 250, 0.085); --overhaul-control-hover-border: transparent; --overhaul-control-hover-shadow: 0 0 14px rgba(139, 92, 246, 0.15); --overhaul-control-active-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(255, 215, 0, 0.09)); --overhaul-control-active-border: rgba(255, 215, 0, 0.2); --overhaul-control-active-shadow: 0 0 17px rgba(139, 92, 246, 0.2); --overhaul-source-surface: #100b24; --overhaul-source-gradient: radial-gradient(circle at 50% -18%, rgba(255, 215, 0, 0.12), transparent 40%), radial-gradient(circle at 92% 8%, rgba(139, 92, 246, 0.19), transparent 44%), linear-gradient(150deg, rgba(167, 139, 250, 0.04), transparent); --overhaul-source-border: rgba(167, 139, 250, 0.34); --overhaul-source-shadow: inset 0 2px 0 rgba(255, 215, 0, 0.16), inset 0 0 0 1px rgba(167, 139, 250, 0.055), 0 0 28px rgba(139, 92, 246, 0.13), 0 24px 58px rgba(3, 1, 10, 0.66); --overhaul-source-filter: none; --overhaul-source-row-bg: rgba(27, 20, 57, 0.92); --overhaul-source-row-border: rgba(167, 139, 250, 0.22); --overhaul-source-row-hover: rgba(167, 139, 250, 0.1); --overhaul-source-row-active: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(139, 92, 246, 0.16)); --overhaul-source-accent: #ffd700; --overhaul-source-accent-2: #a78bfa; --overhaul-source-muted: #a49abf; --overhaul-source-footer-bg: #0b0719; } body[data-theme-overhaul="nord-frost"] { --overhaul-control-color: #eceff4; --overhaul-control-hover-bg: #4c566a; --overhaul-control-hover-border: transparent; --overhaul-control-active-bg: rgba(136, 192, 208, 0.17); --overhaul-control-active-border: rgba(136, 192, 208, 0.25); --overhaul-source-surface: #323946; --overhaul-source-gradient: linear-gradient(145deg, rgba(236, 239, 244, 0.025), rgba(136, 192, 208, 0.025)); --overhaul-source-border: #58657b; --overhaul-source-shadow: 0 20px 46px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(236, 239, 244, 0.04); --overhaul-source-filter: none; --overhaul-source-row-bg: #434c5e; --overhaul-source-row-border: #566176; --overhaul-source-row-hover: #4c566a; --overhaul-source-row-active: rgba(136, 192, 208, 0.16); --overhaul-source-accent: #88c0d0; --overhaul-source-accent-2: #8fbcbb; --overhaul-source-muted: #a7b1c2; --overhaul-source-footer-bg: #2b313c; } body[data-theme-overhaul="steampunk"] { --overhaul-control-color: #ead6bd; --overhaul-control-hover-bg: rgba(200, 125, 85, 0.085); --overhaul-control-hover-border: transparent; --overhaul-control-active-bg: linear-gradient(135deg, rgba(184, 115, 51, 0.24), rgba(212, 163, 115, 0.13)); --overhaul-control-active-border: rgba(212, 163, 115, 0.2); --overhaul-source-surface: #211810; --overhaul-source-gradient: radial-gradient(circle at 9px 9px, #c87d55 0 2px, #4d3523 2.5px 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 9px) 9px, #c87d55 0 2px, #4d3523 2.5px 4px, transparent 4.5px), repeating-linear-gradient(90deg, rgba(212, 163, 115, 0.018) 0 1px, transparent 1px 5px); --overhaul-source-border: #6b5036; --overhaul-source-shadow: inset 0 0 0 1px rgba(212, 163, 115, 0.18), inset 0 0 0 4px rgba(28, 20, 14, 0.68), inset 0 0 0 5px rgba(200, 125, 85, 0.13), 0 22px 52px rgba(0, 0, 0, 0.56); --overhaul-source-filter: none; --overhaul-source-row-bg: #36291e; --overhaul-source-row-border: #60462f; --overhaul-source-row-hover: #423225; --overhaul-source-row-active: rgba(212, 163, 115, 0.13); --overhaul-source-accent: #d4a373; --overhaul-source-accent-2: #c87d55; --overhaul-source-muted: #aa9278; --overhaul-source-footer-bg: #1b130d; } body[data-theme-overhaul] #source-dropdown { background-color: var(--overhaul-source-surface) !important; background-image: var(--overhaul-source-gradient, none) !important; border-color: var(--overhaul-source-border) !important; border-radius: var(--overhaul-card-radius, var(--btn-radius-lg)); box-shadow: var(--overhaul-source-shadow) !important; backdrop-filter: var(--overhaul-source-filter, none) !important; -webkit-backdrop-filter: var(--overhaul-source-filter, none) !important; color: var(--text-main); } body[data-theme-overhaul] #source-dropdown .evidence-column-header { border-bottom-color: var(--overhaul-source-border); } body[data-theme-overhaul] #source-dropdown .evidence-column-count, body[data-theme-overhaul] #source-dropdown .evidence-column-action, body[data-theme-overhaul] #source-dropdown .evidence-item-meta-link { background: color-mix(in srgb, var(--overhaul-source-accent) 12%, var(--overhaul-source-row-bg) 88%); border-color: color-mix(in srgb, var(--overhaul-source-accent) 44%, var(--overhaul-source-row-border) 56%); color: var(--overhaul-source-accent); box-shadow: none; } body[data-theme-overhaul] #source-dropdown .evidence-column-action:hover, body[data-theme-overhaul] #source-dropdown .evidence-item-meta-link:hover { background: color-mix(in srgb, var(--overhaul-source-accent) 20%, var(--overhaul-source-row-bg) 80%); border-color: var(--overhaul-source-accent); color: var(--text-q); box-shadow: 0 0 14px color-mix(in srgb, var(--overhaul-source-accent) 18%, transparent); } body[data-theme-overhaul] #source-dropdown .evidence-item, body[data-theme-overhaul] #source-dropdown .source-item { background: var(--overhaul-source-row-bg); border-color: var(--overhaul-source-row-border); border-radius: var(--overhaul-choice-radius, var(--btn-radius-md)); color: var(--text-a); box-shadow: var(--overhaul-choice-shadow, none); } body[data-theme-overhaul] #source-dropdown .evidence-item:hover, body[data-theme-overhaul] #source-dropdown .source-item:hover { background: var(--overhaul-source-row-hover); border-color: var(--overhaul-source-accent); box-shadow: var(--overhaul-choice-hover-shadow, none); } body[data-theme-overhaul] #source-dropdown .evidence-item.active, body[data-theme-overhaul] #source-dropdown .source-item.active { background: var(--overhaul-source-row-active); border-color: var(--overhaul-source-accent); color: var(--text-q); box-shadow: var(--overhaul-choice-correct-shadow, none); } body[data-theme-overhaul] #source-dropdown .evidence-item.linking, body[data-theme-overhaul] #source-dropdown .source-item.linking-target { background: color-mix(in srgb, var(--overhaul-source-accent-2) 13%, var(--overhaul-source-row-bg) 87%); border-color: var(--overhaul-source-accent-2); } body[data-theme-overhaul] #source-dropdown .evidence-item.unlinked, body[data-theme-overhaul] #source-dropdown .evidence-item.inactive { background: color-mix(in srgb, var(--overhaul-source-row-bg) 72%, transparent 28%); border-color: color-mix(in srgb, var(--overhaul-source-muted) 46%, transparent); } body[data-theme-overhaul] #source-dropdown .evidence-item.unlinked .evidence-item-name, body[data-theme-overhaul] #source-dropdown .evidence-item.inactive .evidence-item-name, body[data-theme-overhaul] #source-dropdown .evidence-item-meta, body[data-theme-overhaul] #source-dropdown .si-count { color: var(--overhaul-source-muted) !important; } body[data-theme-overhaul] #source-dropdown .evidence-item-name:hover { color: var(--text-q) !important; } body[data-theme-overhaul] #source-dropdown .evidence-action-btn, body[data-theme-overhaul] #source-dropdown .source-action-btn { background: var(--overhaul-source-row-bg); border-color: var(--overhaul-source-row-border); color: var(--overhaul-source-muted); box-shadow: none; } body[data-theme-overhaul] #source-dropdown .evidence-action-btn:hover, body[data-theme-overhaul] #source-dropdown .source-action-btn:hover, body[data-theme-overhaul] #source-dropdown .evidence-action-btn.link-btn, body[data-theme-overhaul] #source-dropdown .btn-link { background: color-mix(in srgb, var(--overhaul-source-accent) 12%, var(--overhaul-source-row-bg) 88%); border-color: color-mix(in srgb, var(--overhaul-source-accent) 50%, var(--overhaul-source-row-border) 50%); color: var(--overhaul-source-accent); } body[data-theme-overhaul] #source-dropdown .evidence-action-btn.link-btn.linked, body[data-theme-overhaul] #source-dropdown .btn-link.is-linked { background: color-mix(in srgb, var(--overhaul-source-accent-2) 14%, var(--overhaul-source-row-bg) 86%); border-color: var(--overhaul-source-accent-2); color: var(--overhaul-source-accent-2); } body[data-theme-overhaul] #source-dropdown input, body[data-theme-overhaul] #source-dropdown select, body[data-theme-overhaul] #source-dropdown textarea { background: var(--overhaul-source-row-bg) !important; border-color: var(--overhaul-source-row-border) !important; color: var(--text-a) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--overhaul-source-accent) 6%, transparent); outline-color: var(--overhaul-source-accent); } body[data-theme-overhaul] #source-dropdown .evidence-footer { background: var(--overhaul-source-footer-bg); border-top-color: var(--overhaul-source-border); } body[data-theme-overhaul] #source-dropdown .evidence-footer .glass-btn { background: var(--overhaul-source-row-bg) !important; border-color: var(--overhaul-source-row-border) !important; color: var(--text-a) !important; box-shadow: none !important; } body[data-theme-overhaul] #source-dropdown .evidence-footer .glass-btn:hover { background: var(--overhaul-source-row-hover) !important; border-color: var(--overhaul-source-accent) !important; color: var(--text-q) !important; } body[data-theme-overhaul] #source-dropdown .connection-line, body[data-theme-overhaul] #source-dropdown .connection-line-glow { stroke: var(--overhaul-source-accent) !important; } body[data-theme-overhaul] #source-dropdown .connection-endpoint, body[data-theme-overhaul] #source-dropdown .connection-flow-dot { fill: var(--overhaul-source-accent-2) !important; } body[data-theme-overhaul] #source-dropdown .connection-line-glow { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--overhaul-source-accent) 45%, transparent)); } body[data-theme-overhaul] #source-resize-handle { background: linear-gradient(45deg, color-mix(in srgb, var(--overhaul-source-accent) 18%, transparent), transparent 54%); color: var(--overhaul-source-accent); } /* ========================================================================== ACCESSIBILITY GUARD - high contrast always beats any overhaul (base.css body.a11y-high-contrast ties overhaul selectors at (0,1,1) but loads earlier; this (0,2,1) rule restores its tokens on top.) ========================================================================== */ body.a11y-high-contrast[data-theme-overhaul] { --card-bg: rgba(2, 6, 23, 0.92); --quiz-card-bg: rgba(2, 6, 23, 0.92); --bd: #cbd5e1; --text-main: #f8fafc; --text-q: #ffffff; --text-a: #f8fafc; --btn-text: #f8fafc; --btn-text-muted: #dbe4f3; --btn-border: rgba(226, 232, 240, 0.7); --btn-border-strong: #ffffff; --overhaul-panel-bg: #020617; --overhaul-panel-border: #ffffff; --overhaul-panel-shadow: none; --overhaul-card-surface: #020617; --overhaul-card-gradient: none; --overhaul-card-border: #ffffff; --overhaul-card-shadow: 0 0 0 2px #ffffff; --overhaul-card-overlay: none; --overhaul-card-overlay-opacity: 0; --overhaul-card-trim-shadow: none; --overhaul-choice-bg: #020617; --overhaul-choice-border: #ffffff; --overhaul-choice-shadow: none; --overhaul-choice-filter: none; --overhaul-choice-hover-bg: #172033; --overhaul-choice-hover-border: #ffffff; --overhaul-choice-hover-shadow: 0 0 0 2px #ffffff; --overhaul-choice-correct-bg: #064e3b; --overhaul-choice-correct-border: #ffffff; --overhaul-choice-correct-shadow: 0 0 0 2px #ffffff; --overhaul-choice-incorrect-bg: #450a0a; --overhaul-choice-incorrect-border: #ffffff; --overhaul-dock-bg: #020617; --overhaul-dock-border: #ffffff; --overhaul-dock-shadow: 0 0 0 2px #ffffff; --overhaul-dock-filter: none; --overhaul-btn-bg: #020617; --overhaul-btn-border: #ffffff; --overhaul-btn-shadow: none; --overhaul-btn-hover-bg: #172033; --overhaul-btn-hover-border: #ffffff; --overhaul-btn-hover-shadow: 0 0 0 2px #ffffff; --overhaul-btn-active-bg: #1e3a8a; --overhaul-control-color: #ffffff; --overhaul-control-hover-bg: #172033; --overhaul-control-hover-border: #ffffff; --overhaul-control-hover-shadow: 0 0 0 2px #ffffff; --overhaul-control-active-bg: #1e3a8a; --overhaul-control-active-border: #ffffff; --overhaul-control-active-shadow: 0 0 0 2px #ffffff; --overhaul-source-surface: #020617; --overhaul-source-gradient: none; --overhaul-source-border: #ffffff; --overhaul-source-shadow: 0 0 0 2px #ffffff; --overhaul-source-filter: none; --overhaul-source-row-bg: #020617; --overhaul-source-row-border: #ffffff; --overhaul-source-row-hover: #172033; --overhaul-source-row-active: #1e3a8a; --overhaul-source-accent: #ffffff; --overhaul-source-accent-2: #fef08a; --overhaul-source-muted: #dbe4f3; --overhaul-source-footer-bg: #020617; } body.a11y-high-contrast[data-theme-overhaul] .app-home-title-text, body.a11y-high-contrast[data-theme-overhaul] #welcome-screen .welcome-title { background: none; -webkit-text-fill-color: #ffffff; color: #ffffff; text-shadow: none; } body.a11y-high-contrast[data-theme-overhaul] #theme-canvas-wrapper { display: none !important; }