:root{
  --bg:#0b1024; --panel:#141a3a; --text:#f6f7ff; --muted:#9aa0c8;
  --line:#2b3265; --brand:#87a3ff; --brand2:#39e0b4; --ok:#4ade80; --bad:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);
     background:linear-gradient(180deg,#090d20,#111642 40%,#0b1024 100%)}
.site-header,.site-footer{max-width:960px;margin:auto;padding:16px 20px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.site-footer{opacity:.7}
nav{display:flex;gap:8px;flex-wrap:wrap}
.nav{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer}
.nav[aria-current="page"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset}
#app{max-width:960px;margin:12px auto 40px;padding:0 20px}
.view{display:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.view.active{display:block}
.lead{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.card{background:linear-gradient(135deg,rgba(135,163,255,.2),rgba(57,224,180,.15));border:1px solid var(--line);color:var(--text);
      padding:18px;border-radius:14px;text-align:left;cursor:pointer;transition:transform .1s ease,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:var(--brand)}
.quiz-head{display:flex;gap:12px;align-items:center;justify-content:space-between}
.progress{flex:1;height:10px;background:#0a0f28;border:1px solid var(--line);border-radius:999px}
.bar{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:inherit}
.question{font-size:1.1rem;margin:10px 0 10px}
.answers{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.answer{background:#11163a;border:1px solid var(--line);padding:12px 14px;border-radius:12px;cursor:pointer}
.answer.correct{border-color:var(--ok);background:rgba(74,222,128,.08)}
.answer.wrong{border-color:var(--bad);background:rgba(239,68,68,.08)}
.btn{background:var(--brand);color:#0a0f28;border:none;border-radius:12px;padding:10px 14px;cursor:pointer}
.btn:disabled{opacity:.5;cursor:default}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--line)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.score{font-size:1.25rem}
.scores{display:grid;gap:8px;margin:10px 0}
.scores .item{display:flex;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#11163a}