/* JLPT N5 mock exam.
   Shares the Bee & Honey tokens with the rest of the site; everything here
   is exam-specific. The governing idea is that during a timed section the
   page shows the question and nothing else — no site nav, no page header,
   no course branding competing for the 20 minutes the learner has. */

body{line-height:1.6;}
.wrap{max-width:var(--page-width);margin:0 auto;padding:0 var(--page-gutter) 80px;}
button{font-family:inherit;cursor:pointer;}
.jp{font-family:var(--font-jp);}
.mono{font-family:var(--font-mono);}

.wrap > header{padding:32px 0 18px;border-bottom:1px solid var(--line);}

/* Course tabs, matching the drill pages. Two of the three lead to the other
   page, so they are links; the one for this page is a plain span — a tab
   that navigates to where you already are is a dead control. */
.tabs{display:flex;gap:6px;margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px;}
.tab-btn,.tab-link{flex:1;display:flex;align-items:center;justify-content:center;padding:9px 8px;border-radius:4px;font-size:13.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;border:none;background:none;}
.tab-link:hover{background:var(--surface-2);color:var(--ink);}
.tab-btn.active{background:var(--accent);color:var(--ink-inverse);}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
h1{font-size:26px;margin:0;}
.wrap > footer{padding:36px 0 8px;color:var(--ink-soft);font-size:11.5px;font-family:var(--font-mono);text-align:center;}
.view{display:none;padding-top:28px;}
.view.active{display:block;}
.load-error{color:var(--flag);}

/* Focus mode: a timed section owns the whole screen. */
body.in-exam .site-header{display:none;}
body.in-exam .wrap{padding-top:14px;}
body.in-exam .wrap > footer{display:none;}
body.in-exam #savePrompt{display:none;}

/* ---------- buttons ---------- */
.btn-primary{background:var(--accent);color:var(--ink-inverse);border:none;border-radius:var(--radius);padding:12px 22px;font-size:14.5px;font-weight:600;}
.btn-primary:hover{background:var(--accent-hover);}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);padding:11px 18px;font-size:14px;font-weight:500;}
.btn-ghost:hover{border-color:var(--accent-line);}
.btn-ghost[disabled]{opacity:.4;cursor:default;}
.btn-start{width:100%;margin-top:22px;padding:15px;font-size:16px;}

/* ---------- intro ---------- */
.intro-card,.history-card,.resume-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:16px;}
.lead{margin:0 0 18px;color:var(--ink-soft);font-size:14.5px;}
.struct{width:100%;border-collapse:collapse;font-size:13.5px;}
.struct th{text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);padding:0 10px 8px 0;border-bottom:1px solid var(--line);}
.struct td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);}
.struct td.jp{color:var(--ink);font-family:var(--font-jp);font-weight:500;white-space:nowrap;}
.struct .num{text-align:right;font-family:var(--font-mono);padding-right:0;}
.pass-rule{margin-top:20px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius);padding:14px 16px;}
.pass-rule h3,.pass-rule h2{margin:0 0 6px;font-size:14px;}
.pass-rule p{margin:0;font-size:13.5px;color:var(--ink-soft);}
.fine{margin:16px 0 0;font-size:12.5px;color:var(--ink-faint);}
.warn-note{margin:16px 0 0;font-size:13px;color:var(--flag);}

.resume-card{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;border-color:var(--accent-line);background:var(--accent-soft);}
.resume-text strong{display:block;font-size:14.5px;}
.resume-text span{font-size:13px;color:var(--ink-soft);}
.resume-actions{display:flex;gap:8px;flex-wrap:wrap;}

.history-card h3,.history-card h2{margin:0 0 10px;font-size:15px;}
.best{margin:0 0 12px;font-size:13.5px;color:var(--ink-soft);}
.history-list{list-style:none;margin:0;padding:0;}
.history-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13px;}
.h-date{flex:1;color:var(--ink-soft);}
.h-score{font-weight:500;}
.h-split{color:var(--ink-faint);font-size:11.5px;}
.tag-pass,.tag-fail{font-size:11px;padding:2px 8px;border-radius:var(--radius-pill);font-weight:600;}
.tag-pass{background:var(--ok-soft);color:var(--ok);}
.tag-fail{background:var(--surface-2);color:var(--ink-faint);}

