/* ============================================================================
   QBank — APP COMPONENTS  ·  every in-app screen
   ----------------------------------------------------------------------------
   Presentation only. Pairs with qbank-themes.css (load that first — these
   classes read its --tokens). Behavior hookpoints are marked /* HOOK: ... */ /*.
   Screens covered: app shell (sidebar + topbar), dashboard, active exam,
   results, create exam, past exams, changelog.
   Login / profile / manage-profiles live in qbank-login.css.
   ========================================================================== */

/* ============================ APP SHELL ================================== */
.qb-shell { display: flex; }                 /* sidebar + main, inside .qb-screen */

.qb-side {
  width: 230px; flex: none;
  background: var(--side); border-right: 1px solid var(--bd);
  display: flex; flex-direction: column;
}
.qb-brand {
  padding: 22px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 12px;
}
.qb-brand__mark {
  width: 36px; height: 36px; flex: none;
  border-radius: calc(var(--r) + 1px);
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.qb-brand__name { font-family: var(--head); font-size: 16px; font-weight: 600; color: var(--ink); }
.qb-brand__sub  { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.qb-nav { padding: 18px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
/* HOOK: each nav item routes to a screen. Add .is-active to the current one. */
.qb-nav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 9px;
  color: var(--body); font-size: 14px; cursor: pointer;
}
.qb-nav__item i { width: 16px; color: var(--muted); }
.qb-nav__item.is-active { background: var(--soft); color: var(--accent); font-weight: 600; }
.qb-nav__item.is-active i { color: var(--accent); }

.qb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qb-topbar {
  height: 64px; flex: none; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--bd);
}
.qb-topbar__title { font-family: var(--head); font-size: 23px; font-weight: 600; color: var(--ink); }

/* small round icon button (theme toggle, help) + streak pill */
.qb-iconbtn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--bd); background: transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.qb-pill-stat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  background: var(--warnSoft); color: var(--warn);
}

/* ============================ DASHBOARD ================================== */
.qb-statcard {
  background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 20px;
}
.qb-statcard--accent { background: var(--soft); }   /* the highlighted "overall" card */
.qb-statcard__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.qb-statcard--accent .qb-statcard__label { color: var(--accent); }
.qb-statcard__value { font-family: var(--head); font-size: 36px; font-weight: 700; color: var(--ink); line-height: 1; }
.qb-statcard__note  { font-size: 12px; color: var(--muted); margin-top: 7px; }

.qb-panel { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r); padding: 20px 22px; }
.qb-panel__title { font-family: var(--head); font-size: 17px; font-weight: 600; color: var(--ink); }

/* Chapter performance table (CSS grid rows; match columns to your data). */
.qb-row {
  display: grid; grid-template-columns: 1fr 72px 56px 120px; gap: 8px;
  align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--bd);
}
.qb-row--head { padding: 0 4px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qb-row__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.qb-row__sub  { font-size: 10.5px; color: var(--muted); }

/* Quick-action list items. */
.qb-action {
  background: var(--card); border: 1px solid var(--bd); color: var(--ink);
  padding: 12px; border-radius: 10px; font-weight: 600; font-size: 13px;
  display: flex; align-items: center; gap: 11px; cursor: pointer;
}
.qb-action i { width: 16px; color: var(--accent); }
.qb-action__count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.qb-tip {
  background: var(--soft); border: 1px solid var(--bd); border-radius: 10px;
  padding: 14px; display: flex; gap: 11px;
}

/* ============================ ACTIVE EXAM =============================== */
.qb-exam { height: 740px; display: flex; flex-direction: column; position: relative; }
.qb-exam__header {
  height: 56px; flex: none; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--bd);
}
/* Tutor/Timed segmented toggle. HOOK: switch mode on click; .is-on = selected. */
.qb-seg { display: inline-flex; background: var(--inset); border-radius: 9px; padding: 3px; }
.qb-seg__tab { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--muted); }
.qb-seg__tab.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* HOOK: flag toggle. Add .is-on when flagged. */
.qb-flagbtn {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 8px; padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--card); color: var(--body); border: 1px solid var(--bd);
}
.qb-flagbtn.is-on { background: var(--warnSoft); color: var(--warn); border-color: var(--warn); }

