:root { --fg:#1a1a2e; --muted:#6b7280; --acc:#2563eb; --bg:#f7f8fa; --card:#fff; --line:#e5e7eb; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--fg); background:var(--bg); }
.wrap { max-width:680px; margin:0 auto; padding:24px 18px 64px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
h1 { font-size:1.5rem; margin:.2em 0 .4em; }
.muted { color:var(--muted); }
.q { font-size:1.18rem; white-space:pre-wrap; margin:8px 0 18px; }
.opt { display:block; width:100%; text-align:left; padding:13px 16px; margin:8px 0; border:1.5px solid var(--line);
       border-radius:10px; background:#fff; cursor:pointer; font-size:1.02rem; transition:.12s; }
.opt:hover { border-color:var(--acc); background:#f0f6ff; }
.opt.sel { border-color:var(--acc); background:#e8f0fe; }
.bar { height:7px; background:var(--line); border-radius:6px; overflow:hidden; margin:14px 0 6px; }
.bar > div { height:100%; background:var(--acc); width:0; transition:.25s; }
button.primary { background:var(--acc); color:#fff; border:0; border-radius:10px; padding:12px 22px; font-size:1rem; cursor:pointer; }
button.primary:disabled { opacity:.45; cursor:not-allowed; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.85rem; background:#eef2ff; color:var(--acc); }
.dom { font-size:.85rem; color:var(--muted); }
table { width:100%; border-collapse:collapse; margin:14px 0; }
td { padding:7px 4px; border-bottom:1px solid var(--line); }
.big { font-size:2.4rem; font-weight:700; }
.note { font-size:.85rem; color:var(--muted); margin-top:18px; }
/* end-of-test review with explanations */
.rcard { border:1px solid var(--line); border-radius:10px; padding:14px; margin:12px 0; }
.rq { font-weight:600; white-space:pre-wrap; margin-bottom:8px; }
.ropt { padding:7px 11px; margin:4px 0; border-radius:8px; border:1px solid var(--line); white-space:pre-wrap; }
.rcorrect { background:#e7f6ec; border-color:#16a34a; }
.rwrong { background:#fdecec; border-color:#dc2626; }
.expl { margin-top:9px; padding:10px 12px; background:#f3f6ff; border-left:3px solid var(--acc); border-radius:6px; font-size:.95rem; white-space:pre-wrap; }
/* the coach read */
.coach { margin:18px 0; padding:16px 18px; background:#f6f4ff; border:1px solid #e3def7; border-left:4px solid #6d5ae0; border-radius:12px; }
.coach h2 { font-size:1.05rem; margin:0 0 8px; color:#4b3fb0; }
.coach p { margin:0 0 10px; font-size:1.05rem; line-height:1.6; }
.coach ul { margin:0; padding-left:20px; }
.coach li { margin:6px 0; color:#333; }