/* ============================================================
   Sophia's Space — dark/neon theme override for the math pages
   Loaded after each page's inline <style>, so it wins the cascade.
   ============================================================ */
:root{
  --d-accent:#ff7a18;
  --d-accent2:#ff4d00;
  --d-soft:#ffb070;
  --d-bg:#08070f;
  --d-ink:#ECE7F5;
  --d-muted:#a79fbe;
  --d-card:rgba(255,255,255,.04);
  --d-line:rgba(255,255,255,.10);
  --d-glow:0 0 10px rgba(255,122,24,.8), 0 0 30px rgba(255,122,24,.45);
}

html,body{
  background:var(--d-bg) !important;
  color:var(--d-ink) !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}
/* layered cosmic glow */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(255,77,0,.16), transparent 60%),
    radial-gradient(55% 45% at -5% 100%, rgba(124,43,255,.14), transparent 60%),
    radial-gradient(40% 35% at 50% 120%, rgba(255,45,107,.10), transparent 60%),
    #08070f;
}
.wrap{ padding-top:84px !important; }
b,strong{ color:#fff; }

/* ---------- Hero ---------- */
header.hero{
  background:linear-gradient(135deg, rgba(255,122,24,.22), rgba(124,43,255,.18)) !important;
  border:1px solid rgba(255,122,24,.30) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 60px rgba(255,77,0,.12) !important;
  color:#fff !important;
}
.hero .kap{ color:var(--d-soft) !important; opacity:1 !important; }
.hero h1{ color:#fff !important; }
.hero p{ color:rgba(255,255,255,.85) !important; }
.hero .pages{ background:rgba(0,0,0,.30) !important; color:#fff !important; border:1px solid rgba(255,255,255,.18); }

/* ---------- Sections / text ---------- */
h2.section{ color:#fff !important; }
h2.section .dot{ background:var(--d-accent) !important; box-shadow:var(--d-glow); }
.lead{ color:var(--d-muted) !important; }

/* ---------- Cards ---------- */
.card,.exrc{
  background:var(--d-card) !important;
  border:1px solid var(--d-line) !important;
  box-shadow:0 6px 24px rgba(0,0,0,.35) !important;
}
.topic h3,.exrc .etask .qt{ color:#fff !important; }
.topic p,.exrc .etask{ color:#cfc7e6 !important; }
.num{ background:rgba(255,122,24,.14) !important; color:var(--d-accent) !important; border:1px solid rgba(255,122,24,.30); }
.exrc .enum{ background:rgba(255,122,24,.14) !important; color:var(--d-accent) !important; border:1px solid rgba(255,122,24,.30); }

/* ---------- Formulas / chips ---------- */
.formula,.sub{
  background:rgba(255,122,24,.10) !important;
  color:var(--d-soft) !important;
  border:1px solid rgba(255,122,24,.22) !important;
}
.fbox .f{
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  border:1px solid rgba(255,122,24,.30) !important;
}

/* ---------- Example / tip / note ---------- */
.example{
  background:rgba(255,122,24,.08) !important;
  border:1px solid rgba(255,122,24,.25) !important;
}
.example .lbl{ color:var(--d-soft) !important; }
.example p{ color:#e9e2f7 !important; }
.tip{
  background:rgba(124,43,255,.12) !important;
  border:1px solid rgba(124,43,255,.30) !important;
  color:#e9e2f7 !important;
}
.tip b{ color:var(--d-soft) !important; }
.note{
  background:rgba(255,176,112,.10) !important;
  border:1px solid rgba(255,176,112,.25) !important;
  color:var(--d-soft) !important;
}

/* ---------- Quiz ---------- */
.quiz-intro{
  background:linear-gradient(135deg, var(--d-accent2), var(--d-accent)) !important;
  color:#1a0a00 !important;
  box-shadow:0 12px 36px rgba(255,77,0,.30) !important;
}
.quiz-intro h2,.quiz-intro p{ color:#1a0a00 !important; opacity:1 !important; }
.bar{ background:rgba(255,255,255,.10) !important; }
.bar>i{ background:linear-gradient(90deg, var(--d-accent), var(--d-soft)) !important; }
.q .qhead{ color:#fff !important; }
.q .qtag{ color:var(--d-muted) !important; }
.opt{
  background:rgba(255,255,255,.04) !important;
  border:2px solid var(--d-line) !important;
  color:#ECE7F5 !important;
}
.opt:hover:not(:disabled){ border-color:var(--d-accent) !important; background:rgba(255,122,24,.10) !important; }
.opt.correct{ border-color:#36d399 !important; background:rgba(54,211,153,.14) !important; color:#bff3dd !important; }
.opt.wrong{ border-color:#ff5d6c !important; background:rgba(255,93,108,.14) !important; color:#ffd2d6 !important; }
.fb.ok{ background:rgba(54,211,153,.12) !important; border:1px solid rgba(54,211,153,.4) !important; color:#bff3dd !important; }
.fb.no{ background:rgba(255,93,108,.12) !important; border:1px solid rgba(255,93,108,.4) !important; color:#ffd2d6 !important; }
.counter{ color:var(--d-muted) !important; }
#result .score{ color:var(--d-accent) !important; text-shadow:var(--d-glow); }
#result p{ color:#e9e2f7 !important; }

/* ---------- Buttons ---------- */
.btn{
  background:linear-gradient(135deg, var(--d-soft), var(--d-accent) 45%, var(--d-accent2)) !important;
  color:#1a0a00 !important; font-weight:700 !important;
  box-shadow:0 6px 20px rgba(255,77,0,.30) !important;
}
.btn:disabled{ opacity:.35 !important; }
.reveal,.ghost{
  background:rgba(255,122,24,.12) !important;
  color:var(--d-soft) !important;
  border:1px solid rgba(255,122,24,.35) !important;
}
.reveal:hover,.ghost:hover{ background:rgba(255,122,24,.22) !important; }

/* ---------- Solutions / verified ---------- */
.sol{
  background:rgba(54,211,153,.10) !important;
  border:1px solid rgba(54,211,153,.32) !important;
  color:#cdeede !important;
}
.sol b{ color:#7ef0c0 !important; }
.verified{
  background:rgba(54,211,153,.10) !important;
  border:1px solid rgba(54,211,153,.32) !important;
  color:#cdeede !important;
}
.verified b{ color:#7ef0c0 !important; }
.round-h{ color:var(--d-soft) !important; }

/* ---------- Diagrams: keep on light cards for legibility ---------- */
.gfig{
  background:#f5f7fc !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 6px 22px rgba(0,0,0,.4) !important;
}
svg.tri{
  background:#f5f7fc !important;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:10px;
  box-shadow:0 6px 22px rgba(0,0,0,.4);
}

/* ---------- Footer ---------- */
footer{ color:var(--d-muted) !important; border-top:1px solid var(--d-line); padding-top:18px; }

/* ============================================================
   Fixed top bar (injected by player.js): home link + 00 sound
   ============================================================ */
.ss-bar{
  position:fixed; top:0; left:0; right:0; height:58px; z-index:9999;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 16px;
  background:linear-gradient(180deg, rgba(8,7,15,.94), rgba(8,7,15,.55) 70%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.ss-home,.ss-sound{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; text-decoration:none;
  font:500 14px/1 'Inter',-apple-system,system-ui,sans-serif; letter-spacing:.02em; color:#cfc7e6;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:9px 15px; transition:.2s ease;
}
.ss-home{ font-weight:600; }
.ss-home .ar{ color:var(--d-accent); font-size:1.05em; }
.ss-home:hover,.ss-sound:hover{ color:#fff; border-color:rgba(255,122,24,.55); box-shadow:0 0 16px rgba(255,122,24,.3); }
.ss-num{ font:700 12px/1 ui-monospace,Menlo,Consolas,monospace; color:var(--d-accent); letter-spacing:.06em; }
.ss-dot{ width:7px; height:7px; border-radius:50%; background:var(--d-accent); box-shadow:0 0 10px var(--d-accent); animation:ssblink 1.5s ease-in-out infinite; }
.ss-sound.muted .ss-dot{ background:#5a5470; box-shadow:none; animation:none; }
@keyframes ssblink{ 0%,100%{opacity:1} 50%{opacity:.25} }
@media (max-width:520px){
  .ss-home span.txt{ display:none; }
  .wrap{ padding-top:78px !important; }
}