/* Question page, stats page and the homepage's five free questions: the original app's look (qbankg), scoped to
   .oq so it does not touch the dashboard or the rest of the public pages. Colours, fonts, spacing and the phone layout are copied from that app;
   the progress bar under the title is the one addition. Light theme only, to match the rest of the site. */
.oq{
  --bg:#f6f7f9; --panel:#ffffff; --ink:#1a1f26; --muted:#5c6773;
  --line:#e3e7ec; --brand:#1f6feb; --brand-ink:#fff;
  --good:#1a7f4b; --good-bg:#e7f6ec; --bad:#c0392b; --bad-bg:#fdecea;
  --chip:#eef1f5; --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);
  flex:1; min-height:100vh; min-height:100dvh; background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.oq,.oq *{box-sizing:border-box}
.oq a{color:var(--brand)}
.oq-hdr{position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:1px solid var(--line);
  padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top))}
.oq-hdr .hrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.oq-hdr h1{font-size:16px; margin:0; font-weight:700; letter-spacing:.2px}
.oq-hdr h1 a{color:var(--ink); text-decoration:none}
.oq-hdr .sub{color:var(--muted); font-size:13px}
.oq-hdr .spacer{flex:1}
.oq-prog{max-width:788px; margin:8px auto 0; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted)}
.oq-prog .qn{font-weight:600; color:var(--ink); white-space:nowrap}
.oq-prog .pc{font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums}
.oq-prog .sc,.oq-prog .clock{white-space:nowrap}
.oq-prog .sc b{color:var(--good)} .oq-prog .clock b{color:var(--ink); font-variant-numeric:tabular-nums}
.oq-bar{flex:1; min-width:60px; height:8px; background:var(--chip); border-radius:999px; overflow:hidden}
.oq-bar>span{display:block; height:100%; background:var(--brand); transition:width .25s}
.oq .wrap{max-width:820px; margin:0 auto; padding:20px 16px 80px}
.oq button,.oq a.btn{font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); padding:8px 14px; transition:.12s; text-decoration:none; display:inline-block}
.oq button:hover,.oq a.btn:hover{border-color:var(--brand)}
.oq button.primary,.oq a.btn.primary{background:var(--brand); color:var(--brand-ink); border-color:var(--brand); font-weight:600}
.oq button.primary:hover{filter:brightness(1.05)}
.oq button.ghost,.oq a.btn.ghost{background:transparent}
.oq button:disabled{opacity:.5; cursor:default}
.oq button.danger{color:var(--bad); border-color:var(--bad)}
.oq .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0}
.oq .card{display:block; max-width:none; width:auto; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:22px; margin-bottom:16px}
.oq .chip{display:inline-block; background:var(--chip); color:var(--muted);
  border-radius:999px; padding:3px 11px; font-size:12.5px; font-weight:600; margin-right:6px}
.oq #qchips{margin-bottom:12px}
.oq .stem{margin:0; font-size:16.5px; line-height:1.55; white-space:pre-wrap}
.oq table.invx{border-collapse:collapse; margin:14px 0; width:100%; max-width:520px; font-size:15px; line-height:1.55}
.oq table.invx td{padding:3px 10px 3px 0; vertical-align:top; border:0; color:var(--ink)}
.oq table.invx td.val{font-weight:600}
.oq .leadin{font-size:16px; line-height:1.55; font-weight:600; margin:16px 0 12px}
.oq .opts{display:flex; flex-direction:column; gap:10px}
.oq .opt{display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%; min-height:0; font-size:16px; line-height:1.55; font-weight:400;
  padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel)}