/* ---------- section intro ---------- */
.section-intro{max-width:460px;margin:8vh auto 0;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 28px;}
.done-mark{display:inline-block;font-size:11.5px;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ok);background:var(--ok-soft);border-radius:var(--radius-pill);padding:4px 12px;margin-bottom:16px;}
.si-n{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}
.section-intro h2{margin:8px 0 2px;font-size:24px;}
.si-vi{margin:0;color:var(--ink-soft);font-size:14px;}
.si-facts{display:flex;justify-content:center;gap:36px;margin:24px 0 18px;}
.si-facts div{display:flex;flex-direction:column;}
.si-facts b{font-family:var(--font-mono);font-size:30px;font-weight:500;color:var(--accent);line-height:1;}
.si-facts span{font-size:11.5px;color:var(--ink-faint);margin-top:4px;}
.si-note{font-size:13px;color:var(--ink-soft);margin:0 0 22px;}

/* ---------- exam bar ---------- */
.exam-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 12px;}
.bar-left{display:flex;align-items:baseline;gap:10px;min-width:0;}
.bar-sec{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.bar-name{font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.bar-count{font-size:12.5px;color:var(--ink-faint);}
.timer{font-size:19px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;padding:3px 10px;border-radius:var(--radius-sm);background:var(--surface-2);}
.timer.warn{color:var(--flag);}
.timer.critical{color:var(--ink-inverse);background:var(--flag);}
.exam-progress{height:3px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-bottom:22px;}
.exam-progress .fill{height:100%;background:linear-gradient(90deg,var(--honey-1),var(--honey-2));transition:width .25s ease;}

/* ---------- question ---------- */
.mondai-head{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.m-jp{font-size:15px;font-weight:700;}
.m-vi{font-size:12px;color:var(--accent);font-weight:600;margin-top:1px;}
.m-instr{font-size:13px;color:var(--ink-soft);margin-top:5px;}

.q-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;}
.q-no{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;}
.q-word{font-size:40px;font-weight:500;text-align:center;letter-spacing:.04em;padding:10px 0 4px;}
.q-word.small{font-size:24px;text-align:left;padding:4px 0;}
.q-meaning{font-size:22px;font-weight:600;text-align:center;padding:10px 0 4px;}
.q-meaning.small{font-size:16px;text-align:left;padding:4px 0;}
.q-sentence{font-size:20px;line-height:1.9;}
.q-sentence.small{font-size:16px;}
.q-prompt{font-size:17px;line-height:1.8;margin-top:6px;}
.q-hint{font-size:13.5px;color:var(--ink-soft);margin-top:8px;font-style:italic;}

.passage{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;max-height:46vh;overflow-y:auto;}
.p-title{font-size:12.5px;font-weight:700;color:var(--accent);margin-bottom:8px;}
.p-text{font-size:15.5px;line-height:2;white-space:pre-wrap;}
.p-vi{font-size:13.5px;color:var(--ink-soft);margin-top:12px;padding-top:12px;border-top:1px solid var(--line);white-space:pre-wrap;}

.listen-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.play-btn{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);border-radius:var(--radius-pill);padding:11px 22px;font-size:14.5px;font-weight:600;}
.play-btn:hover{background:var(--accent-line);color:var(--ink);}
.play-btn.small{padding:6px 14px;font-size:12.5px;margin-top:12px;}
.listen-hint{font-size:12.5px;color:var(--ink-faint);}

.opts{display:flex;flex-direction:column;gap:9px;margin-top:20px;}
.opt{display:flex;align-items:center;gap:12px;text-align:left;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius);padding:13px 15px;font-size:15.5px;color:var(--ink);transition:border-color .12s ease,background .12s ease;}
.opt:hover{border-color:var(--accent-line);background:var(--surface-2);}
.opt.chosen{border-color:var(--accent);background:var(--accent-soft);}
.opt-no{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-strong);font-size:11.5px;color:var(--ink-soft);}
.opt.chosen .opt-no{background:var(--accent);border-color:var(--accent);color:var(--ink-inverse);}
.opt-text{flex:1;}

/* ---------- nav ---------- */
.exam-nav{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:20px;}
.exam-nav button{flex:1;}
.palette{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;}
.palette-grid{display:flex;flex-wrap:wrap;gap:7px;}
.pal{width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--bg);color:var(--ink-soft);font-family:var(--font-mono);font-size:13px;}
.pal.done{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600;}
.pal.here{outline:2px solid var(--accent);outline-offset:1px;}
.pal-submit{width:100%;margin-top:14px;}

