/* Fonts hosted on our own site (no Google Fonts). Anek Latin, Anek Devanagari, Noto Sans, Noto Sans Devanagari - SIL Open Font License; files from the @fontsource npm packages. */
@font-face { font-family: 'Anek Latin'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/anek-latin-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Anek Latin'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/anek-latin-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Anek Devanagari'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/anek-devanagari-devanagari-600-normal.woff2) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF; }
@font-face { font-family: 'Anek Devanagari'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/anek-devanagari-devanagari-700-normal.woff2) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/noto-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/noto-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/noto-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/noto-sans-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/noto-sans-devanagari-devanagari-400-normal.woff2) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF; }
@font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/noto-sans-devanagari-devanagari-500-normal.woff2) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF; }
@font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/noto-sans-devanagari-devanagari-600-normal.woff2) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF; }
@font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/noto-sans-devanagari-devanagari-700-normal.woff2) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF; }

/* ==========================================================================
   Mero IELTS Sathi — look taken from the design system
   (mero_ielts_sathi_design_options/07 …/39 Design system, foundations)
   --------------------------------------------------------------------------
   Teal for the brand, links and selected states. Dark "ink" for text.
   Orange only for the one main action on a screen and the focus ring.
   Warm peach for Nepali help and warnings — never red, never green.
   Headings: Anek Latin / Anek Devanagari. Text: Noto Sans / Noto Sans Devanagari.
   Structure (left menu, Study Room, pages) is unchanged — look only.
   Previous look ("calm tech", blue): backup_2026-09-30_before_new_look.
   Dark mode: the switch is present in the UI but disabled — not designed yet.
   ========================================================================== */

:root {
  /* Fonts (loaded from Google Fonts in each page's <head>) */
  --font-head: "Anek Latin", "Anek Devanagari", "Noto Sans", system-ui, "Segoe UI", "Nirmala UI", sans-serif;
  --font-sans: "Noto Sans", "Noto Sans Devanagari", system-ui, "Segoe UI", "Nirmala UI", sans-serif;
  --font-deva: "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  --font-head-deva: "Anek Devanagari", "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  /* Small numbers and labels: the design uses Noto Sans, not a code font */
  --font-mono: "Noto Sans", system-ui, "Segoe UI", sans-serif;

  /* Type scale (design system: Typography) */
  --text-h1: 2.375rem;    /* 38px page title (app) */
  --text-h2: 1.375rem;    /* 22px card title */
  --text-body: 0.96875rem;/* 15.5px body */
  --text-read: 1.03125rem;/* 16.5px reading passage */
  --text-small: 0.875rem; /* 14px small */
  --text-label: 0.78125rem;/* 12.5px caption / labels */

  /* Colours (design system: Colour tokens) */
  --bg: #F5F8F7;          /* Surface: page background */
  --surface: #FFFFFF;     /* White: cards, inputs */
  --subtle: #F5F8F7;      /* inner rows inside cards */
  --tint: #E2EFED;        /* Tint: chips, alternate rows, success */
  --border: #C5DDD9;      /* Border: cards and inputs */
  --border-strong: #C5DDD9;
  --divider: #E2EFED;
  --text: #0E2B29;        /* Ink */
  --text-muted: #4B5F5D;  /* Muted text */
  --text-faint: #4B5F5D;  /* small labels use muted for contrast */
  --placeholder: #6B7C7A;
  --accent: #0F5F5A;      /* Primary (teal) */
  --accent-hover: #0A4541;
  --accent-soft: #E2EFED;
  --orange: #C2410C;      /* Accent: one main action, focus ring */
  --orange-hover: #9A3412;
  --warm: #FCEBDD;        /* Warm tint: Nepali help, warnings */
  --warm-border: #F3C9A8;
  --warm-text: #5A2A10;
  --on-teal-muted: #D5ECE8;
  /* Errors: warm tint, orange border, dark warm text — calm, never red */
  --error: #9A3412;
  --error-soft: #FCEBDD;
  --error-border: #F3C9A8;

  /* Shape & layout */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;      /* cards */
  --radius-row: 14px;     /* rows inside cards */
  --radius-pill: 999px;   /* buttons */
  --sidebar-w: 248px;
  --rail-w: 68px;
  --content-w: 1000px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}
h1, h2, h3 { margin: 0; line-height: 1.2; font-family: var(--font-head); font-weight: 700; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
[lang="ne"] { font-family: var(--font-deva); line-height: 1.75; }
h1 [lang="ne"], h2 [lang="ne"], h3 [lang="ne"], .brand-mark, .brand-sub { font-family: var(--font-head-deva); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Small reusable text styles ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.text-muted { color: var(--text-muted); font-size: var(--text-small); }
.page-head { margin-bottom: 28px; }
.page-head h1 { margin-top: 6px; font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.page-head p:last-child { margin-top: 10px; color: var(--text-muted); font-size: 1.0625rem; }

/* ==========================================================================
   App shell: sidebar (desktop) · top bar + bottom nav (phone)
   ========================================================================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0;
  width: var(--sidebar-w); height: 100vh; flex-shrink: 0;
  display: flex; flex-direction: column;
  padding: 20px 14px;
  background: var(--surface);
  border-right: 1px solid var(--divider);
}

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand-mark {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; /* about 30% of the size */
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #FFFFFF;
  font-size: 19px; font-weight: 700; line-height: 1;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--accent); }
.brand-sub { font-size: 13px; font-weight: 600; color: var(--text-muted); }
/* Logo picture in the page header (added 9 Oct 2026) */
.brand-logo { display: block; width: 100%; max-width: 200px; height: auto; }
.topbar .brand-logo { width: auto; height: 40px; max-width: none; }
.site-header .brand-logo { width: auto; height: 44px; max-width: none; }

.side-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label { padding: 20px 12px 6px; }
.nav-link {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 8px 12px; border-radius: var(--radius-pill);
  font-size: var(--text-small); font-weight: 500; color: var(--text-muted); text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: var(--subtle); color: var(--text); }
.nav-link[aria-current="page"] { background: var(--tint); color: var(--accent); font-weight: 600; }
.icon { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }

/* Dark mode switch — present but disabled until the dark theme exists */
.theme-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-pill);
  background: transparent; font: inherit; font-size: var(--text-small); color: var(--text-muted);
  cursor: pointer;
}
.theme-switch:disabled { cursor: not-allowed; opacity: 0.6; }
.switch-track {
  width: 40px; height: 24px; padding: 3px; border-radius: 999px;
  background: #8FA9A5; display: flex; align-items: center;
}
.switch-thumb { width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(14, 43, 41, 0.2); }
.theme-switch[aria-checked="true"] .switch-track { background: var(--accent); justify-content: flex-end; }

/* Signed-in / signed-out block (filled by renderAuthNav in api.js) */
.auth-nav { border-top: 1px solid var(--divider); padding-top: 12px; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 0 10px 4px; }
.avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); border: 0;
  font-size: 13px; font-weight: 700; color: var(--accent);
}
.user-name { flex-grow: 1; min-width: 0; font-size: var(--text-small); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-link { font-size: 13px; font-weight: 600; color: var(--accent); }
.auth-links { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 4px; }

/* Main column */
.main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; padding: 48px 72px 28px; }
.content { width: 100%; max-width: var(--content-w); }
.site-footer {
  width: 100%; max-width: var(--content-w);
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--divider);
  font-size: var(--text-label); color: var(--text-muted);
}
.main > .content { margin-bottom: 48px; }

/* Phone chrome (hidden on desktop) */
.topbar, .bottom-nav { display: none; }

/* ==========================================================================
   Components
   ========================================================================== */

