/* ============================================================
   PHOENIX ONLINE EDUCATION — Site-wide Dark Mode
   ────────────────────────────────────────────────────────────
   Activated by <html data-theme="dark">, set/removed by the
   toggle button + script living in includes/header.php.

   Loaded ONCE from header.php, so it automatically applies to
   every page that includes the header (which is every page).

   COVERAGE IN THIS PASS:
     - Site-wide CSS variable overrides (--navy, --slate, --gray,
       --primary, --secondary, --bg-light, --white, --c, --cd, --cdd)
       These override the SAME variable names each page defines in
       its own <style> block. `:root[data-theme="dark"]` has higher
       specificity than a page's plain `:root{...}`, so this wins
       automatically regardless of source order — no !important
       needed for anything already using these variables.
     - header.php: nav, mega-menu, search modal, dropdowns
     - index.php: hero, trending cards, why-choose cards, counsellor
       stack, enquiry modal, testimonials
     - blog.php (listing/hero page): .bh, .ac article cards, .mo modal,
       .sb-box sidebar
     - Shared blog ARTICLE template (.article-wrap, .fee-table, etc.)
       — this one stylesheet covers all ~20 individual blog-*.php
       files at once, since they all reuse these same class names.

   NOT YET COVERED (still renders in light colors under dark mode
   until a follow-up pass): about.php, get-in-touch.php, programs.php,
   view.php (individual program pages). The toggle itself still works
   fine on these pages — they just won't visually change yet.
   ============================================================ */

/* ── 1. Shared CSS variable overrides ─────────────────────────── */
:root[data-theme="dark"] {
  /* index.php's variable set */
  --primary: #2DD4BF;
  --primary-dark: #14B8A6;
  --primary-light: #134E4A;
  --secondary: #22D3EE;
  --navy: #E2E8F0;      /* was near-black text, now light text */
  --slate: #CBD5E1;
  --gray: #94A3B8;
  --bg-light: #111C30;
  --white: #141F35;

  /* blog.php / blog article variable set (some names overlap, fine) */
  --c: #22D3EE;
  --cd: #06B6D4;
  --cdd: #38BDF8;

  /* about.php / programs.php / view.php variable set */
  --dark: #E2E8F0;
  --mid: #94A3B8;
  --lt: #141F35;
  --soft: #141F35;
  --wh: #141F35;
  --br: rgba(255,255,255,.1);
  --bdr: rgba(255,255,255,.1);
}

/* ── 2. Global reset ───────────────────────────────────────────── */
[data-theme="dark"] body {
  background: #0B1220;
  color: #E2E8F0;
}
[data-theme="dark"] a { color: inherit; }
[data-theme="dark"] img { filter: brightness(.94) contrast(1.02); }
[data-theme="dark"] .site-logo,
[data-theme="dark"] .footer-brand img,
[data-theme="dark"] .program-card img,
[data-theme="dark"] .arc-logo,
[data-theme="dark"] .mega-tab-icon-logo img { filter: none; }

