/* ══════════════════════════════════════════════════════════════════════
   JLEARN ONLINE 2.0 — LIGHT THEME LAYER
   Loaded LAST on every page (after dusk-theme.css). Every rule is scoped
   under html[data-theme="light"] so dark mode is untouched, and uses
   !important to outrank dusk-theme.css's unconditional dark forcing.

   The underlying stylesheets (styles.css, flawless-design.css) are
   light-first, so this layer mostly (a) remaps the shared tokens to light
   values and (b) mirrors each dusk-theme.css dark block with a light twin.
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   0. LIGHT TOKENS — remap every shared variable
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;

  /* Tailark Dusk tokens → light twins */
  --dusk-bg: #eef1f6;
  --dusk-bg-subtle: #e6eaf1;
  --dusk-surface: rgba(255, 255, 255, 0.88);
  --dusk-surface-hover: rgba(255, 255, 255, 1);
  --dusk-surface-solid: #ffffff;
  --dusk-border: rgba(15, 23, 42, 0.10);
  --dusk-border-strong: rgba(15, 23, 42, 0.18);
  --dusk-border-glow: rgba(79, 70, 229, 0.35);
  --dusk-text-primary: #0f172a;
  --dusk-text-secondary: #475569;
  --dusk-text-muted: #94a3b8;
  --dusk-indigo: #4f46e5;
  --dusk-indigo-glow: rgba(79, 70, 229, 0.14);
  --dusk-purple: #7c3aed;
  --dusk-cyan: #0891b2;
  --dusk-green: #059669;
  --dusk-gold: #d97706;
  --dusk-red: #dc2626;

  /* Legacy system variables → light defaults */
  --bg-color: #eef1f6;
  --bg: #eef1f6;
  --bg-secondary: #e2e8f0;
  --jl-bg: #eef1f6;
  --jl-bg-subtle: #e2e8f0;

  --surface-color: #ffffff;
  --surface: #ffffff;
  --surface-soft: rgba(15, 23, 42, 0.04);
  --surface-elevated: #ffffff;
  --jl-surface: #ffffff;
  --jl-surface-raised: #ffffff;
  --jl-surface-glass: rgba(255, 255, 255, 0.90);

  --border-color: #e2e8f0;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --jl-border: #e2e8f0;
  --jl-border-subtle: #f1f5f9;
  --jl-border-strong: #cbd5e1;
  --jl-border-highlight: rgba(79, 70, 229, 0.40);

  --text-color: #0f172a;
  --text: #0f172a;
  --text-main: #0f172a;
  --jl-text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --muted: #94a3b8;
  --jl-text-secondary: #475569;
  --jl-text-muted: #94a3b8;

  --primary-color: #4f46e5;
  --primary: #4f46e5;
  --jl-primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #eef2ff;
  --secondary: #0891b2;
  --accent: #7c3aed;

  --hover-bg: #f1f5f9;

  --lp-bg: #eef1f6;
  --lp-bg-2: #e2e8f0;
  --lp-ink: #0f172a;
  --lp-ink-2: #475569;
  --lp-ink-3: #94a3b8;
  --lp-line: #e2e8f0;
  --lp-card: #ffffff;

  /* Single-dash generic tokens (credit-store, admin page-local styles) */
  --surface2: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --card-bg: #ffffff;
  --border: #e2e8f0;
}

