:root{
  color-scheme: light;
  --ink:#16232F; --ink-soft:#3F5262;
  --hanko:#0D5BB5; --on-accent:#FFFFFF; --mint:#0B6E57;
  --line: rgba(13,91,181,.22);
  --surface:#FFFFFF; --shadow: rgba(13,91,181,.12);
  --paper:#FFFFFF; --paper-2:#F0F6FF;
  --hot:#B84200; --hot-bg: rgba(255,167,38,.22);
  --good:#1B6B2A; --good-bg: rgba(47,184,143,.14);
  --bad:#A32218; --bad-bg: rgba(163,34,24,.10);
  --skim:#0B5C8E; --skim-bg: rgba(11,92,142,.14);
  --scan:#B3261E; --scan-bg: rgba(179,38,30,.14);
  --kunci:rgba(255,196,0,.42);
  --opt:#0A5F73; --opt-bg:rgba(0,150,180,.18); --cand:#7B3FA0;
  --stamp-a:#0D5BB5; --stamp-b:#0B6E57;
  --bg-1:#F4F9FF; --bg-2:#E4F0FF; --bg-3:#EAF6F2;
  --serif:"Noto Serif JP",Georgia,serif;
  --display:"Baloo 2","Zen Maru Gothic",sans-serif;
  --sans:"Quicksand","Zen Maru Gothic",-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ink:#F1F5F9; --ink-soft:#B4C2CF;
  --hanko:#7DD3FC; --on-accent:#0B1620; --mint:#5EE6C4;
  --line: rgba(125,211,252,.26);
  --surface:#182530; --shadow: rgba(0,0,0,.55);
  --paper:#1B2A37; --paper-2:#142029;
  --hot:#FFC876; --hot-bg: rgba(255,179,71,.2);
  --good:#6FE3B0; --good-bg: rgba(79,216,184,.16);
  --bad:#FF9A90; --bad-bg: rgba(255,154,144,.12);
  --skim:#7DD3FC; --skim-bg: rgba(125,211,252,.16);
  --scan:#FF8A80; --scan-bg: rgba(255,138,128,.16);
  --kunci:rgba(255,196,0,.32);
  --opt:#7FE3F5; --opt-bg:rgba(60,200,230,.20); --cand:#D2A8F5;
  --stamp-a:#7DD3FC; --stamp-b:#5EE6C4;
  --bg-1:#10151A; --bg-2:#131B23; --bg-3:#0E1620;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ink:#F1F5F9; --ink-soft:#B4C2CF;
    --hanko:#7DD3FC; --on-accent:#0B1620; --mint:#5EE6C4;
    --line: rgba(125,211,252,.26);
    --surface:#182530; --shadow: rgba(0,0,0,.55);
    --paper:#1B2A37; --paper-2:#142029;
    --hot:#FFC876; --hot-bg: rgba(255,179,71,.2);
    --good:#6FE3B0; --good-bg: rgba(79,216,184,.16);
    --bad:#FF9A90; --bad-bg: rgba(255,154,144,.12);
    --skim:#7DD3FC; --skim-bg: rgba(125,211,252,.16);
    --scan:#FF8A80; --scan-bg: rgba(255,138,128,.16);
    --kunci:rgba(255,196,0,.32);
    --opt:#7FE3F5; --opt-bg:rgba(60,200,230,.20); --cand:#D2A8F5;
    --stamp-a:#7DD3FC; --stamp-b:#5EE6C4;
    --bg-1:#10151A; --bg-2:#131B23; --bg-3:#0E1620;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{
  font-family:var(--sans); color:var(--ink);
  background:linear-gradient(160deg,var(--bg-1) 0%,var(--bg-2) 45%,var(--bg-3) 100%);
  background-attachment:fixed; min-height:100%; line-height:1.6;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:720px;margin:0 auto;padding:14px 14px 96px}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.stamp{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--stamp-a),var(--stamp-b));
  display:flex;align-items:center;justify-content:center;
  color:var(--on-accent); font-family:var(--serif); font-weight:700; font-size:16px;
  box-shadow:0 4px 14px var(--shadow);
}
.brand-title{font-family:var(--display);font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:10.5px;color:var(--ink-soft);white-space:nowrap}
.icon-btn{
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink);
  width:36px;height:36px;border-radius:50%; font-size:16px; cursor:pointer;
}
.icon-btn:focus-visible,.filters summary:focus-visible,.cheat summary:focus-visible,.chip:focus-visible,.btn:focus-visible,.timer-btn:focus-visible,.mode-btn:focus-visible,.opt:focus-visible,.jp-text .s:focus-visible,.pick:focus-visible{outline:3px solid var(--hanko);outline-offset:2px}

