:root {
    --bg: #07111f;
    --panel: rgba(17, 30, 49, .92);
    --panel2: #13243a;
    --text: #f8fafc;
    --muted: #94a3b8;
    --line: rgba(148, 163, 184, .18);
    --accent: #38bdf8;
    --accent2: #818cf8;
    --good: #22c55e;
    --danger: #fb7185;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background:
    radial-gradient(circle at 20% 0%, rgba(56,189,248,.15), transparent 35%),
    radial-gradient(circle at 90% 20%, rgba(129,140,248,.14), transparent 30%),
    var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, sans-serif; }
body { min-height: 100vh; }
button { font: inherit; }
.app { width: min(760px, 100%); margin: 0 auto; padding: 18px 14px 40px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 8px 4px 18px; }
.brand { font-weight:900; letter-spacing:.14em; font-size:18px; }
.subtitle { color:var(--muted); font-size:12px; margin-top:2px; }
.student-badge { max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.25); padding:8px 10px; border-radius:999px; font-size:12px; }
.card { background:linear-gradient(180deg, rgba(19,36,58,.95), rgba(13,26,43,.95)); border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.center { text-align:center; padding:50px 20px; }
.hidden { display:none !important; }
.spinner { width:38px; height:38px; margin:0 auto 14px; border:3px solid rgba(255,255,255,.12); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.13em; }
.hero h1 { margin:7px 0 8px; font-size:28px; }
.hero p { margin:0; color:var(--muted); line-height:1.55; }
.test-list { display:grid; gap:12px; margin-top:14px; }
.test-card { padding:16px; border-radius:18px; background:rgba(19,36,58,.78); border:1px solid var(--line); }
.test-top { display:flex; justify-content:space-between; gap:12px; }
.test-card h3 { margin:5px 0 6px; font-size:18px; }
.test-card p { color:var(--muted); margin:0 0 14px; line-height:1.45; font-size:14px; }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.chip { background:rgba(148,163,184,.1); border:1px solid var(--line); border-radius:999px; padding:6px 8px; font-size:11px; color:#cbd5e1; }
.primary, .finish, .secondary, .start-btn { border:0; border-radius:14px; padding:13px 15px; cursor:pointer; font-weight:800; }
.primary, .start-btn { width:100%; color:#06111d; background:linear-gradient(135deg, var(--accent), #67e8f9); }
.start-btn:disabled { opacity:.45; cursor:not-allowed; }
.secondary { flex:1; color:var(--text); background:var(--panel2); border:1px solid var(--line); }
.finish { width:100%; margin-top:12px; color:white; background:linear-gradient(135deg, #7c3aed, var(--accent2)); }
.attempt-head { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.attempt-head h2 { margin:5px 0 0; font-size:19px; }
.timer { min-width:82px; text-align:center; padding:10px; border-radius:14px; font-weight:900; font-variant-numeric:tabular-nums; background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.25); }
.progress-wrap { height:6px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin:12px 2px; }
.progress-bar { height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .25s ease; }
.question-card { min-height:330px; }
.question-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-bottom:14px; }
.question-card h3 { font-size:20px; line-height:1.45; margin:0 0 18px; }
.options { display:grid; gap:10px; }
.option { display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left; color:var(--text); background:rgba(148,163,184,.07); border:1px solid var(--line); padding:13px; border-radius:15px; cursor:pointer; }
.option.selected { border-color:var(--accent); background:rgba(56,189,248,.12); }
.option-key { display:grid; place-items:center; min-width:28px; height:28px; border-radius:9px; background:rgba(255,255,255,.08); font-weight:900; }
.nav-row { display:flex; gap:10px; margin-top:12px; }
.result { text-align:center; padding:30px 18px; }
.result-icon { font-size:44px; }
.score { font-size:58px; font-weight:950; margin:6px 0 20px; }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px; }
.stat { padding:12px 7px; border-radius:14px; background:rgba(148,163,184,.08); }
.stat strong { display:block; font-size:20px; }
.stat span { color:var(--muted); font-size:11px; }
#errorText { color:#fecdd3; line-height:1.5; }
@media (max-width:420px) {
    .app { padding-left:10px; padding-right:10px; }
    .card { border-radius:18px; padding:15px; }
    .hero h1 { font-size:24px; }
    .question-card h3 { font-size:18px; }
}