/* ==========================================================================
   Libri components  —  libri.css
   Ported from the design prototype (components.css). Uses tokens.css variables
   only. The design-review controls are not carried over, and the
   48px offsets that made room for the prototype bar are gone (spec section 10).
   Hover styles sit in @media (hover: hover), so on a touch screen a tap does not
   leave a row or button looking selected; touch feedback (:active) is in app.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; color: var(--brand-ink); line-height: var(--leading-tight); text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand-blue); }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- Page canvas -------------------------------------------------------- */
.canvas { max-width: var(--canvas-w); margin-inline: auto; }

/* ---- App shell ---------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; background: linear-gradient(to right, var(--surface) calc(var(--sidebar-w) - 1px), var(--line) calc(var(--sidebar-w) - 1px), var(--line) var(--sidebar-w), var(--bg) var(--sidebar-w)); }
.main { min-width: 0; display: flex; flex-direction: column; }
.page { padding: var(--space-6) var(--space-8) var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); max-width: calc(var(--content-max) + 2 * var(--space-8)); width: 100%; }

/* ---- Logo ---------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.logo__word { font-family: var(--font-ui); font-weight: var(--weight-heavy); font-size: 1.5rem; color: var(--brand-ink); letter-spacing: -0.03em; line-height: 1; }

/* ---- Sidebar -------------------------------------------------------------- */
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5) var(--space-3);
  background: var(--surface); border-right: 1px solid var(--line);
  overflow-y: auto;
}
.sidebar__brand { padding: 4px var(--space-3) var(--space-2); border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--radius-md); }
.sidebar__section { display: flex; flex-direction: column; gap: 2px; }
.sidebar__label { padding: 0 var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); }
.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: 9px var(--space-3); border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--fg-muted); text-align: left; cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item svg { flex: none; width: 18px; height: 18px; }
@media (hover: hover) { .nav-item:hover { background: var(--surface-2); color: var(--fg); } }
.nav-item.is-active { background: var(--brand-blue-soft); color: var(--brand-blue); font-weight: var(--weight-bold); }
.nav-item__text { flex: 1; min-width: 0; }
.nav-soon { font-size: 0.8125rem; font-weight: var(--weight-semi); color: var(--fg-subtle); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0 6px; line-height: 18px; }
.sidebar__foot { margin-top: auto; padding: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-xs); color: var(--fg-subtle); }

/* ---- Top bar ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--topbar-h); padding: 0 var(--space-8);
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.search-field {
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--fg-subtle); font-size: var(--text-sm); cursor: text; text-align: left;
}
.search-field svg { width: 16px; height: 16px; }
.search-field kbd { margin-left: auto; font-family: var(--font-mono); font-size: 0.8125rem; border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0 5px; color: var(--fg-subtle); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; color: var(--fg-muted); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn__dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-red); border: 2px solid var(--surface); }
.profile-btn { display: flex; align-items: center; gap: var(--space-2); padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-blue); color: var(--fg-on-brand); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.02em; }

/* ---- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn--primary { background: var(--brand-blue); color: var(--fg-on-brand); }
@media (hover: hover) { .btn--primary:hover:not([disabled]) { background: var(--brand-blue-strong); } }
.btn--secondary { background: var(--surface); color: var(--brand-blue); border-color: var(--line-strong); }
@media (hover: hover) { .btn--secondary:hover:not([disabled]) { border-color: var(--brand-blue); background: var(--brand-blue-soft); } }
.btn--ghost { background: transparent; color: var(--fg-muted); }
@media (hover: hover) { .btn--ghost:hover:not([disabled]) { background: var(--surface-2); color: var(--fg); } }
.btn[disabled] { background: var(--locked-soft); color: var(--locked); border-color: var(--line); cursor: not-allowed; }
.btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-base); }
.btn--block { width: 100%; }

/* ---- Chapter status pill ------------------------------------------------ */
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 7px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semi); white-space: nowrap; }
.status svg { width: 12px; height: 12px; flex: none; }
.status--notstarted { color: var(--status-notstarted); background: var(--status-notstarted-soft); }
.status--developing { color: var(--status-developing); background: var(--status-developing-soft); }
.status--strong { color: var(--status-strong); background: var(--status-strong-soft); }
.status--retained { color: var(--status-retained); background: var(--status-retained-soft); }
.status--refresh { color: var(--status-refresh); background: var(--status-refresh-soft); }

/* ---- Progress bar, ring, score badge ----------------------------------- */
.progress { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.progress__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--brand-blue); transition: width var(--dur) var(--ease); }
.progress--correct .progress__fill { background: var(--correct); }
.progress--thin { height: 4px; }
.progress-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--fg-muted); }
.progress-row .progress { flex: 1; }
.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { display: block; transform: rotate(-90deg); }
.ring__track { stroke: var(--surface-3); fill: none; }
.ring__value { stroke: var(--brand-blue); fill: none; stroke-linecap: round; }
.ring__label { position: absolute; font-weight: var(--weight-heavy); color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.score-badge { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 12px; border-radius: var(--radius-md); background: var(--brand-blue-soft); color: var(--brand-blue); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; }
.score-badge__of { font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--fg-muted); }
.score-badge__tag { margin-left: 6px; font-size: 0.8125rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }

/* ---- Textbook reference chip ------------------------------------------- */
.ref-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg); white-space: nowrap;
  position: relative;
}
.ref-chip svg { width: 14px; height: 14px; color: var(--brand-blue); flex: none; }
.ref-chip__sep { color: var(--fg-subtle); }
/* The section title shows on keyboard focus, and on hover only where the pointer can
   hover, so a tap never leaves it open. On a touch screen the chip carries the title as
   a line of its own instead (RefChip in ui/core.js). On narrow screens the tooltip
   wraps (app.css). */
.ref-chip[data-title]::after {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 10;
  padding: 6px 10px; border-radius: var(--radius-sm); background: var(--brand-ink); color: var(--surface);
  font-family: var(--font-ui); font-size: var(--text-xs); white-space: nowrap; box-shadow: var(--shadow-md);
}
.ref-chip[data-title]:focus-visible::after { content: attr(data-title); }
@media (hover: hover) { .ref-chip[data-title]:hover::after { content: attr(data-title); } }

/* ---- Marks tag + command word ------------------------------------------ */
.marks { font-family: var(--font-exam); font-weight: var(--weight-semi); color: var(--fg-muted); white-space: nowrap; }
.cmd { font-weight: var(--weight-bold); color: var(--brand-blue); background: var(--brand-blue-soft); padding: 0; box-shadow: 0 0 0 3px var(--brand-blue-soft); border-radius: 2px; }
.term { font-weight: var(--weight-bold); }

/* ---- Question card + answer options ------------------------------------- */
.qcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.qcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.qcard__pos { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--brand-ink); }
.qcard__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.qcard__stem { font-family: var(--font-exam); font-size: var(--text-md); line-height: var(--leading-snug); color: var(--fg); white-space: pre-line; max-width: 68ch; }
.qcard__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); background: var(--surface-2); }
.opts { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.opt {
  display: flex; align-items: flex-start; gap: var(--space-3); width: 100%;
  padding: var(--space-3) var(--space-4); border: 1.5px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
@media (hover: hover) { .opt:hover:not(.is-locked) { border-color: var(--line-strong); background: var(--surface-2); } }
.opt__key { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--fg-muted); }
.opt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.opt__text { font-family: var(--font-exam); font-size: var(--text-base); line-height: var(--leading-snug); color: var(--fg); }
.opt__tr { font-size: var(--text-sm); color: var(--fg-muted); line-height: var(--leading-snug); }
.opt__mark { flex: none; display: inline-flex; align-items: center; gap: 4px; padding-top: 4px; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.opt__mark svg { width: 16px; height: 16px; }
.opt.is-selected { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.opt.is-selected .opt__key { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--fg-on-brand); }
.opt.is-correct { border-color: var(--correct); background: var(--correct-soft); }
.opt.is-correct .opt__key { background: var(--correct); border-color: var(--correct); color: var(--fg-on-brand); }
.opt.is-correct .opt__mark { color: var(--correct); }
.opt.is-incorrect { border-color: var(--incorrect); background: var(--incorrect-soft); }
.opt.is-incorrect .opt__key { background: var(--incorrect); border-color: var(--incorrect); color: var(--fg-on-brand); }
.opt.is-incorrect .opt__mark { color: var(--incorrect); }
.opt.is-locked, .opt:disabled { cursor: default; color: inherit; }
.opt:disabled .opt__text { color: var(--fg); }

/* ---- Paper 1 feedback panel -------------------------------------------- */
.fb { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.fb__verdict { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); }
.fb__verdict svg { width: 28px; height: 28px; flex: none; }
.fb__verdict h3 { font-size: var(--text-lg); color: inherit; }
.fb__verdict p { font-size: var(--text-sm); }
.fb__verdict--correct { background: var(--correct-soft); color: var(--correct); border-bottom: 1px solid var(--correct-line); }
.fb__verdict--incorrect { background: var(--incorrect-soft); color: var(--incorrect); border-bottom: 1px solid var(--incorrect-line); }
.fb__section { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.fb__section + .fb__section { border-top: 1px solid var(--line); }
.fb__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand-ink); }
.fb__stem-tr { font-size: var(--text-base); color: var(--fg-muted); line-height: var(--leading-body); max-width: 68ch; }
.explain { display: flex; flex-direction: column; gap: var(--space-3); max-width: 72ch; }
.explain__block { display: flex; flex-direction: column; gap: 4px; }
.explain__lang { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand-blue); }
.explain__text { font-size: var(--text-base); line-height: var(--leading-body); }
.explain__block + .explain__block { padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.fb__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); background: var(--surface-2); }