/* ──────────────────────────────────────────────────────────────────────────
   1. BASE — page canvas & scrollbars
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"],
html[data-theme="light"] body {
  background-color: #eef1f6 !important;
  color: #0f172a !important;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #e2e8f0 !important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18) !important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(79, 70, 229, 0.5) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. HEADINGS
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .font-display,
html[data-theme="light"] .dusk-title,
html[data-theme="light"] .login-header h2,
html[data-theme="light"] .modal-title,
html[data-theme="light"] .section-title h2 {
  color: #0f172a !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. GLOBAL LOADER
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] #global-loader,
html[data-theme="light"] .global-loader {
  background: #eef1f6 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .loader-text {
  color: #475569 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. CAPSULE NAVS (all pages)
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .lp-dusk-nav,
html[data-theme="light"] .dusk-nav,
html[data-theme="light"] .lp-top-bar,
html[data-theme="light"] .ppt-page-header,
html[data-theme="light"] .top-nav {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18) !important;
}
html[data-theme="light"] .lp-dusk-nav:hover,
html[data-theme="light"] .dusk-nav:hover,
html[data-theme="light"] .lp-top-bar:hover,
html[data-theme="light"] .ppt-page-header:hover,
html[data-theme="light"] .top-nav:hover {
  border-color: rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] .lp-dusk-brand,
html[data-theme="light"] .dusk-brand,
html[data-theme="light"] .lp-top-brand,
html[data-theme="light"] .nav-logo,
html[data-theme="light"] .ppt-page-header-left {
  color: #0f172a !important;
}

html[data-theme="light"] .lp-dusk-badge,
html[data-theme="light"] .dusk-badge {
  background: rgba(79, 70, 229, 0.10) !important;
  border: 1px solid rgba(79, 70, 229, 0.30) !important;
  color: #4f46e5 !important;
}

/* Icon buttons incl. the theme toggle */
html[data-theme="light"] .lp-dusk-icon-btn,
html[data-theme="light"] .lp-icon-btn,
html[data-theme="light"] .theme-toggle {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .lp-dusk-icon-btn:hover,
html[data-theme="light"] .lp-icon-btn:hover,
html[data-theme="light"] .theme-toggle:hover {
  background: rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
}

html[data-theme="light"] .lp-dusk-home-btn {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #1e293b !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .lp-dusk-home-btn:hover {
  background: rgba(79, 70, 229, 0.12) !important;
  border-color: rgba(79, 70, 229, 0.4) !important;
  color: #4338ca !important;
  box-shadow: 0 0 16px rgba(79, 70, 229, 0.25) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   4b. MOBILE DRAWER + OVERLAY (lives outside #landing-page)
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .lp-dusk-drawer {
  background: rgba(255, 255, 255, 0.97) !important;
  border-left: 1px solid #e2e8f0 !important;
  box-shadow: -20px 0 60px rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .lp-dusk-drawer-close {
  background: rgba(15, 23, 42, 0.04) !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  color: #334155 !important;
}
html[data-theme="light"] .lp-dusk-drawer-close:hover {
  background: rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(15, 23, 42, 0.24) !important;
}
html[data-theme="light"] .lp-dusk-drawer-links a {
  color: #334155 !important;
}
html[data-theme="light"] .lp-dusk-drawer-links a:hover {
  background: rgba(79, 70, 229, 0.06) !important;
  border-color: rgba(79, 70, 229, 0.20) !important;
  color: #4f46e5 !important;
}
html[data-theme="light"] .lp-dusk-drawer-links i {
  color: #4f46e5 !important;
}
html[data-theme="light"] .lp-dusk-drawer-secondary {
  background: rgba(15, 23, 42, 0.04) !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  color: #334155 !important;
}
html[data-theme="light"] .lp-dusk-drawer-secondary:hover {
  background: rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(15, 23, 42, 0.24) !important;
  color: #0f172a !important;
}
/* Backdrop dim stays dark in both themes (standard scrim) */

/* ──────────────────────────────────────────────────────────────────────────
   4c. LANDING CTA ISLAND — dark radial → light paper with indigo tint
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] #landing-page .lp-dusk-cta-island {
  background: radial-gradient(ellipse at 50% -20%, rgba(99, 102, 241, 0.14) 0%, rgba(168, 85, 247, 0.08) 45%, #ffffff 85%) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.30) !important;
}
html[data-theme="light"] #landing-page .lp-dusk-cta-island h2 {
  color: #0f172a !important;
}
html[data-theme="light"] #landing-page .lp-dusk-cta-island p {
  color: #475569 !important;
}
html[data-theme="light"] #landing-page .lp-dusk-cta-island .lp-btn-hero-white {
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.14) !important;
}
html[data-theme="light"] #landing-page .lp-dusk-cta-island .lp-btn-hero-ghost {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. WHITE PILL BUTTONS — signature look, kept white in both themes
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .lp-btn-dusk-white,
html[data-theme="light"] .btn-dusk-white,
html[data-theme="light"] .ppt-page-back-btn,
html[data-theme="light"] .pack-select-btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] .lp-btn-dusk-white:hover,
html[data-theme="light"] .btn-dusk-white:hover,
html[data-theme="light"] .ppt-page-back-btn:hover,
html[data-theme="light"] .pack-select-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16) !important;
}

/* Primary Action Buttons (vibrant brand contrast) */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] button.btn-primary,
html[data-theme="light"] .btn-primary-solid,
html[data-theme="light"] .lp-btn-primary {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border: 1px solid #4f46e5 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28) !important;
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] button.btn-primary:hover,
html[data-theme="light"] .btn-primary-solid:hover,
html[data-theme="light"] .lp-btn-primary:hover {
  background: #4338ca !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.38) !important;
  transform: translateY(-1px) !important;
}

/* Ghost / secondary buttons */
html[data-theme="light"] .lp-btn-ghost,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .qg-btn-secondary,
html[data-theme="light"] .gg-btn-secondary,
html[data-theme="light"] .qg-back,
html[data-theme="light"] .gg-back,
html[data-theme="light"] .ct-back,
html[data-theme="light"] .nav-back {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
}
html[data-theme="light"] .lp-btn-ghost:hover,
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .qg-btn-secondary:hover,
html[data-theme="light"] .gg-btn-secondary:hover,
html[data-theme="light"] .qg-back:hover,
html[data-theme="light"] .gg-back:hover,
html[data-theme="light"] .ct-back:hover,
html[data-theme="light"] .nav-back:hover {
  background: rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(15, 23, 42, 0.24) !important;
  color: #0f172a !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   6. CARDS
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .dusk-card,
html[data-theme="light"] .card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .qg-card,
html[data-theme="light"] .gg-card,
html[data-theme="light"] .ct-display-card,
html[data-theme="light"] .portal-notice-card,
html[data-theme="light"] .doc-section,
html[data-theme="light"] .terms-section,
html[data-theme="light"] .privacy-card,
html[data-theme="light"] .admin-card,
html[data-theme="light"] .balance-card,
html[data-theme="light"] .pack-card,
html[data-theme="light"] .purchase-form-wrap,
html[data-theme="light"] .rate-banner,
html[data-theme="light"] .lesson-card,
html[data-theme="light"] .assessment-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.18) !important;
}

/* Student portal notice card — warm amber treatment in light mode */
html[data-theme="light"] .portal-notice-card.notice-warning {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%) !important;
  border: 1px solid rgba(245, 158, 11, 0.40) !important;
  box-shadow: 0 10px 30px -14px rgba(245, 158, 11, 0.35), inset 3px 0 0 0 #f59e0b !important;
}

html[data-theme="light"] .portal-notice-card.notice-warning .portal-notice-body {
  color: #92400e !important;
}

html[data-theme="light"] .portal-notice-card.notice-warning .portal-notice-body strong {
  color: #b45309 !important;
}
html[data-theme="light"] .dusk-card:hover,
html[data-theme="light"] .card:hover,
html[data-theme="light"] .qg-card:hover,
html[data-theme="light"] .gg-card:hover,
html[data-theme="light"] .pack-card:hover {
  border-color: rgba(79, 70, 229, 0.40) !important;
  box-shadow: 0 16px 36px -14px rgba(15, 23, 42, 0.22), 0 0 25px rgba(79, 70, 229, 0.10) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   7. SEGMENTED TABS
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .portal-segmented-tabs,
html[data-theme="light"] .ct-modes,
html[data-theme="light"] .tab-group {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
}
html[data-theme="light"] .portal-tab-btn,
html[data-theme="light"] .ct-mode {
  color: #475569 !important;
}
html[data-theme="light"] .portal-tab-btn.active,
html[data-theme="light"] .ct-mode.active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   8. TOOL PAGE HEADERS
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .qg-header,
html[data-theme="light"] .gg-header,
html[data-theme="light"] .ct-header,
html[data-theme="light"] header.page-header,
html[data-theme="light"] header.bg-gradient {
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%) !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 50px -20px rgba(79, 70, 229, 0.25) !important;
}
html[data-theme="light"] .qg-header h1,
html[data-theme="light"] .gg-header h1,
html[data-theme="light"] .ct-header h1 {
  color: #0f172a !important;
}
html[data-theme="light"] .qg-header p,
html[data-theme="light"] .gg-header p,
html[data-theme="light"] .ct-header p {
  color: #475569 !important;
}
/* The brand mark keeps the same white circle + indigo cap in light mode. */

/* ──────────────────────────────────────────────────────────────────────────
   9. FORM CONTROLS
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-control {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
}
html[data-theme="light"] select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Quiz-generator question blocks */
html[data-theme="light"] .qg-question {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #4f46e5 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .qg-options li {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

/* PPT generator scope: var-driven dark UI → remap to light */
html[data-theme="light"] #tools-section {
  --ppt-bg: #eef1f6;
  --ppt-bg-2: rgba(79, 70, 229, 0.08);
  --ppt-surface: #ffffff;
  --ppt-surface-soft: rgba(15, 23, 42, 0.04);
  --ppt-text: #0f172a;
  --ppt-muted: #475569;
  --ppt-border: rgba(15, 23, 42, 0.12);
  --ppt-shadow: 0 4px 20px rgba(15, 23, 42, 0.10);
  --ppt-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14);
  background: linear-gradient(180deg, #f8fafc 0%, #eef1f6 100%) !important;
  color: #0f172a !important;
}
html[data-theme="light"] #tools-section .ppt-tabs {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] #tools-section .ppt-tab {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #475569 !important;
}
html[data-theme="light"] #tools-section .ppt-tab:hover {
  color: #4f46e5 !important;
  border-color: rgba(79, 70, 229, 0.40) !important;
}
html[data-theme="light"] #tools-section .ppt-btn-secondary {
  background: rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
}

