:root {
  --correct:#2a6e3a; --correct-t:#5dd87a; --wrong:#6e2a2a; --wrong-t:#f07070;
  --multi:#1a2e4a; --multi-t:#5ab4f0; --dim:0.32; --radius:12px;
  --px:clamp(14px,4vw,40px); --py:clamp(14px,2.5vh,28px); --gap:clamp(8px,1.5vw,14px);
}
html { height:100%; height:-webkit-fill-available; }
body {
  min-height:100dvh; min-height:-webkit-fill-available;
  background:var(--bg); color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:clamp(15px,1.5vw + 10px,18px); line-height:1.5;
  display:flex; justify-content:center; overscroll-behavior:none; -webkit-text-size-adjust:100%;
}
#app {
  width:100%; max-width:680px; min-height:100dvh; display:flex; flex-direction:column;
  padding:calc(var(--safe-top) + var(--py)) calc(var(--safe-right) + var(--px))
          calc(var(--safe-bottom) + var(--py)) calc(var(--safe-left) + var(--px));
}

/* topbar */
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:clamp(12px,2vh,20px); flex-shrink:0; }
.back-btn { display:flex; align-items:center; gap:8px; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.back-icon { width:32px; height:32px; border-radius:8px; background:var(--bg2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--muted); }
.back-btn:active .back-icon { background:var(--bg3); color:var(--text); }
.back-label { font-size:clamp(10px,1.4vw,12px); font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }

.report-btn { width:32px; height:32px; border-radius:8px; background:var(--bg2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.report-btn:active { background:var(--bg3); }

.right-info { display:flex; gap:10px; align-items:center; font-size:clamp(12px,1.5vw,14px); color:var(--muted); }
.right-info .ok b  { color:var(--correct-t); font-weight:700; }
.right-info .err b { color:var(--wrong-t);   font-weight:700; }
.streak-pill { display:flex; align-items:center; gap:5px; background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:4px 10px; font-size:clamp(12px,1.5vw,14px); font-weight:700; color:var(--muted); transition:border-color 0.25s,color 0.25s,background 0.25s; }
.streak-pill.on-fire { border-color:#e07820; color:#f09030; background:#1e1a10; }

/* progress */
.progress-wrap { height:3px; background:var(--border); border-radius:2px; margin-bottom:clamp(12px,2vh,22px); overflow:hidden; flex-shrink:0; }
.progress-bar  { height:100%; background:var(--accent); border-radius:2px; transition:width 0.4s ease; width:0%; }

/* multi badge */
.multi-badge { display:none; align-items:center; gap:6px; background:var(--multi); border:1px solid var(--multi-t); border-radius:8px; padding:7px 12px; font-size:clamp(11px,1.2vw,13px); font-weight:600; color:var(--multi-t); margin-bottom:var(--gap); }
.multi-badge.visible { display:flex; }

/* question */
.q-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(14px,2vw,22px); margin-bottom:var(--gap); }
.q-meta { font-size:clamp(10px,1.2vw,12px); font-weight:700; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:8px; }
.q-text { font-size:clamp(15px,1.5vw + 10px,18px); color:var(--text); line-height:1.6; }

/* options */
.options { display:flex; flex-direction:column; gap:var(--gap); margin-bottom:var(--gap); }
.opt,.chk-opt { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(11px,1.8vw,16px) clamp(12px,2vw,18px); cursor:pointer; display:flex; align-items:flex-start; gap:clamp(10px,1.5vw,14px); text-align:left; color:var(--text); font-size:clamp(14px,1.4vw + 9px,17px); line-height:1.45; width:100%; min-height:50px; transition:background 0.12s,border-color 0.12s,opacity 0.15s; -webkit-tap-highlight-color:transparent; user-select:none; }
.opt:active:not([disabled]) { background:var(--bg3); }
.opt-letter { min-width:clamp(22px,3vw,28px); height:clamp(22px,3vw,28px); border-radius:6px; background:var(--bg3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:clamp(11px,1.2vw,13px); font-weight:700; color:var(--muted); flex-shrink:0; margin-top:2px; transition:background 0.12s,border-color 0.12s,color 0.12s; }
.chk-opt.selected { background:var(--multi); border-color:var(--multi-t); }
.chk-opt.selected .opt-letter { background:var(--multi-t); border-color:var(--multi-t); color:#0a1e2e; }
.opt.correct,.chk-opt.correct { background:var(--correct); border-color:var(--correct-t); }
.opt.correct .opt-letter,.chk-opt.correct .opt-letter { background:var(--correct-t); border-color:var(--correct-t); color:#0a2e15; }
.opt.wrong,.chk-opt.wrong { background:var(--wrong); border-color:var(--wrong-t); }
.opt.wrong .opt-letter,.chk-opt.wrong .opt-letter { background:var(--wrong-t); border-color:var(--wrong-t); color:#2e0a0a; }
.opt.missed,.chk-opt.missed { background:var(--correct); border-color:var(--correct-t); opacity:0.65; }
.opt.missed .opt-letter,.chk-opt.missed .opt-letter { background:var(--correct-t); border-color:var(--correct-t); color:#0a2e15; }
.opt.dimmed,.chk-opt.dimmed { opacity:var(--dim); cursor:default; }
.opt[disabled],.chk-opt[disabled] { cursor:default; }

/* result */
.result-msg { text-align:center; font-size:clamp(13px,1.5vw,15px); font-weight:700; min-height:20px; margin-bottom:var(--gap); }
.result-msg.ok  { color:var(--correct-t); }
.result-msg.err { color:var(--wrong-t); }
.explanation { background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--wrong-t); border-radius:var(--radius); padding:clamp(10px,1.5vw,14px); font-size:clamp(12px,1.3vw,14px); color:var(--muted); line-height:1.6; margin-bottom:var(--gap); display:none; }

/* buttons */
.btn-confirm { background:var(--multi); color:var(--multi-t); border:1px solid var(--multi-t); border-radius:var(--radius); font-size:clamp(13px,1.5vw,15px); font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:clamp(13px,1.8vh,16px) 16px; width:100%; cursor:pointer; transition:background 0.12s,transform 0.1s; -webkit-tap-highlight-color:transparent; display:none; }
.btn-confirm.visible { display:block; }
.btn-confirm:active { transform:scale(0.98); }
.btn-main { background:var(--accent); color:#fff; border:none; border-radius:var(--radius); font-size:clamp(13px,1.5vw,15px); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:clamp(14px,2vh,18px) 16px; width:100%; cursor:pointer; transition:background 0.12s,transform 0.1s; margin-top:8px; -webkit-tap-highlight-color:transparent; display:none; }
.btn-main.visible { display:block; }
.btn-main:active { transform:scale(0.98); background:var(--accent-h); }

/* tablet */
@media (min-width:700px) {
  #qi { display:grid; grid-template-columns:1fr 1fr; column-gap:20px; align-items:start; }
  .q-card,.multi-badge { grid-column:1/-1; }
  #options { grid-column:1; margin-bottom:0; }
  #rc { grid-column:2; display:flex; flex-direction:column; gap:var(--gap); }
  #br { grid-column:1/-1; margin-top:16px; display:flex; flex-direction:column; gap:8px; }
  .btn-confirm,.btn-main { margin-top:0; }
}

/* screens */
.screen { display:none; flex-direction:column; flex:1; }
.screen.active { display:flex; }
.state-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); font-size:clamp(13px,1.5vw,15px); text-align:center; padding:40px 0; }
.spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* summary */
#ss { align-items:center; justify-content:center; gap:clamp(12px,2vh,20px); text-align:center; padding:20px 0; }
.sum-ring { position:relative; width:clamp(110px,20vw,150px); height:clamp(110px,20vw,150px); }
.sum-ring svg { transform:rotate(-90deg); width:100%; height:100%; }
.srb { fill:none; stroke:var(--border); stroke-width:8; }
.srf { fill:none; stroke:var(--accent); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 0.8s ease; }
.sum-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(24px,4vw,34px); font-weight:700; color:var(--text); }
.sum-lbl { font-size:clamp(10px,1.2vw,12px); letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.sum-v { font-size:clamp(16px,2.5vw,22px); font-weight:700; }
.sum-v.pass { color:var(--correct-t); } .sum-v.fail { color:var(--wrong-t); }
.sum-det { font-size:clamp(13px,1.5vw,16px); color:var(--text); }
.sum-btns { display:flex; flex-direction:column; gap:10px; width:100%; max-width:320px; }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:var(--radius); font-size:clamp(12px,1.3vw,14px); font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:clamp(11px,1.6vh,14px) 16px; width:100%; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
.btn-ghost:active { background:var(--bg3); color:var(--text); }

/* toast */
#toast { position:fixed; bottom:calc(env(safe-area-inset-bottom,0px) + 24px); left:50%; transform:translateX(-50%) translateY(16px); background:#1e1a10; border:1px solid #e07820; border-radius:10px; padding:10px 20px; font-size:14px; font-weight:700; color:#f09030; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 0.22s,transform 0.22s; z-index:100; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* report modal */
#report-modal { display:none; position:fixed; inset:0; z-index:9998; background:rgba(10,10,16,0.72); align-items:center; justify-content:center; padding:20px; }
#report-modal.show { display:flex; }
.report-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(18px,4vw,28px); width:100%; max-width:400px; display:flex; flex-direction:column; gap:12px; }
.report-card h3 { font-size:clamp(15px,2vw,18px); color:var(--text); }
.report-q { font-size:13px; color:var(--muted); background:var(--bg3); border:1px solid var(--border); border-radius:9px; padding:10px 12px; max-height:100px; overflow-y:auto; }
.report-card textarea { background:var(--bg3); border:1px solid var(--border); border-radius:9px; padding:10px 12px; color:var(--text); font-size:14px; font-family:inherit; resize:vertical; min-height:80px; }
.report-card textarea:focus { outline:none; border-color:var(--accent); }
.report-error { font-size:12px; color:var(--wrong-t); min-height:16px; }
.report-btns { display:flex; gap:8px; }
.report-btns .btn-ghost, .report-btns .btn-main { margin-top:0; }