/* ---- Paper 2 feedback panel -------------------------------------------- */
.p2fb { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.p2fb__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.p2fb__head h3 { font-size: var(--text-md); line-height: var(--leading-snug); }
.p2fb__nomark { font-size: var(--text-sm); color: var(--fg-muted); }
.p2fb__grid { display: grid; grid-template-columns: 1fr 1fr; }
.p2fb__area { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.p2fb__area + .p2fb__area { border-left: 1px solid var(--line); }
.p2fb__area-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-heavy); color: var(--brand-ink); padding-bottom: var(--space-2); border-bottom: 2px solid var(--brand-blue-soft, var(--line)); }
.p2fb__area-title svg { width: 22px; height: 22px; color: var(--brand-blue); }
.p2fb__area-sub { font-size: var(--text-sm); color: var(--fg-muted); }
.point { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-base); line-height: var(--leading-body); }
.point svg { width: 20px; height: 20px; flex: none; margin-top: 4px; }
.point--covered svg { color: var(--correct); }
.point--missing svg, .point--partial svg { color: var(--warning); }
.point__tr { display: block; color: var(--fg-muted); font-size: var(--text-sm); margin-top: 4px; }
.fit { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 14px; border-radius: var(--radius-pill); font-size: var(--text-base); font-weight: var(--weight-bold); }
.fit svg { width: 18px; height: 18px; }
.fit--yes { background: var(--correct-soft); color: var(--correct); }
.fit--no { background: var(--warning-soft); color: var(--warning); }
.p2fb__unsure { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) var(--space-6); background: var(--warning-soft); border-top: 1px solid var(--warning-line); }
.p2fb__unsure > svg { width: 24px; height: 24px; color: var(--warning); flex: none; }
.p2fb__unsure h4 { font-size: var(--text-base); color: var(--fg); }

/* ---- Countdown timer ------------------------------------------------------- */
.timer { display: inline-flex; align-items: center; gap: var(--space-3); padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.timer svg { width: 20px; height: 20px; color: var(--brand-blue); }
.timer__label { font-size: 0.8125rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); line-height: 1.2; }
.timer__time { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--brand-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.timer--warn { background: var(--warning-soft); border-color: var(--warning-line); }
.timer--warn svg, .timer--warn .timer__time { color: var(--warning); }
.timer--up { background: var(--incorrect-soft); border-color: var(--incorrect-line); }
.timer--up svg, .timer--up .timer__time { color: var(--incorrect); }

/* ---- Written-answer box ---------------------------------------------------- */
.answer { display: flex; flex-direction: column; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.answer:focus-within { border-color: var(--brand-blue); box-shadow: var(--focus-ring); }
.answer textarea { border: 0; resize: vertical; min-height: 120px; padding: var(--space-4); font-family: var(--font-exam); font-size: var(--text-md); line-height: var(--leading-body); color: var(--fg); background: transparent; outline: none; }
.answer textarea::placeholder { color: var(--fg-subtle); font-family: var(--font-ui); font-size: var(--text-sm); }
.answer--long textarea { min-height: 260px; }
.answer__foot { display: flex; justify-content: space-between; align-items: center; padding: 6px var(--space-4); border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--text-xs); color: var(--fg-subtle); }

/* ---- Segmented control / language switch ---------------------------------- */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg-muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--brand-blue); box-shadow: var(--shadow-sm); }
@media (hover: hover) { .seg button:hover:not([aria-pressed="true"]) { color: var(--fg); } }
.seg__label { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 4px; color: var(--fg-subtle); font-size: var(--text-xs); font-weight: var(--weight-semi); }
.seg__label svg { width: 14px; height: 14px; }

/* ---- Empty, loading, error patterns ---------------------------------------- */
.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-12) var(--space-8); border-radius: var(--radius-lg); border: 1px dashed var(--line-strong); background: var(--surface); }
.state__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-blue-soft); color: var(--brand-blue); }
.state__icon svg { width: 26px; height: 26px; }
.state h3 { font-size: var(--text-lg); }
.state p { max-width: 46ch; color: var(--fg-muted); font-size: var(--text-sm); }
.state--error { border-style: solid; border-color: var(--incorrect-line); background: var(--incorrect-soft); }
.state--error .state__icon { background: var(--surface); color: var(--incorrect); }
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.loading-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--fg-muted); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface-3); border-top-color: var(--brand-blue); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Cards ------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* ---- Sejarah home -------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-6); align-items: stretch; }
.hero__text { display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; padding: var(--space-4) 0; }
.hero__title { font-size: var(--text-3xl); font-weight: var(--weight-heavy); letter-spacing: -0.03em; }
.hero__title span { color: var(--brand-blue); }
.hero__lead { max-width: 58ch; color: var(--fg-muted); font-size: var(--text-md); line-height: var(--leading-body); }
.hero__photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; min-height: 200px; background: var(--surface-2); }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; filter: grayscale(1) contrast(1.05); }
.hero__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6) var(--space-4) var(--space-3); background: linear-gradient(transparent, var(--scrim)); color: var(--on-photo); font-size: var(--text-xs); line-height: 1.4; }
.hero__photo figcaption small { display: block; opacity: 0.75; font-size: 0.8125rem; }

.continue { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.continue__badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--brand-blue); color: var(--fg-on-brand); font-weight: var(--weight-heavy); line-height: 1; text-align: center; font-size: var(--text-lg); }
.continue__badge small { display: block; font-size: 0.8125rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); opacity: 0.85; margin-bottom: 2px; }
.continue__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.continue__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); }
.continue__title { font-weight: var(--weight-bold); color: var(--brand-ink); }
.continue__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--fg-muted); }
.continue__meta .progress { width: 160px; }
.welcome { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-5); background: var(--brand-blue-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.welcome__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--surface); color: var(--brand-blue); }
.welcome__icon svg { width: 26px; height: 26px; }
.welcome h3 { font-size: var(--text-md); }
.welcome p { font-size: var(--text-sm); color: var(--fg-muted); }

.forms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.form-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.form-panel__head { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.form-panel__thumb { width: 88px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); }
.form-panel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.form-panel__title { display: flex; align-items: center; gap: var(--space-2); }
.form-panel__title h2 { font-size: var(--text-lg); }
.form-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.form-dot--4 { background: var(--brand-blue); }
.form-dot--5 { background: var(--brand-red); }
.form-panel__meta { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 2px; }
.form-panel__evidence { display: flex; gap: 3px; margin-top: var(--space-2); }
.form-panel__evidence span { width: 14px; height: 6px; border-radius: 2px; background: var(--surface-3); }
.form-panel__evidence span.on { background: var(--status-strong); }
.form-panel__evidence span.ret { background: var(--status-retained); }
.bab-list { list-style: none; margin: 0; padding: var(--space-2); }
.bab-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 16px; gap: var(--space-3); align-items: center;
  width: 100%; padding: 10px var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer;
}
@media (hover: hover) {
  .bab-row:hover { background: var(--surface-2); }
  .bab-row:hover .bab-row__chev { color: var(--brand-blue); transform: translateX(2px); }
}
.bab-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--fg-muted); font-size: var(--text-sm); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; }
.bab-row__name { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg); line-height: var(--leading-snug); }
.bab-row__sub { display: block; font-size: var(--text-xs); color: var(--fg-subtle); font-weight: var(--weight-regular); }
.bab-row__chev { width: 16px; height: 16px; color: var(--fg-subtle); transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.bab-row.is-refresh .bab-num { background: var(--status-refresh-soft); color: var(--status-refresh); }
.home-note { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); font-size: var(--text-xs); color: var(--fg-muted); }
.home-note svg { width: 16px; height: 16px; color: var(--brand-blue); flex: none; }

/* ---- Placeholder page ---------------------------------------------------- */
.placeholder { margin: var(--space-12) auto; max-width: 560px; }

/* ---- Design system page -------------------------------------------------------- */
.ds { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8); max-width: var(--canvas-w); margin-inline: auto; }
.ds__index { position: sticky; top: 72px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); max-height: calc(100vh - 88px); overflow-y: auto; }
.ds__index a { color: var(--fg-muted); text-decoration: none; padding: 5px 10px; border-radius: var(--radius-sm); }
@media (hover: hover) { .ds__index a:hover { background: var(--surface); color: var(--brand-blue); } }
.ds__main { display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; }
.ds__head { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.ds__head h1 { font-size: var(--text-2xl); font-weight: var(--weight-heavy); }
.ds-sec { display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: 64px; }
.ds-sec > header { display: flex; flex-direction: column; gap: 4px; }
.ds-sec h2 { font-size: var(--text-lg); font-weight: var(--weight-heavy); }
.ds-sec > header p { font-size: var(--text-sm); color: var(--fg-muted); max-width: 72ch; }
.ds-board { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-5); }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.ds-grid { display: grid; gap: var(--space-5); }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-cap { font-size: var(--text-xs); color: var(--fg-subtle); font-family: var(--font-mono); }
.ds-item { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.swatch { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.swatch__chip { height: 52px; border-bottom: 1px solid var(--line); }
.swatch__meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.swatch__name { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg); }
.swatch__val { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg-subtle); }
.swatch__use { font-size: 0.8125rem; color: var(--fg-muted); }
.type-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.type-row:last-child { border-bottom: 0; }
.scale-row { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }
.scale-bar { height: 12px; background: var(--brand-blue); border-radius: 2px; }
.radius-box { width: 64px; height: 64px; background: var(--brand-blue-soft); border: 1.5px solid var(--brand-blue); }
.frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.frame--sidebar { height: 560px; width: 248px; }
.frame--sidebar .sidebar { position: static; height: 100%; }
.dont { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--text-sm); }
.dont strong { color: var(--incorrect); }

