/* ============================================
   NAWAFID — Light Mode Theme (Redesigned)
   Premium Warm-Cream Design System
   ============================================ */

html.light-mode {
  --primary: #FAFAF8;
  --primary-light: #F5F5F0;
  --primary-mid: #EFEEEA;

  --brand-primary: #1D4ED8;
  --brand-secondary: #1E40AF;
  --brand-accent: #F59E08;
  --brand-glow: rgba(29, 78, 216, 0.08);
  --brand-glow-strong: rgba(29, 78, 216, 0.14);

  --accent-gold: #E8930A;
  --accent-amber: #D97706;
  --accent-glow: rgba(245, 158, 8, 0.1);

  --success: #059669;
  --danger: #DC2626;
  --info: #0284C7;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;

  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(15, 23, 42, 0.07);
  --glass-border-hover: rgba(29, 78, 216, 0.3);

  --shadow-sm: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 48px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.04);
  --shadow-gold: 0 4px 20px rgba(245, 158, 8, 0.12);
}

/* ── Body & Sections ── */
html.light-mode body {
  background-color: var(--primary);
}

html.light-mode .section-alt {
  background-color: var(--primary-light); /* #F5F5F0 */
  border-top: 1px solid rgba(15, 23, 42, 0.04);
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

/* ── Navbar ── */
html.light-mode .navbar {
  background: rgba(250, 250, 248, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
html.light-mode .navbar.scrolled {
  background: rgba(250, 250, 248, 0.95);
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06);
}

/* ── Cards ── */
html.light-mode .card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
}
html.light-mode .card:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(29, 78, 216, 0.2);
  box-shadow: 0 8px 24px rgba(29, 78, 216, 0.08);
}

/* ── Unit Card ── */
html.light-mode .unit-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
}
html.light-mode .unit-card:hover {
  background: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 8px 28px rgba(29, 78, 216, 0.1);
}
html.light-mode .unit-card__progress {
  background: rgba(15, 23, 42, 0.06);
}

/* ── Stat Card ── */
html.light-mode .stat-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
}
html.light-mode .stat-card:hover {
  border-color: var(--brand-primary);
  background: rgba(29, 78, 216, 0.04);
  box-shadow: 0 4px 16px rgba(29, 78, 216, 0.08);
}

/* ── Testimonial Card ── */
html.light-mode .testimonial-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
}
html.light-mode .testimonial-card:hover {
  background: #fff;
  border-color: rgba(29, 78, 216, 0.2);
  box-shadow: 0 8px 24px rgba(29, 78, 216, 0.08);
}

/* ── Form Elements ── */
html.light-mode .form-input {
  background: #fff;
  border: 1.5px solid rgba(15, 23, 42, 0.1);
  color: var(--text-primary);
}
html.light-mode .form-input:focus {
  border-color: var(--brand-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}
html.light-mode .form-input::placeholder {
  color: #94A3B8;
}

/* ── Progress Bar ── */
html.light-mode .progress {
  background: rgba(15, 23, 42, 0.06);
}

/* ── Footer ── */
html.light-mode .footer {
  background-color: var(--primary-mid); /* #EFEEEA */
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* ── Gradient Orbs (visible warm washes) ── */
html.light-mode .gradient-orb--gold {
  background: rgba(29, 78, 216, 0.06);
  filter: blur(140px);
}
html.light-mode .gradient-orb--blue {
  background: rgba(245, 158, 8, 0.05);
  filter: blur(140px);
}

/* ── Pattern Background ── */
html.light-mode .pattern-bg {
  opacity: 0.025;
}

/* ── Button Outlines ── */
html.light-mode .btn--outline {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(15, 23, 42, 0.1);
  color: var(--text-secondary);
}
html.light-mode .btn--outline:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: rgba(29, 78, 216, 0.06);
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.1);
}