.oq .opt .lab{font-weight:700; color:var(--muted); flex:0 0 auto; width:20px}
.oq .opt.sel{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); background:var(--panel)}
.oq .opt.correct{background:var(--good-bg); border-color:var(--good); border-width:1px; font-weight:400}
.oq .opt.correct .lab{color:var(--good)}
.oq .opt.wrong{background:var(--bad-bg); border-color:var(--bad); border-width:1px}
.oq .opt.wrong .lab{color:var(--bad)}
.oq .opt.locked{cursor:default}
.oq .opt.locked:hover{border-color:var(--line)} .oq .opt.locked.correct:hover{border-color:var(--good)} .oq .opt.locked.wrong:hover{border-color:var(--bad)}
.oq .hint{margin:12px 0 0; font-size:14px}
.oq .verdict{font-weight:700; margin:4px 0 10px}
.oq .verdict.good{color:var(--good)} .oq .verdict.bad{color:var(--bad)}
.oq .explain{border-top:1px solid var(--line); margin-top:18px; padding-top:16px}
.oq .explain h3,.oq h3.caps{margin:18px 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; font-family:inherit}
.oq h3.caps{margin:0 0 10px}
.oq .explain h3:first-of-type{margin-top:8px}
.oq ul.keypoints{margin:6px 0 0; padding-left:0; list-style:none}
.oq ul.keypoints li{position:relative; padding:7px 12px 7px 34px; margin:6px 0; background:var(--chip); border-radius:10px; font-size:15.5px; color:var(--ink)}
.oq ul.keypoints li:before{content:"›"; position:absolute; left:14px; top:6px; color:var(--brand); font-weight:800}
.oq .teach{font-size:16px; white-space:pre-wrap; line-height:1.6; margin:0 0 11px}
.oq .teach:last-of-type{margin-bottom:0}
.oq .tablewrap{overflow-x:auto; margin:0 0 11px}
.oq .qtable{border-collapse:collapse; width:100%; font-size:14px; line-height:1.45}
.oq .qtable th,.oq .qtable td{border:1px solid var(--line); padding:6px 9px; text-align:left; vertical-align:top; color:var(--ink)}
.oq .qtable th{background:var(--chip); font-weight:600}
.oq .src{color:var(--muted); font-size:13.5px; margin-top:10px}
.oq .src b{color:var(--ink)}
.oq .bank-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; align-items:center}
.oq figure.qimg{display:block; margin:14px 0}
.oq .qimg img{display:block; width:auto; max-width:100%; height:auto; max-height:none; border-radius:12px; border:1px solid var(--line); cursor:zoom-in}
.oq .qimg figcaption{font-size:.85em; line-height:1.5; color:var(--muted); margin-top:6px}
.oq .imgcredit{font-size:.75em; color:var(--muted); margin-top:8px}
.oq #qactions{justify-content:space-between}
.oq #qactions .next .sm{display:none}
.oq .thumbbtn.on{font-weight:600}
.oq .thumbbtn.up.on,.oq .thumb.up.on{background:var(--good-bg); color:var(--good); border-color:var(--good)}
.oq .thumbbtn.down.on,.oq .thumb.down.on{background:var(--bad-bg); color:var(--bad); border-color:var(--bad)}
.oq #fbpanel{margin-top:16px}
.oq .thumbs{display:flex; gap:8px; margin-bottom:12px}
.oq .thumb{display:inline-block; width:auto; height:auto; background:var(--chip); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:8px 16px; font-size:15px}
.oq .thumb.on{font-weight:600}
.oq .fbq{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin:0 0 6px}
.oq .fbtags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.oq .fbtag{min-height:0; background:var(--chip); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:13px}
.oq .fbtag.on{background:var(--brand); color:var(--brand-ink); border-color:var(--brand); font-weight:600}
.oq #fbpanel textarea{width:100%; box-sizing:border-box; min-height:80px; font:inherit; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); resize:vertical}
.oq .fbstatus{margin-left:auto; font-size:13px}
.oq .chip.fb{color:var(--brand); font-weight:600}
.oq .chip.fire{color:#e2571e; font-weight:700}
.oq .flagged{color:var(--brand); font-weight:600}
.oq .muted{color:var(--muted)}
.oq-foot{max-width:820px; margin:0 auto; padding:0 16px 40px; color:var(--muted); font-size:13px}
.oq kbd{background:var(--chip); border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 6px; font-size:12px; font-family:inherit}
/* stats page */
.oq .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:8px}
.oq .stat{background:var(--chip); border-radius:12px; padding:12px 14px}
.oq .stat .n{font-size:24px; font-weight:800}
.oq .stat .l{font-size:12.5px; color:var(--muted)}
.oq .bar{flex:none; min-width:0; height:8px; background:var(--chip); border-radius:999px; overflow:hidden; margin:4px 0}
.oq .bar>span{display:block; height:100%; background:var(--brand)}
.oq .topic-row{display:flex; align-items:center; gap:10px; font-size:14px; margin:6px 0}
.oq .topic-row .tname{flex:1}
.oq .topic-row .tnum{color:var(--muted); font-variant-numeric:tabular-nums; font-size:13px}
/* the original app's toast and full-screen image */
body:has(.oq) .toast{bottom:18px; background:#1a1f26; color:#f6f7f9; padding:10px 16px; border-radius:10px; font-size:14px; font-weight:400}
body:has(.oq) .lightbox{background:rgba(0,0,0,.92); padding:max(12px,env(safe-area-inset-top)) 12px}
body:has(.oq) .lightbox img{border-radius:0; background:transparent}
.headlinks{display:flex; gap:8px}

/* ---- phone layout (the original app's) ---- */
@media (max-width:640px){
  .oq .wrap{padding:14px 12px calc(96px + env(safe-area-inset-bottom))}
  .oq-hdr{position:static; padding-left:calc(14px + env(safe-area-inset-left)); padding-right:calc(14px + env(safe-area-inset-right))}
  .oq-hdr .hrow{gap:8px}
  .oq-hdr h1{font-size:15px}
  .oq-hdr .sub{font-size:12px}
  .oq-hdr .spacer{display:none}
  .oq-hdr h1{flex:1}
  .oq-hdr .sub{order:3; flex-basis:100%}
  .oq-prog{gap:8px}
  .oq .card{padding:16px; border-radius:14px}
  .oq .stem{font-size:16px}
  .oq .opt{padding:14px}
  .oq .opt .lab{width:18px}
  .oq button,.oq a.btn{padding:11px 14px}
  /* one-handed reach: the main action is pinned to the bottom */
  .oq #qactions{position:sticky; bottom:0; margin:6px -12px 0; flex-wrap:nowrap;
    padding:6px 10px calc(6px + env(safe-area-inset-bottom));
    background:var(--panel); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.10); z-index:9}
  .oq #qactions>.row{flex:1; flex-wrap:nowrap; gap:6px; min-width:0}
  .oq #qactions button{padding:8px 12px; white-space:nowrap; line-height:1.2}
  .oq #qactions .primary,.oq #qactions .next{flex:1}
  .oq #qactions .thumbbtn,.oq #qactions .fbbtn{padding:8px 10px; flex:none}
  .oq #qactions .next .lg,.oq #qactions .fbbtn .lg{display:none}
  .oq #qactions .next .sm{display:inline}
  .oq #progress{display:none}
  .oq-foot{display:none}
  .apphead .headlinks{gap:0}
}

/* ---- embedded in the homepage card ---- */
.oq.oq-embed{flex:1; min-height:0; background:transparent; display:flex; flex-direction:column}
.oq-embed .demo-top{padding:14px 22px; border-bottom:1px solid var(--line)}
.oq-embed .demo-top .oq-prog{max-width:none; margin:0}
.oq-embed .demo-body{flex:1; padding:22px}
.oq-embed .demo-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; border-top:1px solid var(--line); background:var(--panel)}
.oq-embed .demo-actions .primary,.oq-embed .demo-actions .next{min-height:44px; padding:8px 22px; font-weight:600}
.oq-embed .demo-actions .next{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}