.qb{background:var(--soft)}
.qb-top{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:22px}.qb-top h2{margin:0 0 8px;font-size:clamp(1.875rem,4vw,2.75rem);letter-spacing:-.04em;font-weight:800}.qb-top p{margin:0;color:var(--mut);max-width:520px}
.qb-tools{position:sticky;top:72px;z-index:10;background:var(--tools);backdrop-filter:blur(10px);padding:12px 0;margin-bottom:12px}
.qb-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.qb-search{flex:1;min-width:200px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font:inherit;background:var(--surface);transition:border-color .2s,box-shadow .2s}.qb-search:focus{outline:0;border-color:var(--g);box-shadow:0 0 0 4px rgba(19,89,118,.14)}
.qb-all{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:9px 14px;font:inherit;font-weight:700;font-size:0.875rem;color:var(--text);cursor:pointer}.qb-sw{width:36px;height:20px;border-radius:99px;background:var(--line2);position:relative;transition:background .3s}.qb-sw:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.2,.8,.2,1)}.qb-all.on .qb-sw{background:var(--g)}.qb-all.on .qb-sw:after{transform:translateX(16px)}
.qb-saved{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:11px 14px;font:inherit;font-weight:700;font-size:0.875rem;cursor:pointer;color:var(--mut)}.qb-saved.on{background:var(--b-tint);border-color:var(--b3);color:var(--ac)}
.qb-units{display:flex;gap:6px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none}.qb-units::-webkit-scrollbar{display:none}.qb-u{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:8px 14px;font:inherit;font-size:0.8125rem;font-weight:700;color:var(--mut);cursor:pointer;transition:.2s;white-space:nowrap}.qb-u.on{background:var(--btn);color:#fff;border-color:var(--btn)}
.qb-meta{font-size:0.8125rem;color:var(--mut);margin:8px 0 14px}.qb-meta b{color:var(--g)}
.qb-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:12px;transition:box-shadow .3s,border-color .3s}.qb-card.rev{border-color:var(--ok-bd);box-shadow:0 14px 36px rgba(19,89,118,.09)}
.qb-h{display:flex;gap:14px;align-items:flex-start}.qb-n{flex:none;width:34px;height:34px;border-radius:10px;background:var(--chip);display:grid;place-items:center;font-weight:800;font-size:0.8125rem;color:var(--text)}.qb-q{white-space:pre-line;flex:1;font-size:1.0625rem;font-weight:650;line-height:1.5;margin:3px 0 0}
.qb-acts{display:flex;gap:8px;flex:none}.qb-ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--mut);transition:transform .2s,background .25s,color .25s,border-color .25s}.qb-ic:hover{transform:scale(1.08)}.qb-ic:focus-visible{outline:3px solid #8fd8f0;outline-offset:2px}
.qb-eye{background:var(--g);border-color:var(--g);color:#fff;box-shadow:0 6px 16px rgba(19,89,118,.3)}.rev .qb-eye{background:var(--surface);color:var(--g)}.qb-star.on{background:var(--b-tint);color:var(--b2);border-color:var(--b3)}
.qb-u2{display:inline-block;font-size:0.6875rem;font-weight:700;color:var(--ac);background:var(--tint);border-radius:99px;padding:3px 9px;margin:0 0 8px 48px}
.qb-o{display:grid;gap:8px;margin:14px 0 0 48px}.qb-opt{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-size:0.9375rem;cursor:pointer;transition:border-color .25s,background .25s}.qb-opt:hover{border-color:var(--line2)}.qb-opt.sel{border-color:var(--b2);background:var(--sel-bg)}
.qb-opt .mk{margin-left:auto;font-weight:800;opacity:0;transition:opacity .3s}.rev .qb-opt.ok{border-color:var(--g);background:var(--ok-bg)}.rev .qb-opt.ok .mk{opacity:1;color:var(--g)}.rev .qb-opt.sel:not(.ok){border-color:#e07a7a;background:var(--bad-bg)}
.qb-e{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1);margin-left:48px}.rev .qb-e{grid-template-rows:1fr}.qb-e>div{overflow:hidden;min-height:0}.qb-e p{margin:12px 0 0;padding:13px 15px;border-left:3px solid var(--g);background:var(--ok-soft);border-radius:0 10px 10px 0;font-size:0.875rem;color:var(--ok-text);line-height:1.6}
.qb-more{display:block;margin:20px auto 0;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:13px 26px;font:inherit;font-weight:700;cursor:pointer}.qb-empty{text-align:center;color:var(--mut);padding:50px 0}
@media(max-width:620px){.qb-card{padding:16px}.qb-o,.qb-e,.qb-u2{margin-left:0}.qb-h{flex-wrap:wrap}.qb-q{flex-basis:100%;order:3;margin-top:6px}.qb-acts{margin-left:auto}.qb-tools{top:72px}}
@media(prefers-reduced-motion:reduce){.qb *{transition:none!important}}
/* Module MCQs */
.unit.mod{cursor:pointer;position:relative;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}.unit.mod:hover{border-color:var(--line2)}.unit.mod:focus-visible{outline:3px solid var(--b3);outline-offset:2px}
.unit.mod.active{border-color:var(--ac2);box-shadow:0 14px 32px rgba(74,111,194,.18);transform:translateY(-3px)}
.unit.mod .go{margin-top:auto;font-size:0.75rem;color:var(--ac);font-weight:750}.unit.mod .go i{display:inline-block;font-style:normal;transition:transform .25s}.unit.mod:hover .go i{transform:translateX(4px)}
.unit.mod .cnt{position:absolute;top:18px;right:16px;font-style:normal;font-size:0.6875rem;font-weight:700;color:var(--mut);background:var(--chip);border-radius:99px;padding:3px 9px}
.mod-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1),margin .55s;margin-top:0;scroll-margin-top:90px}.mod-panel.open{grid-template-rows:1fr;margin-top:22px}.mod-panel>div{overflow:hidden;min-height:0}
.mod-in{background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:26px;opacity:0;transform:translateY(8px);transition:opacity .4s .12s,transform .4s .12s}.mod-panel.open .mod-in{opacity:1;transform:none}
.mod-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}.mod-head h3{margin:6px 0 4px;font-size:clamp(1.375rem,3vw,1.875rem);letter-spacing:-.03em}.mod-sub{margin:0;color:var(--mut);font-size:0.875rem}
.mod-x{flex:none;border:1px solid var(--line2);background:var(--surface);border-radius:10px;padding:9px 14px;font:inherit;font-weight:700;font-size:0.8125rem;color:var(--text2);cursor:pointer;transition:.2s}.mod-x:hover{border-color:var(--line2)}
.mod-empty{background:var(--surface);border:1px dashed var(--line2);border-radius:16px;padding:44px 20px;text-align:center}.mod-empty b{display:block;font-size:1.0625rem;margin-bottom:6px}.mod-empty span{color:var(--mut);font-size:0.875rem}
@media(max-width:620px){.mod-in{padding:16px}.mod-head{flex-direction:column}.unit.mod .cnt{top:14px}}
@media(prefers-reduced-motion:reduce){.mod-panel,.mod-in{transition:none}}
.mod-score{margin:6px 0 0;font-size:0.8125rem;font-weight:800;color:var(--ok);min-height:0}.mod-score:empty{display:none}
.soft .mod-in{background:var(--surface)}

/* Practice questions: scroll inside a box (about two questions tall) instead of one very long page.
   Wide screens only; phones use the app view, where the plain list is kept. */
@media(min-width:700px){
  .qb-list{
    max-height:clamp(460px,calc(100vh - 195px),820px);
    max-height:clamp(460px,calc(100dvh - 195px),820px);
    overflow-y:auto;overflow-x:hidden;
    padding:10px 12px 2px 10px;
    border:1px solid var(--line);border-radius:20px;background:var(--soft,transparent);
    scroll-snap-type:y proximity;scroll-padding-top:10px;
    scrollbar-width:thin;scrollbar-gutter:stable;
  }
  .qb-list>.qb-card{scroll-snap-align:start}
  .qb-list:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
  .qb-list>.qb-empty{margin:20px 4px}
}
@media(prefers-reduced-motion:reduce){.qb-list{scroll-snap-type:none}}