/* ======================= Stage 2 components ============================= */
.page--wide { max-width: calc(var(--content-max) + 2 * var(--space-8)); }
.page-skel { display: flex; flex-direction: column; gap: var(--space-5); }

/* Breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.crumbs__sep { width: 14px; height: 14px; color: var(--fg-subtle); }
.crumbs button { border: 0; background: none; padding: 2px 4px; border-radius: var(--radius-xs); color: var(--fg-muted); cursor: pointer; font-size: inherit; }
@media (hover: hover) { .crumbs button:hover { color: var(--brand-blue); background: var(--brand-blue-soft); } }
.crumbs [aria-current="page"] { color: var(--fg); font-weight: var(--weight-semi); padding: 2px 4px; }

/* Session header */
.session-head { display: flex; flex-direction: column; gap: var(--space-3); }
.session-head__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.session-head__right { display: flex; align-items: center; gap: var(--space-3); }
.session-head__progress { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--fg-muted); }

/* Tabs */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-4); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg-muted); }
@media (hover: hover) { .tab:hover:not([disabled]) { color: var(--fg); } }
.tab.is-active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
.tab[disabled] { cursor: not-allowed; color: var(--locked); }

/* Practice set rows */
.sets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.set-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 220px 128px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.set-row:first-child { border-top: 0; }
.set-row .btn { justify-self: end; }
.set-row__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--fg-muted); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; }
.set-row--progress .set-row__num { background: var(--brand-blue); color: var(--fg-on-brand); }
.set-row--done .set-row__num { background: var(--correct-soft); color: var(--correct); }
.set-row__body { display: flex; flex-direction: column; min-width: 0; }
.set-row__title { font-weight: var(--weight-bold); color: var(--brand-ink); font-size: var(--text-sm); }
.set-row__meta { font-size: var(--text-xs); color: var(--fg-subtle); }
.set-row__progress { display: grid; grid-template-columns: 1fr 40px; gap: var(--space-2); align-items: center; font-size: var(--text-xs); color: var(--fg-muted); text-align: right; }

/* Set map (1–10, later 1–40) */
.setmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.setmap--lg { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.setmap__cell { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; aspect-ratio: 1; max-width: 100%; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--surface); color: var(--fg-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); cursor: default; }
button.setmap__cell[tabindex="0"] { cursor: pointer; }
.setmap__cell svg { width: 11px; height: 11px; }
.setmap--lg .setmap__cell { font-size: var(--text-sm); }
.setmap__cell.is-done { background: var(--surface-3); border-color: var(--surface-3); color: var(--fg); }
.setmap__cell.is-now { border-color: var(--brand-blue); color: var(--brand-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); }
.setmap__cell.is-ok { background: var(--correct-soft); border-color: var(--correct-line); color: var(--correct); }
.setmap__cell.is-miss { background: var(--incorrect-soft); border-color: var(--incorrect-line); color: var(--incorrect); }
.setmap-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--fg-muted); }
.setmap-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.setmap__cell--key { width: 16px; height: 16px; aspect-ratio: auto; border-radius: 4px; }
.setmap__cell--key svg { width: 9px; height: 9px; }

/* Facts */
.facts { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-base); line-height: var(--leading-body); max-width: 72ch; }
.factlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.factlist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.factlist li > svg { width: 18px; height: 18px; color: var(--warning); margin-top: 2px; }
.factlist li > div { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.factlist p { font-size: var(--text-sm); font-weight: var(--weight-semi); }

/* Feedback extras */
.fb__toast { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-6); background: var(--info-soft); color: var(--brand-blue); font-size: var(--text-sm); font-weight: var(--weight-semi); border-bottom: 1px solid var(--line); }
.fb__toast svg { width: 16px; height: 16px; }
.fb__ref { display: flex; flex-direction: column; gap: 4px; }
.fb__ref-label { font-size: 0.8125rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); }
.p2fb__answer { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.p2fb__answer p { font-family: var(--font-exam); font-size: var(--text-base); white-space: pre-line; max-width: 80ch; }

/* Callout */
.callout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.callout__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--info-soft); color: var(--brand-blue); }
.callout__icon svg { width: 20px; height: 20px; }
.callout__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.callout__body h3 { font-size: var(--text-md); }
.callout__body p { font-size: var(--text-sm); color: var(--fg-muted); max-width: 70ch; }
.callout--warning { background: var(--warning-soft); border-color: var(--warning-line); }
.callout--warning .callout__icon { background: var(--surface); color: var(--warning); }
.callout--recovery { background: var(--status-refresh-soft); border-color: var(--line); }
.callout--recovery .callout__icon { background: var(--surface); color: var(--status-refresh); }
.callout__action { align-self: center; }

/* Stimulus */
.stimulus { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-2); }
.stimulus__fig { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-4); align-items: end; }
.stimulus__fig figcaption { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--fg-muted); }
.stimulus__fig figcaption strong { color: var(--fg); font-size: var(--text-sm); }
.port { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }

/* Question parts */
.qpart { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: calc(68px + var(--space-6)); }
.qpart__stem { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-2); align-items: baseline; }
.qpart__label { font-family: var(--font-exam); font-weight: var(--weight-bold); color: var(--brand-ink); }

/* Bab list rows */
.bablist { list-style: none; margin: 0; padding: var(--space-2); }
.bablist li + li { border-top: 1px solid var(--line); }
.bablist-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 170px 176px 16px; gap: var(--space-4); align-items: center; width: 100%; padding: var(--space-4) var(--space-3); border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: var(--radius-md); }
@media (hover: hover) {
  .bablist-row:hover { background: var(--surface-2); }
  .bablist-row:hover .bab-row__chev { color: var(--brand-blue); transform: translateX(2px); }
}
.bablist-row .status { justify-self: start; }
.bablist-row__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--brand-ink); font-weight: var(--weight-heavy); font-size: var(--text-lg); line-height: 1; text-align: center; }
.bablist-row__num small { display: block; font-size: 0.8125rem; letter-spacing: var(--tracking-label); color: var(--fg-subtle); margin-bottom: 2px; }
.bablist-row.is-refresh .bablist-row__num { background: var(--status-refresh-soft); color: var(--status-refresh); }
.bablist-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bablist-row__name { font-weight: var(--weight-bold); color: var(--brand-ink); }
.bablist-row__meta { font-size: var(--text-xs); color: var(--fg-subtle); }
.bablist-row__meta .dot { margin: 0 6px; }
.bablist-row__note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--brand-blue); font-weight: var(--weight-semi); }
.bablist-row__note svg { width: 13px; height: 13px; }
.bablist-row__note.is-refresh { color: var(--status-refresh); }
.bablist-row__sets { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); color: var(--fg-muted); }
.bablist-row__pips { display: flex; gap: 3px; }
.bablist-row__pips span { flex: 1; height: 6px; border-radius: 2px; background: var(--surface-3); }
.bablist-row__pips span.on { background: var(--brand-blue); }
.bablist-row__pips span.half { background: linear-gradient(90deg, var(--brand-blue) 50%, var(--surface-3) 50%); }

.legend { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.legend__item { display: flex; flex-direction: column; gap: 4px; }
.legend dd { margin: 0; font-size: var(--text-xs); color: var(--fg-muted); }

/* Two-column page layout: main + side rail */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.rail { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: calc(var(--topbar-h) + var(--space-4)); }
.rail-card { padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); }
.rail-card h3 { font-size: var(--text-sm); font-weight: var(--weight-heavy); }
.rail-card p { font-size: var(--text-xs); color: var(--fg-muted); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.panel__head h2 { font-size: var(--text-md); font-weight: var(--weight-heavy); }
.panel__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* Page heading */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.page-head h1 { font-size: var(--text-xl); font-weight: var(--weight-heavy); }
.page-head p { color: var(--fg-muted); font-size: var(--text-sm); max-width: 64ch; margin-top: 4px; }
.count-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Bab page header */
.bab-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.bab-hero__text { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; }
.bab-hero__eyebrow { display: flex; align-items: center; gap: var(--space-2); }
.bab-hero h1 { font-size: var(--text-2xl); font-weight: var(--weight-heavy); letter-spacing: -0.02em; }
.bab-hero__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-muted); }
.bab-hero__photo { position: relative; margin: 0; min-height: 190px; background: var(--surface-2); }
.bab-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bab-hero__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-5) var(--space-3) var(--space-2); background: linear-gradient(transparent, var(--scrim)); color: var(--on-photo); font-size: 0.8125rem; line-height: 1.35; }
.subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.subs li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-2); font-size: var(--text-xs); }
.subs__no { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--brand-blue); }
.subs__title { color: var(--fg); font-weight: var(--weight-semi); line-height: 1.35; }
.subs__page { display: block; color: var(--fg-subtle); font-family: var(--font-mono); }

/* Summary */
.score-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-6); }
.score-hero h1 { font-size: var(--text-xl); font-weight: var(--weight-heavy); }
.score-hero__line { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.p2table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.p2table th { text-align: left; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
.p2table td { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); vertical-align: middle; }
.p2table tr:last-child td { border-bottom: 0; }
.content-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-semi); }
.content-tag svg { width: 15px; height: 15px; }
.content-tag--all, .content-tag--most { color: var(--correct); }
.content-tag--some { color: var(--warning); }
.content-tag--none { color: var(--fg-subtle); }
.content-tag--unsure { color: var(--warning); }