/* ── Scrollbar ── */
html.light-mode ::-webkit-scrollbar-track { background: var(--primary); }
html.light-mode ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 9999px; }
html.light-mode ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── Badges ── */
html.light-mode .badge--gold {
  background: rgba(29, 78, 216, 0.08);
  color: var(--brand-primary);
  border: 1px solid rgba(29, 78, 216, 0.15);
}
html.light-mode .badge--success {
  background: rgba(5, 150, 105, 0.08);
  color: var(--success);
  border: 1px solid rgba(5, 150, 105, 0.15);
}
html.light-mode .badge--locked {
  background: rgba(15, 23, 42, 0.04);
  color: var(--text-muted);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* ── Mobile Menu ── */
html.light-mode .navbar__links {
  background: rgba(250, 250, 248, 0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* ── Theme Toggle ── */
html.light-mode .theme-toggle {
  background: rgba(245, 158, 8, 0.12);
  border-color: rgba(245, 158, 8, 0.25);
}
html.light-mode .theme-toggle:hover {
  border-color: var(--accent-gold);
  background: rgba(245, 158, 8, 0.2);
  box-shadow: 0 0 0 3px rgba(245, 158, 8, 0.08);
}
html.light-mode .theme-toggle::before { opacity: 0; }
html.light-mode .theme-toggle::after { opacity: 1; }
html.light-mode .theme-toggle__slider {
  left: calc(100% - 29px);
  background: var(--accent-gold);
  box-shadow: 0 2px 4px rgba(245, 158, 8, 0.3);
}

/* ============================================
   DASHBOARD — Light Mode
   ============================================ */
html.light-mode .dash-body { background: var(--primary); }
html.light-mode .sidebar {
  background: #fff;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 2px 0 12px rgba(15, 23, 42, 0.03);
}
html.light-mode .sidebar__top { border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
html.light-mode .sidebar__link:hover { background: rgba(29, 78, 216, 0.04); color: var(--text-primary); }
html.light-mode .sidebar__link.active { background: rgba(29, 78, 216, 0.08); color: var(--brand-primary); }
html.light-mode .sidebar__footer { border-top: 1px solid rgba(15, 23, 42, 0.06); }
html.light-mode .sidebar__avatar { color: #fff; }
html.light-mode .sidebar__close:hover { background: rgba(15, 23, 42, 0.04); }
html.light-mode .sidebar-overlay { background: rgba(15, 23, 42, 0.3); }

html.light-mode .dash-topbar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}
html.light-mode .dash-topbar__hamburger:hover { background: rgba(15, 23, 42, 0.04); }
html.light-mode .notif-dot { border-color: #fff; }

html.light-mode .continue-card {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.06) 0%, rgba(255, 255, 255, 0.8) 100%);
  border: 1px solid rgba(29, 78, 216, 0.12);
  box-shadow: var(--shadow-md);
}
html.light-mode .continue-card::before {
  background: radial-gradient(circle, rgba(29, 78, 216, 0.06) 0%, transparent 70%);
}
html.light-mode .continue-card__progress-bar { background: rgba(15, 23, 42, 0.06); }
html.light-mode .continue-card__arabic { color: rgba(29, 78, 216, 0.1); }

html.light-mode .dash-stat-card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
html.light-mode .dash-stat-card:hover {
  border-color: rgba(29, 78, 216, 0.15);
  box-shadow: var(--shadow-md);
}

html.light-mode .dash-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

html.light-mode .unit-prog-item {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
html.light-mode .unit-prog-item:hover { background: rgba(255, 255, 255, 0.8); }
html.light-mode .unit-prog-item__num {
  background: rgba(29, 78, 216, 0.06);
  border: 1px solid rgba(29, 78, 216, 0.1);
}
html.light-mode .unit-prog-item__bar { background: rgba(15, 23, 42, 0.06); }

html.light-mode .weekly-bar__fill { background: rgba(29, 78, 216, 0.15); }
html.light-mode .weekly-bar--today .weekly-bar__fill {
  background: linear-gradient(180deg, var(--brand-primary), #3B82F6);
}

html.light-mode .mini-lb-item:hover { background: rgba(29, 78, 216, 0.03); }
html.light-mode .mini-lb-item--me {
  background: rgba(29, 78, 216, 0.06);
  border: 1px solid rgba(29, 78, 216, 0.12);
}
html.light-mode .mini-lb-item__avatar {
  background: rgba(29, 78, 216, 0.06);
  border: 1px solid rgba(29, 78, 216, 0.1);
}

html.light-mode .exercise-mini-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
}
html.light-mode .exercise-mini-card:hover {
  background: #fff;
  border-color: rgba(29, 78, 216, 0.2);
  box-shadow: var(--shadow-md);
}

html.light-mode .xp-chip {
  background: rgba(29, 78, 216, 0.06);
  border: 1px solid rgba(29, 78, 216, 0.12);
}
html.light-mode .streak-chip {
  background: rgba(230, 126, 34, 0.06);
  border: 1px solid rgba(230, 126, 34, 0.12);
}

/* ============================================
   AUTH PAGE — Light Mode
   ============================================ */
html.light-mode .auth-panel--left {
  background: linear-gradient(145deg, #E8EEFB 0%, #F0F4FA 60%, #FAFAF8 100%);
}
html.light-mode .auth-panel--left::before { border: 1px solid rgba(29, 78, 216, 0.1); }
html.light-mode .auth-panel--left::after { border: 1px solid rgba(29, 78, 216, 0.08); }
html.light-mode .auth-panel__deco { color: rgba(29, 78, 216, 0.06); }
html.light-mode .auth-panel--right { background: var(--primary); }
html.light-mode .auth-feature__icon {
  background: rgba(29, 78, 216, 0.08);
  border: 1px solid rgba(29, 78, 216, 0.1);
}
html.light-mode .auth-tabs {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
html.light-mode .auth-tab.active { color: #fff; }
html.light-mode .password-strength__bar { background: rgba(15, 23, 42, 0.06); }
html.light-mode .auth-divider::before,
html.light-mode .auth-divider::after { background: rgba(15, 23, 42, 0.08); }
html.light-mode .form-select option { background: #fff; color: var(--text-primary); }
html.light-mode .checkbox-custom { border: 1.5px solid rgba(15, 23, 42, 0.15); }
html.light-mode .admin-mode-banner {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.06), rgba(245, 158, 8, 0.04));
  border: 1px solid rgba(29, 78, 216, 0.15);
}

/* ============================================
   EXERCISE PAGE — Light Mode
   ============================================ */
html.light-mode .ex-progress-bar { background: rgba(15, 23, 42, 0.06); }
html.light-mode .ex-timer {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
html.light-mode .ex-intro-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
}
html.light-mode .ex-type-btn {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(15, 23, 42, 0.08);
}
html.light-mode .ex-type-btn:hover {
  border-color: rgba(29, 78, 216, 0.25);
  background: rgba(29, 78, 216, 0.04);
}
html.light-mode .ex-type-btn.active {
  border-color: var(--brand-primary);
  background: rgba(29, 78, 216, 0.06);
}
html.light-mode .ex-q-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}
html.light-mode .ex-option {
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(15, 23, 42, 0.08);
}
html.light-mode .ex-option:hover:not(:disabled) {
  border-color: var(--brand-primary);
  background: rgba(29, 78, 216, 0.05);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.08);
}
html.light-mode .match-item {
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(15, 23, 42, 0.08);
}
html.light-mode .match-item:hover:not(:disabled) {
  border-color: rgba(29, 78, 216, 0.3);
  background: rgba(29, 78, 216, 0.04);
}
html.light-mode .match-item.selected {
  border-color: var(--brand-primary);
  background: rgba(29, 78, 216, 0.06);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08);
}
html.light-mode .ex-fill-input {
  background: #fff;
  border: 1.5px solid rgba(15, 23, 42, 0.1);
}
html.light-mode .ex-q-nav-item {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
html.light-mode .ex-q-nav-item.current {
  background: rgba(29, 78, 216, 0.08);
  box-shadow: 0 0 10px rgba(29, 78, 216, 0.15);
}
html.light-mode .ex-result-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-lg);
}
html.light-mode .ex-review-item--correct { background: rgba(5, 150, 105, 0.06); }
html.light-mode .ex-review-item--wrong { background: rgba(220, 38, 38, 0.05); }
html.light-mode .btn-play-audio {
  background: rgba(29, 78, 216, 0.06);
  border: 2px solid var(--brand-primary);
}

/* ============================================
   UNITS PAGE — Light Mode
   ============================================ */
html.light-mode .units-filter__btn {
  border: 1.5px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.5);
}
html.light-mode .units-filter__btn:hover {
  border-color: rgba(29, 78, 216, 0.2);
  background: rgba(29, 78, 216, 0.03);
}
html.light-mode .units-filter__btn.active {
  background: rgba(29, 78, 216, 0.08);
  border-color: var(--brand-primary);
}
html.light-mode .unit-card {
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
html.light-mode .unit-card::before {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.03) 0%, transparent 60%);
}
html.light-mode .unit-card:hover:not([aria-disabled="true"]) {
  border-color: rgba(29, 78, 216, 0.25);
  box-shadow: 0 12px 40px rgba(29, 78, 216, 0.08);
  background: #fff;
}
html.light-mode .unit-card--done { border-color: rgba(5, 150, 105, 0.15); }
html.light-mode .unit-card--done::before {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.04) 0%, transparent 60%);
}
html.light-mode .unit-card__progress-bar { background: rgba(15, 23, 42, 0.06); }
html.light-mode .unit-badge--num {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
html.light-mode .unit-badge--locked {
  background: rgba(15, 23, 42, 0.04);
}

/* ============================================
   LEADERBOARD — Light Mode
   ============================================ */
html.light-mode .lb-tab {
  border: 1.5px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.5);
}
html.light-mode .lb-tab:hover {
  border-color: rgba(29, 78, 216, 0.2);
}
html.light-mode .lb-tab.active {
  background: rgba(29, 78, 216, 0.08);
  border-color: var(--brand-primary);
}
html.light-mode .lb-podium__avatar {
  background: rgba(29, 78, 216, 0.06);
  border: 2.5px solid rgba(15, 23, 42, 0.08);
}
html.light-mode .lb-podium__slot--1 .lb-podium__avatar {
  border-color: var(--brand-primary);
  box-shadow: 0 0 20px rgba(29, 78, 216, 0.15);
}
html.light-mode .lb-podium__slot--1 .lb-podium__pillar {
  background: linear-gradient(180deg, rgba(29, 78, 216, 0.12), rgba(29, 78, 216, 0.04));
  border: 1px solid rgba(29, 78, 216, 0.15);
}
html.light-mode .lb-podium__slot--2 .lb-podium__pillar {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.04));
  border: 1px solid rgba(148, 163, 184, 0.15);
}
html.light-mode .lb-podium__slot--3 .lb-podium__pillar {
  background: linear-gradient(180deg, rgba(205, 127, 50, 0.1), rgba(205, 127, 50, 0.03));
  border: 1px solid rgba(205, 127, 50, 0.15);
}
html.light-mode .lb-my-rank__inner {
  background: rgba(29, 78, 216, 0.06);
  border: 1.5px solid rgba(29, 78, 216, 0.15);
}
html.light-mode .lb-my-rank__avatar {
  background: rgba(29, 78, 216, 0.08);
  border: 2px solid var(--brand-primary);
}
html.light-mode .lb-row {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(8px);
}
html.light-mode .lb-row:hover {
  border-color: rgba(29, 78, 216, 0.12);
  background: rgba(255, 255, 255, 0.85);
}
html.light-mode .lb-row--me {
  background: rgba(29, 78, 216, 0.06);
  border-color: rgba(29, 78, 216, 0.15);
}
html.light-mode .lb-row__avatar {
  background: rgba(15, 23, 42, 0.04);
  border: 1.5px solid rgba(15, 23, 42, 0.08);
}
html.light-mode .lb-row--me .lb-row__avatar {
  border-color: var(--brand-primary);
}
html.light-mode .lb-row__you {
  background: var(--brand-primary);
  color: #fff;
}

