/* ============================================================================
   LearnIt — dark skin for the Year 12 practice engines (maths + essay).
   Include AFTER the engine's own <style> so it wins by cascade order.
   Remaps the engine design tokens to the dark premium palette and overrides
   the few hardcoded white surfaces. The print/exam-paper output opens in its
   own window with separate styles, so downloaded papers stay correctly white.
   ========================================================================== */
:root{
  --bg:#06192a; --card:rgba(255,255,255,0.04); --ink:#f3f7fb; --muted:hsl(208,14%,66%);
  --line:rgba(255,255,255,0.10);
  --accent:#9bbdd4; --accent-soft:rgba(155,189,212,0.14); --accent2:#6ea8d8;
  --good:#6fd3a6; --good-soft:rgba(111,211,166,0.13); --bad:#ec8d8d; --bad-soft:rgba(236,141,141,0.13);
  --gold:#d8b56c; --shadow:0 14px 40px rgba(0,0,0,0.40);
}
body{
  color:var(--ink) !important;
  background:
    radial-gradient(820px 560px at 6% -8%, rgba(155,139,214,0.18), transparent 56%),   /* violet */
    radial-gradient(720px 560px at 96% 4%, rgba(95,197,154,0.13), transparent 55%),     /* green  */
    radial-gradient(1000px 820px at 78% 116%, rgba(108,182,201,0.16), transparent 56%), /* teal   */
    radial-gradient(620px 520px at 26% 104%, rgba(216,181,108,0.08), transparent 60%),  /* gold   */
    linear-gradient(180deg, hsl(201,100%,13%) 0%, hsl(201,86%,10%) 52%, #00080f 100%) !important;
  background-attachment:fixed !important;
}
nav{ background:rgba(7,24,40,0.82) !important; border-bottom-color:var(--line) !important;
     backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%); }
.nav-back{ background:rgba(255,255,255,0.05); }
.nav-back:hover{ background:rgba(255,255,255,0.10); }

/* cards become glass */
.card{ background:var(--card); backdrop-filter:blur(10px) saturate(115%); -webkit-backdrop-filter:blur(10px) saturate(115%); }

/* tabs */
.tab{ background:rgba(255,255,255,0.05); }
.tab.on{ color:#06223f; background:linear-gradient(135deg,#7fb0de,#3f78c0); border-color:transparent; }

/* buttons */
.btn{ color:#06223f; background:linear-gradient(135deg,#7fb0de,#3f78c0); box-shadow:0 8px 22px rgba(63,120,192,0.32); }
.btn.ghost{ background:rgba(255,255,255,0.05); color:var(--accent); border:1px solid var(--line); box-shadow:none; }
.btn.ghost:hover{ background:rgba(255,255,255,0.09); border-color:var(--accent2); }

/* MC options + inputs */
.opt{ background:rgba(255,255,255,0.035); }
.opt:hover{ border-color:var(--accent2); background:rgba(255,255,255,0.06); }
.opt.correct{ background:var(--good-soft); } .opt.wrong{ background:var(--bad-soft); }
.ansrow input, .ansrow .pin{ background:rgba(255,255,255,0.05); color:var(--ink); }
.ansrow input::placeholder, .ansrow .pin::placeholder{ color:hsl(208,12%,52%); }
.ansrow input.correct, .ansrow .pin.correct{ background:var(--good-soft); }
.ansrow input.wrong, .ansrow .pin.wrong{ background:var(--bad-soft); }
.ansrow .pin.selfcheck{ background:var(--accent-soft); }

/* pills / chips / badges */
.scorepill{ background:rgba(255,255,255,0.05); }
.chip{ background:rgba(255,255,255,0.05); }
.chip.on{ color:#cfe2f0; }
.countsel .chip.on{ color:#06223f; }
.gen-badge{ color:#06223f; background:linear-gradient(90deg,#7fb0de,#3f78c0); }
.ws-print, .ws-btn{ background:var(--accent-soft); }
.ws-print:hover, .ws-btn:hover{ background:rgba(255,255,255,0.10); }

/* feedback */
.fb.ok{ border-color:rgba(111,211,166,0.40); }
.fb.no{ border-color:rgba(236,141,141,0.40); }
.fb .soln{ background:rgba(255,255,255,0.04); }
.qtext th, .ptext th, .fb .soln th{ background:var(--accent-soft); }
.plabel{ background:var(--accent-soft); }

/* swapped emoji icons inherit text colour, sit on the text baseline */
.li-emoji{ vertical-align:-0.14em; }