/* ============================================================
   BRIGHT — DESIGN SYSTEM  (single stylesheet, student + parent)

   DO NOT DE-DUPLICATE THIS FILE. Tried on 31 Aug, reverted on
   1 Sep after it broke the mobile layout on every page.

   The file has repeat definitions of the same selector, and the
   last one wins. That is annoying — editing an earlier copy
   looks right and does nothing — but the order is load-bearing.

   `.sidebar` is the example. Its base block declares `position`
   near the top of the file; `@media (max-width:860px)` then sets
   `position: fixed` to push it off-screen; a later top-level
   block sets only `background` and `border-right-color`.
   Collapsing the two top-level blocks into the position of the
   LAST one moved `position` below the media query. A media query
   adds no specificity, so the base won, the sidebar went back
   into the flow, and 240px of blank space appeared to the left
   of every page on mobile.

   The rule to remember: a selector inside a media query is an
   equal-specificity competitor with the same selector outside
   one, and only source order separates them. Any tool that
   reorders rules has to know that. Mine did not.

   WHEN EDITING: change the LAST copy of the rule, the one that
   already wins. Do not append a new copy at the bottom, and do
   not move a block to tidy the file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');

/* ============================================================
   BRIGHT — DESIGN SYSTEM  (single stylesheet, student + parent)

   HOW TO USE
   ----------
   Build pages from the shared components below. Do NOT add
   per-page CSS unless a component genuinely cannot cover it.

   SECTIONS
   1. Tokens           :root variables (colour, type, radius, space)
   2. Base             resets, typography, links
   3. Shell            .app  .sidebar  .topbar  (student = light,
                       parent adds .app--dark for the dark shell)
   4. Layout           .page  .page-card  .stack  .grid
   5. Components        .card .btn2 .pill .bar .field .avatar2
                       .subject-icon .breadcrumb2 .empty .toast2 .modal2
   6. Utilities        spacing / text / display helpers
   7. Media queries    ALL responsive rules live here (bottom)
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Brand */
  --cyan:        #00D5E5;
  --cyan-dark:   #0891B2;
  --cyan-light:  #ECFEFF;
  --cyan-rgb:    0, 213, 229;

  /* Ink (text) */
  --ink:         #0F172A;
  --ink-soft:    #334155;
  --ink-muted:   #64748B;
  --ink-light:   #94A3B8;

  /* Surface */
  --surface:       #FFFFFF;
  --surface-soft:  #F8FAFC;
  --surface-muted: #F1F5F9;
  --border:        #E2E8F0;

  /* Performance states (user-facing: Priority / Keep Practising / Doing Well) */
  --priority:       #EF4444;  --priority-soft: #FEE2E2;  --priority-ink: #B91C1C;
  --keep:           #F59E0B;  --keep-soft:     #FEF3C7;  --keep-ink:     #B45309;
  --well:           #10B981;  --well-soft:     #D1FAE5;  --well-ink:     #047857;

  /* Dark shell (parent) */
  --shell-dark:      #0F172A;
  --shell-dark-2:    #0B1220;

  /* Radius */
  --r-sm: 0.5rem;
  --r:    0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.25rem;
  --r-pill: 100px;

  /* Space scale */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;  --s-8: 2rem;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- the page backdrop, both dials in one place ------------------------
     --page-bg           the colour under the artwork
     --page-art-opacity  how strongly the artwork shows through, 0 to 1.
                         0.45 keeps the icons present without competing with
                         the cards on top of them. */
  --page-bg: #FFFDF6;
  --page-art-opacity: 0.1;
  /* Display face for titles. Rounded and friendly, which reads younger
     than Inter without costing legibility. Body text stays on Inter:
     Baloo at small sizes is harder to read, not easier. */
  --font-display: 'Baloo 2', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --shadow:    0 6px 18px rgba(15,23,42,0.07);

  /* Bootstrap bridge (so BS components inherit the brand) */
  --bs-primary: var(--cyan);
  --bs-primary-rgb: var(--cyan-rgb);
  --bs-body-font-family: var(--font);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--surface-soft);
  --bs-border-radius: var(--r);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
}

/* ============================================================
   2. BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface-soft);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
h1, h2, h3, h4 { margin: 0; font-weight: 800; color: var(--ink); line-height: 1.2;
  font-family: var(--font-display); letter-spacing: -0.01em; }
/* Titles that are not h1-h4 elements but read as headings. */
.topbar__title, .sect-title, .pnl-title, .tc-title, .modal2__title,
.cm-head h3, .stat-val, .scard-title, .scard-h2, .topic-name {
  font-family: var(--font-display); letter-spacing: -0.01em;
}
p { margin: 0; }
a { color: var(--cyan-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ============================================================
   3. SHELL   (.app = sidebar + topbar + main)
   Student uses the light shell by default.
   Parent adds class="app app--dark" for the dark shell.
   ============================================================ */
.app { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width: 240px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--s-5) var(--s-3);
  display: flex; flex-direction: column;
  overflow-y: auto; z-index: 80;
  transition: transform 0.25s ease;
}
.sidebar__brand { padding: 0 var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.sidebar__brand img { height: 40px; width: auto; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0.7rem 0.75rem; border-radius: var(--r-sm);
  color: var(--ink-soft); font-weight: 600; font-size: 1rem;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--surface-muted); color: var(--ink); text-decoration: none; }
.nav-link.is-active { background: var(--cyan-light); color: var(--cyan-dark); font-weight: 700; }
.nav-link i, .nav-link svg { width: 20px; height: 20px; flex-shrink: 0; font-size: 1.05rem; }
.nav-link--foot { margin-top: auto; color: var(--ink-muted); }

/* ---- Topbar ---- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 1.5rem;
  display: flex; align-items: center; gap: var(--s-3);
  position: sticky; top: 0; z-index: 50;
}
.topbar__title { font-size: 1.4rem; font-weight: 600; margin: 0; color: #1788da; }

/* Icon before the page title.

   Drawn with ::before rather than an <i> inside the h1, because eight views
   set the title with `.textContent = ...` at runtime, which would wipe a
   child element. A pseudo-element survives that.

   Each view adds one `ti--*` class to its h1. Codepoints were read out of
   bootstrap-icons.min.css, not recalled. */
.topbar__title[class*="ti--"]::before {
  font-family: "bootstrap-icons";
  font-weight: normal;
  margin-right: 0.5rem;
  opacity: 0.9;
  vertical-align: -0.06em;
}
.topbar__title.ti--home::before      { content: "\f422"; }
.topbar__title.ti--subjects::before  { content: "\f2c9"; }
.topbar__title.ti--plan::before      { content: "\f1e1"; }
.topbar__title.ti--notes::before     { content: "\f43c"; }
.topbar__title.ti--papers::before    { content: "\f38a"; }
.topbar__title.ti--mock::before      { content: "\f596"; }
.topbar__title.ti--performance::before { content: "\f17a"; }
.topbar__title.ti--saved::before     { content: "\f199"; }
.topbar__title.ti--help::before      { content: "\f504"; }
.topbar__title.ti--learn::before     { content: "\f4ca"; }
.topbar__title.ti--qtypes::before    { content: "\f4bd"; }
.topbar__title.ti--maps::before      { content: "\f47e"; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.hamburger {
  display: none;
  width: 48px;
  height: 38px;
  border: 1px solid #FBDC82;
  background: #FBDC82;
  border-radius: var(--r-sm);
  color: #000;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s, color 0.15s; text-decoration: none;
}
.icon-btn:hover { background: var(--surface-muted); color: var(--ink); }
.icon-btn.is-on { background: var(--cyan-light); color: var(--cyan-dark); border-color: var(--cyan-light); }

.backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 70; }
.backdrop.is-open { display: block; }

/* ---- Dark shell variant (parent) ---- */
.app--dark .sidebar { background: var(--shell-dark); border-right: none; }
.app--dark .sidebar__brand { border-bottom: 1px solid rgba(255,255,255,0.08); }
.app--dark .sidebar__brand img { background: #fff; border-radius: var(--r-sm); padding: 0.4rem 0.6rem; }
.app--dark .nav-link { color: #CBD5E1; }
.app--dark .nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.app--dark .nav-link.is-active { background: var(--cyan); color: var(--shell-dark); }
.app--dark .nav-link--foot { color: #94A3B8; }
.app--dark .topbar { background: var(--shell-dark-2); border-bottom: none; }
.app--dark .topbar__title { color: #fff; }

/* ============================================================
   4. LAYOUT
   ============================================================ */
.page {
  flex: 1;
  /* THE BACKDROP IS TWO LAYERS.

     The colour lives here; the artwork lives on `.page::before` above it. CSS
     cannot fade a `background-image`, only a whole element, so the image needs
     an element of its own for its strength to be adjustable at all. Baking the
     fade into the PNG would work once and then need a new file every time the
     strength changed.

     Two numbers to touch, both below: `--page-bg` and `--page-art-opacity`. */
  background: var(--page-bg);
  padding: var(--s-6) var(--s-4) 6rem;
  position: relative;
}

/* The artwork. Fixed, so it stays put while the content scrolls, exactly as
   the old `background-attachment: fixed` did. */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('../img/core-bg-2.png') no-repeat center center;
  background-size: cover;
  opacity: var(--page-art-opacity);
  pointer-events: none;   /* nothing on this layer should ever be clickable */
  z-index: 0;
}
/* content sits above the backdrop's decorative frame */
.page > *{ position:relative; z-index:1; }
.page-card {
  max-width: 960px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.25rem;
}
.stack > * + * { margin-top: 2rem; }
.stack-sm > * + * { margin-top: var(--s-4); }

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* ---- Section header ---- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.section-head__title { font-size: 1.2rem; font-weight: 800; }
.section-head__sub { font-size: 0.88rem; color: var(--ink-muted); margin-top: 0.15rem; }
.section-head__link { font-size: 0.88rem; font-weight: 700; color: var(--cyan-dark); white-space: nowrap; }

/* ---- Card ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); }
.card--soft { background: var(--surface-muted); border-color: transparent; }
.card--accent { border-color: var(--cyan); }

/* ---- Buttons ---- */
.btn2 {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.72rem 1.35rem; border-radius: var(--r); border: 1px solid transparent;
  font-weight: 700; font-size: 0.92rem; cursor: pointer; text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn2--primary { background: var(--cyan); color: #fff; }
.btn2--primary:hover { background: var(--cyan-dark); color: #fff; text-decoration: none; }
.btn2--soft { background: #1788DA; color: #fbfbfb; border-color: #1788DA; }
.btn2--soft:hover { background: #1272BC; color: #FFFFFF; border-color: #1272BC; text-decoration: none; }
.btn2--ghost { background: transparent; color: var(--cyan-dark); border-color: var(--border); }
.btn2--ghost:hover { background: var(--cyan-light); text-decoration: none; }
.btn2--block { width: 100%; justify-content: center; }
.btn2--sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; }

/* ---- Pills ---- */
.pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700;
  padding: 0.25rem 0.7rem; border-radius: var(--r-pill); background: var(--surface-muted); color: var(--ink-soft); white-space: nowrap; }
.pill i { font-size: 0.55rem; }
.pill--priority { background: var(--priority-soft); color: var(--priority-ink); }
.pill--keep     { background: var(--keep-soft);     color: var(--keep-ink); }
.pill--well     { background: var(--well-soft);     color: var(--well-ink); }
.pill--meta { background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft); font-weight: 600; }

/* ---- Progress bar ---- */
.bar { height: 7px; background: var(--surface-muted); border-radius: var(--r-pill); overflow: hidden; }
.bar__fill { height: 100%; border-radius: inherit; background: var(--cyan); transition: width 0.4s ease; }
.bar__fill--priority { background: var(--priority); }
.bar__fill--keep     { background: var(--keep); }
.bar__fill--well     { background: var(--well); }

/* ---- Subject icon chip ---- */
.subject-icon { width: 40px; height: 40px; border-radius: var(--r); display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.subject-icon--sm { width: 30px; height: 30px; font-size: 0.85rem; border-radius: var(--r-sm); }
.subj-maths   { background: var(--cyan-light);  color: var(--cyan-dark); }
.subj-english { background: #EDE9FE; color: #6D28D9; }
.subj-science { background: var(--well-soft);   color: var(--well-ink); }
.subj-french  { background: #FCE7F3; color: #BE185D; }
.subj-history { background: #FEF3C7; color: var(--keep-ink); }

/* ---- Avatar ---- */
.avatar2 { width: 38px; height: 38px; border-radius: 50%; background: var(--cyan); color: #fff;
  font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar2--ink { background: var(--shell-dark); }

/* ---- Breadcrumb ---- */
.breadcrumb2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: 0.85rem; margin-bottom: var(--s-5); }
.breadcrumb2 a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--cyan-dark); font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.3rem 0.8rem; }
.breadcrumb2 a:hover { background: var(--cyan-light); text-decoration: none; }
.breadcrumb2 .sep { color: var(--ink-light); font-size: 0.75rem; }
.breadcrumb2 .here { color: var(--ink); font-weight: 800; }

/* ---- Form field ---- */
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: 0.9rem; color: var(--ink); margin-bottom: 0.4rem; font-weight: 500; }
.field .control, .field input, .field select, .field textarea {
  width: 100%; padding: 0.65rem 0.85rem; border: 1px solid #D6D6D6; border-radius: var(--r-sm);
  font-size: 0.95rem; font-family: var(--font); color: var(--ink); background: var(--surface);
}
.field input::placeholder, .field textarea::placeholder { color: #A6A6A6; }
.field .control:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), 0.15); }
.field .hint { font-size: 0.82rem; color: var(--ink-muted); margin-top: 0.35rem; }

/* ---- Empty state ---- */
.empty { text-align: center; color: var(--ink-muted); padding: 1.7rem 1rem; font-size: 0.9rem; }

/* ---- List rows ---- */
.rows { display: flex; flex-direction: column; }
.row-item { display: flex; align-items: center; gap: var(--s-4); padding: 0.95rem 0; }
.row-item + .row-item { border-top: 1px solid var(--surface-muted); }

/* ---- Toast ---- */
.toast2 { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(1rem);
  background: var(--ink); color: #fff; padding: 0.8rem 1.2rem; border-radius: var(--r); font-weight: 600;
  font-size: 0.9rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: all 0.25s ease; z-index: 200; }
.toast2.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Modal ---- */
.modal2 { position: fixed; inset: 0; background: rgba(216, 219, 225, 0.28);	backdrop-filter: blur(3px);	-webkit-backdrop-filter: blur(3px); display: none; align-items: center;
  justify-content: center; padding: 1rem; z-index: 150; }
.modal2.is-open { display: flex; }
.modal2__box { background: var(--surface); border-radius: var(--r-lg); width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal2__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--border); }
.modal2__title { font-size: 1.1rem; font-weight: 800; }
.modal2__x { border: none; background: var(--surface-muted); width: 32px; height: 32px; border-radius: var(--r-sm);
  color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal2__body { padding: 1.4rem; }
.modal2__foot { padding: 1rem 1.4rem; border-top: 1px solid var(--border); display: flex; gap: var(--s-3); justify-content: flex-end; }

/* ============================================================
   6. UTILITIES
   ============================================================ */
.u-muted { color: var(--ink-muted); }
.u-soft  { color: var(--ink-soft); }
.u-cyan  { color: var(--cyan-dark); }
.u-bold  { font-weight: 700; }
.u-center { text-align: center; }
.u-hidden { display: none !important; }
.u-nowrap { white-space: nowrap; }
.u-flex  { display: flex; align-items: center; gap: var(--s-3); }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.u-grow  { flex: 1; min-width: 0; }
.u-mt-0 { margin-top: 0 !important; }

/* ============================================================
   7. MEDIA QUERIES  (all responsive rules, bottom only)
   ============================================================ */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); }
  .sidebar.is-open { transform: translateX(0); }
  .hamburger { display: flex; }
  .page { padding: var(--s-5) var(--s-3) 5rem; }
  .page-card { padding: var(--s-5); }
}

/* ---- Extra utilities (type scale, layout helpers) ---- */
.u-fs-lg  { font-size: 1.5rem; }
.u-fs-md  { font-size: 1.05rem; }
.u-fs-sm  { font-size: 0.9rem; }
.u-fs-xs  { font-size: 0.85rem; }
.u-fs-xxs { font-size: 0.82rem; }
.u-fs-label { font-size: 0.72rem; }
.u-fw-6 { font-weight: 600; }
.u-fw-8 { font-weight: 800; }
.u-ink { color: var(--ink); }
.u-mla { margin-left: auto; }
.u-wrap { flex-wrap: wrap; }
.u-items-start { align-items: flex-start; }
.u-no-underline { text-decoration: none; }

/* Component: needs-attention card accent by state */
.need-card { border-left: 4px solid var(--border); }
.need-card--priority { border-left-color: var(--priority); }
.need-card--keep     { border-left-color: var(--keep); }
.need-card--well     { border-left-color: var(--well); }

/* Component: recent row "when" column */
.row-when { font-size: 0.82rem; font-weight: 700; color: var(--ink-muted); width: 80px; flex-shrink: 0; }

/* Subject progress bar caps its width on wide rows */
.bar--capped { max-width: 230px; }

/* Today's-practice meta row spacing */
.meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0; }

/* Component: today's-practice hero */
.hero-kicker { margin-bottom: 0.75rem; }
.hero-title { font-size: 1.5rem; margin: 0.6rem 0 0.35rem; }
.hero-meta { margin-top: 0.15rem; }
.need-topic { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.85rem; }
.subj-empty { margin-top: 0.3rem; }
.subj-prog { gap: 0.7rem; margin-top: 0.45rem; }
.subj-row { gap: 0.9rem; text-decoration: none; }

/* ---- Auth / login pages (no shell) ---- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background-color: var(--surface-soft); background-image: url('../img/bg-pattern.png'); background-size: 400px 400px; }
.auth__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 2.25rem; width: 100%; max-width: 400px; box-shadow: var(--shadow); }
.auth__brand { text-align: center; margin-bottom: 1.5rem; }
.auth__brand img { height: 38px; width: auto; margin: 0 auto 0.5rem; }
.auth__brand p { font-size: 0.85rem; color: var(--ink-muted); }
.auth__foot { text-align: center; font-size: 0.85rem; color: var(--ink-muted); margin-top: 1.5rem;
  padding-top: 1.25rem; border-top: 1px solid var(--border); }
.link-muted { color: var(--ink-muted); font-weight: 600; }
.auth__sub { margin-bottom: 1.5rem; }
.auth__forgot { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }

/* ---- Mobile bottom tab bar ---- */
.bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top: 1px solid var(--border); padding: 0.4rem 0.5rem; }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 0.68rem; font-weight: 600; color: var(--ink-muted); padding: 0.35rem 0; }
.bottom-nav a i { font-size: 1.15rem; }
.bottom-nav a.is-active { color: var(--cyan-dark); }
.bottom-nav a:hover { text-decoration: none; }

/* ---- Subject list card (subjects page) ---- */
.subj-card { background: var(--surface);
  border: 1px solid #CBD2DC; border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
  transition: border-color 0.15s, box-shadow 0.15s; }