/* Brand gradient headers keep white titles in both themes */
html[data-theme="light"] .cm-header h1,
html[data-theme="light"] .cm-header p {
  color: #ffffff !important;
}

/* Teacher Tools uses a soft light gradient in light mode, so keep the copy dark */
html[data-theme="light"] #tools-section .ppt-header h1 {
  color: #0f172a !important;
}
html[data-theme="light"] #tools-section .ppt-header p {
  color: #475569 !important;
}
/* Rubric header repair was unscoped-dark → give it a light twin */
html[data-theme="light"] .rm-header {
  background: linear-gradient(135deg, #ede9fe 0%, #dbeafe 100%) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 50px -20px rgba(79, 70, 229, 0.25) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .rm-header h1 {
  color: #0f172a !important;
}
html[data-theme="light"] .rm-header p {
  color: #475569 !important;
  opacity: 1 !important;
}
html[data-theme="light"] .rm-back {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  color: #0f172a !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   10. MODALS & OVERLAYS (class-based + inline-styled IDs)
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .modal-dialog,
html[data-theme="light"] .swal2-popup {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.30) !important;
}
/* Inline-styled modal cards (bug report, teacher gate, quota, lesson-plan, slideshow) */
html[data-theme="light"] #bug-report-modal .modal-card,
html[data-theme="light"] #teacher-tools-gate-modal .modal-card,
html[data-theme="light"] #jl-quota-modal > div,
html[data-theme="light"] #tool-auth-gate > div {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
/* Muted copy inside those inline-styled cards */
html[data-theme="light"] #teacher-tools-gate-modal .modal-card p,
html[data-theme="light"] #jl-quota-modal > div p,
html[data-theme="light"] #jl-quota-modal > div ol,
html[data-theme="light"] #tool-auth-gate > div p {
  color: #475569 !important;
}
html[data-theme="light"] #teacher-tools-gate-modal .modal-card p strong,
html[data-theme="light"] #tool-auth-gate > div h3 {
  color: #0f172a !important;
}
html[data-theme="light"] #teacher-tools-gate-modal .modal-card h3 {
  color: #0f172a !important;
}
/* White "Go to Teacher Login" pill needs an edge on the white card */
html[data-theme="light"] #teacher-tools-gate-modal .modal-card a[href="teacher-dashboard.html"],
html[data-theme="light"] #tool-auth-gate > div a[href="teacher-dashboard.html"] {
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14) !important;
}
html[data-theme="light"] #jl-quota-modal > div h3 {
  color: #0f172a !important;
}
html[data-theme="light"] #jl-quota-modal a {
  color: #4f46e5 !important;
}
/* Secondary actions inside the gate overlays */
html[data-theme="light"] #teacher-tools-gate-modal .modal-card button[type="button"],
html[data-theme="light"] #tool-auth-gate > div a[href="index.html"] {
  color: #334155 !important;
  border-color: rgba(15, 23, 42, 0.20) !important;
  background: rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] #lesson-plan-modal {
  background: #ffffff !important;
  color: #0f172a !important;
}
/* #ppt-slideshow-modal intentionally stays a dark presentation stage in both
   themes (focused slide viewer, like a video player). */