/* ---------- result ---------- */
.result-card{text-align:center;border-radius:var(--radius-lg);padding:32px 26px;border:1px solid var(--line);background:var(--surface);}
.result-card.is-pass{border-color:var(--ok);background:var(--ok-soft);}
.r-verdict{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;font-weight:500;color:var(--ink-faint);}
.result-card.is-pass .r-verdict{color:var(--ok);}
.r-total{font-size:64px;font-weight:500;line-height:1.05;margin-top:6px;color:var(--accent);font-variant-numeric:tabular-nums;}
.r-total span{font-size:24px;color:var(--ink-faint);}
.r-line{max-width:44ch;margin:14px auto 0;font-size:14px;color:var(--ink-soft);}
.video-note{margin:16px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:14px;color:var(--ink-soft);}
.video-note a{color:var(--accent);font-weight:600;}

.bands{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;}
.band{flex:1;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;}
.band-fail{border-color:var(--flag);}
.band-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:600;}
.band-head .mono{font-size:15px;color:var(--accent);}
.band-track{position:relative;height:9px;background:var(--surface-2);border-radius:999px;margin:10px 0 8px;overflow:hidden;}
.band-fill{height:100%;background:linear-gradient(90deg,var(--honey-1),var(--honey-2));border-radius:999px;}
.band-min{position:absolute;top:-3px;width:2px;height:15px;background:var(--ink);opacity:.55;}
.band-foot{font-size:11.5px;color:var(--ink-faint);}
.band-foot .ok{color:var(--ok);font-weight:600;}
.band-foot .bad{color:var(--flag);font-weight:600;}

.detail-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;margin-top:16px;}
.detail-card h3,.detail-card h2{margin:0 0 14px;font-size:15px;}
.d-sec{margin-bottom:16px;}
.d-sec-name{font-size:12.5px;font-weight:700;color:var(--accent);margin-bottom:8px;}
.d-row{display:flex;align-items:center;gap:12px;margin-bottom:7px;}
.d-label{flex:0 0 140px;font-size:13px;color:var(--ink-soft);}
.d-track{flex:1;height:7px;background:var(--surface-2);border-radius:999px;overflow:hidden;}
.d-fill{display:block;height:100%;background:var(--accent);border-radius:999px;}
.d-num{flex:0 0 46px;text-align:right;font-size:12.5px;}

.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.result-actions button{flex:1;min-width:150px;}

/* ---------- review ---------- */
.review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.review-head h2{margin:0;font-size:21px;}
.rv-sec{font-size:13px;font-weight:700;color:var(--accent);margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);}
.rv-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;}
.rv-ok{border-left-color:var(--ok);}
.rv-bad{border-left-color:var(--flag);}
.rv-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.rv-n{font-size:11.5px;color:var(--ink-faint);}
.rv-mondai{flex:1;font-size:11.5px;color:var(--ink-faint);}
.rv-mark{font-size:13px;font-weight:700;}
.rv-ok .rv-mark{color:var(--ok);}
.rv-bad .rv-mark{color:var(--flag);}
.rv-passage{margin-bottom:12px;background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 12px;}
.rv-passage summary{font-size:12.5px;color:var(--ink-soft);cursor:pointer;}
.rv-passage .p-text{margin-top:10px;font-size:14.5px;}
.rv-opts{list-style:none;margin:12px 0 0;padding:0;}
.rv-opts li{padding:7px 10px;border-radius:var(--radius-sm);font-size:14.5px;color:var(--ink-soft);}
.rv-opts li.right{background:var(--ok-soft);color:var(--ink);font-weight:500;}
.rv-opts li.wrong{background:var(--flag-soft,var(--surface-2));color:var(--ink);text-decoration:line-through;text-decoration-color:var(--flag);}
.rv-tag{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ok);font-weight:700;margin-left:6px;}
.rv-tag-you{color:var(--flag);}
.rv-why{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft);}
/* N1 practice review: the sentence in Vietnamese, and each option's meaning under it. */
.rv-vi{margin:6px 0 4px;font-size:13.5px;color:var(--ink-soft);font-style:italic;}
.rv-gloss{display:block;margin:2px 0 0 22px;font-size:13px;color:var(--ink-soft);font-family:var(--font-body);}

@media (max-width:640px){
  /* The Japanese section title only ever showed as an ellipsis here, and it
     was pushing "Phần 1/3" onto two lines. */
  .bar-name{display:none;}
  .bar-sec{white-space:nowrap;}
  .q-card{padding:18px 16px;}
  .q-word{font-size:34px;}
  .q-sentence{font-size:18px;}
  .exam-nav{flex-wrap:wrap;}
  .exam-nav button{min-width:96px;}
  .d-label{flex-basis:96px;}
  .section-intro{margin-top:4vh;padding:26px 20px;}
  .r-total{font-size:52px;}
}

