/* Mesin kuis Structure & Written Expression — gaya bersama untuk semua kuis */
:root{
  --bg:#f3f4f1; --surface:#ffffff; --ink:#1d2430; --muted:#5d6676; --line:#d9dcd5;
  --accent:#1f4e8c; --accent-soft:#e3ebf6; --ok:#1e7a4c; --ok-soft:#e2f2e9; --bad:#b0342b; --bad-soft:#f8e4e1;
  --mark:#fff2b8; --warn:#8a5a00; --warn-soft:#fbf0d9;
  --f-read:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-ui:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141820; --surface:#1c222c; --ink:#e6e9ee; --muted:#9aa3b2; --line:#2e3542;
  --accent:#7fa8e0; --accent-soft:#22324a; --ok:#5cc28e; --ok-soft:#1c3328; --bad:#ec7f74; --bad-soft:#3a2220;
  --mark:#4a4220; --warn:#e2b25a; --warn-soft:#3a3020; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141820; --surface:#1c222c; --ink:#e6e9ee; --muted:#9aa3b2; --line:#2e3542;
  --accent:#7fa8e0; --accent-soft:#22324a; --ok:#5cc28e; --ok-soft:#1c3328; --bad:#ec7f74; --bad-soft:#3a2220;
  --mark:#4a4220; --warn:#e2b25a; --warn-soft:#3a3020; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.55;
  padding:20px max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
header.top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px}
.brand{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;font-weight:500}
.brand a{color:inherit;text-decoration:none}
h1{font-family:var(--f-read);font-weight:600;font-size:1.6rem;line-height:1.25;margin:0;text-wrap:balance}
.sub{color:var(--muted);font-size:.9rem;margin:4px 0 0}
.stats{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--f-mono);font-size:.85rem;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-variant-numeric:tabular-nums}
.chip.over{color:var(--bad);border-color:var(--bad)}
.chip.low{color:var(--warn);border-color:var(--warn)}

button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{border:1px solid var(--accent);background:var(--accent);color:var(--surface);padding:9px 16px;border-radius:6px;font-weight:500;text-decoration:none;display:inline-block}
.btn.ghost{background:transparent;color:var(--accent)}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap}

/* kartu umum */
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:14px}
.card h2{font-family:var(--f-read);font-weight:600;font-size:1.3rem;margin:0}
.card h3{font-size:.95rem;margin:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0}
.facts > div{border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.facts dt{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:2px 0 0;font-weight:600}
.rules{background:var(--bg);border-radius:6px;padding:12px 14px;font-size:.93rem}
.rules ul,.rules ol{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.note{font-size:.85rem;color:var(--muted);margin:0}

/* lembar jawaban */
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px}
.sheet-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px}
.grid + .sheet-label{margin-top:10px}
.cell{height:30px;border:1px solid var(--line);border-radius:15px;background:transparent;color:var(--muted);font-family:var(--f-mono);font-size:.78rem}
.cell.cur{border-color:var(--accent);color:var(--accent);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
.cell.filled{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.cell.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.cell.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}

/* soal */
.qhead{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.direction{font-size:.88rem;color:var(--muted);font-style:italic;margin:0}
.sentence{font-family:var(--f-read);font-size:1.22rem;line-height:1.9;margin:0;overflow-wrap:break-word}
.blank{display:inline-block;min-width:5.5em;border-bottom:2px solid var(--ink)}
.seg{display:inline-flex;flex-direction:column;align-items:center;line-height:1.3;vertical-align:top;margin:0 1px}
.seg u{text-decoration-thickness:1.5px;text-underline-offset:4px}
.seg small{font-family:var(--f-mono);font-size:.7rem;color:var(--muted)}
.seg.hit u{background:var(--mark)}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);padding:10px 12px;min-height:48px}
.opt:hover:not(:disabled){border-color:var(--accent)}
.bub{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--muted);display:grid;place-items:center;font-family:var(--f-mono);font-size:.8rem}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel .bub{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.opt.ok{border-color:var(--ok);background:var(--ok-soft)}
.opt.ok .bub{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.opt.bad{border-color:var(--bad);background:var(--bad-soft)}
.opt.bad .bub{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.opt:disabled{cursor:default}
.opt .txt{font-family:var(--f-read);font-size:1.05rem}

/* pembahasan */
.fb{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.verdict{font-weight:600}
.verdict.ok{color:var(--ok)} .verdict.bad{color:var(--bad)} .verdict.skip{color:var(--muted)}
.pattern{display:inline-block;font-size:.78rem;letter-spacing:.04em;padding:3px 8px;border-radius:4px;background:var(--accent-soft);color:var(--accent);font-weight:500}
.lines{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.lines li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start}
.lines .k{font-family:var(--f-mono);font-weight:500;padding-top:1px}
.lines li.right .k{color:var(--ok)}
.lines li.wrong .k{color:var(--bad)}
.lines .v{min-width:0}
.ex{background:var(--bg);border-radius:6px;padding:10px 12px;font-size:.93rem}
.ex b{font-weight:600}
em.s{font-family:var(--f-read);font-style:italic}
.nav{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.kbd{font-size:.78rem;color:var(--muted);text-align:center;margin:0}

/* konfirmasi & hasil */
.confirm{border:1px solid var(--warn);background:var(--warn-soft);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.big{font-family:var(--f-mono);font-size:2.2rem;font-variant-numeric:tabular-nums;line-height:1.1}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.split > div{border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.split .lab{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.split .val{font-family:var(--f-mono);font-size:1.1rem}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--accent)}
.wronglist{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.wronglist button{border:none;background:none;color:var(--accent);padding:0;text-decoration:underline;text-underline-offset:3px}
.cta{border:1px solid var(--accent);background:var(--accent-soft);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px}
.cta h3{font-family:var(--f-read);font-size:1.1rem}
.cta p{margin:0}

footer.foot{font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
footer.foot p{margin:0 0 4px}

@media (prefers-reduced-motion:no-preference){.fb{animation:in .18s ease-out}@keyframes in{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}}
@media (max-width:480px){.sentence{font-size:1.1rem}.card{padding:16px}h1{font-size:1.35rem}.kbd{display:none}}