/* ──────────────────────────────────────────────────────────────────────────
html[data-theme="light"] main.dotgrid {
  background-color: #e9edf3 !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(79, 70, 229, 0.12) 1px, transparent 0) !important;
}
html[data-theme="light"] #empty-state h2 {
  color: #0f172a !important;
}
html[data-theme="light"] #empty-state p {
  color: #475569 !important;
}

/* ── Doc pages (privacy, terms): page <style> is dark-first ── */
html[data-theme="light"] .content-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme="light"] .content-card p,
html[data-theme="light"] .content-card li {
  color: #475569 !important;
}
html[data-theme="light"] .content-card strong {
  color: #0f172a !important;
}
html[data-theme="light"] .content-card .info-box {
  color: #4338ca !important;
  background: rgba(79, 70, 229, 0.08) !important;
}
html[data-theme="light"] .content-card .alert-box {
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.08) !important;
}
html[data-theme="light"] .toc-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme="light"] .toc-card h3 {
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] .toc-list a {
  color: #475569 !important;
}
html[data-theme="light"] .toc-list a:hover {
  color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.08) !important;
}
/* Doc heroes stay dark brand panels in both themes */
html[data-theme="light"] body > header h1 {
  color: #ffffff !important;
}
html[data-theme="light"] body > header p {
  color: #cbd5e1 !important;
}
/* Doc topbar (privacy/terms sticky bar) */
html[data-theme="light"] .doc-topbar {
  background: rgba(255, 255, 255, 0.90) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .doc-topbar > a {
  color: #0f172a !important;
}
html[data-theme="light"] .doc-topbar a[href="index.html"] {
  color: #334155 !important;
  border-color: rgba(15, 23, 42, 0.20) !important;
}

/* ── Credit store: gradient title + account pills ── */
html[data-theme="light"] .hero h1 {
  background: linear-gradient(135deg, #4f46e5 30%, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] #teacher-account-badge {
  color: #334155 !important;
  background: rgba(79, 70, 229, 0.08) !important;
  border-color: rgba(79, 70, 229, 0.30) !important;
}
html[data-theme="light"] #teacher-account-badge strong {
  color: #0f172a !important;
}
html[data-theme="light"] .monthly-badge {
  color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.08) !important;
  border-color: rgba(79, 70, 229, 0.30) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   12. STRUCTURAL SURFACES (portals, dashboards, footers, tables)
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .navbar,
html[data-theme="light"] nav.navbar {
  background: rgba(255, 255, 255, 0.90) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] .nav-brand,
html[data-theme="light"] .nav-brand span {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] .nav-info,
html[data-theme="light"] #teacher-name-display {
  color: #0f172a !important;
}
html[data-theme="light"] .page {
  background-color: transparent !important;
  color: #0f172a !important;
}
html[data-theme="light"] footer,
html[data-theme="light"] .footer,
html[data-theme="light"] .site-footer {
  color: #475569 !important;
}
html[data-theme="light"] table {
  color: #0f172a !important;
}
html[data-theme="light"] th {
  color: #0f172a !important;
}
html[data-theme="light"] td {
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] .modal-card h3,
html[data-theme="light"] .modal-content h3 {
  color: #0f172a !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   11. TEACHER DASHBOARD — students & results sections (cards on mobile)
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] #students-section,
html[data-theme="light"] #results-section-teacher,
html[data-theme="light"] .dashboard-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .section-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .section-header h2 {
  color: #0f172a !important;
}