/* ---------- leaving mid-exam ---------- */
.bar-exit{background:none;border:1px solid var(--line-strong);color:var(--ink-soft);
  border-radius:var(--radius-sm);width:30px;height:28px;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bar-exit:hover{border-color:var(--accent-line);color:var(--ink);}
.si-exit{display:block;margin:14px auto 0;background:none;border:none;
  color:var(--ink-soft);font-size:13px;text-decoration:underline;}
.si-exit:hover{color:var(--ink);}
.btn-danger{background:var(--flag-soft);color:var(--flag);border:1px solid var(--flag);
  border-radius:var(--radius);padding:11px 18px;font-size:14px;font-weight:600;}
.btn-danger:hover{background:var(--flag);color:var(--ink-inverse);}

.dlg-backdrop{position:fixed;inset:0;background:var(--backdrop);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:20px;}
.dlg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:24px 26px;max-width:440px;width:100%;
  max-height:90vh;overflow-y:auto;}
.dlg h2{margin:0 0 10px;font-size:20px;}
.dlg-where{margin:0 0 16px;font-size:13.5px;color:var(--ink-soft);}
.dlg-warn{background:var(--flag-soft);border:1px solid var(--flag);border-radius:var(--radius);
  padding:12px 14px;font-size:13px;color:var(--ink);line-height:1.55;margin-bottom:16px;}
.dlg-actions{display:flex;flex-direction:column;gap:9px;}
.dlg-actions button{width:100%;}
.dlg-note{margin:16px 0 0;font-size:12.5px;color:var(--ink-faint);line-height:1.55;}

/* Fixed papers (course.sets): Đề 1..N with the best score on each. */
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:18px;}
.set-group{margin:26px 0 0;font-size:15px;font-weight:700;color:var(--ink);}
.set-card{display:grid;gap:4px;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:inherit;color:var(--ink);cursor:pointer;}
.set-card:hover{border-color:var(--accent);}
.set-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.set-name{font-family:var(--font-display);font-size:18px;font-weight:700;}
.set-meta{font-size:12px;color:var(--ink-soft);}
.set-card.is-tried{border-color:var(--accent-line);}
.set-card.is-pass{background:var(--ok-soft);border-color:transparent;}
.set-card.is-pass .set-meta{color:var(--ok);font-weight:600;}
.h-set{font-size:12px;font-weight:600;color:var(--accent);}
/* A Đề in parts (n1-gengo.html): one row per Đề, a button per part. */
.part-grid{display:grid;gap:10px;margin-top:18px;}
.part-row{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;}
.part-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.part-btn{display:grid;gap:2px;text-align:left;min-height:44px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;font:inherit;color:var(--ink);cursor:pointer;}
.part-btn:hover{border-color:var(--accent);}
.part-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.part-name{font-weight:600;font-size:14px;white-space:nowrap;}
.part-btn.is-tried{border-color:var(--accent-line);}
.part-btn.is-pass{background:var(--ok-soft);border-color:transparent;}
.part-btn.is-pass .set-meta{color:var(--ok);font-weight:600;}
@media (max-width:520px){
  .part-row{grid-template-columns:1fr;gap:8px;}
}

/* JLPT level colour (GUI plan 1.3) — see css/n1-drill.css. */
.eyebrow,.bar-sec,.p-title{color:var(--lv);}
.tab-btn.active{background:var(--lv);}
.si-facts b,.r-total,.band-head .mono{color:var(--lv);}
/* Depth (GUI plan 1.4). */
.btn-primary{box-shadow:var(--shadow-btn);}
.btn-primary:active{transform:translateY(2px);box-shadow:none;}

/* Page header (GUI plan 3.1) — the same as the drill pages, see css/n1-drill.css. */
.wrap > header{display:grid;gap:16px;}
.wrap > header .tabs{margin-top:0;}
.page-title{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;}
.page-title h1{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1.15;text-wrap:balance;}
.page-sub{grid-column:2;margin:3px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink-soft);}
.lvt{color:var(--lv);}
.page-title::before{grid-row:1 / span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:var(--lv);color:var(--ink-inverse);font-family:var(--font-body);font-size:17px;font-weight:800;}
.lv-n5 .page-title::before{content:"N5";}
.lv-n4 .page-title::before{content:"N4";}
.lv-n3 .page-title::before{content:"N3";}
.lv-n2 .page-title::before{content:"N2";}
.lv-n1 .page-title::before{content:"N1";}

/* Touch targets (GUI plan 2.2). On a touch screen, or a narrow one,
   everything tapped is at least 44 px in each direction (WCAG 2.5.5, Apple
   HIG), with at least 8 px between neighbours. With a mouse the sizes above
   stay as they are. tests/test_touch_targets.py keeps these blocks. */
