/* ============================================================================
   Dr. Ijezie's STEM Studio — Mathematical Vision Theme  (v10, cinematic dark)
   ----------------------------------------------------------------------------
   A DARK-FIRST override layer. Loads AFTER global.css + design-tokens.css,
   so it is the final cascade layer. It re-skins every page to the premium
   cinematic "mathematical vision" look — deep indigo void, luminous violet /
   blue glass, warm gold particles — without touching individual HTML files.

   It intentionally keeps the SAME token vocabulary as the retired architect
   theme (--paper, --ink, --accent, --ah-*, per-course hues) so token-driven
   pages flip automatically. "--paper" now means the deep-space page ground.

   Predecessor archived at legacy-theme/architect-tokens.legacy-light.css.

   WCAG AA targeted on all text/background pairs (checked against --paper and
   --surface): ink 15.9:1 · ink-2 10.2:1 · muted 5.5:1 · accent 5.9:1.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,500;1,600&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ============================================================
   1. PALETTE + TOKEN REMAP
   ============================================================ */
:root {
  /* ---- Mathematical Vision palette (canonical) ---- */
  --void:         #05070F;   /* deepest ground: splash, hero wells        */
  --paper:        #0A0E1F;   /* page ground (token name kept for compat)  */
  --surface:      #10162D;   /* card / panel                              */
  --surface-2:    #161D3A;   /* raised card, hover                        */
  --recessed:     #070B18;   /* footer, wells                             */
  --ink:          #EEF1FA;   /* headings, strong text                     */
  --ink-2:        #C3CBE3;   /* body copy                                 */
  --muted:        #8A94B8;   /* labels, captions — 5.5:1 on surface       */
  --line:         rgba(167,166,255,.14);
  --line-strong:  rgba(167,166,255,.30);
  --accent:       #8B87F4;   /* luminous periwinkle — the studio violet   */
  --accent-bright:#A8A6FF;
  --gold:         #E3B65C;   /* warm particle gold                        */

  /* ---- Per-course hues (brightened for dark ground) ---- */
  --c-alg1: #6EA8FF;   /* Algebra I   — electric blue     */
  --c-geo:  #4FD8B0;   /* Geometry    — luminous teal     */
  --c-alg2: #B08CFF;   /* Algebra II  — radiant violet    */
  --c-sci:  #E3B65C;   /* Science     — amber (archive)   */
  --c-precalc: #4FC9DE; /* Pre-Calculus — glacial cyan    */
  --c-calc: #FF7BA9;   /* Calculus     — nova rose        */
  --c-phys:   #8F86F0; /* HS Physics   — deep indigo      */
  --c-apphys: #9FB2D0; /* AP Physics   — starlight slate  */

  /* ---- Tints for badges / soft fills (dark theme = glow washes) ---- */
  --c-alg1-tint: rgba(110,168,255,.14);
  --c-geo-tint:  rgba(79,216,176,.13);
  --c-alg2-tint: rgba(176,140,255,.14);
  --c-sci-tint:  rgba(227,182,92,.14);
  --c-precalc-tint: rgba(79,201,222,.13);
  --c-calc-tint: rgba(255,123,169,.13);
  --c-phys-tint: rgba(143,134,240,.14);
  --c-apphys-tint: rgba(159,178,208,.14);
  --accent-tint: rgba(139,135,244,.14);

  /* ---- Typography stacks ---- */
  --font-display: 'Cormorant Garamond', 'Space Grotesk', Georgia, serif;
  --font-heading: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Elevation (cinematic = depth + faint aura) ----
     Names kept from architect era so downstream refs keep working. */
  --arch-shadow-sm: 0 1px 2px rgba(3,5,12,.5), 0 2px 8px rgba(3,5,12,.35);
  --arch-shadow-md: 0 6px 20px rgba(3,5,12,.5), 0 0 24px rgba(139,135,244,.07);
  --arch-shadow-lg: 0 18px 48px rgba(3,5,12,.6), 0 0 42px rgba(139,135,244,.10);
  --glow-accent:    0 0 24px rgba(139,135,244,.30);
  --glow-gold:      0 0 24px rgba(227,182,92,.25);

  /* ============================================================
     REMAP — global.css dark variables -> mathematical vision
     ============================================================ */
  --dark-bg:        var(--paper);
  --dark-card:      var(--surface);
  --dark-border:    var(--line);
  --header-bg:      rgba(8,11,25,.82);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--muted);
  --glass-bg:       rgba(20,26,53,.55);
  --glass-border:   var(--line);
  --glass-hover-border: var(--line-strong);
  --glass-hover-shadow: rgba(139,135,244,.18);

  /* Legacy neon vars — restored to luminous, brand-tuned values. */
  --neon-purple: var(--c-alg2);
  --neon-blue:   var(--c-alg1);
  --neon-pink:   var(--c-calc);
  --neon-green:  var(--c-geo);
  --neon-gold:   var(--gold);
  --neon-cyan:   var(--c-precalc);
  --neon-red:    #FF8080;

  /* ============================================================
     REMAP — design-tokens.css (--ah-*) stack -> mathematical vision
     ============================================================ */
  --ah-surface-0:    var(--paper);
  --ah-surface-1:    var(--surface);
  --ah-surface-2:    var(--surface-2);
  --ah-surface-3:    #1B2346;
  --ah-surface-blur: 14px;
  --ah-surface-ring: inset 0 0 0 1px var(--line);

  --ah-accent:     var(--accent);
  --ah-accent-2:   var(--c-alg1);
  --ah-accent-ink: #0A0E1F;
  --ah-glow:       rgba(139,135,244,.22);

  --ah-text-1:        var(--ink);
  --ah-text-2:        var(--ink-2);
  --ah-text-3:        var(--muted);
  --ah-text-on-accent:#0A0E1F;

  --ah-elev-1:     var(--arch-shadow-sm);
  --ah-elev-2:     var(--arch-shadow-md);
  --ah-elev-3:     var(--arch-shadow-lg);
  --ah-glow-soft:  var(--glow-accent);
  --ah-glow-hard:  0 0 42px rgba(139,135,244,.4);
  --ah-ring:       0 0 0 2px var(--paper), 0 0 0 4px var(--accent);

  /* Theme hooks read by design-tokens.css */
  --theme-accent:  var(--accent);
  --theme-accent2: var(--c-alg1);
  --theme-text:    var(--ink);
  --theme-text2:   var(--ink-2);
  --theme-glow:    rgba(139,135,244,.22);
}

