/* * themes.css — SPM AI Guru Light / Dark Design System * ==================================================== * All colour tokens live here. Toggle by setting data-theme="light" on . * Dark mode is the default (no attribute needed). * * Naming convention * --surface-* : background layers (page, card, elevated) * --border-* : borders and dividers * --text-* : typography hierarchy * --accent-* : brand purple/indigo accent * --glow-* : neon / glow colours * --ui-* : specific UI components (header, input, sidebar…) * --shadow-* : box-shadow values * --chat-* : chat message colours */ /* ── Dark Mode (default) ─────────────────────────────────────────────── */ :root, [data-theme="dark"] { /* Surfaces */ --surface-page: #0f1020; --surface-page-alt: #0d1117; --surface-card: rgba(22, 27, 34, 0.70); --surface-elevated: rgba(22, 27, 34, 0.95); --surface-glass: rgba(255, 255, 255, 0.03); --surface-hover: rgba(255, 255, 255, 0.05); --surface-active: rgba(255, 255, 255, 0.08); --surface-input: rgba(0, 0, 0, 0.25); --surface-modal: rgba(15, 16, 32, 0.98); --surface-sidebar: rgba(13, 17, 23, 0.96); /* Required app-level design tokens */ --bg-primary: var(--surface-page); --bg-navbar: var(--header-bg); --bg-card: var(--surface-card); /* Borders */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.20); --border-focus: rgba(102, 126, 234, 0.60); /* Typography */ --text-primary: #ffffff; --text-secondary: #8b949e; --text-muted: rgba(255, 255, 255, 0.35); --text-inverse: #0f1020; --text-link: #a5b4fc; --text-error: #f87171; --text-success: #4ade80; --text-warning: #facc15; /* Accent (purple-indigo brand) */ --accent-start: #667eea; --accent-end: #764ba2; --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --accent-glow: rgba(102, 126, 234, 0.35); --accent-dim: rgba(102, 126, 234, 0.12); --accent-text: #a5b4fc; /* Neon glow (subject cards, decorative) */ --glow-cyan: #00f0ff; --glow-pink: #ff0055; --glow-green: #00ff9d; --glow-purple: #d600ff; --glow-amber: #ffaa00; --glow-yellow: #ffee00; --glow-opacity: 1; /* Subject card neon accent colours (per card) */ --card-add-math: #ff0055; --card-physics: #00f0ff; --card-biology: #00ff9d; --card-chem: #d600ff; --card-sejarah: #ffaa00; --card-math: #ffee00; /* UI components */ --header-bg: rgba(13, 14, 28, 0.88); --header-border: rgba(255, 255, 255, 0.06); --input-bg: rgba(0, 0, 0, 0.30); --input-border: rgba(255, 255, 255, 0.10); --input-focus-bg: rgba(0, 0, 0, 0.40); --scrollbar-thumb: rgba(255, 255, 255, 0.10); --scrollbar-hover: rgba(255, 255, 255, 0.20); --code-bg: rgba(0, 0, 0, 0.40); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.60); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.40); --shadow-glow: 0 0 30px rgba(102, 126, 234, 0.20); /* Chat */ --chat-user-bg: rgba(102, 126, 234, 0.15); --chat-user-border: rgba(102, 126, 234, 0.30); --chat-ai-bg: rgba(22, 27, 34, 0.80); --chat-ai-border: rgba(255, 255, 255, 0.06); --chat-text: var(--text-primary); --chat-strong: var(--glow-cyan); --chat-muted: #b8c4ce; /* Page radial gradient (home screen) */ --page-gradient: radial-gradient(circle at 50% 10%, #1a1f2e 0%, #0d1117 80%); /* Theme meta */ --theme-name: "dark"; color-scheme: dark; /* Legacy aliases for standalone pages that only load themes.css */ --bg-color: var(--surface-page); --text-color: var(--text-primary); --card-bg: var(--surface-card); --glass-bg: var(--surface-glass); --glass-border: var(--border-default); --border: var(--border-default); } /* ── Light Mode ──────────────────────────────────────────────────────── */ [data-theme="light"] { /* Surfaces */ --surface-page: #f0f3fb; --surface-page-alt: #e8ecf6; --surface-card: rgba(255, 255, 255, 0.85); --surface-elevated: rgba(255, 255, 255, 0.98); --surface-glass: rgba(255, 255, 255, 0.60); --surface-hover: rgba(102, 126, 234, 0.06); --surface-active: rgba(102, 126, 234, 0.12); --surface-input: rgba(255, 255, 255, 0.90); --surface-modal: rgba(250, 251, 255, 0.98); --surface-sidebar: rgba(240, 243, 251, 0.98); /* Required app-level design tokens */ --bg-primary: var(--surface-page); --bg-navbar: var(--header-bg); --bg-card: var(--surface-card); /* Borders */ --border-subtle: rgba(139, 152, 202, 0.12); --border-default: rgba(139, 152, 202, 0.22); --border-strong: rgba(102, 126, 234, 0.35); --border-focus: rgba(102, 126, 234, 0.70); /* Typography */ --text-primary: #1a1d3a; --text-secondary: #5a607a; --text-muted: #9098b8; --text-inverse: #ffffff; --text-link: #5c6bc0; --text-error: #dc2626; --text-success: #059669; --text-warning: #d97706; /* Accent — purple brand survives on light beautifully */ --accent-start: #667eea; --accent-end: #764ba2; --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --accent-glow: rgba(102, 126, 234, 0.25); --accent-dim: rgba(102, 126, 234, 0.10); --accent-text: #5c6bc0; /* Neon → vivid-but-not-neon for light mode */ --glow-cyan: #0ea5e9; --glow-pink: #e91e8c; --glow-green: #10b981; --glow-purple: #7c3aed; --glow-amber: #f59e0b; --glow-yellow: #ca8a04; --glow-opacity: 0.85; /* Subject card accents (vivid, not neon) */ --card-add-math: #e91e8c; --card-physics: #0ea5e9; --card-biology: #10b981; --card-chem: #7c3aed; --card-sejarah: #f59e0b; --card-math: #ca8a04; /* UI components */ --header-bg: rgba(240, 243, 251, 0.92); --header-border: rgba(139, 152, 202, 0.18); --input-bg: rgba(255, 255, 255, 0.95); --input-border: rgba(139, 152, 202, 0.25); --input-focus-bg: rgba(255, 255, 255, 1.00); --scrollbar-thumb: rgba(102, 126, 234, 0.20); --scrollbar-hover: rgba(102, 126, 234, 0.35); --code-bg: rgba(224, 231, 255, 0.50); /* Shadows — use purple tint instead of black for sophistication */ --shadow-sm: 0 2px 8px rgba(102, 126, 234, 0.10); --shadow-md: 0 4px 20px rgba(102, 126, 234, 0.14); --shadow-lg: 0 8px 40px rgba(102, 126, 234, 0.18); --shadow-card: 0 2px 16px rgba(102, 126, 234, 0.10), 0 1px 4px rgba(0,0,0,0.04); --shadow-glow: 0 0 24px rgba(102, 126, 234, 0.18); /* Chat */ --chat-user-bg: rgba(102, 126, 234, 0.10); --chat-user-border: rgba(102, 126, 234, 0.25); --chat-ai-bg: rgba(255, 255, 255, 0.92); --chat-ai-border: rgba(139, 152, 202, 0.18); --chat-text: var(--text-primary); --chat-strong: #0b8ea3; --chat-muted: var(--text-secondary); /* Page gradient — soft morning sky */ --page-gradient: radial-gradient( circle at 30% 20%, rgba(200, 214, 255, 0.60) 0%, transparent 50% ), radial-gradient( circle at 80% 70%, rgba(192, 182, 255, 0.40) 0%, transparent 45% ), linear-gradient(160deg, #edf0fb 0%, #f0f3fb 60%, #ece8f8 100%); --theme-name: "light"; color-scheme: light; /* Legacy aliases for standalone pages that only load themes.css */ --bg-color: var(--surface-page); --text-color: var(--text-primary); --card-bg: var(--surface-card); --glass-bg: var(--surface-glass); --glass-border: var(--border-default); --border: var(--border-default); } /* ── Theme Toggle Button ─────────────────────────────────────────────── */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-glass); border: 1px solid var(--border-default); color: var(--text-secondary); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex-shrink: 0; } .theme-toggle-btn:hover { background: var(--surface-hover); color: var(--text-primary); transform: scale(1.08); } .theme-toggle-btn .icon-sun, .theme-toggle-btn .icon-moon { font-size: 0.85rem; transition: opacity 0.2s ease; pointer-events: none; } .theme-toggle-floating { position: fixed; top: calc(48px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); z-index: 10050; box-shadow: var(--shadow-md); } .theme-toggle-floating:hover { transform: translateY(-1px) scale(1.06); } /* Dark mode: show sun (click to go light) */ [data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; } [data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; } /* Light mode: show moon (click to go dark) */ [data-theme="light"] .theme-toggle-btn .icon-sun { display: none; } [data-theme="light"] .theme-toggle-btn .icon-moon { display: block; } /* Default fallback (no attribute = dark) */ :root:not([data-theme="light"]) .theme-toggle-btn .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle-btn .icon-moon { display: none; } /* ── Global transitions (smooth theme switching) ─────────────────────── */ *, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } /* Exclude elements that should NOT transition (animations, transforms) */ .laser-tesseract *, .tesseract *, canvas, svg, video, img, .formula-card .formula-display, [class*="animation"] { transition: none !important; } /* ═══════════════════════════════════════════════════════════════════════ LIGHT MODE — COMPONENT OVERRIDES All rules here are scoped to [data-theme="light"] so dark mode is completely untouched. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. Soften the overall page feel ──────────────────────────────────── */ [data-theme="light"] body { background: var(--page-gradient); color: var(--text-primary); } /* ── 2. Subject Selection Cards (home screen) ─────────────────────────── */ [data-theme="light"] .card { background: rgba(255, 255, 255, 0.72); border-color: rgba(148, 163, 184, 0.22); color: #1a1d3a; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.10), 0 1px 4px rgba(0,0,0,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-theme="light"] .card:hover { background: rgba(255, 255, 255, 0.92); box-shadow: 0 12px 32px rgba(102, 126, 234, 0.20), 0 0 0 2px var(--card-color); } [data-theme="light"] .card h3 { color: #1a1d3a; } [data-theme="light"] .card i { color: var(--card-color); opacity: 0.85; filter: none; } [data-theme="light"] .card:hover i { opacity: 1; filter: drop-shadow(0 0 8px var(--card-color)); } [data-theme="light"] .hero-text h1 { background: linear-gradient(135deg, #151936 0%, #5c6bc0 52%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── 3. Chat input bar ────────────────────────────────────────────────── */ [data-theme="light"] .input-bar { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(139, 152, 202, 0.30) !important; box-shadow: 0 2px 12px rgba(102, 126, 234, 0.10) !important; } [data-theme="light"] .input-bar:focus-within { border-color: var(--border-focus) !important; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important; background: #ffffff !important; } [data-theme="light"] #text-input { color: #1a1d3a; } [data-theme="light"] .icon-btn { color: #5a607a; } [data-theme="light"] .icon-btn:hover { color: #1a1d3a; } [data-theme="light"] .send-btn { background: var(--accent-gradient); color: #ffffff; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.40); } /* ── 4. Header & nav buttons ──────────────────────────────────────────── */ [data-theme="light"] header { background: transparent; } /* Back button, hamburger, settings etc. become readable on light bg */ [data-theme="light"] #back-btn, [data-theme="light"] #hub-trigger-btn, [data-theme="light"] .hamburger-menu-btn, [data-theme="light"] .mobile-menu-btn { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(139, 152, 202, 0.28); color: #1a1d3a; } [data-theme="light"] #back-btn:hover, [data-theme="light"] #hub-trigger-btn:hover, [data-theme="light"] .hamburger-menu-btn:hover, [data-theme="light"] .mobile-menu-btn:hover { background: rgba(255, 255, 255, 0.98); color: #667eea; border-color: rgba(102, 126, 234, 0.40); } /* Auth button (Login / user area) */ [data-theme="light"] .auth-btn { background: rgba(255, 255, 255, 0.70); border: 1px solid rgba(139, 152, 202, 0.25); color: #1a1d3a; } [data-theme="light"] .auth-btn:hover { background: rgba(255, 255, 255, 0.95); color: #667eea; } [data-theme="light"] body > nav, [data-theme="light"] .quiz-main > nav, [data-theme="light"] .exam-dashboard > nav { background: rgba(248, 250, 255, 0.88) !important; border-color: rgba(139, 152, 202, 0.22) !important; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.10) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } [data-theme="light"] nav .text-white, [data-theme="light"] nav span, [data-theme="light"] nav div { color: var(--text-primary) !important; } [data-theme="light"] nav .text-gray-400, [data-theme="light"] nav a { color: var(--text-secondary) !important; } [data-theme="light"] nav a:hover { color: var(--accent-text) !important; } /* ── 5. Feature Hub overlay ───────────────────────────────────────────── */ [data-theme="light"] .feature-hub-overlay { background: linear-gradient(145deg, #eff1fb 0%, #e7eaf8 50%, #ece9f8 100%); } [data-theme="light"] .hub-blob-1 { background: #a5b4fc; opacity: 0.35; } [data-theme="light"] .hub-blob-2 { background: #93c5fd; opacity: 0.30; } [data-theme="light"] .hub-blob-3 { background: #c4b5fd; opacity: 0.30; } /* Hub title text */ [data-theme="light"] .hub-title, [data-theme="light"] .feature-hub-overlay h1, [data-theme="light"] .feature-hub-overlay h2, [data-theme="light"] .feature-hub-overlay .hub-header h2 { color: #1a1d3a !important; } [data-theme="light"] .feature-hub-overlay p, [data-theme="light"] .feature-hub-overlay .hub-subtitle { color: #5a607a !important; } /* Feature cards inside the hub */ [data-theme="light"] .feature-card { background: rgba(255, 255, 255, 0.80) !important; border-color: rgba(139, 152, 202, 0.22) !important; box-shadow: 0 4px 16px rgba(102, 126, 234, 0.10) !important; } [data-theme="light"] .feature-card:hover { background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 8px 28px rgba(102, 126, 234, 0.20) !important; } [data-theme="light"] .feature-card h4, [data-theme="light"] .feature-card .card-title { color: #1a1d3a !important; } [data-theme="light"] .feature-card p, [data-theme="light"] .feature-card .card-desc { color: #5a607a !important; } [data-theme="light"] .feature-icon { opacity: 0.85; } /* Hub close button */ [data-theme="light"] #hub-close-btn { background: rgba(255, 255, 255, 0.70); border: 1px solid rgba(139, 152, 202, 0.28); color: #1a1d3a; } [data-theme="light"] #hub-close-btn:hover { background: rgba(255, 255, 255, 0.98); color: #dc2626; } /* ── 6. Innovation Lab nav badge (keep amber, adjust on light) ────────── */ [data-theme="light"] .nav-innovation-badge { background: rgba(245, 158, 11, 0.12) !important; border-color: rgba(245, 158, 11, 0.50) !important; box-shadow: 0 0 12px rgba(245, 158, 11, 0.18) !important; } /* ── 7. Workspace section (chat area) ────────────────────────────────── */ [data-theme="light"] #workspace-section { background: transparent; } /* ── 8. AI message welcome accent ─────────────────────────────────────── */ [data-theme="light"] .ai-message.welcome { border-left-color: #667eea; } [data-theme="light"] .avatar { background: rgba(102, 126, 234, 0.12); color: #667eea; } /* ── 9. Scrollbar (light) ─────────────────────────────────────────────── */ [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(102, 126, 234, 0.22); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(102, 126, 234, 0.40); } /* ── 10. DLP toggle + Arena selector (light mode) ────────────────────── */ [data-theme="light"] .dlp-toggle-wrapper { background: rgba(255, 255, 255, 0.70); border-color: rgba(139, 152, 202, 0.28); } [data-theme="light"] .dlp-pill-btn { color: #5a607a; } [data-theme="light"] .dlp-pill-btn:not(.active):hover { background: rgba(102, 126, 234, 0.08); color: #1a1d3a; } [data-theme="light"] .arena-selector-wrapper { background: rgba(255, 255, 255, 0.70); border-color: rgba(245, 158, 11, 0.30); } [data-theme="light"] .arena-pipeline-select { color: #b45309; } /* ── 11. Smart diagram page ───────────────────────────────────────────── */ [data-theme="light"] .prompt-box { background: rgba(255, 255, 255, 0.90) !important; border-color: rgba(139, 152, 202, 0.28) !important; box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12) !important; } [data-theme="light"] .prompt-box textarea { color: #1a1d3a; } [data-theme="light"] .mode-pill { background: rgba(255, 255, 255, 0.70); border-color: rgba(139, 152, 202, 0.22); color: #5a607a; } [data-theme="light"] .mode-pill.active { background: var(--accent-gradient); color: #ffffff; border-color: transparent; } [data-theme="light"] .welcome-text h1 { background: linear-gradient(135deg, #1a1d3a 0%, #667eea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] .welcome-text p { color: #5a607a; } [data-theme="light"] .back-nav { color: #5a607a; background: rgba(255, 255, 255, 0.70); border: 1px solid rgba(139, 152, 202, 0.22); padding: 6px 12px; border-radius: 8px; } [data-theme="light"] .back-nav:hover { color: #667eea; background: rgba(255, 255, 255, 0.98); } /* ── 12. Camera modal (light) ─────────────────────────────────────────── */ [data-theme="light"] .camera-controls { background: rgba(240, 243, 251, 0.95); border-top: 1px solid rgba(139, 152, 202, 0.20); } /* ── 13. Quiz Mode ───────────────────────────────────────────────────── */ [data-theme="light"] { --quiz-primary: var(--accent-start); --quiz-secondary: var(--accent-end); --quiz-bg: var(--surface-page); --quiz-card-bg: rgba(255, 255, 255, 0.88); --quiz-border: rgba(139, 152, 202, 0.24); --quiz-text: var(--text-primary); --quiz-text-dim: var(--text-secondary); } [data-theme="light"] .quiz-page-container, [data-theme="light"] .quiz-main { background: var(--page-gradient); color: var(--text-primary); } [data-theme="light"] .quiz-setup-panel, [data-theme="light"] .quiz-message .content, [data-theme="light"] .quiz-input-area, [data-theme="light"] .quiz-option-btn, [data-theme="light"] .new-quiz-btn, [data-theme="light"] .quiz-visual-ai-container, [data-theme="light"] .mermaid { background: rgba(255, 255, 255, 0.90) !important; border-color: rgba(139, 152, 202, 0.24) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-sm); } [data-theme="light"] .setup-group select, [data-theme="light"] .quiz-input { background: rgba(255, 255, 255, 0.96); border-color: rgba(139, 152, 202, 0.28); color: var(--text-primary); } [data-theme="light"] .quiz-question, [data-theme="light"] .quiz-topic, [data-theme="light"] .quiz-message p { color: var(--text-primary); } [data-theme="light"] .quiz-question tr:nth-child(even) { background-color: rgba(102, 126, 234, 0.05); } /* ── 14. Formula Hub ─────────────────────────────────────────────────── */ [data-theme="light"] .sidebar, [data-theme="light"] .glass { background: rgba(255, 255, 255, 0.78) !important; border-color: rgba(139, 152, 202, 0.22) !important; box-shadow: var(--shadow-sm); } [data-theme="light"] .formula-card { background: rgba(255, 255, 255, 0.88) !important; border-color: rgba(139, 152, 202, 0.22) !important; color: var(--text-primary); box-shadow: var(--shadow-card); } [data-theme="light"] .formula-card:hover { background: rgba(255, 255, 255, 0.98) !important; } [data-theme="light"] .formula-card .text-white { color: var(--text-primary) !important; } [data-theme="light"] .filter-btn { color: var(--text-secondary); } [data-theme="light"] .filter-btn:hover { background: rgba(102, 126, 234, 0.08) !important; color: var(--text-primary); } [data-theme="light"] .filter-btn.active { background: rgba(var(--accent-rgb, 102, 126, 234), 0.10) !important; } [data-theme="light"] .text-gray-400, [data-theme="light"] .text-slate-400, [data-theme="light"] .text-gray-500, [data-theme="light"] .text-slate-500 { color: var(--text-secondary) !important; } /* ── 15. Innovation Suite + Labs ─────────────────────────────────────── */ [data-theme="light"] .container, [data-theme="light"] .lab-container { color: var(--text-primary); } [data-theme="light"] .card, [data-theme="light"] .subject-section, [data-theme="light"] .glass-card, [data-theme="light"] .sim-panel, [data-theme="light"] .empty-state { background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(238, 243, 255, 0.82)) !important; border-color: rgba(139, 152, 202, 0.24) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-card) !important; } [data-theme="light"] .card h3, [data-theme="light"] .subject-section h2, [data-theme="light"] .controls h2, [data-theme="light"] .section-title { color: var(--text-primary) !important; } [data-theme="light"] .card p, [data-theme="light"] .subtitle, [data-theme="light"] .controls label { color: var(--text-secondary) !important; } [data-theme="light"] .sim-viewport, [data-theme="light"] .formula-box, [data-theme="light"] .sim-item { background: rgba(248, 250, 255, 0.78) !important; border-color: rgba(139, 152, 202, 0.22) !important; color: var(--text-primary) !important; } [data-theme="light"] .tab-btn { background: rgba(255, 255, 255, 0.78) !important; border: 1px solid rgba(139, 152, 202, 0.18) !important; } [data-theme="light"] .tab-btn.active { background: rgba(102, 126, 234, 0.12) !important; } [data-theme="light"] .card .launch-btn { background: #ffffff !important; color: var(--text-primary) !important; border-color: rgba(139, 152, 202, 0.35) !important; } [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="light"] input { color: var(--text-primary); } /* ── 16. Smart Diagram and Topic Detail ──────────────────────────────── */ [data-theme="light"] #main-container, [data-theme="light"] body:has(#main-container) { background: var(--page-gradient); } [data-theme="light"] textarea::placeholder { color: rgba(90, 96, 122, 0.72); } [data-theme="light"] #topic-panel, [data-theme="light"] .answer-card, [data-theme="light"] .top-bar { background: rgba(255, 255, 255, 0.94) !important; border-color: rgba(139, 152, 202, 0.22) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-md); } [data-theme="light"] .top-bar-title, [data-theme="light"] .topic-meta, [data-theme="light"] #answer-content { color: var(--text-primary) !important; } [data-theme="light"] .back-btn, [data-theme="light"] .back-nav, [data-theme="light"] .panel-close-btn { background: rgba(255, 255, 255, 0.78) !important; border-color: rgba(139, 152, 202, 0.24) !important; color: var(--text-secondary) !important; } /* ── 17. Visualizer Library ──────────────────────────────────────────── */ [data-theme="dark"] .library-container, [data-theme="dark"] .library-header, [data-theme="dark"] .filter-bar, [data-theme="dark"] .topic-item { background: var(--surface-page-alt) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; } [data-theme="dark"] .library-header h1, [data-theme="dark"] .topic-item .topic-name { color: var(--text-primary) !important; } [data-theme="dark"] .capsule-filter, [data-theme="dark"] .section-header, [data-theme="dark"] .search-input { background: var(--surface-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; } [data-theme="dark"] .topic-item:hover { background: var(--surface-hover) !important; } [data-theme="dark"] .custom-modal-box { background: var(--surface-modal) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; } /* ── 18. Exam + Performance ──────────────────────────────────────────── */ [data-theme="light"] { --neon-cyan: #0ea5e9; --neon-magenta: #d946ef; --neon-blue: #2563eb; --bg-dark: #f3f6ff; } [data-theme="light"] .exam-dashboard { background: var(--page-gradient); color: var(--text-primary); } [data-theme="light"] .sidebar, [data-theme="light"] .question-area, [data-theme="light"] .stat-card, [data-theme="light"] .chart-container { background: rgba(255, 255, 255, 0.86) !important; border-color: rgba(14, 165, 233, 0.22) !important; color: var(--text-primary); box-shadow: var(--shadow-card); } [data-theme="light"] .mcq-option, [data-theme="light"] textarea { background: rgba(255, 255, 255, 0.90) !important; border-color: rgba(139, 152, 202, 0.25) !important; color: var(--text-primary) !important; } /* ── 19. Legal pages ─────────────────────────────────────────────────── */ [data-theme="light"] .legal-container { background: rgba(255, 255, 255, 0.86) !important; border-color: rgba(139, 152, 202, 0.22) !important; box-shadow: var(--shadow-lg) !important; } [data-theme="light"] .legal-container h2 { color: var(--text-primary) !important; border-bottom-color: rgba(139, 152, 202, 0.20) !important; } [data-theme="light"] .legal-container p, [data-theme="light"] .legal-container ul { color: var(--text-secondary) !important; } [data-theme="light"] .legal-container code, [data-theme="light"] .legal-container [style*="monospace"] { background: rgba(102, 126, 234, 0.08) !important; border-color: rgba(139, 152, 202, 0.18) !important; } @media (max-width: 560px) { .theme-toggle-floating { top: calc(46px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); width: 34px; height: 34px; } } /* ── Formula Hub sidebar title — light mode fix ────────────────────────── */ /* Tailwind "from-white" makes the gradient start invisible on light bg. */ /* Override with a dark-start gradient that matches each subject's accent. */ [data-theme="light"] .sidebar h1[class*="from-white"] { background: linear-gradient(to right, #1a1d3a 0%, #e91e8c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Math (cyan) variant */ [data-theme="light"] .sidebar h1[class*="to-cyan-400"] { background: linear-gradient(to right, #1a1d3a 0%, #0ea5e9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── 20. Chat container (light) ──────────────────────────────────────── */ [data-theme="light"] .chat-container { background: rgba(255, 255, 255, 0.18); } /* ── 21. Chat readability token lock ────────────────────────────────── */ [data-theme="light"] .user-message, [data-theme="light"] .ai-message { color: var(--chat-text) !important; } [data-theme="light"] .user-message { background: var(--chat-user-bg) !important; border-color: var(--chat-user-border) !important; } [data-theme="light"] .ai-message { background: var(--chat-ai-bg) !important; border-color: var(--chat-ai-border) !important; } [data-theme="light"] .ai-message .content, [data-theme="light"] .ai-message .content p, [data-theme="light"] .ai-message .content li, [data-theme="light"] .ai-message .content em, [data-theme="light"] .ai-message .content i, [data-theme="light"] .user-message .content { background: transparent !important; color: var(--chat-text) !important; } [data-theme="light"] .ai-message .content strong, [data-theme="light"] .ai-message .content b, [data-theme="light"] .ai-message .content .key-answer { color: var(--chat-strong) !important; } [data-theme="light"] .ai-message .content h1, [data-theme="light"] .ai-message .content h2, [data-theme="light"] .ai-message .content h3, [data-theme="light"] .ai-message .content h4 { color: var(--text-primary) !important; } [data-theme="light"] .ai-message .content blockquote { color: var(--chat-muted) !important; } [data-theme="light"] .ai-message mjx-container, [data-theme="light"] mjx-container { color: #1f2a44 !important; } [data-theme="light"] .ai-message mjx-container *, [data-theme="light"] mjx-container * { color: inherit !important; } [data-theme="light"] .ai-message mjx-container[display="true"], [data-theme="light"] .ai-message mjx-container[display="block"], [data-theme="light"] mjx-container[jax="CHTML"][display="true"], [data-theme="light"] mjx-container[display="block"] { background: rgba(99, 102, 241, 0.10) !important; border-left-color: #4f46e5 !important; box-shadow: 0 8px 22px rgba(79, 70, 229, 0.10) !important; } [data-theme="light"] .user-message mjx-container { color: #334155 !important; }