/* ═══════════════════════════════════════════════════════════════════
   DOAI.Orbit — THEME SYSTEM
   Dark Mode (default) + Daytime Mode (data-theme="light")
   ═══════════════════════════════════════════════════════════════════ */

/* ── DARK MODE (DEFAULT) ──────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:          #050510;
  --bg-surface:  #0a0a1a;
  --bg-card:     #0d0d24;
  --bg-card-alt: #08081a;
  --bg-elevated: #0f0f28;
  --bg-nav:      rgba(5,5,16,0.9);
  --bg-overlay:  rgba(5,5,16,0.97);
  --bg-gradient-hero: rgba(5,5,16,1);

  --text:        #ffffff;
  --text-dim:    #ffffff;
  --text-muted:  #a8a8c8;
  --text-faint:  #c8c8e0;
  --text-inverse:#050510;

  --neon-cyan:   #00f5ff;
  --neon-purple: #6366F1;
  --neon-pink:   #22D3EE;
  --neon-green:  #2DD4BF;
  --neon-gold:   #FBBF24;
  --holo-blue:   #38BDF8;

  /* Hero text readability overrides */
  --hero-title-shadow: 0 0 30px rgba(0,0,0,0.7), 0 4px 20px rgba(0,0,0,0.5);
  --hero-subtitle-color: rgba(255,255,255,0.85);
  --hero-subtitle-shadow: 0 2px 12px rgba(0,0,0,0.6);
  --hero-desc-color: rgba(232,232,240,0.85);
  --hero-desc-shadow: 0 2px 10px rgba(0,0,0,0.5);
  --hero-eyebrow-shadow: 0 0 20px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.5);
  --hero-gradient-title: linear-gradient(135deg, #fff 0%, var(--neon-cyan) 40%, var(--neon-purple) 100%);
  --hero-title-glow: drop-shadow(0 0 30px rgba(0,245,255,0.4)) drop-shadow(0 0 60px rgba(0,0,0,0.5));
  --hero-video-opacity: 0.55;

  /* Saturn APOD background — dark mode */
  --saturn-image: url('/img/saturn-bg.jpg');
  --saturn-overlay-top: rgba(5,5,16,0.55);
  --saturn-overlay-mid: rgba(5,5,16,0.35);
  --saturn-overlay-bot: rgba(5,5,16,1);
  --saturn-vignette: rgba(5,5,16,0.55);
  --saturn-title-gradient: linear-gradient(135deg, #f4e4bc 0%, #d4af6f 50%, #b8945a 100%);
  --saturn-title-glow: drop-shadow(0 0 24px rgba(0,0,0,0.85)) drop-shadow(0 2px 8px rgba(0,0,0,0.9));
  --saturn-sub-color: rgba(255,255,255,0.92);
  --saturn-badge-bg: rgba(244,228,188,0.08);
  --saturn-badge-border: rgba(244,228,188,0.35);
  --saturn-badge-color: #f4e4bc;
  --saturn-backdrop-blur: 0px;

  --border:      rgba(0,245,255,0.3);
  --border-light:rgba(255,255,255,0.08);
  --border-card: rgba(255,255,255,0.06);

  --glow-cyan:   0 0 20px rgba(0,245,255,0.4);
  --glow-purple: 0 0 20px rgba(99,102,241,0.4);
  --glow-pink:   0 0 20px rgba(34,211,238,0.4);
  --glow-gold:   0 0 15px rgba(251,191,36,0.35);

  --hover-cyan:  rgba(0,245,255,0.12);
  --hover-purple:rgba(99,102,241,0.12);
  --hover-card-bg: rgba(0,0,0,0.2);

  --scanline-color: rgba(0,0,0,0.03);
  --noise-color: rgba(0,245,255,0.015);
}

/* ═══════════════════════════════════════════════════════════════════
   DOAI.Orbit — ANIMATIONS (shared across all pages)
   Glitch, reveal, scanline, decode, stagger — original index.html system
   ═══════════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ──────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(0,245,255,0.4); }
  70% { box-shadow: 0 0 0 12px rgba(0,245,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,245,255,0); }
}
@keyframes glitch {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  10% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 1px); }
  20% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); }
  30% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 2px); }
  40% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); }
  50% { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 1px); }
}

/* ── CURSOR BLINK ─────────────────────── */
.cursor-blink { animation: blink 1.1s step-end infinite; }

/* ── SCANLINE OVERLAY ─────────────────── */
/* Applied as a fixed overlay — add <div class="scanline"></div> to body */
@media (max-width: 768px) { .holographic-avatar { display: none !important; } }
.scanline {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── REVEAL ON SCROLL ──────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── GLITCH HEADING ON SCROLL ──────────── */
.glitch-heading {
  position: relative;
  display: inline-block;
}
.glitch-heading::before,
.glitch-heading::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
}
.glitch-heading.glitching::before {
  color: var(--neon-cyan);
  animation: glitch 0.4s steps(1) forwards;
  opacity: 0.7;
}
.glitch-heading.glitching::after {
  color: var(--neon-pink);
  animation: glitch 0.4s steps(1) reverse forwards;
  opacity: 0.5;
}

/* ── STAGGERED REVEAL CHILDREN ────────── */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }

/* ── DECODE TEXT (holographic hover scramble) ── */
.decode-text {
  transition: color 0.2s;
  cursor: default;
}
.decode-text:hover {
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
}