/* ============================================
   LESSON DETAIL — Light Mode
   ============================================ */
html.light-mode .lesson-hero {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.06), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
}
html.light-mode .lesson-chip {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
html.light-mode .lesson-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
html.light-mode .vocab-table th {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
html.light-mode .vocab-table td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}
html.light-mode .grammar-item {
  background: rgba(29, 78, 216, 0.03);
  border: 1px solid rgba(29, 78, 216, 0.06);
}
html.light-mode .lesson-step {
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.5);
}
html.light-mode .lesson-card--locked .lesson-card__num {
  background: rgba(15, 23, 42, 0.04);
}
html.light-mode .review-item {
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.5);
}
html.light-mode .review-item__status {
  background: rgba(5, 150, 105, 0.1);
}
html.light-mode .review-item--wrong .review-item__status {
  background: rgba(220, 38, 38, 0.08);
}

/* ============================================
   PROFILE — Light Mode
   ============================================ */
html.light-mode .profile-card__avatar {
  background: rgba(29, 78, 216, 0.08);
  border: 3px solid var(--brand-primary);
  box-shadow: 0 0 24px rgba(29, 78, 216, 0.12);
}
html.light-mode .profile-card__stats {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
html.light-mode .badge-item {
  border: 1.5px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.5);
}
html.light-mode .badge-item--earned {
  border-color: rgba(29, 78, 216, 0.15);
  background: rgba(29, 78, 216, 0.06);
}
html.light-mode .profile-form__group input {
  background: #fff;
  border: 1.5px solid rgba(15, 23, 42, 0.1);
}
html.light-mode .profile-form__group input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08);
}
html.light-mode .pstat {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
html.light-mode .profile-toast {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   UNIT TEST (UAU) — Light Mode
   ============================================ */
html.light-mode .uau-rules {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
html.light-mode .uau-diff-badge {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
html.light-mode .uau-result-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}
html.light-mode .uau-result-card--pass { border-color: rgba(5, 150, 105, 0.2); }
html.light-mode .uau-result-card--fail { border-color: rgba(220, 38, 38, 0.15); }
html.light-mode .uau-challenge-modal { background: rgba(15, 23, 42, 0.4); }
html.light-mode .uau-challenge-modal__box {
  background: #fff;
  border: 1px solid rgba(245, 158, 8, 0.2);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   RESPONSIVE — Light Mode Mobile Menu
   ============================================ */
@media (max-width: 768px) {
  html.light-mode .navbar__links {
    background: rgba(250, 250, 248, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  }
  html.light-mode .navbar__cta {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
  }
}