/* ═══════════════════════════════════════════════════════════════════════════ LION CITY SCHOLAR AI — shared.css Load order in : 1. ← sync, sets data-theme before paint 2. 3. 4. ← after Tailwind to override 5. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. DARK THEME — Apple iOS / macOS style ─────────────────────────────── */ [data-theme="dark"] { --bg: #000000; --bg2: #1c1c1e; --card: rgba(28,28,30,.92); --card-solid: #1c1c1e; --border: rgba(84,84,88,.36); --neon: #0a84ff; --neon-dim: rgba(10,132,255,.15); --nav-bg: rgba(28,28,30,.94); --input-bg: rgba(44,44,46,.6); --text-1: #f5f5f7; /* primary — Apple macOS dark primary */ --text-2: #e5e5e7; /* secondary — clearly readable on dark */ --text-3: #aeaeb2; /* tertiary — visible label text */ --text-inv: #000000; --text-muted-1: #98989d; /* muted labels — still readable */ --text-muted-2: #7c7c80; /* subtle decorative — visible */ --layer-1: rgba(0,0,0,.85); --layer-2: rgba(28,28,30,.95); --layer-3: rgba(44,44,46,.9); --shadow: 0 4px 24px rgba(0,0,0,.5); --scrollbar: #0a84ff; /* Semantic colours — iOS system palette */ --clr-success: #30d158; --clr-success-dim: rgba(48,209,88,.15); --clr-warning: #ffd60a; --clr-warning-dim: rgba(255,214,10,.15); --clr-danger: #ff453a; --clr-danger-dim: rgba(255,69,58,.12); --clr-info: #bf5af2; --clr-info-dim: rgba(191,90,242,.12); /* Subject accent colours — iOS system palette */ --clr-math: #0a84ff; --clr-english: #bf5af2; --clr-science: #30d158; --clr-chinese: #ff9f0a; /* Apple design system tokens */ --card-elevated: rgba(44,44,46,.65); --shadow-card: 0 0.5px 0 rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.2); --shadow-soft: 0 2px 16px rgba(0,0,0,.3); --shadow-modal: 0 16px 68px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.3); --glass-bg: rgba(28,28,30,.72); --glass-border: rgba(255,255,255,.08); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; } /* ── 2. LIGHT THEME — Apple iOS / macOS style ─────────────────────────────── */ [data-theme="light"] { --bg: #f2f2f7; --bg2: #ffffff; --card: #ffffff; --card-solid: #ffffff; --border: rgba(60,60,67,.12); --neon: #007aff; --neon-dim: rgba(0,122,255,.08); --nav-bg: rgba(249,249,249,.94); --input-bg: #e5e5ea; --text-1: #1d1d1f; /* primary — Apple macOS light primary */ --text-2: #3c3c43; /* secondary — clearly readable on white */ --text-3: #6e6e73; /* tertiary — visible label text */ --text-inv: #ffffff; --text-muted-1: #86868b; /* muted labels — readable on white */ --text-muted-2: #aeaeb2; /* subtle decorative — faint but visible */ --layer-1: rgba(255,255,255,.95); --layer-2: rgba(255,255,255,.97); --layer-3: rgba(242,242,247,.95); --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --scrollbar: #007aff; /* Semantic colours — iOS system palette */ --clr-success: #248a3d; --clr-success-dim: rgba(52,199,89,.1); --clr-warning: #c93400; --clr-warning-dim: rgba(255,149,0,.1); --clr-danger: #d70015; --clr-danger-dim: rgba(255,59,48,.08); --clr-info: #8944ab; --clr-info-dim: rgba(175,82,222,.08); /* Subject accent colours — iOS system palette */ --clr-math: #007aff; --clr-english: #8944ab; --clr-science: #248a3d; --clr-chinese: #c93400; /* Apple design system tokens */ --card-elevated: #ffffff; --shadow-card: 0 0.5px 0 rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06); --shadow-soft: 0 1px 4px rgba(0,0,0,.06); --shadow-modal: 0 12px 48px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08); --glass-bg: rgba(255,255,255,.82); --glass-border: rgba(0,0,0,.06); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; } /* ── 3. GLOBAL RESETS ─────────────────────────────────────────────────────── */ body { background: var(--bg) !important; color: var(--text-1) !important; transition: background .25s ease, color .25s ease; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; } /* Smooth theme transitions — scoped to elements that actually change */ body, nav, footer, main, section, .card, .glass-card, .step-card, .ph-card, .ai-stat, .trust-item, .btn-primary, .btn-ghost, .hero-badge, .subj-pill, .app-header, .bottom-nav, .tab-btn, .tab-view, .pf-showcase, .pf-feature-card, .ai-terminal, .ai-demo-card { transition: background-color .2s ease, border-color .2s ease, color .15s ease; } /* prefers-reduced-motion: disable decorative animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── 4. THEME TOGGLE BUTTON ───────────────────────────────────────────────── */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--card); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; padding: 0; line-height: 1; } .theme-toggle:hover { border-color: var(--neon); box-shadow: 0 0 10px var(--neon-dim); } [data-theme="light"] .theme-toggle { background: #ffffff; border-color: var(--border); } /* ── 5. LIGHT THEME — NAV / HEADER OVERRIDES ──────────────────────────────── */ [data-theme="light"] .top-bar, [data-theme="light"] .exam-header, [data-theme="light"] .app-header { background: var(--nav-bg) !important; border-color: var(--border) !important; } [data-theme="light"] .bottom-nav { background: rgba(249,249,249,.94) !important; border-top-color: var(--border) !important; } /* ── 6. LIGHT THEME — CARD / GLASS OVERRIDES ──────────────────────────────── */ [data-theme="light"] .glass { background: #ffffff !important; border: 1px solid rgba(60,60,67,.12) !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; border-radius: 24px !important; } [data-theme="light"] .exam-card { background: #ffffff !important; border: 1px solid rgba(60,60,67,.12) !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; border-radius: 24px !important; } [data-theme="light"] .exam-card:hover { border-color: rgba(60,60,67,.18) !important; box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; } [data-theme="light"] .menu-row { background: #ffffff !important; border: 1px solid rgba(60,60,67,.12) !important; border-radius: 24px !important; } [data-theme="light"] .question-panel { background: #ffffff !important; border-color: var(--border) !important; } /* ── 7. LIGHT THEME — FILTER / BUTTON OVERRIDES ───────────────────────────── */ [data-theme="light"] .filter-btn { color: var(--text-3) !important; border-color: rgba(0,0,0,.12) !important; } [data-theme="light"] .filter-btn.active { color: var(--neon) !important; border-color: var(--neon) !important; background: var(--neon-dim) !important; } [data-theme="light"] .grade-btn { border-color: rgba(0,0,0,.12) !important; color: var(--text-3) !important; } [data-theme="light"] .grade-btn.selected { border-color: var(--neon) !important; color: var(--neon) !important; background: var(--neon-dim) !important; } /* ── 8. LIGHT THEME — INPUT OVERRIDES ─────────────────────────────────────── */ [data-theme="light"] .input { background: var(--input-bg) !important; border-color: var(--border) !important; color: var(--text-1) !important; } [data-theme="light"] .input::placeholder { color: var(--text-muted-1) !important; } [data-theme="light"] .answer-input { background: var(--bg) !important; border-color: var(--border) !important; color: var(--text-1) !important; } [data-theme="light"] .answer-input::placeholder { color: var(--text-muted-1) !important; } /* ── 9. LIGHT THEME — MCQ OPTION OVERRIDES ────────────────────────────────── */ [data-theme="light"] .mcq-option { background: #f8fafc !important; border-color: rgba(0,0,0,.1) !important; } [data-theme="light"] .mcq-option:hover { background: #f3f4f6 !important; border-color: #94a3b8 !important; } [data-theme="light"] .mcq-option.selected { background: rgba(0,122,255,.06) !important; border-color: var(--neon) !important; } [data-theme="light"] .option-letter { background: rgba(0,0,0,.05) !important; color: var(--text-3) !important; } /* ── 10. LIGHT THEME — SCORE / PROGRESS BARS ──────────────────────────────── */ [data-theme="light"] .score-bar, [data-theme="light"] .prog-bar { background: rgba(0,0,0,.07) !important; } /* ── 11. LIGHT THEME — UPLOAD ZONE ────────────────────────────────────────── */ [data-theme="light"] .upload-zone { border-color: var(--border) !important; } [data-theme="light"] .upload-zone.drag-over { border-color: var(--neon) !important; background: rgba(0,122,255,.06) !important; } /* ── 12. LIGHT THEME — SOCIAL LOGIN BUTTONS ───────────────────────────────── */ [data-theme="light"] .social { background: #f8fafc !important; border-color: rgba(0,0,0,.12) !important; color: var(--text-2) !important; } /* ── 13. LIGHT THEME — MISC TEXT ──────────────────────────────────────────── */ [data-theme="light"] .tab-btn { color: var(--text-muted-1) !important; } [data-theme="light"] .stat-chip { color: var(--text-muted-1) !important; } [data-theme="light"] .gep-badge { background: rgba(52,199,89,.1) !important; border-color: rgba(52,199,89,.2) !important; color: #248a3d !important; } [data-theme="light"] .timer-badge { background: rgba(0,122,255,.06) !important; border-color: rgba(0,122,255,.2) !important; color: var(--neon) !important; } [data-theme="light"] .hint-box { background: rgba(255,149,0,.08) !important; border-color: rgba(255,149,0,.2) !important; } [data-theme="light"] .explanation-box { background: var(--bg) !important; border-color: var(--border) !important; color: var(--text-2) !important; } [data-theme="light"] .hint-box p { color: #c93400 !important; } [data-theme="light"] .role-box { background: var(--bg) !important; border-color: var(--border) !important; color: var(--text-3) !important; } [data-theme="light"] .role-box.selected { background: var(--neon-dim) !important; border-color: var(--neon) !important; color: var(--neon) !important; } /* ── 14. LIGHT THEME — GRID BACKGROUNDS ───────────────────────────────────── */ [data-theme="light"] .grid-bg { background-image: none !important; background-color: #ffffff !important; } [data-theme="light"] .hero-glow::before { background: none !important; } /* ── 15. LIGHT THEME — STEP / PREVIEW CARDS (index.html) ─────────────────── */ [data-theme="light"] .step-card { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 1px 3px rgba(0,0,0,.04) !important; } [data-theme="light"] .ai-card { animation: none !important; box-shadow: 0 1px 3px rgba(0,0,0,.04) !important; border-color: var(--neon) !important; } [data-theme="light"] .preview-card { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 1px 3px rgba(0,0,0,.04) !important; } [data-theme="light"] .subj-pill { background: var(--bg) !important; border-color: var(--border) !important; color: var(--text-2) !important; } /* ── 15b. LIGHT THEME — mistake-bank.html ─────────────────────────────────── */ /* Glass text — prevent white-on-white (exclude buttons with coloured bg) */ [data-theme="light"] .glass .text-white:not(.btn-neon), [data-theme="light"] .glass .nunito.font-bold:not(.btn-neon) { color: var(--text-1) !important; } [data-theme="light"] .glass .text-slate-300 { color: var(--text-2) !important; } [data-theme="light"] .glass .text-slate-400 { color: var(--text-3) !important; } [data-theme="light"] .glass .text-slate-500, [data-theme="light"] .glass .text-slate-600 { color: var(--text-muted-1) !important; } /* Filter bar active state */ [data-theme="light"] .filter-btn.shrink-0 { border-color: rgba(0,0,0,.12) !important; color: var(--text-3) !important; } [data-theme="light"] .filter-btn.shrink-0.active-filter, [data-theme="light"] #filterAll.border-cyan-600 { border-color: var(--neon) !important; color: var(--neon) !important; background: var(--neon-dim) !important; } /* Subject tabs */ [data-theme="light"] .stab:not(.active-stab) { color: var(--text-3) !important; border-color: rgba(0,0,0,.12) !important; } /* Modal backdrop */ [data-theme="light"] .modal-bg { background: rgba(8,20,40,.55) !important; } /* Badge pills inside glass in light mode */ [data-theme="light"] .glass .badge-pending { background: rgba(255,149,0,.08) !important; } [data-theme="light"] .glass .badge-analyzed { background: rgba(0,122,255,.08) !important; } [data-theme="light"] .glass .badge-mastered { background: rgba(52,199,89,.08) !important; } /* Concept chips inside the AI analysis modal */ .concept-chip { display: inline-block; font-size: .72rem; padding: 3px 12px; border-radius: 9999px; background: rgba(10,132,255,.12); color: #0a84ff; border: 1px solid rgba(10,132,255,.25); font-family: 'Nunito', sans-serif; font-weight: 700; } [data-theme="light"] .concept-chip { background: rgba(0,122,255,.08); color: #007aff; border: 1px solid rgba(0,122,255,.2); } /* ── Analysis modal — comprehensive light-mode colour overrides ──────────── */ /* Amber / yellow (medium badge, pending status) */ [data-theme="light"] #mb-modalContent .text-amber-400, [data-theme="light"] #mb-modalContent .text-yellow-400 { color: #c93400 !important; } [data-theme="light"] #mb-modalContent .bg-amber-900\/40 { background: rgba(255,149,0,.08) !important; } [data-theme="light"] #mb-modalContent .border-amber-800 { border-color: rgba(255,149,0,.25) !important; } /* Cyan → Blue (section icons, step numbers, analyzed status) */ [data-theme="light"] #mb-modalContent .text-cyan-400, [data-theme="light"] #mb-modalContent .text-cyan-500, [data-theme="light"] #mb-modalContent .text-cyan-600 { color: #007aff !important; } [data-theme="light"] #mb-modalContent .bg-cyan-900\/40, [data-theme="light"] #mb-modalContent .bg-cyan-900\/50 { background: rgba(0,122,255,.08) !important; } [data-theme="light"] #mb-modalContent .border-cyan-700, [data-theme="light"] #mb-modalContent .border-cyan-800 { border-color: rgba(0,122,255,.2) !important; } /* Emerald → Green (mastered status, easy badge) */ [data-theme="light"] #mb-modalContent .text-emerald-400 { color: #248a3d !important; } [data-theme="light"] #mb-modalContent .bg-emerald-900\/40 { background: rgba(52,199,89,.08) !important; } [data-theme="light"] #mb-modalContent .border-emerald-700, [data-theme="light"] #mb-modalContent .border-emerald-800 { border-color: rgba(52,199,89,.25) !important; } /* Red (hard badge, What Went Wrong header) */ [data-theme="light"] #mb-modalContent .text-red-400, [data-theme="light"] #mb-modalContent .text-red-500 { color: #d70015 !important; } [data-theme="light"] #mb-modalContent .bg-red-900\/40 { background: rgba(255,59,48,.08) !important; } [data-theme="light"] #mb-modalContent .border-red-900 { border-color: rgba(255,59,48,.2) !important; } /* Violet → Purple (encouragement card) */ [data-theme="light"] #mb-modalContent .text-violet-300 { color: #8944ab !important; } [data-theme="light"] #mb-modalContent .bg-violet-900\/20 { background: rgba(175,82,222,.07) !important; } [data-theme="light"] #mb-modalContent .border-violet-800\/50 { border-color: rgba(175,82,222,.2) !important; } /* Slate utility text inside modal */ [data-theme="light"] #mb-modalContent .text-slate-500 { color: var(--text-muted-1) !important; } /* ── 15c. LIGHT THEME — dashboard.html ─────────────────────────────────────── */ [data-theme="light"] .hero-card { background: linear-gradient(135deg, rgba(0,122,255,.04) 0%, rgba(175,82,222,.04) 100%) !important; border-color: var(--border) !important; } [data-theme="light"] .hero-card h1 { color: var(--text-1) !important; } [data-theme="light"] .stat-pill { background: var(--card) !important; border-color: var(--border) !important; } [data-theme="light"] .subject-card { background: #ffffff !important; border: 1px solid rgba(60,60,67,.12) !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; border-radius: 24px !important; } [data-theme="light"] .card { color: var(--text-1) !important; } [data-theme="light"] .menu-row { color: var(--text-1) !important; } [data-theme="light"] .app-shell { background: #ffffff !important; } /* ── 16. RESPONSIVE — UTILITY CLASSES ─────────────────────────────────────── */ @media (max-width: 767px) { .hide-phone { display: none !important; } .show-phone { display: block !important; } .show-phone-flex { display: flex !important; } } @media (min-width: 768px) and (max-width: 1279px) { .hide-tablet { display: none !important; } .show-tablet { display: block !important; } .show-tablet-flex { display: flex !important; } } @media (min-width: 1280px) { .hide-laptop { display: none !important; } .show-laptop { display: block !important; } .show-laptop-flex { display: flex !important; } } /* ── 17. RESPONSIVE — index.html ──────────────────────────────────────────── */ @media (min-width: 768px) and (max-width: 1279px) { .index-hero-container { max-width: 700px !important; } } @media (min-width: 1280px) { .index-hero-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; max-width: 1120px; margin: 0 auto; text-align: left; } .index-hero-section .hero-buttons { justify-content: flex-start !important; } .index-hero-section .hero-pills { justify-content: flex-start !important; } .index-trust-grid { grid-template-columns: repeat(4, 1fr) !important; } } /* ── 18. RESPONSIVE — login.html ──────────────────────────────────────────── */ @media (min-width: 768px) and (max-width: 1279px) { .left-panel { width: 44% !important; padding: 36px 40px !important; } } @media (min-width: 1280px) { .left-panel { width: 40% !important; padding: 56px 64px !important; } } /* ── 19. RESPONSIVE — dashboard.html ─────────────────────────────────────── */ /* Desktop sidebar — hidden by default, shown at ≥1280px */ .desk-sidebar { display: none; } .desk-nav-btn { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 13px; border: none; background: transparent; color: var(--text-2); font-size: .95rem; font-family: 'Nunito', sans-serif; font-weight: 700; cursor: pointer; text-align: left; width: 100%; text-decoration: none; transition: background .15s, color .15s; } .desk-nav-btn:hover { background: var(--neon-dim); color: var(--neon); } .desk-nav-btn.active { background: var(--neon-dim); color: var(--neon); } [data-theme="light"] .desk-nav-btn { color: var(--text-2); } [data-theme="light"] .desk-nav-btn:hover, [data-theme="light"] .desk-nav-btn.active { color: var(--neon); background: var(--neon-dim); } @media (min-width: 768px) and (max-width: 1279px) { .app-inner { max-width: 92vw !important; margin-left: auto !important; margin-right: auto !important; } .bottom-nav { max-width: 92vw !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; transform: none !important; } #subjectCards { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1280px) { /* Show left sidebar on desktop */ .desk-sidebar { display: flex !important; flex-direction: column; width: 220px; position: fixed; left: 0; top: 0; bottom: 0; background: var(--nav-bg); border-right: 1px solid var(--border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 45; padding: 0 12px 20px; gap: 2px; overflow-y: auto; } /* Offset content behind sidebar */ .app-shell > .app-inner { margin-left: 220px !important; max-width: calc(100vw - 220px) !important; } /* Hide bottom nav on desktop */ .app-shell > .bottom-nav { display: none !important; } .tab-view { padding-bottom: 40px !important; padding-left: 28px !important; padding-right: 28px !important; } /* 3-col subjects grid on desktop */ #subjectCards { grid-template-columns: repeat(3, 1fr) !important; } } /* ── 20. RESPONSIVE — exams.html ──────────────────────────────────────────── */ @media (min-width: 768px) and (max-width: 1279px) { .exams-content { max-width: 720px !important; } #paperGrid { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1280px) { .exams-content { max-width: 1120px !important; } #paperGrid { grid-template-columns: repeat(3, 1fr) !important; } .exams-filters { display: flex !important; gap: 28px !important; align-items: flex-start !important; } .exams-filters > div { flex: 1 !important; } } /* ── 21. RESPONSIVE — exam-take.html ─────────────────────────────────────── */ @media (min-width: 768px) and (max-width: 1279px) { .exam-body-flex { flex-direction: row !important; align-items: flex-start !important; } #qNavPanel { width: 210px !important; flex-shrink: 0 !important; margin-right: 20px !important; margin-bottom: 0 !important; position: sticky !important; top: 76px !important; align-self: flex-start !important; } .mcq-option { padding: 16px 18px !important; font-size: .95rem !important; } } @media (min-width: 1280px) { .exam-body-flex { flex-direction: row !important; align-items: flex-start !important; } #qNavPanel { width: 230px !important; flex-shrink: 0 !important; margin-right: 32px !important; margin-bottom: 0 !important; position: sticky !important; top: 76px !important; align-self: flex-start !important; } #questionArea { max-width: 720px !important; } .mcq-option { padding: 18px 22px !important; font-size: 1rem !important; } } /* ── 23. LIGHT THEME — ADDITIONAL POLISH ──────────────────────────────────── */ /* Hero card glow blob — remove in light mode */ [data-theme="light"] .hero-card::before { background: none !important; } /* Spinner — dark border in light mode */ [data-theme="light"] .spinner { border-color: rgba(0,0,0,.12) !important; border-top-color: var(--neon) !important; } /* Upload FAB / centre tab button — soften glow */ [data-theme="light"] .tab-upload-btn { box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.08) !important; } /* Neon text glow — remove halo in light mode */ [data-theme="light"] .neon-text { text-shadow: none !important; color: var(--neon) !important; } /* btn-neon — solid Apple blue in light */ [data-theme="light"] .btn-neon { background: #007aff !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 2px 8px rgba(0,0,0,.1) !important; } [data-theme="light"] .btn-neon:hover { background: #0071e3 !important; box-shadow: 0 4px 14px rgba(0,0,0,.15) !important; } /* Glass-hover border — ensure visible in light */ [data-theme="light"] .glass-hover:hover { border-color: #94a3b8 !important; } /* Badge text + borders */ [data-theme="light"] .badge-analyzed { color: #007aff !important; border-color: rgba(0,122,255,.25) !important; } [data-theme="light"] .badge-pending { color: #c93400 !important; border-color: rgba(255,149,0,.3) !important; } [data-theme="light"] .badge-mastered { color: #248a3d !important; border-color: rgba(52,199,89,.3) !important; } /* Step connector + step number chips */ [data-theme="light"] .step-item { border-left-color: var(--border) !important; } [data-theme="light"] .step-num { background: rgba(0,122,255,.06) !important; border-color: rgba(0,122,255,.2) !important; color: #007aff !important; } /* Exam & subject card colour backgrounds — light tints */ [data-theme="light"] .bg-math { background: rgba(0,122,255,.06) !important; } [data-theme="light"] .bg-english { background: rgba(175,82,222,.06) !important; } [data-theme="light"] .bg-science { background: rgba(52,199,89,.06) !important; } [data-theme="light"] .bg-chinese { background: rgba(255,149,0,.06) !important; } /* Exam & subject card colour text — accessible in light */ [data-theme="light"] .col-math { color: #007aff !important; } [data-theme="light"] .col-english { color: #8944ab !important; } [data-theme="light"] .col-science { color: #248a3d !important; } [data-theme="light"] .col-chinese { color: #c93400 !important; } /* Exam-take — current Q nav button */ [data-theme="light"] .q-nav-btn.current { color: #007aff !important; background: rgba(0,122,255,.08) !important; border-color: #007aff !important; } [data-theme="light"] .q-nav-btn.answered { border-color: rgba(0,122,255,.25) !important; background: rgba(0,122,255,.06) !important; } /* Modal pre text */ [data-theme="light"] #mb-modalContent .text-cyan-300, [data-theme="light"] #mb-modalContent pre.text-cyan-300 { color: #007aff !important; } /* GEP paper card tinted bg classes */ [data-theme="light"] .bg-violet-900\/15 { background-color: rgba(175,82,222,.06) !important; } [data-theme="light"] .bg-amber-900\/15 { background-color: rgba(255,149,0,.06) !important; } [data-theme="light"] .bg-cyan-900\/15 { background-color: rgba(0,122,255,.06) !important; } [data-theme="light"] .bg-emerald-900\/15{ background-color: rgba(52,199,89,.06) !important; } /* Mistake-bank filter tabs — inactive border too dark */ [data-theme="light"] .stab { border-color: rgba(0,0,0,.12) !important; color: var(--text-3) !important; background: transparent !important; } [data-theme="light"] .stab.active-stab { border-color: var(--neon) !important; color: var(--neon) !important; background: var(--neon-dim) !important; } /* Status badges inside JS-rendered cards (mistake-bank subject tabs) */ [data-theme="light"] .border-slate-700 { border-color: var(--border) !important; } [data-theme="light"] .text-slate-400 { color: var(--text-3) !important; } /* Per-question correct/wrong review rows in exam results */ [data-theme="light"] .review-correct { background: rgba(52,199,89,.06) !important; border-color: rgba(52,199,89,.2) !important; } [data-theme="light"] .review-wrong { background: rgba(255,59,48,.06) !important; border-color: rgba(255,59,48,.2) !important; } /* ── 24. LIGHT THEME — login.html ─────────────────────────────────────────── */ [data-theme="light"] .alert.err { background: rgba(255,59,48,.06) !important; border-color: rgba(255,59,48,.15) !important; color: #d70015 !important; } [data-theme="light"] .alert.ok { background: rgba(52,199,89,.06) !important; border-color: rgba(52,199,89,.15) !important; color: #248a3d !important; } [data-theme="light"] .feature-icon { background: rgba(0,122,255,.06) !important; border-color: rgba(0,122,255,.12) !important; } [data-theme="light"] .left-panel { background-image: none !important; background: var(--bg) !important; } [data-theme="light"] .right-panel { background: #ffffff !important; } [data-theme="light"] .role-lbl input:checked + .role-box { border-color: var(--neon) !important; background: rgba(0,122,255,.06) !important; color: var(--neon) !important; box-shadow: 0 0 0 1px rgba(0,122,255,.1) !important; } [data-theme="light"] .social { background: #ffffff !important; border-color: var(--border) !important; } [data-theme="light"] .social:hover { background: var(--bg) !important; border-color: var(--neon) !important; } /* ── 25. LIGHT THEME — exam-take.html additional ──────────────────────────── */ [data-theme="light"] .top-bar { background: rgba(249,249,249,.94) !important; border-bottom-color: var(--border) !important; } [data-theme="light"] .exam-header { background: rgba(249,249,249,.94) !important; border-bottom-color: var(--border) !important; } /* Q-nav buttons — readable colours in light */ [data-theme="light"] .q-nav-btn { border-color: var(--border) !important; color: var(--text-3) !important; } [data-theme="light"] .q-nav-btn.answered { border-color: rgba(0,122,255,.25) !important; background: rgba(0,122,255,.06) !important; color: #007aff !important; } [data-theme="light"] .q-nav-btn.current { border-color: #007aff !important; background: rgba(0,122,255,.08) !important; color: #007aff !important; } [data-theme="light"] .q-nav-btn.correct { border-color: rgba(52,199,89,.3) !important; background: rgba(52,199,89,.06) !important; color: #248a3d !important; } [data-theme="light"] .q-nav-btn.wrong { border-color: rgba(255,59,48,.3) !important; background: rgba(255,59,48,.06) !important; color: #d70015 !important; } /* Timer badge states in light mode */ [data-theme="light"] .timer-badge { background: rgba(0,122,255,.06) !important; border-color: rgba(0,122,255,.15) !important; color: #007aff !important; } [data-theme="light"] .timer-badge.warn { background: rgba(255,149,0,.08) !important; border-color: rgba(255,149,0,.2) !important; color: #c93400 !important; } [data-theme="light"] .timer-badge.urgent { background: rgba(255,59,48,.06) !important; border-color: rgba(255,59,48,.2) !important; color: #d70015 !important; } /* MCQ selected state — ensure text readable */ [data-theme="light"] .mcq-option.selected { background: rgba(0,122,255,.06) !important; border-color: var(--neon) !important; } [data-theme="light"] .mcq-option.correct { background: rgba(52,199,89,.06) !important; border-color: rgba(52,199,89,.25) !important; } [data-theme="light"] .mcq-option.wrong { background: rgba(255,59,48,.05) !important; border-color: rgba(255,59,48,.2) !important; } /* Score pill colours */ [data-theme="light"] .score-distinction { color: #248a3d !important; } [data-theme="light"] .score-merit { color: #007aff !important; } [data-theme="light"] .score-pass { color: #c93400 !important; } [data-theme="light"] .score-fail { color: #d70015 !important; } /* GEP badge in dashboard subjects */ [data-theme="light"] .badge[style*="#34d399"], [data-theme="light"] .badge[style*="065f46"] { color: #248a3d !important; border-color: rgba(52,199,89,.25) !important; background: rgba(52,199,89,.06) !important; } /* ── 22. RESPONSIVE — mistake-bank.html ───────────────────────────────────── */ .mb-main-layout > *:last-child { min-width: 0; overflow: hidden; } @media (min-width: 768px) and (max-width: 1279px) { .mb-content { max-width: 880px !important; } .mb-main-layout { display: grid !important; grid-template-columns: 250px minmax(0, 1fr) !important; gap: 20px !important; align-items: flex-start !important; } .mb-sidebar { position: sticky !important; top: 80px !important; } } @media (min-width: 1280px) { .mb-content { max-width: 1120px !important; } .mb-main-layout { display: grid !important; grid-template-columns: 290px minmax(0, 1fr) !important; gap: 28px !important; align-items: flex-start !important; } .mb-sidebar { position: sticky !important; top: 80px !important; } } /* Pagination controls */ .mb-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px 0; } .mb-pg-btn { min-width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; cursor: pointer; border: 1px solid var(--border); color: var(--text-2); background: transparent; transition: all .15s; font-family: 'JetBrains Mono', monospace; } .mb-pg-btn:hover { background: var(--neon-dim); color: var(--neon); border-color: var(--neon); } .mb-pg-btn.active { background: var(--neon); color: #fff; border-color: var(--neon); } .mb-pg-btn:disabled { opacity: .3; cursor: default; pointer-events: none; } .mb-pg-info { font-size: .7rem; color: var(--text-muted-1); font-family: 'JetBrains Mono', monospace; padding: 0 8px; } /* ── 23b. LIGHT THEME — mistake-bank additional overrides ─────────────────── */ /* GEP section paper titles + bullet accents */ [data-theme="light"] #gepSection .text-violet-400 { color: #8944ab !important; } [data-theme="light"] #gepSection .text-cyan-400 { color: #007aff !important; } [data-theme="light"] #gepSection .text-amber-400 { color: #c93400 !important; } [data-theme="light"] #gepSection .text-emerald-400 { color: #248a3d !important; } /* Analysis modal — answer box */ [data-theme="light"] #mb-modalContent .bg-emerald-900\/20 { background: rgba(52,199,89,.06) !important; } [data-theme="light"] #mb-modalContent .border-emerald-800\/60 { border-color: rgba(52,199,89,.2) !important; } [data-theme="light"] #mb-modalContent .text-emerald-400 { color: #248a3d !important; } /* Analysis modal — missed button bg */ [data-theme="light"] #mb-modalContent .bg-red-900\/30 { background: rgba(255,59,48,.06) !important; } /* Analysis modal — practice section */ [data-theme="light"] #mb-modalContent .bg-violet-900\/40 { background: rgba(175,82,222,.08) !important; } [data-theme="light"] #mb-modalContent .border-violet-800 { border-color: rgba(175,82,222,.2) !important; } [data-theme="light"] #mb-modalContent .text-violet-400 { color: #8944ab !important; } /* Global: Tailwind cyan-400/300 — fix outside modal too (loadMore link, etc.) */ [data-theme="light"] .text-cyan-400 { color: var(--neon) !important; } [data-theme="light"] .text-cyan-300 { color: var(--neon) !important; } [data-theme="light"] .hover\:text-cyan-300:hover { color: var(--neon) !important; } /* ── 23c. LIGHT THEME — dashboard.html static elements ─────────────────────── */ /* Stat pills — Analysed and Mastered */ [data-theme="light"] #statAnalysed { color: #248a3d !important; } [data-theme="light"] #statMastered { color: #8944ab !important; } /* Dashboard header stat strip */ [data-theme="light"] #dashStatAnalysed { color: #007aff !important; } [data-theme="light"] #dashStatMastered { color: #8944ab !important; } [data-theme="light"] #dashStatTotal { color: #000000 !important; } /* Profile-setup card heading */ [data-theme="light"] #profileSetup .nunito { color: #c93400 !important; } /* Sign-out buttons */ [data-theme="light"] [onclick="logout()"] { color: #d70015 !important; } /* ── 23d. LIGHT THEME — exam-take.html ──────────────────────────────────────── */ /* Timer badge states */ [data-theme="light"] .timer-badge.warn { color: #c93400 !important; } [data-theme="light"] .timer-badge.urgent { color: #d70015 !important; } /* Q-nav button result states */ [data-theme="light"] .q-nav-btn.correct { color: #248a3d !important; border-color: rgba(52,199,89,.4) !important; background: rgba(52,199,89,.1) !important; } [data-theme="light"] .q-nav-btn.wrong { color: #d70015 !important; border-color: rgba(255,59,48,.35) !important; background: rgba(255,59,48,.06) !important; } /* MCQ option letter bubbles */ [data-theme="light"] .mcq-option.correct .option-letter { color: #248a3d !important; background: rgba(52,199,89,.15) !important; } [data-theme="light"] .mcq-option.wrong .option-letter { color: #d70015 !important; background: rgba(255,59,48,.12) !important; } [data-theme="light"] .mcq-option.show-correct .option-letter { color: #248a3d !important; background: rgba(52,199,89,.1) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SHARED ANIMATIONS — defined once, used across all pages ═══════════════════════════════════════════════════════════════════════ */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ═══════════════════════════════════════════════════════════════════════════ SHARED UTILITY CLASSES — avoids duplication across HTML files ═══════════════════════════════════════════════════════════════════════ */ .nunito { font-family: 'Nunito', sans-serif; } .mono { font-family: 'JetBrains Mono', monospace; } .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: 6px; } /* Screen-reader only — visible on focus for skip-links */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .sr-only:focus { position: static; width: auto; height: auto; padding: 8px 16px; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--neon); color: var(--text-inv); font-size: .875rem; font-weight: 600; border-radius: 6px; z-index: 9999; } /* ═══════════════════════════════════════════════════════════════════════════ PAGE-SPECIFIC STYLES — consolidated from inline