/* ==========================================================================
   Apex SAT Prep — Design System
   Clean, academic, trustworthy. Indigo primary + color-coded sections.
   Custom CSS (no build step). Tokens → Base → Layout → Components →
   App shell → Test engine → Animations → Responsive → Reduced motion.
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand (EliteXSAT crimson — matched to the logo) */
  --brand-50:  #fff1f2;
  --brand-100: #ffe1e3;
  --brand-200: #fec7cb;
  --brand-300: #fb9aa2;
  --brand-400: #f56673;
  --brand-500: #e83d4b;
  --brand-600: #d11d2b;
  --brand-700: #b0121f;
  --brand-800: #8f131d;
  --brand-900: #76151c;

  /* Neutrals (slate) */
  --ink:        #0f172a;
  --ink-2:      #1e293b;
  --muted:      #475569;
  --muted-2:    #64748b;
  --faint:      #94a3b8;
  --bg:         #f6f7fb;
  --surface:    #ffffff;
  --surface-2:  #f1f5f9;
  --surface-3:  #e9edf5;
  --border:     #e6e8f0;
  --border-2:   #d4d9e6;

  /* Section colors */
  --rw:     #7c3aed;   /* Reading & Writing — violet */
  --rw-bg:  #f5f3ff;
  --math:   #0891b2;   /* Math — cyan */
  --math-bg:#ecfeff;

  /* Semantic */
  --ok:     #059669;
  --ok-bg:  #ecfdf5;
  --ok-bd:  #a7f3d0;
  --bad:    #e11d48;
  --bad-bg: #fff1f2;
  --bad-bd: #fecdd3;
  --warn:   #d97706;
  --warn-bg:#fffbeb;
  --pick:   #3b5bdb;   /* answer-choice "selected" blue (replaces the red) */
  --pick-bg:#eef2ff;

  /* Effects */
  --ring: 0 0 0 4px rgba(209, 29, 43, .26);
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, .12), 0 2px 6px -2px rgba(15, 23, 42, .07);
  --shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, .18), 0 6px 14px -8px rgba(15, 23, 42, .10);
  --shadow-brand: 0 12px 28px -8px rgba(209, 29, 43, .42);

  /* Radii */
  --r-xs: 7px;
  --r-sm: 7px;
  --r:    10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --pill: 10px;
  --circle: 999px;   /* truly circular elements (spinner, dots) opt into this */

  /* Layout */
  --container: 1140px;
  --header-h: 102px;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-read: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Motion — One UI-inspired: fluid, soft landing, gentle overshoot */
  --ease: cubic-bezier(.4, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.46, .5, 1);   /* soft overshoot for entrances */
  --ease-smooth: cubic-bezier(.33, 1, .68, 1);
  --t-fast: 170ms;
  --t: 280ms;
  --t-slow: 480ms;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.15; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.container-wide { max-width: 1320px; }