/* ── 3. Toggle button — pill switch with sliding icon knob ────── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle-track {
  display: flex;
  align-items: center;
  width: 50px;
  height: 27px;
  border-radius: 999px;
  background: #E2E8F0;
  border: 1px solid #CBD5E1;
  padding: 2px;
  box-sizing: border-box;
  transition: background .25s ease, border-color .25s ease;
}
.theme-toggle-knob {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0);
  transition: transform .25s cubic-bezier(.4,0,.2,1), background .25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.theme-toggle-knob svg { width: 13px; height: 13px; }
.theme-icon-sun { display: block; color: #1E293B; }
.theme-icon-moon { display: none; color: #fff; }
[data-theme="dark"] .theme-toggle-track { background: #1E293B; border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .theme-toggle-knob { transform: translateX(23px); background: #22D3EE; }
[data-theme="dark"] .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }

/* ── 4. header.php — nav, search, mega-menu, modals ───────────── */
[data-theme="dark"] .main-header { background: rgba(11,18,32,.97); border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .main-nav > a, [data-theme="dark"] .main-nav > li > a { color: #CBD5E1; }
[data-theme="dark"] .main-nav > a:hover, [data-theme="dark"] .main-nav > li > a:hover { background: rgba(6,182,212,.15); color: #67E8F9; }
[data-theme="dark"] .header-search-bar { background: #141F35; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .header-search-bar:hover { background: #1B2A47; }
[data-theme="dark"] .header-search-text { color: #94A3B8; }
[data-theme="dark"] .header-search-text .typed { color: #E2E8F0; }
[data-theme="dark"] .header-search-icon { color: #64748B; }
[data-theme="dark"] .mega-parent > .mega-menu { background: #111C30 !important; box-shadow: 0 30px 70px -15px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) !important; }
[data-theme="dark"] .mega-left { background: linear-gradient(180deg,#0B1424 0%,#0D1930 100%) !important; border-right-color: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .mega-left .mega-tab { color: #CBD5E1; }
[data-theme="dark"] .mega-left .mega-tab:not(.active):hover { background: rgba(6,182,212,.12); }
[data-theme="dark"] .mega-right-header { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .mega-right-header h3 { color: #F1F5F9; }
[data-theme="dark"] .mega-right-header span { color: #94A3B8; }
[data-theme="dark"] .program-card { background: #141F35 !important; border-color: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .program-card:hover { background: #1B2A47 !important; border-color: #06B6D4 !important; }
[data-theme="dark"] .program-card h4 { color: #F1F5F9 !important; }
[data-theme="dark"] .program-card p { color: #67E8F9 !important; }
[data-theme="dark"] .program-card img { background: #1E293B !important; }
[data-theme="dark"] .mega-view-all-row { border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .dropdown-menu { background: #141F35 !important; box-shadow: 0 20px 45px -10px rgba(0,0,0,.6) !important; }
[data-theme="dark"] .dropdown-menu li a { color: #CBD5E1 !important; }
[data-theme="dark"] .dropdown-menu li a:hover { background: rgba(6,182,212,.12) !important; color: #67E8F9 !important; }
[data-theme="dark"] .global-search-modal { background: rgba(11,18,32,.94); }
[data-theme="dark"] .gsm-input-wrap { border-bottom-color: #E2E8F0; }
[data-theme="dark"] .gsm-input-wrap input { color: #E2E8F0; }
[data-theme="dark"] .gsm-close { color: #E2E8F0; }
[data-theme="dark"] .gsm-results { background: rgba(15,27,46,.95); }
[data-theme="dark"] .gsm-results a { color: #CBD5E1; border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .gsm-results a strong { color: #F1F5F9; }
[data-theme="dark"] .gsm-label { background: rgba(15,27,46,.9); color: #94A3B8; border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .b24-modal-content { background: rgba(15,27,46,.98); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .b24-header-section h3 { color: #F1F5F9; }
[data-theme="dark"] .main-nav.show { background: rgba(15,27,46,.97); }

/* ── 5. index.php — homepage sections ─────────────────────────── */
[data-theme="dark"] .trending-card, [data-theme="dark"] .coming-soon-card {
  background: #141F35; border-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .trending-card-name, [data-theme="dark"] .wcard-body h3,
[data-theme="dark"] .sh { color: #F1F5F9; }
[data-theme="dark"] .trending-card-uni, [data-theme="dark"] .trending-card-meta,
[data-theme="dark"] .wcard-desc { color: #94A3B8; }
[data-theme="dark"] .category-tabs-wrapper, [data-theme="dark"] .category-tab { background: #141F35; border-color: rgba(255,255,255,.07); color: #CBD5E1; }
[data-theme="dark"] .category-tab.active { background: linear-gradient(135deg,#0891B2,#06B6D4); color: #fff; }
[data-theme="dark"] .why { background: #0B1220; }
[data-theme="dark"] .counsellor-stack-section { background: #0E1830; }
[data-theme="dark"] .ai-section-wrap, [data-theme="dark"] .ai-box { background: #141F35 !important; border-color: rgba(255,255,255,.08) !important; }
/* .trending-category is the shared outer box for EVERY category tab panel
   (MBA, Doctorate, BBA, etc.) — one of them (Doctorate) sets a translucent
   white background via an inline style="" attribute directly in the HTML,
   which needs !important to beat; the rest use the same rgba(255,255,255,.6)
   via the plain CSS class, which composited to visible gray on a dark page
   even though the text inside (var(--navy)/var(--gray)) was already correct. */
[data-theme="dark"] .trending-category { background: #141F35 !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme="dark"] .trending-category:hover { background: #1B2A47 !important; }
[data-theme="dark"] .enquiry-left, [data-theme="dark"] .enquiry-right { background: #141F35; }
[data-theme="dark"] .ef-row input, [data-theme="dark"] .ef-row select { background: #0B1220; border-color: rgba(255,255,255,.15); color: #E2E8F0; }
[data-theme="dark"] .tc { background: #141F35; border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .hero { background: linear-gradient(170deg,#0B1220 0%,#0E1830 45%,#0B1220 100%); }

/* Hero side-stat cards + secondary stat cards (70+, 1,00,000+, etc.) —
   these use a translucent WHITE glass background with hardcoded dark
   text (#111827/#0F172A/#374151/#6B7280), so they went dark-on-dark
   once the page behind them turned dark. Switched to a solid dark glass
   card with explicit light text instead of relying on transparency. */
[data-theme="dark"] .hsc, [data-theme="dark"] .hsc2 {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
}
[data-theme="dark"] .hsc:hover, [data-theme="dark"] .hsc2:hover { background: rgba(255,255,255,.1); }
[data-theme="dark"] .hsc-num, [data-theme="dark"] .hsc2-num { color: #F1F5F9; }
[data-theme="dark"] .hsc-label, [data-theme="dark"] .hsc2-label { color: #CBD5E1; }
[data-theme="dark"] .hsc-sub { color: #94A3B8; }
[data-theme="dark"] .ai-stat span { color: #94A3B8; }
[data-theme="dark"] .doctorate-section { background: linear-gradient(180deg, rgba(6,182,212,.08) 0%, transparent 100%); }
[data-theme="dark"] .ef-phone-prefix { background: #0B1220; color: #94A3B8; border-right-color: rgba(255,255,255,.12); }
[data-theme="dark"] .b24-modal { background: #141F35; }
[data-theme="dark"] .b24-overlay { background: rgba(11,18,32,.7); }

/* Hardcoded dark text found in a full sweep — these never used the
   shared --navy/--slate variables, so they stayed black-on-dark once
   their containers went dark. Fixed at the source class instead of
   waiting for each one to surface as another invisible-text report. */
[data-theme="dark"] .hero h1 { color: #F1F5F9; }
[data-theme="dark"] .aif { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.15) !important; box-shadow: none !important; }
[data-theme="dark"] .aif h4 { color: #F1F5F9 !important; }
[data-theme="dark"] .aif p { color: #94A3B8 !important; }
[data-theme="dark"] .enquiry-left h3, [data-theme="dark"] .enquiry-right h4 { color: #F1F5F9; }
[data-theme="dark"] .enquiry-points li { color: #CBD5E1; }
[data-theme="dark"] .ef-row label { color: #CBD5E1; }
[data-theme="dark"] .card-act-btn.btn-brochure { color: #94A3B8; border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .card-act-btn.btn-brochure:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
[data-theme="dark"] .ep-card-name { color: #F1F5F9; }
[data-theme="dark"] .hl-value { color: #F1F5F9; }
[data-theme="dark"] .gate-overlay-text { color: #F1F5F9; }

/* Counsellor cards — each card keeps its own hue, just darkened, so the
   light var(--navy)/var(--slate) text stays readable instead of going
   invisible against a still-light pastel background. */
[data-theme="dark"] .counsellor-card-stack:nth-child(1),
[data-theme="dark"] .counsellor-card-stack:nth-child(6) { background: linear-gradient(135deg,#0B2530,#0A2028); border-color: rgba(6,182,212,.3); }
[data-theme="dark"] .counsellor-card-stack:nth-child(2) { background: linear-gradient(135deg,#0C1E30,#0A1826); border-color: rgba(59,130,246,.3); }
[data-theme="dark"] .counsellor-card-stack:nth-child(3) { background: linear-gradient(135deg,#181430,#141026); border-color: rgba(99,102,241,.3); }
[data-theme="dark"] .counsellor-card-stack:nth-child(4) { background: linear-gradient(135deg,#2A2009,#221A07); border-color: rgba(217,119,6,.3); }
[data-theme="dark"] .counsellor-card-stack:nth-child(5) { background: linear-gradient(135deg,#2A0F17,#210C12); border-color: rgba(225,29,72,.3); }
[data-theme="dark"] .counsellor-avatar-stack { background: #F1F5F9; }
[data-theme="dark"] .btn-talk-stack { background: rgba(255,255,255,.1); }
[data-theme="dark"] .btn-talk-stack:hover { background: var(--primary); color: #0B1220; }

/* Why-Choose-Phoenix cards — same fix: darken each card's own tint
   (.w1–.w6) rather than only the inner box, and brighten the large
   background numeral + divider/toggle so they read on a dark card. */
[data-theme="dark"] .w1, [data-theme="dark"] .w6 { background: linear-gradient(135deg,#0B2530,#0A2028); border-color: rgba(6,182,212,.3); }
[data-theme="dark"] .w2, [data-theme="dark"] .w3 { background: linear-gradient(135deg,#0C1E30,#0A1826); border-color: rgba(59,130,246,.3); }
[data-theme="dark"] .w4 { background: linear-gradient(135deg,#2A2009,#221A07); border-color: rgba(217,119,6,.3); }
[data-theme="dark"] .w5 { background: linear-gradient(135deg,#2A0F17,#210C12); border-color: rgba(225,29,72,.3); }
[data-theme="dark"] .w1 .wcard-num, [data-theme="dark"] .w6 .wcard-num { color: rgba(34,211,238,.35); }
[data-theme="dark"] .w2 .wcard-num, [data-theme="dark"] .w3 .wcard-num { color: rgba(96,165,250,.35); }
[data-theme="dark"] .w4 .wcard-num { color: rgba(251,191,36,.35); }
[data-theme="dark"] .w5 .wcard-num { color: rgba(251,113,133,.35); }
[data-theme="dark"] .wcard-divider { background: rgba(255,255,255,.12); }
[data-theme="dark"] .wcard-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #CBD5E1; }
[data-theme="dark"] .wcard-points { background: rgba(255,255,255,.05); }
[data-theme="dark"] .wcard-points li { color: #CBD5E1; }

/* ── 6. blog.php — listing/hero page ──────────────────────────── */
[data-theme="dark"] .bh { background: linear-gradient(135deg,#071422 0%,#0B1929 55%,#0D2137 100%); }
[data-theme="dark"] .bh-title { color: #F1F5F9; }
[data-theme="dark"] .bh-sub { color: rgba(255,255,255,.55); }
[data-theme="dark"] .bh-num span { color: #94A3B8; }
[data-theme="dark"] .bh-feature { background: #141F35; border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .bh-feature:hover { background: #1B2A47; }
[data-theme="dark"] .bh-feature-body h3 { color: #F1F5F9; }
[data-theme="dark"] .ac { background: #141F35; border-color: rgba(255,255,255,.07); }
/* .ac.hero-card carries its own #fff background at equal specificity to
   the plain .ac rule above, and — because it's declared in the page's
   own <style> block, which sits after this stylesheet in the HTML — it
   was winning the tie-break and staying white. Matching the compound
   selector directly forces this one through too. */
[data-theme="dark"] .ac.hero-card { background: #141F35 !important; border-color: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .ac-title { color: #F1F5F9; }
[data-theme="dark"] .ac-excerpt, [data-theme="dark"] .ac-date, [data-theme="dark"] .ac-min { color: #94A3B8; }
[data-theme="dark"] .mo-box { background: #141F35; }
[data-theme="dark"] .sb-box { background: #141F35; border-color: rgba(255,255,255,.07); }

/* ── 7. Shared blog ARTICLE template — covers all blog-*.php ──── */
[data-theme="dark"] .article-wrap { color: #E2E8F0; }
[data-theme="dark"] .article-title { color: #F1F5F9; }
[data-theme="dark"] .article-meta { color: #94A3B8; }
[data-theme="dark"] .article-body p, [data-theme="dark"] .article-body li { color: #CBD5E1; }
[data-theme="dark"] .article-body h3 { color: #F1F5F9; }
[data-theme="dark"] .fee-wrap { border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .fee-table th { background: #141F35; color: #67E8F9; }
[data-theme="dark"] .fee-table td { color: #CBD5E1; border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .article-cta { background: #141F35; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .article-related h3 { color: #F1F5F9; }
[data-theme="dark"] .article-related-card { background: #141F35; border-color: rgba(255,255,255,.08); box-shadow: none; }
[data-theme="dark"] .article-related-card:hover { border-color: #06B6D4; }
[data-theme="dark"] .arc-name { color: #F1F5F9; }
[data-theme="dark"] .article-hero-img { background-color: #141F35; }

/* ── 8. Footer is already permanently dark by design — no change ─ */

/* ── 9. about.php ──────────────────────────────────────────────── */
[data-theme="dark"] .val-card { background: #141F35; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .val-card:hover { border-color: rgba(6,182,212,.35); }
[data-theme="dark"] .ab-story-img::after { display: none; }

/* ── 10. get-in-touch.php ─────────────────────────────────────── */
[data-theme="dark"] .counsellor-card { background: rgba(16,27,46,.75); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .cx-promise { background: rgba(16,27,46,.6); }
[data-theme="dark"] .cx-visit { background: rgba(16,27,46,.4); }
[data-theme="dark"] .cx-modal { background: #141F35; }
[data-theme="dark"] .cx-map-overlay { background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 100%); }

/* ── 11. programs.php ─────────────────────────────────────────── */
[data-theme="dark"] .ep-filters { background: #141F35; box-shadow: 0 4px 32px rgba(0,0,0,.3); }
[data-theme="dark"] .ep-fg:hover { background: rgba(6,182,212,.08); }
[data-theme="dark"] .ep-card { background: #141F35; box-shadow: 0 5px 18px rgba(0,0,0,.3); }
[data-theme="dark"] .ep-card-name { color: #F1F5F9; }
[data-theme="dark"] .ep-card-uni, [data-theme="dark"] .ep-card-meta,
[data-theme="dark"] .ep-card-meta span, [data-theme="dark"] .ep-pill-label,
[data-theme="dark"] .ep-empty { color: #94A3B8; }
[data-theme="dark"] .ep-card-meta strong { color: #CBD5E1; }

/* ── 12. view.php — individual program pages ──────────────────── */
[data-theme="dark"] .sticky-nav { background: rgba(11,18,32,.95); box-shadow: 0 2px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .snav-tab { background: #141F35; color: #CBD5E1; }
[data-theme="dark"] .snav-tab:hover, [data-theme="dark"] .snav-tab.active { background: rgba(6,182,212,.15); }
[data-theme="dark"] .card { background: #141F35; box-shadow: 0 5px 18px rgba(0,0,0,.3); }
[data-theme="dark"] .card p, [data-theme="dark"] .card li,
[data-theme="dark"] .spec-body li, [data-theme="dark"] .faq-body,
[data-theme="dark"] .pp-sub { color: #CBD5E1; }
[data-theme="dark"] .card.accent span, [data-theme="dark"] .hl-label,
[data-theme="dark"] .card.testi small, [data-theme="dark"] .fee-row strong,
[data-theme="dark"] .fee-note { color: #94A3B8; }
[data-theme="dark"] .spec-body { border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .faq-body { border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .step { background: #141F35; }
[data-theme="dark"] .partner-pill { background: #141F35; color: #CBD5E1; box-shadow: none; }
[data-theme="dark"] .pp-badge { background: rgba(6,182,212,.15); color: #67E8F9; }
[data-theme="dark"] .faq-summary:hover { background: #141F35; }
[data-theme="dark"] details.faq-item[open] .faq-summary { background: rgba(6,182,212,.15); }
[data-theme="dark"] .faq-icon { background: rgba(6,182,212,.15); }
[data-theme="dark"] .brochure-modal { background: #141F35; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
[data-theme="dark"] .brochure-modal-note { background: #141F35; color: #94A3B8; border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .schol-table th { background: #141F35; color: #67E8F9; }
[data-theme="dark"] .schol-table td { border-color: rgba(255,255,255,.08); color: #CBD5E1; }
[data-theme="dark"] .gate-overlay { background: rgba(11,18,32,.85); }
/* details.spec-item was missed in the earlier pass — its text (.spec-summary
   via var(--dark), the module list via .spec-body li) was already correctly
   set to light colors, but the card itself was still hardcoded white, so
   that text had nothing dark to show up against. This was the actual cause
   of the "Marketing / Human Resources" specialization list going invisible. */
[data-theme="dark"] details.spec-item { background: #141F35; border-color: rgba(255,255,255,.1); }
/* "Key Modules:" uses an inline style="color:#444" directly in view.php's
   markup — inline styles beat any normal external CSS rule regardless of
   specificity, so !important is required here specifically to reach it. */
[data-theme="dark"] .spec-body strong[style] { color: #CBD5E1 !important; }
/* .fee-table's own "tbody td:first-child" rule is more specific than the
   shared blog-article override above, so it was still winning here —
   this matches it exactly to force the dark-mode color through. */
[data-theme="dark"] .fee-table tbody td,
[data-theme="dark"] .fee-table tbody td:first-child { color: #CBD5E1; }

/* ── 13. blog.php — a couple of remaining borderline-contrast spots ─ */
[data-theme="dark"] .bh-feature-body p { color: #94A3B8; }

/* ── 14. style.css — the global stylesheet's own variable set ────
   Just discovered: style.css (loaded on every page) has its OWN --t1
   through --t4 text-color variables, used across dozens of shared
   components (page-hero, univ-card, compare-table, contact/blog/team
   cards, policy pages, info-box, etc.) that dark-mode.css never had
   visibility into before now. Overriding these here, the same way as
   the other variable sets, retroactively fixes text contrast across
   all of them at once. */
:root[data-theme="dark"] {
  --t1: #F1F5F9;
  --t2: #CBD5E1;
  --t3: #94A3B8;
  --t4: #94A3B8;
}
[data-theme="dark"] body::before {
  /* The "aurora blob" decorative layer behind every page — pale pastel
     blobs that would otherwise show through a dark background looking
     like stray light patches. Replaced with a subtle dark teal/navy
     glow instead of just hiding it, so dark mode keeps the same
     decorative touch rather than going flat. */
  background:
    radial-gradient(ellipse 55% 50% at 5%  15%, rgba(6,182,212,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 90% 20%, rgba(6,182,212,.10) 0%, transparent 62%),
    radial-gradient(ellipse 45% 42% at 10% 82%, rgba(20,184,166,.08) 0%, transparent 58%),
    radial-gradient(ellipse 40% 38% at 85% 78%, rgba(99,102,241,.08) 0%, transparent 55%),
    radial-gradient(ellipse 35% 40% at 50% 50%, rgba(6,182,212,.06) 0%, transparent 50%);
  opacity: .6;
}
[data-theme="dark"] .s-bg2, [data-theme="dark"] .s-lav { background: rgba(255,255,255,.04); }
[data-theme="dark"] .s-bg3, [data-theme="dark"] .s-wc, [data-theme="dark"] .s-mc, [data-theme="dark"] .s-peach { background: rgba(255,255,255,.03); }
[data-theme="dark"] .info-box { background: rgba(6,182,212,.08); border-color: rgba(6,182,212,.2); }
[data-theme="dark"] .compare-table tr:nth-child(even) td { background: rgba(255,255,255,.04); }
[data-theme="dark"] .compare-table td { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .univ-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .univ-card-logo { background: rgba(255,255,255,.85); }
[data-theme="dark"] .blog-card, [data-theme="dark"] .team-card,
[data-theme="dark"] .contact-form-wrap, [data-theme="dark"] .ai-form-wrap { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .blog-card-img { background: #141F35; }
[data-theme="dark"] .thankyou-wrap { background: transparent; }
[data-theme="dark"] .thankyou-box { background: #141F35; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .page-hero { background: linear-gradient(135deg,#0B1220 0%,#0E1830 100%); border-bottom-color: rgba(255,255,255,.08); }

/* ── 15. careers.php / experience.php ─────────────────────────────
   Both share the same .coming-soon-box class, so one rule covers both
   pages' main content box. Hero sections use their own page-specific
   class names (.careers-hero / .exp-hero) with hardcoded light-cyan
   gradients and hardcoded #0F172A headings. */
[data-theme="dark"] .careers-hero, [data-theme="dark"] .exp-hero {
  background: linear-gradient(135deg,#0B2530 0%,#0A2028 50%,#0B1220 100%);
}
[data-theme="dark"] .careers-hero h1, [data-theme="dark"] .exp-hero h1 { color: #F1F5F9; }
[data-theme="dark"] .careers-hero p, [data-theme="dark"] .exp-hero p { color: #CBD5E1; }
[data-theme="dark"] .coming-soon-box { background: rgba(255,255,255,.05); border-color: rgba(6,182,212,.25); }
[data-theme="dark"] .coming-soon-box h2 { color: #F1F5F9; }
[data-theme="dark"] .coming-soon-box p { color: #94A3B8; }

/* ── 16. ai-counselling.php — its own card system ──────────────── */
[data-theme="dark"] .ai-card, [data-theme="dark"] .alt-card, [data-theme="dark"] .connect-card {
  background: #141F35; border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .rec-card { background: linear-gradient(135deg,#0B2530,#0A2028); }
[data-theme="dark"] .profile-card { background: linear-gradient(135deg,#0B2530,#0A2028); border-color: rgba(103,232,249,.3); }
[data-theme="dark"] .insight-card { background: rgba(255,255,255,.05); }
[data-theme="dark"] .profile-item .pi-label { color: #94A3B8; }
[data-theme="dark"] .profile-item .pi-val { color: #F1F5F9; }
/* .err-box (light red error banner) is left as-is — an error state
   staying attention-red regardless of theme is a reasonable, common
   pattern and reads fine on dark backgrounds too. */