/* Recovery */
.tries { display: flex; gap: 6px; }
.tries span { width: 28px; height: 8px; border-radius: 3px; background: var(--surface-3); }
.tries span.miss { background: var(--incorrect); }
.tries span.retry { background: var(--status-refresh); }
.review-card { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.review-card__main { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.review-card__side { padding: var(--space-6); background: var(--surface-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); }
.big-ref { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); border: 1.5px solid var(--brand-blue); }
.big-ref__where { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--brand-blue); }
.big-ref__title { font-weight: var(--weight-bold); color: var(--brand-ink); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.checklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2); }
.checklist svg { width: 16px; height: 16px; color: var(--brand-blue); margin-top: 3px; }

/* ======================= Stage 3 components ============================= */
/* Set map extra states */
.setmap__cell.is-flag { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.setmap__cell.is-blank { border-style: dashed; border-color: var(--line-strong); color: var(--fg-subtle); background: var(--surface); }
.setmap__cell.is-answered { background: var(--brand-blue-soft); border-color: var(--brand-blue-soft); color: var(--brand-blue); }

/* Checklist rows */
.checklist-rows { list-style: none; margin: 0; padding: var(--space-2); display: flex; flex-direction: column; }
.check-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px var(--space-3); border-radius: var(--radius-md); cursor: pointer; }
@media (hover: hover) { .check-row:hover { background: var(--surface-2); } }
.check-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-row__box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: var(--surface); color: transparent; }
.check-row__box svg { width: 14px; height: 14px; }
.check-row.is-checked .check-row__box { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--fg-on-brand); }
.check-row input:focus-visible + .check-row__box { box-shadow: var(--focus-ring); }
.check-row__main { display: flex; flex-direction: column; min-width: 0; }
.check-row__title { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg); }
.check-row__meta { font-size: var(--text-xs); color: var(--fg-subtle); }

/* Focus shell */
.focus { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.focus__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-4); height: 68px; padding: 0 var(--space-8); background: var(--surface); border-bottom: 1px solid var(--line); }
.focus__divider { width: 1px; height: 28px; background: var(--line); }
.focus__title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.focus__title strong { color: var(--brand-ink); font-size: var(--text-base); }
.focus__title span { color: var(--fg-muted); font-size: var(--text-xs); }
.focus__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.focus__body { padding: var(--space-6) var(--space-8) var(--space-12); display: flex; flex-direction: column; gap: var(--space-5); max-width: calc(var(--content-max) + 2 * var(--space-8) + 80px); width: 100%; margin-inline: auto; }
.focus-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--fg-muted); padding: 6px 10px; border-radius: var(--radius-pill); background: var(--surface-2); }
.focus-note svg { width: 14px; height: 14px; }
.nav-row { display: flex; align-items: center; gap: var(--space-2); }
.nav-row .spacer { flex: 1; }
.btn--secondary[aria-pressed="true"] { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }

/* Overlay (time up) */
.overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-ink) 45%, transparent); }
.overlay__panel { width: min(480px, 90%); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); text-align: center; align-items: center; }
.overlay__panel h2 { font-size: var(--text-xl); }
.overlay__panel p { color: var(--fg-muted); font-size: var(--text-sm); }
.overlay__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--incorrect-soft); color: var(--incorrect); }
.overlay__icon svg { width: 28px; height: 28px; }

/* Paper card */
.paper-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.paper-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.paper-card__head { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); border-bottom: 1px solid var(--line); }
.paper-card__code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-subtle); }
.paper-card__head h2 { font-size: var(--text-xl); font-weight: var(--weight-heavy); }
.paper-card__head p { font-size: var(--text-sm); color: var(--fg-muted); }
.paper-card__stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.paper-card__stats div { padding: var(--space-4) var(--space-6); border-right: 1px solid var(--line); }
.paper-card__stats div:last-child { border-right: 0; }
.paper-card__stats dt { font-size: 0.8125rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); }
.paper-card__stats dd { margin: 4px 0 0; font-size: var(--text-lg); font-weight: var(--weight-heavy); color: var(--brand-ink); }
.paper-card__foot { margin-top: auto; padding: var(--space-5) var(--space-6); border-top: 1px solid var(--line); background: var(--surface-2); }
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); }
.rules li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); }
.rules svg { width: 18px; height: 18px; color: var(--brand-blue); margin-top: 2px; }
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.history li:first-child { border-top: 0; }

/* Paper 2 chooser */
.bchoice { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bchoice li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.bchoice li.is-chosen { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.bchoice__n { font-family: var(--font-exam); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--brand-ink); }
.bchoice__stem { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bchoice__stem small { font-size: var(--text-xs); color: var(--fg-subtle); }

/* Results */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__label { font-size: 0.8125rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); }
.stat__value { font-size: var(--text-xl); font-weight: var(--weight-heavy); color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.stat__value small { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg-muted); }
.chap-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.chap-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 190px 180px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.chap-row:first-child { border-top: 0; }
.chap-row__id { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-muted); }
.chap-row__name { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.chap-row__bar { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: center; font-size: var(--text-xs); color: var(--fg-muted); }
.tag-strength { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--correct); }
.tag-needs { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--warning); }
.tag-strength svg, .tag-needs svg { width: 14px; height: 14px; }

/* Time chart */
.timebars { display: flex; flex-direction: column; gap: var(--space-3); }
.timebars__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-size: var(--text-xs); color: var(--fg-muted); }
.timebars__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.timebars__legend svg { width: 13px; height: 13px; color: var(--warning); }
.timebars__legend .btn { margin-left: auto; }
.swatch-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.swatch-line { width: 18px; border-top: 2px dashed var(--fg-muted); display: inline-block; }
.timebars__plot { position: relative; }
.timebars__plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.timebars__plot g:focus { outline: none; }
.timebars__tip { position: absolute; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--brand-ink); color: var(--surface); font-size: var(--text-xs); white-space: nowrap; box-shadow: var(--shadow-md); }
.timebars__table { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.timebars__note { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--fg-muted); }
.timebars__note svg { width: 16px; height: 16px; color: var(--warning); }
.frame .focus { min-height: 0; }
.frame .focus__bar { position: static; }
.frame .focus__body { display: none; }

/* ======================= Stage 4 components ============================= */
/* Account shell */
.acct { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.acct__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-8); height: 72px; padding: 0 var(--space-10); background: var(--surface); border-bottom: 1px solid var(--line); }
.acct__logo { border: 0; background: none; padding: 0; cursor: pointer; }
.acct__nav { display: flex; gap: var(--space-1); }
.acct__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 72px; padding: 0 var(--space-3); border: 0; background: none; cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg-muted); }
@media (hover: hover) { .acct__link:hover { color: var(--fg); } }
.acct__link.is-active { color: var(--brand-blue); }
.acct__link.is-active::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand-blue); }
.acct__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.acct__right .acct__link { height: auto; }
.acct__right .acct__link.is-active::after { display: none; }
.field > .seg { align-self: flex-start; }
.acct__body { width: 100%; max-width: 1200px; margin-inline: auto; padding: var(--space-10) var(--space-10) var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.acct__body--narrow { max-width: 980px; }

/* Fields */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-5); }
.form-grid .span-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg); }
.field__hint { font-size: var(--text-xs); color: var(--fg-subtle); }
.field__error { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--incorrect); }
.field__error svg { width: 14px; height: 14px; flex: none; }
.input { width: 100%; height: 44px; padding: 0 var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--fg); font: inherit; font-size: var(--text-base); }
.input:focus { outline: none; border-color: var(--brand-blue); box-shadow: var(--focus-ring); }
.input::placeholder { color: var(--fg-subtle); }
.has-error .input { border-color: var(--incorrect); background: var(--incorrect-soft); }
.select { position: relative; }
.select select { appearance: none; padding-right: 36px; cursor: pointer; }
.select svg { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%) rotate(90deg); color: var(--fg-subtle); pointer-events: none; }
.cbox { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--text-sm); cursor: pointer; }
.cbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cbox input:checked + .check-row__box { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--fg-on-brand); }
.cbox input:focus-visible + .check-row__box { box-shadow: var(--focus-ring); }
.form-alert { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--incorrect-soft); border: 1px solid var(--incorrect-line); color: var(--incorrect); font-size: var(--text-sm); font-weight: var(--weight-semi); }
.form-alert svg { width: 18px; height: 18px; flex: none; }
.guardian-box { padding: var(--space-4); border-radius: var(--radius-md); background: var(--info-soft); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); }

/* Radio cards */
.rcards { display: grid; gap: var(--space-3); }
.rcards--2 { grid-template-columns: 1fr 1fr; }
.rcards--4 { grid-template-columns: repeat(4, 1fr); }
.rcard { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4); border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
@media (hover: hover) { .rcard:hover { border-color: var(--line-strong); } }
.rcard input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rcard__dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); }
.rcard.is-on { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.rcard.is-on .rcard__dot { border: 5px solid var(--brand-blue); }
.rcard input:focus-visible ~ .rcard__dot { box-shadow: var(--focus-ring); }
.rcard__icon { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--brand-ink); font-size: var(--text-xs); font-weight: var(--weight-heavy); }
.rcard__icon svg { width: 18px; height: 18px; }
.rcard__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rcard__title { font-weight: var(--weight-bold); color: var(--brand-ink); font-size: var(--text-sm); }
.rcard__desc { font-size: var(--text-xs); color: var(--fg-muted); }
.rcard__right { font-size: var(--text-xs); color: var(--fg-subtle); }

/* Stepper */
.stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); }
.stepper__item { flex: 1; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--fg-subtle); }
.stepper__item::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--line); }
.stepper__item:last-child::after { display: none; }
.stepper__dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); flex: none; }
.stepper__dot svg { width: 14px; height: 14px; }
.stepper__item.is-now { color: var(--brand-blue); }
.stepper__item.is-now .stepper__dot { border-color: var(--brand-blue); background: var(--brand-blue); color: var(--fg-on-brand); }
.stepper__item.is-done { color: var(--fg); }
.stepper__item.is-done .stepper__dot { border-color: var(--correct); background: var(--correct); color: var(--fg-on-brand); }
.stepper__item.is-done::after { background: var(--correct); }

