@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  --bg: #08080F;
  --surface: #141420;
  --border: #1E1E2E;
  --text: #F2EFE8;
  --text-muted: rgba(242, 239, 232, 0.55);
  --text-subtle: rgba(242, 239, 232, 0.3);
  --lime: #CAFF47;
  --coral: #FF6058;

  --menstrual: #FF4545;
  --follicular: #47CAFF;
  --ovulation: #CAFF47;
  --luteal: #C084FC;

  --font-heading: 'Clash Display', 'Arial Black', sans-serif;
  --font-sub: 'Syne', sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --font-body: 'DM Sans', 'Arial', sans-serif;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.6);
  --shadow-lime: 0 0 40px rgba(202, 255, 71, 0.25);
  --shadow-coral: 0 0 40px rgba(255, 96, 88, 0.25);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);

  --max-w: 1200px;
  --nav-h: 72px;
  --bg-alt: #0d0d1c;
}

/* ============ LIGHT THEME ============ */
[data-theme="light"] {
  --bg: #FAF9F6;
  --bg-alt: #F0EEE9;
  --surface: #FFFFFF;
  --border: #E2DDD5;
  --text: #1A1A2E;
  --text-muted: rgba(26, 26, 46, 0.6);
  --text-subtle: rgba(26, 26, 46, 0.35);

  /* Phase colors stay vibrant — just slightly deeper */
  --menstrual: #E03030;
  --follicular: #1AAEE0;
  --ovulation: #8BBF00;
  --luteal: #9B5FD4;
  --lime: #7AB800;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.16);
  --shadow-lime: 0 0 40px rgba(122, 184, 0, 0.2);
  --shadow-coral: 0 0 40px rgba(224, 48, 48, 0.2);

  /* Transparent layers standardization */
  --ghost-white: rgba(255, 255, 255, 0.1);
  --ghost-black: rgba(0, 0, 0, 0.02);
  --glass-surface: rgba(255, 255, 255, 0.85);
  --hero-overlay: rgba(0, 0, 0, 0.05);
  --glow-opacity: 0.12;
}

[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); }

/* Smooth transition for every themed element */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.3s ease, box-shadow 0.4s ease;
}



html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

@media (pointer: fine) and (min-width: 769px) {
  body { cursor: none; }
  * { cursor: none !important; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.1;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg { max-width: 100%; display: block; }

button {
  font-family: var(--font-body);
  border: none;
  outline: none;
  background: none;
  cursor: none;
}

input, select, textarea {
  font-family: var(--font-body);
  outline: none;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--lime); }

/* Cursor: tiny sharp dot */
#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.4s ease;
}

/* Cursor: smooth trailing ring */
#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--lime);
  pointer-events: none;
  z-index: 99998;
  will-change: transform, width, height;
  opacity: 0;
  transition: opacity 0.2s ease, width 0.25s cubic-bezier(0.34,1.56,0.64,1), height 0.25s cubic-bezier(0.34,1.56,0.64,1), border-color 0.4s ease;
}

/* Ensure cursor stays visible after first mouse movement */
body.has-mouse #cursor-dot,
body.has-mouse #cursor-ring {
  opacity: 1 !important;
}

#page-curtain {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 99998;
  pointer-events: none;
  transform: translateX(-100%);
}

.phase-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-full);
  font-family: var(--font-sub);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-lime {
  background: var(--lime);
  color: var(--bg);
  box-shadow: var(--shadow-lime);
}

.btn-lime:hover {
  box-shadow: 0 0 60px rgba(202, 255, 71, 0.5);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  border-color: var(--lime);
  color: var(--lime);
}

.btn-coral {
  background: var(--coral);
  color: #fff;
  box-shadow: var(--shadow-coral);
}

.error-card {
  background: rgba(255, 69, 69, 0.08);
  border: 1px solid rgba(255, 69, 69, 0.3);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  color: #FF6B6B;
  font-family: var(--font-sub);
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.error-card::before {
  content: '!';
  min-width: 20px;
  height: 20px;
  background: rgba(255, 69, 69, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
  line-height: 20px;
  text-align: center;
}

.phase-accents {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 768px) {
  :root { --nav-h: 60px; }
  body { cursor: auto; }
  #cursor { display: none; }
  * { cursor: auto !important; }
}

/* ============================================================
   THEME TOGGLE — Cycle Phase Button
   ============================================================ */

#themeToggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  /* Disable the global transition so the orb can have its own */
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

#themeToggle:hover {
  border-color: var(--lime);
  box-shadow: 0 0 18px rgba(122, 184, 0, 0.2);
}

/* The pill track that the orb slides within */
.tt-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
  transition: background 0.4s ease !important;
}