.subj-card:hover { border-color: var(--cyan); box-shadow: var(--shadow); }
.subj-card + .subj-card { margin-top: var(--s-4); }
.subj-card .sc-main { display: flex; align-items: center; gap: var(--s-4); }
.subj-card .top { display: flex; align-items: center; gap: var(--s-3); margin-bottom: 0.35rem; }
.subj-card .top .pill { margin-left: auto; }
.subj-card .name { font-weight: 700; color: var(--ink); }
.subj-card .meta { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 0.55rem; }
.subj-card .sc-acts { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--surface-muted); }
.sc-act { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 0.5rem; padding: 0.6rem 1.1rem; font-weight: 600; font-size: 0.85rem; text-decoration: none; cursor: pointer; background: #fff; color: var(--ink); border: 1px solid #CBD2DC; }
.sc-act--mixed { background:linear-gradient(135deg, #00D5E5, #0891B2); color:#fff; border:none; font-weight:700; box-shadow:0 6px 16px rgba(8,145,178,0.28); }
.sc-act--mixed:hover { color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:0 8px 20px rgba(8,145,178,0.38); }
.sc-act--mixed i { color:#fff; }
.sc-act:hover { border-color: var(--cyan); color: var(--cyan-dark); text-decoration: none; }
.sc-act i { color: var(--ink-muted); }
.sc-act:hover i { color: var(--cyan-dark); }
.subj-card .open { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--cyan-dark);
  font-weight: 700; font-size: 0.85rem; white-space: nowrap; }

/* show bottom-nav + reserve space on mobile */
@media (max-width: 860px) {
  .bottom-nav { display: flex; }
  .page { padding-bottom: 5.5rem; }
}
.page-intro { margin-bottom: 1.25rem; }

/* ---- Subject-detail header ---- */
.subject-head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.subject-icon--lg { width: 56px; height: 56px; font-size: 1.5rem; border-radius: var(--r-lg); }
.subject-head .prog-row { display: flex; align-items: center; gap: var(--s-3); margin-top: 0.4rem; }
.subject-head .prog-row .bar { flex: 1; max-width: 260px; }

/* ---- Chapters header + search ---- */
.chapters-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.chapters-head h3 { font-size: 1.15rem; }
.chapters-head .count { font-size: 0.85rem; color: var(--ink-muted); }
.search { position: relative; margin-bottom: var(--s-5); }
.search i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--ink-light); }
.search input { width: 100%; padding: 0.65rem 0.9rem 0.65rem 2.4rem; border: 1px solid #D6D6D6;
  border-radius: var(--r-sm); font-size: 0.95rem; font-family: var(--font); }
.search input::placeholder { color: #A6A6A6; }
.search input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(var(--cyan-rgb),0.15); }

/* ---- Chapter teaser cards (exact old) ---- */
.chapter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; padding-bottom:1rem; }
.chapter-teaser { position:relative; display:flex; flex-direction:column; height:100%; background:white; border:1px solid var(--border); border-radius:0.6rem; padding:1.5rem; transition:all 0.15s; }
.chapter-teaser:hover { border-color:var(--cyan); box-shadow:0 6px 16px rgba(15,23,42,0.05); }
.ct-pill { position:absolute; top:0; right:1.15rem; transform:translateY(-50%); }
.ct-head { display:flex; align-items:flex-start; gap:0.7rem; margin-bottom:1.1rem; }
.ct-num { width:30px; height:30px; border-radius:0.5rem; background:var(--surface-muted); color:#5A6779; font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ct-name { font-weight:700; font-size:1rem; color:var(--ink); margin:0; flex:1; line-height:1.3; }
.ct-prog-lbl { font-size:0.8rem; font-weight:600; color:var(--ink-muted); margin-bottom:0.15rem; }
.ct-prog { display:flex; align-items:center; gap:0.6rem; margin-bottom:1rem; }
.ct-bar { flex:1; height:7px; background:var(--surface-muted); border-radius:100px; overflow:hidden; }
.ct-bar > div { height:100%; border-radius:100px; }
.ct-pct { font-weight:800; font-size:0.82rem; white-space:nowrap; }
.perf-txt-focus, .perf-txt-priority { color: var(--priority); }
.perf-txt-improving, .perf-txt-keep { color: var(--keep-ink); }
.perf-txt-doingwell, .perf-txt-well { color: var(--well-ink); }
.ct-planline { display:flex; align-items:center; gap:0.4rem; font-size:0.8rem; font-weight:600; margin-bottom:0.9rem; color:#047857; }
.ct-foot { margin-top:auto; display:flex; gap:0.6rem; }
.ct-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; padding:0.45rem 0.4rem; border-radius:0.4rem; font-size:0.8rem; font-weight:600; cursor:pointer; text-decoration:none; transition:all 0.18s; border:1px solid transparent; }
.ct-btn.primary { background:#30B7D8; color:#fff; }
.ct-btn.primary:hover { background:#2699b8; color:#fff; text-decoration:none; }
.ct-btn.ghost { background:#fff; color:var(--ink-soft); border-color:var(--border); }
.ct-btn.ghost:hover { border-color:var(--cyan); color:var(--ink); text-decoration:none; }
.ct-add { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:0.45rem; margin-top:1rem; padding:0.55rem; border-radius:0.4rem; font-size:0.82rem; font-weight:700; cursor:pointer; background:#fff; color:var(--cyan-dark); border:1.5px dashed var(--cyan); }
.ct-add:hover { background:var(--cyan-light); border-style:solid; }
.no-results { text-align:center; color:var(--ink-muted); font-size:0.9rem; padding:2rem 0; }

/* subject-detail header (old) */
.subject-head { display:flex; align-items:center; gap:1rem; background:white; border:1px solid var(--border); border-radius:1rem; padding:1.25rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.subject-head .subject-icon--lg { width:54px; height:54px; font-size:1.4rem; border-radius:0.875rem; }
.subject-head .prog-row { display:flex; align-items:center; gap:0.75rem; margin-top:0.4rem; }
.subject-head .prog-row .bar { flex:1; height:8px; max-width:260px; }
.chapters-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.9rem; }
.chapters-head h3 { font-size:1.6rem; font-weight:800; margin:0; }
.chapters-head .count { font-size:0.82rem; color:var(--ink-muted); font-weight:600; }
.search { position:relative; margin-bottom:1.1rem; max-width:420px; }

/* perf bar-fill aliases (focus == priority) */
.bar__fill--focus { background: var(--priority); }
.bar__fill--improving { background: var(--keep); }
.bar__fill--doingwell { background: var(--well); }

/* ============================================================
   STUDY-PLAN (exact old design)
   ============================================================ */
.plan-intro { color:var(--ink-muted); font-size:0.9rem; margin:-0.45rem 0 1.4rem; line-height:1.5; }
.block-title { display:flex; align-items:center; gap:0.5rem; font-size:1.05rem; font-weight:800; color:var(--ink); margin:0 0 0.9rem; }
.block-title i { color:var(--cyan-dark); }
.block-sub { display:flex; align-items:center; gap:0.45rem; font-size:0.82rem; font-weight:700; color:var(--ink-muted); margin:1.4rem 0 0.8rem; text-transform:none; letter-spacing:0; }

.glance-card { background:var(--surface-muted); border:1px solid var(--border); border-radius:15px; padding:1.4rem 0.5rem 1.2rem; margin-bottom:1.6rem; }
.glance { width:100%; }
.glance-track { display:flex; width:100%; }
.gnode { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 0.25rem; position:relative; }
.gnode::after { content:''; position:absolute; top:32px; left:50%; width:100%; height:2px; background:#CBD5E1; z-index:0; }
.gnode:last-child::after { display:none; }
.gday { font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; line-height:1; margin-bottom:0.55rem; }
.lbl-done { color:#047857; } .lbl-active { color:#B45309; } .lbl-locked { color:var(--ink-light); }
.gdot { position:relative; z-index:1; width:24px; height:24px; border-radius:50%; border:2px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.6rem; margin-bottom:0.65rem; }
.gdot.bead-done { background:#10B981; border-color:#10B981; }
.gdot.bead-active { background:#F59E0B; border-color:#F59E0B; }
.gdot.bead-locked { background:#E2E8F0; border-color:#E2E8F0; color:var(--ink-light); }
@keyframes pulseDot { 0%{box-shadow:0 0 0 0 rgba(245,158,11,0.55);} 70%{box-shadow:0 0 0 9px rgba(245,158,11,0);} 100%{box-shadow:0 0 0 0 rgba(245,158,11,0);} }
.gdot.pulse { animation:pulseDot 1.5s infinite; }
.gch { font-size:0.82rem; font-weight:700; color:var(--ink); line-height:1.2; margin:0.15rem 0; }
.gwhen { font-size:0.72rem; color:var(--ink-muted); }

.day { background:white; border:1px solid var(--border); border-left:4px solid var(--border); border-radius:15px; padding:1.4rem 1.5rem; margin-bottom:1.4rem; }
.day.s-done { border:1px solid #6EE7B7; border-left:5px solid #6EE7B7; background:#F4FDF9; }
.day.s-active { border:1px solid #FBBF24; border-left:5px solid #FBBF24; background:#fffbf4; }
.day.s-locked { border:1px solid #E2E8F0; border-left:4px solid #E2E8F0; background:#fbfdff; }
.day.s-locked .dc-title { color:var(--ink-soft); }
.when { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.78rem; font-weight:700; }
.when.done { color:#047857; } .when.active { color:#B45309; } .when.locked { color:var(--ink-light); }
.day-top { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; margin-bottom:0.75rem; }
.motiv { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.7rem; font-weight:500; padding:0.3rem 0.8rem; border-radius:100px; white-space:nowrap; }
.motiv.done { background:#D1FAE5; color:#047857; } .motiv.active { background:#FEF3C7; color:#B45309; } .motiv.locked { background:var(--surface-muted); color:var(--ink-soft); }
.day-subject { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.15rem; }
.day-subject .ds-name { font-size:0.85rem; font-weight:600; color:var(--ink-soft); }
.day-title { font-size:1.3rem; font-weight:800; color:var(--ink); margin:0.1rem 0 0.9rem; }
.day-note { color:var(--ink-soft); margin:0 0 0.9rem; }
.day-chips { display:flex; gap:0.45rem; flex-wrap:wrap; margin-bottom:0.95rem; }
.day-chips .chip { background:var(--surface-muted); color:var(--ink-soft); font-size:0.8rem; font-weight:600; padding:0.3rem 0.75rem; border-radius:100px; }
.day-btns { display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap; }
.btn-go { background:#F59E0B; color:#fff; border:none; border-radius:0.7rem; padding:0.6rem 1.1rem; font-weight:800; font-size:0.9rem; text-decoration:none; display:inline-flex; align-items:center; gap:0.45rem; }
.btn-go:hover { background:#D97706; color:#fff; text-decoration:none; }
.btn-soft { background:#FFF; color:var(--cyan-dark); border:1px solid var(--border); border-radius:0.5rem; padding:0.6rem 1.1rem; font-weight:600; font-size:0.85rem; text-decoration:none; display:inline-flex; align-items:center; gap:0.45rem; }
.lock-note { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.82rem; font-weight:700; color:var(--ink-muted); background:var(--surface-muted); border-radius:0.7rem; padding:0.55rem 0.95rem; }

/* collapsible done/locked */
.dc .dc-head { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; cursor:pointer; }
.dc-subj { font-size:0.8rem; font-weight:700; color:var(--ink-soft); }
.dc-title { font-size:1.18rem; font-weight:800; color:var(--ink); margin-top:0.05rem; }
.dc-chev-btn { border:none; background:transparent; color:var(--ink-muted); cursor:pointer; font-size:1.15rem; padding:0.25rem; line-height:1; transition:transform 0.18s; flex-shrink:0; margin-left:auto; }
.day.open .dc-chev-btn { transform:rotate(180deg); }
.dc .dc-body { display:none; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.day.open .dc-body { display:block; }
.result-row { display:inline-flex; align-items:center; gap:0.5rem; font-size:1rem; font-weight:700; color:#047857; background:#D1FAE5; border-radius:0.75rem; padding:0.6rem 1rem; }
.result-row b { color:#047857; }

.locked-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.teaser { border:1px dashed var(--border); border-radius:15px; padding:1.6rem; background:var(--surface-soft); }
.teaser .t-subj { font-size:0.82rem; font-weight:600; color:var(--ink-soft); margin-top:0.7rem; }
.teaser .t-title { font-weight:800; color:var(--ink); font-size:1.15rem; margin:0.3rem 0 0.9rem; }
.teaser .t-chips { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.teaser .t-chip { background:#FFF; font-size:0.75rem; font-weight:600; color:var(--ink-soft); padding:0.2rem 0.6rem; border-radius:100px; }
.teaser .t-note { font-size:0.78rem; color:var(--ink-muted); display:flex; align-items:center; gap:0.35rem; }

/* add-chapters modal accordion */
.add-intro { font-size:0.9rem; color:var(--ink-soft); margin-bottom:1rem; }
.add-subj { border:1px solid var(--border); border-radius:0.75rem; margin-bottom:0.6rem; overflow:hidden; }
.add-subj__head { display:flex; align-items:center; gap:0.6rem; padding:0.8rem 1rem; cursor:pointer; background:#fff; }
.add-subj__head .name { font-weight:700; flex:1; }
.add-subj__body { display:none; padding:0.4rem 1rem 0.8rem; }
.add-subj.open .add-subj__body { display:block; background:#fff; }
.add-chap { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.5rem 0; border-top:1px solid var(--surface-muted); }
.add-chap .cname { font-size:0.9rem; }
.add-chap button { border:1px solid var(--cyan); background:var(--cyan-light); color:var(--cyan-dark); font-weight:700; font-size:0.75rem; padding:0.2rem 0.7rem; border-radius:50px; cursor:pointer; }
/* Remove sits next to the Added pill — it must not read as a second Add. */
.add-chap button.chap-rm { border-color:var(--border); background:var(--surface-muted); color:var(--ink-soft); }
.add-chap button.chap-rm:hover { border-color:#F3CFD1; background:#FFF3F3; color:#B4232A; }
.add-chap button:disabled { opacity:0.6; cursor:default; }
.help-list { list-style:none; padding:0; margin:0; }
.help-list li { display:flex; gap:0.75rem; padding:0.7rem 0; }
.help-list li + li { border-top:1px solid var(--surface-muted); }
.help-list li i { font-size:1.2rem; color:var(--cyan-dark); flex-shrink:0; }
.help-list b { color:var(--ink); }

/* ============================================================
   SAVED
   ============================================================ */
.sv-subj { display: flex; align-items: center; gap: var(--s-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-4); flex-wrap: wrap; }
.sv-subj .name { font-weight: 700; color: var(--ink); flex: 1; min-width: 120px; }
.sv-subj .btns { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sv-count-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--r); padding: 0.55rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.sv-count-btn:hover { border-color: var(--cyan); background: var(--cyan-light); }
.sv-count-btn b { color: var(--ink); }
.sv-count-btn.empty { opacity: 0.55; }
.grp-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; margin: var(--s-5) 0 var(--s-3); }
.grp-title .n { background: var(--surface-muted); color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: var(--r-pill); }

/* Corrected question card */
.cq { border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 0.7rem; overflow: hidden; background: #fff; }
.cq-head { width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem; background: none; border: none; cursor: pointer; text-align: left; }
.cq-status { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; font-size: 0.8rem; }
.cq-status.correct { background: var(--well); } .cq-status.wrong { background: var(--priority); }
.cq-htext { flex: 1; font-weight: 600; color: var(--ink); }
.cq-num { display: inline-block; font-size: 0.72rem; font-weight: 800; color: var(--ink-muted); margin-right: 0.4rem; }
.cq-chev { color: var(--ink-light); transition: transform 0.2s; }
.cq.collapsed .cq-body { display: none; }
.cq:not(.collapsed) .cq-chev { transform: rotate(180deg); }
.cq-body { padding: 0 1rem 1rem; }
.cq-opts { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.cq-opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 0.9rem; }
.cq-opt.correct { border-color: var(--well); background: var(--well-soft); }
.cq-opt.wrong { border-color: var(--priority); background: var(--priority-soft); }
.cq-let { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-muted); font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cq-otext { flex: 1; }
.cq-mark { margin-left: auto; }
.cq-opt.correct .cq-mark { color: var(--well-ink); } .cq-opt.wrong .cq-mark { color: var(--priority-ink); }
.cq-your { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.7rem; }
.cq-explain { background: var(--cyan-light); border-radius: var(--r); padding: 0.8rem 1rem; }
.cq-explain-h { font-weight: 700; color: var(--cyan-dark); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; font-size: 0.9rem; }
.cq-explain p { font-size: 0.88rem; color: var(--ink-soft); }
.cq-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.7rem; }
.cq-tag { font-size: 0.78rem; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.cq-remove { border: 1px solid var(--border); background: var(--surface); color: var(--priority-ink); font-size: 0.8rem; font-weight: 700; padding: 0.35rem 0.7rem; border-radius: var(--r-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }

/* Paper review summary */
.pr-summary { background: var(--surface-muted); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-4); }
.pr-score { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.pr-score b { font-size: 1.8rem; color: var(--ink); }
.pr-stats { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pr-stat { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.pr-stat.ok { color: var(--well-ink); } .pr-stat.no { color: var(--priority-ink); }

/* Saved paper row */
.sv-paper { display: flex; align-items: center; gap: var(--s-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); margin-bottom: 0.7rem; flex-wrap: wrap; }
.sv-paper .p-icon { width: 42px; height: 42px; border-radius: var(--r); background: var(--cyan-light); color: var(--cyan-dark); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.sv-paper .p-body { flex: 1; min-width: 140px; }
.sv-paper .p-title { font-weight: 700; color: var(--ink); }
.sv-paper .p-meta { font-size: 0.82rem; color: var(--ink-muted); }
.btn-review { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--cyan); color: #fff; border: none; border-radius: var(--r-sm); padding: 0.5rem 0.9rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.sv-empty { text-align: center; color: var(--ink-muted); padding: 2.5rem 1rem; }
.sv-empty i { font-size: 2rem; color: var(--ink-light); display: block; margin-bottom: 0.5rem; }

/* ============================================================
   REVISION NOTES  (article content styling)
   ============================================================ */
.notes .nt-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:1.3rem; }
.notes .nt-eyebrow { font-size:0.75rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--cyan-dark); margin-bottom:0.2rem; }
.notes .nt-top h1 { font-size:1.9rem; font-weight:800; letter-spacing:-0.02em; line-height:1.15; color:var(--ink); margin:0; }
.notes .read-badge { display:inline-flex; align-items:center; gap:6px; background:var(--surface-muted); color:var(--ink-soft); font-size:0.78rem; font-weight:600; padding:6px 12px; border-radius:999px; margin-top:0.35rem; }
.notes .read-badge b { color:var(--ink); }
.notes .learn { background:var(--ink); color:#fff; border-radius:16px; padding:16px 20px; margin-bottom:1.6rem; }
.notes .learn h2 { font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--cyan); margin:0 0 8px; }
.notes .learn ul { list-style:none; display:flex; gap:8px 22px; flex-wrap:wrap; margin:0; padding:0; }
.notes .learn li { font-size:0.92rem; font-weight:500; display:flex; align-items:center; gap:8px; }
.notes .learn li::before { content:""; width:7px; height:7px; border-radius:50%; background:#F59E0B; flex-shrink:0; }
.notes .section-label { font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin:1.8rem 0 0.85rem; display:flex; align-items:center; gap:10px; }
.notes .section-label::after { content:""; flex:1; height:1px; background:var(--border); }
.notes .keybox { border:1px solid var(--border); border-left:4px solid var(--cyan); border-radius:12px; padding:16px 18px; margin-bottom:14px; background:#fff; }
.notes .keybox h3 { font-size:1.02rem; font-weight:700; margin:0 0 4px; color:var(--ink); }
.notes .keybox p { font-size:0.92rem; color:var(--ink-soft); margin:0; }
.notes .keybox .big { color:var(--ink); font-weight:600; }
.notes .keybox.amber { border-left-color:#F59E0B; }
.notes .shape-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px; }
.notes .shape-card { border:1px solid var(--border); border-radius:12px; padding:14px 10px 12px; text-align:center; background:#fff; }
.notes .shape-card img { width:100%; max-width:118px; height:92px; object-fit:contain; margin:0 auto 8px; display:block; }
.notes .shape-card .name { font-size:0.86rem; font-weight:700; color:var(--ink); }
.notes .shape-card .count { display:inline-block; margin-top:5px; font-size:0.78rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.notes .c-0 { background:#FEE2E2; color:#DC2626; }
.notes .c-1 { background:#FEF3C7; color:#B45309; }
.notes .c-2 { background:#E0F2FE; color:#0369A1; }
.notes .c-hi { background:#DCFCE7; color:#15803D; }
.notes .rulebox { background:var(--surface-muted); border-radius:12px; padding:16px 18px; margin-bottom:14px; }
.notes .rulebox h3 { font-size:0.94rem; font-weight:700; margin:0 0 8px; display:flex; align-items:center; gap:8px; color:var(--ink); }
.notes .rulebox h3 .dot { width:22px; height:22px; border-radius:6px; background:var(--cyan); color:var(--ink); font-size:0.8rem; font-weight:800; display:grid; place-items:center; }
.notes .rulebox p { font-size:0.9rem; color:var(--ink-soft); margin:0 0 0.3rem; }
.notes .rulebox p:last-child { margin-bottom:0; }
.notes .rulebox .rx { margin-top:6px; font-size:0.88rem; color:var(--ink); font-weight:500; }
.notes .tip { display:flex; gap:12px; align-items:flex-start; border:1px solid #FCD34D; background:#FFFBEB; border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.notes .tip .ico { flex-shrink:0; width:26px; height:26px; border-radius:7px; background:#F59E0B; color:#fff; font-weight:800; font-size:0.92rem; display:grid; place-items:center; }
.notes .tip p { font-size:0.9rem; margin:0; color:var(--ink-soft); }
.notes .tip b { color:#92400E; }
.notes .tip.miss { border-color:#FCA5A5; background:#FEF2F2; }
.notes .tip.miss .ico { background:#DC2626; }
.notes .tip.miss b { color:#991B1B; }
.notes .letters { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.notes .letters .l { border:1px solid var(--border); border-radius:9px; padding:8px 4px; text-align:center; min-width:58px; flex:1; }
.notes .letters .l .big { font-size:1.25rem; font-weight:800; display:block; color:var(--ink); }
.notes .letters .l .sub { font-size:0.72rem; color:var(--ink-soft); font-weight:600; }
.notes .nt-footer { margin-top:2rem; padding-top:16px; border-top:1px solid var(--border); font-size:0.78rem; color:var(--ink-light); text-align:center; }
.notes .note-cta { background:#fff; border:1px solid var(--cyan); border-radius:12px; padding:1.5rem; text-align:center; margin-top:1.5rem; }
.notes .note-cta h3 { font-size:1.15rem; font-weight:800; color:var(--ink); margin:0 0 1rem; }
.notes .note-cta .btns { display:flex; gap:0.7rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   PROGRESS (exact old design)
   ============================================================ */
.sect-title { font-size:1.15rem; font-weight:800; margin:1.6rem 0 0.9rem; }
.sect-title:first-child { margin-top:0; }
.sect-sub { font-size:0.88rem; color:var(--ink-muted); margin:-0.6rem 0 1.1rem; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.6rem; }
.stat-card { background:white; border:1px solid var(--border); border-radius:1rem; padding:1.1rem 1.25rem; display:flex; align-items:center; gap:1rem; }
.stat-ic { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; flex-shrink:0; }
.stat-ic.cyan{background:var(--cyan);} .stat-ic.blue{background:#3B82F6;} .stat-ic.green{background:#10B981;} .stat-ic.amber{background:#F59E0B;}
.stat-val { font-size:1.5rem; font-weight:800; color:var(--ink); line-height:1.1; display:flex; align-items:center; gap:0.3rem; }
.stat-lbl { font-size:0.82rem; color:var(--ink-muted); }
.trend { font-size:0.8rem; } .trend.up { color:#10B981; } .trend.down { color:#EF4444; }

.pcard { background:white; border:1px solid #ADB0B8; border-radius:0.6rem; padding:1rem; height:100%; display:flex; flex-direction:column; }
.pcard-head { display:flex; align-items:center; gap:0.6rem; margin-bottom:1rem; }
.pcard-head .subject-icon { width:36px; height:36px; font-size:0.95rem; flex-shrink:0; }
.pcard-head h3 { font-size:1.05rem; font-weight:700; margin:0; }
.perf-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.4rem; }
.perf-lbl { font-size:0.82rem; color:var(--ink-muted); }
.perf-val { font-weight:800; font-size:0.95rem; display:flex; align-items:center; gap:0.25rem; }
.pct-priority{color:#EF4444;} .pct-improving{color:#B45309;} .pct-doingwell{color:#047857;}
.pbar { height:8px; background:var(--surface-muted); border-radius:100px; overflow:hidden; margin-bottom:1rem; }
.pbar > div { height:100%; border-radius:100px; }
.pbar-click { cursor:pointer; transition:transform 0.12s; }
.pbar-click:hover { transform:scaleY(1.3); }
.trend-link { display:inline-flex; align-items:center; gap:0.35rem; background:none; border:none; padding:0; margin:-0.5rem 0 0.9rem; color:var(--cyan-dark); font-size:0.78rem; font-weight:500; cursor:pointer; }
.trend-link:hover { text-decoration:underline; }
.trend-link.tl-sm { font-size:0.74rem; margin:0.45rem 0 0; }
.bd-title { font-size:0.85rem; font-weight:700; color:var(--ink-muted); margin:0.3rem 0 0.2rem; }
.breakdown { margin-bottom:1rem; }
.bd-row { display:flex; align-items:center; gap:0.5rem; font-size:0.8rem; padding:0.3rem 0; border-bottom:1px dotted #93abc2; }
.bd-row:last-child { border-bottom:0; }
.bd-row .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.perf-priority{background:#EF4444;} .perf-improving{background:#F59E0B;} .perf-doingwell{background:#10B981;}
.bd-name { color:var(--ink-soft); flex:1; }
.bd-n { font-weight:700; color:var(--ink); }
.pcard-btns { margin-top:auto; display:flex; flex-direction:column; gap:0.5rem; }
.pbtn { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; border-radius:0.4rem; padding:0.5rem; font-weight:600; font-size:0.8rem; text-decoration:none; cursor:pointer; border:1px solid var(--border); }
.pbtn.primary { background:#30B7D8; color:#fff; border:none; }
.pbtn.primary:hover { filter:brightness(0.96); color:#fff; text-decoration:none; }
.pbtn.practise-now { background:#30B7D8; color:#fff; border:none; }
.pbtn.practise-now:hover { filter:brightness(0.96); color:#fff; text-decoration:none; }
.pbtn.ghost { background:var(--surface-muted); color:var(--ink-soft); }
.pbtn.ghost:hover { background:var(--border); color:var(--ink); text-decoration:none; }

.tcard { position:relative; padding-top:1.5rem; }
.tcard-pill { position:absolute; top:0; right:1.15rem; transform:translateY(-50%); }
.tcard .pbar { margin-bottom:0; }
.unit-lbl { font-size:0.8rem; font-weight:600; color:var(--ink-muted); }
.topic-name { font-size:1.05rem; font-weight:800; color:var(--ink); margin:0; line-height:1.25; }
.tdiv { border-top:1px dotted #656A70; margin:1rem 0; }
.tstats-lbl { font-weight:600; color:#5E6370; font-size:0.9rem; margin:0; }
.tstats { display:flex; }
.tstat { flex:1; text-align:center; padding:0.7rem 0.3rem; }
.tstat .v { font-weight:800; color:var(--ink); }
.tstat .l { font-size:0.72rem; color:var(--ink-muted); }
.no-topics { text-align:center; color:var(--ink-muted); padding:2rem 1rem; grid-column:1/-1; }

.filter-bar { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.ftabs { display:inline-flex; background:#DFE4E9; border-radius:0.625rem; padding:3px; flex-wrap:wrap; }
.ftabs button { border:none; background:none; padding:0.45rem 0.85rem; border-radius:0.5rem; font-weight:600; font-size:0.84rem; color:var(--ink-soft); cursor:pointer; }
.ftabs button.active { background:white; color:var(--ink); box-shadow:0 1px 2px rgba(15,23,42,0.08); }
.unit-select { border:1px solid var(--border); border-radius:0.625rem; padding:0.5rem 0.85rem; font-weight:600; font-size:0.85rem; color:var(--ink); background:white; min-width:160px; }
.cm-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.45); display:none; align-items:center; justify-content:center; z-index:1080; padding:1rem; }
.cm-overlay.show { display:flex; }
.cm-box { background:#fff; border-radius:1rem; width:100%; max-width:540px; padding:1.5rem; }
.cm-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin-bottom:1rem; }
.cm-head h3 { font-size:1.05rem; }
.cm-x { border:none; background:var(--surface-muted); width:32px; height:32px; border-radius:0.5rem; color:var(--ink-soft); cursor:pointer; }
.cm-note { font-size:0.85rem; color:var(--ink-soft); margin-top:0.75rem; }

/* ============================================================
   ACCOUNT (student)
   ============================================================ */
.acct-hero { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.acct-hero .av { width: 64px; height: 64px; border-radius: 50%; background: var(--cyan); color: #fff; font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acct-hero h2 { font-size: 1.4rem; }
.acct-hero .sub { color: var(--ink-muted); font-size: 0.9rem; }
.acct-note { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--cyan-light); border-radius: var(--r); padding: 0.8rem 1rem; font-size: 0.88rem; color: var(--ink-soft); margin-top: var(--s-3); }
.acct-note i { color: var(--cyan-dark); font-size: 1.1rem; flex-shrink: 0; }
.field input:read-only, .field input.ro { background: var(--surface-muted); color: var(--ink-muted); cursor: not-allowed; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0.9rem 0; }
.pref-row + .pref-row { border-top: 1px solid var(--surface-muted); }
.pref-row .pref-txt b { color: var(--ink); display: block; }
.pref-row .pref-txt span { font-size: 0.85rem; color: var(--ink-muted); }
/* simple toggle */
.toggle { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track { position: absolute; inset: 0; background: var(--border); border-radius: var(--r-pill); transition: background 0.2s; cursor: pointer; }
.toggle .track::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.toggle input:checked + .track { background: var(--cyan); }
.toggle input:checked + .track::before { transform: translateX(20px); }

/* ============================================================
   HOME REGRESSION FIXES (match old compact look)
   ============================================================ */
/* Today's-practice primary button: tighter pill like old */
.card--accent .btn2--primary { padding: 0.6rem 1.15rem; font-size: 0.9rem; }

/* Subject rows: compact, single visual line */
.subj-row { padding: 0.85rem 1rem; gap: 0.85rem; align-items: center; }
.subj-row .u-bold.u-ink { margin-bottom: 0.35rem; font-size: 0.95rem; }
.subj-prog { gap: 0.6rem; margin-top: 0; }
.subj-prog .u-fs-label { font-size: 0.72rem; }
.subj-row .bar--capped { max-width: 180px; }

/* Needs-attention: solid slate button WITH right arrow pushed to edge */
.need-card .btn2--soft { justify-content: space-between; padding: 0.6rem 0.9rem; }
.need-card .btn2--soft .bi-arrow-right { margin-left: auto; }

/* Subject icon glyph: force visible sizing */
.subject-icon { font-size: 1.1rem; }
.subject-icon i { display: inline-block; line-height: 1; }
.subject-icon--sm { font-size: 0.85rem; }

/* Safety: guarantee Bootstrap Icons glyph font wins over body Inter */
.bi::before { font-family: "bootstrap-icons" !important; }

/* ============================================================
   OLD-DESIGN EXACT PORTS (home subjects, hero, needs-attention)
   token map: --brand-cyan -> --cyan, --brand-cyan-dark -> --cyan-dark,
              --brand-cyan-light -> --cyan-light
   ============================================================ */
/* Hero (today's practice) */
.hero { background:#fff; border:1px solid var(--cyan); border-radius:12px; padding:2rem 1.9rem; }
.hero h2 { font-size:1.5rem; font-weight:800; color:var(--ink); margin:0 0 0.6rem; }
.hero-sub { color:var(--ink-soft); font-size:0.95rem; font-weight:600; margin:0 0 0.5rem; }
.hero-meta { color:var(--ink-muted); font-size:0.88rem; margin:0 0 1.5rem; }
.hero-chips { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.hero-chip { display:inline-flex; align-items:center; gap:0.4rem; background:#fff; color:var(--ink-soft); font-size:0.82rem; font-weight:600; padding:0.4rem 0.85rem; border-radius:100px; border:1px solid var(--border); }
.hero-start { display:inline-flex; align-items:center; gap:0.5rem; background:var(--cyan); color:#fff; font-weight:800; padding:0.7rem 1.2rem; border-radius:0.7rem; text-decoration:none; font-size:0.92rem; }
.hero-start:hover { background:var(--cyan-dark); color:#fff; text-decoration:none; }

/* Section title (bigger, old style) */
.sec-block-title { font-size:1.35rem; font-weight:800; color:var(--ink); margin:0; }
.sec-block-sub { font-size:0.9rem; color:var(--ink-muted); margin:0.15rem 0 0; }
.sec-head2 { display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem; margin-bottom:1.1rem; }
.sec-link2 { font-size:0.88rem; font-weight:700; color:var(--cyan-dark); white-space:nowrap; }

/* Subject rows — EXACT old */
.subj-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.9rem; }
.subj-row { display:flex; align-items:center; gap:0.9rem; background:var(--surface-muted); border:1px solid transparent; border-radius:12px; padding:1rem 1.2rem; text-decoration:none; transition:background 0.18s, border-color 0.18s, box-shadow 0.18s; }
.subj-row:hover { border-color:var(--cyan); background:#fff; box-shadow:0 6px 16px rgba(15,23,42,0.06); text-decoration:none; }
.subj-row .subject-icon { width:40px; height:40px; font-size:1.1rem; border-radius:0.7rem; flex-shrink:0; }
.subj-mid { flex:1; min-width:0; }
.subj-row .subj-name { font-weight:700; color:var(--ink); margin:0 0 0.45rem; }
.subj-row .subj-prog { display:flex; align-items:center; gap:0.7rem; }
.subj-row .subj-lbl { font-size:0.72rem; font-weight:700; color:var(--ink-muted); white-space:nowrap; }
.subj-row .subj-bar { flex:1; height:7px; background:#DEE1E3; border-radius:100px; overflow:hidden; max-width:230px; }
.subj-row .subj-bar > div { height:100%; border-radius:100px; }
.subj-row .subj-pct { font-weight:800; font-size:0.82rem; color:var(--ink-soft); white-space:nowrap; }
.subj-empty { font-size:0.82rem; color:var(--ink-muted); }
.subj-row .chev { color:var(--ink-light); margin-left:auto; flex-shrink:0; font-size:1.1rem; }

/* Needs attention — EXACT old */
.na-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.na-card { background:#EDEFF1; border:0; border-left:0; border-radius:12px; padding:1.3rem 1.2rem; }
.na-card.p-priority { border-left-color:#F87171; }
.na-card.p-keep { border-left-color:#FBBF24; }
.na-card.p-well { border-left-color:#6EE7B7; }
.na-top { display:flex; align-items:center; gap:0.55rem; margin-bottom:0.75rem; }
.na-top .subject-icon { width:30px; height:30px; font-size:0.8rem; border-radius:0.6rem; flex-shrink:0; }
.na-subj { font-size:0.82rem; font-weight:600; color:var(--ink-soft); }
.na-topic { font-size:1.05rem; font-weight:800; color:var(--ink); margin-bottom:0.85rem; }
.na-top .pill { margin-left:auto; }
.na-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fd9867;
  border: 1px solid #fd9867;
  border-radius: 50rem;
  padding: 0.65rem 1.2rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.na-btn:hover { background:#ECFEFF; color:#0891B2; text-decoration:none; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,213,229,0.25); }

/* Recently done — old */
.recent-row { display:flex; align-items:center; gap:1rem; padding:0.95rem 0; }
.recent-row + .recent-row { border-top:1px solid var(--surface-muted); }
.recent-when { font-size:0.82rem; font-weight:700; color:var(--ink-muted); width:80px; flex-shrink:0; }
.recent-mid { flex:1; min-width:0; }
.recent-title { font-weight:800; color:var(--ink); }
.recent-sub { font-size:0.85rem; color:var(--ink-soft); margin-top:0.1rem; }
.recent-row .pill { margin-left:auto; flex-shrink:0; }

/* ============================================================
   PRACTICE (exam engine — exact old design)
   ============================================================ */
/* ── Header (matches study-plan) ── */
.page-header-bar { background:white; border-bottom:1px solid var(--border); padding:1rem 2rem; display:flex; align-items:center; gap:0.875rem; }
@media (max-width:991.98px){ .page-header-bar{ padding:0.875rem 1rem; } }
.page-header-bar .icon-wrap { width:36px; height:36px; border-radius:8px; background:var(--cyan-light); color:var(--cyan-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.page-header-bar h1 { font-size:1.25rem; font-weight:700; margin:0; line-height:1.2; }
.page-header-bar .header-sub { font-size:0.8rem; color:var(--ink-muted); margin:0; }
.header-title-wrap { flex:1; min-width:0; }
.leave-btn { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.85rem; font-weight:600; color:var(--ink-soft); background:white; border:1px solid var(--border); border-radius:0.625rem; padding:0.45rem 0.85rem; text-decoration:none; transition:all 0.12s; }
.leave-btn:hover { background:var(--surface-muted); color:var(--ink); }

/* ── Focus mode while taking the paper (strip all chrome) ── */
.exam-topbar { display:none; }
.taking-paper .exam-topbar { display:block; position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border); }
.exam-topbar-inner { max-width:1200px; margin:0 auto; padding:0.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.etb-left { display:flex; align-items:center; gap:0.75rem; min-width:0; }
.etb-logo { height:26px; }
.etb-title { font-weight:700; color:var(--ink); font-size:0.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.etb-right { display:flex; align-items:center; gap:0.6rem; }
@media (max-width:575.98px){ .etb-title{ display:none; } .exam-topbar-inner{ padding:0.65rem 1rem; } }
.taking-paper .sidebar { display:none !important; }
.taking-paper .bottom-nav { display:none !important; }
.taking-paper .page-header-bar { display:none !important; }

.app-main { background-color:#F8FAFC; background-image:url('img/bg-pattern.png'); background-repeat:repeat; background-size:400px 400px; padding:0; }
.app-main > .app-content { padding:1.5rem 1rem; max-width:1200px; margin:0 auto; }
@media (min-width:768px){ .app-main > .app-content{ padding:2rem 1.5rem; } }
@media (min-width:992px){ .app-main > .app-content{ padding:2rem; } }

/* ── Progress strip ── */
.exam-progress { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.exam-counter { font-size:1rem; font-weight:700; color:var(--ink); margin:0; }
.exam-counter .total { color:var(--ink-muted); font-weight:600; }
.exam-progress-right { display:flex; align-items:center; gap:0.6rem; }
.time-pill { display:inline-flex; align-items:center; gap:0.4rem; background:var(--cyan); color:#fff; font-weight:700; padding:0.35rem 0.8rem; border-radius:0.5rem; font-size:0.85rem; font-variant-numeric:tabular-nums; }
.grid-toggle { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.82rem; font-weight:600; color:var(--ink-soft); background:white; border:1px solid var(--border); border-radius:0.625rem; padding:0.4rem 0.75rem; }
.exam-progress-bar { height:6px; background:var(--surface-muted); border-radius:100px; overflow:hidden; margin-bottom:1.25rem; }
.exam-progress-bar-fill { height:100%; background:var(--cyan); border-radius:100px; transition:width 0.3s ease; }

/* ── Question card ── */
.question-card { background:white; border:1px solid var(--border); border-radius:1rem; padding:1.75rem; }
@media (max-width:575.98px){ .question-card{ padding:1.25rem; } }
.question-card-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:1rem; }
.q-num-badge { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.78rem; font-weight:600; color:var(--ink-muted); background:var(--surface-muted); padding:0.3rem 0.7rem; border-radius:100px; }
.q-tools { display:flex; gap:0.4rem; }
.q-tool-btn { width:38px; height:38px; border-radius:0.625rem; background:white; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:1.05rem; transition:all 0.12s; cursor:pointer; }
.q-tool-btn:hover { background:var(--surface-muted); color:var(--ink); }
.q-tool-btn.saved { color:var(--cyan-dark); background:var(--cyan-light); border-color:var(--cyan); }
.q-tool-btn.flagged { color:#B45309; background:var(--keep-soft); border-color:var(--keep); }

.q-stem { font-size:1.15rem; font-weight:600; color:var(--ink); line-height:1.5; margin-bottom:1rem; }
.question-figure { margin:0 auto 1.25rem; padding:1rem; background:var(--surface-soft); border:1px solid var(--border); border-radius:0.75rem; display:flex; justify-content:center; }
.question-figure svg { max-width:100%; height:auto; }

.part { margin-bottom:1.6rem; }
.part:last-child { margin-bottom:0; }
.part-q { font-size:1.05rem; font-weight:600; color:var(--ink); line-height:1.5; margin-bottom:0.85rem; }
.part-label { color:var(--cyan-dark); font-weight:700; margin-right:0.3rem; }

/* ── Text options (2-column, radio style) ── */
.options { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
@media (max-width:575.98px){ .options{ grid-template-columns:1fr; } }
.opt { display:flex; align-items:center; gap:0.6rem; width:100%; text-align:left; background:white; border:1px solid var(--border); border-radius:0.625rem; padding:0.7rem 0.85rem; cursor:pointer; transition:all 0.12s; font-size:0.95rem; color:var(--ink); }
.opt:hover { border-color:var(--cyan); background:var(--surface-soft); }
.opt-radio { width:18px; height:18px; border-radius:50%; border:2px solid #CBD5E1; flex-shrink:0; position:relative; transition:all 0.12s; }
.opt-letter { font-weight:700; color:var(--cyan-dark); flex-shrink:0; }
.opt-text { flex:1; font-weight:500; }
.opt-mark { display:none; flex-shrink:0; font-size:1.1rem; }
.opt.selected { border-color:var(--cyan); background:var(--cyan-light); }
.opt.selected .opt-radio { border-color:var(--cyan); }
.opt.selected .opt-radio::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--cyan); }

/* ── Image options (2x2) ── */
.options.image-opts { grid-template-columns:1fr 1fr; gap:0.7rem; }
@media (max-width:575.98px){ .options.image-opts{ grid-template-columns:1fr 1fr; } }
.opt-image { position:relative; display:flex; align-items:center; justify-content:center; min-height:130px; padding:0.5rem; background:white; border:1px solid var(--border); border-radius:0.75rem; cursor:pointer; transition:all 0.12s; }
.opt-image:hover { border-color:var(--cyan); background:var(--surface-soft); }
.opt-image svg { width:100%; height:115px; }
.opt-image .opt-letter { position:absolute; top:0.5rem; left:0.7rem; }
.opt-image .opt-radio { position:absolute; top:0.55rem; right:0.6rem; }
.opt-image.selected { border-color:var(--cyan); background:var(--cyan-light); }
.opt-image.selected .opt-radio { border-color:var(--cyan); }
.opt-image.selected .opt-radio::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--cyan); }

/* ── True / False ── */
.tf-row { display:flex; gap:0.75rem; }
.tf-btn { flex:1; padding:0.95rem; border:1px solid var(--border); border-radius:0.625rem; background:white; font-weight:700; font-size:0.95rem; color:var(--ink-soft); cursor:pointer; transition:all 0.12s; letter-spacing:0.02em; }
.tf-btn:hover { border-color:var(--cyan); }
.tf-btn.selected { background:var(--cyan-light); border-color:var(--cyan); color:var(--cyan-dark); }

/* ── Erase answer ── */
.erase-answer { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.78rem; font-weight:600; color:var(--ink-muted); background:none; border:none; cursor:pointer; margin-top:0.7rem; }
.erase-answer:hover { color:var(--ink); }
.part-foot { display:flex; justify-content:flex-end; }

/* ── Review option states ── */
.opt.review, .opt-image.review, .tf-btn.review { cursor:default; }
.opt.review:hover, .opt-image.review:hover { border-color:var(--border); background:white; }
.opt.is-correct, .opt-image.is-correct, .tf-btn.is-correct { border-color:var(--well); background:var(--well-soft); }
.opt.is-correct .opt-radio { border-color:var(--well); }
.opt.is-correct .opt-radio::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--well); }
.opt.is-correct .opt-mark { display:inline; color:#065F46; }
.opt.not-quite, .opt-image.not-quite, .tf-btn.not-quite { border-color:var(--priority); background:var(--priority-soft); }
.opt.not-quite .opt-radio { border-color:var(--priority); }
.opt.not-quite .opt-radio::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--priority); }
.opt.not-quite .opt-mark { display:inline; color:#991B1B; }
.opt-tag { font-size:0.68rem; font-weight:700; padding:0.12rem 0.45rem; border-radius:100px; flex-shrink:0; }
.opt.is-correct .opt-tag { background:rgba(6,95,70,0.12); color:#065F46; }
.opt.not-quite .opt-tag { background:rgba(153,27,27,0.12); color:#991B1B; }

/* ── Nav buttons ── */
.exam-nav { display:flex; justify-content:space-between; gap:0.75rem; margin-top:1.5rem; flex-wrap:wrap; }
.btn-nav { display:inline-flex; align-items:center; gap:0.5rem; padding:0.7rem 1.35rem; border-radius:100px; font-weight:600; font-size:0.92rem; text-decoration:none; border:1px solid var(--border); background:white; color:var(--ink-soft); cursor:pointer; transition:all 0.15s; }
.btn-nav:hover:not(:disabled) { background:var(--surface-muted); color:var(--ink); }
.btn-nav:disabled { opacity:0.45; cursor:not-allowed; }
.btn-nav.primary { background:var(--cyan); border-color:var(--cyan); color:white; }
.btn-nav.primary:hover:not(:disabled) { background:var(--cyan-dark); color:white; }
@media (max-width:575.98px){ .exam-nav .btn-nav{ flex:1; justify-content:center; } }

/* ── Right panel (matches reference) ── */
.grid-panel { background:white; border:1px solid var(--border); border-radius:1rem; padding:1.25rem; position:sticky; top:1.5rem; }
.panel-time-row { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; font-size:0.95rem; font-weight:600; color:var(--ink); }
.panel-divider { border:none; border-top:1px dashed var(--border); margin:1rem 0; }
.panel-count { font-size:0.95rem; color:var(--ink); margin:0; }
.panel-count b { font-weight:800; }
.legend-bar { display:flex; gap:1.5rem; background:var(--surface-muted); border-radius:0.5rem; padding:0.6rem 0.9rem; font-size:0.85rem; font-weight:600; color:var(--ink-soft); }
.legend-bar .li { display:flex; align-items:center; gap:0.45rem; }
.legend-dot { width:13px; height:13px; border-radius:50%; border:1.5px solid #CBD5E1; background:#fff; }
.legend-dot.done { background:var(--cyan); border-color:var(--cyan); }
.legend-bar b { color:var(--ink); }

.q-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0.5rem; }
.q-cell { aspect-ratio:1/1; border-radius:0.5rem; border:1px solid var(--border); background:white; color:var(--ink-soft); font-weight:600; font-size:0.85rem; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:all 0.12s; }
.q-cell:hover { border-color:var(--cyan); }
.q-cell.answered { background:var(--cyan-light); border-color:var(--cyan); color:var(--cyan-dark); }
.q-cell.current { background:var(--cyan); border-color:var(--cyan); color:white; box-shadow:0 0 0 3px rgba(0,213,229,0.25); }
.q-cell.flagged::after { content:''; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--keep); }

.early-text { font-size:0.85rem; color:var(--ink-soft); text-align:center; margin:0 0 0.85rem; line-height:1.45; }
.btn-early { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.8rem 1rem; border-radius:0.75rem; font-weight:700; font-size:0.95rem; background:var(--cyan-dark); color:white; border:none; cursor:pointer; transition:all 0.15s; }
.btn-early:hover { background:#0E7490; }

/* ── Results / review ── */


.flag-reason { display:flex; align-items:center; gap:0.65rem; padding:0.75rem 0.9rem; border:1px solid var(--border); border-radius:0.75rem; cursor:pointer; margin-bottom:0.5rem; font-size:0.92rem; color:var(--ink); transition:all 0.12s; }
.flag-reason:hover { border-color:var(--cyan); background:var(--surface-soft); }
.flag-reason input { accent-color:var(--cyan); width:18px; height:18px; }

/* Intro "ready to start" popup */
.intro-icon { width:56px; height:56px; border-radius:50%; background:var(--cyan-light); color:var(--cyan-dark); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 0.85rem; }
.intro-facts { display:flex; gap:0.5rem; margin:1.25rem 0; }
.intro-fact { flex:1; display:flex; flex-direction:column; align-items:center; gap:0.2rem; background:var(--surface-soft); border:1px solid var(--border); border-radius:0.75rem; padding:0.85rem 0.4rem; }
.intro-fact i { color:var(--cyan-dark); font-size:1.1rem; margin-bottom:0.15rem; }
.intro-fact .if-val { font-weight:800; font-size:0.92rem; color:var(--ink); }
.intro-fact .if-lbl { font-size:0.72rem; color:var(--ink-muted); }
.intro-tips { list-style:none; padding:0; margin:0 0 0.5rem; text-align:left; }
.intro-tips li { display:flex; align-items:flex-start; gap:0.6rem; font-size:0.88rem; color:var(--ink-soft); padding:0.4rem 0; }
.intro-tips li i { color:var(--cyan-dark); margin-top:2px; }

/* ============================================================
   COMPREHENSIVE RESPONSIVE (tablet + mobile) — all pages
   ============================================================ */
/* Tablet: <= 992px */
@media (max-width: 992px) {
  .na-grid { grid-template-columns: 1fr 1fr; }
  .chapter-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .locked-row { grid-template-columns: 1fr; }
  .subj-grid { grid-template-columns: 1fr; }
  .page-card { padding: 1.75rem; }
  /* progress detail topic cards + subject cards stack 2-up */
  .grid-2, .grid-3 { grid-template-columns: 1fr 1fr; }
}

/* Small tablet / large phone: <= 760px */
@media (max-width: 760px) {
  .na-grid { grid-template-columns: 1fr; }
  .chapter-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* exam-papers / saved subject rows: stack the buttons under the name */
  .ep-subj, .sv-subj { flex-direction: column; align-items: stretch; }
  .ep-subj .btns, .sv-subj .btns { justify-content: stretch; }
  .ep-cat-btn, .sv-count-btn { flex: 1; }
  /* subject-detail header wraps cleanly */
  .subject-head { flex-direction: column; align-items: flex-start; }
  .subject-head .prog-row .bar { max-width: 100%; }
  /* filter bar wraps */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .unit-select { width: 100%; }
}

/* Phone: <= 600px */
@media (max-width: 600px) {
  .page-card { padding: 1.15rem; border-radius: 12px; }
  .block { padding: 1.15rem; }
  .stat-grid { grid-template-columns: 1fr; }
  .sec-head2 { flex-wrap: wrap; }
  .sec-block-title, .section-head__title { font-size: 1.2rem; }
  /* hero */
  .hero { padding: 1.25rem; }
  .hero h2 { font-size: 1.3rem; }
  .hero-chips { gap: 0.4rem; }
  /* subject rows: keep icon+name, let bar wrap under */
  .subj-prog { flex-wrap: wrap; }
  .subj-bar { max-width: 100%; min-width: 120px; }
  /* recently-done rows stack */
  .recent-row { flex-wrap: wrap; }
  .recent-when { width: auto; }
  .recent-row .pill { margin-left: 0; }
  /* study-plan timeline scrolls horizontally instead of squashing */
  .glance { overflow-x: auto; }
  .glance-track { min-width: 620px; }
  /* day card buttons full width */
  .day-btns { flex-direction: column; align-items: stretch; }
  .day-btns .btn-go, .day-btns .btn-soft { justify-content: center; }
  /* exam: question grid 4-up on phone */
  .q-grid { grid-template-columns: repeat(4, 1fr); }
  /* progress stat cards */
  .stat-card { padding: 0.9rem 1rem; }
  .stat-ic { width: 46px; height: 46px; font-size: 1.2rem; }
  /* result actions stack */
  .result-actions { flex-direction: column; }
  .result-actions .btn-nav { min-width: 0; }
}

/* Tiny phone: <= 380px */
@media (max-width: 380px) {
  .hero-chips { flex-direction: column; align-items: flex-start; }
  .q-grid { grid-template-columns: repeat(3, 1fr); }
}/* ============================================================
   EXAM-PAPERS (exact old design)
   ============================================================ */
.ep-subj { display:flex; align-items:center; gap:0.9rem; background:white; border:1px solid var(--border); border-radius:1rem; padding:1.15rem 1.25rem; margin-bottom:0.75rem; flex-wrap:wrap; }
.ep-subj .subject-icon { width:44px; height:44px; font-size:1.1rem; flex-shrink:0; }
.ep-subj-name { font-weight:700; font-size:1.05rem; flex:1; min-width:120px; margin:0; }
.ep-subj-btns { display:flex; gap:0.5rem; flex-wrap:wrap; }
.ep-cat-btn { display:inline-flex; flex-direction:column; align-items:flex-start; gap:0.1rem; background:var(--surface-soft); border:1px solid var(--border); border-radius:0.75rem; padding:0.6rem 0.95rem; cursor:pointer; transition:all 0.12s; min-width:140px; }
.ep-cat-btn:hover { border-color:var(--cyan); }
.ep-cat-btn .t { font-weight:700; font-size:0.88rem; color:var(--ink); display:flex; align-items:center; gap:0.4rem; }
.ep-cat-btn .t i { color:var(--cyan-dark); }
.ep-cat-btn .n { font-size:0.78rem; color:var(--ink-muted); font-weight:600; }
.ep-cat-btn.empty { opacity:0.55; pointer-events:none; }
.ep-paper { display:flex; align-items:center; gap:0.85rem; background:white; border:1px solid var(--border); border-radius:0.75rem; padding:1rem; margin-bottom:0.5rem; flex-wrap:wrap; }
.ep-ic { width:44px; height:44px; border-radius:0.625rem; background:#FEE2E2; color:#DC2626; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.ep-body { flex:1; min-width:140px; }
.ep-title { font-weight:700; color:var(--ink); margin:0 0 0.15rem; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.ep-meta { font-size:0.8rem; color:var(--ink-muted); margin:0; }
.ep-done { display:inline-flex; align-items:center; gap:0.25rem; font-size:0.72rem; font-weight:700; color:#047857; background:#D1FAE5; padding:0.12rem 0.5rem; border-radius:100px; }
.ep-acts { display:flex; gap:0.5rem; flex-shrink:0; }
.btn-dl { display:inline-flex; align-items:center; gap:0.4rem; background:linear-gradient(90deg,var(--cyan),var(--cyan-dark)); color:#fff; border:none; border-radius:0.5rem; padding:0.5rem 0.95rem; font-weight:700; font-size:0.83rem; cursor:pointer; white-space:nowrap; }
.btn-dl:hover { filter:brightness(0.96); }
.btn-dl.again { background:white; color:var(--cyan-dark); border:1px solid var(--cyan); }
.btn-ans { display:inline-flex; align-items:center; gap:0.4rem; background:var(--surface-muted); color:var(--ink-soft); border:1px solid var(--border); border-radius:0.5rem; padding:0.5rem 0.95rem; font-weight:700; font-size:0.83rem; text-decoration:none; white-space:nowrap; }
.btn-ans:hover { background:var(--border); color:var(--ink); }

/* ============================================================
   SAVED
   ============================================================ */
.sv-subj { display: flex; align-items: center; gap: var(--s-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-4); flex-wrap: wrap; }
.sv-subj .name { font-weight: 700; color: var(--ink); flex: 1; min-width: 120px; }
.sv-subj .btns { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sv-count-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--r); padding: 0.55rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.sv-count-btn:hover { border-color: var(--cyan); background: var(--cyan-light); }
.sv-count-btn b { color: var(--ink); }
.sv-count-btn.empty { opacity: 0.55; }
.grp-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; margin: var(--s-5) 0 var(--s-3); }
.grp-title .n { background: var(--surface-muted); color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: var(--r-pill); }

/* Corrected question card */
.cq { border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 0.7rem; overflow: hidden; background: #fff; }
.cq-head { width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem; background: none; border: none; cursor: pointer; text-align: left; }
.cq-status { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; font-size: 0.8rem; }
.cq-status.correct { background: var(--well); } .cq-status.wrong { background: var(--priority); }
.cq-htext { flex: 1; font-weight: 600; color: var(--ink); }
.cq-num { display: inline-block; font-size: 0.72rem; font-weight: 800; color: var(--ink-muted); margin-right: 0.4rem; }
.cq-chev { color: var(--ink-light); transition: transform 0.2s; }
.cq.collapsed .cq-body { display: none; }
.cq:not(.collapsed) .cq-chev { transform: rotate(180deg); }
.cq-body { padding: 0 1rem 1rem; }
.cq-opts { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.cq-opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 0.9rem; }
.cq-opt.correct { border-color: var(--well); background: var(--well-soft); }
.cq-opt.wrong { border-color: var(--priority); background: var(--priority-soft); }
.cq-let { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-muted); font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cq-otext { flex: 1; }
.cq-mark { margin-left: auto; }
.cq-opt.correct .cq-mark { color: var(--well-ink); } .cq-opt.wrong .cq-mark { color: var(--priority-ink); }
.cq-your { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.7rem; }
.cq-explain { background: var(--cyan-light); border-radius: var(--r); padding: 0.8rem 1rem; }
.cq-explain-h { font-weight: 700; color: var(--cyan-dark); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; font-size: 0.9rem; }
.cq-explain p { font-size: 0.88rem; color: var(--ink-soft); }
.cq-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.7rem; }
.cq-tag { font-size: 0.78rem; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.cq-remove { border: 1px solid var(--border); background: var(--surface); color: var(--priority-ink); font-size: 0.8rem; font-weight: 700; padding: 0.35rem 0.7rem; border-radius: var(--r-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }

/* Paper review summary */
.pr-summary { background: var(--surface-muted); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-4); }
.pr-score { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.pr-score b { font-size: 1.8rem; color: var(--ink); }
.pr-stats { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pr-stat { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.pr-stat.ok { color: var(--well-ink); } .pr-stat.no { color: var(--priority-ink); }

/* Saved paper row */
.sv-paper { display: flex; align-items: center; gap: var(--s-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); margin-bottom: 0.7rem; flex-wrap: wrap; }
.sv-paper .p-icon { width: 42px; height: 42px; border-radius: var(--r); background: var(--cyan-light); color: var(--cyan-dark); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.sv-paper .p-body { flex: 1; min-width: 140px; }
.sv-paper .p-title { font-weight: 700; color: var(--ink); }
.sv-paper .p-meta { font-size: 0.82rem; color: var(--ink-muted); }
.btn-review { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--cyan); color: #fff; border: none; border-radius: var(--r-sm); padding: 0.5rem 0.9rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.sv-empty { text-align: center; color: var(--ink-muted); padding: 2.5rem 1rem; }
.sv-empty i { font-size: 2rem; color: var(--ink-light); display: block; margin-bottom: 0.5rem; }

/* ============================================================
   REVISION NOTES  (article content styling)
   ============================================================ */
.notes .nt-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:1.3rem; }
.notes .nt-eyebrow { font-size:0.75rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--cyan-dark); margin-bottom:0.2rem; }
.notes .nt-top h1 { font-size:1.9rem; font-weight:800; letter-spacing:-0.02em; line-height:1.15; color:var(--ink); margin:0; }
.notes .read-badge { display:inline-flex; align-items:center; gap:6px; background:var(--surface-muted); color:var(--ink-soft); font-size:0.78rem; font-weight:600; padding:6px 12px; border-radius:999px; margin-top:0.35rem; }
.notes .read-badge b { color:var(--ink); }
.notes .learn { background:var(--ink); color:#fff; border-radius:16px; padding:16px 20px; margin-bottom:1.6rem; }
.notes .learn h2 { font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--cyan); margin:0 0 8px; }
.notes .learn ul { list-style:none; display:flex; gap:8px 22px; flex-wrap:wrap; margin:0; padding:0; }
.notes .learn li { font-size:0.92rem; font-weight:500; display:flex; align-items:center; gap:8px; }
.notes .learn li::before { content:""; width:7px; height:7px; border-radius:50%; background:#F59E0B; flex-shrink:0; }
.notes .section-label { font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin:1.8rem 0 0.85rem; display:flex; align-items:center; gap:10px; }
.notes .section-label::after { content:""; flex:1; height:1px; background:var(--border); }
.notes .keybox { border:1px solid var(--border); border-left:4px solid var(--cyan); border-radius:12px; padding:16px 18px; margin-bottom:14px; background:#fff; }
.notes .keybox h3 { font-size:1.02rem; font-weight:700; margin:0 0 4px; color:var(--ink); }
.notes .keybox p { font-size:0.92rem; color:var(--ink-soft); margin:0; }
.notes .keybox .big { color:var(--ink); font-weight:600; }
.notes .keybox.amber { border-left-color:#F59E0B; }
.notes .shape-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px; }
.notes .shape-card { border:1px solid var(--border); border-radius:12px; padding:14px 10px 12px; text-align:center; background:#fff; }
.notes .shape-card img { width:100%; max-width:118px; height:92px; object-fit:contain; margin:0 auto 8px; display:block; }
.notes .shape-card .name { font-size:0.86rem; font-weight:700; color:var(--ink); }
.notes .shape-card .count { display:inline-block; margin-top:5px; font-size:0.78rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.notes .c-0 { background:#FEE2E2; color:#DC2626; }
.notes .c-1 { background:#FEF3C7; color:#B45309; }
.notes .c-2 { background:#E0F2FE; color:#0369A1; }
.notes .c-hi { background:#DCFCE7; color:#15803D; }
.notes .rulebox { background:var(--surface-muted); border-radius:12px; padding:16px 18px; margin-bottom:14px; }
.notes .rulebox h3 { font-size:0.94rem; font-weight:700; margin:0 0 8px; display:flex; align-items:center; gap:8px; color:var(--ink); }
.notes .rulebox h3 .dot { width:22px; height:22px; border-radius:6px; background:var(--cyan); color:var(--ink); font-size:0.8rem; font-weight:800; display:grid; place-items:center; }
.notes .rulebox p { font-size:0.9rem; color:var(--ink-soft); margin:0 0 0.3rem; }
.notes .rulebox p:last-child { margin-bottom:0; }
.notes .rulebox .rx { margin-top:6px; font-size:0.88rem; color:var(--ink); font-weight:500; }
.notes .tip { display:flex; gap:12px; align-items:flex-start; border:1px solid #FCD34D; background:#FFFBEB; border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.notes .tip .ico { flex-shrink:0; width:26px; height:26px; border-radius:7px; background:#F59E0B; color:#fff; font-weight:800; font-size:0.92rem; display:grid; place-items:center; }
.notes .tip p { font-size:0.9rem; margin:0; color:var(--ink-soft); }
.notes .tip b { color:#92400E; }
.notes .tip.miss { border-color:#FCA5A5; background:#FEF2F2; }
.notes .tip.miss .ico { background:#DC2626; }
.notes .tip.miss b { color:#991B1B; }
.notes .letters { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.notes .letters .l { border:1px solid var(--border); border-radius:9px; padding:8px 4px; text-align:center; min-width:58px; flex:1; }
.notes .letters .l .big { font-size:1.25rem; font-weight:800; display:block; color:var(--ink); }
.notes .letters .l .sub { font-size:0.72rem; color:var(--ink-soft); font-weight:600; }
.notes .nt-footer { margin-top:2rem; padding-top:16px; border-top:1px solid var(--border); font-size:0.78rem; color:var(--ink-light); text-align:center; }
.notes .note-cta { background:#fff; border:1px solid var(--cyan); border-radius:12px; padding:1.5rem; text-align:center; margin-top:1.5rem; }
.notes .note-cta h3 { font-size:1.15rem; font-weight:800; color:var(--ink); margin:0 0 1rem; }
.notes .note-cta .btns { display:flex; gap:0.7rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   PROGRESS (exact old design)
   ============================================================ */
.sect-title { font-size:1.15rem; font-weight:800; margin:1.6rem 0 0.9rem; }
.sect-title:first-child { margin-top:0; }
.sect-sub { font-size:0.88rem; color:var(--ink-muted); margin:-0.6rem 0 1.1rem; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.6rem; }
.stat-card { background:white; border:1px solid var(--border); border-radius:1rem; padding:1.1rem 1.25rem; display:flex; align-items:center; gap:1rem; }
.stat-ic { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; flex-shrink:0; }
.stat-ic.cyan{background:var(--cyan);} .stat-ic.blue{background:#3B82F6;} .stat-ic.green{background:#10B981;} .stat-ic.amber{background:#F59E0B;}
.stat-val { font-size:1.5rem; font-weight:800; color:var(--ink); line-height:1.1; display:flex; align-items:center; gap:0.3rem; }
.stat-lbl { font-size:0.82rem; color:var(--ink-muted); }
.trend { font-size:0.8rem; } .trend.up { color:#10B981; } .trend.down { color:#EF4444; }

.pcard { background:white; border:1px solid #ADB0B8; border-radius:0.6rem; padding:1rem; height:100%; display:flex; flex-direction:column; }
.pcard-head { display:flex; align-items:center; gap:0.6rem; margin-bottom:1rem; }
.pcard-head .subject-icon { width:36px; height:36px; font-size:0.95rem; flex-shrink:0; }
.pcard-head h3 { font-size:1.05rem; font-weight:700; margin:0; }
.perf-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.4rem; }
.perf-lbl { font-size:0.82rem; color:var(--ink-muted); }
.perf-val { font-weight:800; font-size:0.95rem; display:flex; align-items:center; gap:0.25rem; }
.pct-priority{color:#EF4444;} .pct-improving{color:#B45309;} .pct-doingwell{color:#047857;}
.pbar { height:8px; background:var(--surface-muted); border-radius:100px; overflow:hidden; margin-bottom:1rem; }
.pbar > div { height:100%; border-radius:100px; }
.pbar-click { cursor:pointer; transition:transform 0.12s; }
.pbar-click:hover { transform:scaleY(1.3); }
.trend-link { display:inline-flex; align-items:center; gap:0.35rem; background:none; border:none; padding:0; margin:-0.5rem 0 0.9rem; color:var(--cyan-dark); font-size:0.78rem; font-weight:500; cursor:pointer; }
.trend-link:hover { text-decoration:underline; }
.trend-link.tl-sm { font-size:0.74rem; margin:0.45rem 0 0; }
.bd-title { font-size:0.85rem; font-weight:700; color:var(--ink-muted); margin:0.3rem 0 0.2rem; }
.breakdown { margin-bottom:1rem; }
.bd-row { display:flex; align-items:center; gap:0.5rem; font-size:0.8rem; padding:0.3rem 0; border-bottom:1px dotted #93abc2; }
.bd-row:last-child { border-bottom:0; }
.bd-row .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.perf-priority{background:#EF4444;} .perf-improving{background:#F59E0B;} .perf-doingwell{background:#10B981;}
.bd-name { color:var(--ink-soft); flex:1; }
.bd-n { font-weight:700; color:var(--ink); }
.pcard-btns { margin-top:auto; display:flex; flex-direction:column; gap:0.5rem; }
.pbtn { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; border-radius:0.4rem; padding:0.5rem; font-weight:600; font-size:0.8rem; text-decoration:none; cursor:pointer; border:1px solid var(--border); }
.pbtn.primary { background:#30B7D8; color:#fff; border:none; }
.pbtn.primary:hover { filter:brightness(0.96); color:#fff; text-decoration:none; }
.pbtn.practise-now { background:#30B7D8; color:#fff; border:none; }
.pbtn.practise-now:hover { filter:brightness(0.96); color:#fff; text-decoration:none; }
.pbtn.ghost { background:var(--surface-muted); color:var(--ink-soft); }
.pbtn.ghost:hover { background:var(--border); color:var(--ink); text-decoration:none; }

.tcard { position:relative; padding-top:1.5rem; }
.tcard-pill { position:absolute; top:0; right:1.15rem; transform:translateY(-50%); }
.tcard .pbar { margin-bottom:0; }
.unit-lbl { font-size:0.8rem; font-weight:600; color:var(--ink-muted); }
.topic-name { font-size:1.05rem; font-weight:800; color:var(--ink); margin:0; line-height:1.25; }
.tdiv { border-top:1px dotted #656A70; margin:1rem 0; }
.tstats-lbl { font-weight:600; color:#5E6370; font-size:0.9rem; margin:0; }
.tstats { display:flex; }
.tstat { flex:1; text-align:center; padding:0.7rem 0.3rem; }
.tstat .v { font-weight:800; color:var(--ink); }
.tstat .l { font-size:0.72rem; color:var(--ink-muted); }
.no-topics { text-align:center; color:var(--ink-muted); padding:2rem 1rem; grid-column:1/-1; }

.filter-bar { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.ftabs { display:inline-flex; background:#DFE4E9; border-radius:0.625rem; padding:3px; flex-wrap:wrap; }
.ftabs button { border:none; background:none; padding:0.45rem 0.85rem; border-radius:0.5rem; font-weight:600; font-size:0.84rem; color:var(--ink-soft); cursor:pointer; }
.ftabs button.active { background:white; color:var(--ink); box-shadow:0 1px 2px rgba(15,23,42,0.08); }
.unit-select { border:1px solid var(--border); border-radius:0.625rem; padding:0.5rem 0.85rem; font-weight:600; font-size:0.85rem; color:var(--ink); background:white; min-width:160px; }
.cm-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.45); display:none; align-items:center; justify-content:center; z-index:1080; padding:1rem; }
.cm-overlay.show { display:flex; }
.cm-box { background:#fff; border-radius:1rem; width:100%; max-width:540px; padding:1.5rem; }
.cm-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin-bottom:1rem; }
.cm-head h3 { font-size:1.05rem; }
.cm-x { border:none; background:var(--surface-muted); width:32px; height:32px; border-radius:0.5rem; color:var(--ink-soft); cursor:pointer; }
.cm-note { font-size:0.85rem; color:var(--ink-soft); margin-top:0.75rem; }

/* ============================================================
   ACCOUNT (student)
   ============================================================ */
.acct-hero { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.acct-hero .av { width: 64px; height: 64px; border-radius: 50%; background: var(--cyan); color: #fff; font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acct-hero h2 { font-size: 1.4rem; }
.acct-hero .sub { color: var(--ink-muted); font-size: 0.9rem; }
.acct-note { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--cyan-light); border-radius: var(--r); padding: 0.8rem 1rem; font-size: 0.88rem; color: var(--ink-soft); margin-top: var(--s-3); }
.acct-note i { color: var(--cyan-dark); font-size: 1.1rem; flex-shrink: 0; }
.field input:read-only, .field input.ro { background: var(--surface-muted); color: var(--ink-muted); cursor: not-allowed; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0.9rem 0; }
.pref-row + .pref-row { border-top: 1px solid var(--surface-muted); }
.pref-row .pref-txt b { color: var(--ink); display: block; }
.pref-row .pref-txt span { font-size: 0.85rem; color: var(--ink-muted); }
/* simple toggle */
.toggle { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track { position: absolute; inset: 0; background: var(--border); border-radius: var(--r-pill); transition: background 0.2s; cursor: pointer; }
.toggle .track::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.toggle input:checked + .track { background: var(--cyan); }
.toggle input:checked + .track::before { transform: translateX(20px); }

/* ============================================================
   HOME REGRESSION FIXES (match old compact look)
   ============================================================ */
/* Today's-practice primary button: tighter pill like old */
.card--accent .btn2--primary { padding: 0.6rem 1.15rem; font-size: 0.9rem; }

/* Subject rows: compact, single visual line */
.subj-row { padding: 0.85rem 1rem; gap: 0.85rem; align-items: center; }
.subj-row .u-bold.u-ink { margin-bottom: 0.35rem; font-size: 0.95rem; }
.subj-prog { gap: 0.6rem; margin-top: 0; }
.subj-prog .u-fs-label { font-size: 0.72rem; }
.subj-row .bar--capped { max-width: 180px; }

/* Needs-attention: solid slate button WITH right arrow pushed to edge */
.need-card .btn2--soft { justify-content: space-between; padding: 0.6rem 0.9rem; }
.need-card .btn2--soft .bi-arrow-right { margin-left: auto; }

/* Subject icon glyph: force visible sizing */
.subject-icon { font-size: 1.1rem; }
.subject-icon i { display: inline-block; line-height: 1; }
.subject-icon--sm { font-size: 0.85rem; }

/* Safety: guarantee Bootstrap Icons glyph font wins over body Inter */
.bi::before { font-family: "bootstrap-icons" !important; }

/* ============================================================
   OLD-DESIGN EXACT PORTS (home subjects, hero, needs-attention)
   token map: --brand-cyan -> --cyan, --brand-cyan-dark -> --cyan-dark,
              --brand-cyan-light -> --cyan-light
   ============================================================ */
/* Hero (today's practice) */
.hero { background:#fff; border:1px solid var(--cyan); border-radius:12px; padding:2rem 1.9rem; }
.hero h2 { font-size:1.5rem; font-weight:800; color:var(--ink); margin:0 0 0.6rem; }
.hero-sub { color:var(--ink-soft); font-size:0.95rem; font-weight:600; margin:0 0 0.5rem; }
.hero-meta { color:var(--ink-muted); font-size:0.88rem; margin:0 0 1.5rem; }
.hero-chips { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.hero-chip { display:inline-flex; align-items:center; gap:0.4rem; background:#fff; color:var(--ink-soft); font-size:0.82rem; font-weight:600; padding:0.4rem 0.85rem; border-radius:100px; border:1px solid var(--border); }
.hero-start { display:inline-flex; align-items:center; gap:0.5rem; background:var(--cyan); color:#fff; font-weight:800; padding:0.7rem 1.2rem; border-radius:0.7rem; text-decoration:none; font-size:0.92rem; }
.hero-start:hover { background:var(--cyan-dark); color:#fff; text-decoration:none; }

/* Section title (bigger, old style) */
.sec-block-title { font-size:1.35rem; font-weight:800; color:var(--ink); margin:0; }
.sec-block-sub { font-size:0.9rem; color:var(--ink-muted); margin:0.15rem 0 0; }
.sec-head2 { display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem; margin-bottom:1.1rem; }
.sec-link2 { font-size:0.88rem; font-weight:700; color:var(--cyan-dark); white-space:nowrap; }

/* Subject rows — EXACT old */
.subj-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.9rem; }
.subj-row { display:flex; align-items:center; gap:0.9rem; background:var(--surface-muted); border:1px solid transparent; border-radius:12px; padding:1rem 1.2rem; text-decoration:none; transition:background 0.18s, border-color 0.18s, box-shadow 0.18s; }
.subj-row:hover { border-color:var(--cyan); background:#fff; box-shadow:0 6px 16px rgba(15,23,42,0.06); text-decoration:none; }
.subj-row .subject-icon {
  width: 54px;
  height: 54px;
  font-size: 1.1rem;
  border-radius: 0.7rem;
  flex-shrink: 0;
}
.subj-mid { flex:1; min-width:0; }

.subj-empty { font-size:0.82rem; color:var(--ink-muted); }
.subj-row .chev { color:var(--ink-light); margin-left:auto; flex-shrink:0; font-size:1.1rem; }

/* Needs attention — EXACT old */
.na-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.na-card { background:#EDEFF1; border:0; border-left:0; border-radius:12px; padding:1.3rem 1.2rem; }
.na-card.p-priority { border-left-color:#F87171; }
.na-card.p-keep { border-left-color:#FBBF24; }
.na-card.p-well { border-left-color:#6EE7B7; }
.na-top { display:flex; align-items:center; gap:0.55rem; margin-bottom:0.75rem; }
.na-top .subject-icon { width:30px; height:30px; font-size:0.8rem; border-radius:0.6rem; flex-shrink:0; }
.na-subj { font-size:0.82rem; font-weight:600; color:var(--ink-soft); }
.na-topic { font-size:1.05rem; font-weight:800; color:var(--ink); margin-bottom:0.85rem; }
.na-top .pill { margin-left:auto; }
.na-btn { display:flex; align-items:center; justify-content:space-between; width:100%; background:#fff; border:1px solid #09a5b1; border-radius:0.6rem; padding:0.5rem 0.8rem; font-weight:600; color:#0caab6; text-decoration:none; font-size:0.8rem; transition:background 0.15s, transform 0.12s, box-shadow 0.15s; }
.na-btn:hover { background:#ECFEFF; color:#0891B2; text-decoration:none; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,213,229,0.25); }

/* Recently done — old */
.recent-row { display:flex; align-items:center; gap:1rem; padding:0.95rem 0; }
.recent-row + .recent-row { border-top:1px solid var(--surface-muted); }
.recent-when { font-size:0.82rem; font-weight:700; color:var(--ink-muted); width:80px; flex-shrink:0; }
.recent-mid { flex:1; min-width:0; }
.recent-title { font-weight:800; color:var(--ink); }
.recent-sub { font-size:0.85rem; color:var(--ink-soft); margin-top:0.1rem; }
.recent-row .pill { margin-left:auto; flex-shrink:0; }

/* ============================================================
   PRACTICE (exam engine — exact old design)
   ============================================================ */
/* ── Header (matches study-plan) ── */
.page-header-bar { background:white; border-bottom:1px solid var(--border); padding:1rem 2rem; display:flex; align-items:center; gap:0.875rem; }
@media (max-width:991.98px){ .page-header-bar{ padding:0.875rem 1rem; } }
.page-header-bar .icon-wrap { width:36px; height:36px; border-radius:8px; background:var(--cyan-light); color:var(--cyan-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.page-header-bar h1 { font-size:1.25rem; font-weight:700; margin:0; line-height:1.2; }
.page-header-bar .header-sub { font-size:0.8rem; color:var(--ink-muted); margin:0; }
.header-title-wrap { flex:1; min-width:0; }
.leave-btn { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.85rem; font-weight:600; color:var(--ink-soft); background:white; border:1px solid var(--border); border-radius:0.625rem; padding:0.45rem 0.85rem; text-decoration:none; transition:all 0.12s; }
.leave-btn:hover { background:var(--surface-muted); color:var(--ink); }

/* ── Focus mode while taking the paper (strip all chrome) ── */
.exam-topbar { display:none; }
.taking-paper .exam-topbar { display:block; position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border); }
.exam-topbar-inner { max-width:1200px; margin:0 auto; padding:0.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.etb-left { display:flex; align-items:center; gap:0.75rem; min-width:0; }
.etb-logo { height:26px; }
.etb-title { font-weight:700; color:var(--ink); font-size:0.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.etb-right { display:flex; align-items:center; gap:0.6rem; }
@media (max-width:575.98px){ .etb-title{ display:none; } .exam-topbar-inner{ padding:0.65rem 1rem; } }
.taking-paper .sidebar { display:none !important; }
.taking-paper .bottom-nav { display:none !important; }
.taking-paper .page-header-bar { display:none !important; }

.app-main {
  background-color: #FCFAF8;
  background-image: url('img/bg-pattern.png');
  background-repeat: repeat;
  background-size: 400px 400px;
  padding: 0;
}
.app-main > .app-content { padding:1.5rem 1rem; max-width:1200px; margin:0 auto; }
@media (min-width:768px){ .app-main > .app-content{ padding:2rem 1.5rem; } }
@media (min-width:992px){ .app-main > .app-content{ padding:2rem; } }

/* ── Progress strip ── */
.exam-progress { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.exam-counter { font-size:1rem; font-weight:700; color:var(--ink); margin:0; }
.exam-counter .total { color:var(--ink-muted); font-weight:600; }
.exam-progress-right { display:flex; align-items:center; gap:0.6rem; }
.time-pill { display:inline-flex; align-items:center; gap:0.4rem; background:var(--cyan); color:#fff; font-weight:700; padding:0.35rem 0.8rem; border-radius:0.5rem; font-size:0.85rem; font-variant-numeric:tabular-nums; }
.grid-toggle { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.82rem; font-weight:600; color:var(--ink-soft); background:white; border:1px solid var(--border); border-radius:0.625rem; padding:0.4rem 0.75rem; }
.exam-progress-bar { height:6px; background:var(--surface-muted); border-radius:100px; overflow:hidden; margin-bottom:1.25rem; }
.exam-progress-bar-fill { height:100%; background:var(--cyan); border-radius:100px; transition:width 0.3s ease; }

/* ── Question card ── */
.question-card { background:white; border:1px solid var(--border); border-radius:1rem; padding:1.75rem; }
@media (max-width:575.98px){ .question-card{ padding:1.25rem; } }
.question-card-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:1rem; }
.q-num-badge { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.78rem; font-weight:600; color:var(--ink-muted); background:var(--surface-muted); padding:0.3rem 0.7rem; border-radius:100px; }
.q-tools { display:flex; gap:0.4rem; }
.q-tool-btn { width:38px; height:38px; border-radius:0.625rem; background:white; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:1.05rem; transition:all 0.12s; cursor:pointer; }
.q-tool-btn:hover { background:var(--surface-muted); color:var(--ink); }
.q-tool-btn.saved { color:var(--cyan-dark); background:var(--cyan-light); border-color:var(--cyan); }
.q-tool-btn.flagged { color:#B45309; background:var(--keep-soft); border-color:var(--keep); }

.q-stem { font-size:1.15rem; font-weight:600; color:var(--ink); line-height:1.5; margin-bottom:1rem; }
.question-figure { margin:0 auto 1.25rem; padding:1rem; background:var(--surface-soft); border:1px solid var(--border); border-radius:0.75rem; display:flex; justify-content:center; }
.question-figure svg { max-width:100%; height:auto; }

.part { margin-bottom:1.6rem; }
.part:last-child { margin-bottom:0; }
.part-q { font-size:1.05rem; font-weight:600; color:var(--ink); line-height:1.5; margin-bottom:0.85rem; }
.part-label { color:var(--cyan-dark); font-weight:700; margin-right:0.3rem; }

/* ── Text options (2-column, radio style) ── */
.options { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
@media (max-width:575.98px){ .options{ grid-template-columns:1fr; } }
.opt { display:flex; align-items:center; gap:0.6rem; width:100%; text-align:left; background:white; border:1px solid var(--border); border-radius:0.625rem; padding:0.7rem 0.85rem; cursor:pointer; transition:all 0.12s; font-size:0.95rem; color:var(--ink); }
.opt:hover { border-color:var(--cyan); background:var(--surface-soft); }
.opt-radio { width:18px; height:18px; border-radius:50%; border:2px solid #CBD5E1; flex-shrink:0; position:relative; transition:all 0.12s; }
.opt-letter { font-weight:700; color:var(--cyan-dark); flex-shrink:0; }
.opt-text { flex:1; font-weight:500; }
.opt-mark { display:none; flex-shrink:0; font-size:1.1rem; }
.opt.selected { border-color:var(--cyan); background:var(--cyan-light); }
.opt.selected .opt-radio { border-color:var(--cyan); }
.opt.selected .opt-radio::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--cyan); }

/* ── Image options (2x2) ── */
.options.image-opts { grid-template-columns:1fr 1fr; gap:0.7rem; }
@media (max-width:575.98px){ .options.image-opts{ grid-template-columns:1fr 1fr; } }
.opt-image { position:relative; display:flex; align-items:center; justify-content:center; min-height:130px; padding:0.5rem; background:white; border:1px solid var(--border); border-radius:0.75rem; cursor:pointer; transition:all 0.12s; }
.opt-image:hover { border-color:var(--cyan); background:var(--surface-soft); }
.opt-image svg { width:100%; height:115px; }
.opt-image .opt-letter { position:absolute; top:0.5rem; left:0.7rem; }
.opt-image .opt-radio { position:absolute; top:0.55rem; right:0.6rem; }
.opt-image.selected { border-color:var(--cyan); background:var(--cyan-light); }
.opt-image.selected .opt-radio { border-color:var(--cyan); }
.opt-image.selected .opt-radio::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--cyan); }

/* ── True / False ── */
.tf-row { display:flex; gap:0.75rem; }
.tf-btn { flex:1; padding:0.95rem; border:1px solid var(--border); border-radius:0.625rem; background:white; font-weight:700; font-size:0.95rem; color:var(--ink-soft); cursor:pointer; transition:all 0.12s; letter-spacing:0.02em; }
.tf-btn:hover { border-color:var(--cyan); }
.tf-btn.selected { background:var(--cyan-light); border-color:var(--cyan); color:var(--cyan-dark); }

/* ── Erase answer ── */
.erase-answer { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.78rem; font-weight:600; color:var(--ink-muted); background:none; border:none; cursor:pointer; margin-top:0.7rem; }
.erase-answer:hover { color:var(--ink); }
.part-foot { display:flex; justify-content:flex-end; }

/* ── Review option states ── */
.opt.review, .opt-image.review, .tf-btn.review { cursor:default; }
.opt.review:hover, .opt-image.review:hover { border-color:var(--border); background:white; }
.opt.is-correct, .opt-image.is-correct, .tf-btn.is-correct { border-color:var(--well); background:var(--well-soft); }
.opt.is-correct .opt-radio { border-color:var(--well); }
.opt.is-correct .opt-radio::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--well); }
.opt.is-correct .opt-mark { display:inline; color:#065F46; }
.opt.not-quite, .opt-image.not-quite, .tf-btn.not-quite { border-color:var(--priority); background:var(--priority-soft); }
.opt.not-quite .opt-radio { border-color:var(--priority); }
.opt.not-quite .opt-radio::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--priority); }
.opt.not-quite .opt-mark { display:inline; color:#991B1B; }
.opt-tag { font-size:0.68rem; font-weight:700; padding:0.12rem 0.45rem; border-radius:100px; flex-shrink:0; }
.opt.is-correct .opt-tag { background:rgba(6,95,70,0.12); color:#065F46; }
.opt.not-quite .opt-tag { background:rgba(153,27,27,0.12); color:#991B1B; }

/* ── Nav buttons ── */
.exam-nav { display:flex; justify-content:space-between; gap:0.75rem; margin-top:1.5rem; flex-wrap:wrap; }
.btn-nav { display:inline-flex; align-items:center; gap:0.5rem; padding:0.7rem 1.35rem; border-radius:100px; font-weight:600; font-size:0.92rem; text-decoration:none; border:1px solid var(--border); background:white; color:var(--ink-soft); cursor:pointer; transition:all 0.15s; }
.btn-nav:hover:not(:disabled) { background:var(--surface-muted); color:var(--ink); }
.btn-nav:disabled { opacity:0.45; cursor:not-allowed; }
.btn-nav.primary { background:var(--cyan); border-color:var(--cyan); color:white; }
.btn-nav.primary:hover:not(:disabled) { background:var(--cyan-dark); color:white; }
@media (max-width:575.98px){ .exam-nav .btn-nav{ flex:1; justify-content:center; } }

/* ── Right panel (matches reference) ── */
.grid-panel { background:white; border:1px solid var(--border); border-radius:1rem; padding:1.25rem; position:sticky; top:1.5rem; }
.panel-time-row { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; font-size:0.95rem; font-weight:600; color:var(--ink); }
.panel-divider { border:none; border-top:1px dashed var(--border); margin:1rem 0; }
.panel-count { font-size:0.95rem; color:var(--ink); margin:0; }
.panel-count b { font-weight:800; }
.legend-bar { display:flex; gap:1.5rem; background:var(--surface-muted); border-radius:0.5rem; padding:0.6rem 0.9rem; font-size:0.85rem; font-weight:600; color:var(--ink-soft); }
.legend-bar .li { display:flex; align-items:center; gap:0.45rem; }
.legend-dot { width:13px; height:13px; border-radius:50%; border:1.5px solid #CBD5E1; background:#fff; }
.legend-dot.done { background:var(--cyan); border-color:var(--cyan); }
.legend-bar b { color:var(--ink); }

.q-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0.5rem; }
.q-cell { aspect-ratio:1/1; border-radius:0.5rem; border:1px solid var(--border); background:white; color:var(--ink-soft); font-weight:600; font-size:0.85rem; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:all 0.12s; }
.q-cell:hover { border-color:var(--cyan); }
.q-cell.answered { background:var(--cyan-light); border-color:var(--cyan); color:var(--cyan-dark); }
.q-cell.current { background:var(--cyan); border-color:var(--cyan); color:white; box-shadow:0 0 0 3px rgba(0,213,229,0.25); }
.q-cell.flagged::after { content:''; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--keep); }

.early-text { font-size:0.85rem; color:var(--ink-soft); text-align:center; margin:0 0 0.85rem; line-height:1.45; }
.btn-early { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.8rem 1rem; border-radius:0.75rem; font-weight:700; font-size:0.95rem; background:var(--cyan-dark); color:white; border:none; cursor:pointer; transition:all 0.15s; }
.btn-early:hover { background:#0E7490; }

/* ── Results / review ── */


.flag-reason { display:flex; align-items:center; gap:0.65rem; padding:0.75rem 0.9rem; border:1px solid var(--border); border-radius:0.75rem; cursor:pointer; margin-bottom:0.5rem; font-size:0.92rem; color:var(--ink); transition:all 0.12s; }
.flag-reason:hover { border-color:var(--cyan); background:var(--surface-soft); }
.flag-reason input { accent-color:var(--cyan); width:18px; height:18px; }

/* Intro "ready to start" popup */
.intro-icon { width:56px; height:56px; border-radius:50%; background:var(--cyan-light); color:var(--cyan-dark); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 0.85rem; }
.intro-facts { display:flex; gap:0.5rem; margin:1.25rem 0; }
.intro-fact { flex:1; display:flex; flex-direction:column; align-items:center; gap:0.2rem; background:var(--surface-soft); border:1px solid var(--border); border-radius:0.75rem; padding:0.85rem 0.4rem; }
.intro-fact i { color:var(--cyan-dark); font-size:1.1rem; margin-bottom:0.15rem; }
.intro-fact .if-val { font-weight:800; font-size:0.92rem; color:var(--ink); }
.intro-fact .if-lbl { font-size:0.72rem; color:var(--ink-muted); }
.intro-tips { list-style:none; padding:0; margin:0 0 0.5rem; text-align:left; }
.intro-tips li { display:flex; align-items:flex-start; gap:0.6rem; font-size:0.88rem; color:var(--ink-soft); padding:0.4rem 0; }
.intro-tips li i { color:var(--cyan-dark); margin-top:2px; }

/* ============================================================
   COMPREHENSIVE RESPONSIVE (tablet + mobile) — all pages
   ============================================================ */
/* Tablet: <= 992px */
@media (max-width: 992px) {
  .na-grid { grid-template-columns: 1fr 1fr; }
  .chapter-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .locked-row { grid-template-columns: 1fr; }
  .subj-grid { grid-template-columns: 1fr; }
  .page-card { padding: 1.75rem; }
  /* progress detail topic cards + subject cards stack 2-up */
  .grid-2, .grid-3 { grid-template-columns: 1fr 1fr; }
}

/* Small tablet / large phone: <= 760px */
@media (max-width: 760px) {
  .na-grid { grid-template-columns: 1fr; }
  .chapter-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* exam-papers / saved subject rows: stack the buttons under the name */
  .ep-subj, .sv-subj { flex-direction: column; align-items: stretch; }
  .ep-subj .btns, .sv-subj .btns { justify-content: stretch; }
  .ep-cat-btn, .sv-count-btn { flex: 1; }
  /* subject-detail header wraps cleanly */
  .subject-head { flex-direction: column; align-items: flex-start; }
  .subject-head .prog-row .bar { max-width: 100%; }
  /* filter bar wraps */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .unit-select { width: 100%; }
}

/* Phone: <= 600px */
@media (max-width: 600px) {
  .page-card { padding: 1.15rem; border-radius: 12px; }
  .block { padding: 1.15rem; }
  .stat-grid { grid-template-columns: 1fr; }
  .sec-head2 { flex-wrap: wrap; }
  .sec-block-title, .section-head__title { font-size: 1.2rem; }
  /* hero */
  .hero { padding: 1.25rem; }
  .hero h2 { font-size: 1.3rem; }
  .hero-chips { gap: 0.4rem; }
  /* subject rows: keep icon+name, let bar wrap under */
  .subj-prog { flex-wrap: wrap; }
  .subj-bar { max-width: 100%; min-width: 120px; }
  /* recently-done rows stack */
  .recent-row { flex-wrap: wrap; }
  .recent-when { width: auto; }
  .recent-row .pill { margin-left: 0; }
  /* study-plan timeline scrolls horizontally instead of squashing */
  .glance { overflow-x: auto; }
  .glance-track { min-width: 620px; }
  /* day card buttons full width */
  .day-btns { flex-direction: column; align-items: stretch; }
  .day-btns .btn-go, .day-btns .btn-soft { justify-content: center; }
  /* exam: question grid 4-up on phone */
  .q-grid { grid-template-columns: repeat(4, 1fr); }
  /* progress stat cards */
  .stat-card { padding: 0.9rem 1rem; }
  .stat-ic { width: 46px; height: 46px; font-size: 1.2rem; }
  /* result actions stack */
  .result-actions { flex-direction: column; }
  .result-actions .btn-nav { min-width: 0; }
}

/* Tiny phone: <= 380px */
@media (max-width: 380px) {
  .hero-chips { flex-direction: column; align-items: flex-start; }
  .q-grid { grid-template-columns: repeat(3, 1fr); }
}
.rev-empty-btn { margin-top:1rem; display:inline-flex; }
.blank-note { margin-bottom:0.5rem; }

/* progress-detail topic grid: more space between + bottom */
.topic-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; padding-bottom:1.5rem; }
@media (max-width:760px){ .topic-grid { grid-template-columns:1fr; } }

/* ============================================================
   HELP (student) — friendly, kid-appropriate
   ============================================================ */
.help-hero { text-align:center; padding:1.5rem 1rem 0.5rem; }
.help-hero .wave { font-size:2.6rem; line-height:1; margin-bottom:0.5rem; }
.help-hero h2 { font-size:1.6rem; font-weight:800; color:var(--ink); margin:0 0 0.35rem; }
.help-hero p { color:var(--ink-soft); font-size:0.98rem; max-width:440px; margin:0 auto; }

.help-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.5rem; }
.help-card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1.4rem; text-align:center; }
.help-card .hic { width:56px; height:56px; border-radius:1rem; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto 0.85rem; }
.help-card.c1 .hic { background:var(--cyan-light); color:var(--cyan-dark); }
.help-card.c2 .hic { background:var(--keep-soft); color:var(--keep-ink); }
.help-card.c3 .hic { background:var(--well-soft); color:var(--well-ink); }
.help-card h3 { font-size:1.05rem; font-weight:800; color:var(--ink); margin:0 0 0.4rem; }
.help-card p { font-size:0.88rem; color:var(--ink-soft); margin:0; line-height:1.5; }

.help-labels { display:flex; flex-direction:column; gap:0.7rem; margin-top:1rem; }
.help-label-row { display:flex; align-items:center; gap:0.9rem; padding:0.85rem 1rem; background:var(--surface-muted); border-radius:0.8rem; }
.help-label-row .pill { flex-shrink:0; }
.help-label-row span { font-size:0.92rem; color:var(--ink-soft); }

.help-steps { display:flex; flex-direction:column; gap:0.9rem; margin-top:1rem; }
.help-step { display:flex; align-items:flex-start; gap:0.9rem; }
.help-step .n { width:30px; height:30px; border-radius:50%; background:var(--cyan); color:#fff; font-weight:800; font-size:0.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.help-step .t b { color:var(--ink); display:block; margin-bottom:0.1rem; }
.help-step .t span { font-size:0.9rem; color:var(--ink-soft); }

.help-stuck { display:flex; align-items:center; gap:1rem; background:var(--cyan-light); border-radius:1rem; padding:1.25rem 1.4rem; margin-top:1rem; flex-wrap:wrap; }
.help-stuck .big-ic { width:52px; height:52px; border-radius:50%; background:#fff; color:var(--cyan-dark); font-size:1.5rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.help-stuck .txt { flex:1; min-width:180px; }
.help-stuck .txt b { color:var(--ink); display:block; }
.help-stuck .txt span { font-size:0.9rem; color:var(--ink-soft); }

.help-login-note { display:flex; gap:0.6rem; align-items:flex-start; font-size:0.85rem; color:var(--ink-muted); margin-top:1.4rem; padding:0.85rem 1rem; border:1px dashed var(--border); border-radius:0.7rem; }
.help-login-note i { color:var(--ink-light); flex-shrink:0; font-size:1rem; margin-top:0.05rem; }

@media (max-width:760px){ .help-cards { grid-template-columns:1fr; } }
.help-logout { margin-top:1.4rem; }

/* ============================================================
   USER-REQUESTED TWEAKS
   ============================================================ */
/* 1. Taller header */
.topbar { padding-top: 1.1rem; padding-bottom: 1.1rem; }

/* 4. Home: separate blocks with a line border between them (not boxed) */
.page-card.stack > section.block { border: none; border-radius: 0; padding: 1.75rem 0; background: transparent; }
.page-card.stack > section.block + section.block,
.page-card.stack > .hero + section.block { border-top: 1px solid var(--border); }
.page-card.stack > section.block:first-child { padding-top: 0; }

/* Sidebar submenu (Subjects) */
.nav-group { }
.nav-parent { display: flex; align-items: center; gap: 0.6rem; width: 100%; }
.nav-parent .caret { margin-left: auto; font-size: 0.75rem; transition: transform 0.2s; color: var(--ink-light); }
.nav-group.open .nav-parent .caret { transform: rotate(180deg); }
.nav-sub { display: none; flex-direction: column; margin: 0.15rem 0 0.3rem 0; padding-left: 2.35rem; }
.nav-group.open .nav-sub { display: flex; }
.nav-sub a { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: var(--r-sm);
  font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.nav-sub a:hover { background: var(--surface-muted); color: var(--ink); text-decoration: none; }
.nav-sub a .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nav-sub a.is-active { color: var(--cyan-dark); font-weight: 700; }
.app--dark .nav-sub a { color: rgba(255,255,255,0.75); }
.app--dark .nav-sub a:hover { background: rgba(255,255,255,0.08); color: #fff; }



/* ============================================================
   PARENT PAGES (ported from old design, token-mapped)
   ============================================================ */

/* LEFT ACCOUNT MENU (dark, different from student) */

/* HEADER (different colour from student white) */
.parent-badge { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(0,213,229,0.18); color:#67E8F9; font-size:0.72rem; font-weight:700; border-radius:100px; padding:0.3rem 0.75rem; }
.pname { font-size:0.88rem; font-weight:700; color:#fff; }
.pavatar { width:34px; height:34px; border-radius:50%; background:var(--cyan); color:#0F172A; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.9rem; }

.greet h1 { font-size:1.8rem; font-weight:800; color:var(--ink); margin:0 0 1.4rem; }
.greet p { color:var(--ink-soft); margin:0 0 1.4rem; }
.sec-title { display:flex; align-items:center; gap:0.55rem; font-size:1.1rem; font-weight:800; color:var(--ink); margin:1.8rem 0 0.9rem; }

.setup-banner { background:linear-gradient(135deg,#E8FBFD,#F4FDFF); border:1px solid #00D5E5; border-radius:0.9rem; padding:1.2rem 1.4rem; }
.setup-banner h2 { font-size:1.05rem; font-weight:800; color:var(--ink); margin:0 0 0.25rem; }
.setup-banner p { font-size:0.88rem; color:var(--ink-soft); margin:0; }

.plan-card { display:flex; align-items:center; gap:0.9rem; background:#fff; border:1px solid var(--border); border-radius:0.8rem; padding:1rem 1.1rem; margin-top:0.7rem; }
.plan-ic { width:46px; height:46px; border-radius:0.7rem; background:var(--cyan-light); color:var(--cyan-dark); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.plan-meta { flex:1; min-width:0; }
.plan-card .plan-grade { font-weight:800; color:var(--ink); font-size:1.25rem; margin-bottom:0.1rem; }
.plan-card .plan-sub { font-size:0.85rem; color:var(--ink-muted); font-weight:400; margin:0; }
.plan-add { background:var(--cyan); color:var(--ink); font-weight:700; border:none; border-radius:0.5rem; padding:0.55rem 1rem; font-size:0.88rem; cursor:pointer; white-space:nowrap; }
.plan-add:hover { background:var(--cyan-dark); color:#fff; }

.kids-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px){ .kids-grid { grid-template-columns:1fr; } }
.kid-card { background:#fff; border:1px solid var(--border); border-radius:0.9rem; padding:1.2rem; }
.kid-top { display:flex; align-items:center; gap:0.8rem; margin-bottom:1rem; }
.kid-av { width:48px; height:48px; border-radius:50%; background:#0F172A; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; flex-shrink:0; }
.kid-name { font-weight:800; color:var(--ink); font-size:1.05rem; }
.kid-grade { font-size:0.8rem; color:var(--cyan-dark); font-weight:700; }
.kid-rows { font-size:0.85rem; color:var(--ink-soft); margin-bottom:1rem; }
.kid-rows .r { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0; border-bottom:1px solid #E2E8F0; }
.kid-rows .r:last-child { border-bottom:none; }
.kid-rows b { color:var(--ink); font-weight:700; }
.grade-sel { border:1px solid var(--border); border-radius:0.4rem; padding:0.2rem 0.4rem; font-size:0.82rem; font-weight:700; color:var(--ink); }
.kid-btns { display:flex; gap:0.6rem; }
.kid-btns a { flex:1; text-align:center; border-radius:0.5rem; padding:0.55rem; font-size:0.85rem; font-weight:700; cursor:pointer; text-decoration:none; border:1px solid var(--border); }
.kb-primary { background:var(--cyan); color:var(--ink); border:none; }
.kb-primary:hover { background:var(--cyan-dark); color:#fff; }
.kb-ghost { background:#fff; color:var(--ink-soft); }
.kb-ghost:hover { border-color:var(--cyan); color:var(--ink); }
.buy-row { margin-top:1.4rem; }
.btn-buy { display:inline-flex; align-items:center; gap:0.5rem; background:#fff; border:1.5px dashed var(--cyan); color:var(--cyan-dark); font-weight:700; border-radius:0.6rem; padding:0.7rem 1.1rem; cursor:pointer; }
.btn-buy:hover { background:var(--cyan-light); }

.ov { position:fixed; inset:0; background:rgba(15,23,42,0.5); display:none; align-items:flex-start; justify-content:center; z-index:200; padding:1.5rem 1rem; overflow-y:auto; }
.ov.show { display:flex; }
.ov-box { background:#fff; border-radius:1rem; width:100%; max-width:460px; padding:1.6rem; }
.ov-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:0.3rem; }
.ov-head h3 { font-size:1.15rem; font-weight:800; margin:0; color:var(--ink); }
.ov-step-pill { display:inline-block; font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--cyan-dark); margin-bottom:0.25rem; }
.ov-x { border:none; background:var(--surface-muted); width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--ink-soft); flex-shrink:0; }
.ov-sub { font-size:0.88rem; color:var(--ink-soft); margin:0 0 1.2rem; line-height:1.5; }
.form-label { font-weight:400; color:var(--ink); font-size:0.92rem; margin-bottom:0.4rem; }
.form-control, .form-select { padding:0.65rem 0.85rem; border:1px solid #D6D6D6; }
.form-control::placeholder { color:#A6A6A6; opacity:1; }
.auto-hint { font-size:0.77rem; color:var(--ink-muted); margin-top:0.3rem; }
.choose-opt { width:100%; display:flex; align-items:center; gap:0.8rem; border:1px solid var(--border); border-radius:0.7rem; padding:0.85rem 1rem; margin-bottom:0.6rem; background:#fff; cursor:pointer; text-align:left; }
.choose-opt:hover { border-color:var(--cyan); background:var(--cyan-light); }
.choose-opt .ca { width:38px; height:38px; border-radius:50%; background:#0F172A; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.choose-opt.new .ca { background:var(--cyan-light); color:var(--cyan-dark); }
.choose-opt .cn { font-weight:800; color:var(--ink); font-size:0.92rem; }
.choose-opt .cs { font-size:0.8rem; color:var(--ink-muted); }
.ch-lead { font-weight:700; color:var(--ink); font-size:0.92rem; margin:0 0 0.2rem; }
.ch-sub { font-size:0.8rem; color:var(--ink-muted); margin:0 0 0.8rem; }
.sj { border:1px solid var(--border); border-radius:0.55rem; margin-bottom:0.55rem; overflow:hidden; }
.sj-head { width:100%; display:flex; align-items:center; gap:0.6rem; background:#fff; border:none; padding:0.65rem 0.85rem; cursor:pointer; text-align:left; }
.sj-head .subject-chip { width:30px; height:30px; font-size:0.85rem; border-radius:0.5rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.sj-name { flex:1; font-weight:700; color:var(--ink); font-size:0.88rem; }
.sj-count { font-size:0.73rem; color:var(--ink-muted); font-weight:600; }
.sj-chev { color:var(--ink-muted); transition:transform 0.2s; }
.sj.open .sj-chev { transform:rotate(180deg); }
.sj-body { display:none; max-height:240px; overflow-y:auto; padding:0.3rem 0.85rem 0.6rem; border-top:1px solid var(--border); }
.sj.open .sj-body { display:block; }
.ch-part { font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--cyan-dark); margin:0.6rem 0 0.2rem; position:sticky; top:0; background:#fff; }
.chk { display:flex; align-items:flex-start; gap:0.5rem; padding:0.32rem 0; font-size:0.86rem; color:var(--ink-soft); cursor:pointer; }
.chk input { width:16px; height:16px; margin-top:2px; flex-shrink:0; }
.ov-save { background:var(--cyan); color:var(--ink); font-weight:700; border:none; border-radius:0.6rem; padding:0.75rem; width:100%; margin-top:1.3rem; cursor:pointer; }
.ov-save:hover { background:var(--cyan-dark); color:#fff; }
.ov-nav { display:flex; gap:0.7rem; margin-top:1.3rem; }
.ov-back { background:#fff; border:1px solid var(--border); color:var(--ink-soft); font-weight:700; border-radius:0.6rem; padding:0.75rem 1.1rem; cursor:pointer; }
.ov-back:hover { border-color:var(--cyan); color:var(--ink); }
.grade-btn { width:100%; display:flex; align-items:center; gap:0.8rem; border:1px solid var(--border); border-radius:0.7rem; padding:0.85rem 1rem; margin-bottom:0.6rem; background:#fff; cursor:pointer; text-align:left; font-weight:700; color:var(--ink); }
.grade-btn:hover { border-color:var(--cyan); background:var(--cyan-light); }

@media (max-width:860px){
}
.parent-badge { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(0,213,229,0.18); color:#67E8F9; font-size:0.72rem; font-weight:700; border-radius:100px; padding:0.3rem 0.75rem; }
.pname { font-size:0.88rem; font-weight:700; color:#fff; }
.pavatar { width:34px; height:34px; border-radius:50%; background:var(--cyan); color:#0F172A; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.9rem; }

.ptitle { font-size:1.5rem; font-weight:800; color:var(--ink); margin:0 0 0.3rem; }
.psub { color:var(--ink-soft); margin:0 0 1.6rem; }

.kid-card { background:#fff; border:1px solid var(--border); border-radius:0.9rem; padding:1.4rem; margin-bottom:1.1rem; }
.kid-top { display:flex; align-items:center; gap:0.9rem; margin-bottom:1.1rem; }
.kid-av { width:52px; height:52px; border-radius:50%; background:#0F172A; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem; flex-shrink:0; }
.kid-name { font-weight:800; color:var(--ink); font-size:1.15rem; }
.kid-grade { font-size:0.82rem; color:var(--cyan-dark); font-weight:700; }
.kid-card .subj { display:flex; align-items:center; gap:0.8rem; padding:0.6rem 0; }
.kid-card .subj .subject-chip { width:30px; height:30px; font-size:0.85rem; border-radius:0.5rem; flex-shrink:0; }
.kid-card .subj-name { font-weight:700; color:var(--ink); font-size:0.88rem; min-width:92px; margin:0; }
.kid-card .subj-bar { flex:1; height:7px; background:#E5EAF0; border-radius:100px; overflow:hidden; max-width:none; }
.kid-card .subj-bar > div { height:100%; border-radius:100px; }
.kid-card .subj-pct { font-weight:800; font-size:0.82rem; min-width:38px; text-align:right; }
.kid-actions { display:flex; gap:0.6rem; margin-top:1.1rem; }
.ka { flex:1; text-align:center; border-radius:0.6rem; padding:0.65rem; font-size:0.88rem; font-weight:700; text-decoration:none; cursor:pointer; }
.ka-primary { background:var(--cyan); color:var(--ink); }
.ka-primary:hover { background:var(--cyan-dark); color:#fff; }
.ka-connect { background:#0F172A; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; }
.ka-connect:hover { background:#1E293B; color:#fff; }
.connect-note { font-size:0.78rem; color:var(--ink-muted); margin-top:0.7rem; display:flex; align-items:center; gap:0.4rem; }
.subj-bar.clickable { cursor:pointer; transition:transform 0.12s ease; }
.subj-bar.clickable:hover { transform:scaleY(1.4); }
.trend-mini { background:none; border:none; padding:0; margin:0; color:var(--cyan-dark); cursor:pointer; font-size:1rem; line-height:1; flex-shrink:0; }
.subj-hint { font-size:0.76rem; color:var(--ink-muted); display:flex; align-items:center; gap:0.4rem; margin:0.2rem 0 0.6rem; }
.cm-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.45); display:none; align-items:center; justify-content:center; z-index:1080; padding:1rem; }
.cm-overlay.show { display:flex; }
.cm-box { background:#fff; border-radius:16px; padding:1.5rem; width:100%; max-width:540px; box-shadow:0 20px 50px rgba(0,0,0,0.22); }
.cm-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:0.5rem; }
.cm-head h3 { font-size:1.05rem; font-weight:800; margin:0; color:var(--ink); }
.cm-x { border:none; background:var(--surface-muted); width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--ink-soft); flex-shrink:0; }
.cm-x:hover { background:var(--border); color:var(--ink); }
.cm-note { font-size:0.82rem; color:var(--ink-muted); margin:0.6rem 0 0; line-height:1.5; }
.parent-badge { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(0,213,229,0.18); color:#67E8F9; font-size:0.72rem; font-weight:700; border-radius:100px; padding:0.3rem 0.75rem; }
.pname { font-size:0.88rem; font-weight:700; color:#fff; }
.pavatar { width:34px; height:34px; border-radius:50%; background:var(--cyan); color:#0F172A; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.9rem; }

.ptitle { font-size:1.5rem; font-weight:800; color:var(--ink); margin:0 0 1.2rem; }
.subtabs { display:inline-flex; background:#E4E9EF; border-radius:0.7rem; padding:3px; margin-bottom:1.4rem; }
.subtabs button { border:none; background:none; padding:0.55rem 1.2rem; border-radius:0.55rem; font-weight:700; font-size:0.9rem; color:var(--ink-soft); cursor:pointer; }
.subtabs button.on { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(15,23,42,0.08); }
.panel { background:#fff; border:1px solid var(--border); border-radius:0.9rem; padding:1.75rem; margin-bottom:1.4rem; }
.panel h3 { font-size:1.15rem; font-weight:800; color:var(--ink); margin:0 0 1rem; }
.form-label { font-weight:600; color:var(--ink); font-size:0.9rem; margin-bottom:0.4rem; }
.form-control { padding:0.62rem 0.85rem; }
.ro { background:var(--surface-muted); color:var(--ink-soft); }
.hint { font-size:0.78rem; color:var(--ink-muted); margin-top:0.35rem; }
.save { background:var(--cyan); color:var(--ink); font-weight:700; border:none; border-radius:0.6rem; padding:0.7rem 1.3rem; cursor:pointer; margin-top:0.5rem; }
.save:hover { background:var(--cyan-dark); color:#fff; }
.kid-block { background:#fff; border:1px solid var(--border); border-radius:0.9rem; padding:1.3rem 1.4rem; margin-bottom:1.1rem; }
.kid-h { display:flex; align-items:center; gap:0.7rem; margin-bottom:1rem; }
.kid-av { width:42px; height:42px; border-radius:50%; background:#0F172A; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.kid-n { font-weight:800; color:var(--cyan-dark); font-size:1.05rem; }
.kid-u { font-size:0.8rem; color:var(--ink-muted); }
.mrow { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.7rem 0; border-bottom:1px dotted #A4A8AD; }
.ml { font-size:0.9rem; color:var(--ink-soft); } .ml b { color:var(--ink); display:block; }
.ml b.b-active { color:#10B981; }
.mbtn { background:#fff; border:1px solid var(--border); color:var(--ink-soft); font-weight:700; border-radius:0.5rem; padding:0.45rem 0.9rem; font-size:0.83rem; cursor:pointer; white-space:nowrap; }
.mbtn:hover { border-color:var(--cyan); color:var(--ink); }
.locked-chip { font-size:0.75rem; font-weight:700; color:#64748B; background:#E2E8F0; border-radius:100px; padding:0.28rem 0.75rem; display:inline-flex; align-items:center; gap:0.35rem; white-space:nowrap; }
.plan-row { border-bottom:1px dotted #A4A8AD; padding:0.45rem 0; }
.plan-row:last-child { border-bottom:none; }
.mrow.nb { border-bottom:none; padding:0.55rem 0 0.25rem; }
.note-line { font-size:0.78rem; color:var(--ink-muted); display:flex; align-items:flex-start; gap:0.4rem; padding:0 0 0.55rem; }
.note-line a { color:var(--cyan-dark); font-weight:700; text-decoration:none; }
.note-line a:hover { text-decoration:underline; }
.form-check.form-switch { padding-left:2.6em; min-height:1.5rem; }
.form-switch .form-check-input { width:2.1em; height:1.15em; cursor:pointer; }
.form-check-input:checked { background-color:var(--cyan); border-color:var(--cyan); }
.form-check-input:focus { box-shadow:0 0 0 0.2rem rgba(0,213,229,0.25); border-color:var(--cyan); }

.ov { position:fixed; inset:0; background:rgba(15,23,42,0.5); display:none; align-items:flex-start; justify-content:center; z-index:200; padding:1.5rem 1rem; overflow-y:auto; }
.ov.show { display:flex; }
.ov-box { background:#fff; border-radius:1rem; width:100%; max-width:460px; padding:1.6rem; }
.ov-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:0.3rem; }
.ov-head h3 { font-size:1.15rem; font-weight:800; margin:0; color:var(--ink); }
.ov-x { border:none; background:var(--surface-muted); width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--ink-soft); flex-shrink:0; }
.ov-sub { font-size:0.88rem; color:var(--ink-soft); margin:0 0 1.2rem; line-height:1.5; }
.choose-opt { width:100%; display:flex; align-items:center; gap:0.8rem; border:1px solid #A4A8AD; border-radius:0.7rem; padding:0.85rem 1rem; margin-bottom:0.6rem; background:#fff; cursor:pointer; text-align:left; }
.choose-opt:hover { border-color:var(--cyan); background:var(--cyan-light); }
.choose-opt .ca { width:38px; height:38px; border-radius:50%; background:#0F172A; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.choose-opt .cn { font-weight:800; color:var(--ink); font-size:0.92rem; }
.choose-opt .cs { font-size:0.8rem; color:var(--ink-muted); }
.hide { display:none; }
.parent-badge { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(0,213,229,0.18); color:#67E8F9; font-size:0.72rem; font-weight:700; border-radius:100px; padding:0.3rem 0.75rem; }
.pname { font-size:0.88rem; font-weight:700; color:#fff; }
.pavatar { width:34px; height:34px; border-radius:50%; background:var(--cyan); color:#0F172A; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.9rem; }

.ptitle { font-size:1.5rem; font-weight:800; color:var(--ink); margin:0 0 0.3rem; }
.psub { color:var(--ink-soft); margin:0 0 1.6rem; }
.sec-title { display:flex; align-items:center; gap:0.55rem; font-size:1.2rem; font-weight:800; color:var(--ink); margin:1.8rem 0 1rem; }
.promo { display:flex; align-items:center; gap:0.7rem; background:#ECFDF5; border:1px solid #6EE7B7; color:#047857; border-radius:0.7rem; padding:0.8rem 1.1rem; font-weight:700; font-size:0.9rem; margin-bottom:1rem; }
.promo i { font-size:1.1rem; }
.buy-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:720px){ .buy-grid { grid-template-columns:1fr; } }
.buy-card { background:#fff; border:1px solid var(--border); border-radius:0.9rem; padding:1.3rem; display:flex; flex-direction:column; }
.buy-ic { width:44px; height:44px; border-radius:0.6rem; background:var(--cyan-light); color:var(--cyan-dark); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:0.8rem; }
.buy-grade { font-weight:800; color:var(--ink); font-size:1.1rem; }
.buy-acc { font-size:0.82rem; color:var(--ink-muted); margin-bottom:0.9rem; }
.price-was { font-size:0.85rem; color:var(--ink-muted); text-decoration:line-through; }
.price-off { font-size:0.72rem; font-weight:800; color:#047857; background:#D1FAE5; border-radius:100px; padding:0.1rem 0.5rem; margin-left:0.4rem; }
.price-now { font-size:1.5rem; font-weight:800; color:var(--ink); margin:0.1rem 0 1rem; }
.buy-btn { margin-top:auto; background:var(--cyan); color:var(--ink); font-weight:700; border:none; border-radius:0.6rem; padding:0.7rem; cursor:pointer; }
.buy-btn:hover { background:var(--cyan-dark); color:#fff; }
#planList.panel { padding:0.4rem 1.5rem; }
.row-line { display:flex; align-items:center; gap:0.8rem; padding:0.95rem 0; border-bottom:1px solid #E2E8F0; }
.row-line:last-child { border-bottom:none; }
.rl-main { flex:1; min-width:0; }
.rl-t { font-weight:700; color:var(--ink); font-size:0.92rem; }
.rl-s { font-size:0.8rem; color:var(--ink-muted); }
.rl-amt { font-weight:800; color:var(--ink); font-size:0.92rem; white-space:nowrap; }
.badge-active { font-size:0.72rem; font-weight:700; color:#047857; background:#D1FAE5; border-radius:100px; padding:0.2rem 0.6rem; white-space:nowrap; }
.badge-expired { font-size:0.72rem; font-weight:700; color:#64748B; background:#E2E8F0; border-radius:100px; padding:0.2rem 0.6rem; white-space:nowrap; }
.badge-unassigned { font-size:0.72rem; font-weight:700; color:var(--cyan-dark); background:var(--cyan-light); border-radius:100px; padding:0.2rem 0.6rem; white-space:nowrap; }
.rl-link { color:var(--cyan-dark); font-weight:700; font-size:0.83rem; text-decoration:none; white-space:nowrap; }
.rl-link:hover { text-decoration:underline; }
.toast { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); background:#0F172A; color:#fff; padding:0.7rem 1.1rem; border-radius:0.6rem; font-weight:600; font-size:0.88rem; z-index:300; display:none; }
.toast.show { display:block; }
.auth__badge { text-align:center; margin-top:0.5rem; }

/* parent children: subject row responsive */
@media (max-width: 640px) {
  .kid-card .subj { flex-wrap: wrap; gap: 0.5rem; }
  .kid-card .subj .subj-name { flex: 1 1 auto; min-width: 0; }
  .kid-card .subj-bar { flex: 1 1 100%; max-width: 100%; order: 5; }
  .kid-card .subj-pct { order: 4; }
  .kid-card .trend-mini { order: 3; }
}

/* Base subject-chip: always center the icon */
.subject-chip { display:inline-flex; align-items:center; justify-content:center; }
.subject-chip i { line-height:1; }

/* ============================================================
   PAPER REVIEW (redesigned: compact bar, banners, collapsible)
   ============================================================ */
.result-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:white; border:1px solid var(--border); border-radius:0.9rem; padding:1rem 1.25rem; margin-bottom:1.25rem; }
.result-bar .rb-left { display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.result-bar .rb-eyebrow { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-muted); }
.result-bar .rb-score { font-size:1.5rem; font-weight:800; color:var(--ink); line-height:1; }
.result-bar .rb-score small { font-size:0.9rem; color:var(--ink-muted); font-weight:700; }
.result-bar .rb-stats { display:flex; gap:1.1rem; flex-wrap:wrap; }
.rb-stat { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.82rem; font-weight:700; }
.rb-stat .d { width:9px; height:9px; border-radius:50%; }
.rb-stat.correct { color:#047857; } .rb-stat.correct .d { background:#10B981; }
.rb-stat.incorrect { color:#B91C1C; } .rb-stat.incorrect .d { background:#EF4444; }
.rb-stat.blank { color:var(--ink-muted); } .rb-stat.blank .d { background:#CBD5E1; }
.rb-stat.rushed { color:#B45309; } .rb-stat.rushed .d { background:#F59E0B; }
.btn-savepaper { display:inline-flex; align-items:center; gap:0.4rem; background:var(--cyan); color:#fff; border:none;
  border-radius:0.5rem; padding:0.55rem 1rem; font-weight:700; font-size:0.85rem; cursor:pointer; white-space:nowrap; }
.btn-savepaper:hover { background:var(--cyan-dark); }
.btn-savepaper.saved { background:var(--well-soft); color:var(--well-ink); }

.review-toolbar { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.review-toolbar h2 { font-size:1.25rem; font-weight:800; margin:0; }
.filter-chips { display:flex; gap:0.4rem; flex-wrap:wrap; }
.filter-chip { font-size:0.82rem; font-weight:600; padding:0.4rem 0.9rem; border-radius:100px; border:1px solid var(--border); background:white; color:var(--ink-soft); cursor:pointer; transition:all 0.12s; }
.filter-chip:hover { border-color:var(--cyan); }
.filter-chip.active { background:var(--ink); color:white; border-color:var(--ink); }

.review-item { background:white; border:1px solid var(--border); border-radius:1rem; margin-bottom:1.5rem; overflow:hidden; }
.review-item.is-correct { border-color:#6EE7B7; }
.review-item.is-incorrect { border-color:#FCA5A5; }
.review-item.is-blank { border-color:var(--border); }
.review-item.is-rushed { border-color:#FCD34D; }
.rev-banner { display:flex; align-items:center; gap:0.5rem; padding:0.7rem 1.4rem; font-size:0.9rem; font-weight:700; color:#fff; }
.review-item.is-correct .rev-banner { background:#10B981; }
.review-item.is-incorrect .rev-banner { background:#EF4444; }
.review-item.is-blank .rev-banner { background:#94A3B8; }
.review-item.is-rushed .rev-banner { background:#F59E0B; }
.rev-body { padding:1.75rem; }
.rev-qnum { font-size:1.05rem; font-weight:800; color:var(--ink); margin-bottom:0.6rem; }
.rev-qhead { font-size:1.25rem; font-weight:800; color:var(--ink); line-height:1.35; margin:0 0 1.5rem; }
.rev-part { margin-bottom:1.75rem; }
.rev-part:last-of-type { margin-bottom:0; }
.part-q { font-weight:700; color:var(--ink); font-size:1.1rem; margin:0 0 0.9rem; }
.part-q .part-label { color:var(--cyan-dark); font-size:1.15rem; font-weight:800; margin-right:0.4rem; }
.blank-note { display:flex; align-items:center; gap:0.4rem; font-size:0.85rem; color:var(--ink-muted); margin-bottom:0.9rem; }
.options { display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; }
.opt { display:flex; align-items:center; gap:0.7rem; border:1px solid var(--border); border-radius:0.7rem; padding:0.9rem 1.1rem; font-size:0.95rem; }
.opt.review { cursor:default; }
.opt.is-correct { border-color:#6EE7B7; background:#F0FDF9; }
.opt.not-quite { border-color:#FCA5A5; background:#FEF2F2; }
.opt-radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; }
.opt.is-correct .opt-radio { border-color:#10B981; background:radial-gradient(circle,#10B981 42%,transparent 46%); }
.opt.not-quite .opt-radio { border-color:#EF4444; background:radial-gradient(circle,#EF4444 42%,transparent 46%); }
.opt-letter { font-weight:800; color:var(--cyan-dark); flex-shrink:0; }
.opt-text { flex:1; color:var(--ink); }
.opt-mark { margin-left:auto; font-size:1.05rem; flex-shrink:0; }
.opt.is-correct .opt-mark { color:#059669; }
.opt.not-quite .opt-mark { color:#DC2626; }
.rev-explain-wrap { margin-top:1.25rem; border:1px solid var(--border); border-radius:0.75rem; overflow:hidden; }
.rev-explain-toggle { width:100%; display:flex; align-items:center; gap:0.5rem; background:var(--surface-soft); border:none;
  padding:0.8rem 1.1rem; cursor:pointer; font-weight:700; font-size:0.9rem; color:var(--ink); text-align:left; }
.rev-explain-toggle .chev { margin-left:auto; transition:transform 0.2s; color:var(--ink-muted); }
.rev-explain-wrap.open .rev-explain-toggle .chev { transform:rotate(180deg); }
.rev-explain-body { display:none; padding:1rem 1.1rem; font-size:0.92rem; color:var(--ink-soft); line-height:1.55; border-top:1px solid var(--border); }
.rev-explain-wrap.open .rev-explain-body { display:block; }
.rev-explain-body .explain-label { font-weight:700; color:var(--ink); }
.rev-foot { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; margin-top:1.25rem; padding-top:1.1rem; border-top:1px dashed var(--border); }
.rev-save { display:inline-flex; align-items:center; gap:0.4rem; background:var(--surface-muted); color:var(--ink-soft); border:1px solid var(--border); border-radius:0.5rem; padding:0.5rem 0.9rem; font-weight:700; font-size:0.83rem; cursor:pointer; }
.rev-save:hover { border-color:var(--cyan); color:var(--ink); }
.rev-save.saved { background:var(--well-soft); color:var(--well-ink); border-color:#6EE7B7; }
.rev-report { display:inline-flex; align-items:center; gap:0.4rem; background:none; border:none; color:var(--ink-muted); font-weight:600; font-size:0.83rem; cursor:pointer; }
.rev-report:hover { color:#B91C1C; }
.result-actions { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1.5rem; }
.result-actions .btn-nav { flex:1; justify-content:center; min-width:180px; }
@media (max-width:600px){ .options { grid-template-columns:1fr; } .rev-body { padding:1.25rem; } }

/* ============================================================
   STUDY PLAN — subject-session model (open pacing)
   ============================================================ */
.exam-pace { display:flex; align-items:center; gap:1rem; background:var(--cyan-light); border:1px solid var(--cyan); border-radius:0.9rem; padding:1.1rem 1.25rem; margin-bottom:1.6rem; }
.exam-pace .ep-icon { width:44px; height:44px; border-radius:50%; background:#fff; color:var(--cyan-dark); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.exam-pace .ep-body { flex:1; min-width:0; }
.exam-pace .ep-title { font-weight:800; color:var(--ink); font-size:1.05rem; }
.exam-pace .ep-sub { font-size:0.85rem; color:var(--ink-soft); margin:0.1rem 0 0.5rem; }
.exam-pace .ep-bar { height:7px; background:#fff; border-radius:100px; overflow:hidden; }
.exam-pace .ep-bar > div { height:100%; background:var(--cyan); border-radius:100px; }

.day-note { color:var(--ink-soft); font-size:0.92rem; margin:0.15rem 0 0.9rem; }
.teaser--open { display:flex; flex-direction:column; gap:0.9rem; }
.teaser--open .to-top { display:flex; align-items:center; gap:0.75rem; }
.teaser--open .subject-icon { width:42px; height:42px; font-size:1.1rem; border-radius:0.7rem; flex-shrink:0; }
.teaser--open .t-subj { font-size:0.78rem; font-weight:700; color:var(--ink-muted); }
.teaser--open .t-title { font-weight:800; color:var(--ink); font-size:1.05rem; }
.btn-go--ghost { background:#fff; color:var(--cyan-dark); border:1.5px solid var(--cyan); }
.btn-go--ghost:hover { background:var(--cyan-light); color:var(--cyan-dark); }

/* Completed session — thin detailed block */
.done-slim { background:#fff; border:1px solid #6EE7B7; border-radius:0.8rem; padding:1rem 1.25rem; margin-bottom:0.9rem; }
.done-slim .ds-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.6rem; }
.done-slim .ds-tag { display:inline-flex; align-items:center; gap:0.4rem; font-weight:700; font-size:0.95rem; color:var(--ink); }
.done-slim .ds-tag i { color:#10B981; }
.done-slim .ds-score { font-weight:800; font-size:1.05rem; color:#047857; }
.done-slim .ds-stats { display:flex; gap:1.1rem; flex-wrap:wrap; margin-bottom:0.85rem; }
.ds-stat { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.85rem; font-weight:600; color:var(--ink-soft); }
.ds-stat .d { width:9px; height:9px; border-radius:50%; }
.ds-stat.correct .d { background:#10B981; }
.ds-stat.incorrect .d { background:#EF4444; }
.ds-stat.blank .d { background:#CBD5E1; }
.done-slim .ds-btns { display:flex; gap:0.6rem; flex-wrap:wrap; }
.done-slim .btn-soft { font-size:0.83rem; padding:0.5rem 0.9rem; }

/* top spacing on study plan */
#planHeader { padding-top:0.5rem; }
.page-card.stack #planBody { margin-top:0.5rem; }

/* Study plan — batch/sequential-lock model */
.batch-head { margin-bottom:1rem; }
.batch-title { font-weight:800; font-size:1.05rem; color:var(--ink); }

/* completed collapsible */
.done-slim .ds-head { cursor:pointer; }
.done-slim .ds-right { display:inline-flex; align-items:center; gap:0.6rem; }
.done-slim .ds-chev { color:var(--ink-muted); transition:transform 0.2s; }
.done-slim.open .ds-chev { transform:rotate(180deg); }
.done-slim .ds-body { display:none; margin-top:0.85rem; }
.done-slim.open .ds-body { display:block; }

/* locked session card */
.teaser--open.is-locked { opacity:0.85; background:var(--surface-muted); border-style:solid; }
.teaser--open .lock-pill { margin-left:auto; width:30px; height:30px; border-radius:50%; background:#E2E8F0; color:#64748B; display:flex; align-items:center; justify-content:center; font-size:0.8rem; flex-shrink:0; }

/* chapters popup list */
.chap-list { list-style:none; padding:0; margin:0; }
.chap-list li { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0; font-size:0.95rem; color:var(--ink); border-bottom:1px solid var(--surface-muted); }
.chap-list li:last-child { border-bottom:none; }

/* timeline: comfortable node width + horizontal scroll when tight */
.glance { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.glance-track { min-width: 640px; }
.gnode { min-width: 84px; }

/* Exam mode: hide mid-paper help (flag/report) */
body.exam-mode #flagBtn { display: none; }

/* ============================================================
   STUDY PLAN v2 — mission-first, glassy, kid-friendly
   ============================================================ */
/* THE GLASS PANEL IS GONE.

   `.sp2` used to be a frosted sheet — gradient, 28px backdrop blur, border and
   a 70px shadow — that the whole plan sat on. It was not `.page-card`, which
   is why taking `page-card` off the markup changed nothing.

   Each of the three blocks now carries its own background, so the sheet was a
   second frame around them and a large shadow under a page that has none
   anywhere else.

   The blur mattered for a second reason: `backdrop-filter` makes an element
   the containing block for its positioned descendants, which is the sort of
   thing that quietly breaks a fixed overlay later. */
.sp2 {
  background: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* inner glass blocks sit as brighter frosted layers on the translucent panel */
.sp2 .glass-card { background:linear-gradient(150deg, rgba(255,255,255,0.68), rgba(255,255,255,0.38)); }

/* MISSION HERO */
.mission { position:relative; overflow:hidden; border-radius:1.5rem; padding:2rem 1.6rem; margin-bottom:1.6rem;
  display:flex; gap:1.4rem; align-items:flex-start;
  background:linear-gradient(140deg, rgba(236,254,255,0.75) 0%, rgba(240,249,255,0.7) 55%, rgba(238,249,241,0.75) 100%);
  border:1px solid rgba(255,255,255,0.7); box-shadow:0 12px 34px rgba(8,145,178,0.10); }
.mission__body { flex:1; min-width:0; position:relative; }
.mission__sub { position:relative; color:var(--ink-soft); font-size:0.95rem; margin:0 0 1.1rem; }
.mission__action { position:relative; flex:0 0 300px; background:rgba(255,255,255,0.78); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.9); border-radius:1.2rem; padding:1.2rem; box-shadow:0 10px 26px rgba(15,23,42,0.10);
  display:flex; flex-direction:column; gap:0.7rem; }
.mission__action .ma-top { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.3rem; }
.mission__action .ma-top .subject-icon { width:44px; height:44px; border-radius:0.8rem; font-size:1.2rem; flex-shrink:0; }
.mission__action .ma-top b { display:block; font-size:1.05rem; font-weight:800; color:var(--ink); }
.mission__action .ma-top span { font-size:0.85rem; color:var(--ink-muted); font-weight:600; }
.mission__action .glass-btn { width:100%; }
.mission__glow { position:absolute; top:-60px; right:-40px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,213,229,0.28), transparent 70%); pointer-events:none; }
.mission--english .mission__glow { background:radial-gradient(circle, rgba(139,92,246,0.22), transparent 70%); }
.mission--science .mission__glow { background:radial-gradient(circle, rgba(16,185,129,0.22), transparent 70%); }
.mission--french  .mission__glow { background:radial-gradient(circle, rgba(236,72,153,0.20), transparent 70%); }
.mission__tag { position:relative; display:inline-flex; align-items:center; gap:0.35rem; background:var(--amber, #F59E0B); color:#fff;
  font-weight:800; font-size:0.85rem; padding:0.35rem 0.9rem; border-radius:100px; box-shadow:0 4px 12px rgba(245,158,11,0.35); }
.mission__title { position:relative; font-size:2.4rem; font-weight:800; line-height:1.05; color:var(--ink); margin:0.9rem 0 0.6rem; letter-spacing:-0.01em; }
.mission__title .hl { color:var(--cyan-dark); }
.mission--english .mission__title .hl { color:#7C3AED; }
.mission--science .mission__title .hl { color:#059669; }
.mission--french  .mission__title .hl { color:#DB2777; }
.mission__chips { position:relative; display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.mchip { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(255,255,255,0.7); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.9); border-radius:100px; padding:0.4rem 0.9rem; font-size:0.9rem; font-weight:700; color:var(--ink-soft); }
.mission__btns { position:relative; display:flex; gap:0.7rem; flex-wrap:wrap; }

/* GLASS BUTTONS */
.glass-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; border-radius:1rem;
  padding:0.95rem 1.5rem; font-weight:800; font-size:1.05rem; text-decoration:none; cursor:pointer; border:none; transition:transform 0.12s, box-shadow 0.15s; }
.glass-btn:active { transform:translateY(1px) scale(0.99); }
.glass-btn--go { background:linear-gradient(135deg, #00D5E5, #0891B2); color:#fff;
  box-shadow:0 10px 24px rgba(8,145,178,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
.glass-btn--go:hover { box-shadow:0 14px 30px rgba(8,145,178,0.45), inset 0 1px 0 rgba(255,255,255,0.5); color:#fff; text-decoration:none; }
.glass-btn--ghost { background:rgba(255,255,255,0.55); backdrop-filter:blur(8px); color:var(--ink); border:1px solid rgba(255,255,255,0.9);
  box-shadow:0 4px 14px rgba(15,23,42,0.06); }
.glass-btn--ghost:hover { background:rgba(255,255,255,0.8); color:var(--ink); text-decoration:none; }
.glass-btn--soft { background:rgba(255,255,255,0.7); backdrop-filter:blur(6px); color:var(--cyan-dark); border:1px solid var(--border);
  font-size:0.92rem; padding:0.65rem 1.1rem; border-radius:0.8rem; }
.glass-btn--soft:hover { background:#fff; color:var(--cyan-dark); text-decoration:none; }

/* DONE -> NOW -> NEXT path */
.path { background:var(--surface); border:1px solid var(--border); border-radius:1.2rem; padding:1.2rem 1.1rem; margin-bottom:1.4rem; }
.path__bar { height:9px; background:var(--surface-muted); border-radius:100px; overflow:hidden; margin-bottom:1.1rem; }
.path__fill { height:100%; border-radius:100px; background:linear-gradient(90deg, #10B981, #F59E0B); }
.path__steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; }
.pstep { display:flex; align-items:center; gap:0.55rem; }
.pstep .pdot { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.9rem; flex-shrink:0; }
.pstep--done .pdot { background:#10B981; }
.pstep--now .pdot { background:var(--amber, #F59E0B); box-shadow:0 0 0 4px rgba(245,158,11,0.18); }
.pstep--next .pdot { background:#CBD5E1; }
.pstep b { display:block; font-size:0.95rem; color:var(--ink); }
.pstep span { font-size:0.8rem; color:var(--ink-muted); font-weight:600; }

/* After-this glassy tiles */
.after-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; margin-bottom:1.4rem; }
.after-tile { background:rgba(255,255,255,0.65); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:1.1rem; padding:1.2rem; }
.after-tile .at-ic { display:inline-flex; width:38px; height:38px; border-radius:0.7rem; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:0.7rem; }
.at-ic--ok { background:var(--well-soft, #DCFCE7); color:#059669; }
.at-ic--next { background:var(--cyan-light); color:var(--cyan-dark); }
.after-tile b { display:block; font-size:1.02rem; color:var(--ink); margin-bottom:0.3rem; }
.after-tile p { font-size:0.9rem; color:var(--ink-soft); margin:0 0 0.9rem; line-height:1.45; }
.after-tile p:last-child { margin-bottom:0; }

/* Full plan collapsible */
.all-sessions { background:var(--surface); border:1px solid var(--border); border-radius:1.1rem; overflow:hidden; }
.all-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:0.5rem; background:none; border:none;
  padding:1.05rem 1.25rem; cursor:pointer; font-weight:800; font-size:1rem; color:var(--ink); }
.all-toggle .all-chev { color:var(--ink-muted); transition:transform 0.2s; }
.all-sessions.open .all-toggle .all-chev { transform:rotate(180deg); }
.all-body { display:none; padding:0 1rem 0.8rem; }
.all-sessions.open .all-body { display:block; }
.allrow { display:flex; align-items:center; gap:0.8rem; padding:0.8rem 0.4rem; border-top:1px solid var(--surface-muted); }
.allrow .ar-ic { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.85rem; flex-shrink:0; }
.allrow--done .ar-ic { background:#10B981; }
.allrow--active .ar-ic { background:var(--amber, #F59E0B); }
.allrow--locked .ar-ic { background:#CBD5E1; }
.allrow .ar-mid { flex:1; min-width:0; }
.allrow .ar-mid b { display:block; font-size:0.95rem; color:var(--ink); }
.allrow .ar-mid span { font-size:0.82rem; color:var(--ink-muted); }
.allrow .ar-state { font-size:0.78rem; font-weight:800; color:var(--ink-muted); text-transform:uppercase; letter-spacing:0.03em; }
.allrow--active .ar-state { color:var(--amber, #F59E0B); }

@media (max-width:600px){
  .mission { padding:1.5rem 1.2rem; border-radius:1.2rem; }
  .mission__title { font-size:1.9rem; }
  .mission__btns { flex-direction:column; }
  .glass-btn { width:100%; }
  .path__steps { grid-template-columns:1fr; gap:0.75rem; }
  .after-grid { grid-template-columns:1fr; }
}

/* ============================================================
   STUDY PLAN — liquid glass blocks
   ============================================================ */
/* shared liquid-glass surface */
.glass-card {
  position:relative;
  background:linear-gradient(150deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45));
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:1.2rem;
  box-shadow:0 8px 30px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
  margin-bottom:0.85rem;
}

.plan-sub { display:flex; align-items:center; gap:0.5rem; font-size:1rem; font-weight:800; color:var(--ink-soft); margin:1.5rem 0 0.8rem; }
.plan-sub i { color:var(--cyan-dark); }

/* progress strip */
.plan-progress { padding:1.15rem 1.25rem; margin-bottom:1.4rem; }
.plan-progress .pp-top { display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; margin-bottom:0.75rem; }
.plan-progress .pp-top b { font-size:1.05rem; font-weight:800; color:var(--ink); }
.plan-progress .pp-top span { font-size:0.85rem; color:var(--ink-muted); font-weight:600; }
.pp-bar { height:10px; background:rgba(148,163,184,0.25); border-radius:100px; overflow:hidden; }
.pp-fill { height:100%; border-radius:100px; background:linear-gradient(90deg, #10B981, #F59E0B); box-shadow:0 1px 4px rgba(245,158,11,0.4); }

/* session rows (coming up + completed head share) */
.sess-row { display:flex; align-items:center; gap:0.85rem; padding:1rem 1.1rem; }
.sr-ic { width:42px; height:42px; border-radius:0.8rem; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6); }
.sr-mid { flex:1; min-width:0; }
.sr-mid b { display:block; font-size:1rem; font-weight:800; color:var(--ink); }
.sr-mid span { font-size:0.85rem; color:var(--ink-muted); font-weight:600; }
.sr-lock { width:34px; height:34px; border-radius:50%; background:rgba(203,213,225,0.6); color:#64748B; display:flex; align-items:center; justify-content:center; font-size:0.85rem; flex-shrink:0; }
.sess-row--locked { opacity:0.92; }

/* completed collapsible */
.done-slim .ds-head { display:flex; align-items:center; gap:0.85rem; padding:1rem 1.1rem; cursor:pointer; }
.done-slim .ds-chev { color:var(--ink-muted); transition:transform 0.2s; margin-left:auto; }
.done-slim.open .ds-chev { transform:rotate(180deg); }
.done-slim .ds-body { display:none; padding:0 1.1rem 1.1rem; }
.done-slim.open .ds-body { display:block; }
.done-slim .ds-stats { display:flex; gap:1.1rem; flex-wrap:wrap; margin:0.4rem 0 1rem; }
.done-slim .ds-stat { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.86rem; font-weight:700; color:var(--ink-soft); }
.done-slim .ds-stat .d { width:9px; height:9px; border-radius:50%; }
.done-slim .ds-stat.correct .d { background:#10B981; }
.done-slim .ds-stat.incorrect .d { background:#EF4444; }
.done-slim .ds-stat.blank .d { background:#CBD5E1; }
.done-slim .ds-btns { display:flex; gap:0.6rem; flex-wrap:wrap; }

/* make the mission hero read as liquid glass too (layered translucency) */
.mission { backdrop-filter:blur(8px) saturate(150%); -webkit-backdrop-filter:blur(8px) saturate(150%); }

@media (max-width:600px){
  .done-slim .ds-btns { flex-direction:column; }
  .done-slim .ds-btns .glass-btn { width:100%; }
}

/* Rich timeline strip */
.plan-timeline { padding:1.1rem 0.5rem; margin-bottom:1.4rem; }
.tl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tl-track { display:flex; min-width:560px; padding:0 0.6rem; }
.tl-node { position:relative; flex:1 1 0; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:78px; }
.tl-dot { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.95rem; position:relative; z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); }
.tl-node--done .tl-dot { background:#10B981; }
.tl-node--active .tl-dot { background:var(--amber, #F59E0B); box-shadow:0 0 0 5px rgba(245,158,11,0.18), inset 0 1px 0 rgba(255,255,255,0.5); }
.tl-node--locked .tl-dot { background:rgba(203,213,225,0.9); color:#64748B; }
.tl-line { position:absolute; top:20px; left:50%; width:100%; height:3px; background:rgba(203,213,225,0.7); z-index:1; }
.tl-line--on { background:#10B981; }
.tl-meta { display:flex; flex-direction:column; align-items:center; margin-top:0.5rem; gap:0.05rem; }
.tl-meta .tl-n { font-size:0.72rem; font-weight:800; color:var(--ink-muted); }
.tl-meta .tl-subj { font-size:0.84rem; font-weight:800; color:var(--ink); }
.tl-meta .tl-state { font-size:0.72rem; font-weight:700; }
.tl-node--done .tl-state { color:#059669; }
.tl-node--active .tl-state { color:var(--amber, #F59E0B); }
.tl-node--locked .tl-state { color:var(--ink-light); }

/* Study plan v2 — spacing, green completed, mission mobile stack */
.sp2 .plan-timeline { margin-bottom:1.6rem; }
.sp2 .plan-sub { margin:2rem 0 1rem; }
.sp2 .glass-card.sess-row { margin-bottom:1rem; }

/* completed = light green tint + border */
.sp2 .done-slim { background:linear-gradient(150deg, rgba(220,252,231,0.75), rgba(240,253,244,0.55)); border:1px solid #86EFAC; }
.sp2 .done-slim .sr-ic { background:#10B981; color:#fff; }

@media (max-width:820px){
  .mission { flex-direction:column; }
  .mission__action { flex:1 1 auto; width:100%; }
}

/* study plan tweaks: quiet 'what is inside', subject prominent */
.ma-inside { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; width:100%; background:none; border:none;
  color:var(--ink-muted); font-weight:600; font-size:0.9rem; cursor:pointer; padding:0.3rem; }
.ma-inside:hover { color:var(--cyan-dark); text-decoration:underline; }
.sr-sess { font-size:0.82rem; color:var(--ink-muted); font-weight:600; }
.sp2 .sr-mid b { font-size:1.05rem; }

/* ============================================================
   HOME — liquid glass template (matches study plan)
   ============================================================ */
.home2 {
  background:linear-gradient(155deg, rgba(255,255,255,0.42), rgba(255,255,255,0.20)) !important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,0.55) !important;
  box-shadow:0 24px 70px rgba(15,23,42,0.14), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
/* hero as liquid glass */
.home2 .hero {
  background:linear-gradient(140deg, rgba(236,254,255,0.75) 0%, rgba(240,249,255,0.7) 55%, rgba(238,249,241,0.75) 100%) !important;
  backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%);
  border:1px solid rgba(255,255,255,0.7) !important;
  box-shadow:0 12px 34px rgba(8,145,178,0.10) !important;
  border-radius:1.5rem !important;
}
/* blocks as separated glass cards instead of line-divided sections */
.home2.page-card.stack > section.block {
  background:linear-gradient(150deg, rgba(255,255,255,0.68), rgba(255,255,255,0.38)) !important;
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7) !important;
  border-radius:1.2rem !important;
  box-shadow:0 8px 30px rgba(15,23,42,0.07), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  padding:1.5rem !important; margin-bottom:1.4rem;
}
.home2.page-card.stack > section.block + section.block,
.home2.page-card.stack > .hero + section.block { border-top:1px solid rgba(255,255,255,0.7) !important; }
/* bigger fonts on home */
.home2 .hero h2 { font-size:1.8rem; }
.home2 .sec-block-title { font-size:1.35rem; font-weight:800; }
.home2 .sec-block-sub { font-size:0.95rem; }
.home2 .subj-row { background:rgba(255,255,255,0.55) !important; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.8) !important; }
.home2 .subj-row .subj-name { font-size:1rem; }
.home2 .na-btn { font-size:0.85rem; }

/* subject-row border inside home "Your subjects and chapters" */
.home2 .subj-row { border:1px solid rgb(138, 215, 233) !important; }
/* visible bottom border on recently-done rows */
.home2 .recent-row { border-bottom:1px solid #CBD5E1; }
.home2 .recent-row:last-child { border-bottom:none; }
.home2 .recent-row + .recent-row { border-top:none; }

/* ============================================================
   SHARED LIQUID GLASS — all student pages (.glassy) + modals
   ============================================================ */
.page-card.glassy {
  background:linear-gradient(155deg, rgba(255,255,255,0.42), rgba(255,255,255,0.20)) !important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,0.55) !important;
  box-shadow:0 24px 70px rgba(15,23,42,0.14), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
/* inner cards/rows sit as brighter frosted layers */
.glassy .card, .glassy .subj-card, .glassy .pcard, .glassy .sv-card,
.glassy .chapter-teaser, .glassy .paper-card, .glassy .note-card, .glassy .review-item,
.glassy .result-bar, .glassy .help-card, .glassy .rev-item {
  background:linear-gradient(150deg, rgba(255,255,255,0.68), rgba(255,255,255,0.4)) !important;
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,0.7) !important;
  box-shadow:0 8px 26px rgba(15,23,42,0.07), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
/* glassy modals/popups */
.modal2__box {
  background:linear-gradient(155deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7)) !important;
  backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,0.8) !important;
  box-shadow:0 30px 80px rgba(15,23,42,0.25), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* dashboard hero split: text left, button right */
.hero--split { display:flex; align-items:center; gap:1.5rem; }
.hero--split .hero-main { flex:1; min-width:0; }
.hero--split .hero-side { flex:0 0 auto; }
.home2 .hero-meta { font-size:1.15rem; font-weight:700; color:var(--ink-soft); }
/* dotted bottom border on recently-done rows */
.home2 .recent-row { border-bottom:1px dotted #94A3B8; }
.home2 .recent-row:last-child { border-bottom:none; }
@media (max-width:760px){ .hero--split { flex-direction:column; align-items:stretch; } .hero--split .hero-side .hero-start { width:100%; justify-content:center; } }

/* progress page: glass pcards, tighter top, keep stat icons coloured */
.glassy .pcard { background:linear-gradient(150deg, rgba(255,255,255,0.68), rgba(255,255,255,0.4)) !important;
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,0.7) !important; box-shadow:0 8px 26px rgba(15,23,42,0.07), inset 0 1px 0 rgba(255,255,255,0.85) !important; }
.glassy .stat-card { background:linear-gradient(150deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35)); border:1px solid rgba(255,255,255,0.7); border-radius:0.9rem; }
.glassy .sect-title:first-child { margin-top:0; padding-top:0; }
.glassy #pgContent { margin-top:0; }

/* progress: kill extra top gap before first title */
.glassy #pgContent > .sect-title:first-child { margin-top:0; }
.glassy #pgContent { padding-top:0; }
.progress-page.page-card { padding-top:1.25rem; }

/* ============================================================
   PARENT — liquid glass (scoped, does NOT touch student pages)
   ============================================================ */
/* main panel — frosted over the dark shell */
.page-card.p-glassy {
  background:linear-gradient(155deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52)) !important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,0.6) !important;
  box-shadow:0 24px 70px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
/* inner cards/rows as brighter frosted layers */
.p-glassy .panel, .p-glassy .plan-card, .p-glassy .kid-card, .p-glassy .order-row,
.p-glassy .buy-card, .p-glassy .child-card, .p-glassy .subject-chip-card, .p-glassy .sec-card {
  background:linear-gradient(150deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55)) !important;
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,0.7) !important;
  box-shadow:0 8px 26px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
/* parent modals glassy */
.app--dark .ov-box, .app--dark .modal2__box {
  background:linear-gradient(155deg, rgba(255,255,255,0.9), rgba(255,255,255,0.78)) !important;
  backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,0.8) !important;
  box-shadow:0 30px 80px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
/* parent login card glassy */
.p-glassy-auth .auth__card {
  background:linear-gradient(155deg, rgba(255,255,255,0.8), rgba(255,255,255,0.62)) !important;
  backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,0.7) !important;
  box-shadow:0 24px 70px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}

/* parent billing: prevent order-row link overflow on mobile (scoped, student untouched) */
@media (max-width:420px){
  .p-glassy .order-row, .p-glassy .rl-row { flex-wrap:wrap; }
  .p-glassy .rl-link { white-space:normal; }
}

/* mascot */
.mascot-hero { width:120px; height:auto; display:block; margin:0 auto 0.75rem; }
.mascot-empty { width:96px; height:auto; display:block; margin:0 auto 1rem; opacity:0.95; }

/* (performance strip removed — the label belongs on Progress, not mid-question) */

/* (feedback styling lives in learn.html's locked <style> block — do not duplicate it here) */

/* Answer shown inside the feedback box — has to stand out, it's the point. */
.learn-fb__answer{ margin:.2rem 0 .75rem; font-size:1.05rem; font-weight:700; color:var(--ink,#0f172a);
  background:#fff; padding:12px; border-radius:12px; }
.learn-fb__answer span{ display:inline-block; padding:.25rem .7rem; border-radius:8px;
  background:rgba(22,163,74,.12); color:#15803d; font-weight:800; }
/* Matching answers read as "23 -> is a prime number", one pair per line. A
   comma-joined run of right-hand values does not say which term each belongs to. */
.learn-fb__answer .learn-fb__pair{ display:block; }
.learn-fb__answer .learn-fb__pair + .learn-fb__pair{ margin-top:.45rem; }
/* Each pair is its own green pill on its own line — the run-on version read as
   one long sentence and hid which value belonged to which term. */
.learn-fb__answer:has(.learn-fb__pair){ background:#fff; padding:12px; }
.learn-fb__answer:has(.learn-fb__pair) > span{ display:block; background:none; padding:0; }
.learn-fb__answer .learn-fb__pair{ padding:.3rem .7rem; border-radius:8px;
  background:rgba(22,163,74,.12); color:#15803d; font-weight:500; width:fit-content; }



/* Breathing room between the header block and the question itself. */
.qz-plain .qz-stem{ margin-top:0; }
.qz-plain{ margin-top:0; }


/* ══ Learn page ═══════════════════════════════════════════════════════════
   Moved out of learn.html's inline <style>. All student-only styling lives
   here; qz-* stays in questions.css because the admin preview shares it. */
.learn-shell{ max-width:780px; margin:0 auto; }
.learn-progwrap{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.learn-progbar{ flex:1; height:9px; border-radius:99px; background:var(--surface-muted,#eef2f6); overflow:hidden; }
.learn-progbar__fill{ height:100%; background:linear-gradient(90deg,#00B8D4,#0891B2); width:0; transition:width .3s; }
.learn-count{ font-size:.88rem; font-weight:700; color:var(--ink-muted,#64748b); white-space:nowrap; }

.learn-card{ background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:1rem; padding:1.75rem; }
.learn-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1.1rem; }
.learn-qbadge{ display:inline-flex; align-items:center; gap:.4rem; font-weight:800; font-size:.85rem;
  color:#0891B2; background:rgba(0,184,212,.10); padding:.4rem .8rem; border-radius:99px; }
.learn-tools{ display:none; gap:.5rem; }
.learn-tools.show{ display:flex; }
.learn-tool{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--border,#e2e8f0);
  background:#fff; color:var(--ink-muted,#64748b); font-size:.82rem; font-weight:600; padding:.45rem .8rem;
  border-radius:10px; cursor:pointer; transition:all .12s; }
.learn-tool:hover{ background:var(--surface-muted,#f1f5f9); color:var(--ink,#0f172a); }
.learn-tool.saved{ background:#fef9c3; border-color:#facc15; color:#a16207; }
.learn-tool.flagged{ background:#fee2e2; border-color:#fca5a5; color:#dc2626; }

.learn-stem{ font-size:1.22rem; font-weight:700; line-height:1.5; color:var(--ink,#0f172a); margin-bottom:1.3rem; }

.learn-opts{ display:flex; flex-direction:column; gap:.7rem; }
.learn-opt{ display:flex; align-items:center; gap:.9rem; width:100%; text-align:left; padding:1rem 1.15rem;
  border:1.5px solid var(--border,#e2e8f0); border-radius:13px; background:#fff;
  font-size:1.05rem; font-weight:600; color:var(--ink,#0f172a); cursor:pointer; transition:all .12s; }
.learn-opt:hover:not(:disabled){ border-color:#00B8D4; background:rgba(0,184,212,.04); }
.learn-opt__key{ flex:none; width:32px; height:32px; border-radius:9px; background:var(--surface-muted,#eef2f6);
  display:grid; place-items:center; font-weight:800; font-size:.92rem; color:var(--ink-muted,#64748b); }
.learn-opt__label{ flex:1; }
.learn-opt__mark{ font-size:1.3rem; display:none; }
.learn-opt.is-correct{ border-color:#16a34a; background:rgba(22,163,74,.08); }
.learn-opt.is-correct .learn-opt__key{ background:#16a34a; color:#fff; }
.learn-opt.is-correct .learn-opt__mark{ display:block; color:#16a34a; }
.learn-opt.is-wrong{ border-color:#ef4444; background:rgba(239,68,68,.07); }
.learn-opt.is-wrong .learn-opt__key{ background:#ef4444; color:#fff; }
.learn-opt.is-wrong .learn-opt__mark{ display:block; color:#ef4444; }
.learn-opt:disabled{ cursor:default; }

.learn-fb{ margin-top:1.4rem; border-radius:14px; padding:1.2rem 1.3rem; display:none; }
.learn-fb.show{ display:block; animation:fbIn .25s ease; }
@keyframes fbIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.learn-fb--right{ background:rgba(22,163,74,.08); border:1px solid rgba(22,163,74,.25); }
.learn-fb--wrong{ background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.22); }
.learn-fb__tag{ display:inline-flex; align-items:center; gap:.45rem; font-weight:800; font-size:1.02rem; margin-bottom:.6rem; }
.learn-fb--right .learn-fb__tag{ color:#15803d; }
.learn-fb--wrong .learn-fb__tag{ color:#dc2626; }
/* Part-scoring answer: neither a clean pass nor a zero. */
.learn-fb--part{ background:rgba(217,119,6,.07); border:1px solid rgba(217,119,6,.24); }
.learn-fb--part .learn-fb__tag{ color:#b45309; }
.learn-fb__why{ font-size:.98rem; line-height:1.55; color:var(--ink,#0f172a); }
.learn-fb__why b{ font-weight:700; }
.learn-note{ margin-top:1rem; padding:.9rem 1rem; background:rgba(0,184,212,.06); border-left:3px solid #00B8D4;
  border-radius:8px; font-size:.9rem; line-height:1.5; color:var(--ink,#0f172a); }
.learn-note b{ color:#0891B2; }
.learn-note a{ color:#0891B2; font-weight:700; text-decoration:none; }

.learn-nav{ display:flex; justify-content:space-between; gap:.75rem; margin-top:1.6rem; flex-wrap:wrap; }
.lbtn{ display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.5rem; border-radius:100px;
  font-weight:700; font-size:.95rem; text-decoration:none; border:1px solid var(--border,#e2e8f0);
  background:#fff; color:var(--ink-soft,#475569); cursor:pointer; transition:all .15s; }
.lbtn:hover:not(:disabled){ background:var(--surface-muted,#f1f5f9); color:var(--ink,#0f172a); }
.lbtn:disabled{ opacity:.45; cursor:not-allowed; }
.lbtn.primary{ background:#0891B2; border-color:#0891B2; color:#fff; }
.lbtn.primary:hover:not(:disabled){ background:#0e7490; color:#fff; }

.learn-done{ text-align:center; padding:2.5rem 1.5rem; }
.learn-done__ic{ width:84px; height:84px; border-radius:50%; margin:0 auto 1.2rem; display:grid; place-items:center;
  background:rgba(22,163,74,.12); color:#16a34a; font-size:2.4rem; }
.learn-done__score{ font-size:2.2rem; font-weight:800; color:#0891B2; margin-bottom:.3rem; }
.learn-done h2{ font-weight:800; margin-bottom:.5rem; }
.learn-done p{ color:var(--ink-muted,#64748b); margin-bottom:1.6rem; }
.learn-done__btns{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* ── Learn: revision-notes slide-over panel ── */
.notes-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; z-index:1080; }
.notes-overlay.is-open{ display:block; }
.notes-panel{ position:absolute; top:0; right:0; height:100%; width:min(560px,92vw); background:#fff;
  display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(15,23,42,.18); animation:slideIn .22s ease; }
@keyframes slideIn{ from{transform:translateX(30px);opacity:.6} to{transform:none;opacity:1} }
.notes-panel__head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem;
  border-bottom:1px solid var(--border,#e2e8f0); font-weight:800; color:var(--ink,#0f172a); }
.notes-panel__x{ border:none; background:var(--surface-muted,#f1f5f9); width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; cursor:pointer; color:var(--ink-muted,#64748b); }
.notes-panel__x:hover{ background:#e2e8f0; }
.notes-panel iframe{ flex:1; width:100%; border:none; }

/* ── Practice chooser modal (subject-detail) ── */
.modal2__box--wide{ max-width:720px !important; }
.prac-sub{ color:var(--ink,#0f172a); font-size:1.05rem; font-weight:600; margin:0 0 1.4rem; }
.prac-choose{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.prac-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; text-align:left;
  padding:1.7rem 1.5rem; border:2px solid var(--border,#e2e8f0); border-radius:22px; background:var(--surface,#fff);
  cursor:pointer; transition:all .16s; }
.prac-opt:hover{ border-color:#00B8D4; background:rgba(0,184,212,.04); transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(15,23,42,.10); }
.prac-opt--test:hover{ border-color:#F59E0B; background:rgba(245,158,11,.05); }
.prac-opt__ic{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center;
  background:rgba(0,184,212,.12); color:#0891B2; font-size:1.9rem; margin-bottom:.4rem; }
.prac-opt__ic--test{ background:rgba(245,158,11,.14); color:#B45309; }
.prac-opt__head{ font-size:1.3rem; font-weight:800; color:var(--ink,#0f172a); }
.prac-opt__desc{ font-size:.94rem; line-height:1.5; color:var(--ink-muted,#64748b); flex:1; }
.prac-opt__cta{ font-size:.98rem; font-weight:800; color:#0891B2; display:inline-flex; align-items:center; gap:.45rem; margin-top:.5rem; }
.prac-opt--test .prac-opt__cta{ color:#B45309; }
@media(max-width:560px){ .prac-choose{ grid-template-columns:1fr; } .modal2__box--wide{ max-width:94vw !important; } }

/* ══ Subject → topics page ════════════════════════════════════════════════ */
.subj-wrap{ max-width:1080px; margin:0 auto; }

.subj-hero{ display:flex; align-items:center; gap:1.4rem; margin:.2rem 0 1.5rem;
  padding:1.4rem 2rem; border-radius:16px; position:relative; overflow:hidden; min-height:184px;
  background:linear-gradient(120deg,#f3f9ff 0%,#f7fcff 50%,#fdf4ff 100%);
  border:1px solid #d5ecfd; box-shadow:0 4px 18px rgba(37,99,235,.08); }
.subj-hero__calc{ width:104px; height:auto; flex:none; filter:drop-shadow(0 12px 18px rgba(37,99,235,.16));
  transform:rotate(-6deg); }
.subj-hero__text{ flex:1 1 auto; min-width:0; text-align:left; z-index:2; }
.subj-hero__title{ font-size:2.7rem; font-weight:800; letter-spacing:-.02em; margin:0; line-height:1;
  color:var(--ink,#0f172a); }
.subj-hero__tag{ margin:.4rem 0 1.1rem; font-size:1.08rem; font-weight:600; color:#42546b; }
.subj-hero__tag .spark{ filter:saturate(1.3); }
.subj-hero__progrow{ display:flex; align-items:center; gap:.8rem; max-width:460px; }
.subj-progbar{ flex:1; height:12px; border-radius:99px; background:#e3ebf3; overflow:hidden; }
.subj-progbar__fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,#22c1d6,#0891b2);
  transition:width .6s cubic-bezier(.2,.8,.2,1); }
.subj-hero__pct{ font-weight:800; color:#0891b2; font-size:1.1rem; }
.subj-hero__shapes{ position:absolute; right:-10px; top:50%; transform:translateY(-50%);
  height:auto; width:min(56%,560px); pointer-events:none; image-rendering:auto; }
@media(max-width:900px){ .subj-hero__shapes{ opacity:.55; } .subj-hero__title{ font-size:2.1rem; } }
@media(max-width:620px){ .subj-hero__calc,.subj-hero__shapes{ display:none; } }

.subj-toolbar{ display:flex; align-items:center; gap:1.5rem; margin-bottom:2rem; }
.subj-toolbar .topic-search{ flex:0 1 320px; margin-bottom:0; }
.subj-filters{ display:flex; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; flex:none; }
@media(max-width:640px){ .subj-toolbar{ flex-direction:column; align-items:stretch; } .subj-filters{ justify-content:flex-start; } }
.subj-filter{ border:1.5px solid #e6ecf3; background:#fff; color:#64748b; font-weight:700;
  font-size:.9rem; padding:.48rem 1.15rem; border-radius:99px; cursor:pointer; transition:all .15s; }
.subj-filter:hover{ border-color:#cbd5e1; }
.subj-filter[data-f="all"].is-on{ background:#0891b2; border-color:#0891b2; color:#fff; }
.subj-filter[data-f="not_started"].is-on{ background:#eef2f6; border-color:#dbe3ec; color:#334155; }
.subj-filter[data-f="in_progress"].is-on{ background:#fff1da; border-color:#ffe0ad; color:#b26a00; }
.subj-filter[data-f="doing_well"].is-on{ background:#dff5e8; border-color:#b7e8cd; color:#12855a; }

.topic-search{ position:relative; }
.topic-search i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:1.05rem; }
.topic-search input{ width:100%; padding:.6rem 1rem .6rem 2.7rem; border:1.5px solid #e6ecf3; border-radius:14px;
  font-size:.98rem; font-family:inherit; background:#fff; transition:border-color .15s, box-shadow .15s; }
.topic-search input:focus{ outline:none; border-color:#7fd6e6; box-shadow:0 0 0 4px rgba(34,193,214,.12); }

.topic-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
@media(max-width:1024px){ .topic-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){  .topic-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){  .topic-grid{ grid-template-columns:1fr; } }
.topic-loading,.topic-empty{ grid-column:1/-1; text-align:center; color:#94a3b8; padding:2.5rem 0; font-weight:600; }

.topic-card{ position:relative; display:flex; flex-direction:column; padding:1.3rem 1.15rem 1.2rem;
  border:1.5px solid #cedff4; border-radius:16px; background:#fff;
  box-shadow:0 4px 14px rgba(37,99,235,.1);
  transition:transform .16s, box-shadow .16s, border-color .16s; }
.topic-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(37,99,235,.13); border-color:#bcdcff; }
.topic-card.is-soon{ background:#fff; }

.tc-pill{ position:absolute; top:-10px; right:14px; font-size:.72rem; font-weight:800; padding:.28rem .7rem;
  border-radius:99px; }
.tc-pill.st-priority{ background:#fde3e3; color:#e01b1b; }
.tc-pill.st-keep{     background:#fff1da; color:#b26a00; }
.tc-pill.st-well{     background:#dff5e8; color:#12855a; }
.tc-pill.st-none{     background:#eef1f5; color:#64748b; }

.tc-num{ position:absolute; top:12px; left:12px; width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center; font-size:.85rem; font-weight:800; color:#fff;
  background:#22c1d6; box-shadow:0 3px 8px rgba(34,193,214,.4); }
.tc-head{ display:block; }
.tc-title{ display:block; text-align:center; font-size:1.1rem; font-weight:700; color:#0f74a8;
  line-height:1.25; min-height:2.5em; margin-bottom:1rem; }

.tc-img{ width:125px; height:125px; object-fit:contain; align-self:center; margin:.3rem 0 .7rem;
  filter:none; }
.topic-card.is-soon .tc-img{ opacity:1; }

.tc-perf{ margin-bottom:1.5rem; }
.tc-perf__lbl{ font-size:.8rem; font-weight:700; color:#64748b; }
.tc-bar{ height:8px; border-radius:99px; background:#eef1f5; overflow:hidden; margin:.32rem 0; }
.tc-bar__fill{ height:100%; border-radius:99px; }
.tc-bar__fill.st-priority{ background:#f93e3e; }
.tc-bar__fill.st-keep{     background:#f59e0b; }
.tc-bar__fill.st-well{     background:#16a34a; }
.tc-perf__pct{ font-size:.85rem; font-weight:800; float:right; }
.tc-perf__pct.st-priority{ color:#e01b1b; }
.tc-perf__pct.st-keep{     color:#b26a00; }
.tc-perf__pct.st-well{     color:#12855a; }
.tc-perf--none{ display:flex; align-items:baseline; justify-content:space-between; }
.tc-perf__na{ font-size:.85rem; font-weight:700; color:#94a3b8; }

.tc-inplan{ display:flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:700; color:#12855a;
  margin-bottom:.7rem; }
.tc-inplan i{ font-size:.95rem; }

.tc-actions{ display:flex; gap:.5rem; margin-top:auto; }
.tc-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; text-decoration:none;
  font-size:.86rem; font-weight:600; padding:.5rem .4rem; border-radius:11px; cursor:pointer;
  border:1.5px solid transparent; text-decoration:none; transition:all .14s; }
.tc-btn--go{ background:#c9f5ff; color:#0891b2; }
.tc-btn--go:hover{ background:#0891b2; color:#fff; }
.tc-btn--go.is-disabled{ background:#eef2f6; color:#a9b6c4; cursor:not-allowed; }
.tc-btn--go.is-disabled:hover{ background:#eef2f6; color:#a9b6c4; }
.tc-btn--notes{ background:#fff0e2; color:#8a5a2b; border-color:#ffe3c9; }
.tc-btn--notes:hover{ border-color:#f4c99a; color:#7a4d20; text-decoration:none; }

/* Quiz start popup */
.quiz-start__sub{ font-size:.95rem; color:#475569; line-height:1.5; margin:0 0 1.2rem; }
.quiz-start__actions{ display:flex; gap:.6rem; justify-content:flex-end; }

/* Start-quiz gate (shown on arrival at the learn page) */
/* gate now overlays the stage as a blurred modal so the first question shows behind it */
.quizgate {
	position: fixed;
	/* Clears whatever the sidebar currently is, so it centres over the content
	   in rail mode too. Was pinned at 240px and sat off to one side. */
	inset: 0 0 0 var(--sidebar-w, 240px);
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(216, 219, 225, 0.28);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.quizgate.is-gone{ display:none; }
.quizgate__card{ max-width:440px; width:100%; text-align:center; background:#fff; border:1.5px solid #e3eefb;
  border-radius:16px; padding:2.2rem 2rem; box-shadow:0 10px 30px rgba(37,99,235,.08); }
.quizgate__icon {
	width: 54px;
	height: 54px;
	margin: 0 auto 1rem;
	border-radius: 12px;
	display: grid;
	place-items: center;
	font-size: 1.3rem;
	color: #fff;
	background: linear-gradient(135deg,#22c1d6,#0891b2);
	box-shadow: 0 8px 18px rgba(34,193,214,.4);
}
.quizgate__title{ font-size:1.5rem; font-weight:800; color:var(--ink,#0f172a); margin:0 0 .5rem; }
.quizgate__sub{ font-size:.96rem; color:#475569; line-height:1.55; margin:0 0 1.5rem; }
.quizgate__go{ display:inline-flex; align-items:center; gap:.45rem; font-size:1rem; font-weight:800; color:#fff;
  background:#1ab0c4; border:none; border-radius:12px; padding:.75rem 1.6rem; cursor:pointer; transition:background .15s; }
.quizgate__go:hover{ background:#149aac; }
.quizgate__back{ display:block; margin-top:1rem; font-size:.9rem; font-weight:600; color:#64748b; text-decoration:none; }
.quizgate__back:hover{ color:#0f172a; }

/* Topics page — mobile: compact horizontal cards, sane toolbar */
@media (max-width: 640px){
  .subj-toolbar{ flex-direction:column; align-items:stretch; gap:.7rem; margin-bottom:1.2rem; }
  .subj-toolbar .topic-search{ flex:1 1 auto; width:100%; }
  .topic-search input{ padding:.55rem 1rem .55rem 2.5rem; font-size:.95rem; }
  .subj-filters{ justify-content:flex-start; gap:.4rem; }
  .subj-filter{ padding:.4rem .9rem; font-size:.85rem; }

  /* one card per row, image left + title right, shorter height */
  .topic-grid{ grid-template-columns:1fr; gap:.7rem; }
  .topic-card{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:
      "img head" "img perf" "img plan" "act act";
    align-items:center; column-gap:.9rem; row-gap:.3rem; padding:.85rem 1rem;
    border-radius:14px; margin-bottom:6px; }
  .topic-card .tc-num{ top:8px; left:8px; width:22px; height:22px; font-size:.72rem; border-radius:7px; }
  .tc-img{ grid-area:img; width:64px; height:64px; margin:0; margin-top:12px; align-self:center; border-radius:50px; }
  .tc-title{ grid-area:head; text-align:left; min-height:0; margin:0; font-size:1rem; align-self:end; padding-top:10px; padding-bottom:6px; }
  .tc-perf{ grid-area:perf; margin:0; align-self:start; }
  .tc-perf__pct{ float:none; margin-left:.4rem; }
  .tc-inplan{ grid-area:plan; margin:0; font-size:.78rem; }
  .tc-actions{ grid-area:act; margin-top:.55rem; }
  /* pill + number stay as absolute badges (not grid cells) */
  .topic-card .tc-pill{ position:absolute; top:-9px; right:12px; }
  .topic-card{ position:relative; padding-top:1.1rem; }
}

/* ===== Mock exams — step wizard ================================ */
/* Centred, one question per screen. Card/tile language matches the
   subject page; the soft cyan wash matches the study-plan mission. */
.mx-wrap { max-width:780px; margin-inline:auto; text-align:center; }
.mx-wrap .breadcrumb2 { justify-content:center; }

.mx-panel { display:none; }
.mx-panel.is-on { display:block; animation:mxIn .22s ease both; }
@keyframes mxIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.mx-q { font-size:1.85rem; font-weight:800; line-height:1.2; margin:0.4rem 0 0.5rem; letter-spacing:-0.02em; }
.mx-lead { font-size:0.95rem; color:var(--ink-soft); margin:0 auto 1.8rem; max-width:44ch; }

/* auto-fit, so the row fills the card whatever the number of options is —
   a fixed 3 left two cards hugging the left edge. */
.mx-scopes { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:0.8rem; }
.mx-scope { display:flex; flex-direction:column; align-items:center; gap:0.35rem; cursor:pointer;
  padding:1.5rem 1.1rem; border:1px solid var(--border); border-radius:1.1rem; background:#fff;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.mx-scope i { font-size:1.9rem; color:var(--cyan-dark); margin-bottom:0.2rem; }
.mx-scope b { font-size:1rem; }
.mx-scope span { font-size:0.82rem; color:var(--ink-soft); line-height:1.35; }
.mx-scope:hover { border-color:var(--cyan); transform:translateY(-2px); }
.mx-scope.is-on { border-color:var(--cyan); background:var(--cyan-light);
  box-shadow:0 6px 18px rgba(var(--cyan-rgb),0.20); }

.mx-chaps { display:grid; grid-template-columns:repeat(2,1fr); gap:0.55rem; text-align:left; }
.mx-chap { display:flex; align-items:center; gap:0.65rem; cursor:pointer;
  padding:0.7rem 0.9rem; border:1px solid var(--border); border-radius:0.85rem; background:#fff; }
.mx-chap__n { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px;
  border-radius:0.55rem; background:var(--surface-muted); color:var(--ink-soft); font-size:0.78rem; font-weight:700; }
.mx-chap__t { flex:1; font-size:0.92rem; font-weight:600; }
.mx-chap__q { font-size:0.75rem; font-weight:700; color:var(--ink-soft); }
.mx-chap i { color:var(--cyan-dark); }
.mx-chap:hover { border-color:var(--cyan); }
.mx-chap.is-on { border-color:var(--cyan); background:var(--cyan-light); }
.mx-chap.is-on .mx-chap__n { background:#fff; color:var(--cyan-dark); }

.mx-lens { display:flex; gap:0.7rem; justify-content:center; flex-wrap:wrap; }
.mx-len { display:flex; flex-direction:column; align-items:center; cursor:pointer; min-width:124px;
  padding:1.2rem 1.3rem; border:1px solid var(--border); background:#fff; border-radius:1.1rem;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.mx-len b { font-size:1.8rem; font-weight:800; color:var(--ink-soft); line-height:1.1; }
.mx-len span { font-size:0.78rem; color:var(--ink-soft); }
.mx-len:hover { border-color:var(--cyan); transform:translateY(-2px); }
.mx-len.is-on { border-color:var(--cyan); background:var(--cyan-light);
  box-shadow:0 6px 18px rgba(var(--cyan-rgb),0.20); }
.mx-len.is-on b { color:var(--cyan-dark); }
.mx-recap { margin:1.4rem 0 0; font-size:0.92rem; font-weight:700; color:var(--cyan-dark); }

.mx-bar { display:flex; align-items:center; justify-content:center; gap:0.8rem; flex-wrap:wrap;
  margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--surface-muted); }
.mx-bar__sum { font-size:0.9rem; font-weight:600; color:var(--ink-soft); flex:1; text-align:left; }
.mx-bar .btn2 { white-space:nowrap; }
.mx-bar .btn2--primary { padding-inline:1.5rem; }

.mx-empty { padding:1.6rem; text-align:center; color:var(--ink-soft);
  border:1px dashed var(--border); border-radius:1rem; background:#fff; grid-column:1 / -1; }
.mx-err { margin-top:0.9rem; padding:0.75rem 1rem; border-radius:0.8rem;
  background:#FFF3F3; border:1px solid #F3CFD1; color:#B4232A; font-size:0.88rem; }

@media (max-width:640px){
  .mx-q { font-size:1.45rem; }
  .mx-lead { margin-bottom:1.4rem; }
  .mx-scopes { grid-template-columns:1fr; }
  .mx-scope { flex-direction:row; align-items:center; text-align:left; gap:0.8rem; padding:1rem; }
  .mx-scope i { margin:0; font-size:1.5rem; }
  .mx-scope > div { flex:1; }
  .mx-chaps { grid-template-columns:1fr; }
  .mx-lens { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; }
  .mx-len { min-width:0; padding:0.9rem 0.4rem; }
  .mx-len b { font-size:1.4rem; }
  .mx-bar__sum { order:3; width:100%; flex:none; text-align:center; }
  .mx-bar .btn2--primary { flex:1; }
}

/* Exam clock in its last five minutes — a nudge, not an alarm. */
.time-pill.is-low { background:#FFF3F3; border-color:#F3CFD1; color:#B4232A; }
.q-tool-btn.is-on { color:var(--cyan-dark); background:var(--cyan-light); border-color:var(--cyan); }

/* Topic cards: the "In your study plan" line is hidden for now — the markup
   and the API's in_plan flag are untouched, so deleting this rule brings it
   straight back. */
.tc-inplan { display:none; }

/* The start-quiz gate centres over the content column. Below the sidebar
   breakpoint there is no sidebar in flow, so it spans the full width again. */
@media (max-width: 860px){
  .quizgate { inset: 0; }
}

/* A topic that has been answered but not yet answered ENOUGH to be judged.
   Neutral blue: it is a statement of activity, not of performance. */
.st-prog { background:#E0F2FE; color:#0369A1; }
.tc-perf__pct.st-prog { color:#0369A1; }
.tc-bar__fill.st-prog { background:#38BDF8; }

/* ===== Corrected paper ========================================= */
/* Rides on the exam player's own chrome (.question-card, .grid-panel,
   .q-cell). Only the status strip and the feedback box are new. */

.cp-card { padding-top:0; overflow:hidden; margin-bottom:1.4rem; }
.cp-card:last-child { margin-bottom:0; }
.cp-card.is-right { border-color:#A7F3D0; }
.cp-card.is-wrong { border-color:#FBC7C7; }
.cp-card.is-part  { border-color:#FDE68A; }

.cp-strip { display:flex; align-items:center; gap:0.45rem;
  margin:0 -1.5rem 1.25rem; padding:0.55rem 1.5rem;
  font-size:0.85rem; font-weight:700; color:#fff; }
.cp-strip__marks { margin-left:auto; font-weight:800; }
.cp-strip--right { background:#10B981; }
.cp-strip--wrong { background:#EF4444; }
.cp-strip--part  { background:#F59E0B; }
.cp-strip--blank { background:#94A3B8; }

/* A submitted paper is a record — nothing on it is editable. */
.cp-mount { pointer-events:none; }

.cp-fb { margin-top:1.1rem; padding:0.9rem 1.1rem; border-radius:0.9rem;
  border:1px solid transparent; font-size:0.92rem; }
.cp-fb--right { background:#ECFDF5; border-color:#A7F3D0; }
.cp-fb--wrong { background:#FEF2F2; border-color:#FBC7C7; }
.cp-fb--part  { background:#FFFBEB; border-color:#FDE68A; }
.cp-fb--blank { background:var(--surface-muted); border-color:var(--border); }
.cp-fb__tag { display:flex; align-items:center; gap:0.4rem; font-weight:800; margin-bottom:0.9rem; }
.cp-fb--right .cp-fb__tag { color:#047857; }
.cp-fb--wrong .cp-fb__tag { color:#B4232A; }
.cp-fb--part  .cp-fb__tag { color:#92400E; }
.cp-fb--blank .cp-fb__tag { color:var(--ink-soft); }
.panel-count--lead { font-size:1.05rem; }
.panel-count--lead b { font-weight:800; }

.cp-fb__answer { margin-bottom:0.35rem; }
.cp-fb__answer span { font-weight:800; }
/* Matching answers read as "23 -> is a prime number", one pair per line. */
.cp-fb__why { color:var(--ink-soft); }
.cp-fb__why b { color:var(--ink); }

/* Number grid: same cells as the player, coloured by outcome. */
.q-cell.cp-right { background:#D1FAE5; border-color:#A7F3D0; color:#047857; }
.q-cell.cp-wrong { background:#FEE2E2; border-color:#FBC7C7; color:#B4232A; }
.q-cell.cp-blank { background:#F1F5F9; border-color:#E2E8F0; color:#64748B; }
/* Part-scoring answer: amber, so the grid square agrees with the panel. */
.q-cell.cp-part  { background:#FEF3C7; border-color:#FDE68A; color:#92400E; }

.cp-legend { flex-wrap:wrap; gap:0.5rem 1rem; }
.legend-dot.cp-dot--right { background:#10B981; }
.legend-dot.cp-dot--wrong { background:#EF4444; }
.legend-dot.cp-dot--part  { background:#F59E0B; }

.time-pill.is-good { background:#D1FAE5; border-color:#A7F3D0; color:#047857; }
.time-pill.is-mid  { background:#FEF3C7; border-color:#FDE68A; color:#92400E; }
.time-pill.is-low  { background:#FEE2E2; border-color:#FBC7C7; color:#B4232A; }

/* ---- "Marking your answers" overlay -------------------------------------
   Sits over the finished set with the page blurred behind it, rather than
   replacing the stage with a bare card. Stays up through the redirect to the
   corrected paper. */
.marking-overlay{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.marking-overlay.show{ opacity: 1; pointer-events: auto; }

.marking-box{
  background: #fff; border-radius: 18px;
  padding: 2.1rem 2.4rem; text-align: center;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
  transform: translateY(8px);
  transition: transform .22s ease;
  max-width: 320px;
}
.marking-overlay.show .marking-box{ transform: none; }
.marking-box h3{ margin: 1rem 0 .3rem; font-size: 1.12rem; font-weight: 800; color: var(--ink, #0f172a); }
.marking-box p{ margin: 0; font-size: .95rem; color: var(--ink-soft, #64748b); }

.marking-spin{
  width: 42px; height: 42px; margin: 0 auto;
  border: 3px solid rgba(0, 213, 229, .22);
  border-top-color: #00D5E5;
  border-radius: 50%;
  animation: markingSpin .8s linear infinite;
}
@keyframes markingSpin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .marking-spin{ animation-duration: 2.4s; }
  .marking-overlay, .marking-box{ transition: none; }
}

/* Set-size picker on the start gate. */
.quizgate__lens{ margin: 0 0 1.2rem; }
.quizgate__lenslabel{
  display: block; font-size: 1.2rem; font-weight: 700;
  color: #36AFD4; margin-bottom: 1rem;
}
.quizgate__lensrow{ display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.quizgate__len{
  min-width: 56px; padding: .5rem 1.1rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--ink, #0f172a);
  font-weight: 800; font-size: 1.4rem; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.quizgate__len:hover{ border-color: #00D5E5; }
.quizgate__len.is-on{ background: #E0FBFD; border-color: #00D5E5; color: #0a7c88; }

/* Disabled while the questions are still on the way — pressing Start before
   they arrive opened an empty stage. */
.quizgate__go:disabled{ opacity: .55; cursor: default; }

/* A skipped question: amber, not red. The pupil did not get it wrong, they
   said they did not know — and it costs them nothing in the percentage. */
.learn-fb--skip{ background:#FFFBEB; border-color:#FDE68A; }
.learn-fb--skip .learn-fb__tag{ color:#B45309; }

/* ---- "Are you sure you want to leave?" ---------------------------------
   Same overlay chrome as the marking dialog, so the two read as one family. */
.leave-ask .marking-box{ max-width: 380px; text-align: left; }
.leave-ask .marking-box h3{ margin: 0 0 .4rem; }
.leave-ask__btns{
  display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.3rem;
}
.leave-ask__btns button{
  border: 0; border-radius: 10px; padding: .6rem 1.1rem;
  font-weight: 700; font-size: .93rem; cursor: pointer;
}
.leave-ask__stay{ background: var(--surface-muted, #f1f5f9); color: var(--ink, #0f172a); }
.leave-ask__stay:hover{ background: #e6eaf0; }
.leave-ask__go{ background: #dc2626; color: #fff; }
.leave-ask__go:hover{ background: #b91c1c; }

/* ---- Corrected paper: layout pass -------------------------------------- */

/* The list started hard against the header — .page supplies the gutters but the
   column above it had none. */
.page > .app-content{ padding-top: 1.6rem; }

/* One corrected question = a header ABOVE the card, then the card. The pill and
   the tools are deliberately outside so nothing sits inside the coloured border
   except the question and its explanation. */
.cp-item{ margin-bottom: 1.8rem; }
.cp-item:last-child{ margin-bottom: 0; }
.cp-item__head{
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .55rem;
}

.cp-card{ padding: 1.9em; margin-bottom: 0; }

/* .qz-plain strips the renderer's type badge and marks line, which is what the
   layout wants — but it also draws its own bordered inner box. Inside a card
   that already has a border, that is a box in a box. */
.cp-card .qz-plain .qz-card{ border: 0; padding: 0; background: transparent; }

/* The rule between the question and its explanation. */
.cp-rule{ border:0; border-top:1px dashed #bbbdc0; margin:1rem 0 1.1rem; opacity:1; }

/* Smaller tool buttons — they were 38px squares competing with the question. */
.q-tools--sm .q-tool-btn{
  width: 30px; height: 30px; border-radius: .5rem; font-size: .85rem;
}

/* The correct answer is the single most useful line in the panel, so it reads
   as a statement rather than a footnote. */
.cp-fb__answer{
  font-size: 1.05rem; font-weight: 700; margin: .5rem 0 .2rem;
  color: var(--ink, #0f172a);
}
.cp-fb__answer span{
  display: inline-block; margin-left: .35rem; padding: .3rem .8rem;
  border-radius: 8px; background: rgba(22,163,74,.14);
  color: #15803d; font-weight: 800; font-size: 1.1rem;
}

/* The title sits ABOVE the panel and doubles as the toggle. On a phone the
   panel starts shut; on desktop it renders with `open`. */
.cp-fb-wrap{ margin-top: 0; }
.cp-fb__title{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .4rem;
  font-size: 1rem; font-weight: 800;
  color: var(--ink, #0f172a);
  margin-bottom: .7rem;
}
.cp-fb__title::-webkit-details-marker{ display: none; }
.cp-fb__title:hover{ color: var(--ink, #0f172a); }
.cp-fb__chev{ transition: transform .18s ease; font-size: .9rem; }
.cp-fb-wrap[open] .cp-fb__chev{ transform: rotate(180deg); }
/* Wide screens: it is always open, so it should not look clickable. */
@media (min-width: 992px){
  .cp-fb__title{ cursor: default; }
  .cp-fb__chev{ display: none; }
}
.cp-fb-wrap > .cp-fb{ margin-top: 0; }

/* The question pill carries the verdict, so the answer is readable from the
   card header alone without scrolling to the panel. */
.q-num-badge--right{ background:#D1FAE5; color:#047857; }
.q-num-badge--wrong{ background:#FEE2E2; color:#B4232A; }
.q-num-badge--blank{ background:#F1F5F9; color:#64748B; }
.q-num-badge--part { background:#FFFBEB; color:#B45309; }

/* The nav grid squares were large enough to dominate the panel. */
.q-grid--sm{ grid-template-columns: repeat(6, 1fr); gap: .35rem; }
/* Smaller cells, but the NUMBER inside them larger — the digit is the thing
   being read, the box around it is not. */
.q-grid--sm .q-cell{ font-size: .95rem; font-weight: 700; border-radius: .4rem; }

/* Two ways out, stacked, rather than one. */
.cp-exits{ display: flex; flex-direction: column; gap: .55rem; }
.btn-early--ghost{
  background: var(--surface-muted, #f1f5f9);
  color: var(--ink, #0f172a);
  border: 1px solid var(--border);
}
.btn-early--ghost:hover{ background: #e6eaf0; }

/* ---- Corrected paper: grouped question ---------------------------------
   Same reasoning as the practice panel below — the strip and the feedback box
   stay NEUTRAL because the green and red bars on each part already carry the
   verdict. A red wash over a card holding a correct part contradicts itself. */
.cp-card.is-grouped { border-color: var(--border); }
.cp-strip--grouped  { background: #64748B; }
.cp-fb--grouped     { background: #f6f7f9; border-color: var(--border); }
.cp-fb--grouped .cp-fb__tag { color: var(--ink, #0f172a); }

/* Each part is its own card: verdict and answer always visible, the working
   folded away behind "Show me how". Three open explanations stacked ran to a
   full screen and buried the one thing looked for first — which part broke. */
.cp-part{
  background: #fff;              /* sits on the tinted panel, so it stays white */
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: 12px;
  padding: .85rem 1rem;
  margin-bottom: .7rem;
}
.cp-part:last-child{ margin-bottom: 0; }
.cp-part.is-right{ border-left-color: #16a34a; }
.cp-part.is-wrong{ border-left-color: #dc2626; }

.cp-part__head{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cp-part__lab{
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--surface-muted, #f1f5f9);
  color: var(--ink-soft, #64748b);
  font-weight: 800; font-size: .8rem; text-transform: lowercase;
}
.cp-part.is-right .cp-part__lab{ background: #DCFCE7; color: #15803d; }
.cp-part.is-wrong .cp-part__lab{ background: #FEE2E2; color: #b91c1c; }
.cp-part__ic{ font-size: .95rem; }
.cp-part.is-right .cp-part__ic, .cp-part.is-right .cp-part__verdict{ color: #15803d; }
.cp-part.is-wrong .cp-part__ic, .cp-part.is-wrong .cp-part__verdict{ color: #dc2626; }
.cp-part__verdict{ font-weight: 800; font-size: .95rem; }
.cp-part__ans{
  margin-left: auto; font-size: .95rem; color: var(--ink, #0f172a);
  background: #ECFDF5; border: 1px solid #A7F3D0;
  border-radius: 8px; padding: .15rem .55rem;
}

/* The working folds; the verdict and the answer never do. Folding was asked
   for because the Next button was pushed off the screen — that is a HEIGHT
   problem, and the numbered steps are what cost the height. Hiding the answer
   as well made the panel read as empty. */
.cp-why{ margin-top: .5rem; }
.cp-why > summary{
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .86rem; font-weight: 700;
  color: var(--ink-soft, #64748b);
  padding: .2rem 0;
}
.cp-why > summary::-webkit-details-marker{ display: none; }
.cp-why > summary:hover{ color: var(--ink, #0f172a); }
.cp-why > summary i{ transition: transform .18s ease; }
.cp-why[open] > summary i{ transform: rotate(90deg); }
.cp-why--solo{ margin-top: .7rem; }

/* The working, always visible once the box is open. */
.cp-why__body{
  margin-top: .55rem; padding: .75rem .9rem;
  background: var(--surface-muted, #f6f7f9);
  border-radius: 10px;
  font-size: .93rem; line-height: 1.6;
  color: var(--ink, #0f172a);
}

/* ---- Corrected paper: content width -------------------------------------
   Every existing rule for .app-content is written `.app-main > .app-content`.
   This page's shell is .main + .page, so NONE of them matched and the column
   ran edge to edge. Match the parent it actually has. */
.page > .app-content{ padding: 0; max-width: 1200px; margin: 0 auto; }

/* .page already supplies the outer gutters, so the inner padding stays at 0
   here rather than doubling up. */

/* Part-right grouped question in the nav grid: diagonal, in the same light
   tints the other cells use. A vertical seam read as two separate cells. */
.q-cell.cp-split{
  background: linear-gradient(135deg, #D1FAE5 0, #D1FAE5 50%, #FEE2E2 50%, #FEE2E2 100%);
  border-color: #E2E8F0;
  color: var(--ink, #0f172a);
}

/* The type badge ("Grouped / Comprehension") tells a pupil nothing — it is
   authoring vocabulary. Hidden on the pupil-facing screens only; the admin
   preview still shows it. */
.cp-card .qz-badge, .learn-card .qz-badge{ display: none; }

/* The corrected paper is not the exam — the pupil has finished, so the sidebar
   comes back. .taking-paper hides it to keep an exam distraction-free; this
   page reuses that chrome for its topbar but is no longer an exam.

   .app-shell had NO rules of its own anywhere in this file: the exam player got
   away with it because its sidebar was hidden, so app-main filled the width as
   a plain block. The moment the sidebar appears, the two stack. Give the shell
   the same flex row .app has, and let app-main take the remaining width. */
.app-shell{ display: flex; min-height: 100vh; }
.app-shell > .app-main{ flex: 1; min-width: 0; }
.taking-paper.review-mode .sidebar{ display: flex !important; }

/* NOTE: the .learn-fb--grouped grey override was removed. A grouped question
   now uses the same coloured panel as every other topic — the green and red
   bars on each part carry the per-part detail. */

/* --- Grouped question feedback: one verdict per part ---------------------
   A grouped question is several questions in one box, so the feedback panel
   reports each part on its own — its own answer and its own explanation,
   green where the pupil got it and red where they did not. */
.learn-fb__part{
  border-left: 3px solid transparent;
  padding: .65rem 0 .65rem .85rem;
  margin-bottom: .55rem;
}
.learn-fb__part:last-child{ margin-bottom: 0; }

.learn-fb__part.is-right{ border-left-color: #16a34a; }
.learn-fb__part.is-wrong{ border-left-color: #dc2626; }

.learn-fb__partq{
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: .35rem;
}
.learn-fb__part.is-right .learn-fb__partq{ color: #15803d; }
.learn-fb__part.is-wrong .learn-fb__partq{ color: #dc2626; }

.learn-fb__partq .lab{ color: var(--ink-soft, #64748b); font-weight: 800; }

/* Inside a part the answer line and explanation sit tighter than they do
   for a solo question — three of them stacked otherwise runs very long. */
.learn-fb__part .learn-fb__answer{ margin: .1rem 0 .4rem; font-size: .98rem; }
.learn-fb__part .learn-fb__why{ font-size: .92rem; }

/* ---- corrected paper: the matching answer, as separate pairs ---------------
   `.cp-fb__answer span` is declared twice in this file, and the second one
   (inline-block, green pill, 800) sits far below the first. It outranked the
   pair rules, so every pair ran together on one line inside a single green
   block. These have to come last to win, and the outer span is stripped back
   to a plain wrapper so the pills inside it are the only green.
   Same shape as `.learn-fb__answer` in practice — the two pages show the same
   thing and had drifted apart. */
.cp-fb__answer:has(.cp-fb__pair){
  background:#fff; padding:12px; border-radius:12px;
  font-size:1rem; font-weight:500;
}
.cp-fb__answer:has(.cp-fb__pair) > span{
  display:block; margin-left:0; padding:0;
  background:none; font-weight:500; font-size:1rem;
}
.cp-fb__answer .cp-fb__pair{
  display:block; width:fit-content; margin-left:0;
  padding:.3rem .7rem; border-radius:8px;
  background:rgba(22,163,74,.12); color:#15803d;
  font-weight:500; font-size:1rem;
}
.cp-fb__answer .cp-fb__pair + .cp-fb__pair{ margin-top:.45rem; }

/* Title-less correction fold: the chevron is the whole control. */
.cp-fb-wrap--bare > .cp-fb__title{ min-height:0; padding:0; justify-content:flex-end; }
.cp-fb-wrap--bare > .cp-fb__title .cp-fb__chev{ margin:0; }

/* iOS zooms on focus under 16px and never zooms back. */
@media (max-width:640px){
  input, select, textarea, .form-control, .form-select{ font-size:16px; }
}

/* ---- the mascot, and the one loader -------------------------------------
   Same markup on practice and the corrected paper. The face is small and sits
   beside the words: it colours the moment without becoming the moment. */
/* Size is on the element too — see the note in bright-face.js. Height auto so
   the face keeps its shape whatever width it is given. */
.br-face{
  width:41px; height:auto; object-fit:contain;
  margin-right:.5rem; flex:0 0 auto;
}
.br-face--lg{ width:72px; margin:0; }

/* Smaller on a phone: the verdict line has to fit beside it without wrapping. */
@media (max-width:640px){
  .br-face{ width:28px; margin-right:.4rem; }
  .br-face--lg{ width:56px; }
  .cp-card{ padding:1.1em; }
  .question-card{ border-radius:15px; }
  .cp-fb{ border-radius:15px; }
}
.br-verdict{ min-width:0; }

/* The verdict is one line with the face beside it. It used to wrap into a
   narrow column next to an oversized image. */
.learn-fb__tag, .cp-fb__tag{
  display:flex; align-items:center; gap:0;
  flex-wrap:nowrap; line-height:1.35;
}

.br-load{ text-align:center; padding:2.5rem 1rem; }
.br-load__face{ animation:br-bob 1.4s ease-in-out infinite; }
@keyframes br-bob{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%    { transform:translateY(-10px) rotate(3deg); }
}
.br-load__dots{ display:flex; gap:.35rem; justify-content:center; margin:.7rem 0 .5rem; }
.br-load__dots span{
  width:8px; height:8px; border-radius:50%; background:#22c1d6;
  animation:br-dot 1.1s ease-in-out infinite;
}
.br-load__dots span:nth-child(2){ animation-delay:.15s; }
.br-load__dots span:nth-child(3){ animation-delay:.3s; }
@keyframes br-dot{
  0%,100%{ opacity:.25; transform:translateY(0); }
  40%    { opacity:1;   transform:translateY(-5px); }
}
.br-load__text{ font-size:.95rem; color:#64748B; margin:0; }

/* Nothing moves for anyone who has asked the system to stop animating. */
@media (prefers-reduced-motion:reduce){
  .br-load__face, .br-load__dots span{ animation:none; }
}

/* The feedback panel carries the same heading as the corrected paper. */
.learn-fbhead{ font-weight:800; font-size:1rem; margin:1.1rem 0 .4rem; color:var(--ink,#0f172a); }

/* ---- practice follows the mock exam ------------------------------------
   Practice had its own card, its own tool buttons and its own nav buttons.
   The two screens show the same thing and should not look like two products,
   so these take the exam's values rather than keeping a second set. Values
   copied from .question-card / .q-tool-btn / .btn-nav above. */
@media (max-width:575.98px){
  .learn-card{ padding:1.25rem; }
}

.learn-tools .learn-tool{
  width:38px; height:38px; padding:0; gap:0;
  border-radius:.625rem; background:#fff;
  border:1px solid var(--border,#e2e8f0);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft,#64748b); font-size:1.05rem;
}
.learn-tools .learn-tool:hover{ background:var(--surface-muted,#f1f5f9); color:var(--ink,#0f172a); }
.learn-tools .learn-tool.saved{
  color:var(--cyan-dark,#0e7490); background:var(--cyan-light,#e0f7fb);
  border-color:var(--cyan,#00B8D4);
}
/* Label kept in the markup for screen readers, out of sight on screen. */
.learn-tools .learn-tool span{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.learn-tools .learn-tool i{ margin:0; }

.lbtn{ padding:.7rem 1.35rem; font-size:.92rem; font-weight:600; }
.lbtn.primary{ background:var(--cyan,#00B8D4); border-color:var(--cyan,#00B8D4); color:#fff; }
.lbtn.primary:hover:not(:disabled){ background:var(--cyan-dark,#0e7490); color:#fff; }

/* The paper shows behind the intro popup, blurred and inert, so the pupil can
   see what is coming without reading it. Matches the practice gate, which has
   always blurred rather than hidden. Class removed by showPaper(). */
#examActive.is-waiting{
  filter:blur(3px);
  pointer-events:none;
  user-select:none;
}

/* Bootstrap's backdrop is flat black. Same translucent blur as .quizgate so
   the two intros are one thing, not two. */
.modal-backdrop.show{ opacity:1; background:rgba(216,219,225,.28); }
body.modal-open .modal-backdrop.show{
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

@media (prefers-reduced-motion:reduce){
  #examActive.is-waiting{ filter:none; opacity:.35; }
}

/* Erase belongs to an unanswered question. Once the answer is locked and
   marked it can do nothing, and a dead button next to the verdict is noise. */
.qz-locked .qz-erase-row{ display:none; }

/* ---- exam intro popup ---------------------------------------------------
   The Start button takes the turquoise used on the question screens, not the
   darker cyan, so the intro and the paper read as one flow. Scoped to the
   intro: `.btn-early` is also the Early submission button, which should stay
   the quieter colour. */
#introModal .btn-early{
  background:var(--cyan,#00B8D4);
  border-radius:100px;
  padding:.85rem 1rem;
  font-size:1rem;
}
#introModal .btn-early:hover{ background:var(--cyan-dark,#0e7490); }

#introModal .modal-content{ border-radius:20px; border:0; }
#introModal .modal-body{ padding:2rem 1.75rem 1.6rem; }
#introModal .intro-icon{
  width:64px; height:64px; font-size:1.8rem;
  background:var(--cyan-light,#e0f7fb); color:var(--cyan-dark,#0e7490);
}
#introModal h4{ font-size:1.45rem; }
#introModal .intro-facts{ margin:1.3rem 0 1.5rem; }

/* Shown when no subject has been built out in the content tree yet. */
.nav-sub__empty{ display:block; padding:.4rem 0 .4rem 2.1rem; font-size:.85rem; color:var(--ink-muted,#64748b); }

/* A subject with no validated questions is shown but cannot be picked: hiding
   it would leave the pupil wondering where it went. */
.mx-scope.is-off{ opacity:.5; cursor:not-allowed; }
.mx-scope.is-off:hover{ border-color:var(--border,#e2e8f0); box-shadow:none; transform:none; }

/* ---- bottom nav: More ---------------------------------------------------
   The bar is display:none until the mobile breakpoint, so everything here is
   scoped to it rather than duplicating that media query's rules. */
.bottom-nav .bn-more{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:.68rem; font-weight:600; color:var(--ink-muted,#64748b);
  padding:.35rem 0; background:none; border:0; cursor:pointer; font-family:inherit;
}
.bottom-nav .bn-more i{ font-size:1.15rem; }
.bottom-nav .bn-more.is-active{ color:var(--cyan-dark,#0e7490); }

.bn-sheet{
  position:fixed; inset:0; z-index:70;
  background:rgba(15,23,42,.28);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  display:flex; align-items:flex-end;
}
.bn-sheet__panel{
  width:100%; background:var(--surface,#fff);
  border-radius:18px 18px 0 0;
  padding:.6rem .75rem calc(.75rem + 64px);   /* clear the bar underneath */
  box-shadow:0 -8px 30px rgba(15,23,42,.14);
}
.bn-sheet__grip{
  width:38px; height:4px; border-radius:99px; background:#CBD5E1;
  margin:.35rem auto .7rem;
}
.bn-sheet__panel a{
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem .6rem; border-radius:10px;
  font-size:.95rem; font-weight:600; color:var(--ink,#0f172a);
}
.bn-sheet__panel a i{ font-size:1.15rem; color:var(--ink-muted,#64748b); }
.bn-sheet__panel a.is-active{ color:var(--cyan-dark,#0e7490); background:var(--cyan-light,#e0f7fb); }
.bn-sheet__panel a.is-active i{ color:var(--cyan-dark,#0e7490); }
.bn-sheet__panel a:hover{ text-decoration:none; background:var(--surface-muted,#f1f5f9); }

body.bn-sheet-open{ overflow:hidden; }

/* The sheet belongs to the bar, so it goes with it on wider screens. */
@media (min-width:992px){ .bn-sheet{ display:none !important; } }

/* ---- the question grid sheet on mobile ----------------------------------
   `.sheet-tall` is on both offcanvas panels but was never defined anywhere,
   so Bootstrap's default 30vh applied: on a 40-question paper the grid was
   cut off with no way to scroll to the last rows, and Early submission sat
   below the fold. */
.offcanvas-bottom.sheet-tall{
  height:auto;
  max-height:86vh;
  border-radius:18px 18px 0 0;
  display:flex; flex-direction:column;
}
.offcanvas-bottom.sheet-tall .offcanvas-header{
  padding:.9rem 1.1rem .4rem;
  border-bottom:1px solid var(--border,#e2e8f0);
}
.offcanvas-bottom.sheet-tall .offcanvas-body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:1rem 1.1rem calc(1rem + 64px);   /* clear the bottom bar */
}
/* The grid is the point of the sheet, so give it room to breathe. */
.offcanvas-bottom.sheet-tall .q-grid{ grid-template-columns:repeat(5,1fr); gap:.55rem; }
@media (max-width:380px){
  .offcanvas-bottom.sheet-tall .q-grid{ grid-template-columns:repeat(4,1fr); }
}

/* The face carries a right margin for the verdict line beside it, which threw
   it off centre in the loader where it sits alone above the dots. */
.br-load__face{ display:flex; justify-content:center; }
.br-load__face .br-face{ margin:0; }

/* Mobile bar: active item colour. */
.bottom-nav a.is-active,
.bottom-nav .bn-more.is-active{ color:#09B5C7; }
.bn-sheet__panel a.is-active,
.bn-sheet__panel a.is-active i{ color:#09B5C7; }

/* Practice feedback fold, matching .cp-fb-wrap on the corrected paper. */
.learn-fbwrap{ margin-top:1.1rem; }
.learn-fbwrap > .learn-fbhead{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.4rem;
  font-weight:800; font-size:1rem; margin:0 0 .4rem;
  color:var(--ink,#0f172a);
}
.learn-fbwrap > .learn-fbhead::-webkit-details-marker{ display:none; }
.learn-fbchev{ margin-left:auto; transition:transform .15s; color:var(--ink-muted,#64748b); }
.learn-fbwrap[open] .learn-fbchev{ transform:rotate(180deg); }

/* ---- popups ------------------------------------------------------------
   The intro was styled to the app and every other popup was stock Bootstrap
   beside it — blue buttons, square corners. One shell for all of them.
   `#introModal` keeps its own sizing rules above; these apply to the rest. */
.br-modal .modal-content{ border-radius:20px; border:0; }
.br-modal .modal-body{ padding:2rem 1.75rem 1.6rem; }
.br-modal .intro-icon{
  width:64px; height:64px; font-size:1.8rem;
  background:var(--cyan-light,#e0f7fb); color:var(--cyan-dark,#0e7490);
}
.br-modal h4{ font-size:1.35rem; }
.br-modal .btn-early{
  background:var(--cyan,#00B8D4);
  border-radius:100px; padding:.85rem 1rem; font-size:1rem;
  margin-top:1.3rem;
}
.br-modal .btn-early:hover{ background:var(--cyan-dark,#0e7490); }
.br-modal__note{ margin:.6rem 0 0; }

/* The quiet way out. A second filled button would compete with Submit. */
.br-modal__back{
  border:0; background:none; cursor:pointer; font:inherit;
  font-size:.9rem; font-weight:600; color:var(--ink-muted,#64748b);
  padding:.35rem .6rem;
}
.br-modal__back:hover{ color:var(--ink,#0f172a); }

/* ---- one feedback family ------------------------------------------------
   Practice and the corrected paper build the panel from the same function
   now, so they use the same classes: cp-fb__*. The old learn-fb__* rules are
   left in place but nothing emits them any more.

   The panel itself only needed the bits the practice screen had and the
   corrected paper did not — it shows one question at a time in a live card,
   the other lists them inside their own cards. */
#fb.cp-fb{ margin-top:0; display:none; border-radius:14px; padding:1.2rem 1.3rem; }
#fb.cp-fb.show{ display:block; animation:fbIn .25s ease; }

/* The corrected paper's tones, reused. `.cp-fb--blank` and `--grouped` come
   along for free rather than being reinvented for practice. */

/* ---- the working, read as steps -----------------------------------------
   Explanations arrive as one HTML blob with <br> between numbered steps, so
   they came out as a wall of text in a grey box. Give the lines room, and let
   the final "Answer:" line stand apart from the working above it. */
.cp-why__body{
  margin-top:.6rem;
  padding:1rem 1.1rem;
  background:#fff;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  font-size:.95rem;
  line-height:1.85;
}
.cp-why__body p{ margin:0 0 .7rem; }
.cp-why__body p:last-child{ margin-bottom:0; }
.cp-why__body br{ content:""; display:block; margin-bottom:.45rem; }
.cp-why__body ol, .cp-why__body ul{ margin:.2rem 0 .7rem; padding-left:1.3rem; }
.cp-why__body li{ margin-bottom:.4rem; }
.cp-why__body strong, .cp-why__body b{ font-weight:800; }

/* The last line of a worked solution is nearly always "Answer: 35°". It is
   the line the pupil is looking for, so it gets the same green treatment as
   the answer box above rather than being buried at the foot of a paragraph. */
.cp-why__body p:last-child strong:only-child,
.cp-why__body strong:last-child{
  display:inline-block; margin-top:.35rem;
  padding:.25rem .7rem; border-radius:8px;
  background:rgba(22,163,74,.12); color:#15803d;
}

/* The fold itself reads as a control, not a footnote. */
.cp-why > summary{ font-size:.9rem; }
.cp-why--solo{ margin-top:1rem; }

/* ---- rail mode: the nav while a pupil is working -------------------------
   Mid-quiz the sidebar is not navigation, it is an exit. Shrunk to an icon
   rail so the question owns the screen, with the label kept under each icon
   so nothing has to be guessed from a glyph. `.app.is-rail` covers practice,
   `.app-shell.is-rail` the exam player. */
.app.is-rail > .sidebar,
.app-shell.is-rail > .sidebar{
  width:var(--sidebar-w); padding:var(--s-4) .45rem;
  align-items:stretch;
  /* `transform` has to be listed HERE as well as in the mobile drawer block.
     The sidebar script adds `is-rail` to `.app` on every page, so this rule
     applies everywhere, and `.app.is-rail > .sidebar` outranks the plain
     `.sidebar` inside `@media (max-width:860px)` — a media query adds no
     specificity. Declaring only `width` here replaced the drawer's transform
     transition with nothing, so the menu snapped open instead of sliding. */
  transition:width .18s ease, transform .26s cubic-bezier(.32,.72,0,1);
}
.app.is-rail.rail-open > .sidebar,
.app-shell.is-rail.rail-open > .sidebar{ padding:var(--s-5) var(--s-3); }

.is-rail .sidebar__brand{ padding:0 0 var(--s-3); text-align:center; }
.is-rail .sidebar__brand img{ object-fit:contain; }

.is-rail .sidebar__nav{ gap:.15rem; }

.is-rail .nav-link{
  flex-direction:column; align-items:center; justify-content:center;
  gap:.28rem; padding:.6rem .2rem; text-align:center;
  font-size:.63rem; font-weight:700; line-height:1.15;
  border-radius:12px;
}
.is-rail .nav-link i{ font-size:1.25rem; margin:0; }

/* The groups' chevrons and their sub-lists have nowhere to go in 76px, and a
   pupil mid-question is not browsing chapters anyway. */
.is-rail:not(.rail-open) .nav-sub,
.is-rail:not(.rail-open) .caret{ display:none; }
.is-rail .nav-parent{ flex-direction:column; align-items:center; gap:.28rem; }

.is-rail .nav-link--foot{ margin-top:auto; }

/* Active item as a filled tile rather than a side bar, which reads better on
   a narrow column. */
.is-rail .nav-link.is-active{
  background:var(--cyan-light); color:var(--cyan-dark);
}



/* ---- rail mode, continued -----------------------------------------------
   The width is a variable so anything that has to clear the sidebar (the quiz
   gate, and any full-screen overlay after it) follows it automatically. */
:root{ --sidebar-w:240px; }
.app.is-rail, .app-shell.is-rail{ --sidebar-w:76px; }
.app.is-rail.rail-open, .app-shell.is-rail.rail-open{ --sidebar-w:240px; }

.is-rail > .sidebar{ background:#EEF6FE; border-right-color:#DCEAF8; }

/* Pastel per item. A column of identical grey glyphs is hard to aim at; colour
   is what makes the icons findable at a glance. */
.is-rail .nav-link i{ color:#94A3B8; }
.is-rail .nav-link[href="/student/home"] i{ color:#38BDF8; }
.is-rail .nav-link[href="/student/study-plan"] i{ color:#A78BFA; }
.is-rail .nav-group .nav-link i{ color:#34D399; }
.is-rail .nav-link[href="/student/mock-exams"] i{ color:#FB923C; }
.is-rail .nav-link[href="/student/exam-papers"] i{ color:#F472B6; }
.is-rail .nav-link[href="/student/progress"] i{ color:#22D3EE; }
.is-rail .nav-link[href="/student/saved"] i{ color:#FBBF24; }
.is-rail .nav-link[href="/student/help"] i{ color:#94A3B8; }
.is-rail .nav-link.is-active{ background:#fff; }

/* Brand: wordmark when wide, mark alone when narrow. */
.sidebar__logomark{ display:none; }
.is-rail .sidebar__logo{ display:none; }
.is-rail .sidebar__logomark{ display:block; width:34px; height:auto; margin:0 auto; }
.is-rail.rail-open .sidebar__logo{ display:block; }
.is-rail.rail-open .sidebar__logomark{ display:none; }

.rail-expand{
  display:none; margin-top:.4rem; width:100%;
  align-items:center; justify-content:center; gap:.4rem;
  border:1px solid #DCEAF8; background:#fff; color:var(--ink-muted);
  border-radius:12px; padding:.55rem .3rem; cursor:pointer;
  font:inherit; font-size:.63rem; font-weight:700;
}
.rail-expand:hover{ color:var(--ink); border-color:#BBD7F0; }
.rail-expand span{ display:none; }
.is-rail .rail-expand{ display:flex; }
.is-rail.rail-open .rail-expand span{ display:inline; font-size:.85rem; }
.is-rail.rail-open .rail-expand i{ transform:rotate(180deg); }

/* Widened again: back to the normal list, on the rail's background. */
.is-rail.rail-open .nav-link{
  flex-direction:row; align-items:center; gap:.75rem;
  padding:.6rem .8rem; font-size:.92rem; text-align:left; border-radius:10px;
}
.is-rail.rail-open .nav-link i{ font-size:1.05rem; }
.is-rail.rail-open .nav-parent{ flex-direction:row; align-items:center; gap:.75rem; }
.is-rail.rail-open .sidebar__brand{ text-align:left; }

/* ---- one menu everywhere ------------------------------------------------
   The rail was only on practice and the exam player, which left the app with
   two different sidebars. Same one on every page now: light background,
   pastel icons, and the same narrow/wide control. Only the starting width
   differs — narrow while working, wide while navigating. */
.sidebar{ background:#EEF6FE; border-right-color:#DCEAF8; }

.nav-link i{ color:#94A3B8; }
.nav-link[href="/student/home"] i{ color:#38BDF8; }
.nav-link[href="/student/study-plan"] i{ color:#A78BFA; }
.nav-group > .nav-link i{ color:#34D399; }
.nav-link[href="/student/mock-exams"] i{ color:#FB923C; }
.nav-link[href="/student/exam-papers"] i{ color:#F472B6; }
.nav-link[href="/student/progress"] i{ color:#22D3EE; }
.nav-link[href="/student/saved"] i{ color:#FBBF24; }
.nav-link[href="/student/help"] i{ color:#94A3B8; }
.nav-link.is-active{ background:#fff; }

/* Widened: an ordinary left-aligned list. The logo had no width of its own, so
   it collapsed to a thumbnail once the rail rules took over the brand block. */
.is-rail.rail-open .sidebar__logo{
  display:block; width:100%; max-width:158px; height:auto;
}
.is-rail.rail-open .sidebar__brand{ padding:0 var(--s-2) var(--s-4); }
.is-rail.rail-open .sidebar__nav{ gap:.15rem; }
.is-rail.rail-open .nav-link{ justify-content:flex-start; }

/* The control sits at the foot of the menu in both states. */
.rail-expand{ margin-top:.6rem; }
.is-rail.rail-open .rail-expand{
  justify-content:flex-start; gap:.6rem; padding:.6rem .8rem; text-align:left;
}

/* Menu rows: separated rather than boxed, and a lighter weight than the rest
   of the app's headings so the nav does not shout over the page. */
.is-rail.rail-open .nav-link{
  flex-direction:row;
  align-items:center;
  gap:.75rem;
  padding:.75rem .6rem .75rem .3rem;
  font-size:.92rem;
  text-align:left;
  border-radius:0;
  border-bottom:1px dotted #9bb7d4;
}
.nav-link, .nav-sub a, .rail-expand{ font-weight:500; }
.nav-link.is-active, .nav-sub a.is-active{ font-weight:500; }

/* ---- widths by screen ---------------------------------------------------
   Below 992px there is not room for a 240px menu beside the work, so it is
   narrow and the widen control goes away — the choice would not survive the
   next page anyway. Below 860px the sidebar is already a slide-in drawer, and
   a 76px drawer would be pointless, so labels come back there. */
@media (max-width:991.98px){
  .app.is-rail, .app-shell.is-rail,
  .app.is-rail.rail-open, .app-shell.is-rail.rail-open{ --sidebar-w:76px; }
  .is-rail .rail-expand{ display:none; }

  /* `.rail-open` is also stripped in JS on resize; these carry the same
     specificity so the narrow layout wins either way. */
  .is-rail.rail-open .nav-link,
  .is-rail .nav-link{
    flex-direction:column; align-items:center; justify-content:center;
    gap:.28rem; padding:.6rem .2rem; text-align:center;
    font-size:.63rem; line-height:1.15; border-radius:12px; border-bottom:0;
  }
  .is-rail.rail-open .nav-link i,
  .is-rail .nav-link i{ font-size:1.25rem; margin:0; }
  .is-rail .nav-sub, .is-rail .caret,
  .is-rail.rail-open .nav-sub, .is-rail.rail-open .caret{ display:none; }
  .is-rail.rail-open .nav-parent,
  .is-rail .nav-parent{ flex-direction:column; align-items:center; gap:.28rem; }
  .is-rail.rail-open .sidebar__logo,
  .is-rail .sidebar__logo{ display:none; }
  .is-rail.rail-open .sidebar__logomark,
  .is-rail .sidebar__logomark{ display:block; }
  .is-rail.rail-open > .sidebar,
  .is-rail > .sidebar{ padding:var(--s-4) .45rem; }
}

@media (max-width:860px){
  .app.is-rail, .app-shell.is-rail,
  .app.is-rail.rail-open, .app-shell.is-rail.rail-open{ --sidebar-w:240px; }
  .is-rail > .sidebar{ width:240px; padding:var(--s-5) var(--s-3); }
  .is-rail .nav-link{
    flex-direction:row; align-items:center; justify-content:flex-start;
    gap:.75rem; padding:.75rem .6rem .75rem .3rem; text-align:left;
    font-size:.92rem; border-radius:0; border-bottom:1px dotted #9bb7d4;
  }
  .is-rail .nav-link i{ font-size:1.05rem; }
  .is-rail .nav-parent{ flex-direction:row; align-items:center; gap:.75rem; }
  .is-rail .caret{ display:inline; }
  .is-rail .nav-group.open .nav-sub{ display:flex; }
  .is-rail .sidebar__logo{ display:block; width:100%; max-width:158px; height:auto; }
  .is-rail .sidebar__logomark{ display:none; }
  .is-rail .sidebar__brand{ text-align:left; padding:0 var(--s-2) var(--s-4); }
}

/* The mark has to be given a size of its own: `.sidebar__brand img` sets
   height 40px / width auto, and without this the mark renders at full size. */
.is-rail .sidebar__logomark{ width:auto; height:34px; margin:0 auto; }

/* Nav rows sit at 500 everywhere, active included. */
.sidebar .nav-link,
.sidebar .nav-link.is-active,
.sidebar .nav-sub a,
.sidebar .nav-sub a.is-active,
.rail-expand{ font-weight:500; }

/* ---- the walkthrough ----------------------------------------------------
   Runs once on first login. Bright colours and a big emoji, because the
   audience is ten and the alternative is a grey tooltip nobody reads. */
.tour{ position:fixed; inset:0; z-index:3000; }
.tour__veil{ position:absolute; inset:0; }

/* The spotlight is a transparent box with an enormous shadow — everything
   outside it is dimmed, no clip path or canvas needed. */
.tour__spot{
  position:fixed; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(9,24,39,.62), 0 0 0 3px #FFD166;
  transition:top .28s cubic-bezier(.4,0,.2,1), left .28s cubic-bezier(.4,0,.2,1),
             width .28s, height .28s;
}
.tour__spot[hidden]{ display:none; }


.tour__bubble{
  position:fixed; width:min(330px, calc(100vw - 24px));
  background:#fff; border-radius:20px; padding:1.5rem 1.4rem 1.1rem;
  box-shadow:0 20px 50px rgba(9,24,39,.28);
  border:3px solid #FFD166;
  animation:tourPop .26s cubic-bezier(.34,1.56,.64,1);
}
/* Nothing to point at: sit in the middle of the screen. */
.tour.is-centre .tour__bubble{ top:50%; left:50%; transform:translate(-50%,-50%); animation:none; }
.tour.is-centre .tour__veil{ background:rgba(9,24,39,.62); }
@keyframes tourPop{ from{ opacity:0; transform:scale(.94) } to{ opacity:1 } }

.tour__icon{ width:52px; height:52px; margin-bottom:.6rem; }
.tour__icon svg{ width:100%; height:100%; display:block; }
.tour__title{ font-size:1.2rem; font-weight:800; margin:0 0 .4rem; color:var(--ink,#0f172a); }
.tour__text{ font-size:.95rem; line-height:1.6; color:var(--ink-soft,#334155); margin:0 0 1.1rem; }

.tour__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.tour__dots{ display:flex; gap:.3rem; }
.tour__dots span{ width:7px; height:7px; border-radius:50%; background:#E2E8F0; }
.tour__dots span.is-on{ background:#00B8D4; width:20px; border-radius:99px; }
.tour__acts{ display:flex; align-items:center; gap:.5rem; }

.tour__skip{
  border:0; background:none; cursor:pointer; font:inherit;
  font-size:.85rem; font-weight:600; color:var(--ink-muted,#64748b); padding:.4rem .5rem;
}
.tour__skip:hover{ color:var(--ink,#0f172a); }
.tour__next{
  border:0; cursor:pointer; font:inherit;
  background:#00B8D4; color:#fff; font-weight:800; font-size:.92rem;
  border-radius:100px; padding:.6rem 1.3rem;
  box-shadow:0 6px 16px rgba(0,184,212,.35);
}
.tour__next:hover{ background:#0891B2; }

@media (prefers-reduced-motion:reduce){
  .tour__spot, .tour__bubble{ transition:none; animation:none; }
}

.tour__back{
  border:0; background:none; cursor:pointer; font:inherit;
  font-size:.85rem; font-weight:700; color:var(--cyan-dark,#0891B2); padding:.4rem .5rem;
}
.tour__back[hidden], .tour__skip[hidden]{ display:none; }

/* Phone: the bubble spans the screen, so the three buttons need room. */
@media (max-width:699.98px){
  .tour__bubble{ width:calc(100vw - 24px); padding:1.2rem 1.15rem 1rem; }
  .tour__icon{ width:44px; height:44px; }
  .tour__title{ font-size:1.08rem; }
  .tour__text{ font-size:.9rem; margin-bottom:.9rem; }
  .tour__foot{ gap:.6rem; }
  .tour__next{ padding:.55rem 1.05rem; }
}

/* Menu rows: dashed rule, slightly deeper indent. */
.is-rail.rail-open .nav-link{
  flex-direction:row;
  align-items:center;
  gap:.75rem;
  padding:.75rem .6rem .75rem .45rem;
  font-size:.92rem;
  text-align:left;
  border-radius:0;
  border-bottom:1px dashed #c2d7ec;
}

/* The per-page guide button, beside the topbar's help icon. */
.tour-open{ color:#0891B2; }
.tour-open:hover{ background:var(--cyan-light,#e0f7fb); color:#0e7490; border-color:var(--cyan-light,#e0f7fb); }

/* ---- mock exam scope cards ----------------------------------------------
   Two plain white boxes with a small cyan glyph read as a form. These are the
   only choice on the screen, so they get room, a coloured icon disc each, and
   a check that appears when picked. */
.mx-scopes{ gap:1rem; }

.mx-scope{
  gap:.55rem;
  padding:2.1rem 1.4rem 1.8rem;
  border:2px solid var(--border,#e2e8f0);
  border-radius:20px;
  position:relative;
  overflow:hidden;
}

/* The disc sits behind the icon and carries the colour. */
.mx-scope i{
  width:74px; height:74px; margin:0 auto .55rem;
  display:flex; align-items:center; justify-content:center;
  font-size:2.1rem; border-radius:22px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
/* The card stays white: a tinted card reads as already chosen, and one of
   these has to be picked before Next does anything. The colour lives on the
   icon disc only. */
.mx-scope:nth-child(1) i{ background:#E0F2FE; color:#0284C7; }
.mx-scope:nth-child(2) i{ background:#FEF3C7; color:#D97706; }
.mx-scope:nth-child(3) i{ background:#DCFCE7; color:#059669; }

.mx-scope b{ font-size:1.35rem; letter-spacing:-.01em; line-height:1.25; }
.mx-scope span{ font-size:.95rem; line-height:1.5; max-width:24ch; margin:0 auto; }

.mx-scope:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(15,23,42,.09); }
.mx-scope:hover i{ transform:scale(1.06) rotate(-3deg); }

/* Picked: the border and a tick, rather than a wash that hides the icon. */
.mx-scope.is-on{
  border-color:var(--cyan,#00B8D4);
  background:var(--cyan-light,#e0f7fb);
  box-shadow:0 10px 26px rgba(0,184,212,.18);
}
.mx-scope.is-on::after{
  content:"\F26E";                      /* bi-check-lg */
  font-family:"bootstrap-icons";
  position:absolute; top:.7rem; right:.8rem;
  width:26px; height:26px; border-radius:50%;
  background:var(--cyan,#00B8D4); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
}

@media (max-width:640px){
  .mx-scope{ padding:1.1rem; gap:.9rem; }
  .mx-scope i{ width:56px; height:56px; font-size:1.6rem; border-radius:18px; margin:0; }
  .mx-scope b{ font-size:1.15rem; }
  .mx-scope span{ font-size:.9rem; }
  .mx-scope span{ max-width:none; margin:0; }
  .mx-scope.is-on::after{ top:50%; right:.9rem; transform:translateY(-50%); }
}

/* The question above the cards, given the room it deserves. */
.mx-q{
  font-size:1.6rem;
  font-weight:800;
  line-height:1.2;
  margin:1.6rem 1rem;
  letter-spacing:-0.02em;
}

/* ---- wizard trail -------------------------------------------------------
   Four screens with no sense of where you are in them. The trail names the
   steps, marks the ones already done, and lets you jump back to any of them —
   forward stays closed, since a later step needs the earlier answers. */
.mx-trail{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.15rem .35rem;
  margin:0 0 .4rem;
}
.mx-trail__step{
  display:inline-flex; align-items:center; gap:.4rem;
  border:0; background:none; font:inherit; padding:.3rem .55rem;
  border-radius:99px; color:var(--ink-light,#94A3B8);
  font-size:.82rem; font-weight:600; cursor:default;
}
.mx-trail__step .n{
  width:20px; height:20px; border-radius:50%;
  background:var(--surface-muted,#f1f5f9); color:var(--ink-light,#94A3B8);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800;
}
/* Green, not the app's cyan. Cyan is the colour of things you press — buttons,
   the picked card, the Next arrow. Progress is a different kind of fact, so it
   gets a colour of its own and stops competing with the controls beside it. */
.mx-trail__step.is-done{ color:#047857; cursor:pointer; }
.mx-trail__step.is-done .n{ background:#10B981; color:#fff; }
.mx-trail__step.is-done .n::before{ content:"\F26E"; font-family:"bootstrap-icons"; font-size:.72rem; }
.mx-trail__step.is-done .n{ font-size:0; }          /* the tick replaces the number */
.mx-trail__step.is-done:hover{ background:#ECFDF5; }
.mx-trail__step.is-now{ color:#065F46; font-weight:800; }
.mx-trail__step.is-now .n{ background:#059669; color:#fff; box-shadow:0 0 0 4px #D1FAE5; }
.mx-trail__sep{ color:#CBD5E1; font-size:.8rem; }

@media (max-width:640px){
  .mx-trail__step{ padding:.25rem .3rem; font-size:.72rem; gap:.3rem; }
  .mx-trail__step .n{ width:18px; height:18px; font-size:.64rem; }
  .mx-trail__sep{ display:none; }
}

/* ---- chapter cards ------------------------------------------------------
   Rebuilt to the reference: number in a circle riding the top-left corner,
   status pill on the right, the title in its own amber block, illustration,
   then performance and the two actions. */
.topic-card{
  padding:1.5rem 1.15rem 1.15rem;
  border:1.5px solid #D5E7F7;
  border-radius:18px;
  box-shadow:0 4px 16px rgba(37,99,235,.08);
  overflow:visible;
}
.topic-card:hover{ border-color:#B9D9F4; box-shadow:0 14px 30px rgba(37,99,235,.14); }

/* The number sits ON the corner, half outside the card. */
.tc-num{
  top:1px; left:1px;
  width:32px; height:32px; border-radius:50%;
  font-size:.8rem;
  font-weight:700;
  background:#2BC4D8; box-shadow:0 4px 10px rgba(43,196,216,.45);
  border:2px solid #97f3ff;
}

.tc-pill{
  top:-11px; right:16px;
  padding:.3rem .8rem; font-size:.72rem; font-weight:700;
  box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.tc-pill.st-none{ background:#EEF2F6; color:#64748B; }

/* The title is a block of its own, not loose text. */
.tc-title{
  background:#FFF7DD;
  color:#0076AF;
  border-radius:10px;
  padding:10px .8rem;
  font-size:1rem;
  font-weight:700;
  /* Two lines' worth, so a one-line title does not shorten its card. */
  min-height:58px;
  display:flex; align-items:center; justify-content:center;
  margin:3px 0 .9rem;
  line-height:1.15;
}

/* The illustration takes the slack, so the rows below it line up whatever the
   title's length. */
.tc-img{ width:118px; height:118px; margin:.7rem 0 .9rem; flex:0 0 auto; }
.topic-card > .tc-perf{ margin-top:auto; }

.tc-perf{ margin-bottom:1rem; }
.tc-perf__lbl{ font-size:.8rem; font-weight:600; color:#475569; }
.tc-perf__pct{ font-size:.95rem; font-weight:800; color:#1BA9C4; }
.tc-perf__pct.st-priority{ color:#e01b1b; }
.tc-perf__pct.st-keep{     color:#b26a00; }
.tc-perf__pct.st-well{     color:#12855a; }
.tc-bar{ height:10px; background:#EDF1F5; margin:.45rem 0 0; }

.tc-actions{ gap:.6rem; }
.tc-btn{
  padding:.62rem .5rem; border-radius:12px;
  font-size:.9rem; font-weight:700;
}
.tc-btn--notes{ background:#FDF0E1; color:#C87F2E; border-color:#F7DEC2; }
.tc-btn--notes:hover{ background:#FBE6CE; color:#A9661F; }
.tc-btn--go{ background:#D6F6FD; color:#0E8FA8; border-color:#BFEEF8; }
.tc-btn--go:hover{ background:#0E8FA8; color:#fff; border-color:#0E8FA8; }
.tc-btn--go.is-disabled,
.tc-btn--go.is-disabled:hover{
  background:#EFF2F6; color:#A9B6C4; border-color:#E6EBF1;
}

@media (max-width:640px){
  .tc-title{ font-size:.92rem; padding:.6rem .7rem; }
  .tc-img{ width:96px; height:96px; }
}

/* "Not started" sits where the percentage would, so the row keeps its height
   without claiming a score of zero. */
.tc-perf--none{ display:block; }
.tc-perf--none .tc-perf__na{ float:right; font-size:0.8rem; font-weight:400; color:#94A3B8; }

.tc-perf{ margin-bottom:1.4rem; }
.tc-perf__pct.st-prog{ color:#0369A1; padding:1px 5px; border-radius:2px; }
.tc-bar{ margin:.45rem 0 0; }
.topic-card{ border-radius:16px; }
.tc-pill{ font-weight:600; box-shadow:0 0 3px rgba(15,23,42,.06); }

@media (max-width:640px){
  .topic-card .tc-num{
    top:3px; left:4px;
    width:26px; height:26px;
    font-size:.72rem; border-radius:50px;
  }
  .tc-title{
    font-size:.92rem; padding:11px 15px; min-height:auto;
    text-align:left; justify-content:left; margin-bottom:12px;
  }
  .tc-actions{ grid-area:act; margin-top:0; }
}

/* ---- chapter filters ----------------------------------------------------
   Each pill carries its count and its state's colour, so the row doubles as a
   summary of the subject: three red means three chapters need work. */
.subj-filters{ display:flex; gap:.45rem; flex-wrap:wrap; }
.subj-filter{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1.5px solid var(--border,#e2e8f0); background:#fff;
  color:var(--ink-soft,#334155);
  border-radius:99px; padding:.4rem .75rem;
  font:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
  transition:all .14s;
}
.subj-filter .n{
  font-size:.72rem; font-weight:800; line-height:1;
  background:var(--surface-muted,#f1f5f9); color:var(--ink-muted,#64748b);
  border-radius:99px; padding:.18rem .4rem; min-width:1.35em; text-align:center;
}
.subj-filter:hover{ border-color:#CBD5E1; }

.subj-filter.st-priority .n{ background:#FDE3E3; color:#E01B1B; }
.subj-filter.st-keep .n{     background:#FFF1DA; color:#B26A00; }
.subj-filter.st-prog .n{     background:#E0F2FE; color:#0369A1; }
.subj-filter.st-well .n{     background:#DFF5E8; color:#12855A; }

/* Selected: the pill takes its own colour, so what you are looking at is
   obvious without reading it. */
.subj-filter.is-on{ background:var(--ink,#0f172a); border-color:var(--ink,#0f172a); color:#fff; }
.subj-filter.is-on .n{ background:rgba(255,255,255,.22); color:#fff; }
.subj-filter.st-priority.is-on{ background:#E01B1B; border-color:#E01B1B; }
.subj-filter.st-keep.is-on{     background:#E5B25E; border-color:#D2932B; }
.subj-filter.st-prog.is-on{     background:#A5D2F0; border-color:#70ACCD; }
.subj-filter.st-well.is-on{     background:#12855A; border-color:#12855A; }
.subj-filter.st-none.is-on{     background:#B4B8BE; border-color:#A8B0BC; }
.subj-filter[data-f="all"].is-on{ background:#2bc4d8; border-color:#0facc0; color:#fff; }
/* Amber fill, dark text: a pale pill with white text is unreadable. */
.subj-filter[data-f="in_progress"].is-on{ background:#fff1da; border-color:#ffe0ad; color:#272726; }

/* Five pills do not wrap kindly on a phone, so they scroll sideways instead. */
@media (max-width:640px){
  .subj-filters{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:.35rem; margin:0 -.2rem; scrollbar-width:none;
  }
  .subj-filters::-webkit-scrollbar{ display:none; }
  .subj-filter {
  border: 1.5px solid var(--border,#e2e8f0);
  background: #fff;
  color: var(--ink-soft,#334155);
  font-weight: 600;
  font-size: .8rem;
  padding: .4rem .75rem;
  border-radius: 99px;
  cursor: pointer;
  transition: all .14s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
}

/* The pale selected pills need a darker count chip than the white-on-dark ones. */
.subj-filter[data-f="in_progress"].is-on .n,
.subj-filter.st-prog.is-on .n,
.subj-filter.st-keep.is-on .n{ background:rgba(0,0,0,.12); color:#272726; }

/* The loader stands in for a row of buttons, so it must not tower over the
   card it sits in. */
.quizgate__lens .br-load,
.mx-lens .br-load{ padding:1.1rem 0 .6rem; }
.quizgate__lens .br-load__face,
.mx-lens .br-load__face{ display:none; }
.quizgate__lens .br-load__text,
.mx-lens .br-load__text{ font-size:.88rem; }

/* ---- dashboard ----------------------------------------------------------
   Each section on its own tint: subjects mint, study plan lavender, needs
   attention peach. Three white cards in a row read as one long list; the
   colour is what separates "here is everything" from "do this next" from
   "this needs work". */
/* `.home2.page-card.stack > section.block` sets a white glass background with
   !important, so these have to match it: same depth of selector, and the same
   flag, or the tints never appear. */
/* The glass rule is `.home2.page-card.stack > section.block` — three classes,
   an element and a class, so 0,4,1. A selector of 0,4,0 loses to it however
   late it appears and however many !importants it carries. Matching its shape
   is the whole fix; the earlier attempts at reordering could not have worked. */
.home2.page-card.stack > section.block.block--subjects,
.home2.page-card.stack > section.block--plan,
.home2.page-card.stack > section.block.block--needs{
  border-radius:20px !important;
  padding:1.9rem 2rem !important;
  margin-bottom:1.5rem;
  border:0 !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none !important;
}

/* Each block keeps its tint and gains a drawn backdrop. The colour stays in
   the shorthand as the fallback, so a block still looks right if the SVG is
   missing. Different motif per block on purpose: waves, arcs, ribbon, so the
   three read as three sections rather than one pattern repeated. */
.home2.page-card.stack > section.block.block--subjects{
  background:#D5EBF1 url('../img/home-subjects.svg') no-repeat center bottom !important;
  background-size:cover !important;
}
.home2.page-card.stack > section.block--plan{
  background:#EDEBFC url('../img/home-plan.svg') no-repeat center bottom !important;
  background-size:cover !important;
}
.home2.page-card.stack > section.block.block--needs{
  background:#FFE8DD url('../img/home-needs.svg') no-repeat center bottom !important;
  background-size:cover !important;
}

/* The white glass shell behind them is now a box round three coloured boxes. */
/* The shell behind the three tinted blocks. `.home2` sets a white glass
   background, border and shadow with !important (0,1,0 but flagged), and
   `.page-card` adds its own; both have to be answered here or the tints sit
   inside a white box. */
.home2.page-card.stack,
.page-card.home2{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
  max-width:960px;
}
/* The dividers between sections went with it — the tints separate them now. */
.home2.page-card.stack > section.block + section.block,
.home2.page-card.stack > .hero + section.block{ border-top:0 !important; }

/* The cards inside stay white, so they lift off the tint. */
.block--subjects .subj-card,
.block--needs .na-card{
  background:#fff; border:0; border-radius:14px;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}

.block--subjects .sec-block-title,
.block--plan h2,
.block--needs .sec-block-title{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.block--needs .sec-block-title{ color:#F0501E; }
.block--subjects .sec-block-sub,
.block--needs .sec-block-sub{ font-size:.95rem; color:#475569; }

.block--subjects .sec-link2{ color:#0F766E; font-weight:700; }
.block--needs .sec-link2{     color:#C2410C; font-weight:700; }

/* Study plan: lavender block, purple button — its own colour, because it is a
   different kind of action from "practise this chapter". */
.home2 .block--plan{ display:flex; align-items:center; gap:2rem; background:#E4E1FB !important;
  border:0 !important; border-radius:20px !important; padding:1.9rem 2rem !important; }
.block--plan h2{ margin:0 0 .35rem; }
.block--plan .hero-sub{ font-size:1rem; font-weight:600; color:#3F3D56; margin:0 0 .6rem; }
.block--plan .hero-meta{ font-size:1.15rem; font-weight:800; color:#1E1B4B; margin:0 0 1.1rem; }
.block--plan .hero-chip{
  background:#fff; color:#4C4A6A; border:0;
  font-size:.87rem; font-weight:600; border-radius:99px; padding:.5rem .9rem;
}
.block--plan .hero-start{
  background:#6C5CE7; border-color:#6C5CE7; color:#fff;
  border-radius:12px; padding:.85rem 1.5rem; font-weight:700;
  box-shadow:0 8px 20px rgba(108,92,231,.32);
}
.block--plan .hero-start:hover{ background:#5B4BD6; color:#fff; }

/* Needs attention: the Practise button is the point of the card. */
.block--needs .na-card__go,
.block--needs .na-go{
  background:#0FB9D4; border-color:#0FB9D4; color:#fff;
  border-radius:10px; font-weight:700;
}
.block--needs .na-card__go:hover,
.block--needs .na-go:hover{ background:#0E97AD; color:#fff; }

@media (max-width:860px){
  .home2.page-card.stack > section.block.block--subjects,
  .home2.page-card.stack > section.block--plan,
  .home2.page-card.stack > section.block.block--needs{ padding:1.3rem 1.1rem !important; border-radius:16px !important; }
  .block--plan{ flex-direction:column; align-items:flex-start; gap:1.1rem; }
  .block--plan .hero-start{ width:100%; justify-content:center; }
  .block--subjects .sec-block-title,
  .block--plan h2,
  .block--needs .sec-block-title{ font-size:1.25rem; }
}

/* Cards on the tint: no border, plain white. */
.home2 .subj-row{ border:0 !important; background:#fff !important; }

/* The Practise button IS the card's purpose, so it is filled rather than
   outlined — the earlier `.na-card__go` / `.na-go` guesses matched nothing. */
.na-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fd9867;
  border: 1px solid #fd9867;
  border-radius: 50rem;
  padding: 0.65rem 1.2rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.na-btn:hover { background:#F07E45; color:#fff; }

/* ---- the mobile drawer --------------------------------------------------
   `.sidebar` is translated off-screen and snapped back with no transition, so
   it appeared instantly. The rail's width transition does not cover this: the
   drawer moves, it does not resize.

   Only `transform` and `opacity` are animated — anything else makes the phone
   repaint the whole panel each frame, which is what makes a slide stutter. */
@media (max-width:860px){
  .sidebar{
    transition:transform .26s cubic-bezier(.32,.72,0,1);
    will-change:transform;
  }
  /* The shadow only exists while the drawer is open. Left on the closed panel
     it still paints past the screen edge, so a grey band sat over the page. */
  .sidebar.is-open{ box-shadow:6px 0 28px rgba(15,23,42,.16); }

  /* The dim behind it fades rather than appearing. `display` cannot be
     animated, so visibility carries the exit and the fade runs on opacity. */
  .backdrop{
    display:block; opacity:0; visibility:hidden;
    transition:opacity .26s ease, visibility 0s linear .26s;
  }
  .backdrop.is-open{
    opacity:1; visibility:visible;
    transition:opacity .26s ease, visibility 0s;
  }
}

@media (prefers-reduced-motion:reduce){
  .sidebar, .backdrop{ transition:none !important; }
}

/* ---- one popup, one reveal ---------------------------------------------
   The quiz gate, the exam intro and the submit popup were three different
   cards with three different headers. They ask the same kind of question, so
   they now share a shape: white card, mascot on top, yellow primary button.
   Yellow only inside popups — it marks "this is the decision", and a page full
   of yellow buttons would say nothing. */
.quizgate__icon{ display:none; }
.quizgate__mascot,
.br-modal__mascot{ display:block; width:72px; height:auto; margin:0 auto .7rem; }

#introModal .intro-icon,
.br-modal .intro-icon{ display:none; }

.quizgate__go,
.br-modal .btn-early,
#introModal .btn-early,
.welldone .lbtn.primary{
  background:#FFC629 !important;
  border-color:#FFC629 !important;
  color:#3A2B00 !important;
  box-shadow:0 8px 20px rgba(255,198,41,.38) !important;
  font-weight:800;
}
.quizgate__go:hover:not(:disabled),
.br-modal .btn-early:hover,
#introModal .btn-early:hover,
.welldone .lbtn.primary:hover{
  background:#F0B417 !important; border-color:#F0B417 !important; color:#3A2B00 !important;
}
.quizgate__go:disabled{ opacity:.5; box-shadow:none !important; }

/* Practice now blurs its question behind the gate, the way the exam does. */
#stage.is-waiting{
  filter:blur(3px);
  pointer-events:none;
  user-select:none;
}
@media (prefers-reduced-motion:reduce){
  #stage.is-waiting{ filter:none; opacity:.35; }
}

/* The wizard trail, parked. */
.mx-trail.is-hidden{ display:none; }

/* The exam popups take the quiz gate's card exactly: same width, radius, border
   and padding. They were still on Bootstrap's modal-content shell, so the two
   sat side by side looking related rather than identical. */
.br-modal .modal-dialog{ max-width:440px; }
.br-modal .modal-content{
  border:1.5px solid #e3eefb !important;
  border-radius:16px !important;
  box-shadow:0 10px 30px rgba(37,99,235,.08) !important;
}
.br-modal .modal-body{ padding:2.2rem 2rem !important; }
.br-modal h4{ font-size:1.35rem; font-weight:800; margin-bottom:.35rem; }

/* The gate's "Back to all topics" and the exam's "Go back" are the same link. */
.br-modal .modal-body > a,
.br-modal__back{
  display:inline-block; margin-top:.9rem;
  font-size:.9rem; font-weight:600; color:var(--ink-muted,#64748b);
}
.br-modal .modal-body > a:hover,
.br-modal__back:hover{ color:var(--ink,#0f172a); }

/* Both cards give the primary button the full width. */
.quizgate__go,
.br-modal .btn-early{ width:100%; justify-content:center; }
.br-modal__pair .btn-early,
.br-modal__pair .btn2{ width:100%; }

/* Two equal choices in a popup, rather than one button and a link. */
.br-modal__pair{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:30px; }
.br-modal__pair .btn-early,
.br-modal__pair .btn2{ margin-top:0; width:100%; justify-content:center; padding:.85rem .8rem; font-size:.95rem; }
@media (max-width:480px){ .br-modal__pair{ grid-template-columns:1fr; } }

/* ---- end of a practice set ---------------------------------------------- */
.welldone{
  position:fixed; inset:0; z-index:2500;
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
  background:rgba(9,24,39,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease;
}
.welldone.show{ opacity:1; }
.welldone__card{
  background:#fff; border-radius:22px; padding:2rem 1.8rem 1.6rem;
  width:min(400px,100%); text-align:center;
  box-shadow:0 24px 60px rgba(9,24,39,.28);
}
.welldone__face img{ width:72px; height:auto; margin:0 auto .6rem; display:block; }
.welldone__card h2{ font-size:1.5rem; font-weight:800; margin:0 0 .35rem; }
.welldone__sub{ font-size:.95rem; color:var(--ink-muted,#64748b); margin:0 0 1.1rem; }
.welldone__list{
  list-style:none; margin:0 0 1.4rem; padding:0;
  display:flex; flex-direction:column; gap:.45rem;
  text-align:left; font-size:.95rem;
}
.welldone__list li{
  background:var(--surface-muted,#f1f5f9); border-radius:10px; padding:.55rem .8rem;
}
.welldone__list b{ font-weight:800; }
.welldone .lbtn{ width:100%; justify-content:center; }

/* Keep working sits beside Submit, so it takes the same pill shape and centres
   its label — it was inheriting a left-aligned button. */
.br-modal__pair .btn2{
  border-radius:50px;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  text-align:center;
}


/* ============================================================
   MOBILE TOPBAR

   The title grew to 1.4rem and gained an icon, and .btn2--soft
   became solid blue. On a 390px screen that title wrapped onto
   two lines and "How it works" onto three. Both are fixed by
   size, not by layout: the bar itself was never the problem.
   ============================================================ */
@media (max-width: 640px) {
  .topbar__title {
    font-size: 1.05rem;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar__title[class*="ti--"]::before { margin-right: 0.35rem; }
  .topbar__right { flex: 0 0 auto; gap: 0.5rem; }
  .topbar__right .btn2 {
    white-space: nowrap;
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
  }
}


/* ============================================================
   MOBILE OVERRIDES

   Appended last so these win on order rather than on weight.
   Everything here is phone-only; the desktop rules above are
   untouched.
   ============================================================ */
@media (max-width: 640px) {
  /* Colour only. The shorthand would take the whole backdrop with it. */
  .page { padding-bottom: 5.5rem; background: var(--page-bg); }

  .subj-hero {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: .2rem 0 1.5rem;
    padding: 1.1rem 1.2rem;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg,#f3f9ff 0%,#f7fcff 50%,#fdf4ff 100%);
    border: 1px solid #d5ecfd;
    box-shadow: 0 4px 18px rgba(37,99,235,.08);
    min-height: 0;
  }
  .subj-hero__title { font-size: 1.8rem; }
  .subj-hero__tag { margin: .4rem 0 0.8rem; font-size: 0.85rem; font-weight: 600; color: #42546b; }

  .tc-img { width: 86px; height: 86px; }

  .subj-toolbar { flex-direction: column; align-items: stretch; gap: .7rem; margin-bottom: 1.6rem; }

  .topic-grid { grid-template-columns: 1fr; gap: 1.2rem; }
}


/* ============================================================
   ONE ICON PER SUBJECT

   Each subject was a bootstrap glyph inside a `.subject-icon
   .subj-*` chip, drawn by seven different scripts. Rather than
   edit seven renderers, the chip itself draws the artwork and
   hides the glyph, so every existing chip picks it up wherever
   it appears: Performance, Subjects, Study Plan, Exam Papers,
   Saved, Home.

   The chip keeps its own tint behind the art. Set
   `background-color: transparent` on a chip if you want the
   picture to float instead.
   ============================================================ */
.subject-icon.subj-maths,
.subject-icon.subj-english,
.subject-icon.subj-french,
.subject-icon.subj-science,
.subject-icon.subj-history {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 82%;
}
.subject-icon.subj-maths   { background-image: url('../img/subj-maths.png'); }
.subject-icon.subj-english { background-image: url('../img/subj-english.png'); }
.subject-icon.subj-french  { background-image: url('../img/subj-french.png'); }
.subject-icon.subj-science { background-image: url('../img/subj-science.png'); }
.subject-icon.subj-history { background-image: url('../img/subj-history.png'); }

.subject-icon.subj-maths i,
.subject-icon.subj-english i,
.subject-icon.subj-french i,
.subject-icon.subj-science i,
.subject-icon.subj-history i { display: none; }


/* ============================================================
   SUBJECT HERO BAR — COLOUR FOLLOWS THE SCORE

   The bar was a fixed cyan gradient and the number a fixed
   blue, so 43% and 92% looked identical. Everywhere else a
   percentage is red, amber or green by band. Same three cuts
   as Learn.php: under 50, to 75, above 75.

   The view adds `is-priority`, `is-keep` or `is-well` to
   `.subj-hero__progrow` once it knows the score.
   ============================================================ */
.subj-hero__progrow.is-priority .subj-progbar__fill { background: var(--priority); }
.subj-hero__progrow.is-keep     .subj-progbar__fill { background: var(--keep); }
.subj-hero__progrow.is-well     .subj-progbar__fill { background: var(--well); }

.subj-hero__progrow.is-priority .subj-hero__pct { color: var(--priority); }
.subj-hero__progrow.is-keep     .subj-hero__pct { color: var(--keep); }
.subj-hero__progrow.is-well     .subj-hero__pct { color: var(--well); }


/* Percentage beside a subject bar, coloured by band like the bar itself. */
.subj-row .subj-pct.is-priority { color: var(--priority); }
.subj-row .subj-pct.is-keep     { color: var(--keep); }
.subj-row .subj-pct.is-well     { color: var(--well); }

/* ============================================================
   NEEDS ATTENTION — the state pill on the card border
   ============================================================ */
.na-card { position: relative; }
.na-card .na-top .pill {
  position: absolute;
  top: -11px;
  right: 16px;
  padding: .3rem .8rem;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 99px;
  box-shadow: 0 0 3px rgba(15,23,42,.06);
  border: none;
}
.na-card .na-top .pill--meta { background: #EEF2F6; color: #64748B; }
.na-card .na-top .pill--meta .bi-circle-fill { display: none; }
.na-card .na-top { padding-right: 0; }


/* ============================================================
   iOS INPUT ZOOM

   Safari on iOS zooms the whole page when a field under 16px
   takes focus, and it does not zoom back. The page is then
   wider than the screen, which is where the horizontal scroll
   on mobile comes from. Android Chrome does not do it, but the
   size is harmless there.

   16px is Apple's threshold, not a design choice, so this has
   to beat every class that sets a smaller size — `.unit-select`
   at .85rem, `.adm-input--sm` at .86rem, `.topic-search input`
   at .95rem, and any future one. Hence !important, which is
   otherwise avoided in this file.

   Mobile only. Desktop keeps its current field sizes, where
   nothing zooms and 16px would coarsen the admin filters.
   ============================================================ */
@media (max-width: 640px) {
  input, select, textarea,
  .form-control, .form-select,
  [contenteditable="true"] {
    font-size: 16px !important;
  }
}


/* ============================================================
   STICKY SEARCH BAR

   Built by sticky-search.js and appended to <body>, so it is
   outside every existing layout container and cannot push
   anything around. The real search in `.subj-toolbar` is
   untouched; this only appears once that one has scrolled past
   the header.

   `top` is set from JS, measured off the real topbar, so it
   does not have to be guessed here.
   ============================================================ */
.stickysearch {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 45;                 /* under .topbar's 50 */
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1.5rem;
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.stickysearch.is-on {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Lines up with the page content rather than spanning the sidebar. */
.stickysearch__in {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding-left: 240px;         /* the sidebar's width on desktop */
}

.stickysearch__i {
  position: absolute;
  left: 256px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1.05rem;
  pointer-events: none;
}

.stickysearch__input {
  width: 100%;
  padding: .6rem 2.6rem .6rem 2.7rem;
  border: 1.5px solid #e6ecf3;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
}
.stickysearch__input:focus {
  outline: none;
  border-color: #7fd6e6;
  box-shadow: 0 0 0 4px rgba(34,193,214,.12);
}

/* One clear button, used by both the real search and the floating one. Both
   are injected by sticky-search.js, so the markup carries neither. */
.ssx {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #eef2f6;
  color: #64748b;
  font-size: .7rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.ssx:hover { background: #dde5ee; color: #334155; }
.ssx[hidden] { display: none; }
.ssx svg { display: block; }
/* Belt and braces against `.topic-search i`, which absolutely positions any
   icon inside the search. The button carries an <svg> now, but if anyone puts
   an <i> back in, this stops it flying to the left of the field. */
.topic-search .ssx i,
.stickysearch .ssx i {
  position: static;
  transform: none;
  left: auto;
  font-size: .7rem;
  color: inherit;
}

/* No sidebar to clear on a phone. */
@media (max-width: 860px) {
  .stickysearch { padding: 0.55rem 1rem; }
  .stickysearch__in { padding-left: 0; }
  .stickysearch__i { left: 16px; }
}

/* The unit code beside a chapter name in the Add chapters modal. */
.add-chap .cunit {
  flex: 0 0 auto;
  min-width: 34px;
  margin-right: .55rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: .02em;
}

/* ============================================================
   ADD CHAPTERS — the picker

   Was a single 480px column: 28 rows of centred text with a
   Remove button that wrapped onto two lines because there was
   no room left for it.

   Now two per row on desktop, names hard left, and the button
   given a fixed width so Add and Remove occupy the same space
   and the rows do not jump as they change.
   ============================================================ */
.add-subj__body { padding: 0.6rem 1rem 1rem; }
.add-subj.open .add-subj__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* A wide gutter, so two columns read as two lists rather than one wide row
     with a crease down the middle. */
  gap: 0 3rem;
}

.add-chap {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* names left, not spread across the row */
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--surface-muted);
  text-align: left;
}
.add-chap .cname {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  text-align: left;
  line-height: 1.25;
}

/* One width for both states, so a row does not resize when it is toggled and
   "Remove" has room to stay on one line. */
.add-chap button {
  flex: 0 0 auto;
  width: 92px;
  justify-content: center;
  white-space: nowrap;
  padding: 0.28rem 0.5rem;
}

@media (max-width: 700px) {
  .add-subj.open .add-subj__body { grid-template-columns: 1fr; }
}

/* --- the picker's loading state ------------------------------------------
   Skeleton rows shaped like the real ones, so the modal does not collapse to
   a line of text and then jump to full height when the call returns. */
.add-chap--skel { pointer-events: none; }
.sk {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef2f6 25%, #f6f9fb 37%, #eef2f6 63%);
  background-size: 400% 100%;
  animation: sk-shine 1.3s ease-in-out infinite;
}
.sk-unit { width: 26px;  height: 11px; flex: 0 0 auto; margin-right: .55rem; }
.sk-name { flex: 1; height: 13px; }
.sk-btn  { width: 92px; height: 26px; flex: 0 0 auto; border-radius: 50px; }
.sk-ic   { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; }
.sk-subj { width: 140px; height: 14px; }

@keyframes sk-shine {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
/* Respect a pupil who has asked their device to stop animating things. */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
}

/* ============================================================
   STUDY PLAN — the page, to the supplied design

   Three blocks: the active day as a hero, what is locked next
   beside a study tip, and what is finished. Colours are sampled
   from the design, not guessed.
   ============================================================ */

/* --- the active day ------------------------------------------------------ */

.pd-start {
  position: relative;
  z-index: 3;
  flex: 0 0 320px;
  /* 95%, so the artwork behind it stays faintly visible through the card. */
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 1.4rem;
}
/* Overhangs the block to the right, as in the design, so `overflow` on
   `.pd-hero` has to stay visible. The rounded corners still read because the
   art only crosses the edge where there is no corner. */
.pd-hero__art {
  position: absolute;
  right: -29px;
  bottom: -3px;
  width: 180px;
  pointer-events: none;
  /* BEHIND the start card, which sits at 3. The card is 95% opaque, so the
     books show faintly through it rather than being hidden by it. */
  z-index: 0;
  opacity: 0.8;
}
.pd-hero__left { flex: 1; min-width: 0; position: relative; z-index: 1; }

.pd-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #FECE8E; color: #6B3B00;
  border-radius: 50rem;
  padding: .42rem .95rem;
  font-size: .8rem; font-weight: 800;
  margin-bottom: 1rem;
}
.pd-hero__title { font-size: 2.8rem; font-weight: 800; line-height: 1.15; margin: 0; }
.pd-hero__title span { color: #7818A0; }
.pd-hero__sub { color: var(--ink-soft); margin: .5rem 0 1.15rem; font-size: .95rem; }

.pd-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; border-radius: 50rem;
  padding: .5rem 1rem;
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
}

.pd-hero {
  position: relative;
  overflow: visible;   /* the artwork hangs off the right edge */
  display: flex;
  align-items: center;
  gap: 2rem;
  background: #EDEBFC;
  border-radius: 20px;
  padding: 2rem 2.25rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 4px 10px rgba(37,99,235,.08);
  border: 1px solid #e0def2;
}
.pd-start__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.pd-start__head .subject-icon { width: 54px; height: 54px; border-radius: 12px; }
.pd-start__head b { display: block; font-size: 1.05rem; }
.pd-start__head span { font-size: .85rem; color: #E8890B; font-weight: 600; }

.pd-go {
  display: block; width: 100%;
  border: none; cursor: pointer;
  background: linear-gradient(180deg, #6CDCE7 0%, #0AC5D6 100%);
  color: #fff;
  border-radius: 12px;
  padding: .9rem 1rem;
  font-size: 1.4rem; font-weight: 800;
}
.pd-go:disabled { opacity: .7; cursor: default; }
.pd-inside {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; margin-top: .7rem;
  background: none; border: none; cursor: pointer;
  color: var(--ink-muted); font-size: .88rem; font-weight: 600;
}

/* --- next, and the tip --------------------------------------------------- */

.pd-h { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 800; margin: 0 0 .85rem; }
.pd-h i { color: var(--ink-muted); }

/* One column since bright-334 removed the Study Tip aside. Left as a grid
   rather than reverted to a block so the gap and the phone rule below still
   read the same way. */
.pd-next { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.75rem; }
.pd-next__list { min-width: 0; }

.pd-lock {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #ecf7f9;
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: .7rem;
  border: 1px solid #afe2ec;
  box-shadow: 0 4px 8px rgba(37,99,235,.08);
}
.pd-lock__ic {
  width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #D8F7FC; color: #0891B2;
}
.pd-lock__mid { flex: 1; min-width: 0; }
.pd-lock__mid b { display: block; }
.pd-lock__mid span { font-size: .85rem; color: var(--ink-muted); }
.pd-lock__pad {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFF; color: #94A3B8;
}
.pd-lock--none { opacity: .75; }

.pd-tip {
  position: relative; overflow: hidden;
  background: #FEFBE8; border-radius: 16px;
  padding: 1.15rem 1.25rem;
  padding-right: 8rem;          /* room for the mascot */
  border: 1px solid #e7e2c1;
}
.pd-tip__h { display: flex; align-items: center; gap: .45rem; font-weight: 800; margin: 0 0 .5rem; }
.pd-tip__h i { color: #F5B301; }
.pd-tip__b { font-size: .88rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.pd-tip__art { position: absolute; right: -6px; bottom: -8px; width: 120px; pointer-events: none; }

/* --- finished days -------------------------------------------------------- */

.pd-done {
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 4px 10px rgba(37,99,235,.06);
  border: 1px solid #eeeff0;
}

.pd-day {
  position: relative; overflow: hidden;
  background: #F3FDF4;
  border: 1px solid #DCF3E4;
  border-radius: 16px;
  margin-bottom: .8rem;
}
.pd-day:last-child { margin-bottom: 0; }

.pd-day__head {
  display: flex; align-items: center; gap: .9rem;
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 1rem 1.15rem;
}
.pd-day__tick {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #12B371; color: #fff; font-size: 1.15rem;
}
.pd-day__mid { flex: 1; min-width: 0; }
.pd-day__mid b { display: block; }
.pd-day__mid span { font-size: .88rem; color: var(--ink-soft); }
.pd-praise {
  display: inline-block; font-style: normal;
  background: #DFF6E3; color: #1B7A4B;
  border-radius: 50rem; padding: .16rem .6rem;
  font-size: .78rem; font-weight: 700; margin-left: .35rem;
}
.pd-day__chev { color: var(--ink-muted); transition: transform .18s ease; }
.pd-day.open .pd-day__chev { transform: rotate(180deg); }

.pd-day__body { display: none; padding: 0 1.15rem 1.15rem 4.55rem; position: relative; z-index: 1; }
.pd-day.open .pd-day__body { display: block; }

.pd-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid #DCF3E4;
  border-radius: 50rem; padding: .6rem 1.1rem;
  font-size: .9rem; font-weight: 700; color: #1669EA;
}
.pd-btn:hover { background: #F7FFFC; color: #1669EA; }

/* --- narrower screens ----------------------------------------------------- */

@media (max-width: 980px) {
  .pd-next { grid-template-columns: 1fr; }
  .pd-hero { flex-direction: column; align-items: stretch; }
  /* Full width once the hero stacks, or the start card stays a 320px column
     on its own. Lost while de-duplicating the rules above; restored here. */
  .pd-start { flex: 1 1 auto; }
  .pd-hero__art { display: none; }
}
@media (max-width: 620px) {
  
  .pd-hero__title { font-size: 1.5rem; }
  .pd-day__body { padding-left: 1.15rem; }
  .pd-tip { padding-right: 1.25rem; }
  .pd-tip__art { position: static; display: block; width: 96px; margin: .6rem 0 -.5rem auto; }
}

/* The plan page has no page-card behind it, so `.sp2` supplies only the width
   and the centring that `.page-card` used to. */
.sp2 { max-width: 1020px; margin: 0 auto; position: relative; z-index: 1; }

/* The loading and empty states still use `.glass-card`, and `.sp2 .glass-card`
   tinted it for the frosted panel that no longer exists. Plain white now, like
   every other block on the page. */
.sp2 .glass-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
}

/* The day and subject under the gate's heading, filled in once the plan
   answers. Hidden until then rather than showing an empty line. */
.quizgate__sub {
  margin: -.35rem 0 1rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--cyan-dark);
}
.quizgate__sub[hidden] { display: none; }

/* ── Learn: last-question badge, the skip popup, the step loader ──────────
   APPENDED, and every selector below is new. app.css has duplicate rules
   throughout and de-duplicating it is explicitly off limits, so nothing here
   redefines anything above it: appending is only safe because these names do
   not already exist in the file. If one of these ever needs changing, change it
   HERE, at the bottom, not by adding a third copy lower down.
   ──────────────────────────────────────────────────────────────────────── */

/* The pupil should know they are on the last one BEFORE they answer it, not
   discover it when the button says Finish. */
.learn-qbadge--last{ color:#B45309; background:rgba(245,158,11,.14); }

/* The skipped-questions prompt, as a layer OVER the question rather than a
   screen instead of it. It used to replace the stage, which read as another
   step in the set and lost the pupil's place. */
.learn-pop{ position:fixed; inset:0; z-index:1090; display:none;
  align-items:center; justify-content:center; padding:1.2rem;
  background:rgba(15,23,42,.55); }
.learn-pop.show{ display:flex; }
.learn-pop__box{ background:#fff; border-radius:20px; width:100%; max-width:460px;
  padding:2rem 1.8rem; text-align:center; box-shadow:var(--shadow); }
.learn-pop__ic{ width:70px; height:70px; border-radius:50%; margin:0 auto 1.1rem;
  display:grid; place-items:center; font-size:2rem;
  background:rgba(245,158,11,.14); color:#B45309; }
.learn-pop__box h2{ font-weight:800; margin-bottom:.5rem; font-size:1.35rem; }
.learn-pop__box p{ color:var(--ink-muted,#64748b); margin-bottom:1.5rem; }
.learn-pop__btns{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* A beat between questions. Without it the next question can appear so fast
   that it reads as the same one still on screen, and pupils answer the wrong
   question or think the Next button did nothing. */
.learn-load{ display:grid; place-items:center; min-height:220px; gap:.9rem; }
.learn-load__spin{ width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(8,145,178,.18); border-top-color:#0891B2;
  animation:learnSpin .7s linear infinite; }
.learn-load__txt{ color:var(--ink-muted,#64748b); font-size:.9rem; font-weight:600; }
@keyframes learnSpin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .learn-load__spin{ animation-duration:2s; }
}


/* The settings page needed a title icon of its own. Added here at the bottom
   rather than beside the others at line ~209: app.css is full of duplicate
   rules and de-duplicating it is off limits, so a new selector goes at the end
   where nothing above can be shadowing it. */
.topbar__title.ti--settings::before  { content: "\f4cb"; }

/* ── My settings, and the avatar in the topbar ────────────────────────────
   APPENDED, all new selectors. Nothing above is redefined and nothing was
   de-duplicated. `.avatar2` already exists further up and keeps its rules;
   what is added here is only what it needs to hold an image and be tappable.
   ──────────────────────────────────────────────────────────────────────── */

/* The topbar circle was a hardcoded letter that did nothing. It is a link now,
   so it needs the affordance as well as the picture. */
a.avatar2 { text-decoration: none; overflow: hidden; padding: 0; }
a.avatar2:hover { filter: brightness(.95); transform: translateY(-1px); }
a.avatar2 { transition: transform .12s ease, filter .12s ease; }
.avatar2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar2--pic { background: transparent; }

/* A skeleton, not a spinner.

   Twenty SVGs arrive as twenty separate requests, so on a slow connection the
   grid used to build itself one picture at a time, jumping as each landed. The
   placeholders are laid out at the final size from the first paint, so nothing
   moves: only the colour changes. The shimmer is what tells a child it is
   coming rather than broken. */
.set-skel { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(100deg, var(--cyan-light) 30%, #FFFFFF 50%, var(--cyan-light) 70%);
  background-size: 300% 100%; animation: setShimmer 1.2s ease-in-out infinite; }
@keyframes setShimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }

.set-hero { display: flex; align-items: center; gap: 1.3rem; padding: 1.5rem;
  border-radius: var(--r-lg, 22px); background: var(--cyan-light);
  margin-bottom: 2rem; }
.set-hero__pic { width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  background: var(--surface); flex-shrink: 0; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(8,145,178,.18); }
.set-hero__pic img { width: 100%; height: 100%; display: block; }
.set-initial { font-size: 2.4rem; font-weight: 800; color: var(--cyan-dark); }
.set-hero__name { font-size: 1.5rem; font-weight: 800; margin: 0; }
.set-hero__sub { color: var(--ink-muted); margin: .25rem 0 0; font-size: .95rem; }

.set-block { padding-top: 1.4rem; border-top: 1px solid var(--border); margin-bottom: 1.6rem; }
.set-block:first-of-type { border-top: 0; padding-top: 0; }
.set-block__head { margin-bottom: 1rem; }
.set-h { font-size: 1.08rem; font-weight: 800; margin: 0 0 .25rem; }
.set-p { color: var(--ink-muted); font-size: .92rem; margin: 0; max-width: 46ch; }

/* auto-fit, so twenty pictures sit in neat rows at any width without a
   breakpoint for each one. */
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: .75rem; }
.set-pick { border: 3px solid transparent; background: var(--surface); border-radius: 50%;
  padding: 0; cursor: pointer; line-height: 0; aspect-ratio: 1 / 1; overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.set-pick img { width: 100%; height: 100%; display: block; }
.set-pick:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(15,23,42,.12); }
.set-pick.is-picked { border-color: var(--cyan); box-shadow: 0 6px 16px rgba(8,145,178,.25); }
.set-pick.is-loading { cursor: default; pointer-events: none; }

.set-note { font-size: .88rem; font-weight: 700; color: #B45309; margin: 1rem 0 0; }
.set-note.is-ok { color: #047857; }

.set-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

@media (max-width: 520px) {
  .set-hero { flex-direction: column; text-align: center; gap: .9rem; }
  .set-p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .set-pick:hover, a.avatar2:hover { transform: none; }
  .set-skel { animation-duration: 3s; }
}

/* ── Study plan: the add-a-chapter nudge ──────────────────────────────────
   APPENDED, new selectors only. The plan is only as good as the chapters in
   it, and the Add chapters button sits in the topbar where nobody looks.
   ──────────────────────────────────────────────────────────────────────── */
.pd-nudge { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.2rem; margin-bottom: 1.4rem; border-radius: 18px;
  background: var(--cyan-light); border: 1px dashed var(--cyan); }
.pd-nudge__ic { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface);
  color: var(--cyan-dark); font-size: 1.2rem; }
.pd-nudge__txt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.pd-nudge__txt b { font-weight: 800; font-size: .98rem; }
.pd-nudge__txt span { color: var(--ink-muted); font-size: .88rem; }

@media (max-width: 520px) {
  .pd-nudge { text-align: left; }
  .pd-nudge .btn2 { width: 100%; justify-content: center; }
}


/* ---- Plan bar and lock -------------------------------------------------
   Shown to a child whose plan is not live. Deliberately not a wall: the bar
   sits at the bottom out of the way, and the lock only appears when they try
   something the server has blocked. */
.planbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: .9rem; padding: .8rem 1.1rem;
  background: #0F172A; color: #fff; box-shadow: 0 -8px 24px rgba(15,23,42,.2); }
.planbar > .bi { font-size: 1.3rem; color: var(--keep); flex: 0 0 auto; }
.planbar__t { flex: 1; min-width: 0; line-height: 1.35; }
.planbar__t b { display: block; font-size: .95rem; }
.planbar__t span { font-size: .84rem; color: #94A3B8; }
.planbar__x { border: 0; background: transparent; color: #94A3B8; cursor: pointer;
  font-size: 1rem; padding: .4rem; }
.planbar__x:hover { color: #fff; }
@media (max-width: 700px){ .planbar__t span { display: none; } }

.planlock { position: fixed; inset: 0; z-index: 90; background: rgba(15,23,42,.6);
  display: grid; place-items: center; padding: 1.2rem; }
.planlock[hidden] { display: none; }
.planlock__box { background: #fff; border-radius: var(--r-xl); padding: 2rem;
  max-width: 26rem; text-align: center; box-shadow: 0 24px 60px rgba(15,23,42,.3); }
.planlock__box > .bi { font-size: 2.2rem; color: var(--keep); }
.planlock__box h2 { font-size: 1.25rem; font-weight: 800; margin: .8rem 0 .5rem; }
.planlock__box p { color: var(--ink-muted); font-size: .95rem; margin: 0 0 1.5rem; }

/* THE PLAN WALL, blocking version.
   The bottom strip is gone: it could be closed and a child carried on. This
   sits over everything, blurs the page behind it and has nothing to press.
   Appended at the end, which is the copy that wins. */
.planlock--block {
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
}
html.is-planlocked, html.is-planlocked body { overflow: hidden; }

/* The wall's icon, in the colour of the state. Amber means wait, red means
   stopped. Grey said nothing about which one a child was looking at. */
.planlock__ic {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto .9rem;
}
.planlock__ic .bi { font-size: 1.6rem; }
.planlock__ic.is-wait { background: #FEF3C7; }
.planlock__ic.is-wait .bi { color: #B45309; }
.planlock__ic.is-stop { background: #FEE2E2; }
.planlock__ic.is-stop .bi { color: #B91C1C; }
.planlock--block .planlock__box > .bi { display: none; }
.planlock--block .planlock__box p { margin-bottom: 1.3rem; }
.planlock__out { display: inline-flex; align-items: center; gap: .5rem; }

/* ---------------------------------------------------------------------------
   Modal shadow (bright-336).
   Bootstrap's own `.modal-content` sets no box-shadow on this build. The
   shadow every other popup has comes from `.br-modal .modal-content` at line
   4495, with `!important`. `#introModal` was deliberately kept out of
   `.br-modal` for its sizing, so it inherited the border and radius from its
   own rule and got no shadow at all.

   The VALUES BELOW ARE COPIED FROM LINE 4495, not invented, so every popup
   casts the same shadow rather than the intro one casting a different one.
   `!important` is matched because that rule uses it and would otherwise win.

   SPECIFICITY: `#introModal .modal-content` is (1,1,0) and beats this at
   (0,1,0), but it sets only `border-radius` and `border` — the shadow is not
   contested. `.br-modal .modal-content` is (0,2,0) with `!important`; equal
   `!important` and this rule sits later, so the two agree either way because
   the value is the same.
   Appended at the end, as this file requires.
   --------------------------------------------------------------------------- */
.modal-content { box-shadow: 0 10px 30px rgba(37, 99, 235, .08) !important; }

/* The mock-exam subject picker now shows the drawn subject artwork instead of
   a font icon (bright-337). `.mx-scope i` sized a glyph; an <img> needs its own
   box. Same 30 files the Practice hero uses. */
.mx-scope__ic { width: 58px; height: 58px; object-fit: contain; margin-bottom: .2rem; }