/* Plan card */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); max-width: 860px; }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-xl); }
.plan.is-on { border-color: var(--brand-blue); box-shadow: var(--shadow-md); }
.plan h2 { font-size: var(--text-lg); font-weight: var(--weight-heavy); }
.plan__badge { position: absolute; top: -12px; right: var(--space-6); padding: 3px 10px; border-radius: var(--radius-pill); background: var(--brand-red); color: var(--fg-on-brand); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.plan__price { display: flex; align-items: baseline; gap: 6px; color: var(--fg-muted); font-size: var(--text-sm); }
.plan__price .num { font-size: var(--text-3xl); font-weight: var(--weight-heavy); color: var(--brand-ink); letter-spacing: -0.02em; }
.plan__sample { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.plan__sample svg { width: 13px; height: 13px; }
.plan__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); flex: 1; }
.plan__feats li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2); }
.plan__feats svg { width: 16px; height: 16px; color: var(--correct); margin-top: 3px; }

/* Stat tile */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stat-tile { display: flex; flex-direction: column; gap: 4px; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.stat-tile__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--brand-blue-soft); color: var(--brand-blue); margin-bottom: var(--space-2); }
.stat-tile__icon svg { width: 18px; height: 18px; }
.stat-tile__label { font-size: var(--text-xs); color: var(--fg-muted); font-weight: var(--weight-semi); }
.stat-tile__value { font-size: var(--text-2xl); font-weight: var(--weight-heavy); color: var(--brand-ink); line-height: 1.1; }
.stat-tile__value small { font-size: var(--text-sm); color: var(--fg-subtle); font-weight: var(--weight-semi); }
.stat-tile__sub { font-size: var(--text-xs); color: var(--fg-subtle); }

/* Status grid */
.sgrid { display: flex; flex-direction: column; gap: var(--space-3); }
.sgrid__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.sgrid__form { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-muted); }
.sgrid__cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.sgrid__cell { display: flex; align-items: center; justify-content: center; gap: 4px; height: 40px; border-radius: var(--radius-sm); border: 0; cursor: pointer; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.sgrid__cell svg { width: 11px; height: 11px; }
.sgrid__cell--notstarted { background: var(--status-notstarted-soft); color: var(--status-notstarted); }
.sgrid__cell--developing { background: var(--status-developing-soft); color: var(--status-developing); }
.sgrid__cell--strong { background: var(--status-strong-soft); color: var(--status-strong); }
.sgrid__cell--retained { background: var(--status-retained-soft); color: var(--status-retained); }
.sgrid__cell--refresh { background: var(--status-refresh-soft); color: var(--status-refresh); }

/* Accuracy bars */
.abars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.abars__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 44px; gap: var(--space-3); align-items: center; width: 100%; padding: 5px 6px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; }
@media (hover: hover) { .abars__row:hover { background: var(--surface-2); } }
.abars__id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); text-align: left; }
.abars__track { position: relative; height: 12px; border-radius: 3px; background: var(--surface-2); }
.abars__fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--brand-blue); }
.abars__val { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg); text-align: right; }

/* Search results */
.search-big { display: flex; align-items: center; gap: var(--space-3); height: 56px; padding: 0 var(--space-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); }
.search-big:focus-within { border-color: var(--brand-blue); box-shadow: var(--focus-ring); }
.search-big svg { width: 20px; height: 20px; color: var(--fg-subtle); }
.search-big input { flex: 1; border: 0; background: transparent; font: inherit; font-size: var(--text-md); color: var(--fg); outline: none; }
.sresults { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sresult { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-5); border-top: 1px solid var(--line); }
.sresult:first-child { border-top: 0; }
.sresult__main { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.sresult__where { font-size: var(--text-xs); color: var(--fg-subtle); font-weight: var(--weight-semi); }
.sresult h3 { font-size: var(--text-md); }
.sresult p { font-size: var(--text-sm); color: var(--fg-muted); }
mark { background: var(--warning-soft); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Collapsible translation */
.collapse { display: flex; flex-direction: column; gap: 6px; }
.collapse__body { position: relative; max-height: 4.8em; overflow: hidden; line-height: var(--leading-body); }
.collapse__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(transparent, var(--surface)); }
.collapse.is-open .collapse__body { max-height: none; }
.collapse.is-open .collapse__body::after { display: none; }
.collapse__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; color: var(--brand-blue); font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.collapse__btn svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform var(--dur) var(--ease); }
.collapse.is-open .collapse__btn svg { transform: rotate(-90deg); }

/* Timeline */
.tline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tline__item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-5); }
.tline__item:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.tline__item.is-done:not(:last-child)::before { background: var(--correct); }
.tline__dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); }
.tline__dot svg { width: 14px; height: 14px; }
.tline__item.is-done .tline__dot { background: var(--correct); border-color: var(--correct); color: var(--fg-on-brand); }
.tline__item.is-now .tline__dot { border-color: var(--brand-blue); }
.tline__text { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; font-size: var(--text-sm); }
.tline__text span { font-size: var(--text-xs); color: var(--fg-muted); }
.tline__item.is-todo .tline__text strong { color: var(--fg-subtle); }

/* Landing */
.land-hero { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: var(--space-16); align-items: center; }
.land-hero h1 { font-size: 3.5rem; font-weight: var(--weight-heavy); letter-spacing: -0.035em; line-height: 1.02; }
.land-hero h1 span { display: block; color: var(--brand-blue); }
.land-hero__lead { font-size: var(--text-md); color: var(--fg-muted); max-width: 46ch; }
.land-visual { position: relative; }
.land-visual__photo { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; background: var(--surface-2); }
.land-visual__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 30%; filter: grayscale(1) contrast(1.05); display: block; }
.land-visual__photo figcaption { position: absolute; left: 0; right: 0; top: 0; padding: var(--space-3) var(--space-4) var(--space-6); background: linear-gradient(var(--scrim), transparent); color: var(--on-photo); font-size: 0.8125rem; }
.land-card { position: absolute; left: -28px; bottom: -28px; width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.land-card .fb__verdict { padding: var(--space-3) var(--space-4); }
.land-card .fb__verdict h3 { font-size: var(--text-sm); }
.land-card .fb__verdict svg { width: 22px; height: 22px; }
.land-card__body { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 8px; font-size: var(--text-xs); }
.land-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.land-step { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-2); }
.land-step__n { font-family: var(--font-exam); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--brand-red); line-height: 1; }
.land-step h3 { font-size: var(--text-md); }
.land-step p { font-size: var(--text-sm); color: var(--fg-muted); }
.land-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.land-feat { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); font-weight: var(--weight-semi); }
.land-feat svg { width: 20px; height: 20px; color: var(--brand-blue); flex: none; }
.land-foot { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--fg-muted); }

/* Auth card */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); align-items: start; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.auth-card h1 { font-size: var(--text-xl); font-weight: var(--weight-heavy); }
.auth-card--narrow { max-width: 460px; width: 100%; margin-inline: auto; }
.center-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.center-state__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; }
.center-state__icon svg { width: 30px; height: 30px; }
.center-state__icon--ok { background: var(--correct-soft); color: var(--correct); }
.center-state__icon--bad { background: var(--incorrect-soft); color: var(--incorrect); }
.center-state__icon--wait { background: var(--brand-blue-soft); color: var(--brand-blue); }
.center-state p { color: var(--fg-muted); font-size: var(--text-sm); max-width: 44ch; }
.email-preview { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.email-preview__head { padding: var(--space-3) var(--space-4); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--text-xs); color: var(--fg-muted); display: flex; flex-direction: column; gap: 2px; }
.email-preview__head strong { color: var(--fg); font-size: var(--text-sm); }
.email-preview__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); }
.summary-list { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.summary-list div { display: flex; justify-content: space-between; gap: var(--space-3); }
.summary-list dt { color: var(--fg-muted); }
.summary-list dd { margin: 0; font-weight: var(--weight-semi); text-align: right; }
.summary-list .total { padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-md); }
.summary-list .total dd { font-weight: var(--weight-heavy); color: var(--brand-ink); }