html[data-theme="light"] #students-section .section-header > div[style*="flex"] .btn,
html[data-theme="light"] #results-section-teacher .section-header > div[style*="flex"] .btn {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #students-section .section-header .btn:hover,
html[data-theme="light"] #results-section-teacher .section-header .btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

html[data-theme="light"] #students-section .section-header .btn-primary,
html[data-theme="light"] #results-section-teacher .section-header .btn-primary {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

html[data-theme="light"] #students-section .section-header .btn-success,
html[data-theme="light"] #results-section-teacher .section-header .btn-success {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}

html[data-theme="light"] #students-section .section-header .btn-info,
html[data-theme="light"] #results-section-teacher .section-header .btn-info {
  background: #0ea5e9 !important;
  color: #ffffff !important;
  border-color: #0ea5e9 !important;
}

html[data-theme="light"] #students-section .section-header .btn-danger,
html[data-theme="light"] #results-section-teacher .section-header .btn-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

/* Group header banners */
html[data-theme="light"] #students-section .data-table tr.group-header,
html[data-theme="light"] #results-section-teacher .data-table tr.group-header {
  background: transparent !important;
}

html[data-theme="light"] #students-section .data-table tr.group-header .group-title,
html[data-theme="light"] #results-section-teacher .data-table tr.group-header .group-title {
  color: #0f172a !important;
}

html[data-theme="light"] #students-section .data-table tr.group-header .student-count,
html[data-theme="light"] #results-section-teacher .data-table tr.group-header .student-count {
  background: #e2e8f0 !important;
  color: #334155 !important;
}

/* Group header buttons (Delete Section / Delete All) */
html[data-theme="light"] #students-section .data-table tr.group-header .btn-danger,
html[data-theme="light"] #results-section-teacher .data-table tr.group-header .btn-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

html[data-theme="light"] #students-section .data-table tr.group-header .btn-danger:hover,
html[data-theme="light"] #results-section-teacher .data-table tr.group-header .btn-danger:hover {
  background: #dc2626 !important;
}

/* Search inputs */
html[data-theme="light"] #students-section input[type="search"],
html[data-theme="light"] #results-section-teacher input[type="search"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* Card mode (≤768px) - covered by mobile-responsive.css but ensure light theme colors */
html[data-theme="light"] #students-section .data-table tr.student-row,
html[data-theme="light"] #results-section-teacher .data-table tr.result-row {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] #students-section .data-table tr.student-row > td,
html[data-theme="light"] #results-section-teacher .data-table tr.result-row > td {
  border-bottom-color: #f1f5f9 !important;
  color: #1e293b !important;
}

html[data-theme="light"] #students-section .data-table tr.student-row > td::before,
html[data-theme="light"] #results-section-teacher .data-table tr.result-row > td::before {
  color: #94a3b8 !important;
}

/* Table cells (desktop table mode) */
html[data-theme="light"] #students-section .data-table th,
html[data-theme="light"] #results-section-teacher .data-table th {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] #students-section .data-table td,
html[data-theme="light"] #results-section-teacher .data-table td {
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

/* Empty state */
html[data-theme="light"] #students-section .data-table td.empty-state,
html[data-theme="light"] #results-section-teacher .data-table td.empty-state {
  color: #94a3b8 !important;
}

/* Cookie consent banner (styles injected at runtime by js/cookie-consent.js) */
html[data-theme="light"] #cookie-consent-banner {
  background: #ffffff !important;
  color: #334155 !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.10) !important;
}
html[data-theme="light"] .cookie-consent-text {
  color: #475569 !important;
}
html[data-theme="light"] .cookie-consent-text strong {
  color: #0f172a !important;
}
html[data-theme="light"] .cookie-btn-decline {
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .cookie-btn-decline:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   13. INTENTIONALLY DARK WIDGETS — keep readable, stay dark by design
   MAPEH Lab simulator + PPT/certificate paper canvases keep their dark
   stage so the tools remain usable in both themes.
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] [class*="mlab-"],
html[data-theme="light"] [class*="svg-"] {
  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════════
   ITEM ANALYSIS (#ia-content) — LIGHT THEME
   index.html hardcodes container bg #0d111c inline (dark box →
   invisible #1f2937 heading + dark-on-dark rows in light mode).
   teacher-dashboard.html / student-portal.html hardcode white.
   Force one correct light surface + text color + definition
   border on all three; every inner cell value generated by
   js/item-analysis.js is already light-appropriate inline.
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #ia-content {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #ia-content h3 {
    color: #1f2937 !important;
}
html[data-theme="light"] #ia-content thead {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] #ia-content th {
    color: #475569 !important;
}
html[data-theme="light"] #ia-content tbody tr {
    border-bottom-color: #eef2f7 !important;
}
/* Semantic key-cell accents: the global `html[data-theme="light"] td`
   rule (#334155) flattens every td; restore the Item Analysis accents
   with AA-compliant dark shades — #047857 = 5.5:1, #b91c1c = 6.5:1 on white. */