/* ── TYPEWRITER EFFECT ────────────────── */
.typewriter {
  visibility: hidden;
  overflow: hidden;
  border-right: 2px solid var(--neon-cyan);
  white-space: nowrap;
  letter-spacing: 0.15em;
  animation: blink 0.75s step-end infinite;
}
.typewriter.done {
  border-right-color: transparent;
  animation: none;
}

/* ── FADE-IN ON LOAD ──────────────────── */
.fade-in-on-load {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}
.fade-in-on-load.delay-1 { animation-delay: 0.2s; }
.fade-in-on-load.delay-2 { animation-delay: 0.4s; }
.fade-in-on-load.delay-3 { animation-delay: 0.6s; }
.fade-in-on-load.delay-4 { animation-delay: 0.8s; }
.fade-in-on-load.delay-5 { animation-delay: 1.0s; }

/* ── PARTICLE CANVAS ──────────────────── */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── LIGHT MODE OVERRIDES FOR ANIMATIONS ── */
.scanline {
  background: none !important;
}
[data-theme="light"] #particle-canvas {
  display: none !important;
}
[data-theme="light"] .glitch-heading.glitching::before {
  color: #0284C7;
}
[data-theme="light"] .glitch-heading.glitching::after {
  color: #0E7490;
}

/* ── DAYTIME MODE (LIGHT) ─────────────────────────── */
[data-theme="light"] {
  --bg:          #f5f7fa;
  --bg-surface:  #ffffff;
  --bg-card:     #ffffff;
  --bg-card-alt: #f0f4f8;
  --bg-elevated: #ffffff;
  --bg-nav:      rgba(255,255,255,0.92);
  --bg-overlay:  rgba(255,255,255,0.98);
  --bg-gradient-hero:#f5f7fa;

  --text:        #1a1a2e;
  --text-dim:    #1e293b;
  --text-muted:  #475569;
  --text-inverse:#ffffff;

  /* Chroma Shift — blue spectrum palette (darkened for WCAG AA on small text against white) */
  --neon-cyan:   #0369A1;
  --neon-purple: #4338CA;
  --neon-pink:   #0E7490;
  --neon-green:  #0F766E;
  --neon-gold:   #B45309;
  --holo-blue:   #0284C7;

  /* Hero text readability overrides — light mode */
  --hero-title-shadow: 0 0 40px rgba(255,255,255,0.4);
  --hero-subtitle-color: var(--text-dim);
  --hero-subtitle-shadow: none;
  --hero-desc-color: var(--text-dim);
  --hero-desc-shadow: none;
  --hero-eyebrow-shadow: 0 0 12px rgba(255,255,255,0.3);
  --hero-gradient-title: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-purple) 100%);
  --hero-title-glow: drop-shadow(0 0 30px rgba(2,132,199,0.3));
  --hero-video-opacity: 0.35;

  /* Saturn APOD background — light mode (visible & clear, with stronger overlay) */
  --saturn-image: url('/img/saturn-bg.jpg');
  --saturn-overlay-top: rgba(8,12,28,0.88);
  --saturn-overlay-mid: rgba(8,12,28,0.75);
  --saturn-overlay-bot: rgba(5,5,16,0.97);
  --saturn-vignette: rgba(8,12,28,0.88);
  --saturn-title-gradient: linear-gradient(135deg, #ffffff 0%, #ffe8b8 50%, #f4c97a 100%);
  --saturn-title-glow: drop-shadow(0 0 30px rgba(0,0,0,0.95)) drop-shadow(0 2px 10px rgba(0,0,0,0.95));
  --saturn-sub-color: rgba(255,255,255,0.98);
  --saturn-badge-bg: rgba(255,255,255,0.16);
  --saturn-badge-border: rgba(255,255,255,0.55);
  --saturn-badge-color: #ffffff;
  --saturn-backdrop-blur: 4px;

  --border:      rgba(2,132,199,0.45);
  --border-light:rgba(0,0,0,0.08);
  --border-card: rgba(0,0,0,0.06);

  /* Blue spectrum glows */
  --glow-cyan:   0 0 18px rgba(2,132,199,0.25);
  --glow-purple: 0 0 18px rgba(79,70,229,0.25);
  --glow-pink:   0 0 18px rgba(14,116,144,0.2);
  --glow-gold:   0 0 12px rgba(217,119,6,0.2);

  --hover-cyan:  rgba(2,132,199,0.08);
  --hover-purple:rgba(79,70,229,0.08);
  --hover-card-bg: rgba(0,0,0,0.02);

  --scanline-color: transparent;
  --noise-color: transparent;
}

/* ── THEME TOGGLE BUTTON ──────────────────────────── */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--neon-cyan);
  background: var(--bg-card);
  color: var(--neon-cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: var(--glow-cyan);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 28px rgba(33,150,243,0.4);
  background: var(--neon-cyan);
  color: var(--text-inverse);
}

[data-theme="light"] .theme-toggle {
  box-shadow: 0 2px 12px rgba(33,150,243,0.2);
}

/* ── DAYTIME OVERRIDES ────────────────────────────── */
/* Remove scanline noise overlay in light mode */
[data-theme="light"] body::before {
  background-image: none;
  opacity: 0;
}

/* Soften the grid noise */
.scanline {
  background: none;
}

/* Adjust nav transparency */
[data-theme="light"] nav {
  background: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(33,150,243,0.12);
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

/* Day mode card borders are crisper */
[data-theme="light"] .pillar-card,
[data-theme="light"] .framework-card,
[data-theme="light"] .cast-card,
[data-theme="light"] .arc-entry,
[data-theme="light"] .transmission-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

[data-theme="light"] .arc-entry:hover,
[data-theme="light"] .pillar-card:hover {
  box-shadow: 0 4px 20px rgba(33,150,243,0.1);
}

/* Selection colors */
[data-theme="light"] ::selection {
  background: var(--neon-cyan);
  color: #fff;
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg-surface);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--neon-cyan);
  border-radius: 3px;
}