/* Subject card (Your Contents) */
.subject { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; max-width: 900px; }
.subject__photo { margin: 0; position: relative; min-height: 150px; background: var(--surface-2); }
.subject__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.subject__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); justify-content: center; }
.subject__body h2 { font-size: var(--text-xl); font-weight: var(--weight-heavy); }
.subject__cta { padding: var(--space-6); display: flex; align-items: center; }
.soon-subjects { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.soon-subjects span { padding: 8px 14px; border-radius: var(--radius-md); border: 1px dashed var(--line-strong); color: var(--fg-subtle); font-size: var(--text-sm); }

/* Settings */
.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.settings__nav { position: sticky; top: calc(72px + var(--space-5)); display: flex; flex-direction: column; gap: 2px; }
.settings__nav a { padding: 8px 12px; border-radius: var(--radius-md); color: var(--fg-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-semi); }
.settings__nav a.is-active { background: var(--brand-blue-soft); color: var(--brand-blue); }
.settings__main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.settings-sec { scroll-margin-top: calc(72px + var(--space-5)); }
.avatar--lg { width: 72px; height: 72px; font-size: var(--text-lg); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

/* Onboarding */
.onb { max-width: 820px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-6); }
.onb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.onb-card h1 { font-size: var(--text-xl); font-weight: var(--weight-heavy); }
.onb-foot { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.onb-foot .spacer { flex: 1; }
.form-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lang-sample { font-size: var(--text-sm); color: var(--fg); font-weight: var(--weight-regular); }

/* Soalan */
.ask-box { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ask-box__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; }
.ask-box textarea { width: 100%; min-height: 64px; resize: vertical; padding: var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--fg); font: inherit; font-size: var(--text-md); }
.ask-box textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: var(--focus-ring); }
.answer-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.answer-card__q { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface-2); font-family: var(--font-exam); font-size: var(--text-md); display: flex; gap: var(--space-3); align-items: baseline; }
.answer-card__q svg { width: 18px; height: 18px; color: var(--brand-blue); flex: none; align-self: center; }
.answer-card__sec { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.answer-card__sec + .answer-card__sec { border-top: 1px solid var(--line); }
.answer-card__bm { font-size: var(--text-md); line-height: var(--leading-body); max-width: 70ch; }
.related { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--space-5); }
.related__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.related__list li { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-left: var(--space-4); border-left: 3px solid var(--brand-blue-soft); font-size: var(--text-sm); }
.related__photo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.related__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); display: block; }
.related__photo figcaption { font-size: 0.8125rem; color: var(--fg-subtle); line-height: 1.35; }
.hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hist-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.hist-item:first-child { border-top: 0; }
.hist-item > svg { width: 18px; height: 18px; color: var(--fg-subtle); }
.hist-item__q { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.hist-item__meta { display: block; font-size: var(--text-xs); color: var(--fg-subtle); font-weight: var(--weight-regular); font-family: var(--font-mono); }
.hist-group { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); padding: var(--space-4) var(--space-5) var(--space-2); background: var(--surface-2); border-top: 1px solid var(--line); }
.rail-q { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: var(--text-sm); text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; color: var(--fg); }
@media (hover: hover) { .rail-q:hover { color: var(--brand-blue); } }

/* Overview */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.ov-col { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.recent { list-style: none; margin: 0; padding: 0; }
.recent li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); font-size: var(--text-sm); }
.recent li:first-child { border-top: 0; }
.recent__name { font-weight: var(--weight-semi); }
.recent__date { display: block; font-size: var(--text-xs); color: var(--fg-subtle); font-weight: var(--weight-regular); }
.next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.next-list li { border-top: 1px solid var(--line); }
.next-list li:first-child { border-top: 0; }
.next-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: var(--space-3); align-items: center; width: 100%; padding: var(--space-3) var(--space-5); border: 0; background: transparent; text-align: left; cursor: pointer; }
@media (hover: hover) { .next-item:hover { background: var(--surface-2); } }
.next-item__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); }
.next-item__icon svg { width: 18px; height: 18px; }
.next-item strong { display: block; font-size: var(--text-sm); color: var(--brand-ink); }
.next-item span.sub { font-size: var(--text-xs); color: var(--fg-muted); }
.goal-card { display: flex; flex-direction: column; gap: var(--space-3); }
.goal-card__name { font-weight: var(--weight-bold); color: var(--brand-ink); }
.pips10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.pips10 span { height: 10px; border-radius: 3px; background: var(--surface-3); }
.pips10 span.on { background: var(--status-strong); }
.pips10 span.ret { background: var(--status-retained); }
.plan-teaser { background: var(--surface-2); border-style: dashed; }

.frame .acct { min-height: 0; }
.frame .acct__bar { position: static; }
.frame .acct__body { display: none; }

/* Round 1: password eye, phone prefix */
.input-wrap { position: relative; display: flex; align-items: center; }
.input--icon { padding-right: 46px; }
.input-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-muted); cursor: pointer; }
@media (hover: hover) { .input-eye:hover { background: var(--surface-2); color: var(--fg); } }
.input-eye svg { width: 18px; height: 18px; }
.input-prefix { position: absolute; left: 12px; font-size: var(--text-base); color: var(--fg-muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.input--prefix { padding-left: 50px; }
.seg button[disabled] { color: var(--fg-subtle); cursor: not-allowed; }
.seg__soon { margin-left: 6px; font-size: 0.8125rem; font-weight: var(--weight-semi); color: var(--fg-subtle); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0 6px; }

/* Round 2: why each option is right or wrong */
.why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); max-width: 80ch; }
.why__item { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.why__item.is-right { border-color: var(--correct-line); background: var(--correct-soft); }
.why__item.is-mine { border-color: var(--incorrect-line); background: var(--incorrect-soft); }
.why__key { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-weight: var(--weight-bold); color: var(--fg); background: var(--surface); }
.why__item.is-right .why__key { border-color: var(--correct); color: var(--correct); }
.why__item.is-mine .why__key { border-color: var(--incorrect); color: var(--incorrect); }
.why__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.why__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.why__opt { font-family: var(--font-exam); font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--fg); }
.why__tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap; }
.why__tag svg { width: 16px; height: 16px; }
.why__tag--right { color: var(--correct); }
.why__tag--mine { color: var(--incorrect); }
.why__tag--wrong { color: var(--fg-muted); }
.why__bm { font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg); }
.why__tr { font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg-muted); padding-top: var(--space-2); border-top: 1px dashed var(--line); }

/* Round 2: Malay exam text one step larger so it reads as clearly as the translation */
.opt__text, .why__opt, .p2fb__answer p { font-size: var(--text-md); }

/* Round 3: plan groups, locked-by-plan notices */
.plan-groups { display: flex; flex-direction: column; gap: var(--space-8); }
.plan-group { display: flex; flex-direction: column; gap: var(--space-4); }
.plan-group__head h2 { font-size: var(--text-lg); }
.plan-group__head p { color: var(--fg-muted); font-size: var(--text-sm); margin-top: 2px; }
.plan__missing { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.plan__missing-label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.plan__feats--no { flex: none; color: var(--fg-muted); }
.plan__feats--no svg { color: var(--fg-subtle); }
.locked { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-2); }
.locked__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--fg-muted); }
.locked__icon svg { width: 22px; height: 22px; }
.locked__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.locked__text h3 { font-size: var(--text-base); }
.locked__text p { font-size: var(--text-sm); color: var(--fg-muted); }
.locked--compact { margin: var(--space-4); }
.form-panel.is-locked .bab-list { opacity: 0.45; pointer-events: none; filter: grayscale(0.6); }
.nav-lock { margin-left: auto; width: 15px; height: 15px; color: var(--fg-subtle); }
.plan-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--brand-blue-soft); color: var(--brand-blue); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.locked { flex-wrap: wrap; }
.locked__text { flex: 1 1 220px; }

/* Round 4: Kertas 2 paper list, submit switches, choose-3 dialog, main points */
.k2list { list-style: none; margin: 0; padding: var(--space-2) var(--space-6) var(--space-4); display: flex; flex-direction: column; }
.k2list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.k2list li:first-child { border-top: 0; }
.k2list__name { display: flex; flex-direction: column; gap: 2px; font-weight: var(--weight-semi); color: var(--fg); }
.k2list__name small { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--fg-muted); }
.tag-retake { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--status-refresh-soft); color: var(--status-refresh); font-size: var(--text-xs); font-weight: var(--weight-bold); vertical-align: middle; letter-spacing: 0; text-transform: none; }
.tag-retake svg { width: 13px; height: 13px; }
.switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background var(--dur) var(--ease); flex: none; }
.switch__dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease); }
.switch input:checked + .switch__track { background: var(--brand-blue); }
.switch input:checked + .switch__track .switch__dot { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }
.bq.is-submit { border-color: var(--brand-blue); box-shadow: 0 0 0 1px var(--brand-blue); }
.sub-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--fg-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.sub-tag.is-on { background: var(--brand-blue-soft); color: var(--brand-blue); }
.submit-count { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-bold); color: var(--correct); font-size: var(--text-sm); }
.submit-count svg { width: 18px; height: 18px; flex: none; }
.submit-count.is-warn { color: var(--warning); }
.overlay__panel--left { width: min(620px, 92%); text-align: left; align-items: stretch; }
.pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pick__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--line); border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); }
.pick__row.is-on { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.pick__row input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--brand-blue); }
.pts { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.pts + .pts { margin-top: var(--space-3); }
.pts__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.pts__head .qcard__stem { margin-top: 4px; }
.pts__head .sub-tag { margin-top: 8px; }
.pts.is-open .pts__head button[aria-expanded="true"] svg { transform: rotate(90deg); }
.pts__body { display: flex; flex-direction: column; gap: var(--space-5); padding: 0 var(--space-5) var(--space-5); border-top: 1px dashed var(--line); padding-top: var(--space-4); }
.pts__part { display: flex; flex-direction: column; gap: var(--space-2); }
.pts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pts__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); font-size: var(--text-base); line-height: var(--leading-body); }
.pts__list svg { width: 18px; height: 18px; color: var(--brand-blue); margin-top: 5px; }

/* Prototype-only: screen index */