@media (pointer: coarse), (max-width: 720px) {
  .tab-btn, .tab-link { min-height: 44px; }
}

/* ---------- Redesign story 4: the exam room and the result ---------- */
body.in-exam .wrap{max-width:1100px;}
.bar-title{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
.bar-title strong{font-size:17px;}
.bar-title .bar-sec{text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:14px;color:var(--ink-soft);}
.bar-title .bar-name{display:inline;font-size:inherit;}
.bar-left{align-items:center;}
.bar-exit{width:44px;height:44px;border-radius:12px;font-size:18px;}
.timer{display:inline-flex;align-items:center;font-size:17px;font-weight:800;padding:8px 14px;border-radius:12px;background:var(--accent-soft);color:var(--ink);}
.timer.warn{color:var(--flag);background:var(--flag-soft);}
.timer.critical{color:var(--ink-inverse);background:var(--flag);}
.bar-submit{min-height:44px;border-radius:12px;padding:0 20px;}
.exam-layout{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;}
.exam-main{flex:999 1 560px;min-width:0;}
.exam-side{flex:1 1 280px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;
  display:flex;flex-direction:column;gap:16px;}
.q-card{border-radius:var(--radius-lg);padding:clamp(20px,4vw,36px);}
.opts{border:0;margin:20px 0 0;padding:0;min-width:0;gap:12px;}
.opt{position:relative;min-height:60px;padding:12px 16px;border:2px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;}
.opt:hover{border-color:var(--line-strong);background:var(--surface);}
.opt.chosen,.opt:has(input:checked){border-color:var(--ink);background:var(--accent-soft);}
.opt-radio{width:22px;height:22px;margin:0;flex:none;accent-color:var(--ink);}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.opt-no{width:32px;height:32px;border-radius:10px;border:0;background:var(--surface-2);color:var(--ink);font-weight:700;font-size:14px;}
.opt.chosen .opt-no{background:var(--ink);border:0;color:var(--ink-inverse);}
.opt-text{font-size:18px;}
.exam-nav .btn-ghost,.exam-nav .btn-primary{min-height:52px;border-radius:14px;}
.palette-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.pal{height:44px;width:auto;border-radius:10px;border:2px solid var(--surface-2);background:var(--surface-2);color:var(--ink);font-weight:700;}
.pal.done{background:var(--ink);border-color:var(--ink);color:var(--ink-inverse);}
.pal.here{background:var(--surface);border-color:var(--ink);color:var(--ink);outline:0;}
.pal-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--ink-soft);}
.pal-legend span{display:flex;align-items:center;gap:6px;}
.lg{width:14px;height:14px;border-radius:4px;display:inline-block;box-sizing:border-box;}
.lg-done{background:var(--ink);}
.lg-here{border:2px solid var(--ink);}
.lg-todo{background:var(--surface-2);}
.pal-exit{min-height:44px;}

.result-card{border-radius:28px;padding:clamp(24px,4vw,40px);}
.r-verdict{display:inline-flex;align-items:center;font-family:var(--font-body);font-size:14px;letter-spacing:0;font-weight:700;
  padding:4px 14px;border-radius:999px;background:var(--flag-soft);color:var(--flag);}
.result-card.is-pass .r-verdict{background:var(--surface);color:var(--ok);}
.r-total{font-family:var(--font-body);font-size:72px;font-weight:800;letter-spacing:-.03em;}
.band{border-radius:20px;padding:24px;}
.band-track{height:14px;margin:14px 0 10px;overflow:visible;}
.band-fill{background:var(--ink);}
.band-min{top:-4px;width:3px;height:22px;border-radius:2px;background:var(--flag);opacity:1;}
.band-foot{font-size:14px;color:var(--ink-soft);}
.band-legend{margin:14px 0 0;font-size:14px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;}
.lg-min{width:3px;height:16px;border-radius:2px;background:var(--flag);flex:none;}
.rv-pick{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;font-size:15px;}
.rv-you{color:var(--flag);}
.rv-key{color:var(--ok);font-weight:700;}
.rv-card{border-radius:18px;}
.rv-tag{font-size:11px;}
.speak-again{min-height:44px;}
@media (pointer: coarse), (max-width: 720px) {
  .bar-exit,.bar-submit,.pal,.opt,.pal-exit{min-height:44px;}
  .exam-nav .btn-ghost,.exam-nav .btn-primary{min-height:48px;}
}
@media (max-width:640px){
  .exam-bar{flex-wrap:wrap;}
  .bar-right{width:100%;justify-content:space-between;}
  .bar-title .bar-name{display:none;}
  .r-total{font-size:56px;}
}