:root{
  --blue:#0b5ed7; --blue-dark:#084298; --amber:#ff9f1c; --bg:#f4f6fb;
  --card:#ffffff; --ink:#1c2333; --muted:#6b7280; --green:#198754; --red:#dc3545;
  --radius:14px; --shadow:0 6px 24px rgba(13,42,90,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px}
header.site{background:linear-gradient(135deg,#0b5ed7,#084298);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.nav{display:flex;align-items:center;gap:22px;padding:14px 0}
.brand{font-weight:800;font-size:22px;color:#fff;letter-spacing:.5px;display:flex;align-items:center;gap:10px}
.brand .badge{background:var(--amber);color:#3a2500;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px}
.nav nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.nav nav a{color:#dbe7ff;padding:8px 14px;border-radius:999px;font-weight:600;font-size:15px}
.nav nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.nav nav a.active{background:#fff;color:var(--blue-dark)}
.hero{background:linear-gradient(135deg,#0b5ed7,#084298);color:#fff;padding:52px 0 60px;text-align:center}
.hero h1{margin:0 0 10px;font-size:40px;letter-spacing:.3px}
.hero p{margin:0 auto 26px;max-width:640px;color:#d7e6ff;font-size:17px}
.stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0 0 28px}
.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);padding:14px 26px;min-width:150px}
.stat b{display:block;font-size:30px}
.stat span{font-size:13px;color:#d7e6ff}
.btn{display:inline-block;border:0;cursor:pointer;font-weight:700;font-size:16px;border-radius:999px;padding:13px 30px;transition:transform .08s}
.btn:active{transform:scale(.97)}
.btn-amber{background:var(--amber);color:#3a2500}
.btn-amber:hover{background:#ffaa33}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark)}
.btn-ghost{background:#eef2fb;color:var(--blue-dark)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.section{padding:38px 0}
.section h2{margin:0 0 6px;font-size:26px}
.section .sub{color:var(--muted);margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cat-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .15s}
.cat-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.cat-card h3{margin:0 0 4px;font-size:17px}
.cat-card p{margin:0;color:var(--muted);font-size:14px}
.cat-card .n{font-weight:800;color:var(--blue);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.q-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin:22px 0}
.q-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.q-text{font-size:20px;font-weight:700;margin:0 0 16px}
.q-img{display:block;max-width:100%;max-height:300px;border-radius:10px;margin:0 auto 18px}
.opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.opt{border:2px solid #e3e8f2;border-radius:12px;padding:13px 16px;cursor:pointer;font-size:16px;transition:border-color .12s,background .12s;display:flex;gap:12px;align-items:flex-start}
.opt:hover{border-color:var(--blue);background:#f5f9ff}
.opt .k{font-weight:800;color:var(--blue);min-width:22px}
.opt.correct{border-color:var(--green);background:#eef9f0}
.opt.correct .k{color:var(--green)}
.opt.wrong{border-color:var(--red);background:#fdf0f0}
.opt.wrong .k{color:var(--red)}
.opt.disabled{cursor:default}
.opt.disabled:hover{border-color:#e3e8f2;background:#fff}
.opt.correct.disabled:hover{border-color:var(--green);background:#eef9f0}
.expl{margin-top:16px;background:#fff8e8;border-left:4px solid var(--amber);border-radius:0 10px 10px 0;padding:14px 16px;font-size:15px}
.expl b{display:block;margin-bottom:4px;color:#8a5a00}
.progress{height:10px;background:#e3e8f2;border-radius:999px;overflow:hidden;margin:18px 0 6px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#3d8bfd);width:0;transition:width .25s}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.chip{border:2px solid #e3e8f2;background:#fff;border-radius:999px;padding:7px 15px;font-size:14px;font-weight:600;cursor:pointer}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff}
.timer{font-size:22px;font-weight:800;color:var(--blue-dark);font-variant-numeric:tabular-nums}
.timer.low{color:var(--red)}
.navigator{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px;margin:16px 0}
.navq{aspect-ratio:1;border:2px solid #e3e8f2;background:#fff;border-radius:10px;font-weight:700;cursor:pointer;font-size:14px}
.navq.cur{border-color:var(--blue);color:var(--blue)}
.navq.done{background:#e7f1ff;border-color:#bcd6ff}
.result-hero{text-align:center;padding:34px 0}
.result-hero .big{font-size:56px;font-weight:800;margin:6px 0}
.pass{color:var(--green)} .fail{color:var(--red)}
.review{border-top:1px solid #edf0f6;padding:16px 0}
.review .rq{font-weight:700;margin:0 0 8px}
.muted{color:var(--muted);font-size:14px}
.stable{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.stable th,.stable td{padding:10px 8px;text-align:left;border-bottom:1px solid #e6ebf5;vertical-align:middle}
.stable th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.stable .progress{margin:0}
footer.site{margin-top:44px;padding:26px 0;color:var(--muted);font-size:13px;text-align:center;border-top:1px solid #e5e9f2}
.badge-n{background:var(--red);color:#fff;border-radius:999px;font-size:12px;padding:1px 8px;margin-left:6px;vertical-align:2px}
@media(max-width:640px){.hero h1{font-size:30px}.q-text{font-size:18px}.nav{gap:10px}.nav nav a{padding:7px 10px;font-size:14px}}