:root{--bg:#0f1115;--fg:#e6e6e6;--muted:#9aa4b2;--card:#161a22;--accent:#5fb3f9;--ok:#2ecc71;--bad:#ff6b6b}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;line-height:1.5;margin:0;background:var(--bg);color:var(--fg)}
header{padding:1rem;border-bottom:1px solid #1f2430}
header h1{margin:.2rem 0;font-size:1.6rem}
header p{margin:0;color:var(--muted)}
.controls{display:flex;gap:.5rem;align-items:center;margin:1rem;padding:1rem;background:var(--card);border:1px solid #1f2430;border-radius:12px}
label{display:flex;gap:.4rem;align-items:center}
select,button{background:#0e151e;color:var(--fg);border:1px solid #2a3443;border-radius:8px;padding:.45rem .6rem}
button{background:var(--accent);color:#04121f;font-weight:600;cursor:pointer}
textarea{background:#0e151e;color:var(--fg);border:1px solid #2a3443;border-radius:8px;padding:.5rem}
.hidden{display:none}
main{max-width:900px;margin:0 auto;padding:0 1rem 2rem}
.card{background:var(--card);border:1px solid #1f2430;border-radius:12px;padding:1rem;margin:1rem}
#questionText{font-size:1.2rem;margin:1rem 0}
#questionMeta{color:var(--muted)}
#answers{list-style:upper-alpha;padding-left:1.2rem}
#answers li{margin:.5rem 0;padding:.6rem;border:1px solid #2a3443;border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s}
#answers li:hover{background:#111827}
#answers li.selected{outline:2px solid var(--accent);background:#0e1822}
#answers li.correct{border-color:var(--ok);background:#0f2b1c}
#answers li.incorrect{border-color:var(--bad);background:#2a1010}
.actions{display:flex;gap:.5rem;margin-top:1rem}
#feedback{margin-top:1rem;font-weight:600}
.progress{height:8px;background:#222;border-radius:999px;overflow:hidden}
.progress > .bar{height:100%;width:0;background:var(--accent);transition:width .2s}
footer{margin-top:2rem;color:var(--muted);font-size:.9rem;padding:1rem;border-top:1px solid #1f2430}
.end{display:flex;flex-direction:column;gap:.8rem}
.score{font-weight:700}
.topnav{position:fixed;top:12px;right:12px;z-index:1000}
.topnav a{display:inline-block;background:var(--accent);color:#04121f;text-decoration:none;padding:.45rem .7rem;border-radius:8px;font-weight:700}