html[data-theme="light"] #ia-content td[style*="color: #059669"] {
  color: #047857 !important;
}
html[data-theme="light"] #ia-content td[style*="#10b981"] {
  color: #047857 !important;
}
html[data-theme="light"] #ia-content td[style*="#ef5350"] {
  color: #b91c1c !important;
}

/* ══════════════════════════════════════════════════════════════════
   ITEM ANALYSIS — REMEDIAL ALERT (#ia-remedial) LIGHT THEME
   The amber/green alert boxes + white card are already correct
   light surfaces inline. Only the semantic cell text needs
   restoring: the global `html[data-theme="light"] td` rule
   (#334155) flattens every td. Restore the designed colors —
   all verified AA on the #fffbeb surface:
     #92400e 8.6:1 · #78350f 10.4:1 · #047857 5.5:1 ·
     #b91c1c 6.4:1 · #b45309 4.8:1
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #ia-remedial td[style*="color: #92400e"] {
  color: #92400e !important;
}
html[data-theme="light"] #ia-remedial td[style*="color: #78350f"] {
  color: #78350f !important;
}
html[data-theme="light"] #ia-remedial td[style*="color: #059669"] {
  color: #047857 !important;
}
html[data-theme="light"] #ia-remedial td[style*="color: #ef5350"] {
  color: #b91c1c !important;
}
html[data-theme="light"] #ia-remedial td[style*="color: #b45309"] {
  color: #b45309 !important;
}
/* Alert identity restores: the global light h1-h4/th rules force
   #0f172a on every heading/cell header — restore the designed
   amber-brown alert identity (AA: #92400e 8:1 on #fef3c7/#fffbeb,
   #065f46 6.8:1 on #f0fdf4). */
html[data-theme="light"] #ia-remedial h4[style*="#92400e"] {
  color: #92400e !important;
}
html[data-theme="light"] #ia-remedial th[style*="#92400e"] {
  color: #92400e !important;
}
html[data-theme="light"] #ia-remedial h4[style*="#065f46"] {
  color: #065f46 !important;
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD SEARCH BARS — LIGHT THEME (all views)
   Explicit light styling so the bars never fall back to UA defaults
   (works identically on mobile + desktop, both themes).
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #student-search-input,
html[data-theme="light"] #lesson-search-input,
html[data-theme="light"] #progress-search-input,
html[data-theme="light"] #results-search-input,
html[data-theme="light"] #not-taken-search-input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
  caret-color: #0f172a;
}
html[data-theme="light"] #student-search-input::placeholder,
html[data-theme="light"] #lesson-search-input::placeholder,
html[data-theme="light"] #progress-search-input::placeholder,
html[data-theme="light"] #results-search-input::placeholder,
html[data-theme="light"] #not-taken-search-input::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8;
  opacity: 1;
}

/* Item Analysis mobile cards: keep the amber remedial-row identity in
   light (dark keeps it via the dark tint rule) */
html[data-theme="light"] #ia-content tbody tr[style*="fffbeb"] {
  background: #fffbeb !important;
}