/* ============================================================
   2. BASE — deep-space ground: nebula glows + faint drafting grid
   ============================================================ */
html { background: var(--paper); }

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink-2);
  background-image:
    radial-gradient(1100px 620px at 12% -6%,  rgba(107,86,217,.16), transparent 60%),
    radial-gradient(900px 560px  at 88% 4%,   rgba(46,92,214,.13),  transparent 60%),
    radial-gradient(720px 480px  at 50% 108%, rgba(139,135,244,.09), transparent 62%),
    repeating-linear-gradient(to right,  rgba(167,166,255,.045) 0, rgba(167,166,255,.045) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(to bottom, rgba(167,166,255,.045) 0, rgba(167,166,255,.045) 1px, transparent 1px, transparent 34px);
  background-attachment: fixed;
  background-position: 0 0;
}

/* Tailwind's .text-white on <body> is correct on dark — leave white alone,
   but normalize to our ink for consistency. */
body.text-white { color: var(--ink); }

/* Default body copy + list/table text -> ink-2. Headings get strong ink. */
body p, body li, body td, body th, body dd, body dt,
body figcaption, body blockquote {
  color: var(--ink-2);
}

/* Architect-era inline INK colors baked into pages — pull back to light ink
   so dark backgrounds stay legible. (Mirror of the old white-fix, inverted.) */
body [style*="color:#1B2A4A"],
body [style*="color: #1B2A4A"],
body [style*="color:#1b2a4a"],
body [style*="color: #1b2a4a"],
body [style*="color:#44506B"],
body [style*="color: #44506B"],
body [style*="color:#44506b"],
body [style*="color: #44506b"] {
  color: var(--ink) !important;
}