/* cheat sheet */
.cheat{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  margin:14px 0; box-shadow:0 6px 20px var(--shadow);
}
.cheat summary{
  list-style:none; cursor:pointer; padding:12px 16px; font-family:var(--display);
  font-size:16px; font-weight:700; display:flex; justify-content:space-between; align-items:center;
}
.cheat summary::-webkit-details-marker{display:none}
.cheat summary::after{content:"＋"; color:var(--hanko); font-size:18px}
.cheat[open] summary::after{content:"－"}
.cheat-inner{padding:0 16px 14px}
.cheat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:460px){.cheat-grid{grid-template-columns:1fr}}
.cheat-card{border-radius:12px; padding:10px 12px; font-size:12.5px}
.cheat-card.skim{background:var(--skim-bg); color:var(--skim)}
.cheat-card.scan{background:var(--scan-bg); color:var(--scan)}
.cheat-card b{display:block; font-size:13.5px; margin-bottom:3px}
.cheat-card span{color:var(--ink); opacity:.92}
.cheat-note{font-size:11.5px; color:var(--ink-soft); margin:8px 0 0}

/* filter panel */
.filters{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  margin-bottom:12px; box-shadow:0 6px 20px var(--shadow);
}
.filters{padding:0}
.filters summary{
  list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.filters summary::-webkit-details-marker{display:none}
.f-sum-l{display:flex; flex-direction:column; min-width:0}
.f-sum-l b{font-family:var(--display); font-size:15px}
.f-sum-t{font-size:11.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.f-sum-r{font-size:12px; font-weight:700; color:var(--hanko); background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; flex-shrink:0}
.filters[open] summary{border-bottom:1px solid var(--line)}
.f-body{padding:12px 14px}
.f-row{margin-bottom:10px}
.f-row:last-child{margin-bottom:0}
.f-label{font-size:11.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; display:flex; justify-content:space-between}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
  border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600;
  cursor:pointer; user-select:none; font-family:inherit;
}
.chip .cnt{opacity:.7; font-weight:500; margin-left:4px; font-size:11px}
.chip.active{background:var(--hanko); color:var(--on-accent); border-color:var(--hanko)}
.chip[disabled]{opacity:.4; cursor:not-allowed}
.f-toggle{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink); cursor:pointer}
.f-toggle input{width:18px;height:18px;accent-color:var(--hanko)}

/* set ujian */
.setrow{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.setrow .btn{flex:1; min-width:150px}
.setbanner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--hot-bg); border:1px solid var(--hot); color:var(--ink);
  border-radius:12px; padding:9px 12px; margin-bottom:12px; font-size:12.5px; font-weight:700;
}
.setbanner .btn{padding:6px 10px; font-size:12px}
.result-card{text-align:center}
.result-card h2{font-family:var(--display); margin:4px 0 2px; font-size:20px}
.result-big{font-family:var(--mono); font-size:34px; font-weight:700; color:var(--hanko); margin:6px 0}
.result-table{width:100%; border-collapse:collapse; margin:12px 0; font-size:12.5px; text-align:left}
.result-table th,.result-table td{padding:7px 8px; border-bottom:1px solid var(--line)}
.result-table th{color:var(--ink-soft); font-size:11.5px}
.result-table td.num{font-family:var(--mono); text-align:right}
.wrong-list{text-align:left; font-size:12.5px; margin:8px 0}
.wrong-list button{
  display:block; width:100%; text-align:left; margin:5px 0; padding:8px 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer;
}
/* nav soal */
.navrow{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.progress-txt{font-size:12px; color:var(--ink-soft); font-weight:700}
.jump{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:10px; padding:7px 10px; font-size:12.5px; font-family:inherit; max-width:58%;
}

/* timer */
.timerbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:10px 14px; margin-bottom:12px;
}
.timer-num{font-family:var(--mono); font-size:22px; font-weight:700; color:var(--hanko)}
.timer-num.over{color:var(--bad)}
.timer-target{font-size:11px; color:var(--ink-soft)}
.timer-btn{
  border:none; background:var(--hanko); color:var(--on-accent); font-weight:700;
  border-radius:10px; padding:9px 14px; font-size:12.5px; cursor:pointer; font-family:inherit;
}
.timer-btn.stop{background:var(--hot); color:#fff}

/* card soal */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px; margin-bottom:14px; box-shadow:0 6px 20px var(--shadow);
}
.meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px}
.tag{
  display:inline-block; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:999px;
}
.tag.tanbun{background:var(--scan-bg); color:var(--scan)}
.tag.chuubun{background:var(--hot-bg); color:var(--hot)}
.tag.chokei{background:var(--skim-bg); color:var(--skim)}
.tag.joho{background:var(--good-bg); color:var(--good)}
.tag.when{background:var(--paper-2); color:var(--ink); border:1px solid var(--line)}
.tag.no{background:transparent; color:var(--ink-soft); border:1px dashed var(--line)}
.tag.shared{background:var(--paper-2); color:var(--ink-soft)}