.section { padding-block: 88px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: 6px; } .gap-2 { gap: 10px; } .gap-3 { gap: 16px; }
.gap-4 { gap: 24px; } .gap-5 { gap: 36px; } .gap-6 { gap: 52px; }
.grow { flex: 1; } .shrink-0 { flex-shrink: 0; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- Typography scale ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.4rem);
}
.h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); letter-spacing: -.015em; }
.h3 { font-size: 1.3rem; }
.lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); color: var(--muted); line-height: 1.6; }
.eyebrow {
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-600);
}
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 20px; border-radius: var(--pill);
  font-weight: 600; font-size: .95rem; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t) var(--ease),
              transform var(--t-fast) var(--ease);
  user-select: none;
}
.btn:hover { box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; }
.btn-sm { padding: 8px 14px; font-size: .85rem; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
  --btn-bg: var(--brand-600); --btn-fg: #fff; border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { --btn-bg: var(--brand-700); box-shadow: var(--shadow-brand); }
.btn-dark { --btn-bg: var(--ink); --btn-fg: #fff; border-color: transparent; }
.btn-dark:hover { --btn-bg: #000; }
.btn-ghost { --btn-bg: transparent; border-color: transparent; }
.btn-ghost:hover { --btn-bg: var(--surface-2); box-shadow: none; }
.btn-outline { --btn-bg: transparent; border-color: var(--border-2); }
.btn-outline:hover { --btn-bg: var(--surface); border-color: var(--brand-300); }
.btn-success { --btn-bg: var(--ok); --btn-fg: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.btn-success:hover { --btn-bg: #047857; box-shadow: var(--shadow-md); }
.btn-danger { --btn-bg: var(--bad); --btn-fg: #fff; border-color: transparent; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- Cards & surfaces ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 26px; }
.card-hover {
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t);
  cursor: pointer;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--pill);
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.badge svg { width: 13px; height: 13px; }
/* Digital exams catalog cards: no icon, larger Version / region badges */
.dex-badges .badge { font-size: .9rem; padding: 6px 14px; }
.dex-badges .badge svg { width: 15px; height: 15px; }
.badge-rw   { background: var(--rw-bg); color: var(--rw); border-color: #e2d8fb; }
.badge-math { background: var(--math-bg); color: var(--math); border-color: #c4ecf3; }
.badge-ok   { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); }
.badge-bad  { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-bd); }
.badge-brand{ background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.badge-warn { background: var(--warn-bg); color: var(--warn); border-color: #fde68a; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.input {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-2); background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-size: .98rem;
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--brand-400); box-shadow: var(--ring); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.hint { font-size: .8rem; color: var(--muted-2); }
.field-error { font-size: .8rem; color: var(--bad); font-weight: 500; }

/* ---------- Header / floating nav (≈80% width, rounded glass) ---------- */
.site-header {
  position: sticky; top: 14px; z-index: 50;
  margin-top: 14px; padding-inline: 16px;
  animation: navDrop .8s var(--ease-spring) both;
}
.nav-shell {
  width: min(80%, 1340px); margin-inline: auto;
  min-height: 74px; display: flex; align-items: center; gap: 18px;
  padding: 10px 14px 10px 22px; border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 16px 48px -18px rgba(15, 23, 42, .30), 0 4px 14px -8px rgba(15, 23, 42, .12);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.02em; flex-shrink: 0; }
.brand-logo {
  height: 48px; width: auto; display: block;
  filter: drop-shadow(0 6px 10px rgba(176, 18, 31, .28));
  transition: transform var(--t) var(--ease-spring);
}
.brand:hover .brand-logo { transform: rotate(-5deg) scale(1.07); }
.brand-name { font-size: 1.32rem; color: var(--ink); }
.brand-name b { color: var(--brand-600); font-weight: 800; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav-link {
  padding: 9px 16px; border-radius: var(--pill); font-weight: 500; font-size: .96rem; color: var(--muted);
  transition: color var(--t-fast), background var(--t) var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--surface-2); }
.nav-link.active { color: var(--brand-700); background: var(--brand-50); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-btn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid var(--border-2); color: var(--ink-2); background: var(--surface);
  transition: transform var(--t) var(--ease-spring), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t);
}
.icon-btn:hover { border-color: var(--brand-300); color: var(--brand-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.icon-btn svg { width: 21px; height: 21px; }
.menu-btn { margin-left: auto; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding-block: 56px 36px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-grid h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); margin-bottom: 14px; }
.footer-grid a { display: block; padding: 5px 0; color: var(--muted); font-size: .92rem; transition: color var(--t-fast); }
.footer-grid a:hover { color: var(--brand-600); }

/* ---------- Avatar ---------- */
.avatar {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .9rem;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.4rem; }

/* ---------- Progress ---------- */
.bar { height: 8px; border-radius: var(--pill); background: var(--surface-3); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: var(--pill); background: var(--brand-500);
  transition: width var(--t-slow) var(--ease-out); }
.bar.rw > span { background: var(--rw); }
.bar.math > span { background: var(--math); }
.bar.ok > span { background: var(--ok); }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 11px; padding: 12px 18px;
  background: var(--ink); color: #fff; border-radius: var(--pill);
  box-shadow: var(--shadow-lg); font-size: .92rem; font-weight: 500;
  animation: toastIn var(--t) var(--ease-out);
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.ok svg { color: #6ee7b7; }
.toast.bad svg { color: #fda4af; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px;
  animation: fadeIn var(--t) var(--ease);
}
.modal {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 440px; padding: 30px; animation: modalIn var(--t) var(--ease-out);
}

/* Full-question review popup (opened from the answer-key tiles) — ~80% of the screen */
.modal.modal-review { width: 80vw; height: 80vh; max-width: 1400px; padding: 20px 24px; display: flex; flex-direction: column; }
.modal-review .modal-body { flex: 1 1 auto; overflow-y: auto; padding-right: 8px; min-height: 0; }
.rv-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: .82rem; color: var(--muted-2); padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.rv-meta .rv-state { font-weight: 700; }
.rv-passage { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; line-height: 1.6; max-height: 42vh; overflow-y: auto; }
.rv-prompt { font-size: 1.05rem; line-height: 1.6; margin-bottom: 20px; }
.rv-prompt svg, .rv-prompt img, .rv-prompt table { max-width: 100%; height: auto; }
.rv-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.rv-opt { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); }
.rv-opt .rv-badge { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .95rem; background: var(--surface-2); color: var(--muted-2); border: 1px solid var(--border); }
.rv-opt .rv-badge svg { width: 17px; height: 17px; }
.rv-opt .rv-opt-txt { flex: 1; min-width: 0; line-height: 1.5; }
.rv-opt .rv-lab { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); margin-bottom: 2px; }
.rv-opt .rv-grid-ans { font-size: 1.1rem; font-weight: 700; }
.rv-opt .rv-tag { flex: none; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.rv-opt.ok { border-color: var(--ok); background: var(--ok-bg); }
.rv-opt.ok .rv-badge { background: var(--ok); color: #fff; border-color: var(--ok); }
.rv-opt.ok .rv-tag { background: var(--ok); color: #fff; }
.rv-opt.bad { border-color: var(--bad); background: var(--bad-bg); }
.rv-opt.bad .rv-badge { background: var(--bad); color: #fff; border-color: var(--bad); }
.rv-opt.bad .rv-tag { background: var(--bad); color: #fff; }
.rv-explain { border-top: 1px solid var(--border); padding-top: 16px; line-height: 1.6; }
.rv-explain h4 { margin: 0 0 8px; font-size: 1.02rem; }
.rv-exp-summary { margin-bottom: 6px; }
.rv-why { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.rv-why-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted-2); }
.rv-why-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.rv-why-row.ok { border-color: var(--ok); background: var(--ok-bg); }
.rv-why-badge { flex: none; display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: .82rem; min-width: 30px; }
.rv-why-badge svg { width: 15px; height: 15px; }
.rv-why-row.ok .rv-why-badge { color: var(--ok); }
.rv-why-row.bad .rv-why-badge { color: var(--bad); }
.rv-why-txt { line-height: 1.5; font-size: .92rem; }
@media (max-width: 720px) { .modal.modal-review { width: 94vw; height: 88vh; padding: 16px; } .rv-passage { max-height: 34vh; } }

/* ---------- App shell ---------- */
.app-main { min-height: calc(100vh - var(--header-h)); padding-block: 40px 80px; }
.page-head { margin-bottom: 28px; }
/* Reading library header — text left, band filter right (slim two-column, like the reader) */
.lib-head { display: flex; justify-content: space-between; align-items: center; gap: 22px 28px; flex-wrap: wrap; }
.lib-head-text { flex: 1 1 360px; min-width: 0; }
.lib-head-text .lead { margin-bottom: 0; }
.lib-head-filter { flex-shrink: 0; }
@media (max-width: 760px) { .lib-head { align-items: stretch; } .lib-head-filter { width: 100%; } }
.grid { display: grid; gap: 22px; }
.grid > * { min-width: 0; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1500px) { .grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .grid-5 { grid-template-columns: minmax(0, 1fr); } }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1240px) { .grid-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sidebar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 32px; align-items: start; }
.sidebar-layout > * { min-width: 0; }

.stat-card { padding: 22px; }
.stat-card .label { font-size: .82rem; color: var(--muted-2); font-weight: 500; }
.stat-card .value { font-family: var(--font-display); font-size: 2.1rem; font-weight: 500; line-height: 1; margin-top: 8px; }
.stat-card .value small { font-size: 1rem; color: var(--faint); font-family: var(--font-ui); }
.sc-two { display: flex; gap: 24px; margin-top: 8px; }
.stat-card .sc-two .value { font-size: 1.7rem; margin-top: 0; }
.sc-two .sc-avg { color: var(--muted-2); }

/* Question Bank data view — donut charts (Total centred, Verbal/Math ring + legend) */
.qb-donuts { margin-bottom: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .qb-donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .qb-donuts { grid-template-columns: minmax(0, 1fr); } }
.qb-dcard { display: flex; flex-direction: column; }
.qb-donut-wrap { display: flex; justify-content: center; padding: 16px 0 8px; }
.qb-donut { width: 148px; height: 148px; max-width: 100%; }
.qb-donut-main { fill: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 21px; }
.qb-donut-sub { fill: var(--muted); font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.qb-dlegend { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 4px; }
.qb-dleg { display: flex; align-items: center; gap: 9px; }
.qb-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.qb-dleg-k { font-size: .84rem; color: var(--muted-2); font-weight: 500; }
.qb-dleg-v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); font-size: .9rem; }
.qb-marked-note { margin-bottom: 26px; color: var(--muted); font-size: .88rem; display: flex; align-items: center; gap: 7px; }
.qb-marked-note strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.qb-marked-note svg { color: #7c5cff; }

/* score ring */
.ring { --p: 0; --size: 132px; --bw: 11px; width: var(--size); height: var(--size); position: relative; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { fill: none; stroke: var(--surface-3); stroke-width: var(--bw); }
.ring .fill { fill: none; stroke: var(--brand-500); stroke-width: var(--bw); stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease-out); }
.ring .label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .label b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; line-height: 1; }
.ring .label span { font-size: .72rem; color: var(--muted-2); }

/* ---------- Test catalog cards ---------- */
.test-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; height: 100%; }
.test-card .tc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.test-card h3 { font-size: 1.18rem; }
.test-card .tc-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted-2); font-size: .85rem; }
.test-card .tc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.test-card .tc-meta svg { width: 15px; height: 15px; }
/* Score chips for Recent-activity cards — R&W + Math + Total (sum) */
.score-chips { display: flex; gap: 8px; }
.score-chip { flex: 1; min-width: 0; text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.score-chip-total { background: var(--brand-50); border-color: var(--brand-200); }
.score-chip .sc-num { font-size: 1.25rem; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.score-chip-total .sc-num { color: var(--brand-600); }
.score-chip .sc-lab { margin-top: 3px; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ======================================================================
   TEST ENGINE
   ====================================================================== */
.engine { position: fixed; inset: 0; z-index: 80; background: var(--surface); display: flex; flex-direction: column; }
.engine-top {
  height: 60px; flex-shrink: 0; border-bottom: 2px dashed var(--border-2);
  display: flex; align-items: center; justify-content: space-between; padding-inline: 22px; gap: 16px;
}
.engine-top .et-title { font-weight: 600; font-size: .98rem; }
.engine-top .et-title small { display: block; color: var(--muted-2); font-weight: 500; font-size: .76rem; }
.timer {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--pill);
  background: var(--surface-2); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem;
  border: 1px solid var(--border); transition: background var(--t), color var(--t);
}
.timer svg { width: 17px; height: 17px; }
.timer.warn { background: var(--warn-bg); color: var(--warn); border-color: #fde68a; animation: pulse 1.6s var(--ease) infinite; }

.engine-body { flex: 1; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.engine-body.single { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; width: 100%; }
.pane { overflow-y: auto; padding: 34px 40px 60px; }
.pane-left { border-right: 1px solid var(--border); }
.passage { font-family: var(--font-read); font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); overflow-wrap: break-word; }
.passage p { margin-bottom: 16px; }
/* "Student notes" bullet lists inside questions — the global `ul{list-style:none}` reset
   strips the markers, making the notes blend together; restore bullets + spacing here. */
.passage ul, .q-prompt ul, .qr-result ul { list-style: disc; padding-left: 1.4em; margin: 6px 0 14px; }
.passage ul li, .q-prompt ul li, .qr-result ul li { margin-bottom: 9px; padding-left: 3px; line-height: 1.55; }
.passage ul li::marker, .q-prompt ul li::marker, .qr-result ul li::marker { color: var(--brand-600); }
.passage .figure { margin: 18px 0; padding: 18px; background: var(--surface-2); border-radius: var(--r); border: 1px solid var(--border); }

.q-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.q-num { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; }
.q-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--pill); font-size: .82rem; font-weight: 600; color: var(--muted); border: 1px solid var(--border); transition: all var(--t-fast); }
.q-flag:hover { background: var(--surface-2); }
.q-flag.on { color: var(--warn); background: var(--warn-bg); border-color: #fde68a; }
.q-flag svg { width: 15px; height: 15px; }
.q-prompt { font-size: 1.12rem; font-weight: 500; line-height: 1.55; margin-bottom: 22px; color: var(--ink); }
.q-prompt.read { font-family: var(--font-read); font-weight: 400; }

/* answer choices */
.choices { display: flex; flex-direction: column; gap: 12px; }
.choice {
  display: flex; align-items: flex-start; gap: 14px; padding: 15px 17px;
  border: 1.5px solid var(--border-2); border-radius: var(--r); background: var(--surface);
  text-align: left; width: 100%;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.choice:hover { border-color: var(--warn); background: var(--warn-bg); }
.choice .ch-key {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; border: 1.5px solid var(--border-2);
  display: grid; place-items: center; font-weight: 700; font-size: .88rem; color: var(--muted);
  transition: all var(--t-fast);
}
.choice .ch-text { padding-top: 2px; line-height: 1.45; }
.choice.selected { border-color: var(--pick); background: var(--pick-bg); box-shadow: 0 0 0 1px var(--pick) inset; }
.choice.selected .ch-key { background: var(--pick); color: #fff; border-color: var(--pick); }
.choice.eliminated { opacity: .42; }
.choice.eliminated .ch-text { text-decoration: line-through; }
/* review states */
.choice.correct { border-color: var(--ok); background: var(--ok-bg); }
.choice.correct .ch-key { background: var(--ok); color: #fff; border-color: var(--ok); }
.choice.wrong { border-color: var(--bad); background: var(--bad-bg); }
.choice.wrong .ch-key { background: var(--bad); color: #fff; border-color: var(--bad); }
/* graded picks keep their tint on hover (don't flash orange); once solved the whole set locks */
.choice.correct:hover { border-color: var(--ok); background: var(--ok-bg); }
.choice.wrong:hover { border-color: var(--bad); background: var(--bad-bg); }
.choice.locked, .choice:disabled { cursor: default; }
.choice.locked:not(.correct):not(.wrong) { opacity: .5; }
.choice.locked:not(.correct):not(.wrong):hover { border-color: var(--border-2); background: var(--surface); }

/* grid-in (student produced response) */
.grid-in { max-width: 168px; }
.grid-in .input { font-size: 1.15rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .04em; padding: 9px 12px; }
.grid-in-note { margin-top: 10px; font-size: .82rem; color: var(--muted-2); }

/* Desmos calculator (Math section) — a resizable split panel. Opening it docks a big
   Desmos calculator on the LEFT (.calc-pane) and slides the question to the RIGHT; the
   .calc-split divider in the middle resizes both. The pane is a flow child of
   .engine-stage with a solid bg + z-index 6, so it sits cleanly over the watermark. */
.engine-stage.calc-open { flex-direction: row; }
.engine-stage.calc-open > .qr-stage-inner { min-width: 0; }
.engine-stage.calc-open .qr-wm-logo { display: none; }   /* hide the half-covered centre logo while split */
.calc-pane { flex: 0 0 var(--calc-w, 50%); min-width: 320px; display: flex; flex-direction: column;
  background: var(--surface); position: relative; z-index: 6; }
.calc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--border); user-select: none; }
.calc-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .92rem; color: var(--ink); }
.calc-title svg { width: 17px; height: 17px; color: var(--brand-600); }
.calc-close { display: inline-grid; place-items: center; width: 30px; height: 30px; border: none; background: none; border-radius: 7px; cursor: pointer; color: var(--muted-2); }
.calc-close:hover { background: var(--surface); color: var(--ink); }
.calc-close svg { width: 17px; height: 17px; }
.calc-body { flex: 1; min-height: 0; }
.calc-offline { padding: 26px 20px; text-align: center; color: var(--muted-2); font-size: .9rem; line-height: 1.6; }
/* draggable divider between the calculator and the question */
.calc-split { flex: 0 0 8px; align-self: stretch; position: relative; background: var(--border); cursor: col-resize; z-index: 6; }
.calc-split::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3px; height: 44px; border-radius: 3px; background: var(--muted-2); opacity: .5; }
.calc-split::after { content: ""; position: absolute; top: 0; bottom: 0; left: -5px; right: -5px; cursor: col-resize; }
.calc-split:hover, .calc-dragging .calc-split { background: var(--brand-600); }
.calc-split:hover::before, .calc-dragging .calc-split::before { background: #fff; opacity: .9; }
.calc-dragging, .calc-dragging * { cursor: col-resize !important; user-select: none; }
@media (max-width: 720px) {
  .engine-stage.calc-open { flex-direction: column; }
  .calc-pane { flex: 1 1 auto; min-width: 0; border-bottom: 1px solid var(--border); }
  .calc-split { display: none; }
}

/* stacked fraction (rendered in Math content) */
.frac { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; vertical-align: middle;
  margin: 0 .12em; font-size: .82em; line-height: 1.05; position: relative; top: -.04em; }
.frac-n { display: block; padding: 0 .32em; }
.frac-d { display: block; padding: 0 .32em; border-top: 1.4px solid currentColor; }

/* square root: a √ sign + an overline (vinculum) over the radicand.
   Kept as plain INLINE (not inline-flex) so the radicand sits on the text baseline —
   inline-flex synthesises a baseline that drops the whole radical ~0.6em below the line. */
.sqrt { display: inline; white-space: nowrap; }
.sqrt-sign { display: inline-block; line-height: 1; transform: scaleY(1.3); transform-origin: bottom; margin-right: 1px; }
.sqrt-rad { border-top: 1.5px solid currentColor; padding: 2px 3px 0 2px; }

/* ===== Practice Score Report (results view) — College Board–style report layout ===== */
.sr-wrap { max-width: 1440px; }
.sr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin: 6px 0 22px; flex-wrap: wrap; }
.sr-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.sr-disclaimer { max-width: 440px; font-size: .82rem; line-height: 1.5; color: var(--muted); text-align: right; }
@media (max-width: 720px) { .sr-disclaimer { text-align: left; } }

.sr-card { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); margin-bottom: 26px; }
.sr-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 26px; border-bottom: 1px solid var(--border); }
.sr-exam { font-size: 1.5rem; font-weight: 800; margin: 0; }
.sr-date { color: var(--muted); font-weight: 600; white-space: nowrap; }

.sr-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; }
.sr-col { padding: 22px 26px; }
.sr-bord { border-left: 1px solid var(--border); }
.sr-label { font-size: .82rem; font-weight: 800; letter-spacing: .03em; margin-bottom: 12px; }
.sr-bignum { font-size: 4.2rem; font-weight: 800; line-height: .95; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sr-bignum-sm { font-size: 3rem; }
.sr-range { font-size: .82rem; color: var(--ink-2); margin-top: 8px; }
.sr-rangenote { font-size: .78rem; color: var(--muted); margin-top: 18px; line-height: 1.5; }
.sr-sec { margin-bottom: 16px; }
.sr-sub { font-weight: 700; margin-bottom: 6px; }
.sr-sec-row { display: flex; align-items: center; gap: 14px; }
.sr-sec-row .sr-range { border-left: 1px solid var(--border); padding-left: 14px; margin-top: 0; }
.sr-mini-lab { font-size: .82rem; font-weight: 600; color: var(--ink-2); border-left: 1px solid var(--border); padding-left: 14px; line-height: 1.3; }
.sr-mini-tot { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.sr-detail-rule { border-top: 1px dashed var(--border); margin: 16px 0; }
.sr-two { display: flex; gap: 26px; flex-wrap: wrap; }
.sr-mini-head { font-weight: 700; margin-bottom: 8px; }
.sr-mini-row { display: flex; align-items: center; gap: 12px; }
.sr-mini-num { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .sr-grid { grid-template-columns: 1fr; }
  .sr-bord { border-left: none; border-top: 1px solid var(--border); }
}

/* knowledge & skills — wrapped in a card ("window") to match the other report sections */
.sr-ks { margin-bottom: 26px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 22px 26px; }
.sr-ks-title { font-size: 1.05rem; font-weight: 800; letter-spacing: .03em; margin: 0 0 4px; }
.sr-ks-sub { color: var(--muted); font-size: .9rem; margin-bottom: 18px; }
.sr-ks-grid { display: grid; grid-template-columns: max-content max-content; justify-content: space-between; gap: 28px 56px; }
/* Math (right) column hugs the window's right edge: right-align its content and move the count BEFORE the bricks so the LAST brick touches the edge */
.sr-ks-col:last-child { text-align: right; }
.sr-ks-col:last-child .sr-boxes { justify-content: flex-end; }
.sr-ks-col:last-child .sr-dom-frac { order: -1; margin: 0 8px 0 0; }
@media (max-width: 820px) { .sr-ks-grid { grid-template-columns: 1fr; } .sr-ks-col:last-child { text-align: left; } .sr-ks-col:last-child .sr-boxes { justify-content: flex-start; } .sr-ks-col:last-child .sr-dom-frac { order: 0; margin: 0 0 0 6px; } }
.sr-ks-h { font-size: 1.05rem; font-weight: 800; margin-bottom: 14px; }
.sr-dom { margin-bottom: 16px; }
.sr-dom-name { font-weight: 700; }
.sr-dom-meta { font-size: .82rem; color: var(--muted); margin: 1px 0 7px; }
/* one box per question, all on ONE line (no ragged wrapping) + the count at the end */
.sr-boxes { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.sr-box { width: 28px; height: 10px; border: 1.5px solid var(--ink); border-radius: 3px; background: transparent; flex: 0 0 auto; }
.sr-box.fill { background: var(--ink); }
.sr-dom-frac { font-size: .8rem; font-weight: 700; color: var(--muted); margin-left: 6px; flex: 0 0 auto; white-space: nowrap; }
.sr-dom-none { font-size: .82rem; color: var(--faint); }
@media (max-width: 560px) { .sr-boxes { flex-wrap: wrap; } }

/* color-coded answer key (grouped by section) */
.sr-akey { padding: 22px 26px; }
.sr-akey-sec { margin-top: 18px; }
.sr-akey-label { font-size: 1rem; font-weight: 800; margin-bottom: 12px; }
.sr-akey-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.sr-legend { display: flex; gap: 14px; }
.sr-leg { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; }
.sr-leg svg { width: 14px; height: 14px; }
.sr-leg.ok { color: var(--ok); }
.sr-leg.bad { color: var(--bad); }
.sr-akey-grid { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
@media (max-width: 1200px) { .sr-akey-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .sr-akey-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .sr-akey-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sr-ak { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 7px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.sr-ak:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sr-ak-n { font-size: .72rem; font-weight: 700; color: var(--muted-2); }
.sr-ak-ans { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.sr-ak-yours { font-size: .64rem; color: var(--muted-2); min-height: .85em; }
.sr-ak.ok { border-color: var(--ok); background: var(--ok-bg); }
.sr-ak.ok .sr-ak-ans { color: var(--ok); }
.sr-ak.bad { border-color: var(--bad); background: var(--bad-bg); }
.sr-ak.bad .sr-ak-ans { color: var(--bad); }
.sr-ak.skip { border-color: var(--faint); background: var(--surface-2); }
.sr-ak.skip .sr-ak-n { color: var(--faint); }
.sr-ak.skip .sr-ak-ans { color: var(--muted-2); }
.sr-leg.skip { color: var(--muted-2); }
.sr-leg .leg-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* eliminate toggle */
.elim-toggle { margin-left: auto; font-size: .8rem; color: var(--muted-2); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--pill); border: 1px solid var(--border); }
.elim-toggle.on { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-200); }

/* explanation block (review) */
.explain { margin-top: 12px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); }
.explain h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-600); margin-bottom: 8px; }
.explain p { color: var(--ink-2); line-height: 1.65; }

/* engine bottom bar */
.engine-bottom {
  height: 66px; flex-shrink: 0; border-top: 1px solid var(--border); background: var(--surface);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: 22px; gap: 14px;
  box-shadow: 0 -4px 16px -10px rgba(15,23,42,.2);
}
.engine-bottom > .nav-pill { justify-self: center; }
.qbank-runner .engine-bottom { border-top: none; }
.nav-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: var(--pill);
  background: var(--ink); color: #fff; font-weight: 600; font-size: .92rem;
  transition: background var(--t-fast);
}
.nav-pill:hover { background: #000; }
.nav-pill svg { width: 16px; height: 16px; }

/* question navigator popover */
.navigator { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); width: min(540px, 92vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 20px; z-index: 90; animation: popIn var(--t) var(--ease-out); }
.nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 9px; margin-top: 14px; }
.nav-cell {
  aspect-ratio: 1; border-radius: 9px; border: 1.5px solid var(--border-2); background: var(--surface);
  font-weight: 700; font-size: .9rem; color: var(--muted); display: grid; place-items: center; position: relative;
  transition: all var(--t-fast);
}
.nav-cell:hover { border-color: var(--brand-400); }
.nav-cell.answered { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.nav-cell.current { box-shadow: 0 0 0 3px var(--brand-200); border-color: var(--brand-600); }
.nav-cell.flagged::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.nav-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: .8rem; color: var(--muted); }

/* Question Bank navigator: 10 per row, ~5 rows then vertical scroll; cells tinted by
   difficulty (easy green / medium yellow / hard red) with a status badge in the corner. */
.qbank-runner .navigator { width: min(580px, 94vw); }
.qbank-runner .nav-grid {
  grid-template-columns: repeat(10, 1fr); gap: 8px;
  max-height: 258px; overflow-y: auto; overflow-x: hidden;
  padding: 8px 10px 8px 6px; scrollbar-width: thin; scrollbar-gutter: stable;
}
.qbank-runner .nav-cell { font-size: .8rem; border-radius: 8px; border-width: 1.5px; overflow: visible; }
.qbank-runner .nav-cell.nc-easy   { background: var(--ok-bg);   border-color: var(--ok);   color: var(--ok); }
.qbank-runner .nav-cell.nc-medium { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.qbank-runner .nav-cell.nc-hard   { background: var(--bad-bg);  border-color: var(--bad);  color: var(--bad); }
.qbank-runner .nav-cell:hover { filter: brightness(.96); }
.qbank-runner .nav-cell.current { box-shadow: 0 0 0 2px var(--ink); border-color: var(--ink); }
.qbank-runner .nav-cell .nc-badge {
  position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.qbank-runner .nc-badge svg { width: 9px; height: 9px; color: #fff; stroke-width: 3.2; }
.qbank-runner .nc-badge.nc-ok   { background: var(--ok); }
.qbank-runner .nc-badge.nc-bad  { background: var(--bad); }
.qbank-runner .nc-badge.nc-flag { background: var(--bad); top: -6px; left: -6px; right: auto; }
.qbank-runner .nc-badge.nc-flag svg { fill: #fff; }
.qbank-runner .qbank-legend { align-items: center; gap: 12px 16px; }
.qbank-runner .nc-swatch { display: inline-block; width: 13px; height: 13px; border-radius: 4px; vertical-align: -2px; margin-right: 3px; border: 1.5px solid; }
.qbank-runner .nc-swatch.nc-easy   { background: var(--ok-bg);   border-color: var(--ok); }
.qbank-runner .nc-swatch.nc-medium { background: var(--warn-bg); border-color: var(--warn); }
.qbank-runner .nc-swatch.nc-hard   { background: var(--bad-bg);  border-color: var(--bad); }
.qbank-runner .nc-legend-badge { position: static; width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; border: none; }
.nav-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* break / module-review screens */
.center-screen { flex: 1; display: grid; place-items: center; padding: 30px; }
.center-screen .inner { max-width: 560px; text-align: center; }
.big-icon { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; margin: 0 auto 22px; }
.big-icon svg { width: 38px; height: 38px; }

/* results */
.score-hero { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.score-big { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.4rem, 2rem + 6vw, 5.6rem); line-height: 1; letter-spacing: -.03em; }
.score-big small { font-size: 1.4rem; color: var(--faint); }
.domain-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.domain-row:last-child { border-bottom: none; }
.domain-row .d-name { flex: 1; font-weight: 500; }
.domain-row .d-frac { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; width: 56px; text-align: right; }
.domain-row .bar { width: 160px; flex-shrink: 0; }

.review-item { padding: 13px 0; border-bottom: 1px solid var(--border); }
.review-q { display: flex; gap: 12px; align-items: flex-start; }
/* the trailing chevron is an icon() svg with no width/height — constrain it so it doesn't balloon
   in the flex row and crush the text column to one word per line */
.review-q > svg { width: 18px; height: 18px; flex: 0 0 auto; align-self: center; color: var(--faint); transition: transform var(--t-fast); }
.review-item[open] > .review-q > svg { transform: rotate(180deg); }
.review-mark { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; }
.review-mark svg { width: 15px; height: 15px; }
.review-mark.ok { background: var(--ok-bg); color: var(--ok); }
.review-mark.bad { background: var(--bad-bg); color: var(--bad); }
.review-mark.skip { background: var(--surface-3); color: var(--muted-2); }

.seg { display: inline-flex; padding: 4px; background: var(--surface-2); border-radius: var(--pill); border: 1px solid var(--border); }
.seg button { padding: 7px 16px; border-radius: var(--pill); font-weight: 600; font-size: .86rem; color: var(--muted); transition: all var(--t-fast); }
.seg button.active { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-xs); }

/* empty state */
.empty { text-align: center; padding: 56px 24px; }
.empty .big-icon { background: var(--surface-2); color: var(--faint); }

/* skeleton */
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); }

/* ======================================================================
   ANIMATIONS
   ====================================================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes popIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes navDrop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }

.spinner { width: 20px; height: 20px; border: 2.5px solid var(--brand-200); border-top-color: var(--brand-600); border-radius: 50%; animation: spin .7s linear infinite; }

/* scroll reveal — One UI-style fluid rise with soft settle */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--ease-out), transform .9s var(--ease-spring); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* view transition for SPA */
.view-enter { animation: viewIn var(--t-slow) var(--ease-spring); }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ======================================================================
   LANDING-SPECIFIC
   ====================================================================== */
.hero { position: relative; padding-block: clamp(56px, 7vw, 104px); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.blob-1 { width: 460px; height: 460px; background: var(--brand-200); top: -160px; right: -120px; }
.blob-2 { width: 380px; height: 380px; background: #cffafe; bottom: -180px; left: -120px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }

.pill-stat { display: inline-flex; align-items: center; gap: 9px; padding: 7px 8px 7px 16px; border-radius: var(--pill);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: .88rem; font-weight: 500; white-space: nowrap; }
.pill-stat svg { width: 17px; height: 17px; flex-shrink: 0; }
.pill-stat b { color: var(--ink); }
.avatars { display: flex; }
.avatars .av { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -9px; background: var(--brand-300); }

.feature-icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; }
.feature-icon svg { width: 24px; height: 24px; }
.fi-brand { background: var(--brand-50); color: var(--brand-600); }
.fi-rw { background: var(--rw-bg); color: var(--rw); }
.fi-math { background: var(--math-bg); color: var(--math); }
.fi-ok { background: var(--ok-bg); color: var(--ok); }

/* mock test preview card in hero */
.mock {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden; transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform var(--t-slow) var(--ease);
}
.mock:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.mock-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mock-body { padding: 22px; }
.mock-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border-2); border-radius: var(--r-sm); margin-bottom: 10px; font-size: .92rem; }
.mock-choice.sel { border-color: var(--brand-600); background: var(--brand-50); }
.mock-choice .k { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.mock-choice.sel .k { background: var(--brand-600); color: #fff; }

.logo-strip { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; opacity: .65; }
.logo-strip span { font-weight: 600; color: var(--muted-2); font-size: 1.05rem; letter-spacing: -.01em; }

.step { position: relative; padding-left: 56px; }
.step .step-n { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-600); color: #fff; display: grid; place-items: center; font-weight: 700; box-shadow: var(--shadow-brand); }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; text-align: left; font-weight: 600; font-size: 1.06rem; }
.faq-q svg { width: 20px; height: 20px; color: var(--muted-2); transition: transform var(--t); flex-shrink: 0; }
.faq-item.open .faq-q svg { transform: rotate(45deg); color: var(--brand-600); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease); }
.faq-a-inner { padding-bottom: 22px; color: var(--muted); line-height: 1.65; }

.cta-band { background: linear-gradient(135deg, var(--brand-700), var(--brand-500)); border-radius: var(--r-xl); padding: clamp(40px, 5vw, 72px); color: #fff; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(255,255,255,.85); }
.cta-band .blob { opacity: .25; }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .mock { transform: none; max-width: 460px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .section { padding-block: 60px; }
  .nav-desktop { display: none; }
  .nav-shell { width: auto; margin-inline: 12px; min-height: 60px; padding: 8px 10px 8px 16px; border-radius: 14px; gap: 10px; }
  .brand-logo { height: 38px; }
  .brand-name { font-size: 1.12rem; }
  .engine-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
  .engine-body.two-pane { display: flex; flex-direction: column; }
  .pane-left { border-right: none; border-bottom: 1px solid var(--border); max-height: 42%; }
  .pane { padding: 22px 20px 48px; }
  .footer-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-2, .grid-stats { grid-template-columns: minmax(0, 1fr); }
  .score-hero { gap: 24px; }
  .container { padding-inline: 18px; }
  .engine-top, .engine-bottom { padding-inline: 14px; }
  .engine-top .et-title small { display: none; }
  .btn-lg { padding: 13px 22px; }
}
@media (max-width: 460px) {
  .nav-pill span.label-full { display: none; }
  .timer { font-size: .95rem; padding: 6px 12px; }
}

/* mobile nav drawer */
.menu-btn { display: none; }
.mobile-drawer { position: fixed; inset: 0; z-index: 60; background: var(--surface); padding: 24px; transform: translateX(100%); transition: transform var(--t-slow) var(--ease); }
.mobile-drawer.open { transform: none; }
.mobile-drawer a { display: block; padding: 16px 4px; font-size: 1.15rem; font-weight: 500; border-bottom: 1px solid var(--border); }
@media (max-width: 720px) { .menu-btn { display: inline-grid; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .mock { transform: none; }
}

/* print results */
@media print {
  .site-header, .sidebar, .app-topbar, .engine-bottom, .engine-top, .btn, .seg { display: none !important; }
  body { background: #fff; }
  body.has-sidebar .app-main { padding-left: 0 !important; }
}

/* ======================================================================
   APP SIDEBAR — One UI grouped "windows"
   ====================================================================== */
body.has-sidebar { background:
   radial-gradient(1200px 600px at -10% -10%, rgba(209,29,43,.06), transparent 60%),
   radial-gradient(1000px 500px at 110% 10%, rgba(8,145,178,.05), transparent 55%), var(--bg); }
body.has-sidebar .app-main { padding-left: 260px; padding-top: 24px; }
/* App content hugs the sidebar (drop the big centering gap) and gets more width for 5-up grids */
body.has-sidebar .app-main .container { --container: 1560px; margin-inline: 0; }

.sidebar {
  position: fixed; left: 16px; top: 16px; bottom: 16px; width: 228px; z-index: 60;
  display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overflow-x: hidden;
  padding-right: 2px; animation: navDrop .7s var(--ease-spring) both; scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }

.side-win {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px; padding: 3px 9px;
  box-shadow: 0 14px 40px -18px rgba(15, 23, 42, .26), 0 3px 10px -6px rgba(15, 23, 42, .10);
}
.side-win-logo { padding: 12px 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.side-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; border-radius: 12px;
  transition: transform .5s var(--ease-spring); will-change: transform; transform-style: preserve-3d; }
.side-logo:hover .brand-logo { filter: drop-shadow(0 8px 16px rgba(176, 18, 31, .5)); }
.side-logo:active { transform: scale(.96); }
.side-logo .brand-logo { height: 60px; width: auto; display: block; filter: drop-shadow(0 6px 12px rgba(176, 18, 31, .34)); animation: logoFloat 4.5s ease-in-out infinite; }
@keyframes logoFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
.side-logo .brand-name { font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.side-logo .brand-name b { color: var(--brand-600); }

.side-nav { display: flex; flex-direction: column; gap: 3px; position: relative; }
.side-pill { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 10px;
  background: var(--brand-600); box-shadow: var(--shadow-brand); z-index: 0; opacity: 0; pointer-events: none;
  transition: transform var(--t-slow) var(--ease-spring), height var(--t) var(--ease), opacity var(--t); }
.side-pill.show { opacity: 1; }
.side-group-label { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); padding: 9px 12px 5px; }
.side-item {
  display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 10px;
  color: var(--muted); font-weight: 600; font-size: .93rem; cursor: pointer; width: 100%;
  text-align: left; border: none; background: transparent; position: relative; z-index: 1;
  transition: background var(--t) var(--ease), color var(--t-fast), transform var(--t-fast) var(--ease-spring);
}
.side-item svg { width: 21px; height: 21px; flex-shrink: 0; transition: transform var(--t) var(--ease-spring); }
.side-item .si-badge { margin-left: auto; font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--brand-50); color: var(--brand-700); }
.side-item:hover { background: var(--surface-2); color: var(--ink); }
.side-item:hover svg { transform: scale(1.12); }
.side-item:active { transform: scale(.97); }
.side-item.active { background: transparent; color: #fff; box-shadow: none; }
.side-item.active:hover { background: transparent; color: #fff; }
.side-item.active svg { color: #fff; }
.side-item.active .si-badge { background: rgba(255,255,255,.25); color: #fff; }
.side-spacer { flex: 1 1 auto; min-height: 4px; }
.side-account { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; cursor: pointer; transition: background var(--t); width: 100%; border: none; background: transparent; text-align: left; position: relative; z-index: 1; }
.side-account:hover { background: var(--surface-2); }
.side-account.active, .side-account.active:hover { background: transparent; }
.side-account.active .sa-name, .side-account.active .sa-mail { color: #fff; }
.side-account .sa-name { font-weight: 600; font-size: .9rem; color: var(--ink); line-height: 1.1; }
.side-account .sa-mail { font-size: .72rem; color: var(--muted-2); }

/* mobile top bar (only shows on narrow screens) */
.app-topbar { display: none; }

/* ======================================================================
   PRACTICE RUNNER (single-question, instant feedback)
   ====================================================================== */
.runner { max-width: 860px; margin-inline: auto; }
.runner-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.runner-bar .bar { flex: 1; }
.practice-card { padding: 28px; }
.feedback { margin-top: 18px; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--border); animation: viewIn .4s var(--ease-spring); }
.feedback.good { background: var(--ok-bg); border-color: var(--ok-bd); }
.feedback.bad { background: var(--bad-bg); border-color: var(--bad-bd); }
.feedback h4 { display: flex; align-items: center; gap: 8px; font-size: .95rem; margin-bottom: 8px; }
.feedback.good h4 { color: var(--ok); } .feedback.bad h4 { color: var(--bad); }
.feedback svg { width: 18px; height: 18px; }

/* ======================================================================
   VOCABULARY FLASHCARD
   ====================================================================== */
.flash { perspective: 1600px; max-width: 560px; margin: 0 auto; }
.flash-inner { position: relative; width: 100%; min-height: 280px; transform-style: preserve-3d; transition: transform .6s var(--ease-spring); cursor: pointer; }
.flash.flipped .flash-inner { transform: rotateY(180deg); }
.flash-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 32px; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-md); }
.flash-back { transform: rotateY(180deg); background: var(--brand-50); }
.flash-word { font-family: var(--font-display); font-size: 2.2rem; font-weight: 500; color: var(--ink); }
.flash-pos { font-size: .85rem; color: var(--muted-2); margin-top: 4px; font-style: italic; }
.flash-def { font-size: 1.1rem; line-height: 1.5; color: var(--ink-2); }
.flash-ex { font-size: .92rem; color: var(--muted); margin-top: 14px; font-style: italic; }
.flash-hint { font-size: .76rem; color: var(--faint); margin-top: 18px; }
.flash-camb { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .82rem;
  font-weight: 600; color: var(--brand-600); text-decoration: none; }
.flash-camb:hover { text-decoration: underline; }
.flash-camb svg { width: 14px; height: 14px; }

/* definition panel — example + source footer + Cambridge link */
.define-panel .dp-ex { font-size: .86rem; color: var(--muted); font-style: italic; margin-top: 8px; }
.define-panel .dp-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dp-camb { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600;
  color: var(--brand-600); text-decoration: none; }
.dp-camb:hover { text-decoration: underline; }
.dp-camb svg { width: 14px; height: 14px; }
.dp-src { font-size: .66rem; color: var(--faint); white-space: nowrap; }

/* Vocabulary level cards (A1–C2) */
.vocab-level { width: 100%; text-align: left; font: inherit; cursor: pointer; padding: 22px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; border-top: 3px solid var(--lc); }
.vocab-level .vocab-level-badge { display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; background: var(--lc); color: #fff;
  font-weight: 800; font-size: 1.12rem; box-shadow: var(--shadow-sm); }
.vocab-level .vocab-level-name { font-size: 1.14rem; margin: 0; color: var(--ink); }
.vocab-level .vocab-level-meta { margin-top: 4px; display: flex; align-items: center; gap: 8px;
  color: var(--muted-2); font-size: .85rem; }

/* ===================== QUESTION BANK (Digital SAT blueprint) ===================== */
/* difficulty filter tabs */
.qb-diff { display: inline-flex; gap: 4px; padding: 4px; margin: 18px 0 22px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); }
/* difficulty filter is now a pill-seg; the sliding thumb takes on the active difficulty's colour */
.qb-diff[data-active="all"]    .pill-thumb { background-color: var(--brand-600); }
.qb-diff[data-active="easy"]   .pill-thumb { background-color: var(--ok); }
.qb-diff[data-active="medium"] .pill-thumb { background-color: var(--warn); }
.qb-diff[data-active="hard"]   .pill-thumb { background-color: var(--bad); }
.qb-diff[data-active="marked"] .pill-thumb { background-color: #7c5cff; }
.qb-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
.qb-col { min-width: 0; }
.qb-rw { padding-right: 44px; }
.qb-math { padding-left: 44px; border-left: 1px solid var(--border); }
.qb-head { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.qb-title { font-size: 1.32rem; margin: 0; line-height: 1.1; }
.qb-total { color: var(--muted); font-size: .8rem; }
.qb-start { flex-shrink: 0; }
.qb-domain { border-bottom: 1px solid var(--border); }
.qb-domain:last-child { border-bottom: none; }
.qb-domain-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 6px;
  background: none; border: none; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
  border-radius: 10px; transition: background var(--t); }
.qb-domain-head:hover { background: var(--surface-2); }
.qb-chev { display: inline-flex; color: var(--muted-2); transition: transform .35s var(--ease-spring); }
.qb-chev svg { width: 16px; height: 16px; }
.qb-domain:not(.collapsed) .qb-chev { transform: rotate(90deg); }
.qb-domain-name { font-weight: 700; font-size: .97rem; flex: 1; min-width: 0; }
.qb-domain-count { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.qb-skills { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .42s var(--ease-spring); }
.qb-domain.collapsed .qb-skills { grid-template-rows: 0fr; }
.qb-skills-in { overflow: hidden; min-height: 0; margin-left: 14px; border-left: 1.5px solid var(--border); }
.qb-domain { padding-bottom: 2px; }
.qb-skill { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 6px 8px 18px; color: var(--ink-2); font-size: .89rem; border-radius: 8px;
  transition: background var(--t), padding-left var(--t); }
.qb-skill:hover { background: var(--surface-2); padding-left: 22px; }
.qb-skill-count { color: var(--muted-2); font-size: .8rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* clickable domain/skill rows → launch the runner */
.qb-skill { width: 100%; font: inherit; background: none; border: none; cursor: pointer; }
.qb-skill .qb-skill-name { flex: 1; min-width: 0; text-align: left; }
.qb-go { display: inline-flex; flex-shrink: 0; color: var(--muted-2); opacity: 0; transform: translateX(-5px); transition: opacity var(--t), transform var(--t); }
.qb-go svg { width: 16px; height: 16px; }
.qb-domain-head:hover .qb-go, .qb-skill:hover .qb-go { opacity: 1; transform: translateX(0); }
/* filter moved into a compact top-left row so it no longer eats a whole row of vertical space */
.qb-headwrap { margin-bottom: 24px; }
.qb-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.qb-h1 { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); display: inline-flex; align-items: center; gap: 11px; }
.qb-h1 svg { color: var(--brand-600); }
.qb-h1.qb-h1-brand { color: var(--brand-600); }

/* Dashboard "Accuracy by skill" cards (Question Bank data view) */
.qb-focus-row { display: flex; flex-direction: column; gap: 9px; }
.qbf-skill { font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.2; }
.qbf-acc { display: flex; align-items: center; gap: 11px; }
.qbf-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(127, 127, 127, .16); overflow: hidden; }
.qbf-bar i { display: block; height: 100%; border-radius: 99px; transition: width .5s ease; }
.qbf-pct { font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 42px; text-align: right; }
.qb-diff { margin: 0; }
/* Question Bank section, a touch enlarged now that the filter row is gone */
.qb-page .qb-title { font-size: 1.44rem; }
.qb-page .qb-domain-name { font-size: 1rem; }
.qb-page .qb-skill { font-size: .92rem; }
/* a little breathing room between the domain groups within a section */
.qb-page .qb-domain { margin-bottom: 16px; padding-bottom: 8px; }
.qb-page .qb-domain:last-child { margin-bottom: 0; }
/* attempted-count meter (how many questions have been tried) */
.qb-prog { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qb-bar { width: 62px; height: 6px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.qb-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent, #4a7dff); transition: width .45s var(--ease-spring); }
.qb-frac { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.qb-secmeter { display: flex; align-items: center; gap: 10px; padding: 8px 4px 12px; }
.qb-secmeter .qb-prog-lg .qb-bar { width: 150px; height: 9px; }
.qb-secmeter .qb-frac { font-size: .86rem; color: var(--ink-2); min-width: 0; }
.qb-secmeter-label { color: var(--muted-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
/* legal / trademark disclaimer at the foot of the Question Bank */
.qb-legal { margin: 46px auto 10px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted-2); font-size: .74rem; line-height: 1.6; max-width: 920px; }
.qb-legal p { margin: 0 0 9px; }
.qb-legal p:last-child { margin-bottom: 0; }

/* Question Bank runner (Bluebook-style, count-up timer) */
/* Bluebook "barcode" ribbon — long, thin, red-only dashes (shared by both runners). */
.qr-rule { flex-shrink: 0; height: 2px; border: none; opacity: .9;
  background: repeating-linear-gradient(90deg, var(--brand-600) 0 26px, transparent 26px 40px); }
[data-theme="dark"] .qr-rule { background: repeating-linear-gradient(90deg, var(--brand-600) 0 26px, transparent 26px 40px); }
.qr-rule-sm { margin: 12px 0 16px; }
.qr-result { margin-bottom: 16px; }
.qr-result .q-num { width: 28px; height: 28px; border-radius: 8px; }
.qr-result .choice { pointer-events: none; }
.qr-expl { margin-top: 14px; padding: 13px 16px; background: var(--surface-2); border-radius: var(--r);
  font-size: .92rem; line-height: 1.6; color: var(--ink-2); }
.qr-expl b { color: var(--ink); }
/* annotation tool */
.qr-tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill);
  font-size: .82rem; font-weight: 600; color: var(--muted); border: 1px solid var(--border); background: none;
  cursor: pointer; transition: all var(--t-fast); }
.qr-tool:hover { background: var(--surface-2); color: var(--ink); }
.qr-tool.on { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.qr-tool svg { width: 15px; height: 15px; }
.annotating .passage, .annotating .q-prompt { cursor: text; }
mark.annot { background: #fde68a; color: #422006; border-radius: 3px; padding: 0 1px; cursor: pointer; }
mark.annot.has-note { box-shadow: inset 0 -2px 0 #d97706; }
[data-theme="dark"] mark.annot { background: rgba(250, 204, 21, .32); color: #fde68a; }
.annot-pop { position: fixed; z-index: 95; width: 260px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 12px; animation: modalIn .2s var(--ease-spring); }
.annot-note { width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  font: inherit; font-size: .9rem; line-height: 1.5; background: var(--surface-2); color: var(--ink); }
.annot-note:focus { outline: none; border-color: var(--brand-600); }

/* ===== Question Bank runner — Bluebook-style chrome ===== */
.engine-top.qr-top { height: auto; min-height: 68px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px; padding: 8px 20px; border-bottom: none; }
.qr-top-left { justify-self: start; display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
.qr-top-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* clickable EliteXSAT logo (no wobble) with a subtle red hover glow */
.qr-logo { position: relative; flex-shrink: 0; display: inline-grid; place-items: center; padding: 3px;
  border: none; background: none; cursor: pointer; border-radius: 12px; }
.qr-logo img { position: relative; z-index: 1; height: 38px; width: auto; display: block;
  transition: filter .25s var(--ease), transform .2s var(--ease-spring); }
.qr-logo::before { content: ""; position: absolute; inset: -5px; z-index: 0; border-radius: 15px; opacity: 0;
  background: radial-gradient(closest-side, rgba(209, 29, 43, .35), rgba(209, 29, 43, .08) 65%, transparent);
  transition: opacity .25s var(--ease); }
.qr-logo:hover::before, .qr-logo:focus-visible::before { opacity: 1; }
.qr-logo:hover img { filter: drop-shadow(0 5px 12px rgba(209, 29, 43, .45)); transform: translateY(-1px); }
.qr-logo:active img { transform: scale(.94); }
.qr-logo:focus-visible { outline: none; }
.qr-top .et-title { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.qr-directions { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 1px 0;
  background: none; border: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.qr-directions svg { width: 14px; height: 14px; }
.qr-clock-wrap { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qr-time { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; min-height: 1.3em; }
.qr-time.hidden::after { content: "\2014 : \2014"; color: var(--muted-2); font-weight: 500; }
.qr-time.warn { color: var(--warn); }
.qr-hide { border: 1px solid var(--ink-2); background: var(--surface); border-radius: var(--pill); padding: 2px 18px;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.qr-hide:hover { background: var(--surface-2); }
.qr-tools { justify-self: end; display: flex; align-items: center; gap: 2px; }
.qr-tool2 { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 12px; border-radius: 10px;
  background: none; border: none; font: inherit; font-size: .72rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background var(--t); }
.qr-tool2:hover { background: var(--surface-2); }
.qr-tool2.on { color: var(--brand-600); }
.qr-tool2 svg { width: 20px; height: 20px; }
@media (max-width: 720px) { .qr-tool2 span { display: none; } }

/* pane expand tools */
.qr-pane-toolbar { display: flex; margin-bottom: 8px; }
.pane-left .qr-pane-toolbar { justify-content: flex-end; }
.pane-right .qr-pane-toolbar { justify-content: flex-start; }
.qr-pane-tool { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted-2); cursor: pointer; box-shadow: var(--shadow-sm); }
.qr-pane-tool:hover { background: var(--surface-2); color: var(--ink); }
.qr-pane-tool svg { width: 15px; height: 15px; }
.qbank-runner .engine-body.two-pane { display: flex; }
.qbank-runner .engine-body.two-pane > .pane-left { flex: var(--lf, 50) 1 0; min-width: 0; border-right: none; }
.qbank-runner .engine-body.two-pane > .pane-right { flex: var(--rf, 50) 1 0; min-width: 0; }
.qr-splitter { flex: 0 0 1px; align-self: stretch; position: relative; background: var(--border); cursor: col-resize; }
.qr-splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: -6px; right: -6px; cursor: col-resize; }
.qr-splitter:hover, .engine-body.splitting .qr-splitter { background: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }
.engine-body.splitting, .engine-body.splitting * { cursor: col-resize !important; user-select: none; }
@media (max-width: 720px) {
  .qbank-runner .engine-body.two-pane { flex-direction: column; }
  .qbank-runner .engine-body.two-pane > .pane-left, .qbank-runner .engine-body.two-pane > .pane-right { flex: 1 1 auto; }
  .qr-splitter { display: none; }
}

/* ===== Ownership watermark (tiled "Eljan Ahmadli" + faint center logo) — light enough to read through, proves the page is EliteXSAT in any screenshot.
   Lives INSIDE .engine-stage (the middle area between the top/bottom ribbons) so it NEVER crosses the header/footer chrome.
   z-index 4 paints above the passage/question content but under every menu (navigator/more 90, annot-pop 95, modals 100+);
   pointer-events:none keeps text selection (annotation) and all buttons usable. Applies to BOTH the Question Bank runner and the full mock-test engine. */
.engine .qr-watermark {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden;
  background-repeat: repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='172'%3E%3Ctext x='150' y='95' fill='%23151519' fill-opacity='0.07' font-family='Segoe%20UI,system-ui,Arial,sans-serif' font-size='20' letter-spacing='0.5' text-anchor='middle' transform='rotate(-28 150 90)'%3EEljan%20Ahmadli%3C/text%3E%3C/svg%3E");
}
[data-theme="dark"] .engine .qr-watermark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='172'%3E%3Ctext x='150' y='95' fill='%23ffffff' fill-opacity='0.08' font-family='Segoe%20UI,system-ui,Arial,sans-serif' font-size='20' letter-spacing='0.5' text-anchor='middle' transform='rotate(-28 150 90)'%3EEljan%20Ahmadli%3C/text%3E%3C/svg%3E");
}
.engine .qr-wm-logo {
  position: absolute; top: 50%; left: 50%; width: min(42vw, 460px); height: auto;
  /* logo.png already has a ~5deg clockwise tilt baked into the image, so 0deg extra rotation makes the
     watermark match the user's 000-removebg-preview.png reference exactly (don't re-add rotation here). */
  transform: translate(-50%, -50%) rotate(0deg); opacity: 0.10; user-select: none; -webkit-user-drag: none;
}
[data-theme="dark"] .engine .qr-wm-logo { opacity: 0.125; }

/* question header: number + Mark for Review + ABC */
.qr-qhead { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px 7px 8px; }
.qr-mark { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 8px; background: none;
  border: none; font: inherit; font-size: .9rem; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.qr-mark:hover { background: var(--surface-2); }
.qr-mark.on { color: var(--brand-600); }
.qr-mark.on svg { fill: var(--brand-600); }
.qr-mark svg { width: 17px; height: 17px; }
.qr-tally { font-size: .76rem; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 4px 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qr-abc { margin-left: auto; min-width: 42px; padding: 4px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink-2); cursor: pointer; text-decoration: line-through; }
.qr-abc:hover { background: var(--surface-2); }
.qr-abc.on { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }

/* Question Bank "Check answer" button — sits left of ABC, starts in the selected-choice blue,
   then flips green (Correct) / red (Incorrect) when tapped. Only in the bank, not the timed exam. */
/* Un-push ABC ONLY when a Check button shares the header (Question Bank). In the timed exam
   there is no .qr-check, so ABC keeps margin-left:auto and sits at the far right of the window. */
.qr-qhead:has(.qr-check) .qr-abc { margin-left: 0; }
.qr-check { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 42px; padding: 4px 13px; border: 1px solid var(--pick); border-radius: 8px;
  background: var(--pick-bg); color: var(--pick); font: inherit; font-size: .84rem; font-weight: 700;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.qr-check:hover { filter: brightness(.97); }
.qr-check.correct { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.qr-check.wrong { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
[data-theme="dark"] .qr-check { background: rgba(59,91,219,.20); color: #b3c0f7; border-color: rgba(59,91,219,.55); }
[data-theme="dark"] .qr-check.correct { background: var(--ok-bg); color: #6ee7b7; border-color: var(--ok-bd); }
[data-theme="dark"] .qr-check.wrong { background: var(--bad-bg); color: #fda4af; border-color: var(--bad-bd); }

/* "More" dropdown */
.qr-more-menu { position: fixed; z-index: 90; min-width: 162px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; animation: modalIn .18s var(--ease-spring); }
.qr-more-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border-radius: 8px; background: none;
  border: none; font: inherit; font-size: .88rem; color: var(--ink); cursor: pointer; text-align: left; }
.qr-more-item:hover { background: var(--surface-2); }
.qr-more-item svg { width: 16px; height: 16px; color: var(--muted-2); }

/* Appearance (White / Dark) menu — opened from the "Appearance" tool.
   These just drive the app's real light/dark theme, so no per-exam token overrides. */
.qr-bg-menu { position: fixed; z-index: 90; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px 13px 13px; animation: modalIn .18s var(--ease-spring); }
.qr-bg-title { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.qr-bg-grid { display: flex; gap: 8px; }
.qr-bg-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; padding: 8px 4px 7px;
  border-radius: 11px; background: none; border: 1.5px solid transparent; cursor: pointer; font: inherit; }
.qr-bg-swatch:hover { background: var(--surface-2); }
.qr-bg-swatch.on { border-color: var(--brand-600); background: var(--brand-50); }
.qr-bg-dot { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); background: var(--surface); }
.qr-bg-lbl { font-size: .73rem; color: var(--ink-2); font-weight: 500; }
.qr-bg-swatch.on .qr-bg-lbl { color: var(--brand-600); }

@media (max-width: 820px) {
  .qb-grid { grid-template-columns: 1fr; }
  .qb-rw { padding-right: 0; }
  .qb-math { padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 22px; margin-top: 12px; }
}

/* ======================================================================
   PRICING
   ====================================================================== */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.price-card { padding: 30px; display: flex; flex-direction: column; position: relative; }
.price-card.featured { border-color: var(--brand-300); box-shadow: var(--shadow-lg); }
.price-card.featured::before { content: "Most popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brand-600); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: 4px 14px; border-radius: 99px; }
.price-amt { font-family: var(--font-display); font-size: 2.8rem; font-weight: 500; line-height: 1; margin: 8px 0; }
.price-amt small { font-size: 1rem; color: var(--muted-2); font-family: var(--font-ui); }
.price-feat { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: .92rem; color: var(--ink-2); }
.price-feat svg { width: 18px; height: 18px; color: var(--ok); flex-shrink: 0; margin-top: 2px; }

/* segmented theme control */
.theme-seg { display: inline-flex; padding: 4px; background: var(--surface-2); border-radius: var(--pill); border: 1px solid var(--border); }
.theme-seg button { display: flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--pill); font-weight: 600; font-size: .86rem; color: var(--muted); transition: all var(--t) var(--ease); }
.theme-seg button svg { width: 16px; height: 16px; }
.theme-seg button.active { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-xs); }

/* ======================================================================
   DARK THEME (applied via [data-theme="dark"] — set from system or toggle)
   ====================================================================== */
[data-theme="dark"] {
  --ink: #eef2f7; --ink-2: #dbe2ec; --muted: #9aa7b8; --muted-2: #7d8a9d; --faint: #5a6779;
  --bg: #0a0e15; --surface: #141a23; --surface-2: #1c2330; --surface-3: #28313f;
  --border: #232c3b; --border-2: #313c4e;
  --brand-50: rgba(209, 29, 43, .18);
  --rw-bg: rgba(139, 92, 246, .16); --math-bg: rgba(34, 211, 238, .14);
  --ok-bg: rgba(16, 185, 129, .15); --ok-bd: rgba(16, 185, 129, .42);
  --bad-bg: rgba(244, 63, 94, .15); --bad-bd: rgba(244, 63, 94, .42);
  --warn-bg: rgba(245, 158, 11, .15);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px -4px rgba(0,0,0,.6), 0 2px 8px -2px rgba(0,0,0,.5);
  --shadow-lg: 0 22px 48px -14px rgba(0,0,0,.7), 0 6px 16px -8px rgba(0,0,0,.5);
  --shadow-brand: 0 12px 30px -10px rgba(209, 29, 43, .6);
  color-scheme: dark;
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .site-header .nav-shell,
[data-theme="dark"] .side-win { background: rgba(22, 28, 38, .72); border-color: rgba(255, 255, 255, .07); }
[data-theme="dark"] .mobile-drawer { background: var(--surface); }
[data-theme="dark"] .toast { background: var(--surface-3); color: var(--ink); border: 1px solid var(--border-2); }
[data-theme="dark"] .q-num { background: var(--brand-600); color: #fff; }
[data-theme="dark"] .nav-pill { background: var(--brand-600); }
[data-theme="dark"] .btn-dark { background: var(--surface-3); color: var(--ink); }
[data-theme="dark"] .btn-outline { background: transparent; }
[data-theme="dark"] .input { background: var(--surface-2); border-color: var(--border-2); color: var(--ink); }
[data-theme="dark"] .choice { background: var(--surface-2); }
[data-theme="dark"] .choice:hover { border-color: var(--warn); background: rgba(217,119,6,.14); }
[data-theme="dark"] .choice.selected { background: rgba(59,91,219,.18); }
[data-theme="dark"] .skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; }
[data-theme="dark"] .hero-bg .blob { opacity: .22; }
[data-theme="dark"] .logo-strip span, [data-theme="dark"] .mock { color: var(--ink); }
[data-theme="dark"] img.brand-logo { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }

/* ======================================================================
   RESPONSIVE — sidebar → off-canvas drawer + mobile topbar
   ====================================================================== */
@media (max-width: 900px) {
  body.has-sidebar .app-main { padding-left: 0; padding-top: 78px; }
  .sidebar {
    top: 0; left: 0; bottom: 0; width: 280px; padding: 14px;
    background: var(--bg); border-right: 1px solid var(--border);
    transform: translateX(-108%); transition: transform .42s var(--ease-spring); animation: none;
    box-shadow: 0 0 60px rgba(0,0,0,.3);
  }
  .sidebar.open { transform: none; }
  .app-topbar {
    display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; height: 62px; z-index: 55;
    padding: 0 16px; background: rgba(255,255,255,.8); backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--border);
  }
  [data-theme="dark"] .app-topbar { background: rgba(12,16,22,.8); }
  .app-topbar .brand-logo { height: 36px; }
  .app-topbar .brand-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
  .scrim { position: fixed; inset: 0; background: rgba(2,6,12,.5); z-index: 58; opacity: 0; pointer-events: none; transition: opacity var(--t); }
  .scrim.show { opacity: 1; pointer-events: auto; }
}
@media (max-width: 560px) {
  .price-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   READING LIBRARY
   ====================================================================== */
.read-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; height: 100%; cursor: pointer; }
.read-card h3 { font-size: 1.08rem; line-height: 1.3; }
.read-card .rc-meta { margin-top: auto; display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: .82rem; }
.band-easy   { background: var(--ok-bg);    color: var(--ok);       border-color: var(--ok-bd); }
.band-middle { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.band-hard   { background: var(--bad-bg);   color: var(--bad);      border-color: var(--bad-bd); }

/* One UI sliding-pill segmented control (reusable, single-select) */
.cefr-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cefr-label { margin-right: 2px; }
.pill-seg { position: relative; display: inline-flex; align-items: center; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--pill); padding: 4px; max-width: 100%;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pill-seg::-webkit-scrollbar { display: none; }
.pill-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--pill);
  background-color: var(--brand-600); box-shadow: var(--shadow-sm); z-index: 0;
  transition: transform var(--t-slow) var(--ease-spring), width var(--t-slow) var(--ease-spring); }
.pill-opt { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--pill); font-weight: 600; font-size: .86rem; color: var(--muted);
  background: transparent; border: none; cursor: pointer; white-space: nowrap; transition: color var(--t); }
.pill-opt svg { width: 15px; height: 15px; }
@media (max-width: 480px) { .pill-opt { padding: 7px 11px; font-size: .8rem; } }
.pill-opt:hover { color: var(--ink); }
.pill-opt.active { color: #fff; }

/* reader */
.reader { width: min(94%, 1200px); margin-inline: auto; }
.reader-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.reader-title { min-width: 0; }
.reader-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
@media (max-width: 760px) { .reader-controls { align-items: stretch; width: 100%; flex-shrink: 1; min-width: 0; } }
.reader-body { font-family: var(--font-read); font-size: 1.14rem; line-height: 1.95; color: var(--ink-2);
  overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.reader-body p { margin-bottom: 1.05em; }
/* per-word spans — every word is tappable; CEFR highlight is opt-in per level */
.reader-body .w { border-radius: 5px; cursor: pointer; transition: background .12s ease; }
.reader-body .w:hover { background: var(--surface-2); }
/* multi-select highlight: one container class per active level lights its words */
.reader-body.lv-A1 .w[data-lv="A1"] { background: rgba(16, 185, 129, .20); box-shadow: inset 0 -2px 0 #10b981; }
.reader-body.lv-A2 .w[data-lv="A2"] { background: rgba(6, 182, 212, .20);  box-shadow: inset 0 -2px 0 #06b6d4; }
.reader-body.lv-B1 .w[data-lv="B1"] { background: rgba(59, 130, 246, .20); box-shadow: inset 0 -2px 0 #3b82f6; }
.reader-body.lv-B2 .w[data-lv="B2"] { background: rgba(139, 92, 246, .20); box-shadow: inset 0 -2px 0 #8b5cf6; }
.reader-body.lv-C1 .w[data-lv="C1"] { background: rgba(245, 158, 11, .24); box-shadow: inset 0 -2px 0 #f59e0b; }
.reader-body.lv-C2 .w[data-lv="C2"] { background: rgba(239, 68, 68, .24);  box-shadow: inset 0 -2px 0 #ef4444; }
.reader-body .w.picked { background: rgba(209, 29, 43, .18) !important; box-shadow: inset 0 -2px 0 var(--brand-600) !important; }

/* definition panel */
.define-panel { position: fixed; z-index: 120; bottom: 18px; right: 18px; width: min(380px, calc(100vw - 36px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 18px 20px; animation: modalIn .32s var(--ease-spring); }
.define-panel .dp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.define-panel .dp-word { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.define-panel .dp-pos { font-size: .85rem; color: var(--brand-600); font-style: italic; font-weight: 600; }
.define-panel .dp-def { color: var(--ink-2); line-height: 1.55; margin-top: 8px; }
.define-panel .dp-syn { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.define-panel .dp-syn .badge { cursor: pointer; }
.define-panel .dp-cefr { margin-top: 10px; }
.define-panel .dp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
@media (max-width: 560px) { .define-panel { left: 12px; right: 12px; bottom: 12px; width: auto; } }

/* compact definition panel */
.define-panel { width: min(322px, calc(100vw - 32px)); padding: 14px 16px; }
.define-panel .dp-word { font-size: 1.22rem; }
.define-panel .dp-def { font-size: .92rem; line-height: 1.5; margin-top: 6px; }
.define-panel .dp-syn { margin-top: 10px; }
.define-panel .dp-syn .badge { font-size: .72rem; padding: 3px 9px; }

/* ======================================================================
   COLLAPSIBLE ICON-ONLY SIDEBAR (desktop) — One UI focus mode
   ====================================================================== */
/* NOTE: no width/padding transition here — transitioning these layout props on
   the fixed, animated sidebar left the collapse stuck at its old width. The
   collapse snaps; the icons/labels still fade via their own transitions. */
.si-label { white-space: nowrap; }
@media (min-width: 901px) {
  body.sidebar-collapsed .sidebar { width: 78px !important; }
  body.has-sidebar.sidebar-collapsed .app-main { padding-left: 104px !important; }
  body.sidebar-collapsed .side-win { padding: 8px 6px; }
  body.sidebar-collapsed .side-win-logo { padding: 12px 0; }
  body.sidebar-collapsed .side-logo { justify-content: center; gap: 0; }
  body.sidebar-collapsed .side-logo .brand-name { display: none; }
  /* logo stays the SAME size/position when collapsing — only the wordmark hides */
  body.sidebar-collapsed .side-group-label { display: none; }
  body.sidebar-collapsed .side-item { justify-content: center; padding: 12px 0; gap: 0; }
  body.sidebar-collapsed .side-item .si-label,
  body.sidebar-collapsed .side-item .si-badge { display: none; }
  body.sidebar-collapsed .side-account { justify-content: center; padding: 10px 0; }
  body.sidebar-collapsed .side-account .sa-text { display: none; }
}