.how-to {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  margin:0 0 20px;
  max-width:78ch;
}
.how-to h2 { margin:0 0 8px; font-size:1.1rem; }
.how-to ol { margin:0; padding-left:1.25rem; }
.how-to li { margin:6px 0; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:16px 0 24px; }
@media (min-width:1100px){ .card-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.card-btn, .topic-btn { text-align:left; background:#fff; border:2px solid #0B6BCB; border-radius:10px; padding:14px 16px; cursor:pointer; font:inherit; color:inherit; width:100%; min-height:44px; }
.card-btn:hover, .topic-btn:hover { border-color:#084f96; background:#E8F2FC; }
.card-btn:disabled { opacity:.5; cursor:not-allowed; }
.card-btn h3 { margin:0 0 6px; }
.card-btn p { margin:0 0 4px; font-size:.92rem; }
.meta, .note, .cite { font-size:.85rem; color:#556; }
.tools-row { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; align-items:center; }
.btn.danger { border-color:#C62828; color:#C62828; }
.soft-cta { border-top:1px solid #dde3ea; margin:8px 0 16px; padding-top:14px; font-size:.95rem; color:#445; }
.soft-cta p { margin:0 0 10px; }
.prog-list { list-style:none; padding:0; margin:8px 0 4px; display:flex; flex-direction:column; gap:10px; }
.prog-row { background:#fff; border:1px solid #dde3ea; border-radius:8px; padding:10px 12px; line-height:1.5; }
.progress-box { background:#f6f8fa; border:1px solid #dde3ea; border-radius:10px; padding:14px 16px; margin:24px 0; }
.topic-list { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.quiz-shell { max-width:900px; }
.quiz-head { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; margin:0 0 12px; }
.quiz-progress { flex:1 1 200px; min-width:0; }
.quiz-progress .meta { margin:0 0 6px; display:block; }
.prog-bar { height:8px; background:#dde3ea; border-radius:999px; overflow:hidden; }
.prog-bar > span { display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .2s ease; }
.kbd-hint { font-size:.8rem; color:var(--muted); margin:0; }
.q-card { background:#fff; border:1px solid #dde3ea; border-radius:12px; padding:18px; }
.qid { font-weight:700; margin-bottom:8px; }
.qtext { font-size:1.05rem; margin:0 0 12px; }
.choices { display:flex; flex-direction:column; gap:8px; }
.choice { text-align:left; padding:12px 14px; min-height:44px; border-radius:8px; border:1px solid #ccd5dd; background:#fff; cursor:pointer; font:inherit; width:100%; }
.choice:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.choice:hover:not(:disabled) { border-color:#0B6BCB; }
.choice.correct { background:#e6f6ea; border-color:#1E8E3E; }
.choice.wrong { background:#fdecea; border-color:#C62828; }
.choice .L { font-weight:700; margin-right:6px; }
.feedback { margin:12px 0; padding:10px; border-radius:8px; }
.feedback.ok { background:#e6f6ea; }
.feedback.bad { background:#fdecea; }
.feedback .explain { margin-top:8px; font-size:.92rem; }
.figure-link { font-size:.9rem; margin:8px 0; }
.score { font-size:1.5rem; font-weight:700; margin:8px 0; }
.score-pass { color:var(--ok); }
.score-fail { color:var(--bad); }
.result-summary { background:#f6f8fa; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:12px 0 20px; max-width:52ch; }
.missed-list { list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:8px; }
.missed-list li { background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:.92rem; }
.linkish { background:none; border:none; color:#0B6BCB; cursor:pointer; font:inherit; padding:8px 4px; min-height:44px; text-decoration:underline; }
.linkish:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.err { color:#C62828; }
.subnav { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0 0 20px; padding:10px 0; border-bottom:1px solid #dde3ea; font-size:.95rem; }
.subnav a { text-decoration:none; color:#0b5cad; font-weight:600; }
.subnav a:hover { text-decoration:underline; }
.subnav a[aria-current="page"] { font-weight:700; color:#0B6BCB; }
.disclaimer-box { background:#fff8e6; border:1px solid #e6d7a8; border-radius:10px; padding:12px 14px; margin:14px 0 20px; font-size:.95rem; }
.timer { font-variant-numeric:tabular-nums; }
.topic-breakdown { margin:12px 0; }
.topic-breakdown table { width:100%; border-collapse:collapse; font-size:.92rem; }
.topic-breakdown th, .topic-breakdown td { border:1px solid #dde3ea; padding:6px 10px; text-align:left; }
@media print {
  header nav, .subnav, .tools-row, .progress-box, .soft-cta, footer .wrap > div:first-child { display:none !important; }
  .q-card { break-inside:avoid; }
}

.score-hist{margin:.5em 0}.score-hist summary{cursor:pointer;font-weight:600}.hist-table{border-collapse:collapse;margin:.5em 0;width:100%;max-width:520px;font-size:.92rem}.hist-table th,.hist-table td{border-bottom:1px solid #dde3ea;padding:4px 8px;text-align:left}