/* Countdown chip. Add .is-warn (<=30s) / .is-danger (<=10s). HOOK: drive text from your timer. */
.qb-timer {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 8px; padding: 7px 11px; font-size: 13px; font-weight: 600;
  font-family: var(--mono); background: var(--inset); color: var(--ink);
}
.qb-timer.is-warn   { background: var(--warnSoft); color: var(--warn); }
.qb-timer.is-danger { background: var(--badSoft);  color: var(--bad); }

.qb-endbtn { background: var(--ink); color: var(--onInk); padding: 8px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 7px; }
/* review-mode variant: "Back to Results" reads as a positive action (accent). */
.qb-endbtn--accent { background: var(--accent); color: var(--onAccent); }

.qb-exam__body { flex: 1; display: flex; min-height: 0; }
.qb-question { flex: 1; min-width: 0; display: flex; justify-content: center; overflow-y: auto; padding: 30px; }
.qb-question__inner { width: 100%; max-width: 660px; }
.qb-question__stem { font-size: 15.5px; line-height: 1.68; color: var(--ink); margin: 0 0 16px; }
.qb-figcaption { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--muted); margin: 7px 0 20px; }

/* Answer choices. Default = neutral. Apply ONE state class after answering:
   HOOK: on click, lock the block, mark the picked one, and reveal states.
     .is-correct  → the right answer (always green, any theme)
     .is-wrong    → the option the user picked when wrong (red)
     .is-dimmed   → the other distractors after answering */