.q-text{font-size:14px; margin:6px 0 12px; font-weight:600}
.q-label{color:var(--ink-soft); font-size:11.5px; font-weight:700}
.keyword-hint{
  font-size:12px; color:var(--ink-soft); background:var(--paper-2); border-radius:10px;
  padding:8px 10px; margin-bottom:10px;
}
.keyword-hint b{color:var(--hanko)}
.keyword-hint .kw.core{background:var(--scan-bg); color:var(--scan); outline:1.5px solid var(--scan)}
.jp-text .cue{background:var(--good-bg); color:var(--good); font-weight:700; border-radius:4px; padding:0 2px; border-bottom:2px solid var(--good)}
.keyword-hint .kw{
  font-family:var(--serif); background:var(--hot-bg); color:var(--hot);
  border-radius:4px; padding:0 4px; margin:0 1px; font-weight:700;
}
.keyword-hint .strat-tip{
  margin-top:6px; padding:6px 8px; background:var(--scan-bg); color:var(--ink);
  border-left:3px solid var(--scan); border-radius:6px; line-height:1.5;
}
.keyword-hint .strat-tip b{color:var(--scan)}

.mode-toggle{display:flex; gap:8px; margin-bottom:10px}
.mode-btn{
  flex:1; border:1px solid var(--line); background:var(--paper-2); color:var(--ink-soft);
  border-radius:10px; padding:8px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;
}
.mode-btn.on.skim{background:var(--skim); color:#fff; border-color:var(--skim)}
.mode-btn.on.scan{background:var(--scan); color:#fff; border-color:var(--scan)}
:root[data-theme="dark"] .mode-btn.on.skim{color:#0B1620}
:root[data-theme="dark"] .mode-btn.on.scan{color:#0B1620}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mode-btn.on.skim,
  :root:not([data-theme="light"]) .mode-btn.on.scan{color:#0B1620}
}

.jp-text{
  font-family:var(--serif); font-size:15.5px; line-height:2; white-space:pre-wrap; word-break:break-word;
  background:var(--paper-2); border-radius:12px; padding:14px 16px; margin:0 0 10px;
}
.jp-text .s{cursor:pointer; border-radius:4px; padding:1px 0; transition:background .15s}
.jp-text .s:hover{background:var(--hot-bg)}
.jp-text .s.picked{background:var(--good-bg); box-shadow:0 0 0 2px var(--good) inset}
.jp-text .setsuzoku{background:var(--skim-bg); color:var(--skim); font-weight:700; border-radius:4px; padding:1px 3px}
/* REV 7: kata pembeda opsi (teal, garis bawah putus-putus agar beda dari oranye/hijau selain lewat warna) */
.jp-text .optkw{background:var(--opt-bg); color:var(--opt); font-weight:700; border-radius:4px; padding:0 2px; border-bottom:2px dotted var(--opt)}
.keyword-hint .kw.diff{background:var(--opt-bg); color:var(--opt); border:1px dotted var(--opt)}
/* kalimat kandidat: garis vertikal ungu di kiri + lencana ⭐n — tanda TIDAK hanya warna (aksesibel) */
.jp-text .s.cand-first{border-left:4px solid var(--cand); padding-left:4px; margin-left:-2px}
.jp-text .s.cand-cont{background:rgba(123,63,160,.07)}
.jp-text .s.cand-first{background:rgba(123,63,160,.07)}
.jp-text .s.cand1.cand-first{border-left-width:6px}
.jp-text .s.cand-first::before{content:"⭐" attr(data-cand); font-size:.62em; font-family:var(--sans); font-weight:700; color:var(--cand); vertical-align:super; margin-right:2px}
.jp-text .s.nb{border-bottom:2px dashed var(--hot)}
.legend-nb{border-bottom:2px dashed var(--hot); font-weight:700}
.legend-opt{background:var(--opt-bg); color:var(--opt); border-bottom:2px dotted var(--opt); padding:0 3px; border-radius:3px; font-weight:700}
.legend-cand{border-left:4px solid var(--cand); color:var(--cand); padding-left:4px; font-weight:700}
.jp-text .qkw{background:var(--hot-bg); color:var(--hot); font-weight:700; border-radius:4px; padding:0 2px}
.jp-text mark.kunci{background:var(--kunci); color:inherit; border-radius:3px; padding:1px 0}
.jp-text.hide-kunci mark.kunci{background:transparent}
.helper{font-size:11.5px; color:var(--ink-soft); margin:0 0 10px}

.notext{
  border:1.5px dashed var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px;
  font-size:12.5px; color:var(--ink-soft); background:var(--paper-2);
}
.notext b{color:var(--hot)}

/* ---- soal gabungan (1 teks, beberapa pertanyaan berurutan) ---- */
.subq-list{display:flex; flex-direction:column; gap:14px; margin-top:4px}
.subq{
  border:1px solid var(--line); border-radius:12px; padding:12px 12px 10px; background:var(--paper);
}
.subq-active{border-color:var(--hanko); box-shadow:0 0 0 2px var(--hanko) inset}
.subq .q-text{margin:0 0 10px}
.para-badge{
  display:inline-block; font-family:var(--sans); font-size:10.5px; font-weight:800;
  background:var(--cand-bg,var(--paper-2)); color:var(--cand); border:1px solid var(--cand);
  border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:middle;
}
.subq .opts{margin-top:0}
.opt.pending{opacity:.45; cursor:default; pointer-events:none}
.sub-actions{margin-top:10px}

.opts{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.opt{
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:13.5px;
  display:flex; gap:8px; cursor:pointer; background:var(--paper); line-height:1.55;
}
.opt:hover{border-color:var(--hanko)}
.opt.correct-shown{border-color:var(--good); background:var(--good-bg)}
.opt.wrong-shown{border-color:var(--bad); background:var(--bad-bg)}
.opt.locked{cursor:default}
.opt-num{font-weight:800; color:var(--ink-soft); flex-shrink:0}
.opt-mark{margin-left:auto; flex-shrink:0; font-weight:800}
.opt.correct-shown .opt-mark{color:var(--good)}
.opt.wrong-shown .opt-mark{color:var(--bad)}

.expl{
  font-size:12.5px; background:var(--paper-2); border-radius:10px; padding:10px 12px;
  margin-top:10px; display:none; white-space:pre-wrap;
}
.expl.show{display:block}
.expl b{color:var(--hanko)}
.result-line{font-size:12.5px; font-weight:700; margin-top:10px; display:none}
.result-line.show{display:block}
.result-line.ok{color:var(--good)}
.result-line.ng{color:var(--bad)}

.actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.btn{
  border:none; border-radius:10px; padding:10px 14px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
}
.btn.primary{background:var(--hanko); color:var(--on-accent)}
.btn.ghost{background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.empty{
  background:var(--surface); border:1px dashed var(--line); border-radius:16px;
  padding:22px 16px; text-align:center; color:var(--ink-soft); font-size:13px;
}

/* skor bawah */
.score{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--surface); border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px;
  box-shadow:0 -6px 20px var(--shadow);
}
.score b{color:var(--hanko)}
.score .sc-l{display:flex; flex-direction:column; line-height:1.3}
.score .sc-s{font-size:11px; color:var(--ink-soft)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}