/* ============================================================
   Learn.edu × Air Theme
   Dark navy · Sky blue · Glassmorphism · Cloud atmosphere
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,600&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Root overrides ─────────────────────────────────────────── */
:root {
  --navy:       #0D1117;
  --navy-mid:   #0D2347;
  --navy-card:  #111827;
  --sky:        #C8E8F5;
  --sky-dim:    rgba(200,232,245,0.15);
  --accent:     #4A90D9;
  --accent-glow:rgba(74,144,217,0.35);
  --white:      #FFFFFF;
  --glass:      rgba(255,255,255,0.05);
  --glass-border:rgba(255,255,255,0.10);
  --glass-hover: rgba(255,255,255,0.09);

  /* Override learn.edu vars */
  --bg:         #0D1117;
  --surface:    #111827;
  --card:       rgba(255,255,255,0.05);
  --border:     rgba(255,255,255,0.10);
  --text:       #F0F6FF;
  --muted:      rgba(240,246,255,0.50);
  --radius:     16px;
  --shadow:     0 4px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 8px 48px rgba(0,0,0,0.55);

  /* Subject accent colors — keep hue, shift lightness for dark bg */
  --math:       #FF7A54;
  --math-bg:    rgba(255,122,84,0.12);
  --sci:        #34D399;
  --sci-bg:     rgba(52,211,153,0.12);
  --spa:        #FBBF24;
  --spa-bg:     rgba(251,191,36,0.12);
  --ok:         #34D399;
  --ok-bg:      rgba(52,211,153,0.12);
  --error:      #F87171;
  --error-bg:   rgba(248,113,113,0.12);
}