#themeToggle.is-light .tt-track {
  background: linear-gradient(135deg, #FFD700, #FF9800);
}

/* Orb that slides left ↔ right */
.tt-orb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

#themeToggle.is-light .tt-orb {
  transform: translateX(18px);
  background: #FFFFFF;
}

/* Icons inside the orb */
.tt-icon {
  width: 11px;
  height: 11px;
  position: absolute;
  transition: opacity 0.3s ease, transform 0.4s ease !important;
}

.tt-moon {
  color: var(--luteal);
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.tt-bloom {
  color: #FF9800;
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

#themeToggle.is-light .tt-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

#themeToggle.is-light .tt-bloom {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Text labels  */
.tt-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  position: absolute;
  right: 0.7rem;
  pointer-events: none;
}

.tt-label-dark {
  color: var(--luteal);
  opacity: 1;
  transform: translateY(0);
}

.tt-label-light {
  color: #FF9800;
  opacity: 0;
  transform: translateY(6px);
}

#themeToggle.is-light .tt-label-dark {
  opacity: 0;
  transform: translateY(-6px);
}

#themeToggle.is-light .tt-label-light {
  opacity: 1;
  transform: translateY(0);
}

/* Make room for the label text */
#themeToggle { padding-right: 2.8rem; }

/* ============================================================
   FULL PAGE RIPPLE
   ============================================================ */
#themeRipple {
  position: fixed;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: var(--ripple-size, 0);
  height: var(--ripple-size, 0);
  background: var(--ripple-color, #08080F);
  z-index: 9999;
  pointer-events: none;
}

#themeRipple.animate {
  animation: phaseShiftRipple 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes phaseShiftRipple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Light mode specific overrides for components that need it */
[data-theme="light"] .nav {
  background: rgba(250, 249, 246, 0.92);
  border-bottom: 1px solid var(--border);
}

[data-theme="light"] .btn-lime {
  color: #FFFFFF;
}

[data-theme="light"] .mobile-menu {
  background: var(--bg);
  border-color: var(--border);
}