/* Pass 2 Round P2-1 */
.btn--danger { background: var(--incorrect); color: var(--fg-on-brand); }
@media (hover: hover) { .btn--danger:hover:not([disabled]) { filter: brightness(0.92); } }
.catalogue { display: flex; flex-direction: column; gap: var(--space-5); max-width: 900px; }
.subject__cta { display: flex; flex-direction: column; gap: var(--space-2); justify-content: center; padding: var(--space-6); }
.catalogue__facts { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--space-4); font-size: var(--text-sm); color: var(--fg-muted); }
.catalogue__facts li { display: flex; gap: 8px; align-items: center; }
.catalogue__facts svg { width: 16px; height: 16px; color: var(--brand-blue); flex: none; }
.catalogue__soon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-6); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-2); }
.catalogue__soon h2 { font-size: var(--text-lg); }
.catalogue__soon-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--brand-blue); }
.catalogue__soon-icon svg { width: 24px; height: 24px; }
.upgrade { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--brand-blue-soft); border: 1px solid var(--brand-blue); }
.upgrade h2 { font-size: var(--text-lg); margin: 2px 0 4px; }
.overlay--acct { inset: 0; }
.notices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.notice { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.notice.is-unread { border-left: 4px solid var(--brand-blue); }
.notice__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--status-refresh-soft); color: var(--status-refresh); }
.notice--october .notice__icon { background: var(--warning-soft); color: var(--warning); }
.notice--announcement .notice__icon { background: var(--brand-blue-soft); color: var(--brand-blue); }
.notice__icon svg { width: 22px; height: 22px; }
.notice__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.notice__body h3 { font-size: var(--text-md); }
.notice__body p { color: var(--fg-muted); max-width: 70ch; }
.notice__meta { display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-xs); }
.notice__kind { font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.notice__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-blue); }
.world { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); align-items: start; padding: var(--space-8); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); max-width: 900px; }
.world h2 { font-size: var(--text-lg); margin-bottom: 6px; }
.world__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-blue-soft); color: var(--brand-blue); }
.world__icon svg { width: 28px; height: 28px; }

/* Notice Board redesign (reference layout, Libri colours) */
.nb-head { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); margin-bottom: var(--space-5); }
.nb-head h1 { font-size: var(--text-2xl); }
.nb-head p { color: var(--fg-muted); margin-top: 2px; }
.nb-head__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-red-soft); color: var(--brand-red); flex: none; }
.nb-head__icon svg { width: 32px; height: 32px; }
.nb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }
.nb-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.nb-tabs { display: flex; align-items: flex-end; gap: var(--space-6); border-bottom: 1px solid var(--line); }
.nb-tabs [role="tab"] { border: 0; background: none; font: inherit; font-weight: var(--weight-semi); color: var(--fg-muted); padding: var(--space-3) 2px; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.nb-tabs [role="tab"].is-on { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
.nb-tabs__n { font-size: var(--text-xs); background: var(--surface-2); color: var(--fg-muted); border-radius: 999px; padding: 0 7px; }
.nb-tabs__spacer { flex: 1; }
.nb-tabs__mark { border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--brand-blue); padding-bottom: var(--space-3); cursor: pointer; }
.nb-tabs__mark[disabled] { color: var(--fg-subtle); cursor: default; }
.nb-undo { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--brand-ink); color: var(--fg-on-brand); border-radius: var(--radius-md); font-size: var(--text-sm); }
.nb-undo button { border: 0; background: none; color: #9DB7FF; font: inherit; font-weight: var(--weight-bold); cursor: pointer; }
.nb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.nb-card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 190px; gap: var(--space-5); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.nb-card--nochap { grid-template-columns: 64px minmax(0, 1fr); }
.nb-card--study { background: #FDF1F2; border-color: #F3D3D8; }
.nb-card--upcoming { background: #FEF6E7; border-color: #F3DFB8; }
.nb-card--exam { background: #EEF3FE; border-color: #CFDCFA; }
.nb-card--recommendation { background: #EEF8F1; border-color: #CBE7D4; }
.nb-card--announcement { background: var(--surface); }
.nb-card.is-unread::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand-blue); }
.nb-card__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fff; }
.nb-card__icon svg { width: 28px; height: 28px; }
.nb-card--study .nb-card__icon { background: #E05565; }
.nb-card--upcoming .nb-card__icon { background: #C77A1C; }
.nb-card--exam .nb-card__icon { background: var(--brand-blue); }
.nb-card--recommendation .nb-card__icon { background: #22A05A; }
.nb-card--announcement .nb-card__icon { background: var(--status-refresh); }
.nb-card__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-right: var(--space-4); }
.nb-card__top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.nb-card__label { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semi); background: var(--surface); border: 1px solid currentColor; }
.nb-card__label svg { width: 14px; height: 14px; }
.nb-card--study .nb-card__label { color: #B42336; }
.nb-card--upcoming .nb-card__label { color: #9A5A0C; }
.nb-card--exam .nb-card__label { color: var(--brand-blue); }
.nb-card--recommendation .nb-card__label { color: #15803D; }
.nb-card--announcement .nb-card__label { color: var(--status-refresh); }
.nb-card__new { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--brand-blue); }
.nb-card__when { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--fg-muted); padding-right: var(--space-6); }
.nb-card__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-subtle); }
.nb-card--study .nb-card__dot { background: #E05565; }
.nb-card--upcoming .nb-card__dot { background: #E0952D; }
.nb-card--exam .nb-card__dot { background: var(--brand-blue); }
.nb-card--recommendation .nb-card__dot { background: #22A05A; }
.nb-card__body h3 { font-size: var(--text-lg); color: var(--brand-ink); }
.nb-card__body p { color: var(--fg-muted); line-height: var(--leading-body); }
.nb-card__set { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--correct); }
.nb-card__set svg { width: 16px; height: 16px; }
.nb-card__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.nb-card__actions .btn { min-width: 180px; justify-content: center; }
.nb-card__x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--fg-muted); cursor: pointer; }
@media (hover: hover) { .nb-card__x:hover { background: rgba(14, 23, 51, 0.07); color: var(--fg); } }
.nb-card__x svg { width: 18px; height: 18px; }
.nb-chapter { align-self: center; display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nb-chapter__img { position: relative; height: 92px; border-radius: var(--radius-sm); display: flex; align-items: flex-end; justify-content: space-between; padding: 8px 10px; color: #fff; overflow: hidden; }
.nb-chapter__img--4 { background: linear-gradient(135deg, var(--brand-blue), #5B82EC); }
.nb-chapter__img--5 { background: linear-gradient(135deg, var(--brand-red), #F07784); }
.nb-chapter__img svg { position: absolute; right: -8px; top: -6px; width: 72px; height: 72px; opacity: 0.22; }
.nb-chapter__img span { font-weight: var(--weight-heavy); letter-spacing: 0.04em; }
.nb-chapter__meta { margin-top: 4px; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.nb-chapter__meta--4 { color: var(--brand-blue); }
.nb-chapter__meta--5 { color: var(--brand-red); }
.nb-chapter__name { font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.35; }
.nb-side { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: calc(var(--topbar-h) + var(--space-4)); }
.nb-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.nb-box h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); }
.nb-box h2 svg { width: 22px; height: 22px; color: var(--brand-blue); }
.nb-box__note { font-size: var(--text-xs); color: var(--fg-muted); }
.nb-prog { display: grid; grid-template-columns: 96px minmax(0, 1fr) 80px; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.nb-prog .num { text-align: right; color: var(--fg-muted); }
.nb-prog__bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.nb-prog__bar span { display: block; height: 100%; border-radius: inherit; }
.nb-prog__bar--4 span { background: var(--brand-blue); }
.nb-prog__bar--5 span { background: var(--brand-red); }
.nb-up, .nb-ann { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nb-up li + li, .nb-ann li + li { border-top: 1px solid var(--line); }
.nb-up button { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) 18px; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; color: var(--fg); }
@media (hover: hover) { .nb-up button:hover strong { color: var(--brand-blue); } }
.nb-up button > svg { width: 18px; height: 18px; color: var(--fg-subtle); }
.nb-up__date { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: var(--radius-sm); background: var(--brand-red-soft); color: var(--brand-red); font-size: var(--text-xs); font-weight: var(--weight-semi); }
.nb-up__date b { font-size: var(--text-lg); line-height: 1.1; }
.nb-up__date.is-exam { background: var(--brand-blue-soft); color: var(--brand-blue); }
.nb-up__text, .nb-ann__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--text-sm); }
.nb-up__text span, .nb-ann__text span { color: var(--fg-muted); font-size: var(--text-xs); }
.nb-ann li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; }
.nb-ann__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); }
.nb-ann__icon svg { width: 20px; height: 20px; }
.nb-ann__icon--blue { background: var(--brand-blue-soft); color: var(--brand-blue); }
.nb-ann__icon--purple { background: var(--status-refresh-soft); color: var(--status-refresh); }
.nb-ann__icon--green { background: var(--correct-soft); color: var(--correct); }
.nb-ann__date { font-size: var(--text-xs); color: var(--fg-subtle); white-space: nowrap; }
/* Notice Board proportions */
.nb-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); }
.nb-tabs { gap: var(--space-5); }
.nb-tabs [role="tab"] { white-space: nowrap; }
.nb-head { justify-content: space-between; }
.nb-head > div { flex: 1; }
.nb-head__mark { flex: none; }
.nb-card { grid-template-columns: 52px minmax(0, 1fr) 168px; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-4); }
.nb-card--nochap { grid-template-columns: 52px minmax(0, 1fr); }
.nb-card__icon { width: 52px; height: 52px; }
.nb-card__icon svg { width: 24px; height: 24px; }
.nb-card__body { padding-right: 0; }
.nb-card__top { padding-right: 28px; }
.nb-card__when { padding-right: 0; white-space: nowrap; }
.nb-card__actions .btn { min-width: 0; }
.nb-chapter { margin-top: 26px; }
.nb-chapter__img { height: 76px; }
.nb-chapter__meta { white-space: nowrap; font-size: var(--text-xs); }
.nb-prog { grid-template-columns: 88px minmax(0, 1fr) 70px; }
.nb-box h2 { font-size: var(--text-md); }
.nb-prog { grid-template-columns: auto minmax(0, 1fr) auto; }
.nb-prog > span:first-child, .nb-prog .num { white-space: nowrap; }
.nb-chapter__meta { white-space: normal; }
.nb-main { gap: var(--space-3); }

