/* ═══════════════════════════════════════════════════════════════════
   Apna MCQs — Light Mode  (body.light-mode overrides)
   Design: "Pearl & Rose" — clean, modern, attractive
   Primary bg:  #f1f5f9  (cool pearl)
   Card bg:     #ffffff  (pure white)
   Text:        #0f172a  (deep navy slate)
   Accent:      #e11d48  (rose — brand adjusted for light readability)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Smooth transition ─────────────────────────────────────────── */
body.light-mode *,
body.light-mode *::before,
body.light-mode *::after {
  transition: background 0.25s ease, background-color 0.25s ease,
              color 0.22s ease, border-color 0.22s ease,
              box-shadow 0.22s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BODY + ROOT CSS VARIABLE OVERRIDES
   (covers every page's own :root vars)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode {
  /* ── Universal layout vars ───────────────────────────────────── */
  --bg:            #ffffff !important;
  --bg2:           #ffffff !important;
  --bg3:           #f5f7fa !important;
  --bg-dark:       #f5f7fa !important;
  --border:        #dde3ec !important;
  --text:          #0f172a !important;
  --muted:         #64748b !important;
  --nav-bg:        rgba(255,255,255,0.97) !important;

  /* ── Card vars (all naming conventions) ─────────────────────── */
  --card:          #ffffff !important;
  --card-bg:       #ffffff !important;
  --card-dark:     #f5f7fa !important;
  --bg-card:       #ffffff !important;
  --dark-card:     #f5f7fa !important;
  --panel:         #ffffff !important;
  --surface:       #ffffff !important;
  --surface2:      #f8fafc !important;

  /* ── Input vars ─────────────────────────────────────────────── */
  --input-bg:      #f8fafc !important;
  --input-text:    #0f172a !important;
  --input-ph:      #94a3b8 !important;
  --input-border:  #cbd5e1 !important;

  /* ── Text hierarchy ─────────────────────────────────────────── */
  --text-primary:  #0f172a !important;
  --text-secondary:#475569 !important;
  --text-muted:    #64748b !important;
  --text-light:    #94a3b8 !important;

  /* ── Footer / divider ───────────────────────────────────────── */
  --footer-border: #dde3ec !important;
  --table-hover:   rgba(15,23,42,0.03) !important;

  /* ── LAT-specific vars ──────────────────────────────────────── */
  --dark:          #0f172a !important;
  --secondary:     #0891b2 !important;

  /* ── Profile accent vars (override green theme) ─────────────── */
  --acc-l:         #059669 !important;
  --acc2:          #047857 !important;
  --border-color:  #e2e8f0 !important;

  /* ── Body reset ─────────────────────────────────────────────── */
  background:      #ffffff !important;
  color:           #0f172a !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INLINE STYLE ATTRIBUTE OVERRIDES
   CSS !important on attribute selectors overrides inline styles.
   ═══════════════════════════════════════════════════════════════════ */
:is(
  body.light-mode [style*="color:#fff"],
  body.light-mode [style*="color: #fff"],
  body.light-mode [style*="color:#FFF"],
  body.light-mode [style*="color: #FFF"],
  body.light-mode [style*="color:#ffffff"],
  body.light-mode [style*="color: #ffffff"],
  body.light-mode [style*="color:#FFFFFF"],
  body.light-mode [style*="color:white"],
  body.light-mode [style*="color: white"],
  body.light-mode [style*="color:#f8fafc"],
  body.light-mode [style*="color: #f8fafc"],
  body.light-mode [style*="color:#f1f5f9"],
  body.light-mode [style*="color: #f1f5f9"],
  body.light-mode [style*="color:#e2e8f0"],
  body.light-mode [style*="color: #e2e8f0"]
):not(#su-dl-card):not(#su2-dl-card):not(#mdcat-dl-card):not(#download-card):not(#su-dl-card *):not(#su2-dl-card *):not(#mdcat-dl-card *):not(#download-card *) {
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
}

body.light-mode [style*="color:rgba(255,255,255"],
body.light-mode [style*="color: rgba(255,255,255"],
body.light-mode [style*="color:rgba(255, 255, 255"],
body.light-mode [style*="color: rgba(255, 255, 255"] {
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
}

/* Very dark inline colors that become invisible */
body.light-mode [style*="color:#0f172a"],body.light-mode [style*="color: #0f172a"],
body.light-mode [style*="color:#111827"],body.light-mode [style*="color: #111827"],
body.light-mode [style*="color:#1e293b"],body.light-mode [style*="color: #1e293b"] {
  color: #0f172a !important;
}

/* Near-white hex colours that are invisible on a white card */
body.light-mode [style*="color:#f0f0f0"], body.light-mode [style*="color: #f0f0f0"],
body.light-mode [style*="color:#eeeeee"], body.light-mode [style*="color: #eeeeee"],
body.light-mode [style*="color:#e2e4f0"], body.light-mode [style*="color: #e2e4f0"],
body.light-mode [style*="color:#cdd0e8"], body.light-mode [style*="color: #cdd0e8"],
body.light-mode [style*="color:#f4f4f4"], body.light-mode [style*="color: #f4f4f4"],
body.light-mode [style*="color:#ddd"],    body.light-mode [style*="color: #ddd"],
body.light-mode [style*="color:#dddddd"], body.light-mode [style*="color: #dddddd"],
body.light-mode [style*="color:#cccccc"], body.light-mode [style*="color: #cccccc"],
body.light-mode [style*="color:#d1d5db"], body.light-mode [style*="color: #d1d5db"],
body.light-mode [style*="color:#9ca3af"], body.light-mode [style*="color: #9ca3af"],
body.light-mode [style*="color:#94a3b8"], body.light-mode [style*="color: #94a3b8"],
body.light-mode [style*="color:#cbd5e1"], body.light-mode [style*="color: #cbd5e1"],
body.light-mode [style*="color:#8892a4"], body.light-mode [style*="color: #8892a4"],
body.light-mode [style*="color:#b0bec5"], body.light-mode [style*="color: #b0bec5"],
body.light-mode [style*="color:#90a4ae"], body.light-mode [style*="color: #90a4ae"] {
  color: #475569 !important;
}

/* Light accent colours — darken for readability on white */
body.light-mode [style*="color:#fde68a"],  body.light-mode [style*="color: #fde68a"]  { color: #92400e !important; }
body.light-mode [style*="color:#fbbf24"],  body.light-mode [style*="color: #fbbf24"]  { color: #92400e !important; }
body.light-mode [style*="color:#f59e0b"],  body.light-mode [style*="color: #f59e0b"]  { color: #92400e !important; }
body.light-mode [style*="color:yellow"],   body.light-mode [style*="color: yellow"]   { color: #92400e !important; }
body.light-mode [style*="color:#6ee7b7"],  body.light-mode [style*="color: #6ee7b7"]  { color: #065f46 !important; }
body.light-mode [style*="color:#67e8f9"],  body.light-mode [style*="color: #67e8f9"]  { color: #0e7490 !important; }
body.light-mode [style*="color:#93c5fd"],  body.light-mode [style*="color: #93c5fd"]  { color: #1e40af !important; }
body.light-mode [style*="color:#c4b5fd"],  body.light-mode [style*="color: #c4b5fd"]  { color: #5b21b6 !important; }
body.light-mode [style*="color:#fca5a5"],  body.light-mode [style*="color: #fca5a5"]  { color: #991b1b !important; }
body.light-mode [style*="color:#f87171"],  body.light-mode [style*="color: #f87171"]  { color: #991b1b !important; }
body.light-mode [style*="color:#86efac"],  body.light-mode [style*="color: #86efac"]  { color: #065f46 !important; }
body.light-mode [style*="color:#a5f3fc"],  body.light-mode [style*="color: #a5f3fc"]  { color: #0e7490 !important; }
body.light-mode [style*="color:#d8b4fe"],  body.light-mode [style*="color: #d8b4fe"]  { color: #5b21b6 !important; }

/* Dark inline backgrounds → convert to light */
body.light-mode [style*="background:#04"],
body.light-mode [style*="background: #04"],
body.light-mode [style*="background:#03"],
body.light-mode [style*="background: #03"],
body.light-mode [style*="background:#06"],
body.light-mode [style*="background: #06"],
body.light-mode [style*="background:#08"],
body.light-mode [style*="background: #08"],
body.light-mode [style*="background:#09"],
body.light-mode [style*="background: #09"],
body.light-mode [style*="background:#0a"],
body.light-mode [style*="background: #0a"],
body.light-mode [style*="background:#0b"],
body.light-mode [style*="background: #0b"],
body.light-mode [style*="background:#0c"],
body.light-mode [style*="background: #0c"],
body.light-mode [style*="background:#0d"],
body.light-mode [style*="background: #0d"],
body.light-mode [style*="background:#0e"],
body.light-mode [style*="background: #0e"],
body.light-mode [style*="background:#0f"],
body.light-mode [style*="background: #0f"],
body.light-mode [style*="background:#10"],
body.light-mode [style*="background: #10"],
body.light-mode [style*="background:#11"],
body.light-mode [style*="background: #11"],
body.light-mode [style*="background:#12"],
body.light-mode [style*="background: #12"],
body.light-mode [style*="background:#13"],
body.light-mode [style*="background: #13"],
body.light-mode [style*="background:#14"],
body.light-mode [style*="background: #14"],
body.light-mode [style*="background:#15"],
body.light-mode [style*="background: #15"],
body.light-mode [style*="background:#16"],
body.light-mode [style*="background: #16"],
body.light-mode [style*="background:#17"],
body.light-mode [style*="background: #17"],
body.light-mode [style*="background:#18"],
body.light-mode [style*="background: #18"],
body.light-mode [style*="background:#19"],
body.light-mode [style*="background: #19"],
body.light-mode [style*="background:#1a"],
body.light-mode [style*="background: #1a"],
body.light-mode [style*="background:#1b"],
body.light-mode [style*="background: #1b"],
body.light-mode [style*="background:#1c"],
body.light-mode [style*="background: #1c"],
body.light-mode [style*="background:#1d"],
body.light-mode [style*="background: #1d"],
body.light-mode [style*="background:#1e"],
body.light-mode [style*="background: #1e"],
body.light-mode [style*="background:#1f"],
body.light-mode [style*="background: #1f"],
body.light-mode [style*="background:#20"],
body.light-mode [style*="background: #20"],
body.light-mode [style*="background:#21"],
body.light-mode [style*="background: #21"],
body.light-mode [style*="background:#22"],
body.light-mode [style*="background: #22"],
body.light-mode [style*="background:#23"],
body.light-mode [style*="background: #23"],
body.light-mode [style*="background:#24"],
body.light-mode [style*="background: #24"],
body.light-mode [style*="background:#25"],
body.light-mode [style*="background: #25"],
body.light-mode [style*="background:#26"],
body.light-mode [style*="background: #26"],
body.light-mode [style*="background:#27"],
body.light-mode [style*="background: #27"],
body.light-mode [style*="background:#28"],
body.light-mode [style*="background: #28"],
body.light-mode [style*="background:#29"],
body.light-mode [style*="background: #29"],
body.light-mode [style*="background:#2a"],
body.light-mode [style*="background: #2a"],
body.light-mode [style*="background:#2b"],
body.light-mode [style*="background: #2b"],
body.light-mode [style*="background:#2c"],
body.light-mode [style*="background: #2c"],
body.light-mode [style*="background:#2d"],
body.light-mode [style*="background: #2d"],
body.light-mode [style*="background:#2e"],
body.light-mode [style*="background: #2e"] {
  background:       #f8fafc !important;
  background-color: #f8fafc !important;
  color:            #0f172a !important;
}

body.light-mode [style*="background: linear-gradient"],
body.light-mode [style*="background:linear-gradient"] {
  /* Don't override gradients unless they start with a dark color handled below */
}
body.light-mode [style*="background: linear-gradient(135deg, #1f2041"],
body.light-mode [style*="background:linear-gradient(135deg,#1f2041"],
body.light-mode [style*="background: linear-gradient(135deg, #0a2"],
body.light-mode [style*="background:linear-gradient(135deg,#0a2"],
body.light-mode [style*="background: linear-gradient(135deg, #04"],
body.light-mode [style*="background:linear-gradient(135deg,#04"],
body.light-mode [style*="background: linear-gradient(135deg, #03"],
body.light-mode [style*="background:linear-gradient(135deg,#03"],
body.light-mode [style*="background: linear-gradient(180deg, #04"],
body.light-mode [style*="background:linear-gradient(180deg,#04"],
body.light-mode [style*="background: linear-gradient(135deg, #06"],
body.light-mode [style*="background:linear-gradient(135deg,#06"],
body.light-mode [style*="background: linear-gradient(180deg, #06"],
body.light-mode [style*="background:linear-gradient(180deg,#06"] {
  background:       #ffffff !important;
  background-color: #ffffff !important;
  color:            #0f172a !important;
}

/* Near-transparent white backgrounds → convert to solid light */
body.light-mode [style*="background:rgba(255,255,255,.0"],
body.light-mode [style*="background: rgba(255,255,255,.0"],
body.light-mode [style*="background:rgba(255, 255, 255, 0.0"],
body.light-mode [style*="background: rgba(255, 255, 255, 0.0"],
body.light-mode [style*="background:rgba(255,255,255,0.0"],
body.light-mode [style*="background: rgba(255,255,255,0.0"] {
  background:       #f8fafc !important;
  background-color: #f8fafc !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADINGS (all sections)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode h1:not(#su-dl-card *):not(#su2-dl-card *):not(#mdcat-dl-card *):not(#download-card *),
body.light-mode h2:not(#su-dl-card *):not(#su2-dl-card *):not(#mdcat-dl-card *):not(#download-card *),
body.light-mode h3:not(#su-dl-card *):not(#su2-dl-card *):not(#mdcat-dl-card *):not(#download-card *),
body.light-mode h4:not(#su-dl-card *):not(#su2-dl-card *):not(#mdcat-dl-card *):not(#download-card *),
body.light-mode h5, body.light-mode h6 { color: #0f172a; }

/* ═══════════════════════════════════════════════════════════════════
   INPUTS, SELECTS, TEXTAREAS
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
body.light-mode select,
body.light-mode textarea {
  background-color: #ffffff !important;
  color:            #0f172a !important;
  border-color:     #cbd5e1 !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder { color: #94a3b8 !important; }
body.light-mode select option { background: #ffffff; color: #0f172a; }

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION BARS (all section variants)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .m-nav,
body.light-mode .s-nav,
body.light-mode .lat-nav,
body.light-mode .top-nav,
body.light-mode .apna-nav,
body.light-mode .apna-header,
body.light-mode .navbar,
body.light-mode [class*="apna-nav"],
body.light-mode nav {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 12px rgba(15,23,42,0.07) !important;
}

body.light-mode .m-nav *,    body.light-mode .s-nav *,
body.light-mode .lat-nav *,  body.light-mode .top-nav *,
body.light-mode .apna-nav *, body.light-mode .navbar *,
body.light-mode [class*="apna-nav"] *, body.light-mode nav a,
body.light-mode nav span,    body.light-mode nav div,
body.light-mode [class*="nav-link"],   body.light-mode [class*="nav-brand"],
body.light-mode [class*="nav-user"]    { color: #334155 !important; }

body.light-mode .m-nav-link,  body.light-mode .s-nav-link,
body.light-mode .lat-nav-link { color: #64748b !important; }

body.light-mode .m-nav-link:hover, body.light-mode .m-nav-link.active,
body.light-mode .s-nav-link:hover, body.light-mode .s-nav-link.active,
body.light-mode .lat-nav-link:hover { color: #059669 !important; }

body.light-mode .m-nav-brand, body.light-mode .s-nav-brand,
body.light-mode .lat-nav-brand { color: #0f172a !important; }

/* Apna MCQs brand name in navbar → black */
body.light-mode .nav-logo span,
body.light-mode .nav-logo,
body.light-mode a.nav-logo span,
body.light-mode a.nav-logo,
body.light-mode [class*="nav-logo"] span,
body.light-mode .navbar-brand span,
body.light-mode .navbar-brand,
body.light-mode [class*="brand-name"],
body.light-mode [class*="site-name"],
html body.light-mode .nav-logo span,
html body.light-mode a.nav-logo span {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

body.light-mode .m-nav-user, body.light-mode .s-nav-user,
body.light-mode .lat-nav-user { color: #059669 !important; }

/* VIP crown colour */
body.light-mode [style*="color:#fde68a"] { color: #b45309 !important; }

/* Burger icon */
body.light-mode .navbar-toggler { border-color: #334155 !important; }
body.light-mode .navbar-toggler-icon { filter: invert(0.8) sepia(0.2); }

/* Profile chip in navbar (home page) */
body.light-mode .nav-profile-chip       { background: rgba(15,23,42,.07) !important; }
body.light-mode .nav-profile-chip:hover { background: rgba(15,23,42,.12) !important; }
body.light-mode .nav-profile-name       { color: #0f172a !important; }

/* Profile dropdown */
body.light-mode .nav-profile-dropdown {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12) !important;
}
body.light-mode .nav-profile-dropdown a,
body.light-mode .nav-profile-dropdown div { color: #334155 !important; }
body.light-mode .nav-profile-dropdown a:hover { background: #ffffff !important; }

/* Mobile menu / drawer */
body.light-mode .mobile-menu {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}
body.light-mode .mobile-menu-overlay { background: rgba(15,23,42,0.4) !important; }
body.light-mode .m-menu-link,
body.light-mode .mobile-menu a       { color: #334155 !important; }
body.light-mode .m-menu-link:hover,
body.light-mode .mobile-menu a:hover { background: #ffffff !important; color: #e11d48 !important; }

/* ═══════════════════════════════════════════════════════════════════
   PAGE BACKGROUNDS
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode,
body.light-mode .m-page,   body.light-mode [class^="m-page"],
body.light-mode [class*=" m-page"],
body.light-mode .lat-page,
body.light-mode [class*="page-wrap"],
body.light-mode [class*="page-container"] { background: #ffffff !important; }

/* ═══════════════════════════════════════════════════════════════════
   CARDS & PANELS (all sections)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .card,         body.light-mode .m-card,
body.light-mode .s-card,       body.light-mode [class^="s-card"],
body.light-mode .lat-card,     body.light-mode [class^="lat-card"],
body.light-mode .test-card,    body.light-mode .stat-box,
body.light-mode .vid-card,     body.light-mode .result-card,
body.light-mode .score-card,   body.light-mode .subject-card,
body.light-mode .stat-card,    body.light-mode .feature-card,
body.light-mode .section-card, body.light-mode .content-card,
body.light-mode .info-card,    body.light-mode .premium-card,
body.light-mode .price-card,   body.light-mode .profile-card,
body.light-mode .test-section, body.light-mode .quiz-card,
body.light-mode .result-box,   body.light-mode .score-box {
  background:   #ffffff !important;
  color:        #0f172a !important;
  border-color: #e2e8f0 !important;
  box-shadow:   0 1px 4px rgba(15,23,42,0.06), 0 4px 16px rgba(15,23,42,0.04) !important;
}

body.light-mode .card h1, body.light-mode .card h2,
body.light-mode .card h3, body.light-mode .card h4,
body.light-mode .card h5, body.light-mode .card p,
body.light-mode .card span, body.light-mode .card a,
body.light-mode .lat-card h2, body.light-mode .lat-card h3,
body.light-mode .lat-card p,  body.light-mode .lat-card span,
body.light-mode .profile-card h1, body.light-mode .profile-card h2,
body.light-mode .profile-card p,  body.light-mode .profile-card span,
body.light-mode .profile-card div { color: #0f172a; }

/* Section heading/subhead */
body.light-mode .m-heading, body.light-mode .s-heading,
body.light-mode .tc-title   { color: #0f172a !important; }
body.light-mode .tc-meta,   body.light-mode .m-subhead,
body.light-mode .m-label,   body.light-mode .s-subhead { color: #64748b !important; }

/* Hero text */
body.light-mode .s-hero-title { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }
body.light-mode .s-hero-sub   { color: #065f46 !important; -webkit-text-fill-color: #065f46 !important; }

/* ═══════════════════════════════════════════════════════════════════
   PROFILE PAGE — full override
   profile.php uses --bg:#030f0a --card:#0a2016 --acc-l:#6ee7b7
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .profile-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 16px rgba(15,23,42,0.08) !important;
}
body.light-mode .pc-logo-text,
body.light-mode .pc-title { color: #0f172a !important; }
body.light-mode .pc-sub   { color: #64748b !important; }

body.light-mode .form-label  { color: #059669 !important; }
body.light-mode .form-hint,
body.light-mode .form-secure { color: #64748b !important; }

body.light-mode .section-title { color: #059669 !important; }

body.light-mode .avatar-category { color: #94a3b8 !important; }
body.light-mode .avatar-opt {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
body.light-mode .avatar-opt.selected { border-color: #10b981 !important; }
body.light-mode .avatar-upload-btn {
  background: rgba(16,185,129,0.08) !important;
  border-color: #d1fae5 !important;
  color: #059669 !important;
}

body.light-mode .theme-name { color: #64748b !important; }
body.light-mode .theme-opt  { background: #f8fafc !important; border-color: #e2e8f0 !important; }
body.light-mode .theme-opt.selected { border-color: #10b981 !important; }

body.light-mode .preview-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(15,23,42,0.1) !important;
}
body.light-mode .preview-name  { color: #0f172a !important; }
body.light-mode .preview-city  { color: #64748b !important; }
body.light-mode .preview-avatar { border-color: #e2e8f0 !important; background: #ffffff !important; }
body.light-mode .preview-avatar .fallback { color: #94a3b8 !important; }

body.light-mode .pc-editing-badge { color: #059669 !important; border-color: #d1fae5 !important; }

/* ═══════════════════════════════════════════════════════════════════
   QUIZ ELEMENTS (MDCAT / SU / LAT)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .q-block   { background: #ffffff !important; border-color: #e2e8f0 !important; }
body.light-mode .q-text    { color: #0f172a !important; }
body.light-mode .q-num,
body.light-mode .q-answered-ctr { color: #64748b !important; }
body.light-mode .q-opt {
  background: #f8fafc !important;
  border-color: #dde3ec !important;
  color: #1e293b !important;
}
body.light-mode .q-opt:hover  { background: #fdf2f5 !important; border-color: #fecdd3 !important; }
body.light-mode .q-opt-text   { color: #1e293b !important; }
body.light-mode .q-submit-bar { background: rgba(255,255,255,0.97) !important; border-top: 1px solid #e2e8f0 !important; }
body.light-mode .score-ring-inner { background: #ffffff !important; }

/* Answer review blocks */
body.light-mode .ans-block { background: #ffffff !important; border-color: #e2e8f0 !important; }
body.light-mode .ans-q     { color: #0f172a !important; }
body.light-mode .result-hero { background: #ffffff !important; }
body.light-mode .r-stat    { background: #f8fafc !important; border-color: #e2e8f0 !important; }

/* MDCAT ghost buttons */
body.light-mode .m-btn-ghost {
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode table         { color: #0f172a !important; }
body.light-mode thead         { background: #ffffff !important; }
body.light-mode thead th      { color: #0f172a !important; border-bottom: 2px solid #e2e8f0 !important; }
body.light-mode tbody tr      { background: #ffffff !important; }
body.light-mode tbody tr:nth-child(even) { background: #f8fafc !important; }
body.light-mode tbody td      { color: #334155 !important; border-color: #f1f5f9 !important; }

/* ═══════════════════════════════════════════════════════════════════
   MODALS, POPUPS, OVERLAYS, BOTTOM SHEETS
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .modal-content,
body.light-mode .modal-body,
body.light-mode [class*="popup-content"],
body.light-mode [class*="dialog-content"],
body.light-mode [class*="sheet-content"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 60px rgba(15,23,42,0.18) !important;
}
body.light-mode .modal-header,
body.light-mode [class*="modal-header"],
body.light-mode [class*="popup-header"],
body.light-mode [class*="dialog-header"] {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
body.light-mode .modal-footer,
body.light-mode [class*="modal-footer"] {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}
body.light-mode .modal-backdrop { background: rgba(15,23,42,0.5) !important; }

body.light-mode .modal-content *,
body.light-mode [class*="popup-content"] *,
body.light-mode [class*="dialog-content"] * { color: #334155; }
body.light-mode .modal-content h1,
body.light-mode .modal-content h2,
body.light-mode .modal-content h3,
body.light-mode .modal-content h4 { color: #0f172a !important; }

/* Device warning popup */
body.light-mode #device-warn-overlay { background: rgba(15,23,42,0.92) !important; }
body.light-mode #device-warn-box {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #fca5a5 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .bottom-nav {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -2px 12px rgba(15,23,42,0.06) !important;
}
body.light-mode .bnav-item        { color: #64748b !important; }
body.light-mode .bnav-item.active { color: #e11d48 !important; }
body.light-mode .bnav-item:hover  { color: #e11d48 !important; }

/* ═══════════════════════════════════════════════════════════════════
   LEADERBOARD
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .lb-row {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.04) !important;
}
body.light-mode .lb-row.is-me    { background: #fff1f2 !important; border-color: #fecdd3 !important; }
body.light-mode .lb-name,
body.light-mode .lb-score-val    { color: #0f172a !important; }
body.light-mode .lb-meta,
body.light-mode .lb-score-lbl    { color: #64748b !important; }

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASS OVERRIDES (Bootstrap, Tailwind etc.)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .text-white:not([class*="lb-header"]):not([class*="podium"]):not([class*="dc-"]):not([class*="mdc-"]):not([id*="dl-card"]) {
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
}
body.light-mode .text-light  { color: #475569 !important; }
body.light-mode .text-muted  { color: #64748b !important; }
body.light-mode .bg-dark     { background: #ffffff !important; color: #0f172a !important; }
body.light-mode .bg-black    { background: #e8edf4 !important; color: #0f172a !important; }

/* Generic dark container patterns (common across all pages) */
body.light-mode [class*="dark-card"],
body.light-mode [class*="dark-panel"],
body.light-mode [class*="dark-bg"],
body.light-mode [class*="dark-section"],
body.light-mode [class*="dark-box"] {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PROGRESS BARS, BADGES, TAGS
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .progress       { background: #e2e8f0 !important; }
body.light-mode .badge.bg-secondary { background: #e2e8f0 !important; color: #475569 !important; }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode footer,
body.light-mode .s-footer,
body.light-mode [class*="footer"] {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}
body.light-mode footer a,
body.light-mode [class*="footer"] a { color: #64748b !important; }

/* ═══════════════════════════════════════════════════════════════════
   EXEMPT — keep their original dark colours (download cards)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode #su-dl-card   *,
body.light-mode #su2-dl-card  *,
body.light-mode #mdcat-dl-card *,
body.light-mode #download-card * {
  transition: none !important;
  color:      revert !important;
  background: revert !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME PAGE — section-specific overrides (index.php)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .subjects-section,
body.light-mode .features-section,
body.light-mode .stats-section,
body.light-mode .testimonials-section,
body.light-mode .pricing-section,
body.light-mode .faq-section,
body.light-mode [class*="section"] {
  background: #ffffff !important;
}

body.light-mode .subject-card,
body.light-mode .feature-item,
body.light-mode .stat-item,
body.light-mode .testimonial-card,
body.light-mode .faq-item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important;
}

body.light-mode .section-title,
body.light-mode .section-subtitle { color: #0f172a !important; }

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM / VIP PAGE
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .welcome-popup .popup-content,
body.light-mode .registration-container,
body.light-mode .registration-form,
body.light-mode .price-box,
body.light-mode .payment-details,
body.light-mode .vhero,
body.light-mode .feat-card,
body.light-mode .pay-step,
body.light-mode .pay-info-box,
body.light-mode .reg-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
body.light-mode .feat-card:hover { border-color: #fecdd3 !important; }
body.light-mode .feat-title,
body.light-mode .pay-step-title  { color: #0f172a !important; }
body.light-mode .feat-desc,
body.light-mode .pay-step-desc   { color: #64748b !important; }
body.light-mode .sec-title       { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }
body.light-mode .sec-sub         { color: #065f46 !important; }
body.light-mode .reg-title       { color: #0f172a !important; }
body.light-mode .reg-sub         { color: #64748b !important; }
body.light-mode .form-hint       { color: #94a3b8 !important; }
body.light-mode .stat-num        { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }
body.light-mode .stats-bar       { background: #ffffff !important; border-color: #e2e8f0 !important; }
body.light-mode .stat-lbl        { color: #475569 !important; }
body.light-mode .pay-info-value  { color: #0f172a !important; }
body.light-mode .price-badge     { background: #fff1f2 !important; color: #e11d48 !important; }

/* ═══════════════════════════════════════════════════════════════════
   TOGGLE BUTTON (in navbars / bottom-nav)
   ═══════════════════════════════════════════════════════════════════ */
/* ── Pill toggle wrapper ── */
.lm-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  outline: none;
  transition: transform 0.2s ease !important;
}
.lm-toggle-btn:hover { transform: scale(1.05) !important; }
.lm-toggle-btn:active { transform: scale(0.97) !important; }

/* ── Side icons (sun / moon) ── */
.lm-sun-icon,
.lm-moon-icon {
  font-size: 0.88rem;
  line-height: 1;
  transition: all 0.35s ease !important;
  display: flex;
  align-items: center;
}

/* Dark mode: moon is "on" (glowing purple), sun is dim */
.lm-sun-icon  { color: rgba(255,255,255,0.28); }
.lm-moon-icon { color: #c4b5fd; filter: drop-shadow(0 0 5px rgba(196,181,253,0.7)); }

/* Light mode: sun is "on" (glowing amber), moon is dim */
body.light-mode .lm-sun-icon  { color: #f59e0b; filter: drop-shadow(0 0 5px rgba(245,158,11,0.65)); }
body.light-mode .lm-moon-icon { color: rgba(0,0,0,0.22); filter: none; }

/* ── Pill track ── */
.lm-pill-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: rgba(167,139,250,0.18);
  border: 1.5px solid rgba(167,139,250,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.35s ease !important;
  flex-shrink: 0;
}
body.light-mode .lm-pill-track {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.4) !important;
}

/* ── Sliding thumb ── */
.lm-pill-thumb {
  position: absolute;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transition: all 0.38s cubic-bezier(0.34,1.56,0.64,1) !important;
  /* Dark mode: thumb sits on the right (moon side) */
  right: 3px;
  left: auto;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  box-shadow: 0 2px 10px rgba(124,58,237,0.55), 0 0 0 2px rgba(167,139,250,0.2);
}
body.light-mode .lm-pill-thumb {
  /* Light mode: thumb slides to the left (sun side) */
  left: 3px !important;
  right: auto !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  box-shadow: 0 2px 10px rgba(245,158,11,0.55), 0 0 0 2px rgba(251,191,36,0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FLOATING TOGGLE BUTTON (fallback for pages with no navbar toggle)
   ═══════════════════════════════════════════════════════════════════ */
#lm-float-btn { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   HAMBURGER / THREE-BAR TOGGLE
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .mobile-menu-toggle {
  background: transparent !important;
}
body.light-mode .mobile-menu-toggle:hover,
body.light-mode .mobile-menu-toggle:focus {
  background: rgba(15,23,42,0.08) !important;
}
body.light-mode .mobile-menu-toggle span {
  background: #0f172a !important;
}
body.light-mode .mobile-menu-toggle.open span:nth-child(1) { background: #e11d48 !important; }
body.light-mode .mobile-menu-toggle.open span:nth-child(3) { background: #e11d48 !important; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE MENU CONTAINER & LINKS
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .mobile-menu-container {
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
  box-shadow: -4px 0 30px rgba(15,23,42,0.12) !important;
}
body.light-mode .close-menu-btn {
  color: #0f172a !important;
  background: transparent !important;
}
body.light-mode .close-menu-btn:hover {
  background: #ffffff !important;
  color: #e11d48 !important;
}
body.light-mode .mobile-nav-link,
body.light-mode .mobile-nav-link span,
body.light-mode .mobile-nav-link i {
  color: #334155 !important;
}
body.light-mode .mobile-nav-link:hover,
body.light-mode .mobile-nav-link.active {
  background: #ffffff !important;
  color: #e11d48 !important;
}
body.light-mode .mobile-nav-link:hover span,
body.light-mode .mobile-nav-link.active span,
body.light-mode .mobile-nav-link:hover i,
body.light-mode .mobile-nav-link.active i {
  color: #e11d48 !important;
}
body.light-mode .mobile-section-label,
body.light-mode .nav-section-label,
body.light-mode [class*="section-label"] {
  color: #94a3b8 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INPUTS — all pages
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode input[type="tel"],
body.light-mode input[type="number"],
body.light-mode input[type="search"],
body.light-mode input[type="date"],
body.light-mode input[type="time"],
body.light-mode input[type="url"],
body.light-mode select,
body.light-mode textarea,
body.light-mode .form-control,
body.light-mode .form-input,
body.light-mode [class*="form-field"],
body.light-mode [class*="input-field"] {
  background:       #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color:            #0f172a !important;
  border:           1px solid #cbd5e1 !important;
  border-color:     #cbd5e1 !important;
  box-shadow:       none !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder { color: #94a3b8 !important; }
body.light-mode select option { background: #ffffff !important; color: #0f172a !important; }
body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
  border-color: #e11d48 !important;
  box-shadow:   0 0 0 3px rgba(225,29,72,0.12) !important;
  outline:      none !important;
}
body.light-mode label {
  color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FORMS — all section pages
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .form-group label { color: #374151 !important; font-weight: 500 !important; }
body.light-mode .alert.alert-success {
  background: #f5f7fa !important; color: #166534 !important; border-color: #bbf7d0 !important;
}
body.light-mode .alert.alert-error {
  background: #fff1f2 !important; color: #9f1239 !important; border-color: #fecdd3 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   VIP PRELOADER — LIGHT MODE (VVIP Premium)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .vip-preloader {
  background: linear-gradient(160deg, #ffffff 0%, #f0fdf4 45%, #ecfdf5 100%) !important;
}
/* Radial glow behind the logo ring */
body.light-mode .vip-preloader::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -60%) !important;
  width: 320px !important; height: 320px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
/* Premium icon box — gradient bg, glowing border */
body.light-mode .vip-preloader-icon {
  background: linear-gradient(135deg, rgba(5,150,105,0.12), rgba(16,185,129,0.06)) !important;
  border: 1px solid rgba(5,150,105,0.4) !important;
  box-shadow: 0 0 20px rgba(16,185,129,0.18), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  color: #059669 !important;
}
body.light-mode .vip-preloader-icon i,
body.light-mode .vip-preloader-icon svg {
  color: #059669 !important;
}
/* Brand name — green gradient clip text */
body.light-mode .vip-preloader-text {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #047857 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #059669 !important;
  letter-spacing: 0.1em !important;
  text-shadow: none !important;
}
/* Sub line — muted forest green */
body.light-mode .vip-preloader-sub {
  color: rgba(4,120,87,0.6) !important;
  letter-spacing: 0.12em !important;
}
/* Inner container — subtle shadow for depth */
body.light-mode .vip-preloader-inner {
  background: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(16,185,129,0.15) !important;
  border-radius: 24px !important;
  padding: 2rem 2.5rem !important;
  box-shadow: 0 8px 40px rgba(16,185,129,0.10), 0 2px 8px rgba(15,23,42,0.06) !important;
}
/* Spinning ring — already green gradient; just reinforce */
body.light-mode .vip-preloader .ring-spin {
  stroke: url(#preloader-grad) !important;
}

/* ECAT page simple .preloader + .loader — VVIP light mode */
body.light-mode .preloader {
  background: linear-gradient(160deg, #ffffff 0%, #f0fdf4 50%, #ecfdf5 100%) !important;
}
body.light-mode .loader {
  border-color: rgba(16,185,129,0.15) !important;
  border-top-color: #059669 !important;
  box-shadow: 0 0 16px rgba(16,185,129,0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INDEX.PHP — HERO SECTION
   Hero redesigned: light pearl-white background, gradient clip title (dark→navy→emerald).
   Stats card remains dark navy — protect its green numbers and white labels from the JS.
   ═══════════════════════════════════════════════════════════════════ */
/* Hero is now light by default (pearl-white gradient).
   Title uses gradient-clip text (dark→navy→emerald). JS cannot darken it.
   Only the VVIP stats card inside is dark — protect its white labels. */
/* ─── ALL EXAM PAGES: hero + section title + stats ─── */
/* Hero background — covers index.php .hero and exam pages section.hero */
body.light-mode .hero,
body.light-mode section.hero {
  background: #ffffff !important;
}
/* h1 inside hero-content (LAT, ECAT, ecat pages) */
body.light-mode .hero-content h1 {
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
/* Subtitles / p inside hero-content */
body.light-mode .hero-content p {
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
}
/* Inline badge/pill in hero (like LAT's "Law Admission Test 2026") */
body.light-mode .hero-content > div[style*="border-radius:100px"],
body.light-mode .hero-content > div[style*="border-radius: 100px"] {
  background: rgba(5,150,105,0.10) !important;
  border-color: rgba(5,150,105,0.35) !important;
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
}
/* MDCAT hero — inline-styled div, targeted by added class */
body.light-mode .mdcat-hero-wrap {
  background: #ffffff !important;
}
body.light-mode .mdcat-hero-wrap h1 span {
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
body.light-mode .mdcat-hero-wrap p {
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
}
/* Section titles & pills */
body.light-mode .sec-pill {
  background: rgba(5,150,105,0.10) !important;
  border-color: rgba(5,150,105,0.30) !important;
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
}
/* Stats bar */
body.light-mode .stats-inner { background: #ffffff !important; }
body.light-mode .sn-green { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }
body.light-mode .sn-amber { color: #d97706 !important; -webkit-text-fill-color: #d97706 !important; }
body.light-mode .sn-cyan  { color: #0891b2 !important; -webkit-text-fill-color: #0891b2 !important; }
body.light-mode .sn-purple{ color: #7c3aed !important; -webkit-text-fill-color: #7c3aed !important; }
body.light-mode .stat-item-lbl,
body.light-mode .stat-lbl { color: #475569 !important; }
/* Subject cards on exam pages */
body.light-mode .subject-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
body.light-mode .subject-title { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }
body.light-mode .subject-description { color: #475569 !important; }
/* Sections with dark backgrounds on exam pages */
body.light-mode .section,
body.light-mode div.section {
  background: #ffffff !important;
}
/* Quick-access buttons */
body.light-mode .quick-btn {
  background: #ffffff !important;
  border-color: rgba(5,150,105,0.25) !important;
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
}

/* Pure white hero bg — kills the greenish gradient and glow */
body.light-mode .hero {
  background: #ffffff !important;
}
body.light-mode .hero::before,
body.light-mode .hero::after {
  opacity: 0 !important;
  display: none !important;
}
body.light-mode .hero .hero-title {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #047857 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #059669 !important;
}
body.light-mode .hero .hero-subtitle {
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
}
/* Badge: white bg, green text and border */
body.light-mode .hero .hero-badge {
  background: #ffffff !important;
  border: 1px solid rgba(16,185,129,0.55) !important;
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
  box-shadow: 0 2px 10px rgba(16,185,129,0.12) !important;
}
body.light-mode .hero .hero-badge span,
body.light-mode .hero .hero-badge i,
body.light-mode .hero .hero-badge svg {
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
}
/* VVIP stats card — white bg with green numbers in light mode */
body.light-mode .hero .hero-stats {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(15,23,42,0.08) !important;
}
body.light-mode .hero .hero-stat-number {
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
}
body.light-mode .hero .hero-stat-label {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INDEX.PHP — CATEGORIES SECTION HEADER
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .categories-section {
  background: #ffffff !important;
}
body.light-mode .categories-badge {
  background: rgba(225,29,72,0.08) !important;
  color: #be123c !important;
}
body.light-mode .categories-title {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}
body.light-mode .categories-subtitle {
  color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INDEX.PHP — VIP CARDS  (vip-theme.css uses !important everywhere;
   body.light-mode has higher specificity so our !important wins)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .vip-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 12px rgba(15,23,42,0.07) !important;
}
body.light-mode .vip-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 32px rgba(15,23,42,0.12) !important;
}
body.light-mode .vip-card__glow {
  opacity: 0 !important; /* no glow effect on white bg */
}
body.light-mode .vip-card__title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
}
body.light-mode .vip-card__label {
  color: #64748b !important;
}
body.light-mode .vip-card__desc {
  color: #475569 !important;
}
body.light-mode .vip-card__stat-num {
  color: #0f172a !important;
}
body.light-mode .vip-card__stat-lbl {
  color: #64748b !important;
}
body.light-mode .vip-card__stat-lbl i {
  color: #94a3b8 !important;
}
body.light-mode .vip-card__stat-div {
  background: rgba(15,23,42,0.1) !important;
}
/* Stats row container */
body.light-mode .vip-card__stats {
  background: rgba(15,23,42,0.04) !important;
  border-color: rgba(15,23,42,0.08) !important;
}
/* Arrow button */
body.light-mode .vip-card__arrow {
  background: rgba(15,23,42,0.06) !important;
  border-color: rgba(15,23,42,0.1) !important;
  color: #64748b !important;
}
body.light-mode .vip-card:hover .vip-card__arrow {
  background: rgba(15,23,42,0.1) !important;
  color: #0f172a !important;
}
body.light-mode .vip-card__cta {
  color: #334155 !important;
  border-top-color: #e2e8f0 !important;
}
body.light-mode .vip-card:hover .vip-card__cta {
  color: #0f172a !important;
  background: rgba(15,23,42,0.04) !important;
}
body.light-mode .vip-card:hover .vip-card__cta i {
  color: #0f172a !important;
}
body.light-mode .vip-card__cta i {
  color: #334155 !important;
}

/* Tags — generic (near-transparent bg → solid light pill) */
body.light-mode .vip-card__tags span {
  background: rgba(15,23,42,0.05) !important;
  border-color: rgba(15,23,42,0.1) !important;
  color: #475569 !important;
}
body.light-mode .vip-card:hover .vip-card__tags span {
  background: rgba(15,23,42,0.08) !important;
}

/* Per-variant tag accent colours — readable on white */
body.light-mode .vip-card--mdcat .vip-card__tags span {
  color: #047857 !important;
  border-color: rgba(5,150,105,0.25) !important;
  background: rgba(5,150,105,0.07) !important;
}
body.light-mode .vip-card--ecat .vip-card__tags span {
  color: #0e7490 !important;
  border-color: rgba(6,182,212,0.25) !important;
  background: rgba(6,182,212,0.07) !important;
}
body.light-mode .vip-card--general .vip-card__tags span {
  color: #6d28d9 !important;
  border-color: rgba(139,92,246,0.25) !important;
  background: rgba(139,92,246,0.07) !important;
}
body.light-mode .vip-card--lat .vip-card__tags span {
  color: #b45309 !important;
  border-color: rgba(245,158,11,0.25) !important;
  background: rgba(245,158,11,0.07) !important;
}
body.light-mode .vip-card--premium .vip-card__tags span {
  color: #374151 !important;
  border-color: rgba(55,65,81,0.2) !important;
  background: rgba(55,65,81,0.05) !important;
}

/* Icon wrap stays semi-transparent on white card */
body.light-mode .vip-card__icon-wrap {
  background: rgba(15,23,42,0.06) !important;
  border-color: rgba(15,23,42,0.1) !important;
}
body.light-mode .vip-card--mdcat .vip-card__icon-wrap { color: #059669 !important; }
body.light-mode .vip-card--ecat  .vip-card__icon-wrap { color: #0891b2 !important; }
body.light-mode .vip-card--general .vip-card__icon-wrap { color: #7c3aed !important; }
body.light-mode .vip-card--lat   .vip-card__icon-wrap { color: #d97706 !important; }

/* ═══════════════════════════════════════════════════════════════════
   INDEX.PHP — CATEGORY CARDS (old card grid — if present alongside VIP)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .category-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
body.light-mode .category-info h3 { color: #0f172a !important; }
body.light-mode .category-stat    { color: #64748b !important; }
body.light-mode .category-description { color: #475569 !important; }
body.light-mode .university-tag {
  background: rgba(5,150,105,0.08) !important;
  color: #047857 !important;
}
body.light-mode .category-card.ecat .university-tag {
  background: rgba(6,182,212,0.08) !important;
  color: #0e7490 !important;
}
body.light-mode .category-card.general .university-tag {
  background: rgba(139,92,246,0.08) !important;
  color: #6d28d9 !important;
}
body.light-mode .action-text      { color: #059669 !important; }
body.light-mode .category-card.ecat .action-text  { color: #0891b2 !important; }
body.light-mode .category-card.general .action-text { color: #7c3aed !important; }
body.light-mode .action-arrow     { color: #059669 !important; }
body.light-mode .category-action  { border-top-color: #e2e8f0 !important; }

/* Premium category card */
body.light-mode .category-card.premium {
  background: #ffffff !important;
  border-color: #dde1e7 !important;
}
body.light-mode .category-card.premium .category-info h3 { color: #0f172a !important; }
body.light-mode .category-card.premium .category-stat    { color: #64748b !important; }
body.light-mode .category-card.premium .category-description { color: #64748b !important; }
body.light-mode .category-card.premium .university-tag {
  background: #ffffff !important; color: #475569 !important; border-color: #e2e8f0 !important;
}
body.light-mode .category-card.premium .action-text  { color: #334155 !important; }
body.light-mode .category-card.premium .action-arrow { color: #334155 !important; }
body.light-mode .premium-badge {
  background: #334155 !important; color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INDEX.PHP — ABOUT SECTION
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .about-section {
  background: #ffffff !important;
}
body.light-mode .about-title {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}
body.light-mode .contact-title {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}
body.light-mode .about-content {
  color: #475569 !important;
}
body.light-mode .feature-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
body.light-mode .feature-icon {
  background: linear-gradient(135deg,#059669,#10b981) !important;
}
body.light-mode .feature-title { color: #0f172a !important; }
body.light-mode .feature-desc  { color: #475569 !important; }

/* ═══════════════════════════════════════════════════════════════════
   INDEX.PHP — COMMENT / TESTIMONIAL CARDS
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .comment-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
body.light-mode .comment-card:hover {
  box-shadow: 0 8px 28px rgba(15,23,42,0.1) !important;
}
body.light-mode .comment-info h4 {
  color: #0f172a !important;
}
body.light-mode .comment-meta {
  color: #94a3b8 !important;
}
body.light-mode .comment-text {
  color: #374151 !important;
}

/* Exam pills — light variant (near-white pill colour → dark readable text) */
body.light-mode .comment-card.mdcat .exam-pill {
  background: rgba(16,185,129,0.12) !important;
  color: #065f46 !important;
}
body.light-mode .comment-card.ecat .exam-pill {
  background: rgba(6,182,212,0.12) !important;
  color: #0e7490 !important;
}
body.light-mode .comment-card.lat .exam-pill {
  background: rgba(245,158,11,0.12) !important;
  color: #92400e !important;
}
body.light-mode .comment-card.gen .exam-pill {
  background: rgba(139,92,246,0.12) !important;
  color: #5b21b6 !important;
}

/* Comments section background + titles */
body.light-mode .comments-section {
  background: #ffffff !important;
}
body.light-mode .comments-section .comments-title,
body.light-mode .comments-title {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #047857 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #059669 !important;
}
body.light-mode .comments-section .comments-subtitle,
body.light-mode .comments-subtitle,
body.light-mode .comments-container > p {
  color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESULT PAGES — DOWNLOAD & ACTION BUTTONS
   These buttons have coloured gradient backgrounds (green, navy, gold,
   WhatsApp green). The JS changes their white text to dark in light
   mode. Force text back to white so it stays readable on the gradients.
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .btn-download,
body.light-mode .btn-download *,
body.light-mode .btn-dl-card,
body.light-mode .btn-dl-card *,
body.light-mode .btn-primary-act,
body.light-mode .btn-primary-act *,
body.light-mode .btn-gold-act,
body.light-mode .btn-gold-act * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* All gradient btn-action buttons (WhatsApp, share, etc.) keep white text.
   Only .btn-secondary-act has a light bg — override it separately below. */
body.light-mode .btn-action:not(.btn-secondary-act),
body.light-mode .btn-action:not(.btn-secondary-act) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Secondary (light bg) action button — keep its dark text */
body.light-mode .btn-secondary-act {
  background: #f0f1f5 !important;
  color: #1f2041 !important;
}
body.light-mode .btn-secondary-act * {
  color: #1f2041 !important;
  -webkit-text-fill-color: #1f2041 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INDEX.PHP — NAV PROFILE DROPDOWN  (.nav-pd / .npd-*)
   Dark-background dropdown needs full light override
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .nav-pd {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 30px rgba(15,23,42,0.12) !important;
}
body.light-mode .npd-head {
  border-bottom-color: #e2e8f0 !important;
}
body.light-mode .npd-nm {
  color: #0f172a !important;
}
body.light-mode .npd-sub {
  color: #94a3b8 !important;
}
body.light-mode .npd-link {
  color: #475569 !important;
}
body.light-mode .npd-link:hover {
  background: #ffffff !important;
  color: #0f172a !important;
}
body.light-mode .npd-link i {
  color: #059669 !important;
}
body.light-mode .npd-divider {
  border-top-color: #e2e8f0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INDEX.PHP — MOBILE PROFILE CARD  (.mob-prof-*)
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .mob-prof-card {
  background: rgba(5,150,105,0.06) !important;
  border-color: rgba(5,150,105,0.15) !important;
}
body.light-mode .mob-pname {
  color: #0f172a !important;
}
body.light-mode .mob-pcity {
  color: #64748b !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INDEX.PHP — CONTACT SECTION
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .contact-section {
  background: #ffffff !important;
}
body.light-mode .contact-details h4 {
  color: #0f172a !important;
}
body.light-mode .contact-details p {
  color: #475569 !important;
}
body.light-mode .contact-form {
  background: #ffffff !important;
  border-radius: 12px !important;
}
body.light-mode .contact-form .form-group label {
  color: #374151 !important;
}
body.light-mode .contact-form input,
body.light-mode .contact-form textarea {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
body.light-mode .contact-form input:focus,
body.light-mode .contact-form textarea:focus {
  border-color: #059669 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INDEX.PHP — ANY REMAINING GRADIENT SECTION TITLES
   Catch-all for any other .section-title / .section-heading
   that uses gradient text on index.php
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode .section-title,
body.light-mode .section-heading {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}
/* ── Explicit h2/h3/p inside .section-title — beat vip-theme white !important ── */
body.light-mode .section-title h1,
body.light-mode .section-title h2,
body.light-mode .section-title h3,
body.light-mode .section-title h4,
body.light-mode [class*="section-title"] h1,
body.light-mode [class*="section-title"] h2,
body.light-mode [class*="section-title"] h3,
body.light-mode .section-heading h1,
body.light-mode .section-heading h2,
body.light-mode .section-heading h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
body.light-mode .section-title p,
body.light-mode [class*="section-title"] p,
body.light-mode .section-heading p {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}
body.light-mode .section-subtitle,
body.light-mode .section-desc {
  color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   VVIP GLOBAL POLISH — ALL PAGES (Light Mode)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Body & page base — pure white ── */
body.light-mode {
  background-color: #ffffff !important;
}

/* ── General section backgrounds — white / neutral only ── */
body.light-mode section,
body.light-mode .section {
  background-color: transparent !important;
}
body.light-mode section:nth-child(even),
body.light-mode .section:nth-child(even) {
  background-color: #f5f7fa !important;
}

/* ── Subject / topic cards — clean white with green left accent ── */
body.light-mode .subject-card,
body.light-mode .topic-card,
body.light-mode .test-card,
body.light-mode .exam-card,
body.light-mode .rv-card,
body.light-mode [class*="subject-card"],
body.light-mode [class*="topic-card"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(15,23,42,0.06) !important;
}
body.light-mode .subject-card:hover,
body.light-mode .topic-card:hover,
body.light-mode .test-card:hover,
body.light-mode .exam-card:hover {
  border-color: rgba(5,150,105,0.4) !important;
  box-shadow: 0 4px 20px rgba(5,150,105,0.12) !important;
}

/* ── Card titles & text ── */
body.light-mode .subject-card h2, body.light-mode .subject-card h3,
body.light-mode .subject-card h4, body.light-mode .subject-card .sc-title,
body.light-mode .topic-card h2,   body.light-mode .topic-card h3,
body.light-mode .test-card h2,    body.light-mode .test-card h3,
body.light-mode .exam-card h2,    body.light-mode .exam-card h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
body.light-mode .subject-card p,  body.light-mode .subject-card .sc-desc,
body.light-mode .topic-card p,    body.light-mode .test-card p,
body.light-mode .exam-card p {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* ── Card icon boxes ── */
body.light-mode .subject-card .sc-icon,
body.light-mode .sc-icon {
  background: linear-gradient(135deg, rgba(5,150,105,0.12), rgba(16,185,129,0.06)) !important;
  border: 1px solid rgba(5,150,105,0.25) !important;
  color: #059669 !important;
}
body.light-mode .subject-card .sc-icon i,
body.light-mode .sc-icon i { color: #059669 !important; }

/* ── Premium badge / VIP label ── */
body.light-mode .vip-badge,
body.light-mode [class*="vip-label"],
body.light-mode [class*="premium-badge"] {
  background: linear-gradient(135deg, #b45309, #d97706) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 2px 8px rgba(180,83,9,0.25) !important;
}

/* ── CTA / primary buttons — emerald on white ── */
body.light-mode .cta-btn,
body.light-mode .hero-cta,
body.light-mode [class*="btn-primary"],
body.light-mode [class*="vip-btn"],
body.light-mode .quick-btn {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(5,150,105,0.25) !important;
}
body.light-mode .cta-btn:hover,
body.light-mode .hero-cta:hover,
body.light-mode [class*="btn-primary"]:hover,
body.light-mode .quick-btn:hover {
  box-shadow: 0 6px 24px rgba(5,150,105,0.35) !important;
}

/* ── Secondary / outline buttons ── */
body.light-mode [class*="btn-outline"],
body.light-mode [class*="btn-secondary"] {
  background: #ffffff !important;
  border: 1.5px solid #059669 !important;
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
}

/* ── Footer — clean light with green branding ── */
body.light-mode footer,
body.light-mode .footer,
body.light-mode .vip-footer {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}
body.light-mode footer *,
body.light-mode .footer *,
body.light-mode .vip-footer * {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}
body.light-mode footer h1, body.light-mode footer h2, body.light-mode footer h3,
body.light-mode footer h4, body.light-mode footer .footer-brand,
body.light-mode .vip-footer h1, body.light-mode .vip-footer h2,
body.light-mode .vip-footer h3, body.light-mode .vip-footer .footer-brand {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
body.light-mode footer a:hover,
body.light-mode .footer a:hover,
body.light-mode .vip-footer a:hover { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }

/* ── Divider lines ── */
body.light-mode hr,
body.light-mode .divider { border-color: #e2e8f0 !important; }

/* ── Tables ── */
body.light-mode table { background: #ffffff !important; }
body.light-mode thead,
body.light-mode thead tr,
body.light-mode thead th {
  background: linear-gradient(90deg, #059669, #10b981) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.light-mode tbody tr:nth-child(even) { background: #fafafa !important; }
body.light-mode tbody tr:hover { background: #f0f4ff !important; }
body.light-mode td, body.light-mode th {
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

/* ── Progress / score bars ── */
body.light-mode .progress,
body.light-mode [class*="progress-bar"],
body.light-mode [class*="score-bar"] {
  background: #e2e8f0 !important;
}
body.light-mode .progress-fill,
body.light-mode [class*="progress-fill"] {
  background: linear-gradient(90deg, #059669, #10b981) !important;
}

/* ── MCQ / question blocks ── */
body.light-mode .question-card,
body.light-mode .mcq-card,
body.light-mode [class*="question-card"],
body.light-mode [class*="mcq-block"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(15,23,42,0.05) !important;
}
body.light-mode .option-item,
body.light-mode [class*="option-"] {
  background: #fafafa !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #334155 !important;
}
body.light-mode .option-item:hover,
body.light-mode [class*="option-"]:hover {
  background: #f5f7fa !important;
  border-color: rgba(5,150,105,0.4) !important;
}
body.light-mode .option-item.correct,
body.light-mode [class*="option-correct"] {
  background: #dcfce7 !important;
  border-color: #059669 !important;
  color: #064e3b !important;
}
body.light-mode .option-item.wrong,
body.light-mode [class*="option-wrong"] {
  background: #fff1f2 !important;
  border-color: #e11d48 !important;
  color: #9f1239 !important;
}

/* ── Sidebar / off-canvas panels ── */
body.light-mode .sidebar,
body.light-mode .off-canvas,
body.light-mode [class*="sidebar"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* ── Modal / popup ── */
body.light-mode .modal-content,
body.light-mode [class*="modal-body"],
body.light-mode [class*="modal-content"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 60px rgba(15,23,42,0.15) !important;
}
body.light-mode .modal-header,
body.light-mode [class*="modal-header"] {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-bottom: none !important;
}

/* ── Toast / alert ── */
body.light-mode .toast,
body.light-mode [class*="toast-"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12) !important;
}

/* ── Input / form fields ── */
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5,150,105,0.12) !important;
  outline: none !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder { color: #94a3b8 !important; }

/* ── Notification / info box ── */
body.light-mode .info-box,
body.light-mode [class*="info-card"],
body.light-mode [class*="notice-"] {
  background: #f5f7fa !important;
  border: 1px solid rgba(5,150,105,0.25) !important;
  color: #065f46 !important;
}

/* ── Countdown / timer ── */
body.light-mode .countdown,
body.light-mode [class*="timer"],
body.light-mode [class*="countdown"] {
  background: #ffffff !important;
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
  border: 1px solid rgba(5,150,105,0.2) !important;
  box-shadow: 0 2px 12px rgba(5,150,105,0.1) !important;
}

/* ── Scrollbar — green thumb ── */
body.light-mode ::-webkit-scrollbar { width: 6px; }
body.light-mode ::-webkit-scrollbar-track { background: #f1f5f9; }
body.light-mode ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #10b981, #059669);
  border-radius: 99px;
}