[data-theme="light"] .hygiene-card,
[data-theme="light"] .campaign-win-block {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

[data-theme="light"] .hero h1 { color: var(--text); }
[data-theme="light"] .hero-sub { color: var(--text-muted); }

/* ============================================================
   COMPREHENSIVE LIGHT THEME — ALL PAGES
   ============================================================ */

/* SHARED NAV */
[data-theme="light"] .nav {
  background: rgba(250, 249, 246, 0.96) !important;
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .mobile-menu {
  background: var(--bg);
  border-color: var(--border);
}

/* DASHBOARD NAV */
[data-theme="light"] .dash-nav {
  background: rgba(250, 249, 246, 0.96) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* DASHBOARD SIDEBAR */
[data-theme="light"] .dash-sidebar {
  background: var(--surface) !important;
  border-left: 1px solid var(--border) !important;
}
[data-theme="light"] .sidebar-section { border-color: var(--border); }

/* DASHBOARD CARDS */
[data-theme="light"] .starter-card,
[data-theme="light"] .tip-card,
[data-theme="light"] .arc-card,
[data-theme="light"] .insight-card,
[data-theme="light"] .log-day-card,
[data-theme="light"] .partner-card,
[data-theme="light"] .calendar-day-tooltip {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* KEYWORD CHIPS (on phase hero - still readable) */
[data-theme="light"] .keyword-chip {
  background: rgba(0,0,0,0.08);
  color: #fff;
}

/* DASHBOARD MAIN */
[data-theme="light"] .dash-main {
  background: var(--bg);
  border-right-color: var(--border);
}
[data-theme="light"] .arc-info-row,
[data-theme="light"] .log-week-row {
  background: var(--surface);
  border-color: var(--border);
}

/* AVOID CARDS */
[data-theme="light"] .avoid-card {
  background: rgba(224, 48, 48, 0.04);
  border-color: rgba(224, 48, 48, 0.18);
}

/* AUTH PAGE */
[data-theme="light"] .auth-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}
[data-theme="light"] .auth-input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .auth-input:focus {
  border-color: var(--lime);
  background: var(--surface);
}
[data-theme="light"] .social-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .social-btn:hover {
  background: var(--bg);
  border-color: var(--lime);
}
[data-theme="light"] .auth-page,
[data-theme="light"] .auth-wrap { background: var(--bg); }

/* ONBOARDING PAGE */
[data-theme="light"] .onboarding-page { background: var(--bg); }
[data-theme="light"] .onboarding-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .toggle-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .toggle-btn.selected {
  background: rgba(122,184,0,0.12);
  border-color: var(--lime);
  color: var(--text);
}
[data-theme="light"] .symptom-chip {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .slider-track { background: var(--border); }

/* PHASES PAGE */
[data-theme="light"] .phases-hero { background: var(--bg-alt); }
[data-theme="light"] .phase-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .phase-detail-panel {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .phase-tab { color: var(--text-muted); border-color: var(--border); }
[data-theme="light"] .phase-tab.active {
  background: var(--lime);
  color: #fff;
  border-color: var(--lime);
}

/* INDEX — FEATURES / HERO / CTA */
[data-theme="light"] .hero {
  background: linear-gradient(160deg, #FAF9F6 0%, #F0EEE9 100%);
}
[data-theme="light"] .feature-visual {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .phase-card-mini { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .cta-section {
  background: linear-gradient(135deg, rgba(122,184,0,0.07), rgba(155,95,212,0.05));
}
[data-theme="light"] .comparison-row { border-color: var(--border); }
[data-theme="light"] .comparison-row.ours { background: rgba(122,184,0,0.05); }

/* CAMPAIGN */
[data-theme="light"] .campaign-section { background: var(--bg-alt); }
[data-theme="light"] .hygiene-card { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .campaign-win-block { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .hygiene-card,
[data-theme="light"] .campaign-win-block,
[data-theme="light"] .feature-block { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
[data-theme="light"] .hygiene-chip { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="light"] .campaign-hashtag { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="light"] .campaign-step-num { color: var(--luteal); border-color: var(--border); background: var(--surface); }
[data-theme="light"] .campaign-win-badge { background: rgba(122,184,0,0.08); border-color: rgba(122,184,0,0.2); color: var(--text-muted); }

/* ORIGIN / FOUNDERS */
[data-theme="light"] .origin-section {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 40%, var(--bg) 100%);
}
[data-theme="light"] .origin-team { border-color: var(--border); }
[data-theme="light"] .origin-morph { border-color: var(--border); }

/* FOOTER */
[data-theme="light"] footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
[data-theme="light"] .footer-copy,
[data-theme="light"] .footer-disclaimer { color: var(--text-subtle); }
[data-theme="light"] .footer-links a { color: var(--text-muted); }

/* BUTTONS */
[data-theme="light"] .btn-lime { background: var(--lime); color: #fff; }
[data-theme="light"] .btn-outline {
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .btn-outline:hover {
  border-color: var(--lime);
  background: rgba(122,184,0,0.06);
}

/* CODE / ERROR / SUCCESS */
[data-theme="light"] code { background: rgba(122,184,0,0.1); color: #5a8a00; }
[data-theme="light"] .error-card { background: rgba(224,48,48,0.06); border-color: rgba(224,48,48,0.25); color: #c02020; }
[data-theme="light"] .success-card { background: rgba(122,184,0,0.08); border-color: rgba(122,184,0,0.3); color: #4a7000; }

/* SECTION TAGS (little upper labels) */
[data-theme="light"] .section-tag { color: var(--text-subtle); }

/* TOGGLE MOBILE */
@media (max-width: 768px) {
  #themeToggle { padding: 0.25rem 2.5rem 0.25rem 0.3rem; }
  .tt-track { width: 34px; height: 19px; }
  .tt-orb { width: 15px; height: 15px; }
  #themeToggle.is-light .tt-orb { transform: translateX(15px); }
  .tt-icon { width: 9px; height: 9px; }
  .tt-label { font-size: 0.6rem; right: 0.5rem; }
}

/* ============================================================
   FINAL NUCLEAR LIGHT OVERRIDES — Fixes all remaining
   hardcoded rgba(8,8,15) and rgba(255,255,255) that don't
   flip automatically through CSS variables.
   ============================================================ */

/* ALL NAVBARS — main, dashboard, phases */
[data-theme="light"] .nav,
[data-theme="light"] .dash-nav,
[data-theme="light"] .phases-nav {
  background: rgba(250, 249, 246, 0.97) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}

/* MOBILE MENU */
[data-theme="light"] .mobile-menu {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .mobile-menu a {
  color: var(--text) !important;
}

/* SURFACES: rgba(255,255,255,0.02—0.08) ghost panels → proper surface */
[data-theme="light"] .tip-card,
[data-theme="light"] .log-week-row,
[data-theme="light"] .arc-info-row,
[data-theme="light"] .starter-card,
[data-theme="light"] .avoid-card-inner,
[data-theme="light"] .insight-block,
[data-theme="light"] .partner-tip,
[data-theme="light"] .hygiene-card,
[data-theme="light"] .campaign-win-block,
[data-theme="light"] .phase-detail-section,
[data-theme="light"] .phases-learn-card,
[data-theme="light"] .onboarding-card,
[data-theme="light"] .step-card,
[data-theme="light"] .card-inner,
[data-theme="light"] .roadmap-node .node-content {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* TEXT INSIDE TRANSPARENT PANELS that were white-on-dark */
[data-theme="light"] .tip-card p,
[data-theme="light"] .tip-card span,
[data-theme="light"] .tip-card h3,
[data-theme="light"] .insight-block p,
[data-theme="light"] .section-title,
[data-theme="light"] .avoid-text,
[data-theme="light"] .step-research,
[data-theme="light"] .chronicle-chat p,
[data-theme="light"] .node-content p {
  color: var(--text-muted) !important;
}

/* HEADING FIXES IN LIGHT MODE */
[data-theme="light"] .chronicle-title,
[data-theme="light"] .step-card h3,
[data-theme="light"] .roadmap-title,
[data-theme="light"] .node-content h3 {
  color: var(--text) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

/* CALENDAR & STAT NUMBERS */
[data-theme="light"] .cal-day-num { color: var(--text-muted) !important; }
[data-theme="light"] .calendar-day-name { color: var(--text-subtle) !important; }

/* DASHBOARD MAIN BODY */
[data-theme="light"] body,
[data-theme="light"] .dashboard-layout,
[data-theme="light"] .dash-main {
  background: var(--bg) !important;
}

/* SIDEBAR */
[data-theme="light"] .dash-sidebar {
  background: var(--surface) !important;
  border-left-color: var(--border) !important;
}
[data-theme="light"] .sidebar-section {
  border-color: var(--border) !important;
}
[data-theme="light"] .sidebar-label {
  color: var(--text-subtle) !important;
}
[data-theme="light"] .dash-nav-link {
  color: var(--text-muted) !important;
}
[data-theme="light"] .dash-nav-link:hover {
  color: var(--text) !important;
  background: var(--border) !important;
}

/* DASHBOARD HERO TEXT */
[data-theme="light"] .phase-hero-tag { background: rgba(0,0,0,0.05) !important; color: var(--text-muted) !important; }
[data-theme="light"] .phase-hero-day-badge { color: var(--text-subtle) !important; }
[data-theme="light"] .phase-hero-name { color: var(--text) !important; }
[data-theme="light"] .phase-hero-subtitle { color: var(--text-muted) !important; }

/* ONBOARDING PAGE BG */
[data-theme="light"] .onboarding-layout,
[data-theme="light"] .onboarding-wrap {
  background: var(--bg) !important;
}

/* AUTH PAGE */
[data-theme="light"] .auth-layout {
  background: var(--bg) !important;
}
[data-theme="light"] .google-btn {
  border-color: var(--border) !important;
  color: var(--text) !important;
  background: var(--surface) !important;
}
[data-theme="light"] .google-btn:hover {
  background: var(--bg) !important;
  border-color: var(--lime) !important;
}

/* PHASES LEARN SECTION */
[data-theme="light"] .phases-learn {
  background: var(--bg-alt) !important;
}
[data-theme="light"] .phases-symptoms-grid .symptom-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* CAMPAIGN + KIT IMAGE BADGE (dark pill) */
[data-theme="light"] .kit-image-badge {
  background: rgba(250, 249, 246, 0.9) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

/* FOOTER BACKGROUND */
[data-theme="light"] footer,
[data-theme="light"] .footer-inner {
  background: var(--bg-alt) !important;
  border-top-color: var(--border) !important;
}
[data-theme="light"] .footer-logo span { color: var(--lime) !important; }
[data-theme="light"] .footer-nav a,
[data-theme="light"] .footer-copy,
[data-theme="light"] .footer-disclaimer {
  color: var(--text-subtle) !important;
}

/* PWA MODAL */
[data-theme="light"] #pwaModal,
[data-theme="light"] .pwa-modal-inner {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="light"] .pwa-step {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* SECTION TAG subtle labels */
[data-theme="light"] .section-tag,
[data-theme="light"] .campaign-tag,
[data-theme="light"] .origin-tag {
  color: var(--text-subtle) !important;
}

/* HERO TEXT */
[data-theme="light"] .hero-tag { color: var(--text-subtle) !important; }
[data-theme="light"] .hero h1 { color: var(--text) !important; }
[data-theme="light"] .hero-sub { color: var(--text-muted) !important; }
[data-theme="light"] .hero-disclaimer { color: var(--text-subtle) !important; }

/* GUARANTEE high contrast for main typography */
[data-theme="light"] p,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] li,
[data-theme="light"] span:not(.role-icon):not(.phase-dot) {
  color: var(--text) !important;
}

/* Phase name text on hero cards — keep white (colored bg) */
[data-theme="light"] .phase-hero-name,
[data-theme="light"] .phase-hero-subtitle,
[data-theme="light"] .phase-hero-tag,
[data-theme="light"] .phase-hero-day-badge,
[data-theme="light"] .energy-label,
[data-theme="light"] .energy-val,
[data-theme="light"] .phase-quote,
[data-theme="light"] .keyword-chip,
[data-theme="light"] .bp-phase,
[data-theme="light"] .bp-day,
[data-theme="light"] .bp-keyword {
  color: rgba(255,255,255,0.95) !important;
}
[data-theme="light"] .phase-hero-name { color: rgba(0,0,0,0.9) !important; text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important; }

/* ============================================================
   PHASES PAGE — SCIENCE SECTION — DECODER + RIGHT PANEL FIXES
   ============================================================ */

/* Phase section right panel border */
[data-theme="light"] .phase-section-right {
  border-left-color: var(--border) !important;
  background: var(--bg) !important;
}

/* ---- DECODER ITEMS ---- */
[data-theme="light"] .decoder-item {
  border-color: var(--border) !important;
  background: var(--surface) !important;
}

[data-theme="light"] .decoder-trigger {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-muted) !important;
}

[data-theme="light"] .decoder-trigger span {
  color: var(--text) !important;
}

/* Wrong column (red side) */
[data-theme="light"] .decoder-wrong {
  background: rgba(224, 48, 48, 0.04) !important;
  border-right-color: var(--border) !important;
}

[data-theme="light"] .decoder-wrong .decoder-col-tag {
  color: #c02020 !important;        /* fully opaque red — was 55% opacity, invisible on white */
}

[data-theme="light"] .decoder-wrong .decoder-col-text {
  color: var(--text-muted) !important;   /* was rgba(255,255,255,0.35) = invisible */
  text-decoration-color: rgba(200, 32, 32, 0.4) !important;
}

/* Right column (lime side) */
[data-theme="light"] .decoder-right {
  background: rgba(122, 184, 0, 0.04) !important;
}

[data-theme="light"] .decoder-right .decoder-col-tag {
  color: #5a8a00 !important;        /* fully opaque lime — was 75% opacity lime, near-invisible on white */
}

[data-theme="light"] .decoder-right .decoder-col-text {
  color: var(--text) !important;    /* was rgba(255,255,255,0.85) = invisible */
}

/* ---- EXPERIENCE ICONS ---- */
[data-theme="light"] .experience-icon {
  background: var(--border) !important;   /* was rgba(255,255,255,0.05) = invisible */
}

/* ---- PHASE DAYS BADGE (left panel — on colored bg, keep white) ---- */
/* .phase-days-badge stays white — it sits on the vibrant phase color */

/* ---- HORMONE CHIPS (left panel — on colored bg, keep white) ---- */
/* .hormone-chip stays white — it sits on the vibrant phase color */

/* ---- RIGHT PANEL TEXT (phase-tagline is on colored bg) ---- */
/* .phase-tagline stays white — it's on the coloured left panel */

/* ---- DANGER CARDS ---- */
[data-theme="light"] .danger-card {
  background: rgba(224, 48, 48, 0.03) !important;
  border-color: rgba(224, 48, 48, 0.12) !important;
}

[data-theme="light"] .danger-card[data-level="1"] {
  border-left-color: rgba(255, 165, 60, 0.7) !important;
}
[data-theme="light"] .danger-card[data-level="2"] {
  border-left-color: rgba(255, 80, 30, 0.8) !important;
}
[data-theme="light"] .danger-card[data-level="3"] {
  border-left-color: rgba(255, 45, 45, 1) !important;
}

[data-theme="light"] .danger-card[data-level="1"] .danger-level-label {
  color: rgba(200, 120, 30, 1) !important;
}
[data-theme="light"] .danger-card[data-level="2"] .danger-level-label {
  color: rgba(200, 70, 20, 1) !important;
}
[data-theme="light"] .danger-card[data-level="3"] .danger-level-label {
  color: rgba(200, 30, 30, 1) !important;
}

/* ---- MOVE CARD (your move section) ---- */
[data-theme="light"] .move-card {
  background: rgba(122, 184, 0, 0.05) !important;
  border-color: rgba(122, 184, 0, 0.2) !important;
}

[data-theme="light"] .move-step-num {
  border-color: rgba(122, 184, 0, 0.4) !important;
  color: var(--lime) !important;
}

/* ---- CHEAT CODE ---- */
[data-theme="light"] .cheat-code {
  background: rgba(122, 184, 0, 0.05) !important;
  border-color: rgba(122, 184, 0, 0.25) !important;
}

/* ---- FIGHT ITEMS ---- */
[data-theme="light"] .fight-item {
  background: rgba(224, 48, 48, 0.04) !important;
  border-color: rgba(224, 48, 48, 0.15) !important;
  color: var(--text-muted) !important;
}

/* ---- PHASE SECTION RIGHT SCROLLBAR ---- */
[data-theme="light"] .phase-section-right::-webkit-scrollbar-thumb {
  background: var(--border) !important;
}

/* ---- MOBILE: right panel top border ---- */
[data-theme="light"] .phase-section-right {
    border-top-color: var(--border) !important;
  }
}

/* FINAL SWEEP FOR USER MENTIONED SECTIONS */

/* FOUNDER / ORIGIN SECTION */
[data-theme="light"] .origin-caption-name { color: var(--text) !important; }
[data-theme="light"] .origin-caption-role { color: var(--text-subtle) !important; }
[data-theme="light"] .origin-team-name { color: var(--text) !important; }
[data-theme="light"] .origin-headline { color: var(--text) !important; }

/* ONBOARDING PROGRESS */
[data-theme="light"] .step-dot:not(.active):not(.done) { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--text-subtle) !important; }
[data-theme="light"] .step-line:not(.done) { background: var(--border) !important; }

/* DASHBOARD ENERGY & HERO */
[data-theme="light"] .energy-track { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .energy-fill { background: var(--lime) !important; }
[data-theme="light"] .phase-hero::before { background: var(--hero-overlay) !important; }
[data-theme="light"] .next-phase-item { background: var(--ghost-black) !important; }
[data-theme="light"] .wellness-item { background: var(--ghost-black) !important; }
[data-theme="light"] .disclaimer-card { background: rgba(122, 184, 0, 0.04) !important; border-color: rgba(122, 184, 0, 0.15) !important; }
[data-theme="light"] .starter-card:hover { border-color: rgba(122, 184, 0, 0.3) !important; }
[data-theme="light"] .avoid-card { background: linear-gradient(135deg, rgba(255,96,88,0.05) 0%, rgba(255,96,88,0.01) 100%) !important; border-color: rgba(255,96,88,0.3) !important; }

/* FALLBACK FOR ANY WHITE TEXT TRAPPED IN LIGHT MODE */
[data-theme="light"] .text-white-fix,
[data-theme="light"] .hero-title,
[data-theme="light"] .chronicle-title,
[data-theme="light"] .roadmap-title { 
  color: var(--text) !important; 
}

/* REDUCE GLOW STRENGTH FOR LIGHT MODE SECTIONS */
[data-theme="light"] .origin-glow,
[data-theme="light"] .spine-glow,
[data-theme="light"] .node-icon::after {
  opacity: 0.35 !important;
}