/* Light mode cast overlay — HIDE IT so images show through */
[data-theme="light"] .cast-overlay,
[data-theme="light"] .char-portrait-overlay,
[data-theme="light"] .episode-thumb .overlay {
  display: none !important;
}

/* Light mode cast status badge */
[data-theme="light"] .cast-status,
[data-theme="light"] .char-portrait-status {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid currentColor !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

[data-theme="light"] .cast-card:nth-child(1) .cast-status { color: #0284C7 !important; }
[data-theme="light"] .cast-card:nth-child(2) .cast-status { color: #4F46E5 !important; }
[data-theme="light"] .cast-card:nth-child(3) .cast-status { color: #0E7490 !important; }

/* Light mode cast card info */
[data-theme="light"] .cast-info,
[data-theme="light"] .char-portrait-designation {
  color: var(--text) !important;
}

[data-theme="light"] .cast-name,
[data-theme="light"] .cast-role,
[data-theme="light"] .cast-desc,
[data-theme="light"] .cast-designation {
  color: var(--text) !important;
}

/* Light mode cast card border */
[data-theme="light"] .cast-card {
  border-color: rgba(33,150,243,0.2) !important;
}

/* ── SIGNAL PORTALS LIGHT MODE ────────────────── */

/* Card background — solid white with subtle tint */
[data-theme="light"] .portal-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(240,248,255,0.95) 100%) !important;
  border-color: rgba(0,168,185,0.25) !important;
  box-shadow: 0 2px 16px rgba(0,168,185,0.06) !important;
}

/* Ascension card — cyan accent in day mode */
[data-theme="light"] .portal-card[href*="ascension"] {
  border-color: rgba(0,168,185,0.35) !important;
  box-shadow: 0 2px 20px rgba(0,168,185,0.08), inset 0 0 0 1px rgba(0,168,185,0.05) !important;
}
[data-theme="light"] .portal-card[href*="ascension"]:hover {
  border-color: rgba(0,168,185,0.6) !important;
  box-shadow: 0 10px 40px rgba(0,168,185,0.15), 0 0 30px rgba(0,168,185,0.1), inset 0 0 20px rgba(0,168,185,0.03) !important;
}

/* Embodiment card — magenta/pink accent in day mode */
[data-theme="light"] .portal-card[href*="embodiment"] {
  border-color: rgba(219,39,119,0.3) !important;
  box-shadow: 0 2px 20px rgba(219,39,119,0.06), inset 0 0 0 1px rgba(219,39,119,0.04) !important;
}
[data-theme="light"] .portal-card[href*="embodiment"]:hover {
  border-color: rgba(219,39,119,0.55) !important;
  box-shadow: 0 10px 40px rgba(219,39,119,0.12), 0 0 30px rgba(219,39,119,0.08), inset 0 0 20px rgba(219,39,119,0.03) !important;
}

/* Top sweep bar — more visible in day mode */
[data-theme="light"] .portal-card::before {
  opacity: 0.9 !important;
  height: 3px !important;
}

/* Inner radial glow — tinted with accent color, NOT dark */
[data-theme="light"] .portal-card::after {
  opacity: 0.5 !important;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(0,168,185,0.06), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(0,168,185,0.04), transparent 50%) !important;
}
[data-theme="light"] .portal-card[href*="embodiment"]::after {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(219,39,119,0.06), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(219,39,119,0.04), transparent 50%) !important;
}

/* Icon — vibrant neon in day mode */
[data-theme="light"] .portal-icon {
  border-width: 2px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px currentColor !important;
  filter: drop-shadow(0 0 6px currentColor) !important;
}

/* Ascension icon — bright cyan */
[data-theme="light"] .portal-card[href*="ascension"] .portal-icon {
  color: #0090a8 !important;
  border-color: #0090a8 !important;
  background: rgba(0,168,185,0.06) !important;
  box-shadow: 0 0 20px rgba(0,168,185,0.25), inset 0 0 14px rgba(0,168,185,0.1) !important;
}

/* Embodiment icon — bright magenta */
[data-theme="light"] .portal-card[href*="embodiment"] .portal-icon {
  color: #db2777 !important;
  border-color: #db2777 !important;
  background: rgba(219,39,119,0.06) !important;
  box-shadow: 0 0 20px rgba(219,39,119,0.25), inset 0 0 14px rgba(219,39,119,0.1) !important;
}

/* Status dot — brighter in day mode */
[data-theme="light"] .portal-status-dot {
  box-shadow: 0 0 10px currentColor !important;
}

/* Data bars — more opaque in day mode */
[data-theme="light"] .portal-bar {
  opacity: 0.6 !important;
}

/* Title — dark text with subtle glow in day mode */
[data-theme="light"] .portal-title {
  color: var(--text) !important;
  text-shadow: 0 0 12px rgba(0,168,185,0.1) !important;
}
[data-theme="light"] .portal-card[href*="embodiment"] .portal-title {
  text-shadow: 0 0 12px rgba(219,39,119,0.1) !important;
}

/* Description — readable dark text */
[data-theme="light"] .portal-desc {
  color: var(--text-muted) !important;
}

/* Footer border */
[data-theme="light"] .portal-footer {
  border-top-color: rgba(0,168,185,0.12) !important;
}
[data-theme="light"] .portal-card[href*="embodiment"] .portal-footer {
  border-top-color: rgba(219,39,119,0.12) !important;
}