/* Inline white/ivory FILLS baked into pages — pull to dark surface. */
body [style*="background: white"],
body [style*="background:white"],
body [style*="background: #fff"],
body [style*="background:#fff"],
body [style*="background-color: white"],
body [style*="background-color:#fff"],
body [style*="background-color: #fff"],
body [style*="background:#FFFFFF"],
body [style*="background: #FFFFFF"] {
  background: var(--surface) !important;
  color: var(--ink-2);
}

/* Gradient text helpers — restore as luminous gradients. */
.gradient-text {
  background: linear-gradient(100deg, var(--accent-bright), var(--c-alg1)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-text-gold {
  background: linear-gradient(100deg, #F0CE8A, var(--gold)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-text-green {
  background: linear-gradient(100deg, #7FE8C8, var(--c-geo)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   3. TYPOGRAPHY — serif display, grotesk headings, mono labels
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.page-hero h1,
.section-heading h2 {
  font-family: var(--font-heading);
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* The display serif is reserved for hero-scale statements. */
h1, .page-hero h1, .display-serif {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
}
.display-serif em, h1 em, .page-hero h1 em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(100deg, var(--accent-bright), var(--c-alg1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.font-breathing { font-family: var(--font-display) !important; }

/* Logo + footer brand */
.header-logo-text,
.footer-brand-name {
  font-family: var(--font-heading) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.header-logo-sub {
  font-family: var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ============================================================
   4. STRUCTURE — header / nav (dark translucent glass)
   ============================================================ */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(3,5,12,.45);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.header-logo img {
  border: 2px solid var(--accent);
  background: var(--void);
  box-shadow: var(--glow-accent);
}

.nav-link {
  color: var(--ink-2);
  font-family: var(--font-body);
}
.nav-link:hover,
.nav-link.active {
  color: var(--accent-bright);
}

/* Dropdown — dark glass, hairline, deep shadow + aura. */
.nav-dropdown {
  background: rgba(14,19,40,.92);
  border: 1px solid var(--line-strong);
  box-shadow: var(--arch-shadow-lg);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
.nav-dropdown a { color: var(--ink-2); }
.nav-dropdown a:hover {
  color: var(--ink);
  background: var(--accent-tint);
}

/* Mobile slide-in panel — dark glass. */
@media (max-width: 768px) {
  .nav-container {
    background: rgba(10,14,31,.97);
    border-left: 1px solid var(--line-strong);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
  .nav-link {
    border-bottom: 1px solid var(--line);
  }
  .nav-item.expanded > .nav-link { color: var(--accent-bright); }
  .nav-divider {
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  }
}

.mobile-toggle span { background: var(--ink); }

/* ============================================================
   5. CARDS / SURFACES — luminous glass
   ============================================================ */
.glass-card,
.glass-card-static {
  background: linear-gradient(165deg, rgba(24,31,62,.72), rgba(13,18,38,.72));
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--arch-shadow-sm);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--arch-shadow-lg);
}

/* Neon glow utilities — restored, tuned to brand hues. */
.neon-glow       { box-shadow: 0 0 26px rgba(176,140,255,.22), var(--arch-shadow-md) !important; }
.neon-glow-blue  { box-shadow: 0 0 26px rgba(110,168,255,.22), var(--arch-shadow-md) !important; }
.neon-glow-green { box-shadow: 0 0 26px rgba(79,216,176,.20),  var(--arch-shadow-md) !important; }
.neon-glow-pink  { box-shadow: 0 0 26px rgba(255,123,169,.20), var(--arch-shadow-md) !important; }
.neon-glow-gold  { box-shadow: 0 0 26px rgba(227,182,92,.22),  var(--arch-shadow-md) !important; }

.iframe-container {
  border: 1px solid var(--line);
  background: var(--void);
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  color: #0A0E1F;
  border: 1px solid var(--accent-bright);
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 700;
}
.btn-primary:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 0 24px var(--accent-tint), var(--arch-shadow-md);
}

.btn-secondary {
  background: rgba(139,135,244,.08);
  color: var(--accent-bright);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-family: var(--font-body);
}
.btn-secondary:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
}

/* ============================================================
   7. BADGES — luminous tints on per-course hues
   ============================================================ */
.badge {
  font-family: var(--font-mono);
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.badge-purple { background: var(--c-alg2-tint); color: var(--c-alg2); }
.badge-blue   { background: var(--c-alg1-tint); color: var(--c-alg1); }
.badge-green  { background: var(--c-geo-tint);  color: var(--c-geo);  }
.badge-pink   { background: var(--c-calc-tint); color: var(--c-calc); }
.badge-gold   { background: var(--c-sci-tint);  color: var(--c-sci);  }
.badge-red    { background: rgba(255,128,128,.13); color: #FF9B9B; }
.badge-teal   { background: var(--c-precalc-tint); color: var(--c-precalc); }
.badge-rose   { background: var(--c-calc-tint);    color: var(--c-calc);    }

/* ============================================================
   8. FOOTER
   ============================================================ */
.site-footer {
  background: var(--recessed);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.footer-brand-desc { color: var(--ink-2); }
.footer-heading {
  font-family: var(--font-mono);
  color: var(--muted);
}
.footer-links a { color: var(--ink-2); }
.footer-links a:hover { color: var(--accent-bright); }
.footer-bottom { border-top: 1px solid var(--line); }
.footer-copy { color: var(--muted); }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--accent-bright); }
.footer-attribution {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 0.6rem;
}
.footer-attribution a { color: var(--accent-bright); text-decoration: underline; }

.footer-feedback-btn {
  border: 1px solid var(--line-strong) !important;
  background: var(--accent-tint) !important;
  color: var(--accent-bright) !important;
  font-family: var(--font-body) !important;
  border-radius: 8px !important;
}
.footer-feedback-btn:hover {
  background: var(--accent) !important;
  color: #0A0E1F !important;
  border-color: var(--accent) !important;
}

/* ============================================================
   9. PAGE HERO + SECTION HEADINGS
   ============================================================ */
.page-hero h1 {
  font-family: var(--font-display);
  color: var(--ink);
}
.page-hero p { color: var(--ink-2); }

.section-heading h2 { font-family: var(--font-heading); color: var(--ink); }
.section-heading p  { color: var(--ink-2); }
.section-heading-icon {
  background: var(--accent-tint) !important;
  color: var(--accent-bright);
}

/* ============================================================
   10. REUSABLE STUDIO UTILITIES
   ============================================================ */

/* .eyebrow — mono uppercase luminous label */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-bright);
}

/* .panel — glass card */
.panel {
  background: linear-gradient(165deg, rgba(24,31,62,.66), rgba(13,18,38,.66));
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--arch-shadow-sm);
  padding: 1.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.panel--recessed { background: rgba(7,11,24,.6); box-shadow: none; }

/* .blueprint-rule — thin luminous meridian divider (name kept for compat) */
.blueprint-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  margin: 2rem 0;
}
.blueprint-rule--ticked {
  position: relative;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.blueprint-rule--ticked::before {
  content: "";
  position: absolute;
  left: 50%; top: -3px;
  transform: translateX(-50%);
  width: 40px; height: 7px;
  border-left: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  box-shadow: var(--glow-accent);
}

/* .stat — figure + label pairing */
.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat__figure {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Per-course accent helpers */
.course-alg1 { --accent: var(--c-alg1); --accent-bright: #93BEFF; --accent-tint: var(--c-alg1-tint); }
.course-geo  { --accent: var(--c-geo);  --accent-bright: #7FE8C8; --accent-tint: var(--c-geo-tint);  }
.course-alg2 { --accent: var(--c-alg2); --accent-bright: #C6ABFF; --accent-tint: var(--c-alg2-tint); }
.course-sci  { --accent: var(--c-sci);  --accent-bright: #F0CE8A; --accent-tint: var(--c-sci-tint);  }
.course-precalc { --accent: var(--c-precalc); --accent-bright: #7ADCEC; --accent-tint: var(--c-precalc-tint); }
.course-calc { --accent: var(--c-calc); --accent-bright: #FFA2C2; --accent-tint: var(--c-calc-tint); }
.course-phys { --accent: var(--c-phys); --accent-bright: #ABA4F7; --accent-tint: var(--c-phys-tint); }
.course-apphys { --accent: var(--c-apphys); --accent-bright: #BCCBE2; --accent-tint: var(--c-apphys-tint); }

/* ============================================================
   11. JS-INJECTED WIDGETS  (dark glass surfaces)
   ============================================================ */

/* SFX toggle button (shared.js #ah-sfx-toggle) */
#ah-sfx-toggle {
  background: rgba(16,22,45,.85) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink-2) !important;
  box-shadow: var(--arch-shadow-sm) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Cookie consent banner (shared.js #cookie-consent-banner) */
#cookie-consent-banner {
  background: rgba(12,17,36,.96) !important;
  border-top: 1px solid var(--line-strong) !important;
  box-shadow: 0 -12px 40px rgba(3,5,12,.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
#cookie-consent-banner p { color: var(--ink-2) !important; }
#cookie-consent-banner p a { color: var(--accent-bright) !important; }
#cookie-consent-banner #consent-decline {
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: var(--ink-2) !important;
}
#cookie-consent-banner #consent-accept {
  background: var(--accent) !important;
  color: #0A0E1F !important;
  border: 1px solid var(--accent) !important;
}

/* Feedback modal (footer-template.js .dji-fb-*) */
.dji-fb-backdrop {
  background: rgba(3,5,12,.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.dji-fb-modal {
  background: linear-gradient(170deg, #151C38, #0D1226) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: var(--arch-shadow-lg) !important;
  color: var(--ink) !important;
}
.dji-fb-header { border-bottom: 1px solid var(--line) !important; }
.dji-fb-title {
  font-family: var(--font-heading) !important;
  color: var(--ink) !important;
}
.dji-fb-sub { color: var(--muted) !important; }
.dji-fb-close { color: var(--muted) !important; }
.dji-fb-close:hover { background: rgba(255,128,128,.12) !important; color: #FF9B9B !important; }
.dji-fb-label { color: var(--ink-2) !important; }
.dji-fb-hint  { color: var(--muted) !important; }
.dji-fb-select,
.dji-fb-input,
.dji-fb-textarea {
  background: rgba(7,11,24,.8) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink) !important;
}
.dji-fb-select:focus,
.dji-fb-input:focus,
.dji-fb-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-tint) !important;
}
.dji-fb-footer { border-top: 1px solid var(--line) !important; }
.dji-fb-btn-ghost {
  background: transparent !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line-strong) !important;
}
.dji-fb-btn-ghost:hover { background: rgba(167,166,255,.08) !important; }
.dji-fb-btn-primary {
  background: var(--accent) !important;
  color: #0A0E1F !important;
  box-shadow: var(--arch-shadow-sm) !important;
}
.dji-fb-btn-primary:hover:not([disabled]) {
  background: var(--accent-bright) !important;
  box-shadow: var(--glow-accent) !important;
}
.dji-fb-status { color: var(--muted) !important; }
.dji-fb-status.ok  { color: var(--c-geo) !important; }
.dji-fb-status.err { color: #FF9B9B !important; }
.dji-fb-identity {
  background: rgba(7,11,24,.8) !important;
  border-left: 3px solid var(--accent) !important;
  color: var(--ink-2) !important;
}

/* Notification bell (notification-bell.js .dji-bell-*) */
.dji-bell-btn {
  background: rgba(16,22,45,.85) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--accent-bright) !important;
}
.dji-bell-btn:hover { border-color: var(--accent) !important; box-shadow: var(--glow-accent) !important; }
.dji-bell-panel {
  background: linear-gradient(170deg, #151C38, #0D1226) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink-2) !important;
  box-shadow: var(--arch-shadow-lg) !important;
}
.dji-bell-head { background: rgba(139,135,244,.08) !important; }
.dji-bell-head .t { color: var(--accent-bright) !important; }
.dji-bell-head .read-all { color: var(--muted) !important; }
.dji-bell-head .read-all:hover { color: var(--accent-bright) !important; background: var(--accent-tint) !important; }
.dji-bell-empty { color: var(--muted) !important; }
.dji-bell-item:hover { background: rgba(167,166,255,.07) !important; }
.dji-bell-item.unread { background: rgba(167,166,255,.07) !important; border-left-color: var(--accent) !important; }
.dji-bell-item .title { color: var(--ink) !important; }
.dji-bell-item .ts { color: var(--muted) !important; }
.dji-bell-item .body { color: var(--ink-2) !important; }
.dji-bell-item .body a { color: var(--accent-bright) !important; }

/* ============================================================
   12. ACCESSIBILITY MODE — high contrast on dark
   ============================================================ */
body.a11y-high-contrast .glass-card,
body.a11y-high-contrast .glass-card-static {
  background: var(--void) !important;
  border-color: var(--ink) !important;
}

/* ============================================================
   13. OPTIONAL LIGHT MODE HOOK (unused; dark is the studio default)
   ============================================================ */
[data-theme="light"] {
  /* Reserved. The studio is dark-first; a print stylesheet handles paper. */
}

/* Print: never spend ink on the void. */
@media print {
  html, body { background: #FFFFFF !important; color: #111 !important; }
  body { background-image: none !important; }
  body p, body li, body td, body th { color: #222 !important; }
  h1, h2, h3, h4, h5, h6 { color: #000 !important; }
}

/* ============================================================
   14. MOTION RESPECT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .glass-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover { transform: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      scroll-behavior: auto !important; }
}

/* ============================================================
   15. ACCESSIBILITY — skip link + visible focus
   ============================================================ */
.skip-link {
  position: fixed;
  left: 12px;
  top: -64px;
  z-index: 4000;
  background: var(--accent);
  color: #0A0E1F;
  padding: 11px 18px;
  border-radius: 0 0 10px 10px;
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--glow-accent);
  transition: top .16s ease;
}
.skip-link:focus { top: 0; outline: 3px solid #0A0E1F; outline-offset: -3px; }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.nav-link:focus-visible,
.mobile-toggle:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Keyboard-open dropdowns on desktop. */
@media (min-width: 769px) {
  .nav-item.has-dropdown:focus-within > .nav-dropdown,
  .nav-item.has-dropdown.expanded > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================================
   16. FORM CONTROLS — native inputs must not render white-on-white
   ============================================================ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  color-scheme: dark;
}
select {
  background-color: rgba(7,11,24,.85);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}
select option { background: #10162D; color: #EEF1FA; }

/* ============================================================
   17. CROSS-PAGE LEGACY CLASS REPAIRS (dark theme)
   ============================================================ */

/* science timeline "type" pills */
.type-content      { background: var(--c-alg1-tint) !important; color: var(--c-alg1) !important; }
.type-project      { background: var(--c-alg2-tint) !important; color: var(--c-alg2) !important; }
.type-break        { background: rgba(167,166,255,.10) !important; color: var(--ink-2) !important; }
.type-capstone     { background: var(--c-geo-tint)  !important; color: var(--c-geo)  !important; }
.type-sub-content,
.type-sub-project  { background: var(--c-sci-tint)  !important; color: var(--c-sci)  !important; }

/* glass "quick link" cards — rgba(255,255,255,.1) fills now glow correctly */
.quick-link-card {
  background: linear-gradient(165deg, rgba(24,31,62,.7), rgba(13,18,38,.7)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--arch-shadow-sm) !important;
}
.quick-link-card:hover {
  border-color: var(--line-strong) !important;
  box-shadow: var(--arch-shadow-lg) !important;
}

/* ============================================================
   18. WHITE-PANEL RESCUE — architect-era hard-coded light surfaces
   Pages built during the light era sometimes hard-code #FFFFFF panels
   with dark ink text in their inline <style>. Those specific literals
   are repaired here at the token level (the classes below only exist
   on architect-era pages).
   ============================================================ */
.arch-panel, .paper-panel, .white-panel {
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  border-color: var(--line) !important;
}