/* Buttons: pill shape. Teal by default; orange only for the one main action. */
button, .btn {
  font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 26px;
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  background: var(--accent); color: #FFFFFF;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }
button:disabled { background: var(--border); border-color: var(--border); color: var(--text-muted); cursor: not-allowed; }
.btn-secondary { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.btn-secondary:hover { background: var(--tint); color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-block { width: 100%; }
/* The one main action on log in / sign up is orange, as in the design */
.auth-card button[type="submit"] { background: var(--orange); border-color: var(--orange); min-height: 54px; }
.auth-card button[type="submit"]:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
/* The theme switch is a <button> but must not look like one */
.theme-switch, .theme-switch:hover, .theme-switch:disabled { background: transparent; border: 0; color: var(--text-muted); font-weight: 400; min-height: 40px; padding: 0 12px; }

/* Skill cards (home) */
.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.skill-card {
  display: flex; gap: 18px; padding: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.skill-card:hover { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }
.skill-icon {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--accent);
}
.skill-icon .icon { width: 22px; height: 22px; }
/* Module colours from the design: Listening solid teal, Reading tint,
   Writing outline, Speaking warm tint */
.skill-card[href*="listening"] .skill-icon { background: var(--accent); color: #FFFFFF; }
.skill-card[href*="reading"] .skill-icon { background: var(--tint); color: var(--accent); }
.skill-card[href*="writing"] .skill-icon { background: var(--surface); color: var(--accent); border: 1px solid var(--border); }
.skill-card[href*="speaking"] .skill-icon { background: var(--warm); color: var(--orange-hover); }
.skill-body { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; }
.skill-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.skill-name { font-family: var(--font-head); font-size: var(--text-h2); font-weight: 700; line-height: 1.2; }
.skill-desc { font-size: var(--text-small); color: var(--text-muted); }
.skill-action { margin-top: 10px; font-size: var(--text-small); font-weight: 600; color: var(--accent); }

/* Neutral note (tint banner) */
.note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; margin-bottom: 24px; border-radius: var(--radius-row);
  background: var(--tint); font-size: var(--text-small); color: var(--text);
}
.note .icon { margin-top: 2px; color: var(--accent); }
.note strong { color: var(--text); font-weight: 700; }

/* Practice-set list (skill pages) */
.list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.set-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.set-list > li + li { border-top: 1px solid var(--divider); }
.set-row { display: flex; align-items: center; gap: 20px; padding: 18px 22px; color: var(--text); text-decoration: none; transition: background-color 0.15s ease; }
.set-row:hover { background: var(--subtle); color: var(--text); }
.set-num {
  flex-shrink: 0; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tint); font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.set-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-title { font-weight: 600; }
.set-desc { font-size: var(--text-small); color: var(--text-muted); }
.set-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  font-size: var(--text-small); font-weight: 600; color: var(--accent);
  transition: background-color 0.15s ease;
}
.set-row:hover .set-cta { background: var(--tint); }
.set-empty { padding: 20px 22px; color: var(--text-muted); font-size: var(--text-small); }

/* Forms */
form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
label { font-size: var(--text-small); font-weight: 600; }
.hint { font-size: 13px; color: var(--text-muted); }
input[type="text"], input[type="email"], input[type="password"], textarea {
  font: inherit; color: var(--text); width: 100%;
  min-height: 50px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
input:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px rgba(194, 65, 12, 0.28); }
textarea { resize: vertical; line-height: 1.75; }

/* Messages: warm for problems, tint for success — every state also has words */
.message { padding: 12px 16px; border-radius: var(--radius-row); font-size: var(--text-small); border: 1px solid transparent; }
.message.error { background: var(--error-soft); color: var(--error); border-color: var(--error-border); }
.message.success { background: var(--tint); color: var(--accent-hover); border-color: var(--tint); font-weight: 600; }
.message a { color: inherit; font-weight: 700; }

/* Result panel (after submitting) */
.result {
  padding: 20px 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.result-label { font-size: var(--text-label); font-weight: 600; color: var(--text-muted); }
.result-score { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; }
.result-score .mono { font-family: var(--font-head); font-size: 36px; font-weight: 700; line-height: 1; color: var(--text); }
.result-note { margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.result-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--text-small); }
.result-links a { font-weight: 600; }

/* Progress bar (raw score) */
.bar { display: flex; height: 6px; border-radius: 3px; background: var(--tint); overflow: hidden; }
.bar > span { height: 100%; border-radius: 3px; background: var(--accent); }
.result .bar { margin-top: 12px; }

/* History table (Progress page) */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
table.history { width: 100%; border-collapse: collapse; font-size: 15px; }
table.history th {
  text-align: left; padding: 14px 22px; border-bottom: 1px solid var(--divider); background: var(--subtle);
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted);
}
table.history td { padding: 16px 22px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
table.history tbody tr:last-child td { border-bottom: 0; }
table.history td.date { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.score { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.score .bar { width: 72px; }
.score-num { font-family: var(--font-mono); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.score-note { font-size: 13px; color: var(--text-muted); }
.saved-note { font-size: 13px; color: var(--text-muted); }
table.history td.empty { text-align: center; padding: 48px 20px; color: var(--text-muted); }
table.history td.empty p { margin-bottom: 16px; }

/* Badge (skill name in table) — plain text style, kept for compatibility */
.badge { text-transform: capitalize; }

/* ==========================================================================
   Auth pages (log in / sign up)
   ========================================================================== */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; }
.auth-header .brand { padding: 0; }
.auth-main { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 24px 20px 40px; }
.auth-card { width: 100%; max-width: 440px; padding: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.auth-card h1 { margin-top: 6px; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.auth-card .lead { margin: 10px 0 28px; color: var(--text-muted); }
.auth-switch { margin-top: 24px; font-size: var(--text-small); color: var(--text-muted); text-align: center; }
.auth-switch a { font-weight: 600; }
.auth-page .site-footer { max-width: none; margin: 0; padding: 18px 20px; border: 0; text-align: center; }

/* ==========================================================================
   Practice pages — focus mode
   ========================================================================== */
.app-focus { display: flex; height: 100vh; overflow: hidden; }

.rail {
  width: var(--rail-w); flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 0; background: var(--surface); border-right: 1px solid var(--divider);
}
.rail .brand-mark { margin-bottom: 16px; text-decoration: none; }
.rail-nav { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rail-link, .rail-switch {
  width: 44px; height: 44px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.rail-link:hover { background: var(--subtle); color: var(--text); }
.rail-link[aria-current="page"] { background: var(--tint); color: var(--accent); }
.rail-link .icon, .rail-switch .icon { width: 19px; height: 19px; }
.rail-sep { width: 24px; height: 1px; margin: 8px 0; background: var(--divider); }
.rail-switch, .rail-switch:hover { margin-top: auto; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--text-muted); }
.rail-switch:disabled { opacity: 0.6; background: transparent; }

.practice { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.practice-bar {
  height: 68px; flex-shrink: 0;
  display: flex; align-items: center; gap: 16px; padding: 0 28px;
  background: var(--surface); border-bottom: 1px solid var(--divider);
}
.practice-bar .back-link {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border-radius: var(--radius-sm); background: var(--tint);
  font-size: var(--text-label); font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap;
}
.practice-bar .back-link:hover { background: var(--border); color: var(--accent-hover); }
.bar-divider { width: 1px; height: 20px; background: var(--divider); }
.practice-title { flex-grow: 1; min-width: 0; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.practice-status {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm); background: var(--text); color: #FFFFFF;
  font-family: var(--font-head); font-size: 15px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.view-tabs { display: none; }

.practice-body { flex-grow: 1; min-height: 0; display: flex; }
.pane { min-height: 0; overflow-y: auto; }
.pane-reading { flex-grow: 1; min-width: 0; padding: 40px 56px; background: var(--surface); }
.pane-reading .reading { max-width: 660px; }
.pane-reading h2 { margin-bottom: 16px; }
.passage, .task-prompt { font-size: var(--text-read); line-height: 1.8; white-space: pre-line; }

.pane-questions {
  width: 580px; flex-shrink: 0;
  padding: 32px 32px 40px; border-left: 1px solid var(--divider); background: var(--bg);
  display: flex; flex-direction: column; gap: 24px;
}
/* Listening has no passage: questions take a centred column */
.practice-body.single { overflow-y: auto; }
.practice-body.single .pane-questions { width: 100%; max-width: 860px; margin: 0 auto; border-left: 0; overflow: visible; padding: 36px 32px 40px; }

#result-box:empty { display: none; }

.questions { display: flex; flex-direction: column; gap: 16px; }
/* Each question sits in its own white card, as in the design's test player */
.question {
  margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-row);
}
.question legend { float: left; width: 100%; }
.question legend, .question > label:not(.option) { padding: 0; margin-bottom: 6px; font-size: var(--text-body); font-weight: 500; line-height: 1.5; }
.question legend + * { clear: both; }
.q-num { margin-right: 8px; font-family: var(--font-mono); font-size: var(--text-body); font-weight: 700; color: var(--accent); }

.option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 15px; font-weight: 400; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.option:hover { border-color: var(--accent); }
/* Selected answer: teal fill plus a heavier border */
.option:has(input:checked) { background: var(--tint); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); font-weight: 600; }
.option input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--accent); }
.question input[type="text"] { max-width: 420px; }

.submit-row { padding-top: 20px; border-top: 1px solid var(--divider); }

.audio-slot {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg);
  font-size: var(--text-small); color: var(--text-muted);
}
.audio-slot .icon-circle {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--tint); color: var(--accent);
}
audio { width: 100%; border-radius: var(--radius-pill); accent-color: var(--accent); }
section[aria-label="Audio"] {
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}

/* Writing / Speaking editor */
.pane-task { width: 480px; flex-shrink: 0; padding: 40px; background: var(--surface); border-right: 1px solid var(--divider); }
.pane-task h2 { margin-bottom: 16px; }
.pane-task .note { margin: 24px 0 0; }
.pane-editor { flex-grow: 1; min-width: 0; padding: 32px 40px 24px; display: flex; flex-direction: column; }
.pane-editor form { flex-grow: 1; gap: 10px; }
.pane-editor textarea { flex-grow: 1; min-height: 240px; padding: 20px 22px; font-size: 17px; border-radius: var(--radius-row); border-color: var(--accent); resize: none; }
.editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 10px; }
.editor-actions #result-box { flex: 1 1 280px; }

.practice-footer { font-size: var(--text-label); color: var(--text-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet & small laptop: practice panes stack */
@media (max-width: 1100px) {
  .main { padding: 40px 40px 28px; }
  .pane-questions { width: 460px; }
  .pane-task { width: 400px; }
}

@media (max-width: 860px) {
  /* Focus mode becomes a single scrolling column with Passage / Questions tabs */
  .app-focus { height: auto; min-height: 100vh; overflow: visible; }
  .rail { display: none; }
  .practice-bar { position: sticky; top: 0; z-index: 10; padding: 0 16px; gap: 12px; height: 60px; }
  .bar-divider { display: none; }
  .practice-body, .practice-body.single { display: block; overflow: visible; }
  .pane { overflow: visible; }
  .pane-reading, .pane-task { width: auto; padding: 24px 20px; border: 0; }
  .pane-questions, .practice-body.single .pane-questions { width: auto; padding: 20px 16px 32px; border: 0; }
  .pane-editor { padding: 20px 16px 24px; }
  .pane-editor textarea { min-height: 50vh; }

  .view-tabs {
    display: flex; gap: 4px; margin: 0; padding: 10px 16px;
    background: var(--surface); border-bottom: 1px solid var(--divider);
  }
  .view-tabs button {
    flex: 1; min-height: 38px; padding: 0; border: 0; border-radius: var(--radius-pill);
    background: var(--tint); color: var(--text-muted); font-size: var(--text-small); font-weight: 600;
  }
  .view-tabs button[aria-selected="true"] { background: var(--accent); color: #FFFFFF; }
  .practice-body[data-view="reading"] .pane-questions { display: none; }
  .practice-body[data-view="questions"] .pane-reading { display: none; }
}

/* Phone: sidebar becomes top bar + bottom nav */
@media (max-width: 767px) {
  :root { --radius-lg: 18px; }
  .app { display: block; padding-bottom: 72px; }
  .sidebar { display: none; }
  .topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; height: 60px; padding: 0 16px;
    background: var(--surface); border-bottom: 1px solid var(--divider);
  }
  .topbar .brand { padding: 0; }
  .topbar .brand-sub { display: none; }
  .main { padding: 24px 16px 24px; }
  .page-head { margin-bottom: 20px; }
  .page-head h1 { font-size: 1.75rem; }
  .skill-grid { grid-template-columns: 1fr; gap: 12px; }
  .skill-card { padding: 18px; }
  .set-row { gap: 14px; padding: 16px; }
  .set-cta { display: none; }
  .site-footer { margin-top: 32px; }
  .question { padding: 16px; }

  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; height: 64px;
    background: var(--surface); border-top: 1px solid var(--divider);
  }
  .bottom-link, .account-menu > summary {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 12px; font-weight: 500; color: var(--text-muted); text-decoration: none; list-style: none; cursor: pointer;
  }
  .account-menu > summary::-webkit-details-marker { display: none; }
  .bottom-link[aria-current="page"] { color: var(--accent); font-weight: 700; }
  .bottom-link .icon, .account-menu .icon { width: 20px; height: 20px; }
  .account-menu { flex: 1; display: flex; }
  .account-menu[open] > summary { color: var(--accent); }
  .account-panel {
    position: fixed; left: 12px; right: 12px; bottom: 76px;
    padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(14, 43, 41, 0.12);
    display: flex; flex-direction: column; gap: 6px;
  }

  /* History table → stacked list */
  table.history thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.history, table.history tbody, table.history tr, table.history td { display: block; width: 100%; }
  table.history tr { padding: 14px 16px; border-bottom: 1px solid var(--divider); }
  table.history tbody tr:last-child { border-bottom: 0; }
  table.history td { padding: 2px 0; border: 0; }
  table.history td.date { order: -1; }
  .score .bar { flex-grow: 1; width: auto; }

  .auth-header { padding: 16px; }
  .auth-card { padding: 28px 20px; }
}

/* ==========================================================================
   Lessons (pg11_lessons.html, pg12_lesson.html) — added 2026-09-28
   ========================================================================== */
.tag {
  display: inline-block; margin-left: 8px; padding: 2px 9px; vertical-align: 3px;
  border-radius: var(--radius-sm); background: var(--tint); color: var(--accent);
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; letter-spacing: 0; line-height: 1.5;
}
.lesson { max-width: 780px; }
.lesson .page-head .eyebrow a { color: var(--accent); text-decoration: none; }
.lesson .page-head .eyebrow a:hover { color: var(--accent-hover); text-decoration: underline; }
.lesson-time { font-size: 13px; color: var(--text-muted); }

.lesson-section { margin-top: 36px; }
.lesson-section h2 { margin-bottom: 12px; font-size: var(--text-h2); font-weight: 700; }
.lesson-section p + p { margin-top: 10px; }
.lesson-section p + ul, .lesson-section ul + p, .lesson-section ol + p { margin-top: 12px; }
.lesson-section .set-list { margin-top: 14px; }

.bullets, .steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.bullets li::marker { color: var(--accent); }
.steps li::marker { font-family: var(--font-mono); font-size: var(--text-small); font-weight: 700; color: var(--accent); }

.facts { list-style: none; margin: 0 0 14px; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.facts li { display: flex; gap: 20px; padding: 13px 20px; }
.facts li + li { border-top: 1px solid var(--divider); }
.fact-k { width: 140px; flex-shrink: 0; font-family: var(--font-sans); font-size: var(--text-small); font-weight: 600; color: var(--text-muted); }

/* Example box: passage extract + questions */
.lesson-example {
  padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-row);
}
.ex-passage { font-size: 17px; line-height: 1.75; white-space: pre-line; }
.ex-q { margin-top: 16px; font-weight: 600; }
.ex-list, .ex-options { margin: 10px 0 0; padding-left: 26px; display: flex; flex-direction: column; gap: 6px; }
.ex-passage + .ex-list { margin-top: 16px; }
.ex-list.roman { list-style-type: lower-roman; }
.ex-list + .ex-options { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }

.flow { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.flow-step { padding: 8px 16px; background: var(--tint); border: 0; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; }
.flow-step + .flow-step { margin-top: 22px; position: relative; }
.flow-step + .flow-step::before { content: "\2193"; position: absolute; left: 20px; top: -21px; color: var(--accent); font-size: 14px; }

.diagram { margin: 16px 0 0; color: var(--text); }
.diagram svg { display: block; width: 100%; max-width: 320px; height: auto; }

.answer-line { display: flex; align-items: center; gap: 10px; }
.answer-tag {
  display: inline-block; padding: 2px 9px; border-radius: var(--radius-sm); background: var(--accent); color: #FFFFFF;
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; letter-spacing: 0; text-transform: none;
}

/* Nepali tip: the design's warm "Nepali help" box */
.tip-ne { margin-top: 36px; padding: 16px 20px; background: var(--warm); border-radius: var(--radius-row); color: var(--warm-text); }
.tip-ne .eyebrow { color: var(--orange-hover); }
.tip-ne p[lang="ne"] { margin-top: 6px; font-size: 16px; line-height: 1.8; }
.pane-task .speaking-tip { margin-top: 24px; }
.speaking-tip .tip-en { margin-top: 6px; line-height: 1.7; }

/* Previous / next */
.lesson-nav { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lesson-nav-link {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-row);
  color: var(--text); text-decoration: none; font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lesson-nav-link:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text); }
.lesson-nav-link.next { text-align: right; }

@media (max-width: 767px) {
  .lesson-example { padding: 16px; }
  .ex-passage { font-size: 16px; }
  .facts li { flex-direction: column; gap: 2px; }
  .fact-k { width: auto; }
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson-nav-link.next { text-align: left; }
  .bottom-link { font-size: 11px; }
}

/* Listening lessons: script label and small option line — added 2026-09-28 */
.ex-label { margin-bottom: 6px; font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.ex-small { margin-top: 6px; font-size: 15px; color: var(--text-muted); }
.lesson-example .facts { margin: 12px 0 0; }
.lesson-group + .lesson-group { margin-top: 36px; }

/* Writing lessons: wider charts, data tables and model answers — added 2026-09-30 */
.diagram.wide svg { max-width: 560px; }
.diagram + .diagram { margin-top: 20px; }
.ex-table { margin-top: 14px; width: 100%; max-width: 480px; border-collapse: collapse; font-size: 15px; }
.ex-table caption { caption-side: top; text-align: left; margin-bottom: 8px; font-weight: 700; }
.ex-table th, .ex-table td { padding: 8px 12px; border: 1px solid var(--border); text-align: right; }
.ex-table th[scope="row"], .ex-table thead th:first-child { text-align: left; }
.ex-table thead th { background: var(--tint); font-weight: 700; }
@media (max-width: 480px) {
  .ex-table { font-size: 14px; }
  .ex-table th, .ex-table td { padding: 6px 7px; }
}

/* Skill pages: Lessons and Practice parts that open on click — added 2026-09-30 */
.fold { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.fold > summary {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-size: var(--text-h2); font-weight: 700; line-height: 1.2; border-radius: var(--radius-lg);
  transition: background-color 0.15s ease;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "\25B8"; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tint); font-size: 13px; color: var(--accent); transition: transform 0.15s ease;
}
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary:hover { background: var(--subtle); }
.fold > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.fold-count {
  margin-left: auto; padding: 2px 10px; border-radius: var(--radius-sm); background: var(--tint);
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; color: var(--accent);
}
.fold-body { padding: 0 22px 22px; }
.fold-body > .note { margin-top: 0; }
.fold-sub { margin-top: 10px; background: var(--subtle); border-radius: var(--radius-row); border-color: var(--divider); }
.fold-sub > summary { padding: 13px 18px; font-family: var(--font-sans); font-size: var(--text-body); font-weight: 600; border-radius: var(--radius-row); }
.fold-sub > summary::before { width: 24px; height: 24px; font-size: 11px; background: var(--surface); }
.fold-sub > summary:hover { background: var(--tint); }
.fold-sub > .set-list { margin: 0 12px 12px; }
@media (max-width: 767px) {
  .fold > summary { padding: 14px 16px; }
  .fold-body { padding: 0 12px 14px; }
}

/* ==========================================================================
   Round 2 (30 Sep): closer to the design screens — look only, structure unchanged
   ========================================================================== */

/* 1. Home: four tall skill cards side by side (design: "All four modules").
      Computer: 4 in a row · tablet/small laptop: 2 + 2 · phone: stacked, laid out sideways. */
.skill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.skill-card {
  flex-direction: column; gap: 22px; min-height: 320px; padding: 26px 24px;
  border-radius: 24px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.skill-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(14, 43, 41, 0.10); }
.skill-card .skill-icon { width: 52px; height: 52px; border-radius: 16px; }
.skill-card .skill-icon .icon { width: 24px; height: 24px; }
.skill-card .skill-body { gap: 8px; }
.skill-card .skill-top { flex-direction: column-reverse; align-items: flex-start; gap: 2px; }
.skill-card .skill-name { font-size: 1.625rem; }
.skill-card .skill-desc { font-size: 0.9375rem; line-height: 1.55; }
.skill-card .skill-action { margin-top: auto; padding-top: 14px; }
.skill-card .skill-body { flex-grow: 1; }
/* Whole-card colours from the design */
.skill-card[href*="listening"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.skill-card[href*="listening"] .skill-icon { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; border: 0; }
.skill-card[href*="listening"] .skill-desc,
.skill-card[href*="listening"] .eyebrow { color: var(--on-teal-muted); }
.skill-card[href*="listening"] .skill-action { color: #FFFFFF; }
.skill-card[href*="listening"]:hover { border-color: var(--accent-hover); color: #FFFFFF; box-shadow: 0 10px 28px rgba(15, 95, 90, 0.28); }
.skill-card[href*="reading"] { background: var(--tint); border-color: var(--tint); }
.skill-card[href*="reading"] .skill-icon { background: var(--surface); color: var(--accent); }
.skill-card[href*="reading"]:hover { border-color: var(--accent); }
.skill-card[href*="writing"] { background: var(--surface); }
.skill-card[href*="writing"] .skill-icon { background: var(--subtle); border: 1px solid var(--border); }
.skill-card[href*="speaking"] { background: var(--warm); border-color: var(--warm); }
.skill-card[href*="speaking"] .skill-icon { background: var(--surface); color: var(--orange-hover); border: 0; }
.skill-card[href*="speaking"] .skill-desc { color: var(--warm-text); }
.skill-card[href*="speaking"] .skill-action { color: var(--orange-hover); }
.skill-card[href*="speaking"] .eyebrow { color: var(--orange-hover); }
.skill-card[href*="speaking"]:hover { border-color: var(--orange-hover); }
.skill-card[href*="listening"]:focus-visible { outline-color: var(--orange); }
@media (max-width: 1180px) {
  .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-card { min-height: 240px; }
}
@media (max-width: 767px) {
  .skill-grid { grid-template-columns: 1fr; gap: 12px; }
  .skill-card { flex-direction: row; align-items: flex-start; gap: 16px; min-height: 0; padding: 18px; border-radius: 18px; }
  .skill-card .skill-icon { width: 46px; height: 46px; border-radius: 14px; }
  .skill-card .skill-name { font-size: 1.375rem; }
  .skill-card .skill-action { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .skill-card:hover { transform: none; } }

/* 2. Practice header: back link + title on the left, the dark count pill in the centre
      (where the design shows its timer). */
.practice-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
.practice-bar .bar-start { min-width: 0; display: flex; align-items: center; gap: 16px; }
.practice-bar .practice-status { justify-self: center; min-height: 40px; padding: 0 18px; font-size: 17px; border-radius: 10px; }
@media (max-width: 860px) {
  .practice-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .practice-bar .bar-start { gap: 10px; }
  .practice-bar .bar-end { display: none; }
  .practice-bar .practice-status { justify-self: end; min-height: 36px; padding: 0 12px; font-size: 15px; }
}

/* 3. Choices: letter box + text; the radio circle is hidden but still used by keyboard and screen readers.
      TRUE / FALSE / NOT GIVEN and YES / NO / NOT GIVEN: three buttons side by side. */
.option-list { display: flex; flex-direction: column; gap: 10px; }
.option { align-items: center; }
.option input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.option { position: relative; }
.option:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.opt-letter {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--subtle); border: 1px solid var(--divider);
  font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.option:has(input:checked) .opt-letter { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.option-row { display: flex; flex-wrap: wrap; gap: 8px; }
.option.option-word {
  justify-content: center; min-height: 46px; padding: 10px 18px; border-radius: 12px;
  font-family: var(--font-head); font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
}
.option.option-word:has(input:checked) { background: var(--accent); border-color: var(--accent); box-shadow: none; color: #FFFFFF; }
.option.option-word:hover { border-color: var(--accent); }

/* 4. Reading passage: large title and paragraph letters in the margin */
.passage-title { margin: 6px 0 20px; font-family: var(--font-head); font-size: 1.875rem; font-weight: 700; line-height: 1.15; color: var(--text); }
.passage.passage-paras { white-space: normal; display: flex; flex-direction: column; gap: 18px; }
.passage-paras p { white-space: pre-line; }
.para { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; }
.para-letter { font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.8; color: var(--accent); }
@media (max-width: 767px) {
  .passage-title { font-size: 1.5rem; }
  .para { grid-template-columns: 26px minmax(0, 1fr); }
}

/* Module tags (design: Listening solid teal, Reading tint, Writing outline, Speaking warm) */
.skill-tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 1px 9px; border-radius: 8px;
  font-size: var(--text-label); font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--tint); color: var(--accent); border: 1px solid transparent;
}
.skill-tag-listening { background: var(--accent); color: #FFFFFF; }
.skill-tag-reading { background: var(--tint); color: var(--accent); }
.skill-tag-writing { background: var(--surface); color: var(--text); border-color: var(--border); }
.skill-tag-speaking { background: var(--warm); color: var(--orange-hover); }

/* 5. Lesson page: back link, skill tag + time, content in one white card, round Previous / Next */
.lesson-head h1 { margin-top: 10px; }
.lesson-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  font-size: var(--text-small); font-weight: 600; color: var(--accent); text-decoration: none;
}
.lesson-back:hover { color: var(--accent-hover); text-decoration: underline; }
.lesson-back span { font-size: 20px; line-height: 1; }
.lesson-meta { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.lesson-meta .lesson-time { font-size: var(--text-small); color: var(--text-muted); }
.lesson-card-wrap {
  padding: 8px 36px 32px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.lesson-card-wrap .lesson-section { margin-top: 28px; }
.lesson-card-wrap .lesson-example { background: var(--subtle); border-color: var(--divider); border-left-color: var(--accent); }
.lesson-card-wrap .facts, .lesson-card-wrap .set-list { background: var(--surface); }
.lesson-card-wrap .tip-ne { margin-top: 32px; }
.lesson-nav-link {
  flex-direction: column; justify-content: center; min-height: 64px; padding: 12px 28px;
  border: 1px solid var(--accent); border-radius: var(--radius-pill); color: var(--accent);
}
.lesson-nav-link .eyebrow { color: inherit; opacity: 0.85; }
.lesson-nav-link:hover { background: var(--tint); color: var(--accent-hover); box-shadow: none; }
.lesson-nav-link.next { background: var(--accent); color: #FFFFFF; }
.lesson-nav-link.next:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }
@media (max-width: 767px) {
  .lesson-card-wrap { padding: 4px 18px 22px; }
  .lesson-nav-link { border-radius: 24px; padding: 12px 22px; }
}

/* 6. Skill pages: lessons as a two-column grid of cards */
.lesson-grid { list-style: none; margin: 0 12px 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lesson-grid > li { display: flex; }
.lesson-card {
  flex: 1; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  color: var(--text); text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lesson-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text); }
.lesson-card-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lesson-card-title { margin-top: 4px; font-weight: 700; line-height: 1.35; }
.lesson-card-desc { font-size: var(--text-small); color: var(--text-muted); }
.lesson-card-time { font-size: 13px; color: var(--text-muted); }
@media (max-width: 900px) { .lesson-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .lesson-grid { margin: 0 8px 8px; } .lesson-card { padding: 14px; } }

/* 7. Progress: each saved result as a row inside one card (design "Your tests") */
.history-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 24px; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; }
.history-row + .history-row { border-top: 1px solid var(--divider); }
.history-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.history-title { font-weight: 700; }
.history-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.history-meta .date { font-size: 13px; color: var(--text-muted); }
.history-result { flex-shrink: 0; }
.history-result .score .bar { width: 96px; }
.history-empty { padding: 40px 0; text-align: center; color: var(--text-muted); }
.history-empty p { margin-bottom: 16px; }
@media (max-width: 767px) {
  .history-card { padding: 4px 16px; }
  .history-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .history-result, .history-result .score { width: 100%; }
  .history-result .score .bar { flex-grow: 1; width: auto; }
}

/* ==========================================================================
   Progress page stats (30 Sep) — worked out from saved results, display only.
   Colours: design teal scale (#E2EFED → #8FC1BA → #3E8C85 → #0F5F5A) for
   magnitude; warm tint only for "went down"; never red or green.
   ========================================================================== */
.section-title { margin: 36px 0 14px; font-size: var(--text-h2); font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
.section-sub { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 500; color: var(--text-muted); }
.stats { margin-bottom: 24px; }
.stats:empty { display: none; }

/* Top number cards */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-tile { padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.stat-label { font-size: var(--text-small); font-weight: 600; color: var(--text-muted); }
.stat-value { margin-top: 6px; font-family: var(--font-head); font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-sub { margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.stat-tile-hero { background: var(--accent); border-color: var(--accent); }
.stat-tile-hero .stat-label, .stat-tile-hero .stat-sub { color: var(--on-teal-muted); }
.stat-tile-hero .stat-value { color: #FFFFFF; }

/* One card per skill */
.skill-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.skill-stat {
  display: flex; flex-direction: column; gap: 14px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-top-width: 5px;
}
.skill-stat-listening { border-top-color: var(--accent); }
.skill-stat-reading { border-top-color: #8FC1BA; }
.skill-stat-writing { border-top-color: var(--border); }
.skill-stat-speaking { border-top-color: var(--warm-border); }
.skill-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.skill-stat-count { font-size: var(--text-small); font-weight: 600; color: var(--text-muted); }
.mini-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-stats > div { padding: 10px 12px; background: var(--subtle); border-radius: 12px; }
.mini-stats dt { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.mini-stats dd { margin: 2px 0 0; font-family: var(--font-head); font-size: 1.375rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.skill-stat-speaking .mini-stats > div { background: var(--warm); }
.skill-stat-speaking .mini-stats dt { color: var(--warm-text); }
.skill-stat-note, .skill-stat-empty { font-size: var(--text-small); color: var(--text-muted); }
.skill-stat-link { font-size: var(--text-small); font-weight: 600; }
.trend { align-self: flex-start; padding: 3px 10px; border-radius: 8px; background: var(--subtle); font-size: 13px; font-weight: 600; color: var(--text-muted); }
.trend-up { background: var(--tint); color: var(--accent); }
.trend-down { background: var(--warm); color: var(--orange-hover); }

/* Line chart: one series, 2px line, 9px markers, recessive grid */
.line-chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--divider); stroke-width: 1; }
.chart-axis { font-family: var(--font-sans); font-size: 9px; fill: var(--text-muted); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; transition: r 0.15s ease; }
.chart-hit { fill: transparent; cursor: pointer; }
.chart-point:hover .chart-dot, .chart-point:focus .chart-dot { r: 6.5; }
.chart-point:focus { outline: none; }
.chart-point:focus-visible .chart-hit { stroke: var(--orange); stroke-width: 2; }
.chart-empty { padding: 18px; border: 1px dashed var(--border); border-radius: 12px; font-size: 13px; color: var(--text-muted); text-align: center; }
.chart-tip {
  position: absolute; z-index: 50; max-width: 280px; padding: 7px 11px; border-radius: 10px;
  background: var(--text); color: #FFFFFF; font-size: 13px; font-weight: 500; line-height: 1.4;
  pointer-events: none; box-shadow: 0 6px 18px rgba(14, 43, 41, 0.18);
}

/* Last 4 weeks */
.activity-card { margin-top: 14px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px; }
.card-head h2 { font-size: 1.125rem; }
.card-head-sub { font-size: var(--text-small); color: var(--text-muted); }
.card-head-sub strong { color: var(--text); }
.activity-grid { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 5px; }
.day { display: block; aspect-ratio: 1; min-width: 8px; border-radius: 5px; background: var(--tint); cursor: default; }
.day:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.day-1 { background: #8FC1BA; }
.day-2 { background: #3E8C85; }
.day-3 { background: var(--accent); }
.day-today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text); }
.activity-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
.activity-key { display: inline-flex; align-items: center; gap: 4px; }
.activity-key .day { width: 12px; height: 12px; min-width: 0; border-radius: 3px; }

@media (max-width: 1180px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .skill-stat-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .stat-row { gap: 10px; }
  .stat-tile { padding: 16px; }
  .stat-value { font-size: 2rem; }
  .skill-stat, .activity-card { padding: 16px; }
  .mini-stats dd { font-size: 1.125rem; }
  .activity-grid { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
}

/* ==========================================================================
   Progress marks (30 Sep): score circles on practice sets, ticks on lessons
   ========================================================================== */
.set-mark { flex-shrink: 0; display: inline-flex; }
.ring { position: relative; width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--tint); stroke-width: 3.5; }
.ring-fill { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.ring-inner { position: relative; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ring-inner small { font-size: 10px; font-weight: 600; }
.set-untried .ring-inner { color: var(--text-muted); font-size: 13px; }
.ring-done { border-radius: 50%; background: var(--accent); color: #FFFFFF; }
.ring-done svg { position: static; width: 24px; height: 24px; transform: none; }
.set-progress { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--accent); }

/* Lessons: finished = teal tick circle */
.set-num-done { background: var(--accent); color: #FFFFFF; }
.set-num-done svg { width: 18px; height: 18px; }
.lesson-card-done { border-color: #8FC1BA; }
.fold-progress {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; color: var(--accent); white-space: nowrap;
}
.mini-bar { display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: var(--tint); overflow: hidden; }
.mini-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.6s ease; }
.fold-sub .mini-bar { background: var(--surface); }
.fold-progress-top .mini-bar { width: 120px; }
.progress-hint { margin: 0 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--tint); font-size: var(--text-small); }
.progress-hint a { font-weight: 700; }

/* Lesson page status next to the time */
.lesson-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-small); color: var(--text-muted); }
.lesson-status:not(:empty)::before { content: "·"; margin-right: 4px; color: var(--text-muted); }
.lesson-status-done { padding: 2px 10px 2px 6px; border-radius: 8px; background: var(--tint); color: var(--accent); font-weight: 700; }
.lesson-status-done::before { content: none !important; }
.lesson-status-done svg { width: 16px; height: 16px; }
.lesson-status-hint a { font-weight: 700; }
#lesson-end { display: block; height: 1px; }
@media (max-width: 767px) {
  .ring { width: 42px; height: 42px; }
  .mini-bar { width: 56px; }
  .fold-progress-top .mini-bar { width: 64px; }
}
@media (prefers-reduced-motion: reduce) { .ring-fill, .mini-bar > span { transition: none; } }

/* Answer review after submitting (30 Sep): ✓ / ✗ with words, never colour alone */
.question.q-right { border-color: #8FC1BA; }
.question.q-wrong { border-color: var(--warm-border); }
.q-feedback {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin-top: 4px; padding: 10px 14px; border-radius: 12px; font-size: var(--text-small);
}
.q-right .q-feedback { background: var(--tint); color: var(--accent-hover); }
.q-wrong .q-feedback { background: var(--warm); color: var(--warm-text); }
.q-mark { font-weight: 700; }
.q-wrong .q-mark { color: var(--orange-hover); }
/* Correct answer: tint + teal border + ✓ ; your wrong choice: warm + ✗ ; your right choice: solid teal */
.option.is-correct, .option.option-word.is-correct { background: var(--tint); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--accent); }
.option.is-correct .opt-letter { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.option.is-correct::after { content: "✓"; margin-left: auto; font-weight: 700; color: var(--accent); }
.option.option-word.is-correct::after, .option.option-word.is-wrong::after { margin-left: 8px; }
.option.is-correct:has(input:checked), .option.option-word.is-correct:has(input:checked) { background: var(--accent); color: #FFFFFF; }
.option.is-correct:has(input:checked)::after { color: #FFFFFF; }
.option.is-correct:has(input:checked) .opt-letter { background: #FFFFFF; color: var(--accent); }
.option.is-wrong:has(input:checked), .option.option-word.is-wrong:has(input:checked) {
  background: var(--warm); border-color: var(--orange-hover); box-shadow: 0 0 0 1px var(--orange-hover); color: var(--warm-text);
}
.option.is-wrong::after { content: "✗"; margin-left: auto; font-weight: 700; color: var(--orange-hover); }
.option.is-wrong .opt-letter { background: var(--surface); border-color: var(--warm-border); color: var(--orange-hover); }
.option:has(input:disabled) { cursor: default; }
.question input[readonly] { background: var(--subtle); }
.q-right input[readonly] { border-color: var(--accent); }
.q-wrong input[readonly] { border-color: var(--orange-hover); }
.answer-grid tr.q-wrong > th { background: var(--warm); }
.answer-grid tr.q-right > th { background: var(--tint); }
.answer-grid .grid-cell.is-correct { background: var(--accent); }
.answer-grid .grid-cell.is-correct input { accent-color: #FFFFFF; }
.answer-grid .grid-cell.is-wrong { background: var(--warm-border); }
.answer-grid tr .q-feedback { margin-top: 6px; padding: 6px 10px; background: transparent; }

/* "You have 3 unanswered questions" message */
.message.confirm-box { background: var(--warm); border-color: var(--warm-border); color: var(--warm-text); }
.confirm-box p { margin: 0; }
.confirm-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.confirm-actions button { min-height: 42px; padding: 8px 20px; }
.confirm-actions #submit-anyway { background: var(--text); border-color: var(--text); }
.confirm-actions #submit-anyway:hover { background: #000000; border-color: #000000; }

/* Lesson "Show answer" (30 Sep) */
.reveal-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  padding: 14px 16px; border: 1px dashed var(--border); border-radius: 14px; background: var(--subtle);
}
.reveal-prompt { font-size: var(--text-small); color: var(--text-muted); }
.reveal-btn { min-height: 42px; padding: 8px 20px; }
.reveal-btn[aria-expanded="true"] { background: var(--tint); }
.reveal-body { margin-top: 14px; }

/* ==========================================================================
   Word Bank (pg13_word_bank.html) — added 30 Sep
   ========================================================================== */
.nav-ne { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.nav-link[aria-current="page"] .nav-ne { color: var(--accent); }
.wb-ne { font-family: var(--font-head-deva); font-size: 0.6em; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
.wb { -webkit-user-select: none; user-select: none; }
.wb input { -webkit-user-select: text; user-select: text; }
.wb-taster { align-items: center; }
.wb-taster .icon { margin-top: 0; }

/* Search + tabs */
.wb-search {
  flex-direction: row; align-items: center; gap: 10px; margin: 0 0 16px; padding: 6px 6px 6px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.wb-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wb-search .icon { color: var(--text-muted); }
.wb-search input[type="search"] { flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; border: 0; background: transparent; font: inherit; color: var(--text); }
.wb-search input[type="search"]:focus { outline: none; box-shadow: none; }
.wb-search button { min-height: 44px; padding: 8px 22px; }
.wb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.wb-tabs [role="tab"] {
  min-height: 42px; padding: 8px 18px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text); border: 1px solid var(--border); font-weight: 600;
}
.wb-tabs [role="tab"]:hover { background: var(--tint); color: var(--accent); border-color: var(--accent); }
.wb-tabs [role="tab"][aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.wb-count { margin-left: 4px; padding: 1px 8px; border-radius: 8px; background: var(--tint); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.wb-tabs [aria-selected="true"] .wb-count { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }

.wb-view-head { margin-bottom: 16px; }
.wb-view-head h2 { font-size: var(--text-h2); margin: 4px 0 2px; }
.wb-filter { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.wb-filter-btn {
  display: inline-flex; align-items: center; min-height: 38px; padding: 6px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); font-size: var(--text-small); font-weight: 600; color: var(--text); text-decoration: none;
}
.wb-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.wb-filter-btn[aria-current="true"] { background: var(--tint); border-color: var(--accent); color: var(--accent); }

/* Topic cards */
.wb-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.wb-topic {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; min-height: 84px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  color: var(--text); text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wb-topic:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text); }
.wb-topic-name { font-weight: 700; line-height: 1.3; }
.wb-topic-count { font-size: 13px; color: var(--text-muted); }
.wb-topic-open { color: var(--accent); font-weight: 600; }

/* Word / idiom / phrase / mistake cards */
.wb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.wb-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.wb-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wb-word { font-size: 1.375rem; line-height: 1.2; }
.wb-phrase { font-size: 1.125rem; }
.wb-type { flex-shrink: 0; padding: 1px 9px; border-radius: 8px; background: var(--subtle); border: 1px solid var(--divider); font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.wb-task { background: var(--tint); border-color: var(--tint); color: var(--accent); }
.wb-meaning { color: var(--text); }
.wb-ne-box { padding: 8px 12px; border-radius: 12px; background: var(--warm); color: var(--warm-text); font-size: 15px; line-height: 1.7; }
.wb-example { padding: 8px 12px; border-left: 3px solid #8FC1BA; border-radius: 0 10px 10px 0; background: var(--subtle); font-style: italic; color: var(--text); }
.wb-label { margin-right: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); font-style: normal; }
.wb-similar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wb-chip { padding: 1px 9px; border-radius: 999px; background: var(--tint); font-size: 13px; color: var(--accent); }
.wb-use { font-size: var(--text-small); }
.wb-notes { font-size: 13px; color: var(--text-muted); }
.wb-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 8px; border-top: 1px solid var(--divider); }
.wb-topic-tag { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; padding: 1px 9px; border-radius: 8px; background: var(--subtle); }
.wb-topic-tag:hover { background: var(--tint); }
.wb-skill { margin-left: auto; font-size: 12.5px; color: var(--text-muted); }

.wb-pair { display: grid; gap: 8px; }
.wb-use-this, .wb-not-this { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; }
.wb-use-this { background: var(--tint); border: 1px solid #8FC1BA; }
.wb-not-this { background: var(--warm); border: 1px solid var(--warm-border); }
.wb-pair-label { font-size: 12.5px; font-weight: 700; }
.wb-use-this .wb-pair-label { color: var(--accent); }
.wb-not-this .wb-pair-label { color: var(--orange-hover); }
.wb-pair-text { font-weight: 600; }
.wb-not-this s { color: var(--warm-text); text-decoration-color: var(--orange-hover); }
.wb-why { font-size: var(--text-small); }

.wb-locked, .wb-empty {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 16px 18px;
  border: 1px dashed var(--border); border-radius: 16px; background: var(--surface); font-size: var(--text-small); color: var(--text-muted);
}
.wb-locked .icon { flex-shrink: 0; color: var(--accent); }
.wb-locked strong { color: var(--text); }
.wb-locked a { font-weight: 700; }
.wb-pager { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wb-page {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 20px; border-radius: var(--radius-pill);
  border: 1px solid var(--accent); color: var(--accent); font-weight: 600; text-decoration: none;
}
.wb-page:hover { background: var(--tint); }
.wb-page-next { background: var(--accent); color: #FFFFFF; }
.wb-page-next:hover { background: var(--accent-hover); color: #FFFFFF; }
.wb-page-of { font-size: var(--text-small); color: var(--text-muted); }

/* Home: Word Bank card under the four skills */
.wb-home-card {
  margin-top: 16px; display: flex; align-items: center; gap: 18px; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px;
  color: var(--text); text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wb-home-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text); }
.wb-home-card .skill-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--text); color: #FFFFFF; }
.wb-home-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wb-home-card .skill-action { margin: 0; white-space: nowrap; }

@media (max-width: 900px) { .wb-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .wb-search { padding-left: 14px; }
  .wb-search button { padding: 8px 16px; }
  .wb-tabs { gap: 6px; }
  .wb-tabs [role="tab"] { min-height: 40px; padding: 6px 14px; font-size: var(--text-small); }
  .wb-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wb-topic { padding: 14px; min-height: 76px; }
  .wb-card { padding: 16px; }
  .wb-home-card { flex-wrap: wrap; padding: 18px; border-radius: 18px; }
  .wb-home-card .skill-action { width: 100%; padding-left: 70px; }
}

/* ==========================================================================
   Split log-in / sign-up screen (item 9, 30 Sep): teal panel left, form right
   ========================================================================== */
.auth-split { flex-direction: row; min-height: 100vh; }
.auth-panel {
  width: 44%; max-width: 620px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 40px 56px;
  background: var(--accent); color: #FFFFFF;
}
.auth-panel-brand { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; }
.auth-panel-brand:hover { color: #FFFFFF; }
.auth-panel-brand .brand-mark { background: #FFFFFF; color: var(--accent); }
.auth-panel-brand .brand-name { color: #FFFFFF; }
.auth-panel-body { margin: auto 0; padding: 32px 0; }
.auth-panel-title { font-size: 2.25rem; line-height: 1.15; color: #FFFFFF; letter-spacing: -0.01em; }
.auth-panel-title [lang="ne"] { font-family: var(--font-head-deva); line-height: inherit; }
.auth-panel-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-panel-list li { position: relative; padding-left: 32px; font-size: 1.0625rem; line-height: 1.5; color: #FFFFFF; }
.auth-panel-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16); font-size: 13px; font-weight: 700;
}
.auth-panel-ne { margin-top: 28px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); color: var(--on-teal-muted); font-size: 16px; }
.auth-panel-note { font-size: var(--text-label); color: var(--on-teal-muted); }
.auth-side { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.auth-split .auth-header { justify-content: flex-end; }
.auth-split .auth-header .brand { display: none; }
.auth-split .auth-card { border-color: transparent; background: transparent; padding: 24px 8px; }
.auth-split .site-footer { display: none; }

@media (max-width: 900px) {
  .auth-panel { width: 40%; padding: 32px 32px; }
  .auth-panel-title { font-size: 1.75rem; }
}
/* Phone: the panel becomes a short band at the top (logo + headline), form below */
@media (max-width: 767px) {
  .auth-split { flex-direction: column; }
  .auth-panel { width: auto; max-width: none; position: static; height: auto; padding: 18px 16px 20px; }
  .auth-panel-body { margin: 14px 0 0; padding: 0; }
  .auth-panel-title { font-size: 1.25rem; }
  .auth-panel-list, .auth-panel-ne, .auth-panel-note { display: none; }
  .auth-side { min-height: 0; }
  .auth-split .auth-header { display: none; }
  .auth-split .auth-card { padding: 24px 4px; }
  .auth-split .site-footer { display: block; }
}

/* ==========================================================================
   Practice page: question-number bar + "Flag for review" (item 10)
   ========================================================================== */
.q-nav {
  flex-shrink: 0; display: flex; align-items: center; gap: 14px;
  padding: 10px 28px; background: var(--surface); border-top: 1px solid var(--divider);
}
.q-nav-label { flex-shrink: 0; font-size: var(--text-label); font-weight: 600; color: var(--text-muted); }
.q-nav-list {
  position: relative; list-style: none; margin: 0; padding: 4px 2px; display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.q-nav-list li { flex-shrink: 0; }
.q-nav-btn {
  position: relative; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.q-nav-btn:hover { background: var(--tint); border-color: var(--accent); color: var(--accent); }
.q-nav-btn.is-answered { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.q-nav-btn.is-answered:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }
.q-nav-btn[aria-current="step"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
/* Flagged: small orange corner */
.q-nav-btn.is-flagged::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px;
  background: var(--orange); border-radius: 0 var(--radius-sm) 0 6px;
}
/* After submitting: same colours as the answer review */
.q-nav-btn.is-right, .q-nav-btn.is-right:hover { background: var(--tint); border-color: var(--accent); color: var(--accent); }
.q-nav-btn.is-wrong, .q-nav-btn.is-wrong:hover { background: var(--warm); border-color: var(--orange-hover); color: var(--warm-text); }
.q-nav-btn.is-right::before, .q-nav-btn.is-wrong::before {
  position: absolute; top: -7px; right: -6px; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 10px; line-height: 1; color: #FFFFFF;
}
.q-nav-btn.is-right::before { content: "✓"; background: var(--accent); }
.q-nav-btn.is-wrong::before { content: "✗"; background: var(--orange-hover); }
.q-nav.is-reviewed .q-nav-list { padding-top: 8px; }

/* Flag button inside each question card */
.question { position: relative; }
.question > .flag-btn { position: absolute; top: 14px; right: 14px; }
.question:has(> .flag-btn) > legend, .question:has(> .flag-btn) > label:not(.option) { padding-right: 96px; }
.flag-btn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-muted);
  font-size: var(--text-label); font-weight: 600;
}
.flag-btn .icon { width: 15px; height: 15px; }
.flag-btn:hover { background: var(--warm); border-color: var(--warm-border); color: var(--orange-hover); }
.flag-btn[aria-pressed="true"], .flag-btn[aria-pressed="true"]:hover { background: var(--warm); border-color: var(--orange-hover); color: var(--orange-hover); }
.flag-btn[aria-pressed="true"] .icon path:last-child { fill: currentColor; }
.question.is-flagged { border-color: var(--warm-border); }
/* In the answer grid (map questions) the flag sits at the end of the row label */
.answer-grid th .flag-btn { float: right; margin-left: 8px; min-height: 28px; padding: 0 7px; }
.answer-grid th .flag-btn .flag-text { display: none; }
tr.is-flagged th { background: var(--warm); }

@media (max-width: 860px) {
  .q-nav { position: sticky; bottom: 0; z-index: 10; padding: 8px 12px; gap: 10px; }
  .q-nav-label { display: none; }
}
@media (max-width: 480px) {
  .flag-btn .flag-text { display: none; }
  .flag-btn { padding: 0 8px; }
  .question:has(> .flag-btn) > legend, .question:has(> .flag-btn) > label:not(.option) { padding-right: 44px; }
  .answer-grid th .flag-btn { padding: 0 6px; }
}

/* ==========================================================================
   Public website for visitors (30 Sep 2026): top menu + landing page.
   <html class="visitor"> = not logged in. The side menu is for students only.
   ========================================================================== */
.btn-orange { background: var(--orange); border-color: var(--orange); color: #FFFFFF; }
.btn-orange:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: #FFFFFF; }

html:not(.visitor) .visitor-only, html:not(.visitor) .site-header { display: none; }
.visitor .member-only, .visitor .app.member-only { display: none; }
.visitor .sidebar, .visitor .topbar, .visitor .bottom-nav { display: none !important; }
.visitor .app { display: block; padding-bottom: 0; }
.visitor .app .main { max-width: calc(var(--content-w) + 144px); margin: 0 auto; }
.visitor .rail-link[href*="pg04_dashboard"] { display: none; }

/* ---------- Top menu ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface); border-bottom: 1px solid var(--divider);
}
.site-header-inner {
  max-width: 1200px; margin: 0 auto; height: 72px; padding: 0 32px;
  display: flex; align-items: center; gap: 24px;
}
.site-header .brand { padding: 0; }
.site-menu { flex-grow: 1; display: flex; align-items: center; gap: 4px; }
.menu-link, .menu-drop > summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 42px; padding: 0 14px;
  border-radius: var(--radius-pill); color: var(--text); font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer; list-style: none;
}
.menu-drop > summary::-webkit-details-marker { display: none; }
.menu-link:hover, .menu-drop > summary:hover, .menu-drop[open] > summary { background: var(--tint); color: var(--accent); }
.menu-link[aria-current="page"] { color: var(--accent); background: var(--tint); }
.menu-chev { width: 16px; height: 16px; transition: transform 0.15s ease; }
.menu-drop[open] .menu-chev { transform: rotate(180deg); }
.menu-drop { position: relative; }
.menu-panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; z-index: 5;
  display: flex; flex-direction: column; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-row);
  box-shadow: 0 12px 32px rgba(14, 43, 41, 0.12);
}
.menu-panel a { padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; text-decoration: none; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--tint); color: var(--accent); }
.menu-auth { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.menu-auth .btn { min-height: 42px; padding: 8px 20px; }
.menu-toggle, .menu-toggle:hover { display: none; }

/* ---------- Landing page ---------- */
.landing { background: var(--bg); overflow-x: clip; }
.visitor .fold, .visitor #lessons, .visitor #practice { scroll-margin-top: 88px; }
.landing main { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.lp-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center;
  padding: 72px 0 88px;
}
.lp-hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--text);
}
.lp-sathi { color: var(--accent); }
.lp-ne {
  margin-top: 18px; font-family: var(--font-head-deva); font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.4; color: var(--orange-hover);
}
.lp-lead { margin-top: 18px; max-width: 34em; font-size: 1.125rem; color: var(--text-muted); }
.lp-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.lp-actions .btn { min-height: 54px; padding: 12px 28px; font-size: 1.0625rem; }

/* Card stack */
.lp-try { width: 100%; max-width: 460px; justify-self: end; }
.lp-try-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.lp-count { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 700; color: var(--text-muted); }
.lp-stack { position: relative; height: 460px; touch-action: pan-y; }
.lp-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(14, 43, 41, 0.10);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.lp-card[data-pos="0"] { z-index: 3; }
.lp-card[data-pos="1"] { z-index: 2; transform: translate(14px, 14px) rotate(2deg); opacity: 0.9; }
.lp-card[data-pos="2"] { z-index: 1; transform: translate(28px, 28px) rotate(4deg); opacity: 0.7; }
.lp-card[data-pos="1"] > *, .lp-card[data-pos="2"] > * { visibility: hidden; }
.lp-card[data-pos="gone"] { z-index: 0; transform: translateX(-40px) rotate(-4deg); opacity: 0; pointer-events: none; }
.lp-tag { font-size: var(--text-label); font-weight: 600; color: var(--text-muted); }

/* Card 1: flip */
.lp-word { padding: 0; border: 0; background: transparent; box-shadow: none; perspective: 1200px; }
.lp-flip, .lp-flip:hover {
  position: relative; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius-lg);
  background: transparent; color: var(--text); font-weight: 400; text-align: left;
  transform-style: preserve-3d; transition: transform 0.7s ease;
}
.lp-flip.is-flipped { transform: rotateY(180deg); }
.lp-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 32px; border-radius: var(--radius-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 40px rgba(14, 43, 41, 0.10);
}
.lp-front { background: var(--accent); color: #FFFFFF; }
.lp-front .lp-tag, .lp-front .lp-hint { color: var(--on-teal-muted); }
.lp-back { background: var(--surface); border: 1px solid var(--border); transform: rotateY(180deg); }
.lp-word-main { font-family: var(--font-head); font-size: 3rem; font-weight: 700; line-height: 1.1; }
.lp-word-type { font-size: 1.0625rem; font-style: italic; color: var(--on-teal-muted); }
.lp-word-ne { font-family: var(--font-head-deva); font-size: 2.6rem; font-weight: 700; color: var(--orange-hover); line-height: 1.3; }
.lp-word-en { font-size: 1.125rem; font-weight: 500; }
.lp-word-ex { font-style: italic; color: var(--text-muted); }
.lp-hint { margin-top: auto; font-size: var(--text-label); font-weight: 600; color: var(--text-muted); }
.lp-front .lp-tag { margin-bottom: auto; }
.lp-back .lp-tag { margin-bottom: auto; }

/* Card 2: question */
.lp-quote {
  margin: 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 15px; line-height: 1.6;
}
.lp-statement { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.lp-answers { display: flex; gap: 8px; }
.lp-ans, .lp-ans:hover {
  flex: 1; min-height: 44px; padding: 6px 8px; font-size: 14px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.lp-ans:hover { border-color: var(--accent); color: var(--accent); }
.lp-ans.is-right, .lp-ans.is-right:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.lp-ans.is-wrong, .lp-ans.is-wrong:hover { background: var(--warm); border-color: var(--orange-hover); color: var(--warm-text); }
.lp-feedback:empty { display: none; }
.lp-feedback { padding: 12px 14px; border-radius: var(--radius); font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.lp-feedback.ok { background: var(--tint); color: var(--accent-hover); }
.lp-feedback.no { background: var(--warm); color: var(--warm-text); }
.lp-verdict { font-weight: 700; }
.lp-tip { font-family: var(--font-deva, "Noto Sans Devanagari", sans-serif); }

/* Card 3 */
.lp-end { background: var(--text); border-color: var(--text); color: #FFFFFF; justify-content: center; }
.lp-end-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.lp-end-sub { color: var(--on-teal-muted); font-size: 15px; }
.lp-end-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-end-list li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.lp-end-list .icon { color: #8FC1BA; }

.lp-controls { margin-top: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-nav-btn, .lp-nav-btn:hover { min-height: 42px; padding: 6px 18px; background: var(--surface); color: var(--accent); border-color: var(--border); }
.lp-nav-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--tint); }
.lp-nav-btn:disabled { visibility: hidden; }
.lp-next, .lp-next:hover:not(:disabled) { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.lp-dots { display: flex; gap: 6px; }
.lp-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: width 0.2s ease; }
.lp-dots span.on { width: 22px; border-radius: 4px; background: var(--accent); }

/* Sections */
.lp-section { padding: 56px 0; border-top: 1px solid var(--divider); }
.lp-h2 { font-size: 2rem; letter-spacing: -0.01em; margin-bottom: 28px; }
.lp-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-why-item { padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.lp-why-item h3 { margin: 16px 0 8px; font-size: 1.25rem; }
.lp-why-item p { color: var(--text-muted); }
.lp-why-icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--accent);
}
.lp-why-icon .icon { width: 24px; height: 24px; }
.lp-why-ne { background: var(--warm); color: var(--orange-hover); font-family: var(--font-head-deva); font-size: 24px; font-weight: 700; }
.lp-account {
  padding: 44px 48px; background: var(--tint); border-radius: var(--radius-lg);
}
.lp-account .lp-h2 { color: var(--accent-hover); max-width: 22em; }
.lp-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.lp-benefits li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.0625rem; }
.lp-check {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #FFFFFF;
}
.lp-check .icon { width: 16px; height: 16px; }
.lp-final {
  margin: 24px 0 72px; padding: 56px 32px; border-radius: var(--radius-lg);
  background: var(--accent); color: #FFFFFF; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.lp-final h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.lp-final .btn { min-height: 56px; padding: 12px 36px; font-size: 1.0625rem; }
.lp-footer {
  max-width: 1200px; margin: 0 auto; padding: 24px 32px 40px; border-top: 1px solid var(--divider);
  font-size: var(--text-label); color: var(--text-muted);
}
.lp-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 12px; }
.lp-footer-links a { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .lp-flip { transition: none; }
}

/* Tablet */
@media (max-width: 1024px) {
  .lp-hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 0 64px; }
  .lp-try { justify-self: start; }
  .site-menu .menu-link, .menu-drop > summary { padding: 0 10px; }
}

/* Phone: menu folds into ☰ */
@media (max-width: 860px) {
  .site-header-inner { height: 64px; padding: 0 16px; gap: 12px; }
  .site-header .brand-sub { display: none; }
  .menu-toggle, .menu-toggle:hover {
    display: inline-flex; margin-left: auto; min-height: 44px; width: 44px; padding: 0;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .site-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 16px 16px;
    background: var(--surface); border-bottom: 1px solid var(--divider);
    box-shadow: 0 16px 32px rgba(14, 43, 41, 0.12); max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .site-header.menu-open .site-menu { display: flex; }
  .menu-link, .menu-drop > summary { width: 100%; justify-content: space-between; min-height: 48px; }
  .menu-panel { position: static; box-shadow: none; border: 0; padding: 0 0 6px 14px; min-width: 0; }
  .menu-auth { margin: 10px 0 0; flex-direction: column; align-items: stretch; }
  .menu-auth .btn { min-height: 48px; }
  .visitor .app .main { padding-top: 24px; }
}
@media (max-width: 767px) {
  .landing main { padding: 0 16px; }
  .lp-hero { padding: 32px 0 48px; }
  .lp-actions .btn { flex: 1 1 100%; }
  .lp-try { max-width: none; }
  .lp-stack { height: 480px; }
  .lp-card { padding: 22px; }
  .lp-card[data-pos="1"] { transform: translateY(12px) scale(0.97); }
  .lp-card[data-pos="2"] { transform: translateY(24px) scale(0.94); }
  .lp-word-main { font-size: 2.5rem; }
  .lp-section { padding: 40px 0; }
  .lp-h2 { font-size: 1.6rem; margin-bottom: 20px; }
  .lp-why { grid-template-columns: 1fr; }
  .lp-account { padding: 28px 20px; }
  .lp-benefits { grid-template-columns: 1fr; }
  .lp-final { margin-bottom: 48px; padding: 40px 20px; }
  .lp-footer { padding: 20px 16px 32px; }
}

/* ---------- IELTS guide (30 Sep 2026) ---------- */
.guide-grid { margin: 0; }
.guide-grid .set-num { flex-shrink: 0; }
.guide-checked { margin-top: 20px; font-size: var(--text-small); }
.guide-tag { background: var(--tint); color: var(--accent); }
.guide-sources .bullets a { word-break: break-word; }
.lp-guide-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lp-guide-head .lp-h2 { margin-bottom: 6px; }
.lp-guide-all { font-weight: 600; }
.lp-guide-sub { margin-bottom: 24px; color: var(--text-muted); }
.lp-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-guide-card {
  display: flex; flex-direction: column; gap: 8px; padding: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp-guide-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text); }
.lp-guide-title { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.lp-guide-desc { color: var(--text-muted); }
.lp-guide-more { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--accent); }
@media (max-width: 767px) { .lp-guide { grid-template-columns: 1fr; } }

/* ---------- Word Bank: cards fold closed (30 Sep 2026) ---------- */
.wb-fold { gap: 0; padding: 0; }
.wb-fold > summary {
  list-style: none; cursor: pointer; padding: 14px 18px; border-radius: var(--radius-lg);
  display: flex; align-items: center; gap: 10px;
}
.wb-fold > summary::-webkit-details-marker { display: none; }
.wb-fold > summary .wb-word { font-size: 1.125rem; flex: 1 1 auto; min-width: 0; }
.wb-fold > summary .wb-type { order: 2; }
.wb-fold-end { order: 3; margin-left: 4px; display: inline-flex; color: var(--accent); }
.wb-chev { width: 18px; height: 18px; transition: transform 0.15s ease; }
.wb-fold[open] .wb-chev { transform: rotate(180deg); }
.wb-fold > summary:hover { background: var(--tint); }
.wb-fold[open] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wb-fold[open] > summary { border-bottom: 1px solid var(--divider); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.wb-fold-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; }
.wb-mistake-head { display: flex; gap: 8px; align-items: baseline; }
.wb-ok-mark { color: var(--accent); font-weight: 700; }
@media (max-width: 767px) { .wb-fold > summary { padding: 13px 14px; } .wb-fold-body { padding: 12px 14px 16px; } }

/* ---------- Visitor previews on practice pages (30 Sep 2026) ---------- */
.lock-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 14px 16px;
  background: var(--tint); border: 1px dashed #8FC1BA; border-radius: var(--radius-row);
  font-size: var(--text-small); line-height: 1.55; color: var(--accent-hover);
}
.lock-note .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.lock-note a { font-weight: 600; }
.lock-note-inline { margin-top: 12px; }

/* ---------- How it works (30 Sep 2026) ---------- */
.hiw-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hiw-steps li { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.hiw-steps h2 { margin: 14px 0 6px; font-size: 1.25rem; }
.hiw-steps p { color: var(--text-muted); }
.hiw-num {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #FFFFFF; font-family: var(--font-head); font-weight: 700;
}
.hiw-section { margin-top: 40px; }
.hiw-section > h2 { font-size: var(--text-h2); margin-bottom: 8px; }
.hiw-section > .muted { margin-bottom: 16px; }
.hiw-free { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hiw-free-card {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); text-decoration: none;
}
.hiw-free-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text); }
.hiw-free-card strong { font-family: var(--font-head); font-size: 1.125rem; }
.hiw-free-card span { color: var(--text-muted); }
.hiw-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.hiw-table { width: 100%; border-collapse: collapse; }
.hiw-table th, .hiw-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--divider); }
.hiw-table thead th { border-top: 0; background: var(--bg); font-size: var(--text-small); color: var(--text-muted); }
.hiw-table thead th:last-child { background: var(--tint); color: var(--accent-hover); }
.hiw-table tbody th { width: 26%; font-weight: 600; }
.hiw-table td { width: 37%; color: var(--text-muted); }
.hiw-table td.hiw-acc { background: rgba(226, 239, 237, 0.45); color: var(--text); font-weight: 500; }
.hiw-final {
  margin: 44px 0 24px; padding: 44px 28px; border-radius: var(--radius-lg); background: var(--accent); color: #FFFFFF;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hiw-final h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.hiw-final p { color: var(--on-teal-muted); }
.hiw-final .btn { min-height: 54px; padding: 12px 34px; }
.hiw-final .hiw-login a { color: #FFFFFF; font-weight: 600; }
@media (max-width: 767px) {
  .hiw-steps, .hiw-free { grid-template-columns: 1fr; }
  .hiw-table thead { display: none; }
  .hiw-table tr { display: block; padding: 12px 16px; border-top: 1px solid var(--divider); }
  .hiw-table tr:first-child { border-top: 0; }
  .hiw-table th, .hiw-table td { display: block; width: auto; padding: 4px 0; border: 0; background: none !important; }
  .hiw-table td::before { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
  .hiw-table tbody th, .hiw-table td { width: auto; }
  .hiw-table td:nth-of-type(1)::before { content: "Just looking"; }
  .hiw-table td:nth-of-type(2)::before { content: "With a free account"; color: var(--accent); }
}

/* ---------- Copy protection on every page (30 Sep 2026) ---------- */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.pdf-btn { margin-top: 16px; min-height: 44px; padding: 8px 20px; font-size: 15px; }
.pdf-btn .icon { width: 18px; height: 18px; }
.page-head h1 + p { margin-top: 10px; color: var(--text-muted); font-size: 1.0625rem; }

/* ---------- Nepali explanation per lesson section (1 Oct 2026) ---------- */
.ne-btn, .ne-btn:hover {
  min-height: 34px; padding: 4px 14px; margin: -4px 0 12px; gap: 6px;
  background: var(--warm); color: var(--orange-hover); border: 1px solid var(--warm-border);
  font-size: 14px; font-weight: 600;
}
.ne-btn:hover { border-color: var(--orange-hover); }
.ne-btn [lang="ne"] { font-family: var(--font-head-deva); line-height: 1.3; }
.ne-btn::after { content: "+"; font-weight: 700; }
.ne-btn.is-open::after { content: "−"; }
.ne-explain { margin: 0 0 14px; padding: 14px 18px; background: var(--warm); border-left: 3px solid var(--orange); border-radius: 0 var(--radius-row) var(--radius-row) 0; color: var(--warm-text); }
.ne-explain p[lang="ne"] { font-size: 16px; line-height: 1.85; }

/* ---------- "Why" explanation under each answer, English + Nepali (1 Oct 2026) ---------- */
.q-explain { flex: 1 1 100%; margin-top: 6px; padding-top: 10px; border-top: 1px dashed currentColor; display: flex; flex-direction: column; gap: 6px; }
.q-explain p { margin: 0; line-height: 1.6; }
.q-explain-ne { font-size: 15px; line-height: 1.85; }
.q-right .q-explain { border-top-color: #8FC1BA; }
.q-wrong .q-explain { border-top-color: var(--warm-border); }
.answer-grid tr.q-explain-row > td { width: auto; padding: 10px 14px; text-align: left; font-size: var(--text-small); }
.answer-grid tr.q-explain-row.q-right > td { background: var(--tint); color: var(--accent-hover); }
.answer-grid tr.q-explain-row.q-wrong > td { background: var(--warm); color: var(--warm-text); }
.answer-grid tr.q-explain-row .q-explain { margin-top: 0; padding-top: 0; border-top: 0; }

/* Landing card stack: 4th card waits hidden behind the others */
.lp-card[data-pos="3"] { z-index: 0; transform: translate(28px, 28px) rotate(4deg); opacity: 0; pointer-events: none; }
.lp-card[data-pos="3"] > * { visibility: hidden; }

/* Landing card 3: what the answer review looks like with an account */
.lp-review { gap: 12px; }
.lp-review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lp-account-pill { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--tint); color: var(--accent); font-size: var(--text-label); font-weight: 700; }
.lp-review-q { font-family: var(--font-head); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.lp-review-q .lp-gap { display: inline-block; min-width: 92px; padding: 0 8px; border-bottom: 2px solid var(--orange-hover); color: var(--warm-text); font-family: var(--font-sans); font-weight: 600; }
.lp-review-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius); background: var(--warm); color: var(--warm-text); font-size: 14px; line-height: 1.5; }
.lp-review-box p { margin: 0; }
.lp-review-mark { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.lp-review-mark .q-mark { color: var(--orange-hover); }
.lp-review-box .q-explain { margin-top: 0; border-top-color: var(--warm-border); }
.lp-review-box .q-explain-ne { font-size: 14px; line-height: 1.75; }
@media (max-width: 767px) {
  .lp-card[data-pos="3"] { transform: translateY(24px) scale(0.94); }
}

/* "With a free account" label on every landing card (1 Oct 2026) */
.lp-face .lp-review-head { width: 100%; margin-bottom: auto; }
.lp-front .lp-tag, .lp-back .lp-tag { margin-bottom: 0; }
.lp-front .lp-account-pill { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.lp-end .lp-account-pill { align-self: flex-start; background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }

/* IELTS guide: English / Nepali switch (1 Oct 2026; not used in V1) */
.lang-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); }
.lang-switch a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 16px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.lang-switch a[lang="ne"] { font-family: var(--font-head-deva); }
.lang-switch a:hover { background: var(--tint); color: var(--accent); }
.lang-switch a[aria-current="true"] { background: var(--accent); color: #FFFFFF; }
.lesson-head .lang-switch { display: flex; width: max-content; margin-top: 10px; }
.guide[lang="ne"] h1, .guide[lang="ne"] h2 { font-family: var(--font-head-deva); }
.guide[lang="ne"] p, .guide[lang="ne"] li { line-height: 1.8; }

/* ---------- Teacher reviews of Writing (1 Oct 2026) ---------- */
.review-offer { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.review-offer-text { margin: 0 0 10px; font-size: 15px; }
.review-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.review-btn { min-height: 40px; padding: 6px 16px; font-size: 14px; }
.review-left { font-size: var(--text-small); color: var(--text-muted); }
.review-status { margin: 6px 0 0; font-size: var(--text-small); font-weight: 600; }
.review-waiting { color: var(--warm-text); }
.review-done { color: var(--accent); }
.review-none { color: var(--text-muted); font-weight: 500; }
.history-result .review-ask, .history-result .review-status { justify-content: flex-end; text-align: right; }
.reviews-section { margin-bottom: 8px; }
.review-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.review-empty { padding: 16px 20px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.review-card { padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 14px; }
.review-card-waiting { border-style: dashed; }
.review-card-waiting p { margin: 0; }
.review-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.review-band { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--accent); color: #FFFFFF; }
.review-band-num { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; }
.review-band-sub { font-size: var(--text-label); color: var(--on-teal-muted, #CFE5E2); }
.review-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.review-areas li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--bg); border-radius: var(--radius); }
.review-area-band { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--accent); font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; }
.review-area-text { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-small); color: var(--text-muted); }
.review-area-text strong { color: var(--text); font-size: 15px; }
.review-tips { padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--tint); border-radius: 0 var(--radius) var(--radius) 0; }
.review-tips p:last-child { margin: 4px 0 0; line-height: 1.7; }
.review-label { margin: 0; font-size: var(--text-small); }
.teacher-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.teacher-row-main { display: flex; flex-direction: column; gap: 2px; }
.hours { flex: none; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--tint); color: var(--accent); font-size: var(--text-label); font-weight: 700; }
.hours-soon, .hours-late { background: var(--warm); color: var(--orange-hover); }
.hours-done { background: var(--bg); color: var(--text-muted); }
.teacher-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.teacher-mark { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.essay-text p { line-height: 1.8; margin: 0 0 12px; }
.word-pill { margin-left: 8px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--tint); color: var(--accent); font-size: var(--text-label); text-transform: none; letter-spacing: 0; }
.word-pill-short { background: var(--warm); color: var(--orange-hover); }
#mark-form { display: flex; flex-direction: column; gap: 10px; }
.mark-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.mark-row select { width: 110px; }
.mark-total { margin: 6px 0 0; font-size: 1.0625rem; }
.mark-total strong { font-family: var(--font-head); font-size: 1.5rem; color: var(--accent); }
.mark-rule { margin: 0; font-size: var(--text-small); }
.marking-guide .fold { margin-top: 8px; }
.guide-area-body { padding: 4px 16px 14px; }
@media (max-width: 900px) {
  .teacher-grid { grid-template-columns: 1fr; }
  .teacher-mark { position: static; }
  .review-areas { grid-template-columns: 1fr; }
}

/* Private teacher area: own top bar, no student menu (1 Oct 2026) */
.staff-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.staff-user { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; }
.staff-logout { min-height: 38px; padding: 4px 16px; font-size: 14px; white-space: nowrap; }
.staff-main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 48px; }
.staff-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.staff-login .auth-card { display: flex; flex-direction: column; gap: 10px; }
.staff-login .brand { margin: 0 0 8px; }
.staff-login h1 { margin: 0 0 6px; font-size: 1.6rem; }
@media (max-width: 600px) { .staff-bar { padding: 10px 16px; } .staff-main { padding: 20px 16px 40px; } }

/* Writing Task 1 picture on the practice page (1 Oct 2026) */
.task-picture { margin: 18px 0 0; }
.task-picture img { display: block; width: 100%; max-width: 620px; height: auto; border: 1px solid var(--border); border-radius: 14px; background: #FFFFFF; -webkit-user-drag: none; }
.task-picture.is-preview img { opacity: 0.85; }
.task-picture figcaption { margin-top: 10px; }

/* ---------- Writing model answers (1 Oct 2026): calm, one thing at a time ---------- */
.model-answers { margin-top: 18px; }
.model-answers:empty { display: none; }
.ma-open { min-height: 44px; }
.ma-wrap { margin-top: 14px; }
.ma-panel { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 12px; }
.ma-pills { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); width: max-content; }
.ma-pill, .ma-pill:hover { min-height: 38px; padding: 4px 18px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font-weight: 600; font-size: 15px; }
.ma-pill:hover { background: var(--tint); color: var(--accent); }
.ma-pill[aria-selected="true"] { background: var(--accent); color: #FFFFFF; }
.ma-meta { margin: 4px 0 0; font-size: var(--text-small); color: var(--text-muted); }
.ma-meta strong { color: var(--text); }
.ma-hint { margin: -6px 0 0; font-size: var(--text-small); }
.ma-paras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ma-para-btn, .ma-para-btn:hover { display: grid; align-items: start; grid-template-columns: 112px 1fr; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); text-align: left; font-weight: 400; font-size: 16px; line-height: 1.75; cursor: pointer; }
.ma-para-btn:hover { background: var(--bg); }
.ma-para.is-open .ma-para-btn { background: var(--tint); border-color: var(--border); }
.ma-label { padding-top: 3px; font-size: var(--text-label); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ma-why { margin: 6px 0 10px 124px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--bg); border-radius: 0 12px 12px 0; }
.ma-why p { margin: 4px 0 8px; line-height: 1.7; }
.ma-why .eyebrow { margin: 6px 0 2px; }
.ma-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ma-chips li { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--text-small); }
.ma-ne-btn { margin: 4px 0 8px; }
.ma-fold { margin-top: 0; }
.ma-fold > summary { font-size: 1rem; padding-top: 10px; padding-bottom: 10px; }
.ma-fold-body { padding: 4px 16px 14px; }
.ma-fold-body .review-areas { grid-template-columns: 1fr; margin-bottom: 10px; }
.ma-note { margin: 0; font-size: var(--text-small); }
@media (max-width: 767px) {
  .ma-para-btn, .ma-para-btn:hover { grid-template-columns: 1fr; gap: 2px; }
  .ma-why { margin-left: 0; }
}

/* Team area (7 Oct 2026): numbers for the team, student list for the owner */
.team .page-head { margin-bottom: 18px; }
.team-tabs, .team-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.team-pill { min-height: 38px; padding: 4px 16px; font-size: var(--text-small); font-weight: 600; background: var(--surface); color: var(--accent); border: 1px solid var(--border); }
.team-pill:hover { background: var(--tint); border-color: var(--accent); color: var(--accent); }
.team-pill.is-on { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.team-filters input[type="search"] { flex: 1 1 220px; max-width: 320px; min-height: 38px; }
.team-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 22px; }
.team-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
.team-tile-hero { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.team-tile-label { font-size: var(--text-small); font-weight: 600; color: var(--text-muted); }
.team-tile-value { font-family: var(--font-head); font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.team-tile-note { font-size: var(--text-label); color: var(--text-muted); }
.team-tile-hero .team-tile-label, .team-tile-hero .team-tile-value, .team-tile-hero .team-tile-note { color: #FFFFFF; }
.team-card { padding: 20px 22px; margin: 0 0 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
.team-card .section-title { margin-top: 0; }
.team-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.team-two .team-card { margin-bottom: 0; }
.team-note { margin: 18px 0 0; max-width: 70ch; font-size: var(--text-small); }
.team-chart { display: block; width: 100%; max-width: 720px; height: auto; margin: 4px 0 8px; }
.team-chart .team-axis { stroke: var(--text-muted); stroke-width: 1; }
.team-chart .team-grid { stroke: var(--border); stroke-width: 1; }
.team-chart .team-tick { font-size: 11px; fill: var(--text-muted); font-family: var(--font-sans); }
.team-chart .team-val { font-size: 12px; font-weight: 700; fill: var(--text); font-family: var(--font-sans); }
.team-chart .team-bar-svg { fill: var(--accent); }
.team-chart .team-bar-svg:hover { fill: var(--accent-hover); }
.team-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.team-bars li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr minmax(70px, auto); align-items: center; gap: 12px; }
.team-bar-label { font-size: var(--text-small); font-weight: 600; overflow-wrap: anywhere; }
.team-bar-track { display: block; height: 12px; background: var(--tint); border-radius: 6px; overflow: hidden; }
.team-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 0 6px 6px 0; }
.team-bar-value { font-size: var(--text-small); color: var(--text-muted); text-align: right; white-space: nowrap; }
.team-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
.team-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.team-table th { text-align: left; padding: 12px 14px; font-size: var(--text-label); font-weight: 700; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.team-table td { padding: 11px 14px; border-bottom: 1px solid var(--tint); vertical-align: top; }
.team-table tr:last-child td { border-bottom: 0; }
.team-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.team-students td:nth-child(2) { overflow-wrap: anywhere; }
.team-chip { display: inline-block; padding: 2px 10px; font-size: var(--text-label); font-weight: 700; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); white-space: nowrap; }
.team-chip-active { background: var(--tint); border-color: var(--accent); color: var(--accent); }
.team-chip-slowing, .team-chip-quiet, .team-chip-review { background: var(--warm); border-color: var(--warm-border); color: var(--warm-text); }
@media (max-width: 600px) { .team-bars li { grid-template-columns: 1fr; gap: 4px; } .team-bar-value { text-align: left; } .staff-user { flex-wrap: wrap; justify-content: flex-end; } }

.team-filters input[type="search"], .team-filters input[type="search"]:focus { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 16px; background: var(--surface); font: inherit; font-size: var(--text-small); }
.team-two { align-items: start; }

.staff-user [hidden] { display: none !important; }
.team-chart-wrap { overflow-x: auto; }
.team-chart { min-width: 520px; }
@media (max-width: 600px) { .staff-bar { flex-wrap: wrap; } .staff-bar .staff-user { width: 100%; justify-content: flex-start; } }