/* Arrow — vibrant in day mode */
[data-theme="light"] .portal-card[href*="ascension"] .portal-arrow {
  color: #0090a8 !important;
  text-shadow: 0 0 8px rgba(0,168,185,0.2) !important;
}
[data-theme="light"] .portal-card[href*="embodiment"] .portal-arrow {
  color: #db2777 !important;
  text-shadow: 0 0 8px rgba(219,39,119,0.2) !important;
}

/* Label — darker in day mode */
[data-theme="light"] .portal-label {
  color: var(--text-muted) !important;
}

/* Corners — slightly more visible in day mode */
[data-theme="light"] .portal-corners::before,
[data-theme="light"] .portal-corners::after {
  opacity: 0.5 !important;
}

/* Scanline — tinted in day mode */
[data-theme="light"] .portal-scanline::before {
  background: linear-gradient(180deg, transparent, rgba(0,168,185,0.1), transparent) !important;
}
[data-theme="light"] .portal-card[href*="embodiment"] .portal-scanline::before {
  background: linear-gradient(180deg, transparent, rgba(219,39,119,0.1), transparent) !important;
}

/* ── ARTICLES PAGE LIGHT MODE ────────────────── */

/* Article cards — white/light background instead of dark gradient */
[data-theme="light"] .article-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.97) 0%, rgba(245,247,250,0.97) 100%) !important;
  border-color: rgba(33,150,243,0.15) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

[data-theme="light"] .article-card:hover {
  border-color: rgba(33,150,243,0.3) !important;
  box-shadow: 0 4px 20px rgba(33,150,243,0.1) !important;
}

/* Article header hover */
[data-theme="light"] .article-header:hover {
  background: rgba(33,150,243,0.04) !important;
}

/* Article content text */
[data-theme="light"] .article-content {
  color: rgba(26,26,46,0.85) !important;
  border-left-color: rgba(33,150,243,0.2) !important;
}

[data-theme="light"] .article-content strong {
  color: var(--text) !important;
}

/* Collapse arrow */
[data-theme="light"] .collapse-arrow {
  border-color: rgba(33,150,243,0.2) !important;
}

[data-theme="light"] .article-card.expanded .collapse-arrow {
  border-color: rgba(33,150,243,0.3) !important;
  background: rgba(33,150,243,0.06) !important;
}

/* Accent bar glow softer in light mode */
[data-theme="light"] .article-card.flux .char-accent-bar {
  box-shadow: 0 0 8px rgba(0,245,255,0.15) !important;
}
[data-theme="light"] .article-card.orbit .char-accent-bar {
  box-shadow: 0 0 8px rgba(139,92,246,0.15) !important;
}
[data-theme="light"] .article-card.atlas .char-accent-bar {
  box-shadow: 0 0 8px rgba(0,255,157,0.15) !important;
}

/* Article sources border */
[data-theme="light"] .article-sources {
  border-top-color: rgba(33,150,243,0.1) !important;
}

/* Article title hover — sky-blue instead of white */
[data-theme="light"] .article-card:hover .article-title {
  color: #2196F3 !important;
  text-shadow: none !important;
}

/* Scanline off in light mode */
[data-theme="light"] body::before {
  background: none !important;
}

/* Holo canvas off in light mode */
[data-theme="light"] #holo-canvas {
  display: none !important;
}

/* Light mode hero gradients */
[data-theme="light"] #hero::after {
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(33,150,243,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--bg) 0%, transparent 60%);
}

[data-theme="light"] #hero::before {
  background: radial-gradient(circle, rgba(92,107,192,0.12) 0%, transparent 70%);
}

/* Mobile overlay — generous top clearance for status bar / notch */
[data-theme="light"] .nav-overlay {
  background: rgba(255,255,255,0.98);
}

/* Mobile overlay — generous top clearance for status bar / notch */
.nav-overlay {
  padding-top: env(safe-area-inset-top, 120px) !important;
  gap: 3.5rem !important;
  justify-content: flex-start !important;
}

/* Overlay Home link — make it stand out */
.nav-overlay a:first-child {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0,245,255,0.3);
}
.nav-overlay a:first-child:hover {
  color: #fff;
  text-shadow: 0 0 20px rgba(0,245,255,0.6);
}
[data-theme="light"] .nav-overlay a:first-child {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(33,150,243,0.25);
}
[data-theme="light"] .nav-overlay a:first-child:hover {
  color: #1565C0;
}

/* Footer */
[data-theme="light"] footer {
  border-top-color: rgba(0,0,0,0.06);
}

/* Smooth transition when theme switches (optional — can disable if janky) */
/* html { transition: none; } */

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES FOR HARDCODED DARK COLORS
   Fixes pages with custom CSS that don't use theme variables
   ═══════════════════════════════════════════════════════════════════ */

/* Glossary term-signal background fix for light mode */
[data-theme="light"] .term-signal {
  background: rgba(0,0,0,0.02) !important;
  border-left-color: var(--neon-purple) !important;
}

/* Nav backgrounds with hardcoded rgba(5,5,16,...) */
[data-theme="light"] nav[style*="rgba(5,5,16"],
[data-theme="light"] nav {
  background: rgba(255,255,255,0.92) !important;
}

/* Overlay backgrounds */
[data-theme="light"] .nav-overlay,
[data-theme="light"] [class*="overlay"] {
  background: rgba(255,255,255,0.98) !important;
}