.qb-choices { display: flex; flex-direction: column; gap: 9px; }
.qb-choice {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  border: 1px solid var(--bd); background: var(--card); border-radius: 11px;
  cursor: pointer; transition: border-color .15s, background .15s, opacity .15s;
}
.qb-choice__letter {
  width: 25px; height: 25px; flex: none; border-radius: 7px;
  border: 1px solid var(--bd); color: var(--body); background: var(--card);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.qb-choice__text  { font-size: 14.5px; color: var(--body); }
.qb-choice__badge { margin-left: auto; font-family: var(--mono); font-size: 10px; padding: 4px 9px; border-radius: 20px; display: none; }

.qb-choice.is-correct { border: 1.5px solid var(--ok); background: var(--okSoft); }
.qb-choice.is-correct .qb-choice__letter { background: var(--ok); color: #fff; border-color: var(--ok); }
.qb-choice.is-correct .qb-choice__text   { color: var(--ink); }
.qb-choice.is-correct .qb-choice__badge  { display: block; background: var(--ok); color: #fff; }

.qb-choice.is-wrong { border: 1.5px solid var(--bad); background: var(--badSoft); }
.qb-choice.is-wrong .qb-choice__letter { background: var(--bad); color: #fff; border-color: var(--bad); }
.qb-choice.is-wrong .qb-choice__badge  { display: block; background: var(--bad); color: #fff; }

.qb-choice.is-dimmed { opacity: .5; }

/* Explanation panel — slides in beside the question after answering.
   HOOK: set width 0 → 430px (and toggle .is-open) when the answer is locked.
   The transition gives the desktop "slide" reveal you chose. */
.qb-explain-wrap { flex: none; overflow: hidden; width: 0; transition: width .0s; }
.qb-explain-wrap.is-open { width: 430px; }
.qb-explain {
  width: 430px; height: 100%; display: flex; flex-direction: column;
  border-left: 1px solid var(--bd); background: var(--card);
  opacity: 0; transform: translateX(110px);
  transition: opacity .18s ease, transform .36s cubic-bezier(.16,1,.3,1);
}
.qb-explain-wrap.is-open .qb-explain { opacity: 1; transform: none; box-shadow: -16px 0 36px rgba(20,20,20,.08); }
.qb-explain__head { flex: none; padding: 16px 22px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; }
.qb-explain__verdict { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.qb-explain__verdict.is-correct { color: var(--ok); }
.qb-explain__verdict.is-wrong   { color: var(--bad); }
.qb-explain__body { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.qb-explain__body p { margin: 0; font-size: 14px; line-height: 1.68; color: var(--body); }
.qb-tag { font-family: var(--mono); font-size: 10.5px; color: var(--body); background: var(--inset); padding: 5px 10px; border-radius: 6px; }
.qb-explain__foot { flex: none; padding: 14px 22px; border-top: 1px solid var(--bd); display: flex; align-items: center; gap: 10px; }

/* Question navigator filmstrip (bottom). Each cell gets a state class. */
.qb-strip-bar { flex: none; border-top: 1px solid var(--bd); padding: 11px 18px; display: flex; align-items: center; gap: 16px; }
.qb-strip { flex: 1; display: flex; gap: 5px; overflow-x: auto; min-width: 0; }
.qb-strip::-webkit-scrollbar { height: 0; }
.qb-cell {
  flex: none; width: 28px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--card); color: var(--muted); border: 1px solid var(--bd); cursor: pointer;
}
.qb-cell.is-correct   { background: var(--okSoft);  color: var(--ok);  border-color: transparent; }
.qb-cell.is-wrong     { background: var(--badSoft); color: var(--bad); border-color: transparent; }
.qb-cell.is-flagged   { background: var(--card); color: var(--warn); border: 1.5px solid var(--warn); }
.qb-cell.is-current   { background: var(--ink); color: var(--onInk); border-color: var(--ink); }
.qb-legend { flex: none; display: flex; align-items: center; gap: 13px; font-size: 10.5px; color: var(--muted); }

/* End-block confirm dialog. HOOK: toggle .is-open to show; wire Keep/End buttons. */
.qb-overlay {
  position: absolute; inset: 0; background: rgba(20,20,20,.34);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.qb-overlay.is-open { opacity: 1; pointer-events: auto; }
.qb-dialog {
  width: 420px; background: var(--card); border: 1px solid var(--bd);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.25); padding: 26px;
  transform: scale(.96); transition: transform .2s ease;
}
.qb-overlay.is-open .qb-dialog { transform: scale(1); }
.qb-dialog__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--warnSoft); color: var(--warn); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.qb-btn-danger { background: var(--bad); color: #fff; border: none; padding: 11px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ============================ RESULTS =================================== */
.qb-results { min-height: 740px; display: flex; }
.qb-results__score { width: 360px; flex: none; border-right: 1px solid var(--bd); background: var(--side); display: flex; flex-direction: column; padding: 30px 28px; }
.qb-ring { align-self: center; position: relative; width: 184px; height: 184px; margin-bottom: 24px; }
/* SVG ring: track stroke rgba(0,0,0,.06); progress stroke var(--ok);
   HOOK: set stroke-dashoffset from the real score (circumference≈502.65 for r=80). */
.qb-ring__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.qb-kv { display: flex; justify-content: space-between; font-size: 13.5px; }
.qb-kv__v { font-weight: 600; color: var(--ink); }
.qb-kv__v.is-ok   { color: var(--ok);   font-weight: 700; }
.qb-kv__v.is-bad  { color: var(--bad);  font-weight: 700; }
.qb-kv__v.is-warn { color: var(--warn); }
/* Review list row. HOOK: click → reopen that question in review mode. */
.qb-review {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  border: 1px solid var(--bd); border-radius: 11px; background: var(--card);
}
.qb-review__mark { width: 30px; height: 30px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.qb-review__mark.is-ok  { background: var(--okSoft);  color: var(--ok); }
.qb-review__mark.is-bad { background: var(--badSoft); color: var(--bad); }

/* ---- results: fill the immersion viewport; panels scroll internally ------ */
.immersion-mode #view-results { height: 100%; }
.qb-results { height: 100%; min-height: 0; position: relative; }
.qb-results__score { overflow-y: auto; gap: 2px; }
.qb-results__review {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  gap: 14px; padding: 26px 28px;
}

/* score ring — reuses the existing r=45 SVG; JS sets dashoffset against circ≈283 */
.qb-ring svg { width: 184px; height: 184px; transform: rotate(-90deg); }
.qb-ring__track { fill: none; stroke: rgba(128,128,128,.20); stroke-width: 7; }
.qb-ring__prog {
  fill: none; stroke: var(--ok); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 283; transition: stroke-dashoffset .6s cubic-bezier(.16,1,.3,1);
}
.qb-ring__prog.is-ok   { stroke: var(--ok); }
.qb-ring__prog.is-warn { stroke: var(--warn); }
.qb-ring__prog.is-bad  { stroke: var(--bad); }
.qb-ring__pct { font-family: var(--head); font-size: 40px; font-weight: 700; color: var(--ink); line-height: 1; }
.qb-ring__label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 5px; }

.qb-kvs { display: flex; flex-direction: column; gap: 11px; padding: 6px 2px; }

/* performance-trend container (the SVG inside follows the bridged tokens) */
.qb-trend { margin-top: 22px; }
.qb-trend__title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.qb-trend__plot { height: 160px; background: var(--inset); border: 1px solid var(--bd); border-radius: 10px; padding: 12px; box-sizing: border-box; overflow: hidden; }

.qb-results__cta { width: 100%; margin-top: auto; }

/* review list rows */
.qb-review-list { display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1; min-height: 0; }
.qb-review { cursor: pointer; transition: border-color .15s; }
.qb-review:hover { border-color: var(--accent); }
.qb-review__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.qb-review__title { font-size: 13px; color: var(--ink); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qb-review__meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* ============================ CREATE EXAM =============================== */
/* Selectable category / chapter card. HOOK: toggle .is-checked on click. */
.qb-select {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--bd); border-radius: 10px; cursor: pointer;
}
.qb-select.is-checked { border-color: var(--accent); background: var(--soft); }
.qb-check { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1px solid var(--bd); background: var(--card); color: transparent; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.qb-select.is-checked .qb-check { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Mode radio card (Tutor / Timed). HOOK: toggle .is-checked. */
.qb-mode {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  border: 1px solid var(--bd); border-radius: 11px; cursor: pointer;
}
.qb-mode.is-checked { border-color: var(--accent); background: var(--soft); }
.qb-mode__radio { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--bd); }
.qb-mode.is-checked .qb-mode__radio { border: 4px solid var(--accent); }

/* Number-of-questions field (replaced the old slider). HOOK: real number input. */
.qb-numfield { display: flex; align-items: center; border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; background: var(--card); }
.qb-numfield input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 13px 15px; font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.qb-numfield__suffix { font-size: 11.5px; color: var(--muted); padding: 0 15px; white-space: nowrap; border-left: 1px solid var(--bd); align-self: stretch; display: flex; align-items: center; }

/* ============================ PAST EXAMS / TABLES ====================== */
.qb-table { border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; }
.qb-table__head, .qb-table__row { display: grid; gap: 10px; padding: 12px 16px; align-items: center; }
.qb-table__head { background: var(--side); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.qb-table__row  { border-top: 1px solid var(--bd); font-size: 13px; color: var(--body); }
.qb-table__row .is-date { color: var(--ink); font-weight: 500; }
.qb-score { font-family: var(--mono); font-weight: 700; }   /* color set inline: var(--ok|warn|bad) */

/* ============================ CHANGELOG ================================= */
.qb-log { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--bd); }
.qb-log__date { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.qb-log__title { font-family: var(--head); font-size: 16px; font-weight: 600; color: var(--ink); }
.qb-log__body  { font-size: 13.5px; line-height: 1.55; color: var(--body); }
.qb-logtag { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; padding: 3px 9px; border-radius: 6px; }
.qb-logtag--new      { background: var(--soft);    color: var(--accent); }
.qb-logtag--improved { background: var(--inset);   color: var(--body); }
.qb-logtag--fixed    { background: var(--warnSoft); color: var(--warn); }

/* ============================ SHELL: sidebar footer chip =============== */
.qb-side__foot { padding: 14px; border-top: 1px solid var(--bd); }
.qb-userchip {
  display: flex; align-items: center; gap: 11px;
  padding: 8px; border-radius: 10px; cursor: pointer;
}
.qb-userchip:hover { background: var(--soft); }
.qb-userchip__avatar {
  width: 36px; height: 36px; flex: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--onAccent); font-size: 15px;
}
.qb-userchip__meta { display: flex; flex-direction: column; min-width: 0; }
.qb-userchip__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.qb-userchip__sub  { font-size: 10.5px; color: var(--muted); }

/* ============================ SHELL: immersion (exam/results) ========== */
/* JS adds .immersion-mode to #main-app-container; hide the sidebar full-screen. */
.immersion-mode .qb-side { display: none !important; }

/* The active-exam view must fill the immersion viewport. Legacy immersion CSS
   sized the old .exam-layout/.exam-*-panel; the redesign view is
   #view-active-exam > .qb-exam, so give the view a height for .qb-exam's
   height:100% to resolve against (otherwise the exam collapses to content
   height and the filmstrip floats mid-screen). */
.immersion-mode #view-active-exam { height: 100%; }

/* ============ SHELL: sidebar → bottom nav on mobile/tablet (<=1024px) === */
/* Ported from the legacy .app-sidebar responsive rules, re-themed. */
@media (max-width: 1024px) {
  .qb-side {
    width: 100%; height: 60px; position: fixed; bottom: 0; left: 0;
    flex-direction: row; border-right: none; border-top: 1px solid var(--bd);
    background: var(--side); padding: 0; z-index: 1000; justify-content: space-between;
  }
  .qb-brand { display: none; }
  .qb-nav {
    flex-direction: row; padding: 0; gap: 0; flex: 1;
    justify-content: space-around; align-items: center; height: 100%;
  }
  .qb-nav__item {
    flex-direction: column; gap: 4px; padding: 8px 12px; font-size: 10px;
    border-radius: 0; flex: 1; text-align: center; justify-content: center;
  }
  .qb-nav__item i { font-size: 18px; width: auto; }
  .qb-nav__item.is-active,
  .qb-nav__item.is-active i { background: transparent; color: var(--accent); }
  .qb-side__foot { padding: 0; margin-right: 12px; border-top: none; display: flex; align-items: center; }
  .qb-userchip { padding: 6px; }
  .qb-userchip__avatar { width: 32px; height: 32px; font-size: 14px; }
  .qb-userchip__meta { display: none; }
}

/* ============================ SHELL: top bar + theme menu ============== */
.qb-topbar__actions { display: flex; align-items: center; gap: 12px; }
.qb-themepick { position: relative; display: flex; }
/* floated top-right on the immersion results screen (which has no topbar) */
.qb-themepick--corner { position: absolute; top: 16px; right: 18px; z-index: 50; }
.qb-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; width: 210px;
  padding: 8px; background: var(--card); border: 1px solid var(--bd);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(20,20,20,.18);
  display: none; flex-direction: column; gap: 2px;
}
.qb-menu.is-open { display: flex; }
.qb-menu__head { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 3px; }
.qb-menu__opt {
  display: flex; align-items: center; gap: 10px; padding: 8px; border: none;
  background: transparent; border-radius: 8px; font: inherit; font-size: 13px;
  color: var(--ink); cursor: pointer; text-align: left; width: 100%;
}
.qb-menu__opt:hover { background: var(--inset); }
.qb-menu__opt.is-active { background: var(--soft); color: var(--accent); font-weight: 600; }
.qb-menu__sw { width: 16px; height: 16px; border-radius: 5px; flex: none; border: 1px solid rgba(120,120,120,.35); }
.qb-menu__sep { height: 1px; background: var(--bd); margin: 6px 4px; }
.qb-menu__modes { display: flex; gap: 6px; padding: 2px 4px 4px; }
.qb-menu__mode {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; border: 1px solid var(--bd); background: var(--card); border-radius: 8px;
  font: inherit; font-size: 12px; color: var(--body); cursor: pointer;
}
.qb-menu__mode.is-active { background: var(--accent); color: var(--onAccent); border-color: var(--accent); }

/* top bar immersion + mobile (ported from legacy .app-header) */
.immersion-mode .qb-topbar { display: none !important; }
@media (max-width: 1024px) {
  .qb-topbar { padding: 0 16px; position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--bd); }
  .qb-topbar__title { font-size: 18px; }
  .qb-menu { right: 0; }
}

/* ==== Bridge fix-ups: legacy components with hardcoded colors ============ */
/* Dashboard "overall progress" card (.gradient-primary) hardcoded dark text for
   a light gradient bg; re-point to tokens so it reads in every skin + dark mode. */
#main-app-container.qb .stat-card.gradient-primary { background: var(--soft); box-shadow: none; }
#main-app-container.qb .stat-card.gradient-primary .stat-header,
#main-app-container.qb .stat-card.gradient-primary .stat-header span { color: var(--accent); }
#main-app-container.qb .stat-card.gradient-primary .stat-val { color: var(--ink); }
#main-app-container.qb .stat-card.gradient-primary .stat-desc { color: var(--muted); }

/* Legacy .btn-primary hardcodes dark text (`hsl(222,47%,10%)`) — fine on the old
   teal, but invisible on a dark accent (e.g. Studio's near-black in light, and
   its near-white needs dark text in dark). Re-point text + icon to --onAccent. */
#main-app-container.qb .btn-primary,
#main-app-container.qb .btn-primary i { color: var(--onAccent); }

/* ============================ ACTIVE EXAM (redesign layout) ============= */
.qb-exam { height: 100%; }                 /* fill immersion full-screen */
.qb-exam__meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qb-exam__num { font-size: 11px; color: var(--muted); }
.qb-exam__tools { display: flex; align-items: center; gap: 10px; }

/* picked-but-not-yet-revealed (timed / untimed modes) */
.qb-choice.is-selected { border: 1.5px solid var(--accent); background: var(--soft); }
.qb-choice.is-selected .qb-choice__letter { background: var(--accent); color: var(--onAccent); border-color: var(--accent); }
/* right-click strike-through */
.qb-choice.is-struck .qb-choice__text { text-decoration: line-through; opacity: .5; }

/* explanation head correct-letter */
.qb-explain__correct { font-size: 11px; color: var(--muted); }
.qb-explain__correct strong { color: var(--ok); }

/* navigator: answered-no-feedback (e.g. timed mode) */
.qb-cell.is-answered { background: var(--inset); color: var(--ink); border-color: transparent; }

/* strip-bar prev / pause / next controls + legend dots */
.qb-navctl {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--card); color: var(--body); border: 1px solid var(--bd);
}
.qb-navctl:disabled { opacity: .4; cursor: default; }
.qb-navctl--next { background: var(--accent); color: var(--onAccent); border-color: var(--accent); }
.qb-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }

/* mobile: stack the explanation under the question instead of a side drawer */
@media (max-width: 1024px) {
  .qb-exam__body { flex-direction: column; overflow-y: auto; }
  .qb-question { overflow: visible; }
  /* Must match the desktop `.qb-explain-wrap.is-open { width:430px }` specificity
     (0,0,2,0) — a bare `.qb-explain-wrap` (0,0,1,0) loses even inside a media
     query, leaving the panel at 430px and overflowing narrow screens. */
  .qb-explain-wrap.is-open { width: 100%; }
  .qb-explain-wrap:not(.is-open) { display: none; }
  .qb-explain { width: 100%; height: auto; border-left: none; border-top: 1px solid var(--bd); opacity: 1; transform: none; box-shadow: none; }
  .qb-exam__tools .btn-text { display: none; }
  .qb-strip-bar { flex-wrap: wrap; }
}