/* Graduation cap (nav brand): blue cap on a white circle, light theme */
html[data-theme="light"] .nav-brand > i.fa-graduation-cap,
html[data-theme="light"] .nav-brand > i.fas.fa-graduation-cap {
    color: #6366f1 !important;
    -webkit-text-fill-color: #6366f1 !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    padding: 0.42rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE PROFILE BUTTON + ACCOUNT MODAL CREDITS + SIDEBAR (light)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .nav-profile-btn {
    border-color: rgba(79, 70, 229, 0.4);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

html[data-theme="light"] .acct-credits-card {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .acct-credits-title {
    color: #1f2937;
    border-bottom-color: #f3f4f6;
}
html[data-theme="light"] .acct-credits-title i { color: #f59e0b; }
html[data-theme="light"] .acct-credits-amount span { color: #4f46e5; }
html[data-theme="light"] .acct-credits-amount small { color: #64748b; }
html[data-theme="light"] .acct-logout-btn {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}
html[data-theme="light"] .acct-logout-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

@media (min-width: 769px) {
    html[data-theme="light"] .sidebar-menu::before { color: #94a3b8; }
}
html[data-theme="light"] .sidebar-menu .menu-item { color: #475569 !important; }
html[data-theme="light"] .sidebar-menu .menu-item i {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
}
html[data-theme="light"] .sidebar-menu .menu-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .sidebar-menu .menu-item:hover i {
    background: rgba(79, 70, 229, 0.18);
    color: #4338ca;
}
html[data-theme="light"] .sidebar-menu .menu-item.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.3) !important;
}
html[data-theme="light"] .sidebar-menu .menu-item.active i {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff !important;
}

/* ── Teacher Tools grid (index + teacher-dashboard) — light cards in light theme ── */
html[data-theme="light"] #tools-section .ppt-tool-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] #tools-section .ppt-tool-card:hover {
    border-color: #c7d2fe !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1) !important;
}
html[data-theme="light"] #tools-section .ppt-tool-card h3 {
    color: #0f172a !important;
}
html[data-theme="light"] #tools-section .ppt-tool-card p {
    color: #64748b !important;
}
html[data-theme="light"] #tools-section .ppt-tool-card::after {
    color: #94a3b8 !important;
}
html[data-theme="light"] #tools-section .ppt-tool-card:hover::after {
    color: #4f46e5 !important;
}
html[data-theme="light"] #tools-section .ppt-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(241, 245, 249, 0.95)) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05) !important;
}
html[data-theme="light"] #tools-section .ppt-brand i {
    color: #4f46e5 !important;
}
html[data-theme="light"] #tools-section .ppt-tool-count {
    background: rgba(79, 70, 229, 0.1) !important;
    border-color: rgba(79, 70, 229, 0.25) !important;
    color: #4338ca !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   18. LESSON PLAN GENERATOR (lesson-plan-generator.html)
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] body:has(.lpg-shell),
html[data-theme="light"] .lpg-shell {
    background: #f8fafc !important;
    color: #0f172a !important;
}
html[data-theme="light"] .lpg-topbar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}
html[data-theme="light"] .lpg-topbrand h1 { color: #0f172a !important; }
html[data-theme="light"] .lpg-topbrand p { color: #64748b !important; }
html[data-theme="light"] .lpg-back {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] .lpg-back:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .lpg-topbadge {
    background: rgba(79, 70, 229, 0.08) !important;
    border-color: rgba(79, 70, 229, 0.25) !important;
    color: #4338ca !important;
}
html[data-theme="light"] .lpg-panel {
    background: #ffffff !important;
    border-right-color: #e2e8f0 !important;
}
html[data-theme="light"] .lpg-panel-footer {
    background: rgba(248, 250, 252, 0.95) !important;
    border-top-color: #e2e8f0 !important;
}
html[data-theme="light"] .lpg-section-label { color: #4338ca !important; }
html[data-theme="light"] .lpg-section-label .opt { color: #64748b !important; }
html[data-theme="light"] .lpg-field label { color: #334155 !important; }
html[data-theme="light"] .lpg-input,
html[data-theme="light"] .lpg-select,
html[data-theme="light"] .lpg-textarea {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .lpg-input:focus,
html[data-theme="light"] .lpg-select:focus,
html[data-theme="light"] .lpg-textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    background: #ffffff !important;
}
html[data-theme="light"] .lpg-input::placeholder,
html[data-theme="light"] .lpg-textarea::placeholder {
    color: #94a3b8 !important;
}
html[data-theme="light"] .lpg-divider {
    background: #e2e8f0 !important;
}
html[data-theme="light"] .lpg-keycard {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .lpg-keyhead span { color: #1e293b !important; }
html[data-theme="light"] .lpg-keynote { color: #64748b !important; }
html[data-theme="light"] .lpg-linkbtn { color: #4f46e5 !important; }
html[data-theme="light"] .lpg-eye { color: #64748b !important; }
html[data-theme="light"] .lpg-eye:hover { color: #0f172a !important; background: rgba(15, 23, 42, 0.06) !important; }
html[data-theme="light"] .lpg-seg {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .lpg-seg button {
    color: #64748b !important;
}
html[data-theme="light"] .lpg-seg button:hover {
    color: #0f172a !important;
}
html[data-theme="light"] .lpg-seg button.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}
html[data-theme="light"] .lpg-neural-card {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .lpg-neural-pool-note { color: #64748b !important; }
html[data-theme="light"] .lpg-neural-pool-note .lpg-live { color: #059669 !important; }
html[data-theme="light"] .lpg-neural-btn {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}
html[data-theme="light"] .lpg-neural-btn:hover {
    background: #f8fafc !important;
    border-color: #818cf8 !important;
}
html[data-theme="light"] .lpg-neural-btn.active {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: #4f46e5 !important;
    box-shadow: inset 0 0 0 1px #4f46e5 !important;
}
html[data-theme="light"] .lpg-neural-btn small { color: #64748b !important; }
html[data-theme="light"] .lpg-neural-btn .neural-usage { color: #64748b !important; }
html[data-theme="light"] .lpg-hint { color: #64748b !important; }
html[data-theme="light"] .lpg-upload {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
html[data-theme="light"] .lpg-upload:hover {
    background: rgba(99, 102, 241, 0.04) !important;
    border-color: #818cf8 !important;
}
html[data-theme="light"] .lpg-upload .up-icon {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .lpg-upload .up-icon i { color: #4f46e5 !important; }
html[data-theme="light"] .lpg-upload strong { color: #0f172a !important; }
html[data-theme="light"] .lpg-upload small { color: #64748b !important; }
html[data-theme="light"] .lpg-filechip {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
html[data-theme="light"] .lpg-filechip .fc-name { color: #0f172a !important; }
html[data-theme="light"] .lpg-filechip .fc-size { color: #64748b !important; }
html[data-theme="light"] .lpg-preview {
    background: #f1f5f9 !important;
}
html[data-theme="light"] .lpg-empty h2 { color: #0f172a !important; }
html[data-theme="light"] .lpg-empty p { color: #64748b !important; }
html[data-theme="light"] .lpg-empty .empty-ico {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .lpg-empty .empty-ico i { color: #4f46e5 !important; }
html[data-theme="light"] .lpg-empty .empty-chips span {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}
html[data-theme="light"] .lpg-toolbar {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] .lpg-toolbar .tb-title h2 { color: #0f172a !important; }
html[data-theme="light"] .lpg-toolbar .tb-title p { color: #64748b !important; }
html[data-theme="light"] .lpg-tb-btn {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] .lpg-tb-btn:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .lpg-tb-btn.primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .lpg-parts-head h2 { color: #0f172a !important; }
html[data-theme="light"] .lpg-parts-head p { color: #64748b !important; }
html[data-theme="light"] .lpg-parts-count {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #4338ca !important;
}
html[data-theme="light"] .lpg-part-row {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .lpg-part-row .pico {
    background: #f1f5f9 !important;
    color: #64748b !important;
}
html[data-theme="light"] .lpg-part-row .ptxt strong { color: #0f172a !important; }
html[data-theme="light"] .lpg-part-row .ptxt small { color: #64748b !important; }
html[data-theme="light"] .lpg-part-redo {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}
html[data-theme="light"] .lpg-part-redo:hover {
    color: #0f172a !important;
    border-color: #818cf8 !important;
}
html[data-theme="light"] .lpg-part-btn {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] .lpg-part-btn:hover:not(:disabled) {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .lpg-part-btn.primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .lpg-parts-note { color: #64748b !important; }
html[data-theme="light"] .lpg-modal-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .lpg-loading h2 { color: #0f172a !important; }
html[data-theme="light"] .lpg-loading p { color: #64748b !important; }
html[data-theme="light"] .lpg-loading .loading-steps span { color: #475569 !important; }

/* ──────────────────────────────────────────────────────────────────────────
   19. LESSON MANAGEMENT TAB & ADD LESSON MODAL (index + teacher-dashboard)
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] #lessons-section .section-header .btn-primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
}
html[data-theme="light"] #lessons-section .section-header .btn-primary:hover {
    background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45) !important;
}
html[data-theme="light"] .empty-state,
html[data-theme="light"] .empty-state-card {
    background: #f8fafc !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    color: #64748b !important;
}
html[data-theme="light"] .empty-state-card i,
html[data-theme="light"] .empty-state i {
    color: #94a3b8 !important;
}
html[data-theme="light"] .empty-state-card p,
html[data-theme="light"] .empty-state p {
    color: #475569 !important;
    font-weight: 500 !important;
}

/* Add Lesson Modal internal components */
html[data-theme="light"] #add-lesson-modal,
html[data-theme="light"] #edit-lesson-modal {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
}
html[data-theme="light"] .modal-header {
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .modal-header h3 {
    color: #0f172a !important;
}
html[data-theme="light"] .modal-close {
    color: #64748b !important;
}
html[data-theme="light"] .modal-close:hover {
    color: #0f172a !important;
}
html[data-theme="light"] #add-lesson-modal label,
html[data-theme="light"] #edit-lesson-modal label {
    color: #1e293b !important;
}
html[data-theme="light"] #add-lesson-modal small,
html[data-theme="light"] #edit-lesson-modal small {
    color: #64748b !important;
}
html[data-theme="light"] .format-guide {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #4f46e5 !important;
    color: #334155 !important;
}
html[data-theme="light"] .format-guide strong {
    color: #1e1b4b !important;
}
html[data-theme="light"] .format-guide li {
    color: #475569 !important;
}
html[data-theme="light"] .format-guide li strong {
    color: #0f172a !important;
}
html[data-theme="light"] .page-tab {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
}
html[data-theme="light"] .page-tab:hover {
    border-color: #4f46e5 !important;
    color: #4f46e5 !important;
}
html[data-theme="light"] .page-tab.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25) !important;
}
html[data-theme="light"] .page-header h4 {
    color: #0f172a !important;
}