/* Hero gradients with dark base colors */
[data-theme="light"] #hero::before,
[data-theme="light"] .hero::before {
  background: radial-gradient(circle, rgba(92,107,192,0.08) 0%, transparent 70%) !important;
}

[data-theme="light"] #hero::after,
[data-theme="light"] .hero::after {
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(33,150,243,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--bg) 0%, transparent 60%) !important;
}

/* Card/section backgrounds with dark rgba */
[data-theme="light"] [class*="card"]::before,
[data-theme="light"] [class*="node"]::before {
  background: var(--neon-cyan) !important;
}

/* Selection */
[data-theme="light"] ::selection {
  background: var(--neon-cyan);
  color: #fff;
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg-surface);
}

/* Any remaining rgba(5,5,16,...) backgrounds */
[data-theme="light"] [style*="rgba(5,5,16"] {
  background: rgba(255,255,255,0.95) !important;
}

/* Gradient backgrounds with dark colors */
[data-theme="light"] [style*="linear-gradient"][style*="rgba(5,5,16"],
[data-theme="light"] [style*="radial-gradient"][style*="rgba(5,5,16"] {
  background: linear-gradient(135deg, rgba(33,150,243,0.05) 0%, rgba(92,107,192,0.05) 100%) !important;
}

/* Signal source pages - specific fixes */
[data-theme="light"] .signal-source-page nav,
[data-theme="light"] .signal-source-page .nav-overlay {
  background: rgba(255,255,255,0.95) !important;
}

/* Signal Index page — light mode */
[data-theme="light"] .signal-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
[data-theme="light"] .signal-card:hover {
  box-shadow: 0 4px 20px rgba(33,150,243,0.1);
}
[data-theme="light"] .layer-title .id {
  background: var(--hover-cyan) !important;
}
[data-theme="light"] .score-badge {
  background: var(--hover-purple) !important;
}
[data-theme="light"] .score-high {
  background: rgba(0,191,165,0.08) !important;
}
[data-theme="light"] .score-low {
  background: rgba(233,30,99,0.08) !important;
}
[data-theme="light"] .signal-layer.deep-index {
  border-top-color: rgba(0,0,0,0.06);
}

/* Custom neon-amber for light mode */
[data-theme="light"] {
  --neon-amber: #FF8F00;
  --neon-blue: #2196F3;
}

/* Light mode text colors on signal pages */
[data-theme="light"] .hero-title .line-1,
[data-theme="light"] .hero-title .line-2,
[data-theme="light"] .hero-eyebrow,
[data-theme="light"] .section-title,
[data-theme="light"] .node-name,
[data-theme="light"] .node-role,
[data-theme="light"] .node-description,
[data-theme="light"] .hero-quote,
[data-theme="light"] .section-intro {
  color: var(--text) !important;
}

/* Ensure node cards have proper contrast */
[data-theme="light"] .node-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .node-card .node-name a {
  color: var(--neon-cyan) !important;
}

/* Mobile overlay links */
[data-theme="light"] .nav-overlay a {
  color: var(--text);
}

/* Footer */
[data-theme="light"] footer {
  border-top-color: rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   SEARCH MODAL
   ═══════════════════════════════════════════════════════════════════ */

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5,5,16,0.95);
  backdrop-filter: blur(12px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.search-modal.open {
  display: flex;
  opacity: 1;
}

[data-theme="light"] .search-modal {
  background: rgba(245,247,250,0.98);
}

.search-modal-inner {
  width: 90%;
  max-width: 600px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: var(--glow-cyan);
}

.search-modal-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.search-modal-input-wrap .search-icon {
  font-size: 1.2rem;
  color: var(--neon-cyan);
  flex-shrink: 0;
}

.search-modal-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  outline: none;
}

.search-modal-input::placeholder {
  color: var(--text-dim);
}

.search-modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s;
}

.search-modal-close:hover {
  color: var(--neon-cyan);
}

.search-modal-results {
  max-height: 50vh;
  overflow-y: auto;
}

.search-modal-result {
  display: block;
  padding: 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s;
  border-bottom: 1px solid var(--border-light);
}

.search-modal-result:hover {
  background: var(--hover-cyan);
}

.search-modal-result-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--neon-cyan);
  margin-bottom: 0.25rem;
}

.search-modal-result-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.search-modal-result-type {
  display: inline-block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--neon-purple);
  color: var(--neon-purple);
  margin-left: 0.5rem;
}

.search-modal-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 2rem;
  font-size: 0.9rem;
}

/* Nav search icon */
.nav-search-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-search-btn:hover {
  color: var(--neon-cyan);
}

/* Mobile overlay search link */
.nav-overlay .overlay-search {
  font-size: 1.4rem;
  color: var(--neon-cyan);
}

.nav-overlay .overlay-search:hover {
  color: var(--text);
}


/* ═══════════════════════════════════════════════════════════════════
   SATURN HERO BACKGROUND v5 — JS-overridable + fallback safe
   - background-image and ::before/::after gradient NO LONGER use !important
     so page JS (orbit-dispatches loadDispatches) can swap to the daily APOD.
   - title/text styling keeps !important so page-specific .hero h1 can't override.
   - If JS fails or data is empty, the static Saturn image (via themes.css
     default background-image) still shows. Zero broken-state risk.
   ═══════════════════════════════════════════════════════════════════ */

.saturn-hero .hero-saturn,
body.saturn-hero .hero-saturn,
.hero-saturn {
  background-color: var(--bg);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  isolation: isolate;
  position: relative;
  transition: background-image 0.6s ease;
}

