:root{
  --bg:#f4f5fb; --card:#ffffff; --ink:#1f2233; --muted:#6b7091; --line:#e6e8f2;
  --primary:#5b57e0; --primary-d:#4844c4; --primary-soft:#edecfd;
  --ok:#16a34a; --ok-soft:#e7f6ec; --bad:#dc2626; --bad-soft:#fdecec;
  --amber:#e0913a; --r:16px; --r-sm:11px;
  --shadow:0 1px 2px rgba(31,34,51,.04),0 10px 30px -16px rgba(31,34,51,.25);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:680px;margin:0 auto;padding:0 1.1rem}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(244,245,251,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:680px;margin:0 auto;padding:.7rem 1.1rem;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800;letter-spacing:-.01em}
.brand .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;display:grid;place-items:center;font-size:1rem}
.brand small{display:block;font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.top-user{display:flex;align-items:center;gap:.7rem;font-size:.85rem;color:var(--muted)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--primary-soft);color:var(--primary-d);display:grid;place-items:center;font-weight:700;font-size:.85rem}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:1.3rem}
h1{font-size:1.55rem;letter-spacing:-.02em;margin-bottom:.3rem}
h2{font-size:1.05rem;margin-bottom:.8rem}
.muted{color:var(--muted)}
.section{margin:1.4rem 0}
.label{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}

/* buttons / pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-weight:700;
  padding:.9rem 1.3rem;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .15s,background .15s;width:100%}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 10px 22px -12px var(--primary)}
.btn-primary:hover{background:var(--primary-d)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary-d)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{background:var(--primary)}

/* choice grids */
.grid{display:grid;gap:.6rem}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
.grid-4{grid-template-columns:repeat(4,1fr)}
.opt{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;transition:border-color .12s,background .12s;text-align:left;font:inherit;width:100%}
.opt:hover{border-color:var(--primary)}
.opt .k{flex-shrink:0;width:26px;height:26px;border-radius:7px;background:var(--primary-soft);color:var(--primary-d);
  display:grid;place-items:center;font-weight:700;font-size:.8rem}
.opt.sel{border-color:var(--primary);background:var(--primary-soft)}
.opt.sel .k{background:var(--primary);color:#fff}
.opt.correct{border-color:var(--ok);background:var(--ok-soft)}
.opt.correct .k{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .k{background:var(--bad);color:#fff}
.opt[disabled]{cursor:default}

.pick{padding:1.15rem .6rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;
  text-align:center;font:inherit;font-weight:800;font-size:1.3rem;transition:all .12s}
.pick:hover,.pick.sel{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-d)}
.pick small{display:block;font-size:.65rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}
.pick.sel small{color:var(--primary-d)}

.mode{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;text-align:left;width:100%;font:inherit;transition:all .12s}
.mode:hover,.mode.sel{border-color:var(--primary);background:var(--primary-soft)}
.mode .em{font-size:1.3rem;line-height:1.2}
.mode b{display:block;font-size:.95rem}
.mode span{font-size:.8rem;color:var(--muted)}

/* stats */
.statrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;text-align:center}
.stat b{display:block;font-size:1.7rem;letter-spacing:-.02em}
.stat span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.bar{height:9px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:.4rem}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#8b5cf6)}
.chip{display:inline-block;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:var(--primary-soft);color:var(--primary-d)}

/* quiz progress */
.qbar{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin:.2rem 0 1rem}
.qbar>i{display:block;height:100%;background:var(--primary);transition:width .3s}
.qmeta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:.2rem}
.stem{font-size:1.18rem;font-weight:600;line-height:1.4;margin:.5rem 0 1.1rem}
.feedback{margin-top:1rem;padding:.85rem 1rem;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;display:none}
.feedback.show{display:block}
.feedback.good{background:var(--ok-soft);color:#15803d}
.feedback.no{background:var(--bad-soft);color:#b91c1c}
.feedback .src{display:block;font-weight:500;color:var(--muted);font-size:.78rem;margin-top:.3rem}

input[type=email],input[type=password],input[type=text]{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;background:#fff;display:block}
input:focus{outline:none;border-color:var(--primary)}
.sel-input{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;background:#fff;color:var(--ink);
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7091' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center}
.sel-input:focus{outline:none;border-color:var(--primary)}
.err{background:var(--bad-soft);color:#b91c1c;padding:.7rem 1rem;border-radius:var(--r-sm);font-size:.88rem;font-weight:600}
.linkbtn{background:none;border:none;color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;padding:.25rem .3rem;text-decoration:none}
.linkbtn:hover{color:var(--bad)}
.read-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-d)}
.read-body p{margin:.5rem 0;font-size:.97rem;line-height:1.6}
.read-body ul{margin:.4rem 0 0;padding-left:1.15rem}
.read-body li{margin:.5rem 0;font-size:.96rem;line-height:1.55}
.read-body li::marker{color:var(--primary)}