/* Pass 2 Round P2-2: Past Papers */
.pp-filters { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pp-year { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg-muted); }
.pp-year select { font: inherit; font-weight: var(--weight-regular); color: var(--fg); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.pp-table td { vertical-align: middle; }
.pp-name { display: flex; align-items: center; gap: var(--space-3); }
.pp-name > span:last-child { display: flex; flex-direction: column; }
.pp-name small { font-size: var(--text-xs); color: var(--fg-muted); }
.pp-cell { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pp-cell .status svg { width: 12px; height: 12px; }
.pp-table { table-layout: fixed; width: 100%; }
.pp-table th:first-child { width: 44%; }
.pp-table th:nth-child(2), .pp-table th:nth-child(3) { width: 28%; white-space: nowrap; }
.pp-cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* P2-2 amendment: one neutral set badge for every Practice Set */
.pp-badge { min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--brand-blue-soft); color: var(--brand-blue); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.pp-name small { display: block; }
.pp-prog { display: inline-block; margin-top: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--warning); }
.pp-tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.pp-tally div { display: flex; flex-direction: column; gap: 2px; }
.pp-tally dd { order: -1; }
.pp-tally dt { font-size: var(--text-xs); color: var(--fg-muted); }
.pp-tally dd { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--fg); }

/* ===== Pass 2 · P2-3: AI Study Plan (39–40) and Leaderboard (42) ===== */
.onb-title { margin-top: 4px; font-size: var(--text-xl); font-weight: var(--weight-heavy); }
.panel__foot { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--fg-muted); }
.panel__foot svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--brand-blue); font: inherit; font-weight: var(--weight-semi); cursor: pointer; }
@media (hover: hover) { .link-btn:hover { text-decoration: underline; } }
.mini-dl { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-2); }
.mini-dl div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.mini-dl dt { color: var(--fg-muted); }
.mini-dl dd { margin: 0; color: var(--fg); font-weight: var(--weight-semi); text-align: right; }

.plan-when { display: flex; flex-direction: column; gap: var(--space-5); }
.plan-field { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.plan-field__label { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg); }
.plan-field__hint { font-size: var(--text-sm); color: var(--fg-muted); }
.day-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.day-chip { min-width: 52px; height: 40px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--line-strong, var(--line)); background: var(--surface); color: var(--fg); font-weight: var(--weight-semi); cursor: pointer; }
.day-chip.is-on { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.day-chip:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.plan-review { display: flex; flex-direction: column; gap: var(--space-5); }
.plan-focus h3 { font-size: var(--text-base, 1rem); margin-bottom: var(--space-2); }
.plan-focus ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plan-focus li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--text-sm); }
.plan-focus li svg { width: 18px; height: 18px; color: var(--brand-blue); flex: none; }
.plan-focus li span { flex: 1; color: var(--fg); }
.plan-creating { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; padding: var(--space-8) 0; }
.plan-creating__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-blue-soft); color: var(--brand-blue); }
.plan-creating__icon svg { width: 28px; height: 28px; }

.plan-miss { display: flex; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--warning-soft); border: 1px solid var(--warning-line); }
.plan-miss__icon { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface); color: var(--warning); }
.plan-miss__icon svg { width: 20px; height: 20px; }
.plan-miss h2 { font-size: var(--text-base, 1rem); color: var(--fg); }
.plan-miss p { font-size: var(--text-sm); color: var(--fg-muted); margin-top: 2px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }
.week-strip__day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); color: var(--fg-subtle); }
.week-strip__day.is-plan { color: var(--fg); }
.week-strip__day.is-today { border-color: var(--brand-blue); box-shadow: 0 0 0 1px var(--brand-blue) inset; }
.week-strip__name { font-size: var(--text-xs); font-weight: var(--weight-semi); text-transform: uppercase; letter-spacing: .04em; }
.week-strip__num { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.week-strip__dots { display: flex; gap: 4px; height: 8px; }
.week-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.week-strip .dot--done { background: var(--status-retained); }
.week-strip .dot--today, .week-strip .dot--upcoming { background: var(--brand-blue); }
.week-strip .dot--missed { background: var(--warning-fill); }
.week-strip .dot--moved { background: var(--brand-blue); opacity: .6; }
.sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.session { display: grid; grid-template-columns: 92px 40px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.session--today { border-color: var(--brand-blue); box-shadow: var(--shadow-sm); }
.session--done { background: var(--surface-2); }
.session--missed { border-style: dashed; border-color: var(--warning-line); }
.session__when { display: flex; flex-direction: column; font-size: var(--text-xs); color: var(--fg-muted); }
.session__when strong { font-size: var(--text-sm); color: var(--fg); }
.session__icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--brand-blue-soft); color: var(--brand-blue); }
.session__icon svg { width: 20px; height: 20px; }
.session--done .session__icon { background: var(--surface); color: var(--fg-muted); }
.session__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.session__title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.session__desc { font-size: var(--text-sm); color: var(--fg); }
.session__why { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--fg-muted); }
.session__why svg { width: 14px; height: 14px; color: var(--warning); }
.next-week { list-style: none; margin: 0; padding: 0; }
.next-week li { display: grid; grid-template-columns: 44px 20px 1fr auto; gap: var(--space-3); align-items: center; padding: 12px var(--space-5); border-top: 1px solid var(--line); font-size: var(--text-sm); }
.next-week li:first-child { border-top: 0; }
.next-week li svg { width: 16px; height: 16px; color: var(--fg-muted); }
.next-week li .subtle { font-size: var(--text-xs); text-align: right; }
.next-week__day { font-weight: var(--weight-bold); color: var(--fg); }
.pp-tally--2 { grid-template-columns: repeat(2, 1fr); }

.lb-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.lb-scope { display: flex; flex-direction: column; gap: 6px; }
.lb-you-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--brand-blue-soft); border: 1px solid var(--brand-blue); }
.lb-you-card__rank { font-size: 2rem; font-weight: var(--weight-heavy); color: var(--brand-ink, var(--fg)); line-height: 1.1; margin: 4px 0; }
.lb-you-card__rank small { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg-muted); }
.lb-you-card__pts { display: flex; flex-direction: column; align-items: flex-end; }
.lb-you-card__pts strong { font-size: 2rem; font-weight: var(--weight-heavy); color: var(--brand-blue); line-height: 1; }
.lb-you-card__pts span { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--fg); }
.lb-you-card__pts small { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 4px; }
.lb-head, .lb-row { display: grid; grid-template-columns: 120px 1fr 80px; gap: var(--space-3); align-items: center; padding: 0 var(--space-5); }
.lb-head { height: 44px; border-bottom: 1px solid var(--line); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.lb-head span:last-child, .lb-row__pts { text-align: right; }
.lb-list { list-style: none; margin: 0; padding: 0; }
.lb-row { min-height: 60px; border-top: 1px solid var(--line); }
.lb-list li:first-child { border-top: 0; }
.lb-row.is-you { background: var(--brand-blue-soft); box-shadow: inset 3px 0 0 var(--brand-blue); }
.lb-row__rank { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-bold); color: var(--fg); }
.lb-row__rank svg { width: 16px; height: 16px; }
.lb-row--top1 .lb-row__rank svg { color: #C9A227; }
.lb-row--top2 .lb-row__rank svg { color: #8D99A6; }
.lb-row--top3 .lb-row__rank svg { color: #B0703C; }
.lb-row__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.lb-row__who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.lb-row__who strong { color: var(--fg); font-size: var(--text-sm); }
.lb-row__who small { font-size: var(--text-xs); color: var(--fg-muted); }
.lb-avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; font-weight: var(--weight-bold); color: var(--fg-muted); }
.lb-row.is-you .lb-avatar { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.lb-you { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--brand-blue); color: #fff; font-size: 10px; font-weight: var(--weight-bold); vertical-align: 2px; }
.lb-row__pts { font-weight: var(--weight-bold); font-size: var(--text-base, 1rem); color: var(--fg); }
.lb-gap { text-align: center; color: var(--fg-subtle); border-top: 1px solid var(--line); line-height: 28px; letter-spacing: .3em; }
.lb-list--pinned { border-top: 1px dashed var(--line); }
.lb-how { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lb-how li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--fg); }
.lb-how li svg { width: 18px; height: 18px; color: var(--brand-blue); flex: none; }
.lb-how li span { flex: 1; }
.lb-how li strong { color: var(--brand-blue); }
@media (max-width: 720px) {
  .session { grid-template-columns: 40px 1fr; }
  .session__when { grid-column: 1 / -1; flex-direction: row; gap: 6px; }
  .session__act { grid-column: 2; }
  .lb-you-card { flex-direction: column; align-items: flex-start; }
  .lb-you-card__pts { align-items: flex-start; }
}
.lb-row__name { display: flex; align-items: center; gap: 8px; }
.lb-row__name .lb-you { margin-left: 0; vertical-align: 0; }
.plan-headact { display: flex; align-items: center; gap: var(--space-3); }
.lb-how li em { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.lb-how li.is-bonus svg { color: var(--warning); }
.lb-reset { display: flex; gap: 8px; margin-top: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--text-sm); color: var(--fg); }
.lb-reset svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand-blue); }
.lb-hidden { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-muted); font-size: 10px; font-weight: var(--weight-bold); }
.lb-hidden svg { width: 11px; height: 11px; }
.lb-hidden-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--fg); }
.lb-hidden-note svg { width: 14px; height: 14px; }
/* Sejarah Home: own rank card */
.home-rank { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.home-rank__icon { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--warning-soft); color: var(--warning); }
.home-rank__icon svg { width: 20px; height: 20px; }
.home-rank__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-rank__line { font-size: var(--text-sm); color: var(--fg-muted); }
.home-rank__line strong { color: var(--fg); font-size: var(--text-base); }
.home-rank__sep { margin: 0 8px; color: var(--fg-subtle); }
@media (max-width: 720px) { .home-rank { flex-wrap: wrap; } }