/* Default Saturn background — applies when JS hasn't overridden.
   Inline style on the element (from loadDispatches) will beat this. */
.saturn-hero:not(.hero-dynamic) .hero-saturn,
body.saturn-hero:not(.hero-dynamic) .hero-saturn,
.hero-saturn:not(.hero-dynamic) {
  background-image: var(--saturn-image);
}

/* Top-to-bottom dark gradient — strong, !important to win over page CSS */
.saturn-hero .hero-saturn::before,
body.saturn-hero .hero-saturn::before,
.hero-saturn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--saturn-overlay-top)  0%,
    var(--saturn-overlay-mid)  45%,
    var(--saturn-overlay-bot) 100%);
  pointer-events: none;
  z-index: 0;
  display: block;
}

/* Soft radial vignette */
.saturn-hero .hero-saturn::after,
body.saturn-hero .hero-saturn::after,
.hero-saturn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at center 48%,
    var(--saturn-vignette) 0%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
  display: block;
}

/* Force content above both overlays */
.saturn-hero .hero-saturn > *,
body.saturn-hero .hero-saturn > *,
.hero-saturn > * {
  position: relative !important;
  z-index: 2 !important;
}

/* TITLE — high specificity + !important to beat .hero h1 (0,1,1) */
.saturn-hero h1,
body.saturn-hero h1,
.saturn-hero .hero h1,
body.saturn-hero .hero h1,
.saturn-hero h1.glitch-heading,
body.saturn-hero h1.glitch-heading,
.hero-saturn h1,
.hero-saturn .hero h1,
.hero-saturn h1.glitch-heading {
  background: var(--saturn-title-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: var(--saturn-title-glow) !important;
  opacity: 0.82 !important;
  letter-spacing: 0.12em !important;
  text-shadow: none !important;
}

/* SUBTITLE / DESC */
.saturn-hero .hero-sub,
.saturn-hero p.hero-sub,
.saturn-hero .hero p,
.saturn-hero .hero-subtitle,
.saturn-hero .hero-desc,
.saturn-hero .subtitle,
.saturn-hero p.subtitle,
.saturn-hero .header-group p,
.hero-saturn .hero-sub,
.hero-saturn p.hero-sub,
.hero-saturn .hero p,
.hero-saturn .hero-subtitle,
.hero-saturn .hero-desc {
  color: var(--saturn-sub-color) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6) !important;
  opacity: 0.95 !important;
  font-weight: 400 !important;
}

/* BADGES / EYEBROWS */
.saturn-hero .hero-badge,
.saturn-hero .eyebrow,
.saturn-hero .hero-eyebrow,
.hero-saturn .hero-badge,
.hero-saturn .eyebrow,
.hero-saturn .hero-eyebrow {
  background: var(--saturn-badge-bg) !important;
  border-color: var(--saturn-badge-border) !important;
  color: var(--saturn-badge-color) !important;
  backdrop-filter: blur(8px);
}

/* Hide conflicting page-specific hero ::before gradients */
.saturn-hero .hero::before,
body.saturn-hero .hero::before,
.hero-saturn .hero::before {
  display: none !important;
}

/* Tame glitch ::before/::after opacity on Saturn pages */
.saturn-hero h1.glitch-heading::before,
.saturn-hero h1.glitch-heading::after,
.hero-saturn h1.glitch-heading::before,
.hero-saturn h1.glitch-heading::after {
  opacity: 0.55 !important;
}