/* ── Body + atmosphere ──────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--navy);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}

/* Atmospheric cloud gradient behind everything */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 600px;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(74,144,217,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 10%,  rgba(200,232,245,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 30%,  rgba(13,35,71,0.60) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 300px;
  background: radial-gradient(ellipse 60% 60% at 50% 120%, rgba(74,144,217,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

#app { position: relative; z-index: 1; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(74,144,217,0.35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(74,144,217,0.6); }

/* ── Navigation ─────────────────────────────────────────────── */
.nav {
  background: rgba(13,17,23,0.80);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 0;
}

.logo-wordmark,
.nav-logo .logo-wordmark {
  color: var(--white) !important;
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 1.3rem !important;
}

.nav-back {
  color: rgba(255,255,255,0.70) !important;
  border-color: rgba(255,255,255,0.15) !important;
  background: var(--glass) !important;
}
.nav-back:hover {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.30) !important;
  background: var(--glass-hover) !important;
}

.nav-icon-btn {
  color: rgba(255,255,255,0.70) !important;
  border-color: rgba(255,255,255,0.15) !important;
  background: var(--glass) !important;
}
.nav-icon-btn:hover {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.30) !important;
  background: var(--glass-hover) !important;
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  padding: 64px 0 48px;
  position: relative;
  overflow: visible;
}

.hero-label {
  background: rgba(74,144,217,0.15) !important;
  color: #93C5FD !important;
  border: 1px solid rgba(74,144,217,0.30) !important;
}
.hero-label::before { display: none; }

.hero h1 {
  color: var(--white) !important;
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
}

.hero h1 .accent     { color: #FF7A54 !important; font-style: normal; }
.hero h1 .accent-sci { color: #34D399 !important; font-style: normal; }

.hero p {
  color: rgba(240,246,255,0.65) !important;
}

/* Cloud doodles — recolor as sky wisps */
.hero-doodles svg circle,
.hero-doodles svg ellipse { fill: rgba(200,232,245,0.06); stroke: rgba(200,232,245,0.15); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border-radius: 10px !important;
  transition: all 0.2s !important;
}

.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 0 0 var(--accent-glow) !important;
}
.btn-primary:hover {
  opacity: 1 !important;
  background: #3B82F6 !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
  transform: translateY(-1px) !important;
}

.btn-ghost {
  background: var(--glass) !important;
  color: rgba(255,255,255,0.80) !important;
  border: 1px solid var(--glass-border) !important;
}
.btn-ghost:hover {
  background: var(--glass-hover) !important;
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

.btn-outline {
  background: transparent !important;
  color: rgba(255,255,255,0.75) !important;
  border: 1px solid var(--glass-border) !important;
}
.btn-outline:hover {
  border-color: rgba(255,255,255,0.30) !important;
  color: var(--white) !important;
}

.btn-success {
  background: #059669 !important;
  color: #fff !important;
}
.btn-success:hover { background: #047857 !important; }

/* ── Subject cards ───────────────────────────────────────────── */
.subject-card {
  background: var(--glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
}
.subject-card:hover {
  background: var(--glass-hover) !important;
  box-shadow: 0 8px 40px rgba(74,144,217,0.20) !important;
  transform: translateY(-3px) !important;
}

.subject-card::before { opacity: 0.7 !important; }

.subject-card.math    { border-top: 2px solid var(--math) !important; }
.subject-card.science { border-top: 2px solid var(--sci) !important; }
.subject-card.spanish { border-top: 2px solid var(--spa) !important; }

.subject-card h2      { color: var(--white) !important; }
.subject-card p       { color: var(--muted) !important; }

.subject-card.math    .s-arrow { color: var(--math) !important; }
.subject-card.science .s-arrow { color: var(--sci) !important;  }
.subject-card.spanish .s-arrow { color: var(--spa) !important;  }

/* ── Stats bar ───────────────────────────────────────────────── */
.home-stats {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: var(--radius) !important;
}
.home-stats .stat-label { color: var(--muted) !important; }
.home-stats .stat-value { color: var(--white) !important; }
.home-stats .stat-divider { background: var(--glass-border) !important; }

/* ── Lesson cards ────────────────────────────────────────────── */
.lesson-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.lesson-card:hover {
  background: var(--glass-hover) !important;
  border-color: rgba(74,144,217,0.30) !important;
  box-shadow: 0 4px 20px rgba(74,144,217,0.12) !important;
}

.lesson-card .lesson-title { color: var(--white) !important; }
.lesson-card .lesson-meta  { color: var(--muted) !important; }
.lesson-card .lesson-type  { color: var(--muted) !important; }

/* Completed lesson */
.lesson-card.done {
  background: rgba(52,211,153,0.07) !important;
  border-color: rgba(52,211,153,0.20) !important;
}

/* ── XP badge ────────────────────────────────────────────────── */
.xp-badge {
  background: rgba(251,191,36,0.15) !important;
  color: #FCD34D !important;
  border: 1px solid rgba(251,191,36,0.25) !important;
  border-radius: 999px !important;
}

/* ── XP HUD ──────────────────────────────────────────────────── */
.xp-hud {
  background: linear-gradient(135deg, rgba(251,191,36,0.20), rgba(245,158,11,0.15)) !important;
  border: 1.5px solid rgba(251,191,36,0.35) !important;
  color: #FCD34D !important;
}

/* ── XP toast ────────────────────────────────────────────────── */
.xp-toast {
  background: rgba(13,17,23,0.95) !important;
  border: 1.5px solid rgba(251,191,36,0.40) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  color: var(--white) !important;
}
.xp-toast-amount { color: #FCD34D !important; }
.xp-toast-reason { color: var(--muted) !important; }
.xp-toast-unlock { border-top-color: rgba(251,191,36,0.20) !important; color: #FF7A54 !important; }

/* ── XP earned pill ──────────────────────────────────────────── */
.xp-earned-pill {
  background: rgba(251,191,36,0.15) !important;
  border: 1.5px solid rgba(251,191,36,0.30) !important;
  color: #FCD34D !important;
}

/* ── Progress bars ───────────────────────────────────────────── */
.progress-bar {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 99px !important;
}
.progress-fill {
  background: linear-gradient(90deg, var(--accent), #60A5FA) !important;
  border-radius: 99px !important;
}

/* ── Subject header ──────────────────────────────────────────── */
.subject-header h1 { color: var(--white) !important; }
.subject-header p  { color: var(--muted) !important; }

/* ── Lesson header ───────────────────────────────────────────── */
.lesson-header h1  { color: var(--white) !important; }
.lesson-header .sub { color: var(--muted) !important; }

/* ── Lesson content cards (quiz, fill-in, etc.) ──────────────── */
.lesson-card-wrap,
.lesson-step,
.step-card,
.quiz-card,
.card-lesson,
.lesson-code {
  background: rgba(17,24,39,0.90) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #F0F6FF !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ── Quiz options ────────────────────────────────────────────── */
.quiz-option,
.choice-btn,
.option-btn {
  background: rgba(17,24,39,0.85) !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  color: #F0F6FF !important;
  transition: all 0.2s !important;
}
.quiz-option:hover,
.choice-btn:hover,
.option-btn:hover {
  background: var(--glass-hover) !important;
  border-color: rgba(74,144,217,0.40) !important;
  color: var(--white) !important;
}
.quiz-option.selected,
.choice-btn.selected,
.option-btn.selected {
  background: rgba(74,144,217,0.15) !important;
  border-color: var(--accent) !important;
  color: var(--white) !important;
}
.quiz-option.correct,
.choice-btn.correct {
  background: rgba(52,211,153,0.15) !important;
  border-color: var(--sci) !important;
}
.quiz-option.wrong,
.choice-btn.wrong {
  background: rgba(248,113,113,0.15) !important;
  border-color: var(--error) !important;
}

/* ── Input fields ────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--white) !important;
  border-radius: 10px !important;
  transition: border-color 0.2s !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(74,144,217,0.15) !important;
}
input::placeholder,
textarea::placeholder { color: rgba(240,246,255,0.30) !important; }

/* ── Modals ──────────────────────────────────────────────────── */
.modal,
.modal-overlay,
.overlay-panel {
  background: rgba(13,17,23,0.96) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  color: var(--text) !important;
}

/* ── Reward cards ────────────────────────────────────────────── */
.reward-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
  backdrop-filter: blur(10px) !important;
}
.reward-card:hover {
  background: var(--glass-hover) !important;
  box-shadow: 0 4px 20px rgba(74,144,217,0.12) !important;
}
.reward-card.unlocked {
  border-color: rgba(251,191,36,0.35) !important;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs, .tab-bar {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.tab-btn, .tab {
  color: var(--muted) !important;
  border-radius: 8px !important;
}
.tab-btn.active, .tab.active, .tab-btn[aria-selected="true"] {
  background: rgba(74,144,217,0.20) !important;
  color: var(--sky) !important;
}

/* ── Badges / pills ──────────────────────────────────────────── */
.badge, .pill, .tag {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--muted) !important;
}

/* ── Dividers ────────────────────────────────────────────────── */
hr, .divider { border-color: var(--glass-border) !important; }

/* ── Home headline (Soria/Playfair) ──────────────────────────── */
.home-headline {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  color: var(--white) !important;
}

/* ── Section headings ────────────────────────────────────────── */
h1, h2, h3 { color: var(--white) !important; }
p, span, li { color: inherit; }
a { color: var(--sky) !important; }
a:hover { color: var(--white) !important; }

/* ── Streak indicators ───────────────────────────────────────── */
.streak-badge, .streak-pill, .streak-count {
  background: rgba(255,122,84,0.15) !important;
  border: 1px solid rgba(255,122,84,0.25) !important;
  color: #FCA5A5 !important;
}

/* ── Game containers (Math Blast, Word Rush) ──────────────────── */
.game-container,
.game-card,
.game-wrap {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── Teacher dashboard ───────────────────────────────────────── */
.teacher-sidebar,
.sidebar,
.dashboard-sidebar {
  background: rgba(13,17,23,0.90) !important;
  border-right: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.dash-card,
.stat-card,
.teacher-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
}

/* ── Student home (full-bleed layout) ────────────────────────── */
.sh-hero,
.sh-header {
  background: linear-gradient(180deg, rgba(13,35,71,0.60) 0%, transparent 100%) !important;
}

/* ── Auth / login screens ────────────────────────────────────── */
.auth-card,
.login-card,
.signup-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Themes — override existing theme classes to stay Air ─────── */
body.theme-night,
body.theme-ocean,
body.theme-forest,
body.theme-galaxy,
body.theme-sunset {
  background: var(--navy) !important;
  color: var(--text) !important;
}
body.theme-night .nav,
body.theme-ocean .nav,
body.theme-forest .nav,
body.theme-galaxy .nav,
body.theme-sunset .nav {
  background: rgba(13,17,23,0.80) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes air-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}
@keyframes air-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,144,217,0); }
  50%       { box-shadow: 0 0 20px 4px rgba(74,144,217,0.20); }
}

.subject-card { animation: air-float 6s ease-in-out infinite; }
.subject-card:nth-child(2) { animation-delay: 0.8s; }
.subject-card:nth-child(3) { animation-delay: 1.6s; }
.subject-card:hover { animation: none; }

/* ── Subtle cloud wisps (decorative) ─────────────────────────── */
.hero::after {
  content: '';
  position: absolute;
  top: 20px; right: -60px;
  width: 340px; height: 180px;
  background: radial-gradient(ellipse, rgba(200,232,245,0.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Code blocks ─────────────────────────────────────────────── */
code, pre, .lesson-code {
  background: rgba(0,0,0,0.40) !important;
  color: #93C5FD !important;
  border: 1px solid rgba(74,144,217,0.20) !important;
  border-radius: 8px !important;
}

/* ── Scrollable content areas ────────────────────────────────── */
.scroll-area, .lesson-scroll {
  scrollbar-color: rgba(74,144,217,0.35) transparent;
}

/* ── Correct/wrong feedback ──────────────────────────────────── */
.feedback-correct, .result-correct {
  background: rgba(52,211,153,0.12) !important;
  border-color: rgba(52,211,153,0.30) !important;
  color: #6EE7B7 !important;
}
.feedback-wrong, .result-wrong {
  background: rgba(248,113,113,0.12) !important;
  border-color: rgba(248,113,113,0.30) !important;
  color: #FCA5A5 !important;
}

/* ── Final polish: remove white/light backgrounds wherever they leak ── */
[style*="background:white"],
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background:#FFFFFF"],
[style*="background-color:white"],
[style*="background-color: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"] {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
}

[style*="background:#f9fafb"],
[style*="background: #f9fafb"],
[style*="background:#F9FAFB"],
[style*="background:#f3f4f6"],
[style*="background: #f3f4f6"],
[style*="background:#f0f0f0"],
[style*="min-height:100vh"][style*="background:white"],
[style*="min-height: 100vh"][style*="background:white"] {
  background: var(--navy) !important;
  color: var(--text) !important;
}

/* Override inline nav backgrounds */
nav[style*="background:white"],
nav[style*="background: white"] {
  background: rgba(13,17,23,0.85) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Override inline border colors */
[style*="border-bottom:1px solid #f0f0f0"],
[style*="border:1.5px solid #e5e7eb"],
[style*="border:2px solid #e5e7eb"],
[style*="border-bottom:1.5px solid #f3f4f6"] {
  border-color: rgba(255,255,255,0.10) !important;
}

/* Override inline text colors on dark surfaces */
[style*="color:#374151"],
[style*="color: #374151"],
[style*="color:#111827"],
[style*="color:#0A0A0A"],
[style*="color:#1a1a1a"] {
  color: #F0F6FF !important;
}
[style*="color:#6b7280"],
[style*="color: #6b7280"],
[style*="color:#9ca3af"],
[style*="color: #9ca3af"],
[style*="color:#4b5563"] {
  color: rgba(240,246,255,0.65) !important;
}

/* Inline box-shadows — remove white card shadows on dark bg */
[style*="box-shadow:0 2px 12px rgba(0,0,0"],
[style*="box-shadow:0 4px 24px rgba(0,0,0"],
[style*="box-shadow:0 2px 10px rgba(0,0,0"] {
  box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}


/* Inline-styled quiz answer buttons from views.js */
[style*="border:2px solid #e5e7eb"][style*="border-radius:14px"],
[style*="border:2px solid #e5e7eb"][style*="border-radius:12px"],
[style*="border:2px solid #e5e7eb"][style*="border-radius:16px"],
[style*="border:1.5px solid #e5e7eb"][style*="border-radius:14px"],
[style*="border:1.5px solid #e5e7eb"][style*="border-radius:12px"] {
  background: rgba(17,24,39,0.85) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #F0F6FF !important;
}

/* Inline question/card text containers */
p[style*="font-weight:800"],
p[style*="font-weight: 800"],
div[style*="font-weight:800"][style*="line-height"],
div[style*="font-weight:700"][style*="font-size:0.8"],
span[style*="font-weight:700"][style*="color:#374151"] {
  color: #F0F6FF !important;
}

/* ── Selection ───────────────────────────────────────────────── */
::selection {
  background: rgba(74,144,217,0.35);
  color: #fff;
}