:root {
  --bg:#0b1320;
  --card:#111a2c;
  --ink:#e8eefc;
  --muted:#98a3b8;
  --accent:#6aa8ff;
  --good:#1fbf75;
  --bad:#ff6b6b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b1320,#0a1020);color:var(--ink);font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;align-items:center;justify-content:center}
.container{width:clamp(320px, 92vw, 900px);}
.card{background:var(--card);border:1px solid #1f2b46;box-shadow:0 10px 35px rgba(0,0,0,.35);border-radius:20px;padding:28px}
h1{margin:0 0 12px;font-weight:800;letter-spacing:.3px}
p.sub{margin-top:4px;color:var(--muted)}
button, .btn{cursor:pointer;border:0;border-radius:14px;padding:14px 18px;font-weight:700;letter-spacing:.3px}
.btn-primary{background:var(--accent);color:#06102b}
.btn-muted{background:#1a2540;color:var(--ink)}
.stack{display:flex;gap:12px;flex-wrap:wrap}
label.toggle{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.95rem;color:var(--muted)}
label.toggle input{width:18px;height:18px}
.center{display:flex;align-items:center;justify-content:center;}
.hidden{display:none !important}
.row{display:flex;gap:24px;align-items:center}
.grow{flex:1}
.progress{height:8px;background:#1c2642;border-radius:999px;overflow:hidden}
.progress > div{height:8px;background:var(--accent);width:0}
.question{font-size:1.1rem;margin:10px 0 8px}
.question-figure{margin:16px 0;display:flex;justify-content:center;gap:16px}
.question-figure img{max-width:100%;border:1px solid #1f2b46;border-radius:12px}
.answers{display:grid;gap:10px;margin:18px 0}
label.option{display:flex;gap:10px;align-items:flex-start;background:#101a30;border:1px solid #1e2b49;padding:14px;border-radius:12px;}
label.option:hover{border-color:#2b3e6a}
.foot{display:flex;gap:10px;justify-content:space-between;align-items:center}
.notice{font-size:.95rem;color:var(--muted)}
.result{font-size:1.6rem;font-weight:800;margin:6px 0 10px}
.pass{color:var(--good)}
.fail{color:var(--bad)}
input[type=file]{display:block;width:100%;padding:12px;background:#0e172c;border:1px dashed #2a3a64;border-radius:12px;color:var(--muted)}
.kbd{font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#0e172a;border:1px solid #213055;border-radius:6px;padding:3px 6px;color:#bcd3ff}
#score-report{margin:28px auto 0;max-width:100%;text-align:left}
#score-report table{width:100%;border-collapse:collapse;font-size:.95rem}
#score-report th,#score-report td{padding:10px 12px;border-bottom:1px solid #1f2b46;vertical-align:top}
#score-report th{text-transform:uppercase;font-size:.8rem;letter-spacing:.5px;color:var(--muted);font-weight:700}
#score-report tbody tr:last-child td{border-bottom:0}
#score-report .q-label{font-weight:700;font-size:.9rem;margin-bottom:4px;color:var(--ink)}
#score-report .q-text{color:var(--muted);font-size:.85rem}
#score-report .ans{display:block}
#score-report .status{font-weight:700}
#score-report .status.correct{color:var(--good)}
#score-report .status.incorrect{color:var(--bad)}
#score-report .status.not-answered{color:var(--muted)}