/* Mobile */
@media (max-width: 768px) {
  .hero-saturn { background-position: center 35% !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SATURN DARK-ONLY OPT-OUT v7
   Pages with <body class="saturn-dark-only"> keep the Saturn hero in dark
   mode but revert to the page's original hero styling in light mode.
   (broadcast + orbit-dispatches opt in to keep Saturn in both modes —
   no body class, no override, original v6 light-mode rules apply.)
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Strip the Saturn image + overlays in light mode */
[data-theme="light"] body.saturn-dark-only .hero-saturn {
  background-image: none !important;
  background-color: transparent !important;
  isolation: auto;
}
[data-theme="light"] body.saturn-dark-only .hero-saturn::before,
[data-theme="light"] body.saturn-dark-only .hero-saturn::after {
  display: none !important;
}

/* 2. Restore the page's original h1 styling (remove Saturn title gradient
   + transparent text-fill + drop-shadow filter) */
[data-theme="light"] body.saturn-dark-only .hero-saturn h1,
[data-theme="light"] body.saturn-dark-only .hero-saturn .hero h1,
[data-theme="light"] body.saturn-dark-only .hero-saturn h1.glitch-heading,
[data-theme="light"] body.saturn-dark-only .hero-saturn h1 span,
[data-theme="light"] body.saturn-dark-only .hero-saturn .hero h1 span,
[data-theme="light"] body.saturn-dark-only .hero-saturn h1 .cyan,
[data-theme="light"] body.saturn-dark-only .hero-saturn h1 .purple,
[data-theme="light"] body.saturn-dark-only .hero-saturn h1 .gold {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important;
  filter: none !important;
  opacity: 1 !important;
  letter-spacing: inherit !important;
  text-shadow: none !important;
}

/* 3. Restore the page's original subtitle color (remove forced white + text-shadow) */
[data-theme="light"] body.saturn-dark-only .hero-saturn .hero-sub,
[data-theme="light"] body.saturn-dark-only .hero-saturn p.hero-sub,
[data-theme="light"] body.saturn-dark-only .hero-saturn .hero p,
[data-theme="light"] body.saturn-dark-only .hero-saturn .hero-subtitle,
[data-theme="light"] body.saturn-dark-only .hero-saturn .hero-desc,
[data-theme="light"] body.saturn-dark-only .hero-saturn .subtitle,
[data-theme="light"] body.saturn-dark-only .hero-saturn p.subtitle,
[data-theme="light"] body.saturn-dark-only .hero-saturn .header-group p {
  color: var(--text-dim) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-weight: 300 !important;
}

/* 4. Restore the page's original badge styling */
[data-theme="light"] body.saturn-dark-only .hero-saturn .hero-badge,
[data-theme="light"] body.saturn-dark-only .hero-saturn .eyebrow,
[data-theme="light"] body.saturn-dark-only .hero-saturn .hero-eyebrow {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
  backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT-MODE READABILITY HARDENING v6
   - Backdrop-blur softens the image behind text in light mode
   - Stronger text-shadow on subtitle kills contrast edge cases
   - h1 inner spans (.cyan/.purple/.gold/<span>) get forced to title color
     so per-page CSS can't override and wash out the title
   - Falls through harmlessly in dark mode
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] .hero-saturn,
[data-theme="light"] .hero-saturn::before,
[data-theme="light"] .hero-saturn::after {
  -webkit-backdrop-filter: blur(var(--saturn-backdrop-blur));
  backdrop-filter: blur(var(--saturn-backdrop-blur));
}

/* Force inner h1 spans to inherit the title color in light mode —
   overrides per-page .cyan/.purple/.gold/<span> color rules */
[data-theme="light"] .hero-saturn h1,
[data-theme="light"] .hero-saturn .hero h1,
[data-theme="light"] .hero-saturn h1.glitch-heading,
[data-theme="light"] .hero-saturn h1 span,
[data-theme="light"] .hero-saturn .hero h1 span,
[data-theme="light"] .hero-saturn h1 .cyan,
[data-theme="light"] .hero-saturn h1 .purple,
[data-theme="light"] .hero-saturn h1 .gold {
  background: var(--saturn-title-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: var(--saturn-title-glow) !important;
  opacity: 0.95 !important;
  letter-spacing: 0.12em !important;
  text-shadow: none !important;
}

/* Subtitle/desc — extra text-shadow for guaranteed contrast in light mode */
[data-theme="light"] .hero-saturn .hero-sub,
[data-theme="light"] .hero-saturn p.hero-sub,
[data-theme="light"] .hero-saturn .hero p,
[data-theme="light"] .hero-saturn .hero-subtitle,
[data-theme="light"] .hero-saturn .hero-desc,
[data-theme="light"] .hero-saturn .subtitle,
[data-theme="light"] .hero-saturn p.subtitle,
[data-theme="light"] .hero-saturn .header-group p {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.7), 0 0 4px rgba(0,0,0,0.95) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-saturn, .hero-saturn *, .saturn-hero, .saturn-hero * {
    animation: none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   DARK MODE SMALL-TEXT ENFORCEMENT v8
   Per user request (3rd iteration): smallest text elements (eyebrows,
   mono labels, small captions, meta items) are forced to SOLID WHITE
   in night mode so they pop against the dark background. Neon accents
   and headings keep their brand identity. Light mode is also hardened
   so daytime small text is easy to read on white.
   ═══════════════════════════════════════════════════════════════════ */

/* Small mono labels and small captions — solid white in dark mode */
[data-theme="dark"] .section-eyebrow,
[data-theme="dark"] .arc-label,
[data-theme="dark"] .arc-episodes,
[data-theme="dark"] .arc-beat-label,
[data-theme="dark"] .arc-closes,
[data-theme="dark"] .soul-note,
[data-theme="dark"] .cast-designation,
[data-theme="dark"] .cast-role,
[data-theme="dark"] .cast-stat,
[data-theme="dark"] .footer-copy,
[data-theme="dark"] .footer-links a,
[data-theme="dark"] .nav-links a,
[data-theme="dark"] .arc-signal-tag,
[data-theme="dark"] .mn-phase-label,
[data-theme="dark"] .cast-cta,
[data-theme="dark"] .origin-signal-subtitle,
[data-theme="dark"] .origin-signal-meta .meta-item,
[data-theme="dark"] .transmission-tag,
[data-theme="dark"] .latest-signal-card .transmission-meta,
[data-theme="dark"] .orbital-credit,
[data-theme="dark"] .orbital-credit a,
[data-theme="dark"] .connect-link,
[data-theme="dark"] .framework-card .fw-concept,
[data-theme="dark"] .section-desc,
[data-theme="dark"] .pillar-num,
[data-theme="dark"] .beat-ep,
[data-theme="dark"] .transmission-meta,
[data-theme="dark"] .mn-phase-arrow-track,
[data-theme="dark"] .orbital-hud,
[data-theme="dark"] .hud-float,
[data-theme="dark"] .hero-eyebrow {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Body paragraphs, blockquotes, descriptions — solid white in dark mode */
[data-theme="dark"] .philosophy-text p,
[data-theme="dark"] .philosophy-quote,
[data-theme="dark"] .transmission-body,
[data-theme="dark"] .transmission-body p,
[data-theme="dark"] .arc-premise p,
[data-theme="dark"] .arc-beat,
[data-theme="dark"] .origin-signal-quote,
[data-theme="dark"] .mn-phase-desc,
[data-theme="dark"] .cast-desc,
[data-theme="dark"] .hero-desc,
[data-theme="dark"] p.hero-sub,
[data-theme="dark"] .hero-sub,
[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .subtitle,
[data-theme="dark"] p.subtitle,
[data-theme="dark"] .header-group p,
[data-theme="dark"] .orbital-narration,
[data-theme="dark"] .orbital-narration .narration-body,
[data-theme="dark"] .orbital-narration .narration-body p,
[data-theme="dark"] .orbital-narration .narration-attribution,
[data-theme="dark"] .framework-card p,
[data-theme="dark"] .pillar-desc,
[data-theme="dark"] .latest-signal-card .transmission-body,
[data-theme="dark"] .latest-signal-card .transmission-body p,
[data-theme="dark"] .arc-character,
[data-theme="dark"] .arc-tension,
[data-theme="dark"] .arc-focus-tag {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Subtitle / attribution — white in dark mode */
[data-theme="dark"] .philosophy-quote .attribution,
[data-theme="dark"] .orbital-narration .narration-title,
[data-theme="dark"] .transmission-title,
[data-theme="dark"] .origin-signal-title {
  color: #ffffff !important;
}

/* Headings keep their brand colors via existing rules */

/* ── LIGHT MODE READABILITY HARDENING ── */
[data-theme="light"] .section-eyebrow {
  opacity: 1 !important;
  color: var(--neon-cyan) !important;
  font-weight: 500 !important;
}
[data-theme="light"] .arc-beat-label,
[data-theme="light"] .arc-signal-tag,
[data-theme="light"] .section-desc,
[data-theme="light"] .arc-label,
[data-theme="light"] .arc-episodes,
[data-theme="light"] .arc-closes,
[data-theme="light"] .arc-beat,
[data-theme="light"] .arc-character,
[data-theme="light"] .arc-tension,
[data-theme="light"] .arc-focus-tag,
[data-theme="light"] .philosophy-text p,
[data-theme="light"] .philosophy-quote,
[data-theme="light"] .philosophy-quote .attribution,
[data-theme="light"] .cast-designation,
[data-theme="light"] .cast-role,
[data-theme="light"] .cast-desc,
[data-theme="light"] .cast-stat,
[data-theme="light"] .cast-cta,
[data-theme="light"] .nav-links a,
[data-theme="light"] .footer-copy,
[data-theme="light"] .footer-links a,
[data-theme="light"] .connect-link,
[data-theme="light"] .framework-card p,
[data-theme="light"] .origin-signal-subtitle,
[data-theme="light"] .origin-signal-meta .meta-item,
[data-theme="light"] .soul-note,
[data-theme="light"] .transmission-meta,
[data-theme="light"] .pillar-desc {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TARVOS SECTOR — Day Mode Overrides
   The dark space-scene container needs to stay dark (it's space),
   but the surrounding section, text, and stats need light-mode contrast.
   ═══════════════════════════════════════════════════════════════════ */

/* Section background — subtle warm tint instead of purple glow */
[data-theme="light"] #tarvos-sector {
  background: radial-gradient(ellipse at 70% 50%, rgba(67,56,202,0.06) 0%, transparent 60%);
}

/* The visual container stays dark — it's a space viewport.
   Brightened slightly for day mode so it's not too dim, but still dark enough for neon text. */
[data-theme="light"] .tarvos-visual {
  border: 1px solid rgba(0,245,255,0.3);
  background: linear-gradient(135deg, rgba(8,12,28,0.92), rgba(12,16,38,0.78));
  box-shadow: 0 0 30px rgba(0,245,255,0.12), inset 0 0 50px rgba(0,245,255,0.04);
}

/* HUD overlay text — FULL BRIGHT NEON on the dark viewport.
   No boxes, no backgrounds, just glowing neon text. */
[data-theme="light"] .tarvos-overlay-ui {
  color: #00f5ff;
  background: transparent !important;
  text-shadow: 0 0 8px rgba(0,245,255,0.6), 0 0 16px rgba(0,245,255,0.3);
}
[data-theme="light"] .tarvos-overlay-ui span {
  background: transparent !important;
}
[data-theme="light"] .tarvos-overlay-ui .tarvos-coord-label {
  color: #FBBF24;
  text-shadow: 0 0 8px rgba(251,191,36,0.6), 0 0 16px rgba(251,191,36,0.3);
}
[data-theme="light"] .tarvos-overlay-br {
  color: rgba(255,255,255,0.6);
  background: transparent !important;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
}

/* Scanline — stays bright cyan because it's on the dark viewport */
[data-theme="light"] .tarvos-scanline {
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.4), transparent);
}

/* Lore text — readable on light background */
[data-theme="light"] .tarvos-lore {
  color: #1e293b;
  line-height: 1.85;
}
[data-theme="light"] .tarvos-lore strong {
  color: #0369A1;
  font-weight: 600;
}
[data-theme="light"] .tarvos-lore .accent-gold {
  color: #B45309;
  font-weight: 600;
}

/* Stat cards — light mode with clear neon accent colors and no white boxes */
[data-theme="light"] .tarvos-stat {
  border: 1px solid rgba(0,245,255,0.25);
  background: transparent;
  backdrop-filter: none;
}
[data-theme="light"] .tarvos-stat:hover {
  border-color: rgba(0,245,255,0.5);
  background: rgba(0,245,255,0.04);
}
[data-theme="light"] .tarvos-stat-label {
  color: #64748B;
  font-weight: 500;
}
[data-theme="light"] .tarvos-stat-value {
  color: #0284C7;
}
[data-theme="light"] .tarvos-stat-value.gold {
  color: #B45309;
}
[data-theme="light"] .tarvos-stat-value.purple {
  color: #6366F1;
}