/* Self-hosted (no external CDN — this app runs fully local/offline, see
   test_runtime_source_has_no_external_http_or_cdn). Variable font: one file
   per script subset covers the whole 100-900 weight range. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* ---- legacy warm tokens: unchanged, still used by teacher/author pages,
     which explicitly keep their current styling in this redesign. ---- */
  --bg: #F8F5EE;
  --surface: #FFFDF8;
  --beige: #EFE7D8;
  --warm: #F5EBD7;
  --yellow: #F6C84A;
  --yellow-soft: #FFF0B8;
  --ink: #1F2937;
  --muted: #6B7280;
  --accent: #C81D25;
  --paper: var(--bg);
  --sand: var(--beige);
  --card: var(--surface);
  --teal: #3F3A32;
  --teal-dark: #1F2937;
  --coral: var(--accent);
  --gold: var(--yellow);
  --line: #E8DFD0;
  --wrong: #b42318;
  --correct: #157a48;
  --explain: #1d4e89;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(31, 41, 55, 0.06);

  /* ---- blue/white student design system tokens ----
     CODEX_BLUE_WHITE_VISUAL_LEARNING_SPEC_V1.md section 2. Always defined so
     new components can reference them directly; they only *repaint* existing
     shared selectors where `body.student-theme` is present (below). */
  --primary-blue: #1D4ED8;
  --primary-blue-hover: #1E40AF;
  --primary-blue-pressed: #1E3A8A;
  --deep-blue: #0F2A4A;
  --light-blue: #DBEAFE;
  --surface-blue: #EFF6FF;
  --page-background: #F8FAFC;
  --surface-white: #FFFFFF;
  --text-primary: #172B4D;
  --text-secondary: #475569;
  --border-neutral: #CBD5E1;
  --border-control: #64748B;
  --border-blue: #93C5FD;
  --success: #15803D;
  --success-surface: #F0FDF4;
  --error: #B91C1C;
  --error-surface: #FEF2F2;
  --focus-color: #1D4ED8;
  --radius-card: 16px;
  --radius-control: 10px;
  --radius-badge: 8px;
  --shadow-card: 0 4px 16px rgba(15, 42, 74, .06);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* clip, not hidden: hidden turns body into its own scroll box, and then the
   sticky sidebar and lesson rail scroll away with the page. Browsers
   without clip keep hidden (no sideways scroll either way). */
html, body { margin: 0; padding: 0; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}

/* =====================================================================
   Blue/white student theme — scoped to body.student-theme so teacher and
   author screens keep their current warm styling untouched. Every legacy
   alias below is repainted once here; every existing selector built on top
   of these variables (cards, buttons, badges, choices, tokens, results…)
   inherits the new palette automatically without being rewritten one by
   one. See CODEX_BLUE_WHITE_VISUAL_LEARNING_SPEC_V1.md section 2 "Migration
   mapping". ===================================================== */
body.student-theme {
  --bg: var(--page-background);
  --surface: var(--surface-white);
  --beige: var(--light-blue);
  --warm: var(--surface-blue);
  --yellow: var(--primary-blue);
  --yellow-soft: var(--light-blue);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --accent: var(--primary-blue);
  --teal: var(--deep-blue);
  --explain: var(--deep-blue);
  --line: var(--border-neutral);
  --wrong: var(--error);
  --correct: var(--success);
  --radius: var(--radius-card);
  --shadow: var(--shadow-card);
}
/* Filled buttons need white text on the now-dark primary blue; the legacy
   rule painted dark text for a light yellow fill. Ghost/secondary/danger
   keep their own explicit colors below and are unaffected. */
body.student-theme button:not(.ghost):not(.secondary):not(.danger),
body.student-theme .btn:not(.ghost):not(.secondary):not(.danger) {
  color: #fff;
}
body.student-theme button:not(.ghost):not(.secondary):not(.danger):hover,
body.student-theme .btn:not(.ghost):not(.secondary):not(.danger):hover {
  background: var(--primary-blue-hover);
}
body.student-theme button:not(.ghost):not(.secondary):not(.danger):active {
  background: var(--primary-blue-pressed);
}
body.student-theme button.secondary, body.student-theme .btn.secondary {
  background: var(--deep-blue); color: #fff;
}
body.student-theme button.ghost, body.student-theme .btn.ghost {
  background: transparent; color: var(--primary-blue); border: 1px solid var(--border-neutral);
}
body.student-theme button.ghost:hover, body.student-theme .btn.ghost:hover {
  background: var(--surface-blue);
}
/* Small circular icon badges (exercise number, theory icon, active rail
   number) sit on a now-saturated blue fill and need white glyphs. */
body.student-theme .ex-num,
body.student-theme .theory-ico,
body.student-theme .rail-lesson.is-active .num,
body.student-theme .lesson-list .num.is-current {
  color: #fff;
}
body.student-theme .rail-lesson.is-active { background: var(--light-blue); }
body.student-theme .lesson-tabs a.is-active { color: var(--primary-blue); }
/* Legacy archived-review labels: informational, not a warning — neutral
   gray rather than the old amber "still pending" brown. */
body.student-theme .pill.wait, body.student-theme .wait-note {
  color: var(--text-secondary);
}
body.student-theme .pill.wait { background: var(--light-blue); }
body.student-theme .explain-block {
  background: var(--surface-blue);
  color: var(--deep-blue);
}
body.student-theme .note-callout { background: var(--surface-blue); border-left-color: var(--primary-blue); }
body.student-theme .banner, body.student-theme .success-banner { background: var(--surface-blue); color: var(--deep-blue); }
body.student-theme .success-banner { background: var(--success-surface); color: var(--success); }
body.student-theme input, body.student-theme select, body.student-theme textarea {
  border-color: var(--border-control);
  background: var(--surface-white);
  color: var(--text-primary);
}
body.student-theme input::placeholder, body.student-theme textarea::placeholder { color: var(--text-secondary); }

.top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.85rem 4vw;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
body.student-theme .top { box-shadow: 0 1px 0 rgba(15,42,74,.04); }
.brand { display: flex; gap: 0.7rem; align-items: center; color: inherit; text-decoration: none; }
.logo { width: 42px; height: 42px; border-radius: 14px; display: block; }
.brand small { display: block; color: var(--muted); font-size: 0.78rem; }
nav { display: flex; gap: 1.1rem; margin-left: auto; flex-wrap: wrap; align-items: center; }
nav a {
  color: var(--muted); text-decoration: none; font-weight: 650;
  padding: 0.55rem 0.1rem; display: inline-flex; align-items: center;
}
nav a:hover { color: var(--ink); }
body.student-theme nav a:hover { color: var(--primary-blue); }
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3em; height: 1.3em; padding: 0 0.35em; margin-left: 0.35em;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 0.72rem; font-weight: 800; line-height: 1;
}
.who {
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--yellow-soft);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

main { padding: 2rem 4vw 4rem; max-width: 1120px; margin: 0 auto; }
main.main-wide { max-width: none; padding: 1.25rem 2vw 3.5rem; }
/* Student reading column stays controlled even inside the wide lesson
   layout — desktop text never stretches edge to edge (spec section 2). */
body.student-theme main:not(.main-wide) { max-width: 1240px; }
.hero h1, h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  margin: 0.2rem 0 0.6rem;
  letter-spacing: -0.02em;
}
body.student-theme h1 { color: var(--deep-blue); font-weight: 750; }
body.student-theme h2 { color: var(--deep-blue); font-weight: 700; }
body.student-theme h3 { color: var(--deep-blue); font-weight: 700; }
.landing {
  max-width: 40rem; margin: var(--space-12) auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
body.student-theme .landing h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.landing .actions { justify-content: center; }
body.student-theme .landing .btn { border-radius: var(--radius-control); padding: 0 var(--space-8); }
.eyebrow { letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; font-size: 0.75rem; }
body.student-theme .eyebrow { color: var(--text-secondary); font-weight: 700; }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 40rem; }
.objective, .hero-sub { font-size: 1.08rem; color: var(--muted); margin: 0; }

.cards { display: grid; gap: 1rem; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card, .ex-card, .review-card, .unit, .enter, .side-card, .theory-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.enter h2 { margin-top: 0; }
.quiet-card { background: var(--warm); }

label { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.7rem 0; font-weight: 600; }
input, select, textarea, button, .btn { font: inherit; }
input, select, textarea {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  min-height: 44px;
}
body.student-theme input, body.student-theme select, body.student-theme textarea {
  min-height: var(--space-12);
  font-size: 1.125rem;
  border-radius: var(--radius-control);
}
textarea { min-height: 6rem; }
button, .btn {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
body.student-theme button, body.student-theme .btn {
  min-height: var(--space-12);
  font-size: 1.0625rem;
  border-radius: 999px;
}
button.secondary, .btn.secondary { background: var(--ink); color: #fff; }
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }

.flash { margin: 0; padding: 0.8rem 4vw; }
.flash.ok { background: #e6f6ea; color: var(--correct); }
.flash.err { background: #fdecea; color: var(--wrong); }
body.student-theme .flash.ok { background: var(--success-surface); color: var(--success); }
body.student-theme .flash.err { background: var(--error-surface); color: var(--error); }
.empty { color: var(--muted); }
.foot { padding: 1.5rem 4vw; color: var(--muted); font-size: 0.85rem; }

.learn-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 220px;
  gap: 1.25rem;
  align-items: start;
}
.rail { position: sticky; top: 5.2rem; }
.rail-kicker { margin: 0; color: var(--accent); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; }
.rail-title { margin: 0.2rem 0 0.5rem; font-size: 1.05rem; }
.rail-progress { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.8rem; }
.rail-lessons { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.rail-lesson {
  display: flex; gap: 0.6rem; align-items: center;
  text-decoration: none; color: inherit;
  padding: 0.45rem 0.55rem; border-radius: 12px;
}
.rail-lesson .num {
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--beige); font-size: 0.8rem; font-weight: 700;
  flex: none;
}
.rail-lesson.is-active { background: var(--yellow-soft); }
.rail-lesson.is-active .num { background: var(--yellow); }
.rail-mobile {
  display: none; margin: 0.8rem 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.rail-mobile summary {
  cursor: pointer; font-weight: 700; padding: 0.7rem 0.9rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  min-height: 44px; color: var(--ink);
}
.rail-mobile summary::-webkit-details-marker { display: none; }
/* Visible expand/collapse affordance: a chevron that flips to point up once
   the panel is open, so "tap to see other lessons" is obvious on mobile —
   the native <details> marker was suppressed above with nothing to replace
   it, leaving this control looking like inert bold text. */
.rail-mobile summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: -3px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.rail-mobile[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.rail-mobile[open] summary { border-bottom: 1px solid var(--line); }
.rail-mobile .rail-lessons { padding: 0.6rem 0.9rem 0.75rem; }

.lesson-hero {
  display: block;
  background: var(--surface);
  border-radius: 20px;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
}
body.student-theme .lesson-hero { box-shadow: var(--shadow-card); }
.hero-art { display: none; }
.lesson-tabs {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin: 1rem 0 1.2rem; padding: 0.25rem;
  background: var(--beige); border-radius: 999px; width: fit-content;
}
.lesson-tabs a {
  text-decoration: none; color: var(--muted); font-weight: 700;
  padding: 0.45rem 0.95rem; border-radius: 999px;
}
.lesson-tabs a.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
/* Compact completion summary shown in the lesson header at every width —
   replaces relying on the right rail alone, which disappears on phones. */
.lesson-progress-compact {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.6rem 0 0; color: var(--muted); font-size: 0.92rem; font-weight: 600;
}
.lesson-progress-compact .bar {
  flex: 1 1 auto; max-width: 220px; height: 8px; border-radius: 999px;
  background: var(--beige); overflow: hidden;
}
.lesson-progress-compact .bar > span {
  display: block; height: 100%; background: var(--yellow); border-radius: inherit;
  transition: width 160ms ease;
}
.result-location { color: var(--muted); font-weight: 700; margin: 0 0 0.3rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- theory component system --------------------------------------- */
.theory-card { margin: 0 0 1rem; }
body.student-theme .theory-card { padding: var(--space-6) var(--space-4); }
@media (min-width: 841px) { body.student-theme .theory-card { padding: var(--space-6); } }
.theory-head { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.theory-head h2 { margin: 0; font-size: 1.05rem; }
body.student-theme .theory-head h2 { font-size: 1.625rem; line-height: 2.125rem; font-weight: 700; }
@media (max-width: 480px) { body.student-theme .theory-head h2 { font-size: 1.5rem; line-height: 2rem; } }
.theory-ico {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; font-weight: 800; font-size: 0.85rem;
  background: var(--yellow);
  flex: none;
}
.theory-main { background: var(--yellow-soft); border-color: #F3D56A; }
body.student-theme .theory-main { background: var(--surface-white); border-color: var(--line); }
.theory-examples { background: #F3F7F1; }
body.student-theme .theory-examples { background: var(--surface-white); }
.theory-examples .theory-ico { background: #CDE5D3; }
body.student-theme .theory-examples .theory-ico { background: var(--light-blue); color: var(--deep-blue); }
.theory-notes { background: #EEF3FA; }
body.student-theme .theory-notes { background: var(--surface-blue); border-left: 4px solid var(--primary-blue); }
.theory-notes .theory-ico { background: #C9D7EE; color: var(--explain); }
body.student-theme .theory-notes .theory-ico { background: var(--primary-blue); color: #fff; }
.theory-summary { background: #FFF8E8; }
body.student-theme .theory-summary { background: var(--surface-white); border: 2px solid var(--primary-blue); }
.theory-vocab { background: var(--surface); }
.theory-lead { font-size: 1.05rem; max-width: 42rem; }
body.student-theme .theory-lead { font-size: 1.125rem; line-height: 1.8125rem; max-width: 44rem; }
.theory-block { margin: 0.85rem 0 0; max-width: 42rem; }
body.student-theme .theory-block { margin-top: var(--space-4); max-width: 44rem; }
.theory-block h3 { margin: 0 0 0.25rem; font-size: 1.02rem; }
body.student-theme .theory-block h3 { font-size: 1.3125rem; line-height: 1.75rem; font-weight: 700; margin-bottom: var(--space-2); }
.theory-block p { margin: 0; }
body.student-theme .theory-block p { font-size: 1.125rem; line-height: 1.8125rem; }

/* RULE_CARD: light blue surface with a leading blue border, used for
   .theory-block inside .theory-notes-as-rules and the curated RULE_CARD
   rendering in lesson_theory.html. */
.rule-card {
  background: var(--surface-blue); border-left: 4px solid var(--primary-blue);
  border-radius: var(--radius-badge) var(--radius-card) var(--radius-card) var(--radius-badge);
  padding: var(--space-4); margin: var(--space-4) 0 0;
}
.rule-card h3 { margin: 0 0 var(--space-2); font-size: 1.3125rem; font-weight: 700; color: var(--deep-blue); }
.rule-card p { margin: 0; font-size: 1.125rem; line-height: 1.8125rem; }

.example-list, .vocab-list, .examples ul { display: grid; gap: 0.7rem; padding: 0; list-style: none; }
.example-list li, .vocab-list li, .examples li {
  background: var(--surface); border-radius: 14px; padding: 0.85rem 1rem; border: 1px solid var(--line);
}
body.student-theme .example-list li, body.student-theme .vocab-list li, body.student-theme .examples li {
  padding: var(--space-4); border-radius: var(--radius-card);
}
.tr { font-size: 1.2rem; margin: 0; font-weight: 700; }
body.student-theme .tr { font-size: 1.375rem; line-height: 2rem; font-weight: 650; color: var(--deep-blue); }
.note { color: var(--muted); margin: 0.2rem 0 0; }
body.student-theme .note { font-size: 1.0625rem; line-height: 1.6875rem; }
.note-callout {
  background: #e8f0fa; border-left: 4px solid var(--explain);
  padding: 0.75rem 1rem; border-radius: 12px; max-width: 42rem;
}
body.student-theme .note-callout { font-size: 1.125rem; line-height: 1.8125rem; max-width: 44rem; }
.note-k { font-weight: 800; color: var(--explain); margin-right: 0.25rem; }

/* SUMMARY_CARD exercises link */
.summary-cta { margin-top: var(--space-4); }

/* CONTRAST_CARD: two labeled parallel examples, stacked on phones. */
.contrast-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-4) 0 0; }
@media (max-width: 840px) { .contrast-card { grid-template-columns: 1fr; } }
.contrast-panel { background: var(--surface-white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); }
.contrast-panel h4 { margin: 0 0 var(--space-2); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); font-weight: 700; }
.contrast-panel p { margin: 0; font-size: 1.25rem; font-weight: 650; color: var(--deep-blue); }

/* TIP_CARD */
.tip-card { background: var(--surface-white); border: 1px solid var(--border-neutral); border-radius: var(--radius-card); padding: var(--space-4); margin: var(--space-4) 0 0; }
.tip-card .tip-label { color: var(--primary-blue); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-2); }
.tip-card p { margin: 0; font-size: 1.0625rem; line-height: 1.6875rem; }

.side-card { margin-bottom: 0.8rem; }
.side-label { margin: 0 0 0.4rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.side-meta, .side-card.quiet p { color: var(--muted); margin: 0.4rem 0 0; }
.side-stage { margin: 0.2rem 0; color: var(--muted); }
.side-stage.is-on { color: var(--ink); font-weight: 700; }
.side-card.art { display: none; }
.ring {
  --p: 0;
  width: 88px; height: 88px; border-radius: 50%;
  background: conic-gradient(var(--yellow) calc(var(--p) * 1%), var(--beige) 0);
  display: grid; place-items: center; margin: 0.4rem auto;
}
.ring span {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface); display: grid; place-items: center; font-weight: 800;
}

.lesson-list, .sub-list { list-style: none; padding: 0; }
.lesson-list a, .sub-list a {
  color: inherit; text-decoration: none; display: flex; gap: 0.75rem; align-items: center;
  min-height: 44px; width: 100%;
}
.lesson-list li, .sub-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
body.student-theme .lesson-list li { transition: border-color 140ms ease, box-shadow 140ms ease; }
body.student-theme .lesson-list li:has(a:hover) { border-color: var(--border-blue); }
.lesson-list .num {
  width: 28px; height: 28px; border-radius: 999px; background: var(--yellow-soft);
  display: grid; place-items: center; font-weight: 700; font-size: 0.8rem;
  flex: none;
}
/* Course home: lesson-card layout with number, title, short description and
   a clearly marked recommended-next state. */
.lesson-card-grid { display: grid; gap: var(--space-4); }
.lesson-card {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--surface-white); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--space-4); text-decoration: none; color: inherit;
}
.lesson-card .num {
  width: 40px; height: 40px; border-radius: 999px; background: var(--light-blue);
  color: var(--deep-blue); display: grid; place-items: center; font-weight: 800; flex: none;
}
.lesson-card.is-done .num { background: var(--success-surface); color: var(--success); }
.lesson-card.is-next { border-color: var(--primary-blue); box-shadow: 0 0 0 1px var(--primary-blue); }
.lesson-card.is-next .num { background: var(--primary-blue); color: #fff; }
.lesson-card-body { flex: 1 1 auto; min-width: 0; }
.lesson-card-body h4 { margin: 0 0 0.2rem; font-size: 1.1875rem; font-weight: 700; color: var(--deep-blue); }
.lesson-card-body p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
.next-lesson-flag {
  display: inline-block; margin-top: var(--space-2); font-size: 0.78rem; font-weight: 700;
  color: var(--primary-blue); text-transform: uppercase; letter-spacing: 0.05em;
}
.course-progress-summary {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--surface-white); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-6); margin: var(--space-4) 0 var(--space-6);
}
.course-progress-summary .bar {
  flex: 1 1 220px; height: 10px; border-radius: 999px; background: var(--light-blue); overflow: hidden;
}
.course-progress-summary .bar > span { display: block; height: 100%; background: var(--primary-blue); border-radius: inherit; }
.course-progress-summary strong { color: var(--deep-blue); font-size: 1.1rem; }

.badge.streak-badge { background: var(--surface-blue); color: var(--deep-blue); font-weight: 700; }

.review-callout {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  background: var(--surface-blue); border: 1px solid var(--border-blue); border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-6); margin: 0 0 var(--space-6); color: var(--deep-blue); font-weight: 650;
}
.review-callout p { margin: 0; }

.exercise-progress {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--surface-white); border: 1px solid var(--border-neutral); border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); font-weight: 700; color: var(--deep-blue);
}
.exercise-progress-bar { flex: 1 1 160px; height: 8px; border-radius: 999px; background: var(--light-blue); overflow: hidden; }
.exercise-progress-bar > span { display: block; height: 100%; width: 0; background: var(--primary-blue); border-radius: inherit; transition: width 200ms ease; }
.exercise-progress.is-complete .exercise-progress-bar > span { background: var(--success); }
.exercise-progress.is-complete .exercise-progress-count { color: var(--success); }

.badge { border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.8rem; background: var(--beige); }
.badge.completed, .badge.scored, .CORRECT { color: var(--correct); }
/* Archived rows from the old manual-review model: informational, not a task. */
.badge.needs_review, .MANUAL_REVIEW { color: var(--muted); background: var(--beige); }
.badge.bad { color: var(--wrong); background: #fdecea; }
body.student-theme .badge.bad { background: var(--error-surface); }
.INCORRECT { outline: 1px solid #f3c4be; }
body.student-theme .INCORRECT { outline-color: var(--error); }

.hint, .meta { color: var(--muted); font-size: 0.92rem; }
.hint.warn { color: #7a4b12; background: #fff3df; border: 1px solid #edd2a4; padding: 0.7rem 0.9rem; border-radius: 12px; }
body.student-theme .hint.warn {
  color: var(--deep-blue); background: var(--surface-white); border: 1px solid var(--border-neutral);
}
.choice {
  display: flex; flex-direction: row; align-items: center; gap: 0.6rem;
  font-weight: 500; margin: 0.35rem 0; padding: 0.45rem 0.6rem;
  border-radius: 12px; background: var(--warm); min-height: 44px;
}
body.student-theme .choice {
  background: var(--surface-white); border: 1px solid var(--border-control);
  min-height: var(--space-12); padding: 0.75rem 1rem; border-radius: var(--radius-control);
  font-size: 1.125rem; font-weight: 500;
}
body.student-theme .choice:has(input:checked) {
  border-color: var(--primary-blue); border-width: 2px; background: var(--light-blue); padding: calc(0.75rem - 1px) calc(1rem - 1px);
}
body.student-theme .choice:has(input:focus-visible) { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.choice input { min-height: auto; width: 1.1rem; }
body.student-theme .choice input { width: 1.25rem; height: 1.25rem; flex: none; }
fieldset { border: 0; margin: 0; padding: 0; }
fieldset legend { padding: 0; font-weight: inherit; }
.tokens { display: flex; flex-wrap: wrap; gap: 0.5rem; }
button.token, .token {
  background: var(--surface); color: var(--ink); border-radius: 999px;
  padding: 0.45rem 0.85rem; border: 1px solid var(--line); min-height: 44px;
  font-weight: 650;
}
body.student-theme button.token, body.student-theme .token {
  min-height: var(--space-12); font-size: 1.0625rem; border: 1px solid var(--border-control);
  padding: 0.6rem 1rem;
}
.token.used { opacity: 0.35; background: var(--beige); }
body.student-theme .token.used {
  opacity: 1; background: var(--light-blue); color: var(--text-secondary);
  border-style: dashed; cursor: default;
}
.built {
  min-height: 1.6rem; font-weight: 700; background: var(--yellow-soft); border-radius: 12px; padding: 0.4rem 0.7rem;
}
body.student-theme .built {
  min-height: var(--space-12); background: var(--surface-blue); border: 1px dashed var(--border-blue);
  border-radius: var(--radius-control); padding: var(--space-3) var(--space-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 1.0625rem;
}
.built-token {
  display: inline-flex; align-items: center; gap: 0.3rem; background: var(--surface-white);
  border: 1px solid var(--border-blue); border-radius: 999px; padding: 0.25rem 0.35rem 0.25rem 0.7rem;
  font-weight: 650; color: var(--deep-blue);
}
.built-token button {
  min-height: 26px; min-width: 26px; padding: 0; border-radius: 50%;
  background: var(--surface-blue); color: var(--deep-blue); font-weight: 800; line-height: 1;
  font-size: 0.9rem;
}
.built-empty { color: var(--text-secondary); font-weight: 500; }
.match-grid { display: grid; gap: 0.5rem; }
.match-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; align-items: center; margin: 0; }
body.student-theme .match-row {
  background: var(--surface-white); border: 1px solid var(--border-neutral); border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4); font-size: 1.0625rem; font-weight: 500;
}
@media (max-width: 840px) { body.student-theme .match-row { grid-template-columns: 1fr; gap: var(--space-2); } }
.ex-head { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 0.6rem; }
.ex-head h2 { margin: 0; font-size: 1.15rem; }
body.student-theme .ex-head h2 { font-size: 1.375rem; line-height: 1.875rem; font-weight: 700; }
.ex-num {
  width: 32px; height: 32px; border-radius: 10px; background: var(--yellow);
  display: grid; place-items: center; font-weight: 800;
  flex: none;
}
.recorder {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  background: var(--warm); border-radius: 14px; padding: 0.8rem;
}
body.student-theme .recorder {
  background: var(--surface-white); border: 1px solid var(--border-neutral); border-radius: var(--radius-card);
  padding: var(--space-4); flex-direction: column; align-items: stretch;
}
.recorder-controls { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.recorder audio { width: 100%; }
.rec-status[aria-live] { min-height: 1.2em; }

/* --- auth (login / invite) --------------------------------------------- */
main.auth-page {
  min-height: calc(100vh - 220px);
  display: flex; align-items: center; justify-content: center;
}
.auth-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; max-width: 27rem; margin: 1.5rem auto; box-shadow: var(--shadow);
}
.auth-card h1 { margin-top: 0; }
.auth-form { display: grid; gap: 0.9rem; margin-top: 1rem; }
.auth-form label { display: grid; gap: 0.35rem; font-weight: 650; }
.auth-form input {
  font-size: 1.05rem; padding: 0.75rem 0.8rem; min-height: 48px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
}
.auth-form button { min-height: 48px; font-size: 1.02rem; }
body.student-theme .auth-card {
  max-width: 24rem; margin: var(--space-12) auto; padding: var(--space-8) var(--space-6);
  border-color: var(--border-neutral); border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(15, 42, 74, .04), 0 12px 32px rgba(15, 42, 74, .08);
}
body.student-theme .auth-card h1 {
  font-size: 1.5rem; letter-spacing: -0.01em;
}
body.student-theme .auth-card .lead {
  font-size: 0.9375rem; margin: 0.2rem 0 0;
}
body.student-theme .auth-form label {
  font-size: 0.8125rem; font-weight: 650; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.03em; gap: var(--space-2);
}
body.student-theme .auth-form input {
  font-size: 0.9375rem; min-height: 2.75rem; border-radius: var(--radius-control);
  border-color: var(--border-neutral);
}
body.student-theme .auth-form input:focus-visible {
  border-color: var(--focus-color);
}
body.student-theme .auth-form button {
  min-height: 2.75rem; font-size: 0.9375rem; border-radius: var(--radius-control); margin-top: var(--space-2);
}
body.student-theme .auth-card .hint { font-size: 0.8125rem; margin-top: var(--space-4); }
.who-box { display: flex; align-items: center; gap: 0.5rem; }
.inline-form { display: inline; margin: 0; }
.stack-form { display: grid; gap: 0.8rem; max-width: 27rem; }
/* Grid items default to min-width: auto, so a select with a long option
   ("A1 — Начальный · 2 500 ₽ / 4 мес.") pushed the /buy form off a phone screen. */
.stack-form > * { min-width: 0; }
.stack-form select, .stack-form input:not([type=checkbox]):not([type=radio]), .stack-form textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.stack-form select { text-overflow: ellipsis; }
.stack-form input, .stack-form select { min-height: 44px; padding: 0.5rem 0.7rem;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.invite-fresh .invite-url {
  width: 100%; font-family: ui-monospace, monospace; font-size: 0.9rem;
  padding: 0.7rem; min-height: 48px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--warm);
}
.student-row { flex-wrap: wrap; gap: 0.6rem; }
.student-row .row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.student-row .row-actions input { min-height: 40px; border-radius: 10px;
  border: 1px solid var(--line); padding: 0.35rem 0.6rem; max-width: 11rem; }
.badge.active { color: var(--correct); }
.badge.used { color: var(--muted); }
.badge.expired, .badge.revoked { color: var(--wrong); }
.listening-player {
  background: var(--warm); border-radius: 14px; padding: 0.8rem; margin: 0.6rem 0 1rem;
}
body.student-theme .listening-player {
  background: var(--surface-white); border: 1px solid var(--border-neutral); border-radius: var(--radius-card);
  padding: var(--space-4);
}
.listening-player audio { width: 100%; max-width: 420px; }
body.student-theme .listening-player audio { max-width: 100%; }
.listening-question { margin-top: var(--space-4); }
body.student-theme .listening-question p.prompt { font-size: 1.25rem; }
.transcript-disclosure { margin-top: var(--space-3); }
.transcript-disclosure summary {
  cursor: pointer; color: var(--primary-blue); font-weight: 700; list-style: none;
}
.transcript-disclosure summary::-webkit-details-marker { display: none; }
.transcript-disclosure[open] summary { margin-bottom: var(--space-2); }
.transcript-text { font-size: 1.0625rem; color: var(--text-secondary); }

/* ---- signature correction / feedback block --------------------------- */
.rich { margin: 0.6rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.wrong { color: var(--wrong); text-decoration: line-through; }
.correct { color: var(--correct); font-weight: 700; }
body.student-theme .wrong, body.student-theme .correct {
  font-size: 1.1875rem; font-weight: 650; display: inline-block;
}
.explain-block {
  color: var(--explain);
  background: #e8f0fa;
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  width: 100%;
  margin: 0.4rem 0 0;
}
body.student-theme .explain-block { border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); font-size: 1.125rem; line-height: 1.8125rem; }
.why-k { font-weight: 800; margin-right: 0.35rem; }
.correction-block { margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.correction-row { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: baseline; }
.correction-row .k { font-weight: 700; color: var(--text-secondary); font-size: 0.92rem; min-width: 6.5rem; }
.sample-value { color: var(--deep-blue); font-weight: 650; font-size: 1.1875rem; background: var(--surface-blue); border-radius: var(--radius-badge); padding: 0.1rem 0.5rem; }
.review-card.needs-action { border-color: #ead89a; box-shadow: 0 0 0 2px #f7e7b8; }
.review-form details { margin-top: 0.4rem; }
.review-form summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.result-hero { margin-bottom: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.2rem; }
body.student-theme .result-hero { padding: var(--space-6); box-shadow: var(--shadow-card); }
.result-hero.is-celebratory { border-color: var(--success); }
.result-hero.is-celebratory .percent { color: var(--success); }
.streak-line { margin: var(--space-3) 0 0; }
.result-title { margin: 0.2rem 0 0.5rem; font-size: 1.6rem; }
body.student-theme .result-title { font-size: 2rem; line-height: 2.5rem; font-weight: 750; }
.percent { font-size: 2rem; font-weight: 700; color: var(--ink); margin: 0; }
body.student-theme .percent { color: var(--primary-blue); font-size: 2.25rem; }
.state-label { font-weight: 700; font-size: 1.05rem; }
.pts { font-weight: 500; color: var(--muted); margin-left: 0.4rem; }
.wait-note { color: #9a6700; }
/* Unscored practice is neutral information, so it must not borrow the warning
   palette — nothing is wrong and nothing is outstanding. */
.practice-note { color: var(--explain); }
body.student-theme .practice-note { color: var(--deep-blue); background: var(--surface-blue); border-radius: var(--radius-control); padding: 0.5rem 0.75rem; display: inline-block; }
.audio-label { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.status-copy { color: var(--muted); }
.result-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.pill { border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; font-weight: 700; background: var(--beige); }
.pill.ok { background: #e7f6ee; color: var(--correct); }
.pill.bad { background: #fdecea; color: var(--wrong); }
.pill.wait { background: var(--yellow-soft); color: #9a6700; }
.pill.practice { background: #e8eef7; color: var(--explain); }
body.student-theme .pill.ok { background: var(--success-surface); }
body.student-theme .pill.bad { background: var(--error-surface); }
body.student-theme .pill.practice { background: var(--surface-blue); color: var(--deep-blue); }
.tone-ok { border-color: #b7e0c5; }
.tone-bad { border-color: #f3c4be; }
.tone-wait { border-color: #ead89a; }
.tone-practice { border-color: #c7d5ea; }
.tone-partial { border-color: #f0d39a; }
body.student-theme .tone-ok { border-color: var(--success); border-width: 1px; }
body.student-theme .tone-bad { border-left: 4px solid var(--error); }
body.student-theme .tone-practice { border-color: var(--border-blue); }
body.student-theme .tone-partial { border-left: 4px solid #B45309; }
.expected { margin: 0.3rem 0; }
.scoreline { font-size: 1.4rem; font-weight: 700; }
.result-list { list-style: none; padding: 0; }
.result { background: var(--card); border-radius: 16px; padding: 1rem; margin: 0.7rem 0; border: 1px solid var(--line); }
body.student-theme .result { padding: var(--space-4); border-radius: var(--radius-card); }
body.student-theme .result .prompt { font-size: 1.25rem; font-weight: 650; }

.stats { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.stats div { background: var(--card); padding: 0.8rem 1rem; border-radius: 14px; border: 1px solid var(--line); }
.filters, .inline, .editor { display: grid; gap: 0.4rem; }
.filters, .editor {
  background: var(--surface);
  padding: 1.2rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.page-head { margin-bottom: 1.1rem; }
.prompt, .tr, .ttl, .hero-sub { overflow-wrap: break-word; }
body.student-theme .prompt { font-size: 1.25rem; line-height: 1.875rem; font-weight: 650; margin: 0 0 var(--space-3); }
.answer-language-cue { display: block; font-size: 0.8rem; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-2); }
.blank-label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 700; margin: var(--space-2) 0 0.2rem; }
.review-form { display: grid; gap: 0.5rem; margin-top: 1rem; }
.tiny { font-size: 0.85rem; color: var(--muted); }
.lesson-row { display: grid; gap: 0.4rem; margin: 0.8rem 0; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
fieldset.level-picker { border: 0; padding: 0; margin: 0.3rem 0; }
fieldset.level-picker legend { font-weight: 700; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.3rem; }
fieldset.level-picker .choice {
  display: inline-flex; min-height: auto; padding: 0.25rem 0.5rem; margin: 0.15rem 0.4rem 0.15rem 0;
}
.inline-form.level-picker {
  display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.3rem;
}
.inline-action { display: inline; margin: 0; }
.tiny-btn { padding: 0.25rem 0.55rem; font-size: 0.85rem; min-height: 36px; }
button.danger, .danger { background: #fff; color: var(--wrong); border: 1px solid #f3c4be; }
.danger-zone { border: 1px solid #f3c4be; background: #fff8f7; }
.danger-zone h2 { color: var(--wrong); }
body.student-theme .danger-zone { border-color: var(--error); background: var(--error-surface); }
body.student-theme .danger-zone h2 { color: var(--error); }
.level-block { margin: 2rem 0; }
.level-block h2 span { color: var(--muted); font-weight: 500; font-size: 1rem; }

.item-editor { border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem; margin: 0.6rem 0; background: var(--warm); }
.item-toolbar { display: flex; gap: 0.4rem; align-items: center; }
.item-toolbar .item-index { margin-right: auto; }
.ex-toolbar { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.ex-toolbar .ex-index { margin-right: auto; }
.banner, .success-banner {
  background: #e8f0fa;
  color: var(--explain);
  padding: 0.7rem 1rem;
  border-radius: 12px;
}
.success-banner { background: #e7f6ee; color: var(--correct); font-weight: 700; }
.errors-section h2 { color: var(--wrong); }
body.student-theme .errors-section h2 { color: var(--error); }
.dash-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 1rem 0; }
.dash-grid > .card.queue { border-color: #F3D56A; background: var(--yellow-soft); }
.level-block h2 a { color: inherit; text-decoration: none; }
.theory-fold { margin: 0 0 1rem; }
.theory-fold summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.unit-progress { color: var(--muted); margin: 0 0 0.6rem; }
.result-section { margin: 1.5rem 0; }
pre { white-space: pre-wrap; background: var(--sand); padding: 0.8rem; border-radius: 12px; }
.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;
}
.editor-list { display: grid; gap: 0.4rem; }
.crumb { color: var(--muted); }

/* ---- educational visual diagrams (lesson_visuals) --------------------- */
.learning-visual {
  margin: var(--space-6) 0; background: var(--surface-white); border: 1px solid var(--border-neutral);
  border-radius: var(--radius-card); padding: var(--space-4);
}
.learning-visual.role-exercise { background: var(--surface-blue); border-style: dashed; }
.learning-visual svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.learning-visual .lesson-illustration { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-control); }
.learning-visual figcaption { margin-top: var(--space-3); color: var(--text-secondary); font-size: 0.98rem; text-align: center; }
.letter-contrast { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.letter-contrast .word { font-size: 1.75rem; font-weight: 700; color: var(--deep-blue); }
.letter-contrast .word .hl { color: var(--primary-blue); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.suffix-strip { display: grid; gap: var(--space-3); }
.suffix-row { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; font-size: 1.3rem; font-weight: 650; }
.suffix-row .stem { color: var(--text-primary); }
.suffix-row .suffix { color: var(--primary-blue); }
.suffix-row .arrow { color: var(--text-secondary); font-weight: 400; margin: 0 0.2rem; }
.suffix-row .result { color: var(--deep-blue); }
.vowel-table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.vowel-table th, .vowel-table td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-neutral); }
.vowel-table th { color: var(--text-secondary); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; }
.vowel-table td.letters { color: var(--deep-blue); font-weight: 700; }
.vowel-table td.particle { color: var(--primary-blue); font-weight: 700; }
.question-spacing { display: grid; gap: var(--space-3); }
.question-spacing .qrow { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 650; flex-wrap: wrap; }
.question-spacing .qrow .vowel { color: var(--primary-blue); text-decoration: underline; }
.question-spacing .qrow .arrow { color: var(--text-secondary); }
.question-spacing .qrow .final { color: var(--deep-blue); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes ex-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
  .pop-anim { animation: ex-pop 240ms ease; }

  @keyframes pill-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  .pill-stagger { animation: pill-in 320ms ease both; }

  @keyframes celebrate-glow {
    0%, 100% { box-shadow: var(--shadow-card, 0 4px 16px rgba(15, 42, 74, 0.06)); }
    50% { box-shadow: 0 0 0 4px var(--success-surface), 0 8px 24px rgba(21, 128, 61, 0.18); }
  }
  .result-hero.is-celebratory { animation: celebrate-glow 1.8s ease-in-out 1; }
}

@media (max-width: 1100px) {
  .learn-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .rail-right { display: none; }
}
@media (max-width: 840px) {
  .top { flex-wrap: wrap; padding: 0.8rem 1rem; }
  nav { margin-left: 0; width: 100%; }
  main, main.main-wide { padding: 1.2rem 1rem 3rem; }
  .learn-layout { grid-template-columns: 1fr; }
  .rail-left { display: none; }
  .rail-mobile { display: block; }
  .landing, .lesson-hero, .match-row { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  /* Header stops being sticky on phones so branding/nav/account never eats
     the viewport ahead of the actual lesson content. */
  body.student-theme .top { position: static; }
  body.student-theme .top { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  body.student-theme nav { justify-content: flex-start; gap: 0.75rem; }
}
@media (max-width: 480px) {
  body.student-theme h1, body.student-theme .lesson-hero h1 { font-size: 1.75rem; line-height: 2.125rem; }
  body.student-theme .theory-head h2 { font-size: 1.5rem; line-height: 2rem; }
  body.student-theme .theory-block h3, body.student-theme .rule-card h3 { font-size: 1.25rem; line-height: 1.75rem; }
  body.student-theme .tr { font-size: 1.25rem; line-height: 1.875rem; }
  body.student-theme .prompt { font-size: 1.1875rem; line-height: 1.75rem; }
  body.student-theme .ex-head h2 { font-size: 1.3125rem; line-height: 1.8125rem; }
  .contrast-card { gap: var(--space-3); }
}

/* ---------------------------------------------------------- game mode -- */
.game-card { display: flex; flex-direction: column; gap: var(--space-2); color: inherit; text-decoration: none; transition: border-color 140ms ease, transform 140ms ease; }
.game-card:hover { border-color: var(--border-blue); transform: translateY(-2px); }
.game-card h2 { margin: 0; font-size: 1.25rem; }
.game-card p { margin: 0; color: var(--text-secondary); flex: 1; }
.game-card .badge { align-self: flex-start; background: var(--surface-blue); color: var(--deep-blue); font-weight: 700; }
.nickname-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.nickname-form input { flex: 1 1 200px; max-width: 320px; }
.game-back { margin: 0 0 var(--space-2); }
.game-back a { color: var(--primary-blue); text-decoration: none; font-weight: 600; }
.game-panel { margin: var(--space-6) 0; }
.game-panel [hidden] { display: none !important; }
.game-intro { text-align: center; padding: var(--space-6) 0; }
.game-hud { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.game-hud:empty { display: none; }
.hud-stat { display: flex; flex-direction: column; min-width: 5.5rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--surface-blue); color: var(--deep-blue); }
.hud-label { font-size: 0.78rem; color: var(--text-secondary); }
.hud-value { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
body.student-theme button.g-tile, .g-tile {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 52px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control);
  background: var(--surface-white); color: var(--text-primary); border: 2px solid var(--border-neutral);
  font-size: 1rem; font-weight: 600; line-height: 1.3; text-align: center; overflow-wrap: anywhere;
  transition: background-color 140ms ease, border-color 140ms ease, opacity 200ms ease;
}
body.student-theme button.g-tile:hover:not(:disabled) { border-color: var(--border-blue); background: var(--surface-blue); }
body.student-theme button.g-tile.is-selected { border-color: var(--primary-blue); background: var(--light-blue); }
body.student-theme button.g-tile.is-done { border-color: var(--success); background: var(--success-surface); color: var(--success); }
body.student-theme button.g-tile.is-wrong { border-color: var(--error); background: var(--error-surface); color: var(--error); }
.match-cols .g-tile.is-done { opacity: 0.45; cursor: default; }
.match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.match-col { display: grid; gap: var(--space-2); align-content: start; }
.quiz-dir { text-align: center; margin: 0; }
.quiz-prompt { text-align: center; font-size: 1.6rem; font-weight: 800; color: var(--deep-blue); margin: var(--space-2) 0 var(--space-6); }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
body.student-theme button.memory-card { aspect-ratio: 1 / 1; min-height: 0; padding: var(--space-1); font-size: 0.88rem; }
body.student-theme button.memory-card:not(.is-open) { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.memory-card .memory-face { display: none; }
.memory-card.is-open .memory-face { display: block; }
.memory-card.is-open .memory-back { display: none; }
.memory-back { font-size: 1.6rem; font-weight: 800; }
.memory-card.lang-tr.is-open { border-style: solid; }
.memory-card.lang-ru.is-open { border-style: dashed; }
.game-over { text-align: center; padding: var(--space-4) 0; }
.game-over .actions { justify-content: center; }
.game-over-title { font-size: 1.3rem; font-weight: 800; margin: 0; color: var(--deep-blue); }
.game-over-score { font-size: 1.15rem; }
.game-over-score strong { font-size: 2.2rem; color: var(--primary-blue); }
.game-over.is-record .game-over-best { color: var(--success); font-weight: 700; }
.leaderboard { margin: var(--space-6) 0; }
.leaderboard-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); max-width: 28rem; }
.leaderboard-list li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--surface-white); border: 1px solid var(--border-neutral); }
.lb-rank { width: 1.6rem; font-weight: 800; color: var(--primary-blue); }
.lb-name { flex: 1; }
.lb-score { font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-prompt { font-size: 1.3rem; }
  body.student-theme button.g-tile { font-size: 0.9rem; }
  body.student-theme button.memory-card { font-size: 0.72rem; }
}

/* ------------------------------------------------ text translation -- */
.passage-card {
  white-space: pre-line; margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-card); background: var(--surface-blue); border: 1px solid var(--border-blue);
  color: var(--text-primary); font-size: 1.05rem; line-height: 1.7;
}
.passage-label {
  display: block; margin-bottom: var(--space-2); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary-blue);
}
@media (max-width: 480px) { .passage-card { padding: var(--space-3) var(--space-4); font-size: 1rem; } }

/* =====================================================================
   App shell — iOS/macOS-inspired student UI (2026-09-28). Scoped to
   body.app-mode (student role only): grouped-gray canvas, large titles,
   borderless rounded cards, inset grouped lists, frosted sidebar/tab bar.
   On Apple devices the system font (SF) is used; elsewhere self-hosted
   Inter — nothing is loaded from outside. ============================== */
body.app-mode {
  --bg: #F2F2F7;
  --page-background: #F2F2F7;
  --radius-card: 18px;
  --radius: 18px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(15, 42, 74, .06);
  --shadow: var(--shadow-card);
  --separator: rgba(60, 60, 67, .16);
  --label-2: #6E6E73;
  --label-3: #8E8E93;
  --fill: rgba(120, 120, 128, .12);
  --tint-orange: #FF9500;
  --tint-green: #34C759;
  --tint-purple: #AF52DE;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
}
body.app-mode .ico { width: 20px; height: 20px; flex: none; }
body.app-mode .card, body.app-mode .unit, body.app-mode .side-card,
body.app-mode .game-panel, body.app-mode .theory-card, body.app-mode .ex-card {
  border-color: transparent;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
}

/* ---- shell layout ---- */
body.app-mode .sidebar { display: none; }
body.app-mode .mobile-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  background: rgba(242, 242, 247, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--separator);
}
body.app-mode .mobile-bar .brand { gap: 8px; }
body.app-mode .mobile-bar .logo { width: 30px; height: 30px; border-radius: 8px; }
body.app-mode .mobile-bar strong { font-size: 1.05rem; letter-spacing: -.01em; }
body.app-mode .mobile-review {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; color: var(--primary-blue);
}
body.app-mode .mobile-review .ico { width: 24px; height: 24px; }
body.app-mode .mobile-review .nav-badge { position: absolute; top: 2px; right: 0; margin: 0; }
body.app-mode .app-main { min-width: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
body.app-mode main, body.app-mode main:not(.main-wide) { max-width: 1080px; padding: 8px 16px 32px; margin: 0 auto; }
body.app-mode main.main-wide { max-width: none; padding: 8px 12px 32px; }
body.app-mode .flash { margin: 12px 16px 0; border-radius: 12px; padding: 12px 16px; }
body.app-mode .foot { text-align: center; color: var(--label-3); }

body.app-mode nav.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; width: auto;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  background: rgba(249, 249, 251, .88);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--separator);
}
body.app-mode nav.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 4px 0; color: var(--label-3);
  font-size: .68rem; font-weight: 600; letter-spacing: .01em; text-decoration: none;
}
body.app-mode nav.tabbar a .ico { width: 26px; height: 26px; }
body.app-mode nav.tabbar a.is-active { color: var(--primary-blue); }

@media (min-width: 900px) {
  body.app-mode { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
  body.app-mode .mobile-bar, body.app-mode nav.tabbar { display: none; }
  body.app-mode .sidebar {
    display: flex; flex-direction: column; gap: 8px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: 20px 12px 16px;
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-right: .5px solid var(--separator);
  }
  body.app-mode .app-main { padding-bottom: 0; }
  body.app-mode main, body.app-mode main:not(.main-wide) { padding: 28px 40px 40px; }
  body.app-mode main.main-wide { padding: 20px 24px 40px; }
  body.app-mode .flash { margin: 16px 40px 0; }
}
body.app-mode .sidebar .brand { padding: 0 8px 8px; gap: 10px; }
body.app-mode .sidebar .logo { width: 36px; height: 36px; border-radius: 10px; }
body.app-mode .sidebar .brand small { font-size: .72rem; color: var(--label-3); }
body.app-mode .sidebar > nav {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px;
  margin: 8px 0 0; flex: 1 1 auto; width: auto;
}
body.app-mode .sidebar > nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  color: var(--text-primary); font-weight: 500; font-size: .95rem; text-decoration: none;
}
body.app-mode .sidebar > nav a .ico { color: var(--primary-blue); }
body.app-mode .sidebar > nav a:hover { background: var(--fill); color: var(--text-primary); }
body.app-mode .sidebar > nav a.is-active { background: var(--primary-blue); color: #fff; }
body.app-mode .sidebar > nav a.is-active .ico { color: #fff; }
body.app-mode .sidebar > nav a.is-active .nav-badge { background: #fff; color: var(--primary-blue); }
body.app-mode .sidebar > nav .nav-badge { margin-left: auto; }
body.app-mode .side-nav-label {
  margin: 14px 10px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--label-3);
}
body.app-mode .side-user {
  display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: .5px solid var(--separator);
}
body.app-mode .side-user .who {
  flex: 1; min-width: 0; background: none; padding: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-mode .avatar {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #60A5FA, #1D4ED8); color: #fff; font-weight: 700;
}
body.app-mode .avatar-lg { width: 64px; height: 64px; font-size: 1.6rem; }

/* ---- large titles, sections ---- */
body.app-mode .large-title { margin: 6px 0 16px; }
body.app-mode .large-title h1 {
  margin: 0; font-size: clamp(2rem, 5.5vw, 2.5rem); font-weight: 800; letter-spacing: -.025em;
  color: var(--text-primary);
}
body.app-mode .title-date {
  margin: 0 0 2px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--label-3);
}
body.app-mode .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 10px; }
body.app-mode .section-head h2 { margin: 0; font-size: 1.3rem; font-weight: 750; color: var(--text-primary); letter-spacing: -.015em; }
body.app-mode .section-head h2 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
body.app-mode .section-link { color: var(--primary-blue); font-weight: 600; text-decoration: none; font-size: .95rem; }
body.app-mode .level-block { margin: 28px 0; }
body.app-mode .level-block h2 span { color: var(--label-2); }
body.app-mode .level-chip {
  display: inline-grid; place-items: center; min-width: 2.4em; padding: 2px 8px; border-radius: 8px;
  background: var(--primary-blue); color: #fff !important; font-size: .85rem; font-weight: 800; letter-spacing: .02em;
}
body.app-mode .muted { color: var(--label-2); }
body.app-mode .crumb a { color: var(--primary-blue); text-decoration: none; font-weight: 600; }

/* ---- hero card ---- */
body.app-mode .hero-card {
  display: flex; align-items: center; gap: 20px; flex-wrap: nowrap;
  margin: 0 0 16px; padding: 20px; border: 0; border-radius: 22px;
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 55%, #60A5FA 100%);
  color: #fff; box-shadow: 0 14px 34px rgba(29, 78, 216, .28);
}
body.app-mode .hero-card .hero-body { flex: 1 1 auto; min-width: 0; }
body.app-mode .hero-card h2 { margin: 2px 0 6px; color: #fff; font-size: 1.35rem; letter-spacing: -.015em; }
body.app-mode .hero-kicker { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
body.app-mode .hero-card .hero-meta { display: block; color: inherit; opacity: .92; font-size: .92rem; font-weight: 600; }
body.app-mode .hero-card .bar { height: 6px; margin: 10px 0 0; border-radius: 999px; background: rgba(255, 255, 255, .28); overflow: hidden; }
body.app-mode .hero-card .bar > span { display: block; height: 100%; background: #fff; border-radius: inherit; }
body.app-mode .hero-card .hero-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; max-width: 100%;
  background: #fff !important; color: var(--primary-blue) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-mode .hero-card .hero-btn:hover { background: #EFF6FF; color: var(--primary-blue); }
/* A flex item's bare text can't ellipsize; the label span can. */
body.app-mode .hero-card .hero-btn .ico { flex: none; }
body.app-mode .hero-card .hero-btn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-mode .hero-card .ring { --track: rgba(255, 255, 255, .28); --fillc: #fff; }
body.app-mode .hero-card .ring span { background: #2563EB; color: #fff; }
body.app-mode .hero-card.hero-quiet { background: var(--surface-white); color: var(--text-primary); box-shadow: var(--shadow-card); }
body.app-mode .hero-card.hero-quiet h2 { color: var(--text-primary); }
body.app-mode .hero-card.hero-quiet .hero-kicker { color: var(--primary-blue); opacity: 1; }
body.app-mode .hero-card.hero-quiet .hero-meta { color: var(--label-2); font-weight: 500; }
body.app-mode .hero-card.hero-quiet .ring { --track: var(--light-blue); --fillc: var(--primary-blue); }
body.app-mode .hero-card.hero-quiet .ring span { background: var(--surface-white); color: var(--text-primary); }

/* ---- rings ---- */
body.app-mode .ring {
  --track: var(--light-blue); --fillc: var(--primary-blue);
  width: 84px; height: 84px; margin: 0; flex: none;
  background: conic-gradient(var(--fillc) calc(var(--p) * 1%), var(--track) 0);
}
body.app-mode .ring span { width: 66px; height: 66px; font-size: .95rem; font-weight: 800; }
body.app-mode .ring.ring-green { --fillc: var(--tint-green); --track: #DCFCE7; }
body.app-mode .ring-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
body.app-mode .ring-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px;
  background: var(--surface-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  color: var(--text-primary); text-decoration: none;
}
body.app-mode .ring-card strong { font-size: 1.05rem; }

/* ---- stat tiles ---- */
body.app-mode .stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
@media (min-width: 700px) { body.app-mode .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.app-mode .stat-tile {
  --tint: var(--primary-blue);
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; min-width: 0;
  background: var(--surface-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  color: var(--text-primary); text-decoration: none;
}
body.app-mode .stat-tile .ico { width: 26px; height: 26px; color: var(--tint); margin-bottom: 6px; }
body.app-mode .stat-tile strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
body.app-mode .stat-tile > span { color: var(--label-2); font-size: .85rem; font-weight: 500; }
body.app-mode .stat-tile .badge.streak-badge { background: none; padding: 0; color: var(--label-2); font-weight: 500; font-size: .85rem; }
body.app-mode .tint-orange { --tint: var(--tint-orange); }
body.app-mode .tint-green { --tint: var(--tint-green); }
body.app-mode .tint-purple { --tint: var(--tint-purple); }
body.app-mode .tint-blue { --tint: var(--primary-blue); }

/* ---- inset grouped lists ---- */
body.app-mode .unit-grid { display: grid; gap: 16px; }
@media (min-width: 1100px) { body.app-mode .unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
body.app-mode .unit { padding: 0; overflow: hidden; }
body.app-mode .unit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px 8px; }
body.app-mode .unit-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--text-primary); }
body.app-mode .unit-progress { margin: 0; flex: none; color: var(--label-3); font-size: .82rem; font-weight: 600; }
body.app-mode .list-group { list-style: none; margin: 0; padding: 0; display: block; }
body.app-mode .list-group.inset { background: var(--surface-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
body.app-mode .list-group > li { margin: 0; }
body.app-mode .list-group > li + li .list-row { border-top: .5px solid var(--separator); }
body.app-mode .unit .list-group > li:first-child .list-row { border-top: .5px solid var(--separator); }
body.app-mode .list-row, body.app-mode .list-row.lesson-card {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px 10px 16px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  color: var(--text-primary); text-decoration: none; transition: background-color 120ms ease;
}
body.app-mode .list-row:hover { background: rgba(0, 0, 0, .025); }
body.app-mode .list-row:active { background: rgba(0, 0, 0, .06); }
body.app-mode .list-row .row-icon, body.app-mode .list-row.lesson-card .num {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: var(--light-blue); color: var(--primary-blue); font-size: .85rem; font-weight: 800;
}
body.app-mode .list-row .row-icon.tint-orange, body.app-mode .list-row .row-icon.tint-green,
body.app-mode .list-row .row-icon.tint-purple, body.app-mode .list-row .row-icon.tint-blue { background: var(--tint); color: #fff; }
body.app-mode .list-row .row-icon .ico { width: 18px; height: 18px; }
body.app-mode .list-row.is-done .row-icon, body.app-mode .list-row .row-icon.is-good { background: #DCFCE7; color: #15803D; }
body.app-mode .list-row .row-icon.is-low { background: #FEE2E2; color: #B91C1C; }
body.app-mode .list-row.is-next { box-shadow: none; border-color: transparent; background: var(--surface-blue); }
body.app-mode .list-row.is-next .row-icon { background: var(--primary-blue); color: #fff; }
body.app-mode .row-body { flex: 1 1 auto; min-width: 0; }
body.app-mode .row-body h4 {
  margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-mode .row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-size: .82rem; }
body.app-mode .row-sub .badge { padding: 0; background: none; font-size: .82rem; color: var(--label-2); }
body.app-mode .row-sub .badge.completed, body.app-mode .row-sub .badge.scored, body.app-mode .row-sub .badge.reviewed { color: #15803D; }
body.app-mode .row-sub .next-lesson-flag { margin: 0; font-size: .72rem; }
body.app-mode .row-value { flex: none; font-weight: 700; color: var(--label-2); font-variant-numeric: tabular-nums; }
body.app-mode .row-value.good { color: #15803D; }
body.app-mode .row-value.low { color: #B91C1C; }
body.app-mode .ico.chevron { width: 14px; height: 14px; color: #C7C7CC; }
body.app-mode .list-row .nav-badge { margin: 0; }

/* ---- segmented control ---- */
body.app-mode nav.segmented {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; flex-wrap: nowrap;
  margin: 0 0 18px; padding: 2px; width: min(100%, 320px); border-radius: 10px; background: var(--fill);
}
body.app-mode nav.segmented a {
  display: block; padding: 7px 12px; border-radius: 8px; text-align: center;
  color: var(--text-primary); font-weight: 600; font-size: .9rem; text-decoration: none;
}
body.app-mode nav.segmented a.is-active { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); }

/* ---- review callout, profile, empty state ---- */
body.app-mode .review-callout { border: 0; box-shadow: var(--shadow-card); background: var(--surface-white); color: var(--text-primary); }
body.app-mode .review-callout p { display: flex; align-items: center; gap: 8px; }
body.app-mode .review-callout .ico { color: var(--tint-green); width: 22px; height: 22px; }
body.app-mode .profile-card { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
body.app-mode .profile-card h2 { margin: 0; font-size: 1.35rem; color: var(--text-primary); }
body.app-mode .profile-card .lead { margin: 2px 0 0; font-size: .95rem; }
body.app-mode .profile-links { margin-bottom: 20px; }
body.app-mode .logout-row { margin: 20px 0 8px; }
body.app-mode .logout-row button {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: var(--surface-white); color: #FF3B30; border: 0; border-radius: 14px; box-shadow: var(--shadow-card);
}
body.app-mode .empty-state { text-align: center; padding: 48px 16px; color: var(--label-2); }
body.app-mode .empty-state .ico { width: 48px; height: 48px; color: var(--label-3); }
body.app-mode .empty-state h2 { color: var(--text-primary); margin: 8px 0 4px; }

/* ---- buttons: iOS-like rounded rects ---- */
body.app-mode button:not(.ghost):not(.secondary):not(.danger):not(.g-tile),
body.app-mode .btn:not(.ghost):not(.secondary):not(.danger) { border-radius: 14px; font-weight: 650; }
body.app-mode button.ghost:not(.g-tile):not(.swatch), body.app-mode .btn.ghost { border-radius: 14px; border-color: transparent; background: var(--fill); }

@media (max-width: 480px) {
  body.app-mode .hero-card { padding: 16px; gap: 14px; align-items: flex-start; }
  body.app-mode .ring.ring-hero { width: 64px; height: 64px; }
  body.app-mode .ring.ring-hero span { width: 50px; height: 50px; font-size: .8rem; }
  body.app-mode .hero-card h2 { font-size: 1.15rem; }
  body.app-mode .hero-card .hero-btn { width: 100%; justify-content: center; }
  body.app-mode .stat-tile strong { font-size: 1.35rem; }
}
body.app-mode .hero-card .hero-link { color: inherit; text-decoration: none; }
body.app-mode .level-disclosure > summary { list-style: none; cursor: pointer; min-height: 44px; align-items: center; }
body.app-mode .level-disclosure > summary::-webkit-details-marker { display: none; }
body.app-mode .level-sum { display: inline-flex; align-items: center; gap: 8px; color: var(--label-3); font-weight: 600; font-size: .9rem; }
body.app-mode .level-sum .chevron { transition: transform 160ms ease; }
body.app-mode .level-disclosure[open] .level-sum .chevron { transform: rotate(90deg); }
body.app-mode .level-disclosure:not([open]) { margin: 12px 0; padding: 4px 12px; background: var(--surface-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
body.app-mode .level-disclosure:not([open]) > summary { margin: 0; }
body.app-mode .level-more { margin: 12px 4px 0; }
body.app-mode .lesson-hero, body.app-mode .course-progress-summary.hero-card { border-color: transparent; box-shadow: var(--shadow-card); }
body.app-mode .course-progress-summary.hero-card { box-shadow: 0 14px 34px rgba(29, 78, 216, .28); }
body.app-mode .hero-card .hero-link { display: inline-flex; align-items: center; min-height: 44px; }
body.app-mode .list-row .row-icon.level-icon { background: var(--primary-blue); color: #fff; font-size: .78rem; }

/* ---- background colour picker (top-right) ---- */
html[data-bg="white"] body.app-mode { --bg: #FFFFFF; }
html[data-bg="sky"] body.app-mode { --bg: #E6F0FF; }
html[data-bg="mint"] body.app-mode { --bg: #E3F6EC; }
html[data-bg="lavender"] body.app-mode { --bg: #EFEAFB; }
html[data-bg="sand"] body.app-mode { --bg: #F8F1E3; }
html[data-bg="rose"] body.app-mode { --bg: #FBE9EF; }
html[data-bg="peach"] body.app-mode { --bg: #FDEBDD; }
body.app-mode .mobile-bar { background: color-mix(in srgb, var(--bg) 84%, transparent); }
body.app-mode .bar-actions { display: flex; align-items: center; gap: 4px; }
body.app-mode .app-main { position: relative; }
body.app-mode .desktop-tools { display: none; }
@media (min-width: 900px) {
  body.app-mode .desktop-tools { display: block; position: absolute; top: 22px; right: 36px; z-index: 15; }
}
body.app-mode .color-picker { position: relative; }
body.app-mode button.color-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border-radius: 999px; background: var(--surface-white); color: var(--text-primary);
  font-size: .88rem; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(15, 42, 74, .06);
}
body.app-mode button.color-toggle .ico { width: 18px; height: 18px; color: var(--primary-blue); }
body.app-mode button.color-toggle:hover { background: var(--surface-white); color: var(--primary-blue); }
body.app-mode .mobile-bar button.color-toggle { min-height: 34px; padding: 5px 10px; font-size: .8rem; }
body.app-mode .color-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 280px; padding: 14px;
  background: #fff;
  border-radius: 18px; box-shadow: 0 12px 40px rgba(15, 23, 42, .18), 0 0 0 .5px rgba(0, 0, 0, .06);
}
body.app-mode .color-pop[hidden] { display: none; }
body.app-mode .color-pop-title { margin: 0 2px 10px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
body.app-mode .color-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; }
body.app-mode button.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 4px 0;
  background: none; border: 0; border-radius: 10px; color: var(--text-primary); font-size: .72rem; font-weight: 600;
}
body.app-mode button.swatch:hover { background: var(--fill); }
body.app-mode .swatch-dot {
  display: block; width: 40px; height: 40px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
body.app-mode button.swatch[aria-checked="true"] .swatch-dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px #fff, 0 0 0 5px var(--primary-blue); }
@media (max-width: 380px) { body.app-mode .mobile-bar .color-toggle span { display: none; } }

/* ---- word order: visible tokens + drag and drop (2026-09-28) ----
   The student theme paints every non-ghost button's text white (for the
   filled blue buttons); word tokens and the chip "×" are white/light, so
   they need an explicit dark label that outranks that rule. */
body.student-theme .tokens button.token:not(.ghost):not(.secondary):not(.danger),
body.student-theme .tokens button.token:not(.ghost):not(.secondary):not(.danger):hover {
  background: var(--surface-white); color: var(--deep-blue); border: 1px solid var(--border-control);
}
body.student-theme .tokens button.token.used:not(.ghost):not(.secondary):not(.danger) {
  background: var(--light-blue); color: var(--text-secondary); border-style: dashed;
}
body.student-theme .built-token button.built-remove:not(.ghost):not(.secondary):not(.danger) {
  background: var(--surface-blue); color: var(--deep-blue); border-radius: 50%; min-height: 28px; width: 28px;
}
.tokens button.token, .built-token { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.tokens button.token.used { cursor: default; }
.tokens button.token.is-drag-source { opacity: .35; }
body.student-theme .built { transition: background-color 120ms ease, border-color 120ms ease; }
body.student-theme .built.is-over { background: var(--light-blue); border-color: var(--primary-blue); border-style: solid; }
.built-empty.is-hidden { display: none; }
.drop-caret {
  display: inline-block; width: 3px; height: 32px; border-radius: 2px; background: var(--primary-blue);
  animation: caret-blink 1s steps(2, start) infinite;
}
@keyframes caret-blink { to { opacity: .35; } }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.6rem 1rem; border-radius: 999px;
  background: var(--surface-white); color: var(--deep-blue); border: 2px solid var(--primary-blue);
  font-weight: 700; font-size: 1.0625rem; white-space: nowrap;
  box-shadow: 0 12px 28px rgba(15, 42, 74, .22); transform-origin: center;
}
body.is-dragging-word, body.is-dragging-word * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .drop-caret { animation: none; } }

/* ---- free writing: how-to + optional example ---- */
.fw-howto {
  margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  background: var(--surface-blue); color: var(--deep-blue); font-size: .95rem; line-height: 1.5;
}
.fw-example { margin: var(--space-3) 0 0; }
.fw-example > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; cursor: pointer;
  border-radius: 999px; background: var(--light-blue); color: var(--primary-blue); font-weight: 650; list-style: none;
}
.fw-example > summary::-webkit-details-marker { display: none; }
.fw-sample {
  margin: var(--space-3) 0 var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  background: var(--success-surface); color: var(--success); font-weight: 650; font-size: 1.05rem;
}
body.app-mode .item textarea { width: 100%; }

/* ---- pair-table diagram (row-wise, stays two columns on phones) ---- */
.pair-table { width: 100%; border-collapse: collapse; font-size: 1rem; margin: var(--space-2) 0 0; }
.pair-table th { text-align: left; padding: 0.4rem 0.6rem; color: var(--text-secondary); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border-neutral); }
.pair-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border-neutral); vertical-align: top; }
.pair-table tr:last-child td { border-bottom: 0; }
.pair-table td.pt-left { color: var(--deep-blue); font-weight: 750; white-space: nowrap; }
.pair-table td.pt-right { color: var(--text-primary); }

/* ---- Russian lesson names under the Turkish title (2026-09-29) ---- */
body.app-mode .row-body .title-ru {
  display: block; margin-top: 1px; color: var(--label-2); font-size: .86rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app-mode .hero-card .hero-ru { margin: -2px 0 6px; opacity: .9; font-weight: 600; }
.hero-title-ru { margin: -0.3rem 0 0.5rem; color: var(--text-secondary); font-size: 1.15rem; font-weight: 600; }
.rail-lesson .ttl-ru { display: block; color: var(--text-secondary); font-size: .78rem; font-weight: 500; line-height: 1.3; }
/* Titles may wrap: understanding the Russian name beats a tidy single line. */
body.app-mode .row-body h4, body.app-mode .row-body .title-ru { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---- games: hangman, wheel of fortune, millionaire (2026-09-29) ---- */
.game-clue { margin: 0 0 var(--space-3); color: var(--deep-blue); font-weight: 650; font-size: 1.05rem; text-align: center; }
.tr-keyboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; margin: var(--space-4) 0 0; }
body.student-theme button.tr-key {
  min-height: 44px; padding: 0; border-radius: 10px; background: var(--surface-white); color: var(--deep-blue);
  border: 1px solid var(--border-neutral); font-size: 1.05rem; font-weight: 750; text-transform: lowercase;
}
body.student-theme button.tr-key:hover:not(:disabled) { background: var(--surface-blue); border-color: var(--border-blue); }
body.student-theme button.tr-key:disabled { cursor: default; opacity: .55; }
body.student-theme button.tr-key.is-hit { background: var(--success-surface); color: var(--success); border-color: var(--success); opacity: 1; }
body.student-theme button.tr-key.is-miss { background: var(--error-surface); color: var(--error); border-color: #FCA5A5; }
.letter-board { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: var(--space-2) 0; }
.lb-word { display: inline-flex; gap: 4px; }
.lb-cell {
  display: inline-grid; place-items: center; width: 34px; height: 42px; border-radius: 8px;
  background: var(--surface-blue); border-bottom: 3px solid var(--primary-blue);
  color: var(--deep-blue); font-size: 1.25rem; font-weight: 800; text-transform: lowercase;
}
.lb-cell.lb-fixed { background: none; border: 0; width: auto; }
.lb-cell.is-open { background: var(--surface-white); box-shadow: inset 0 0 0 1px var(--border-blue); }
.lb-cell.is-missed { color: var(--error); }
.letter-board.is-phrase .lb-cell { width: 28px; height: 38px; font-size: 1.1rem; }
.hangman-word.is-won .lb-cell { background: var(--success-surface); color: var(--success); }
.hangman-figure { display: flex; justify-content: center; }
.hangman-figure svg { width: 200px; height: 150px; }
.hangman-figure .gallows { stroke: var(--text-secondary); stroke-width: 5; fill: none; stroke-linecap: round; }
.hangman-figure .man { stroke: var(--error); stroke-width: 5; fill: none; stroke-linecap: round; }

.wheel-top { display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.wheel-wrap { position: relative; width: 220px; height: 220px; }
.wheel-wrap svg { width: 220px; height: 220px; filter: drop-shadow(0 8px 18px rgba(15, 42, 74, .22)); }
.wheel-rot { transform-box: fill-box; transform-origin: center; transition: transform 2s cubic-bezier(.17, .67, .16, 1); }
@media (prefers-reduced-motion: reduce) { .wheel-rot { transition-duration: .1s; } }
.wheel-pointer {
  position: absolute; top: -6px; left: 50%; z-index: 2; transform: translateX(-50%);
  width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid #F59E0B;
}
.wheel-side { display: flex; flex-direction: column; gap: var(--space-3); max-width: 260px; }
.wheel-status { margin: 0; color: var(--text-secondary); font-weight: 600; }
.wheel-solve { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.wheel-solve input { flex: 1 1 auto; min-width: 0; }

.mil-layout { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .mil-layout { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; } }
.mil-lifelines { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
body.student-theme button.mil-life { min-height: 40px; padding: 6px 14px; font-size: .9rem; }
body.student-theme button.mil-life:disabled { opacity: .4; text-decoration: line-through; }
.mil-question {
  margin: 0 0 var(--space-3); padding: var(--space-4); border-radius: 16px; text-align: center;
  background: linear-gradient(135deg, #0F2A4A, #1D4ED8); color: #fff; font-size: 1.2rem; font-weight: 750;
}
.mil-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 520px) { .mil-options { grid-template-columns: 1fr; } }
body.student-theme button.g-tile.mil-opt { justify-content: flex-start; text-align: left; }
body.student-theme button.g-tile.is-removed { visibility: hidden; }
.mil-hint { min-height: 1.5em; margin: var(--space-3) 0; color: var(--deep-blue); font-weight: 600; display: grid; gap: 4px; }
.mil-bar { display: grid; grid-template-columns: 1.2em 1fr 3em; align-items: center; gap: 8px; }
.mil-bar i { display: block; height: 12px; border-radius: 6px; background: var(--primary-blue); }
.mil-bar em { font-style: normal; font-variant-numeric: tabular-nums; }
body.student-theme button.mil-walk { margin-top: var(--space-2); }
.mil-ladder {
  list-style: none; margin: 0; padding: var(--space-2); border-radius: 16px; background: var(--deep-blue);
  color: #BFDBFE; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.mil-ladder li { padding: 4px 10px; border-radius: 8px; }
.mil-ladder li.is-safe { color: #FCD34D; }
.mil-ladder li.is-done { color: #86EFAC; }
.mil-ladder li.is-current { background: #F59E0B; color: #0F2A4A; }
@media (max-width: 759px) { .mil-ladder { display: grid; grid-template-columns: repeat(2, 1fr); font-size: .8rem; } }

/* ---- lesson video (top of the theory page) ---- */
.lesson-video { margin: 0 0 var(--space-6); text-align: center; }
.lesson-video video {
  display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 20px;
  background: transparent; box-shadow: 0 10px 30px rgba(15, 42, 74, .18);
}
.lesson-video.is-portrait video { width: min(100%, 340px); }
.lesson-video figcaption { margin-top: var(--space-2); color: var(--text-secondary); font-size: .9rem; font-weight: 600; }
.video-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: #FEE2E2; color: #B91C1C;
}

/* ---- support chat (student + teacher) ---- */
.chat-card {
  display: flex; flex-direction: column; max-width: 760px; margin: 0 0 var(--space-6);
  background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(15, 42, 74, .07);
  overflow: hidden;
}
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(60, 60, 67, .14); }
.chat-head strong { display: block; color: #0F2A4A; }
.chat-sub { display: block; color: #6E6E73; font-size: .85rem; }
.chat-head .avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #60A5FA, #1D4ED8); color: #fff; font-weight: 800;
}
.chat-thread {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; min-height: 280px; max-height: 58vh;
  overflow-y: auto; background: #F7F8FB; overscroll-behavior: contain;
}
.chat-empty { margin: auto; max-width: 420px; text-align: center; color: #6E6E73; font-size: .95rem; line-height: 1.5; }
.chat-msg { display: flex; flex-direction: column; max-width: 80%; }
.chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.is-theirs { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  margin: 0; padding: 9px 14px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 1rem; line-height: 1.4;
}
.chat-msg.is-mine .chat-bubble { background: #1D4ED8; color: #fff; border-bottom-right-radius: 6px; }
.chat-msg.is-theirs .chat-bubble { background: #E9E9EB; color: #0F172A; border-bottom-left-radius: 6px; }
.chat-time { margin: 2px 6px 4px; color: #8E8E93; font-size: .72rem; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(60, 60, 67, .14); background: #fff; }
.chat-form textarea {
  flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 160px; resize: vertical; margin: 0;
  padding: 10px 14px; border-radius: 20px; border: 1px solid #CBD5E1; font: inherit;
}
.chat-form button { flex: none; min-height: 44px; border-radius: 22px; padding: 0 18px; }
.chat-error { margin: 0; padding: 0 16px 12px; color: #B91C1C; }
.chat-error[hidden] { display: none; }

.support-list { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.support-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; margin: 0 0 8px;
  border-radius: 14px; background: #fff; border: 1px solid #E5E7EB; color: inherit; text-decoration: none;
}
.support-row.has-unread { border-color: #93C5FD; background: #EFF6FF; }
.support-name { font-weight: 750; }
.support-last { grid-column: 1; color: #6B7280; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-meta { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #6B7280; font-size: .82rem; white-space: nowrap; }

/* entry points: phone top bar icon + desktop top-right button */
body.app-mode .mobile-support { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--primary-blue); }
body.app-mode .mobile-support .ico { width: 24px; height: 24px; }
body.app-mode .mobile-support .nav-badge { position: absolute; top: 2px; right: 0; margin: 0; background: #FF3B30; }
body.app-mode .desktop-tools { display: none; }
@media (min-width: 900px) {
  body.app-mode .desktop-tools { display: flex; gap: 8px; align-items: center; }
}
body.app-mode .support-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border-radius: 999px; background: var(--surface-white); color: var(--text-primary); text-decoration: none;
  font-size: .88rem; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(15, 42, 74, .06);
}
body.app-mode .support-btn .ico { width: 18px; height: 18px; color: var(--primary-blue); }
body.app-mode .support-btn .nav-badge, body.app-mode .sidebar nav .support-badge { background: #FF3B30; color: #fff; }

/* ---------------------------------------------------------------------------
   Installable app (PWA): "install" card/banner and the offline bar. The card
   starts `hidden`; app.js reveals it only when the app is not installed yet.
   ------------------------------------------------------------------------ */
.install-card[hidden], .install-card [hidden] { display: none !important; }
.install-card {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface, #fff); border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-card); padding: 16px; margin: 0 0 18px;
}
.install-card .install-icon { flex: none; width: 52px; height: 52px; border-radius: 12px; }
.install-card .install-body { min-width: 0; flex: 1; }
.install-card h2 { margin: 0 0 4px; font-size: 1.05rem; color: var(--text-primary); }
.install-card p { margin: 0; color: var(--text-secondary); font-size: .93rem; line-height: 1.45; }
.install-card .install-how { margin-top: 10px; color: var(--text-primary); }
.install-card .inline-ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; color: var(--primary-blue); }
.install-card .install-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 44px;
  padding: 10px 18px; border-radius: 12px; font-weight: 650;
}
.install-card .install-btn .ico { width: 18px; height: 18px; }
.install-card .install-close {
  position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; padding: 0;
  font-size: 1.4rem; line-height: 1; color: var(--text-secondary) !important; border-radius: 50%;
  background: transparent !important; border: 0; box-shadow: none;
}
.install-banner { padding-right: 44px; }
/* The home-page banner is for phones and tablets; the profile card stays
   available everywhere (desktop browsers can install too). */
@media (min-width: 900px) { .install-banner { display: none !important; } }

.offline-bar {
  position: sticky; top: 0; z-index: 60; margin: 0;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  background: #1C1C1E; color: #fff; font-size: .88rem; font-weight: 600; text-align: center;
}
.offline-bar.pulse { animation: offline-pulse .6s ease; }
@keyframes offline-pulse { 0%, 100% { background: #1C1C1E; } 40% { background: #B42318; } }
@media (prefers-reduced-motion: reduce) { .offline-bar.pulse { animation: none; } }

/* ---------------------------------------------------------------------------
   «Мой словарь» — word notebook, flashcards, ☆ on lesson examples
   ------------------------------------------------------------------------ */
.example-list li.has-save { position: relative; padding-right: 52px; }
.example-list .word-save-form { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); margin: 0; }
button.word-save.ghost {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background: transparent !important;
  font-size: 1.35rem; line-height: 1; color: var(--text-secondary) !important; cursor: pointer;
}
button.word-save.ghost:hover { background: var(--surface-muted, #EEF2FF) !important; }
button.word-save.ghost.is-saved { color: #D97706 !important; cursor: default; }
button.word-save.ghost.is-error { color: var(--error, #B42318) !important; }

.word-add-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr auto; align-items: end; }
.word-add-form label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; margin: 0; }
.word-add-form button { min-height: 44px; }
@media (max-width: 640px) { .word-add-form { grid-template-columns: 1fr; } }

.words-tools { display: flex; gap: 10px; align-items: center; margin: 18px 0 10px; flex-wrap: wrap; }
.words-tools .words-search { flex: 1 1 220px; min-height: 44px; }
.words-tools .words-play { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.words-tools .words-play .ico { width: 18px; height: 18px; }

.word-list .word-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 16px; flex-wrap: wrap; }
.word-list .word-row[hidden] { display: none; }
.word-row .word-main { min-width: 0; flex: 1 1 220px; }
.word-row .word-tr { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--text-primary); overflow-wrap: anywhere; }
.word-row .word-ru { margin: 2px 0 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.word-row .word-meta { margin: 6px 0 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--text-secondary); }
.word-row .word-meta a { color: var(--primary-blue); }
.word-box { display: inline-flex; gap: 3px; }
.word-box i { width: 8px; height: 8px; border-radius: 50%; background: #DBEAFE; }
.word-box i.on { background: var(--primary-blue); }
.word-learned { color: var(--success, #15803D); font-weight: 650; }
.word-edit { flex: 0 0 auto; }
.word-edit summary { cursor: pointer; color: var(--primary-blue); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; list-style: none; }
.word-edit summary::-webkit-details-marker { display: none; }
.word-edit[open] { flex-basis: 100%; }
.word-edit-form { display: grid; gap: 8px; margin-top: 6px; }
.word-edit-form label { display: grid; gap: 4px; font-size: .88rem; font-weight: 600; margin: 0; }
.word-edit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.word-edit-actions button { min-height: 44px; }
button.ghost.danger-text { color: var(--error, #B42318) !important; }

.flashcard {
  max-width: 560px; margin: 8px auto 0; text-align: center; background: var(--surface, #fff);
  border-radius: 20px; box-shadow: var(--shadow-card); padding: 28px 20px 24px;
}
.flash-dir { margin: 0; color: var(--text-secondary); font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.flash-front { margin: 18px 0 22px; font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 750; color: var(--text-primary); overflow-wrap: anywhere; }
.flash-reveal > summary { list-style: none; display: inline-flex; min-height: 48px; align-items: center; padding: 0 22px; cursor: pointer; }
.flash-reveal > summary::-webkit-details-marker { display: none; }
.flash-reveal[open] > summary { display: none; }
.flash-back { margin: 0 0 22px; font-size: 1.35rem; font-weight: 650; color: var(--primary-blue); overflow-wrap: anywhere; }
.flash-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flash-grade form { margin: 0; }
.flash-grade button { width: 100%; min-height: 52px; font-size: 1.05rem; }
button.ghost.flash-no { border: 1.5px solid #FCA5A5 !important; color: #B42318 !important; }
.words-left { text-align: center; }
.done-card .done-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.words-due-card { display: flex; align-items: center; gap: 12px; text-decoration: none; margin: 0 0 18px; color: var(--text-primary); }
.words-due-card > .ico:first-child { width: 26px; height: 26px; color: #D97706; flex: none; }
.words-due-card > span { flex: 1; display: grid; }
.words-due-card .chevron { width: 18px; height: 18px; color: var(--text-secondary); }

.word-source { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 12px; background: rgba(118, 118, 128, .12); flex-wrap: wrap; }
.word-source .seg { padding: 9px 14px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 9px; text-decoration: none; font-weight: 650; color: var(--text-secondary); }
.word-source .seg.is-active { background: var(--surface, #fff); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.word-source .seg.is-disabled { opacity: .6; }
.word-source-note { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 8px; color: #B45309; font-weight: 650; font-size: .9rem; }
.word-source-note .ico { width: 16px; height: 16px; }
/* On the quiet (white) hero the white hero button would read as a link. */
body.app-mode .words-hero .hero-btn { background: var(--primary-blue) !important; color: #fff !important; }

/* ---------------------------------------------------------------------------
   Teacher: per-student report (/teacher/students/<id>/report)
   ------------------------------------------------------------------------ */
.report-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.report-head h1 { margin-bottom: 4px; }
.report-alert { border-radius: 12px; margin: 0 0 12px; }
.report-stats div { min-width: 150px; }

/* One series, one hue: bars rise from a shared baseline, 4px rounded tops,
   a 2px surface gap between bars; the value sits above each non-zero bar
   and the per-day breakdown is in the tooltip and the hidden table. */
.activity-chart {
  display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px;
  height: 180px; align-items: end; margin-top: 12px; border-bottom: 1px solid var(--line);
}
.act-col { height: 100%; display: grid; grid-template-rows: 18px 1fr; align-items: end; justify-items: center; position: relative; outline: none; }
.act-val { font-size: .75rem; font-weight: 650; color: var(--text-secondary, #475569); align-self: end; }
.act-bar { width: 100%; max-width: 28px; background: var(--primary-blue, #1D4ED8); border-radius: 4px 4px 0 0; align-self: end; }
.act-col:hover .act-bar, .act-col:focus-visible .act-bar { background: #1E40AF; }
.act-col:focus-visible { box-shadow: 0 0 0 2px var(--primary-blue, #1D4ED8); border-radius: 4px; }
.act-day { position: absolute; bottom: -34px; font-size: .7rem; line-height: 1.1; text-align: center; color: var(--muted); }
.activity-chart + table + * , .activity-chart { margin-bottom: 40px; }

.level-progress { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.level-progress li { display: grid; grid-template-columns: 1fr; gap: 4px; }
.lp-bar, .weak-meter { display: block; height: 8px; border-radius: 999px; background: #DBEAFE; overflow: hidden; }
.lp-bar > span { display: block; height: 100%; background: var(--primary-blue, #1D4ED8); border-radius: inherit; }
.lp-num { font-size: .85rem; color: var(--muted); }

.weak-list, .mistake-list { list-style: none; padding: 0; margin: 0; }
.weak-list li { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.weak-list li:first-child { border-top: 0; }
.weak-title { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-width: 0; }
.weak-meter > span { display: block; height: 100%; background: #B42318; border-radius: inherit; }
@media (max-width: 640px) { .weak-list li { grid-template-columns: 1fr; } }
.mistake-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.mistake-list li:first-child { border-top: 0; }
.mistake-list .meta { margin: 0; font-size: .82rem; color: var(--muted); }
.mistake-list .prompt { margin: 4px 0; font-weight: 650; }
.mistake-list .wrong-answer { color: #B42318; text-decoration: line-through; text-decoration-thickness: 1px; }
.student-row .last-seen { font-size: .82rem; color: var(--muted); }

/* "Submitted but under the pass mark" lesson chip. */
.badge.retry { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }

/* ---------------------------------------------------------------------------
   Public storefront: landing (/), free sample lesson (/try), request (/buy)
   ------------------------------------------------------------------------ */
.landing-main { max-width: 1080px; margin: 0 auto; padding: 8px 16px 48px; }
.storefront .lp-kicker { margin: 0 0 8px; color: var(--primary-blue, #1D4ED8); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.storefront h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 14px; color: var(--text-primary, #172B4D); }
.storefront h2 { font-size: clamp(1.35rem, 3.4vw, 1.9rem); letter-spacing: -.02em; margin: 0 0 16px; color: var(--text-primary, #172B4D); }
.lp-accent { color: var(--primary-blue, #1D4ED8); }
.lp-lead { font-size: 1.1rem; line-height: 1.55; color: var(--text-secondary, #475569); margin: 0 0 20px; max-width: 40rem; }
.lp-note { color: var(--text-secondary, #475569); font-size: .95rem; margin: 12px 0 0; }
.lp-meta { display: block; color: var(--text-secondary, #475569); font-size: .9rem; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-btn { min-height: 50px; padding: 12px 22px; border-radius: 14px; font-weight: 700; font-size: 1.02rem; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.lp-hero { display: grid; gap: 28px; align-items: center; padding: 24px 0 36px; }
@media (min-width: 860px) { .lp-hero { grid-template-columns: 1.25fr .75fr; padding-top: 40px; } }
.lp-phone { margin: 0; justify-self: center; width: min(280px, 78vw); border-radius: 34px; background: #0B1220; padding: 9px;
  box-shadow: 0 30px 60px rgba(15, 42, 74, .22); }
.lp-phone img { display: block; width: 100%; height: auto; border-radius: 26px; }
.lp-phone-hero { transform: rotate(2deg); }

.lp-section { padding: 28px 0; border-top: 1px solid rgba(15, 42, 74, .08); }
.lp-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .lp-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-cards li { background: var(--surface, #fff); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-card); display: grid; gap: 6px; }
.lp-cards strong { color: var(--text-primary, #172B4D); }
.lp-cards span { color: var(--text-secondary, #475569); line-height: 1.45; }
.lp-small { margin-top: 18px; }

.lp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .lp-checks:not(.lp-checks-sm) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-checks li { position: relative; padding: 12px 14px 12px 44px; background: var(--surface, #fff); border-radius: 14px; box-shadow: var(--shadow-card); line-height: 1.4; }
.lp-checks li::before { content: "✓"; position: absolute; left: 14px; top: 11px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary-blue, #1D4ED8); color: #fff; font-size: .75rem; font-weight: 800; display: grid; place-items: center; }
.lp-checks-sm li { background: transparent; box-shadow: none; padding: 4px 0 4px 30px; }
.lp-checks-sm li::before { left: 0; top: 5px; }

.lp-features { display: grid; gap: 28px; }
@media (min-width: 760px) { .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-feature { display: grid; gap: 16px; align-items: center; }
@media (min-width: 520px) { .lp-feature { grid-template-columns: 200px 1fr; } .lp-feature .lp-phone { width: 200px; } }
.lp-feature h3 { margin: 0 0 6px; font-size: 1.15rem; color: var(--text-primary, #172B4D); }
.lp-feature p { margin: 0; color: var(--text-secondary, #475569); line-height: 1.5; }

.lp-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-levels li { display: flex; gap: 14px; align-items: flex-start; background: var(--surface, #fff); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-card); }
.lp-levels li > div { display: grid; gap: 4px; }

.lp-price-grid { display: grid; gap: 14px; margin-bottom: 22px; }
@media (min-width: 760px) { .lp-price-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: start; } }
.lp-price-card { background: var(--surface, #fff); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-card); display: grid; gap: 8px; }
.lp-price-card.is-main { border: 2px solid var(--primary-blue, #1D4ED8); }
.lp-price-level { margin: 0; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.lp-price-value { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary, #172B4D); }
.lp-price-ask { font-size: 1.2rem; color: var(--text-secondary, #475569); }
.lp-price-card .lp-btn { margin-top: 6px; }
.lp-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; color: var(--text-secondary, #475569); }
.lp-steps strong { color: var(--text-primary, #172B4D); }

.lp-faq details { background: var(--surface, #fff); border-radius: 14px; box-shadow: var(--shadow-card); margin: 0 0 10px; }
.lp-faq summary { cursor: pointer; padding: 15px 18px; font-weight: 650; min-height: 44px; }
.lp-faq details p { margin: 0; padding: 0 18px 16px; color: var(--text-secondary, #475569); line-height: 1.5; }

.lp-final { margin: 32px 0 0; padding: 28px 22px; border-radius: 22px; text-align: center; color: #fff;
  background: linear-gradient(150deg, #1D4ED8, #1E3A8A); }
.lp-final h1, .lp-final h2 { color: #fff; }
.lp-final p { color: #DBEAFE; }
.lp-final .lp-kicker { color: #FDE68A; }
.lp-final .lp-ctas { justify-content: center; }
.lp-final .btn.secondary { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .5); }
.lp-final .lp-btn:not(.secondary) { background: #fff !important; color: #1D4ED8 !important; }
.lp-final a:not(.btn) { color: #fff; }

/* Free sample lesson */
.try-main { max-width: 720px; }
.try-step { margin: 26px 0; }
.try-step h2 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.try-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-blue, #1D4ED8); color: #fff; display: grid; place-items: center; font-size: 1rem; }
.try-video { max-width: 320px; margin: 0 auto; }
.try-video.is-landscape { max-width: none; }
.try-phrases { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.try-phrases li { background: var(--surface, #fff); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-card); }
.try-phrases .tr { margin: 0; font-size: 1.3rem; font-weight: 750; color: var(--text-primary, #172B4D); }
.try-phrases .say { margin: 2px 0; color: var(--primary-blue, #1D4ED8); }
.try-phrases .note { margin: 0; color: var(--text-secondary, #475569); }
.try-name { display: grid; gap: 8px; font-weight: 650; }
.try-name-row { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 700; flex-wrap: wrap; }
.try-name-row input { flex: 1 1 160px; min-height: 48px; font-size: 1.05rem; }
.try-submit { width: 100%; }
.try-result { margin: 12px 0 18px; }
.try-intro { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 800; color: var(--primary-blue, #1D4ED8); margin: 4px 0; }
.try-review { margin-bottom: 8px; }

/* Request form */
.buy-main { max-width: 640px; }
.buy-form { background: var(--surface, #fff); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-card); }
.buy-form .lp-btn { width: 100%; }
.buy-consent { align-items: flex-start; font-weight: 500; }
.buy-error { border-radius: 12px; }
.buy-offer { margin: 0 0 16px; font-weight: 750; color: var(--text-primary, #172B4D); }
.field-error { margin: -4px 0 10px; color: #B91C1C; font-size: .92rem; font-weight: 650; }
.buy-form input[aria-invalid="true"], .buy-form textarea[aria-invalid="true"] { border-color: #B91C1C; }
.buy-optional { margin: 4px 0 8px; }
.buy-optional summary { cursor: pointer; color: var(--primary-blue, #1D4ED8); font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Course program (/programma) */
.prog-counts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .prog-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prog-counts li { background: var(--surface, #fff); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-card); display: grid; gap: 2px; min-width: 0; }
.prog-counts strong { font-size: 1.6rem; line-height: 1.1; color: var(--text-primary, #172B4D); }
.prog-counts span { color: var(--text-secondary, #475569); overflow-wrap: anywhere; }
.prog-price { margin: 0 0 16px; font-size: 1.05rem; }
.prog-price strong { font-size: 1.35rem; }
.prog-ctas { margin: 18px 0 8px; }
.prog-unit { padding: 22px 0; border-top: 1px solid rgba(15, 42, 74, .08); }
.prog-unit h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.prog-can-label { margin: 0 0 8px; font-weight: 700; color: var(--text-primary, #172B4D); }
.prog-can { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.prog-can li { background: #EFF6FF; border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.prog-phrase { font-weight: 750; font-size: 1.05rem; overflow-wrap: anywhere; }
.prog-ru-line { color: var(--text-secondary, #475569); overflow-wrap: anywhere; }
.prog-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 720px) { .prog-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prog-lesson { background: var(--surface, #fff); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-card); display: grid; gap: 2px; min-width: 0; }
.prog-ru { font-weight: 650; overflow-wrap: anywhere; }
.prog-tr { color: var(--text-secondary, #475569); font-size: .9rem; overflow-wrap: anywhere; }
/* Phone enrollment bar: landing, free-lesson result, placement result, articles.
   Hidden on desktop and absent from /buy and /learn (the template omits it). */
.enroll-bar { display: none; }
@media (max-width: 840px) {
  .enroll-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; box-sizing: border-box;
    min-height: 52px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #1D4ED8; color: #fff; font-weight: 750; font-size: .95rem; line-height: 1.25;
    text-align: center; text-decoration: none; white-space: normal;
    box-shadow: 0 -8px 24px rgba(15, 42, 74, .18);
  }
  .enroll-bar:hover, .enroll-bar:active { background: #1E40AF; color: #fff; }
  body.has-enroll-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .lp-final .lp-ctas { flex-direction: column; align-items: stretch; }
  .lp-final .lp-btn, .test-cta .lp-btn { width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: center; }
  .test-cta .actions { display: grid; }
}

/* Teacher: requests */
.request-row { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.request-row .request-main { min-width: 0; flex: 1 1 260px; }
.request-contact { margin: 4px 0; font-weight: 650; overflow-wrap: anywhere; }
.request-row.status-done, .request-row.status-spam { opacity: .6; }
.funnel-stats div { min-width: 140px; }
body.student-theme.storefront .lp-final h1, body.student-theme.storefront .lp-final h2 { color: #fff; }
.storefront .level-chip { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 8px;
  background: var(--primary-blue, #1D4ED8); color: #fff; font-weight: 800; font-size: .85rem; flex: none; }

/* 🔊 listen buttons (Web Speech API, added by app.js only when a Turkish voice exists) */
button.ghost.speak-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; margin-left: 4px;
  border: 0; border-radius: 50%; background: transparent !important; font-size: 1.05rem; line-height: 1;
  vertical-align: middle; cursor: pointer; color: var(--primary-blue, #1D4ED8) !important;
}
button.ghost.speak-btn:hover { background: #EFF6FF !important; }
button.ghost.speak-btn.is-speaking { background: #DBEAFE !important; }

/* ---------------------------------------------------------------------------
   Level exam + certificate
   ------------------------------------------------------------------------ */
.exam-card { display: flex; gap: 14px; align-items: center; text-decoration: none; margin: 0 0 18px; color: var(--text-primary, #172B4D); }
.exam-card .exam-ico { font-size: 1.8rem; flex: none; }
.exam-card .exam-body { display: grid; gap: 2px; }
.exam-card .exam-body span { color: var(--text-secondary, #475569); font-size: .92rem; }
.exam-card.is-open { border: 2px solid var(--primary-blue, #1D4ED8); }
.exam-card.is-passed { border: 2px solid #F59E0B; }
.exam-chip { font-size: .78rem; font-weight: 650; color: var(--primary-blue, #1D4ED8); }
.exam-chip.is-passed { color: #B45309; }
.exam-bar { display: block; height: 10px; border-radius: 999px; background: #DBEAFE; overflow: hidden; margin: 8px 0 4px; }
.exam-bar > span { display: block; height: 100%; background: var(--primary-blue, #1D4ED8); border-radius: inherit; }
.exam-passed { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }

body.certificate-page { margin: 0; background: #E2E8F0; font-family: Inter, -apple-system, "Segoe UI", sans-serif; color: #0F2A4A; }
.cert-tools { max-width: 1000px; margin: 16px auto; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cert-tools a { color: #1D4ED8; font-weight: 600; }
.cert-tools button { min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 0; background: #1D4ED8; color: #fff; font-weight: 700; cursor: pointer; }
.cert { max-width: 1000px; margin: 0 auto 32px; padding: 0 16px; }
.cert-inner { aspect-ratio: 297 / 210; background: #fff; border: 14px solid #1D4ED8; outline: 3px solid #93C5FD; outline-offset: -26px;
  border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4% 6%; gap: .6em;
  font-size: clamp(11px, 1.6vw, 18px); }
.cert-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.4em; color: #1D4ED8; margin: 0; }
.cert-brand img { width: 2.2em; height: 2.2em; border-radius: 10px; }
.cert-kicker { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; color: #64748B; margin: .4em 0 0; }
.cert-name { font-size: 3em; margin: .1em 0; letter-spacing: -.02em; color: #0F2A4A; }
.cert-text { margin: 0; font-size: 1.15em; color: #334155; }
.cert-level { margin: .2em 0; font-size: 2em; font-weight: 800; color: #1D4ED8; }
.cert-level span { display: inline-block; background: #1D4ED8; color: #fff; border-radius: 10px; padding: 0 .35em; margin-right: .2em; }
.cert-score { margin: .4em 0 0; font-weight: 650; }
.cert-foot { display: flex; gap: 3em; margin-top: 1.2em; }
.cert-foot p { margin: 0; display: grid; gap: .2em; font-weight: 700; }
.cert-foot span { font-weight: 500; color: #64748B; font-size: .85em; text-transform: uppercase; letter-spacing: .08em; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body.certificate-page { background: #fff; }
  .cert-tools { display: none; }
  .cert { max-width: none; margin: 0; padding: 8mm; }
  .cert-inner { font-size: 16px; height: calc(210mm - 16mm); aspect-ratio: auto; }
}

/* Teacher: enrollment message after "Оплачено → оформить доступ" */
.enroll-card { border: 2px solid #16A34A; }
.enroll-message { width: 100%; font: inherit; font-size: .95rem; line-height: 1.45; padding: 12px; border-radius: 12px; border: 1px solid #CBD5E1; background: #F8FAFC; }
.access-until { margin: 6px 0 0; color: var(--text-secondary, #475569); }

/* Student home: welcome (before the first lesson) and the weekly plan */
.welcome-card { border: 2px solid var(--primary-blue, #1D4ED8); margin-bottom: 16px; }
.welcome-card h2 { margin: 0 0 10px; font-size: 1.15rem; }
.welcome-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.45; color: var(--text-secondary, #475569); }
.welcome-steps strong { color: var(--text-primary, #172B4D); }
.plan-card { margin: 16px 0; }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan-head h2 { margin: 0; font-size: 1.1rem; }
.plan-count { font-size: 1.3rem; color: var(--primary-blue, #1D4ED8); }
.plan-bar { display: block; height: 10px; border-radius: 999px; background: #DBEAFE; overflow: hidden; margin: 10px 0 6px; }
.plan-bar > span { display: block; height: 100%; background: var(--primary-blue, #1D4ED8); border-radius: inherit; }
.plan-card .hint { margin: 0; }



/* ---------------------------------------------------------------------------
   Animated background (partials/bg_scene.html): drifting light + floating
   Turkish letters, behind all content. Only transform/opacity animate (no
   layout, no blur filter), so it stays smooth on phones.
   ------------------------------------------------------------------------ */
.bg-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.bg-blob { position: absolute; border-radius: 50%; will-change: transform; opacity: .75; }
.bg-blob-1 { width: 70vmax; height: 70vmax; top: -28vmax; left: -22vmax;
  background: radial-gradient(circle at center, rgba(96, 165, 250, .55), rgba(96, 165, 250, 0) 62%);
  animation: bg-drift-1 28s ease-in-out infinite alternate; }
.bg-blob-2 { width: 64vmax; height: 64vmax; bottom: -30vmax; right: -24vmax;
  background: radial-gradient(circle at center, rgba(167, 139, 250, .42), rgba(167, 139, 250, 0) 62%);
  animation: bg-drift-2 34s ease-in-out infinite alternate; }
.bg-blob-3 { width: 46vmax; height: 46vmax; top: 34%; left: 38%;
  background: radial-gradient(circle at center, rgba(52, 211, 153, .30), rgba(52, 211, 153, 0) 62%);
  animation: bg-drift-3 40s ease-in-out infinite alternate; }
@keyframes bg-drift-1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes bg-drift-2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-12vmax, -14vmax) scale(.92); } }
@keyframes bg-drift-3 { from { transform: translate(-8vmax, 6vmax) scale(.9); } to { transform: translate(10vmax, -8vmax) scale(1.15); } }

.bg-glyph { position: absolute; left: var(--x); bottom: -160px; font-weight: 800; line-height: 1;
  font-size: calc(140px * var(--s)); color: var(--primary-blue, #1D4ED8); opacity: 0; will-change: transform, opacity;
  animation: bg-float var(--d) linear var(--delay) infinite; }
@keyframes bg-float {
  0% { transform: translateY(0) rotate(-6deg); opacity: 0; }
  12% { opacity: .07; }
  85% { opacity: .07; }
  100% { transform: translateY(-120vh) rotate(8deg); opacity: 0; }
}
/* Behind cards the letters would be noise on narrow screens: fewer of them. */
@media (max-width: 640px) { .bg-glyph:nth-of-type(even) { display: none; } .bg-glyph { font-size: calc(96px * var(--s)); } }
@media (prefers-reduced-motion: reduce) {
  .bg-blob, .bg-glyph { animation: none; }
  .bg-glyph { display: none; }
}
@media print { .bg-scene { display: none; } }

/* Homework (teacher assigns a lesson with a due date) */
.homework-card .homework-list { margin-top: .5rem; }
.homework-row.is-overdue { border-left: 4px solid var(--error, #B42318); }
.homework-row.is-today { border-left: 4px solid #D97706; }
.badge.hw-today { color: #92400E; background: #FEF3C7; }
.badge.hw-due { color: var(--deep-blue, #1D4ED8); background: var(--surface-blue, #EFF6FF); }
.homework-note { display: block; margin-top: .25rem; font-size: .9rem; color: var(--label-2, #475569); }
.homework-form { display: grid; gap: .6rem; margin-top: 1rem; grid-template-columns: 1fr; }
.homework-form label { display: grid; gap: .25rem; }
.homework-form select, .homework-form input { width: 100%; max-width: 100%; }
@media (min-width: 760px) { .homework-form { grid-template-columns: 2fr 1fr 2fr auto; align-items: end; } }
.homework-teacher-list li { align-items: center; gap: .75rem; }
body.app-mode .row-sub .badge.bad { color: var(--error, #B42318); font-weight: 650; }
body.app-mode .row-sub .badge.hw-today { color: #B45309; font-weight: 650; }
body.app-mode .row-sub .badge.hw-due { color: var(--deep-blue, #1D4ED8); }
.homework-teacher-list form button { padding: .3rem .7rem; min-height: 0; font-size: .85rem; }
body.app-mode nav.tabbar a { position: relative; }
body.app-mode nav.tabbar a .tab-badge { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; background: #D97706; color: #fff; }
body.app-mode .sidebar > nav .homework-badge { background: #D97706; color: #fff; }

/* Animated listening scene (listening_scenes.py) */
.scene-player { margin: .5rem 0 1rem; }
.scene-stage { position: relative; border-radius: 18px; overflow: hidden; background: #DBEAFE; box-shadow: 0 10px 28px rgba(15,42,74,.12); }
.scene-stage img { display: block; width: 100%; height: auto; }
.scene-bubble { position: absolute; display: flex; gap: 6px; align-items: center; padding: .55rem .8rem; background: #fff; border-radius: 16px;
  box-shadow: 0 6px 16px rgba(15,42,74,.15); opacity: .35; transform: scale(.9); transition: opacity .2s, transform .2s; }
.scene-bubble i { width: 9px; height: 9px; border-radius: 50%; background: #1D4ED8; display: block; }
.scene-bubble.is-talking { opacity: 1; transform: scale(1.05); }
.scene-bubble.is-talking i { animation: scene-dot 0.9s infinite ease-in-out; }
.scene-bubble.is-talking i:nth-child(2) { animation-delay: .15s; }
.scene-bubble.is-talking i:nth-child(3) { animation-delay: .3s; }
@keyframes scene-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-5px); opacity: 1; } }
.scene-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%;
  border: 0; background: rgba(29,78,216,.92); color: #fff; font-size: 30px; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px rgba(29,78,216,.35); }
.scene-player.is-playing .scene-play, .scene-player.was-played .scene-play { display: none; }
.scene-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.scene-controls .hint { flex: 1 1 100%; margin: 0; }
.scene-text { font-weight: 700; color: #1D4ED8; }
@media (prefers-reduced-motion: reduce) { .scene-bubble.is-talking i { animation: none; } }
body .scene-player .scene-play { width: 64px !important; height: 64px !important; min-height: 0 !important; padding: 0 !important;
  border-radius: 50% !important; background: rgba(29,78,216,.9) !important; color: #fff !important; font-size: 26px; left: 50%; top: auto; bottom: 12px;
  transform: translateX(-50%); }
body .scene-player .scene-controls button { width: auto; min-height: 0; padding: .4rem .85rem; font-size: .9rem; }
body .scene-player .scene-play { left: 12px; bottom: 12px; transform: none; width: 56px !important; height: 56px !important; }
.scene-bubble::after { content: ""; position: absolute; left: 22px; bottom: -9px; border: 9px solid transparent; border-top-color: #fff; border-bottom: 0; }

/* Free sample lesson (/try) */
.try-hero { margin: 1rem 0 .5rem; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 30px rgba(15,42,74,.12); }
.try-hero img { display: block; width: 100%; height: auto; }
.try-steps-list { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.try-steps-list li { background: #EFF6FF; color: #1E3A8A; border-radius: 999px; padding: .3rem .75rem; font-size: .9rem; font-weight: 600; }
.try-letters-hint { margin-top: 1rem; }
.try-game { margin-top: .5rem; }
.try-game .game-start { width: 100%; }
.try-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin: 1rem 0 1.5rem; }
.try-gallery figure { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 8px 22px rgba(15,42,74,.10); }
.try-gallery img { display: block; width: 100%; height: auto; }
.try-gallery figcaption { padding: .5rem .8rem; font-size: .9rem; color: #334155; }
.try-course h2, .try-facts h2 { margin-bottom: .6rem; }
.try-stats { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 760px) { .try-stats { grid-template-columns: repeat(4, 1fr); } }
.try-stats li { background: #fff; border-radius: 16px; padding: .8rem .9rem; box-shadow: 0 6px 18px rgba(15,42,74,.08); display: grid; gap: .15rem; }
.try-stats strong { font-size: 1.8rem; color: #1D4ED8; line-height: 1.1; }
.try-stats span { font-size: .85rem; color: #334155; }
.try-sub { font-weight: 700; margin: .6rem 0 .3rem; }
.try-outcomes { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .25rem; }
.try-howto { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .35rem; }
.try-price { font-weight: 700; font-size: 1.1rem; color: #0F2A4A; }
.try-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.try-fact { background: #EFF6FF; border-radius: 16px; padding: .8rem 1rem; }
.try-fact h3 { margin: 0 0 .25rem; font-size: 1rem; color: #1E3A8A; }
.try-fact p { margin: 0; font-size: .92rem; }

/* Turkish letters bar under a focused Turkish answer box */
.tr-letters { display: flex; flex-wrap: wrap; gap: .25rem; margin: .35rem 0 .2rem; }
.tr-letters[hidden] { display: none; }
body .tr-letters .tr-letter { min-width: 34px; min-height: 40px; padding: 0 .4rem; border-radius: 10px; font-size: 1.1rem; font-weight: 700;
  background: #EFF6FF !important; color: #1D4ED8 !important; border: 1px solid #BFDBFE; box-shadow: none; }
body .tr-letters .tr-shift.is-on { background: #1D4ED8 !important; color: #fff !important; }

/* /teacher/hard — questions students get wrong most often */
.hard-levels { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 0; }
.hard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.hard-card { margin: 0; }
.hard-lesson { margin: 0 0 0.3rem; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.hard-q { margin: 0 0 0.5rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.hard-stat { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hard-expected { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.hard-label { margin: 0.4rem 0 0.2rem; font-weight: 600; }
.hard-wrong { margin: 0; padding-left: 1.2rem; overflow-wrap: anywhere; }

/* Phone tap targets: these two links were only ~24px tall. */
.section-link, .level-block .section-head h2 > a[href^="/learn/level/"] { display: inline-flex; align-items: center; min-height: 44px; }

/* /try "Скажите вслух": the browser's speech recognition checks the phrase. */
.say-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.say-item { background: var(--surface, #fff); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-card); border: 2px solid transparent; }
.say-item .tr { margin: 0; font-size: 1.3rem; font-weight: 750; color: var(--text-primary, #172B4D); }
.say-item .note { margin: 2px 0 10px; color: var(--text-secondary, #475569); }
.say-btn { min-height: 44px; }
.say-btn.is-listening { background: var(--wrong, #C62828); border-color: var(--wrong, #C62828); color: #fff; }
.say-result { margin: 8px 0 0; font-weight: 600; }
.say-result:empty { display: none; }
.say-item.is-ok { border-color: var(--correct, #2E7D32); }
.say-item.is-ok .say-result { color: var(--correct, #2E7D32); }
.say-item.is-almost { border-color: #F3D56A; }
.say-item.is-miss .say-result { color: var(--text-secondary, #475569); }

/* Grammar games: «Суффиксы» rule line, «Собери фразу» line and word bank. */
.suffix-why { min-height: 1.5em; margin: var(--space-4, 16px) 0 0; text-align: center; font-weight: 600; color: var(--error, #b42318); }
.builder-line { min-height: 56px; margin: 0 0 var(--space-4, 16px); padding: 10px 12px; border: 2px dashed var(--border-blue, #BFDBFE); border-radius: 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 1.15rem; font-weight: 700; color: var(--deep-blue, #0F2A4A); }
.builder-line.is-done { border-style: solid; border-color: var(--success, #157a48); background: var(--success-surface, #E8F5EE); }
.builder-word { padding: 4px 10px; border-radius: 10px; background: var(--surface-blue, #EFF6FF); }
.builder-bank { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); justify-content: center; }
body.student-theme .builder-bank button.g-tile, .builder-bank .g-tile { width: auto; min-width: 64px; padding-left: 16px; padding-right: 16px; }
body.student-theme button.g-tile.is-used { visibility: hidden; }
.builder-skip { display: block; margin: var(--space-4, 16px) auto 0; }

/* The Turkish letters bar lands right after the focused field; inside a flex
   row (the wheel's solve form) it takes its own line under the row. */
.tr-letters { flex-basis: 100%; order: 99; }
.wheel-solve { flex-wrap: wrap; }

/* Review lessons («Tekrar») in lesson lists: a repeat icon on a warm tint. */
.row-icon.num.is-review { background: #FFF4D6; color: #9A6700; }

/* /try: sticky step bar */
/* fixed, not sticky: an ancestor's overflow setting would stop sticky from sticking. */
.try-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px max(16px, calc((100vw - 720px) / 2)); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-blue, #DBEAFE); box-shadow: 0 2px 10px rgba(15, 42, 74, 0.06); }
.try-progress[hidden] { display: none; }
.try-progress-label { flex: none; font-size: .85rem; font-weight: 700; color: var(--deep-blue, #0F2A4A); }
.try-progress-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--surface-blue, #EFF6FF); overflow: hidden; }
.try-progress-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary-blue, #1D4ED8); transition: width .2s ease; }

/* Games hub: one emoji per game card. */
.game-card .game-emoji { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--surface-blue, #EFF6FF); font-size: 1.6rem; line-height: 1; margin-bottom: 8px; }

/* ---- Answer options (partials/choices.html) -----------------------------
   Lettered tiles instead of a form-like list of radio buttons. The radio is
   stretched invisibly over the tile (a tap anywhere picks it; keyboard and
   screen reader still see a normal radio group). Checked/focus styles hang
   off the radio's siblings, so they also work without :has(). */
.choice-list { display: grid; gap: 10px; margin: 4px 0 0; }
.choice-list.is-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 600px) { .choice-list.is-grid-wide { grid-template-columns: 1fr 1fr; } }
.choice-list .choice, body.student-theme .choice-list .choice {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 0;
  min-height: 56px; padding: 10px 14px; border-radius: 16px;
  background: var(--surface-white, #fff); border: 1.5px solid var(--border-control, #CBD5E1);
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.06);
  font-size: 1.0625rem; font-weight: 600; color: var(--deep-blue, #0F2A4A); line-height: 1.35;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .08s ease;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.choice-list .choice > input[type="radio"], body.student-theme .choice-list .choice > input[type="radio"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.choice-key {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface-blue, #EFF6FF); color: var(--primary-blue, #1D4ED8);
  font-size: .95rem; font-weight: 800; letter-spacing: .02em;
  transition: background-color .15s ease, color .15s ease;
}
.choice-text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; hyphens: none; }
@media (hover: hover) {
  .choice-list .choice:hover { border-color: var(--border-blue, #93C5FD); box-shadow: 0 4px 14px rgba(29, 78, 216, 0.10); transform: translateY(-1px); }
}
.choice-list .choice:active { transform: scale(0.985); }
/* picked */
.choice-list .choice > input:checked ~ .choice-key { background: var(--primary-blue, #1D4ED8); color: #fff; }
.choice-list .choice > input:checked ~ .choice-text { color: var(--primary-blue, #1D4ED8); }
.choice-list .choice:has(> input:checked), body.student-theme .choice-list .choice:has(> input:checked) {
  border-color: var(--primary-blue, #1D4ED8); background: var(--light-blue, #EFF6FF); padding: 10px 14px;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}
/* keyboard focus */
.choice-list .choice > input:focus-visible ~ .choice-key { outline: 3px solid var(--focus-color, #93C5FD); outline-offset: 2px; }
.choice-list .choice:has(> input:focus-visible) { outline: none; }
.choice-list .choice > input:disabled { cursor: default; }
@media (max-width: 380px) { .choice-list.is-grid { grid-template-columns: 1fr; } }

/* Each question inside an exercise reads as its own block. */
.ex-card .item { padding: 16px 0 4px; }
.ex-card .item + .item { border-top: 1px solid var(--border-neutral, #E2E8F0); margin-top: 8px; }
.item-count { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary, #64748B); }

/* Matching: the word, an arrow, the pick — one row, green once chosen. */
body.student-theme .match-grid .match-row, .match-grid .match-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 16px; border: 1.5px solid var(--border-control, #CBD5E1);
  background: var(--surface-white, #fff); box-shadow: 0 1px 2px rgba(15, 42, 74, 0.06);
  transition: border-color .15s ease, background-color .15s ease;
}
.match-left { font-weight: 700; font-size: 1.0625rem; color: var(--deep-blue, #0F2A4A); overflow-wrap: break-word; }
.match-arrow { color: var(--text-secondary, #64748B); font-weight: 700; }
body.student-theme .match-grid .match-row select, .match-grid .match-row select {
  width: 100%; min-height: 48px; margin: 0; border-radius: 12px; font-weight: 600; font-size: 1rem;
  border: 1.5px solid var(--border-control, #CBD5E1); background-color: var(--surface-blue, #EFF6FF);
}
.match-grid .match-row:has(select:required:valid) { border-color: var(--success, #157a48); background: var(--success-surface, #E8F5EE); }
.match-grid .match-row select:required:valid { background-color: #fff; border-color: var(--success, #157a48); }

/* Fill in the blank: the gap is drawn as a box, the answer field fills the row. */
.blank-gap { display: inline-block; min-width: 2.8em; height: 1.15em; margin: 0 2px; vertical-align: -0.12em;
  border-radius: 6px; background: var(--surface-blue, #EFF6FF); border-bottom: 3px solid var(--primary-blue, #1D4ED8);
  color: transparent; overflow: hidden; }
body.student-theme .ex-card .item input[lang]:not([type=radio]):not([type=hidden]) { width: 100%; }
.blank-gap.is-filled { display: inline; color: var(--primary-blue, #1D4ED8); min-width: 0; height: auto; padding: 0 3px; vertical-align: baseline; }

/* ==== Exercise page, pro pass (2026-10-04) ================================
   Calmer, more app-like: neutral option tiles that only colour when picked,
   a check mark on the picked one, questions as soft panels inside the
   exercise card, a kicker line instead of points. */
body.student-theme .ex-card { padding: 22px 20px; border-radius: 24px; border: 1px solid rgba(15, 42, 74, 0.06);
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.04), 0 8px 24px rgba(15, 42, 74, 0.06); }
body.student-theme .ex-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
body.student-theme .ex-head .ex-num { display: none; }
.ex-kicker { margin: 0 0 4px; font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--primary-blue, #1D4ED8); }
body.student-theme .ex-head h2 { margin: 0; font-size: 1.3rem; line-height: 1.75rem; letter-spacing: -0.01em; }

/* questions: soft panels */
body.student-theme .ex-card .item { background: #F8FAFC; border: 1px solid #EEF2F7; border-radius: 18px; padding: 16px; margin-top: 12px; }
body.student-theme .ex-card .item + .item { border-top: 1px solid #EEF2F7; }
.item-count { color: #94A3B8; letter-spacing: .08em; }
body.student-theme .ex-card .item .prompt { font-size: 1.2rem; line-height: 1.7rem; font-weight: 700; color: var(--deep-blue, #0F2A4A); margin-bottom: 12px; }

/* option tiles: neutral until picked */
.choice-list .choice, body.student-theme .choice-list .choice {
  border: 1.5px solid #E2E8F0; background: #fff; box-shadow: 0 1px 1px rgba(15, 42, 74, 0.04);
  padding: 10px 12px; gap: 12px; min-height: 58px; border-radius: 14px; font-weight: 600;
}
.choice-key { background: #F1F5F9; color: #475569; width: 32px; height: 32px; border-radius: 9px; font-size: .9rem; }
.choice-check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; display: none; place-items: center;
  color: transparent; font-size: .8rem; font-weight: 900; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
@media (hover: hover) {
  .choice-list .choice:hover { border-color: #93C5FD; background: #fff; box-shadow: 0 6px 16px rgba(29, 78, 216, 0.10); }
  .choice-list .choice:hover .choice-key { background: #E0ECFF; color: var(--primary-blue, #1D4ED8); }
}
.choice-list .choice > input:checked ~ .choice-check { display: grid; background: var(--primary-blue, #1D4ED8); border-color: var(--primary-blue, #1D4ED8); color: #fff; }
.choice-list .choice > input:checked ~ .choice-check::before { content: "✓"; }
.choice-list .choice > input:checked ~ .choice-text { color: var(--deep-blue, #0F2A4A); }
.choice-list .choice:has(> input:checked), body.student-theme .choice-list .choice:has(> input:checked) {
  border-color: var(--primary-blue, #1D4ED8); background: #F5F9FF; padding: 10px 12px;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.10);
}
.choice-list.is-grid .choice > input:checked ~ .choice-check { display: none; }
@media (min-width: 600px) { .choice-list.is-grid-wide .choice > input:checked ~ .choice-check { display: none; } }

/* answer fields and matching: same calm surface */
body.student-theme .ex-card .item input[lang]:not([type=radio]):not([type=hidden]),
body.student-theme .ex-card .item textarea { background: #fff; border: 1.5px solid #E2E8F0; border-radius: 14px; min-height: 52px; padding: 12px 14px; font-size: 1.0625rem; }
body.student-theme .ex-card .item input[lang]:not([type=radio]):focus,
body.student-theme .ex-card .item textarea:focus { border-color: var(--primary-blue, #1D4ED8); box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.10); outline: none; }
body.student-theme .match-grid .match-row, .match-grid .match-row { border: 1.5px solid #E2E8F0; box-shadow: none; }
body.student-theme .match-grid .match-row select, .match-grid .match-row select { background-color: #F8FAFC; border-color: #E2E8F0; }
.answer-language-cue { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px;
  background: #EEF2FF; color: #3730A3; font-size: .78rem; font-weight: 700; }

/* answered-count bar: slim, not a card */
body.student-theme .exercise-progress { background: transparent; border: 0; box-shadow: none; padding: 4px 2px 10px; }

/* ==== Results page, pro pass ==============================================
   White cards, the state as a small pill, «your answer» and «correction» as
   tinted boxes stacked under each other. Markup unchanged. */
.result-location { margin: 10px 0 4px; }
body.student-theme .result { background: #fff; border: 1px solid #EEF2F7; border-radius: 20px; padding: 18px;
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.04), 0 6px 18px rgba(15, 42, 74, 0.05); }
body.student-theme .tone-bad, body.student-theme .tone-partial, body.student-theme .tone-ok { border: 1px solid #EEF2F7; border-left-width: 1px; }
body.student-theme .result .prompt { font-size: 1.15rem; line-height: 1.6rem; font-weight: 700; margin: 0 0 10px; }
body.student-theme .result .state-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px;
  font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
body.student-theme .result .state-label { color: #64748B; }
body.student-theme .tone-bad .state-label { color: var(--error, #B42318); }
body.student-theme .tone-ok .state-label { color: var(--success, #157a48); }
body.student-theme .tone-partial .state-label { color: #B45309; }
body.student-theme .result .state-label .pts { font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #94A3B8; }
body.student-theme .result .correction-block { display: grid; gap: 8px; }
body.student-theme .result .correction-row { display: block; margin: 0; padding: 10px 14px; border-radius: 14px; background: #F8FAFC; font-size: 1.0625rem; font-weight: 600; }
body.student-theme .result .correction-row .k { display: block; min-width: 0; margin-bottom: 2px; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #94A3B8; }
body.student-theme .tone-bad .correction-block .correction-row:first-child { background: #FEF3F2; }
body.student-theme .tone-bad .correction-block .correction-row:nth-child(2),
body.student-theme .tone-partial .correction-block .correction-row:nth-child(2) { background: #ECFDF3; }
body.student-theme .tone-ok .correction-block .correction-row:first-child { background: #ECFDF3; }
body.student-theme .result .explain-block { margin: 10px 0 0; border-radius: 14px; font-size: 1rem; line-height: 1.55rem; }

/* Result summary: the percent as a ring beside the headline. */
body.student-theme .result-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
  border: 1px solid #EEF2F7; border-radius: 24px; box-shadow: 0 1px 2px rgba(15, 42, 74, 0.04), 0 8px 24px rgba(15, 42, 74, 0.06); }
body.student-theme .result-hero > * { grid-column: 1 / -1; }
body.student-theme .result-hero > .eyebrow, body.student-theme .result-hero > .result-title { grid-column: 1; }
body.student-theme .result-hero .result-title { font-size: 1.75rem; line-height: 2.2rem; margin: 2px 0 6px; }
body.student-theme .result-hero > .percent-ring { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.35rem; font-weight: 800; color: var(--deep-blue, #0F2A4A);
  background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%),
              conic-gradient(var(--primary-blue, #1D4ED8) calc(var(--p, 0) * 1%), #E2E8F0 0); }
body.student-theme .result-hero > .percent-ring.is-low { background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%),
              conic-gradient(#D97706 calc(var(--p, 0) * 1%), #E2E8F0 0); }
body.student-theme .result-hero.is-celebratory > .percent-ring { background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%),
              conic-gradient(var(--success, #157a48) calc(var(--p, 0) * 1%), #E2E8F0 0); }
body.student-theme .result-hero .status-copy { margin: 10px 0 0; color: #64748B; }
body.student-theme .result-pills .pill { padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; border: 0; }
body.student-theme .result-pills .pill.ok { background: #ECFDF3; color: #067647; }
body.student-theme .result-pills .pill.bad { background: #FEF3F2; color: #B42318; }
body.student-theme .result-pills .pill.practice { background: #EFF6FF; color: #1D4ED8; }
body.student-theme .result-hero > .percent-ring > .percent { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; line-height: 1; }

/* ==== Answer options, «wow» pass ==========================================
   Chunky keys you press like a real button (thick bottom edge, sinks on
   tap), a ripple from the tap point, a pop when picked, the letter badge
   flips into a ✓ on a blue-violet gradient, and the options of a question
   slide in one after another when it scrolls into view. All motion is off
   for «reduce motion». */
.choice-list .choice, body.student-theme .choice-list .choice {
  overflow: hidden; isolation: isolate;
  border: 2px solid #E2E8F0; border-bottom-width: 4px; border-radius: 16px;
  box-shadow: none; padding: 10px 12px 8px;
  transition: transform .12s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, border-bottom-width .12s ease;
}
@media (hover: hover) {
  .choice-list .choice:hover { transform: translateY(-2px); border-color: #BFDBFE; border-bottom-color: #93C5FD; background: #fff;
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.12); }
}
.choice-list .choice:active { transform: translateY(2px); border-bottom-width: 2px; padding-bottom: 10px; box-shadow: none; }
.choice-list .choice:has(> input:checked), body.student-theme .choice-list .choice:has(> input:checked) {
  border-color: #3B82F6; border-bottom-color: #1D4ED8; padding: 10px 12px 8px;
  background: linear-gradient(135deg, #EFF6FF 0%, #EEF2FF 55%, #F5F3FF 100%);
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22);
  animation: choice-pop .38s cubic-bezier(.34, 1.56, .64, 1);
}
.choice-list .choice > input:checked ~ .choice-text { color: #1E3A8A; }
/* the letter flips into a check mark */
.choice-key { position: relative; transition: background .2s ease, color .2s ease, transform .2s ease; }
.choice-list .choice > input:checked ~ .choice-key {
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); color: transparent;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45); animation: key-flip .45s ease;
}
.choice-list .choice > input:checked ~ .choice-key::after {
  content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.05rem; font-weight: 900;
}
.choice-list .choice > input:checked ~ .choice-check { display: none; }
/* ripple from the tap point (span added by app.js) */
.choice-ripple { position: absolute; z-index: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: rgba(59, 130, 246, 0.28); pointer-events: none; animation: choice-ripple .6s ease-out forwards; }
.choice-list .choice > .choice-key, .choice-list .choice > .choice-text { position: relative; z-index: 0; }
/* options slide in one by one */
.choice-list.anim-ready .choice { opacity: 0; transform: translateY(10px); }
.choice-list.anim-ready.is-in .choice { animation: choice-in .42s cubic-bezier(.22, 1, .36, 1) forwards; }
.choice-list.anim-ready.is-in .choice:nth-child(2) { animation-delay: .06s; }
.choice-list.anim-ready.is-in .choice:nth-child(3) { animation-delay: .12s; }
.choice-list.anim-ready.is-in .choice:nth-child(4) { animation-delay: .18s; }
.choice-list.anim-ready.is-in .choice:nth-child(n+5) { animation-delay: .24s; }
@keyframes choice-in { to { opacity: 1; transform: none; } }
@keyframes choice-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes key-flip { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(90deg) scale(1.1); } 100% { transform: rotateY(0) scale(1); } }
@keyframes choice-ripple { to { transform: scale(28); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .choice-list .choice, .choice-list .choice:has(> input:checked), .choice-list .choice > input:checked ~ .choice-key { animation: none !important; transition: none; }
  .choice-list.anim-ready .choice { opacity: 1; transform: none; animation: none !important; }
  .choice-ripple { display: none; }
}
@media print { .choice-list.anim-ready .choice { opacity: 1; transform: none; } }

/* ==== Review lessons step by step (initStepMode) =========================== */
.step-on .exercise-progress, .step-on ~ .actions, .step-on > .actions { display: none; }
.step-on .ex-card { display: none; }
.step-on .ex-card.is-step-card { display: block; }
.step-on .ex-card .item { display: none; }
.step-on .ex-card .item.is-current { display: block; animation: step-in .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.step-top { margin: 0 0 14px; }
.step-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 800; color: var(--deep-blue, #0F2A4A); }
.step-count { font-size: .95rem; }
.step-streak { font-size: .9rem; color: #C2410C; animation: step-in .3s ease; }
.step-segs { display: flex; gap: 4px; }
.step-seg { flex: 1 1 0; height: 8px; border-radius: 999px; background: #E2E8F0; transition: background-color .25s ease, transform .25s ease; }
.step-seg.is-now { background: linear-gradient(90deg, #3B82F6, #8B5CF6); transform: scaleY(1.25); }
.step-seg.is-ok { background: #22C55E; }
.step-seg.is-bad { background: #EF4444; }
.step-seg.is-partial { background: #F59E0B; }
.step-bar { margin-top: 14px; display: grid; gap: 12px; }
.step-feedback:empty { display: none; }
.step-feedback { border-radius: 16px; padding: 14px 16px; animation: step-up .3s cubic-bezier(.22, 1, .36, 1); }
@keyframes step-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.step-feedback.is-ok { background: #ECFDF3; color: #067647; }
.step-feedback.is-bad { background: #FEF3F2; color: #B42318; }
.step-feedback.is-partial { background: #FFFAEB; color: #B54708; }
.step-feedback.is-wait { background: #F1F5F9; color: #475569; }
.step-feedback-title { margin: 0 0 4px; font-size: 1.15rem; font-weight: 900; }
.step-feedback.is-ok .step-feedback-title::before { content: "✓ "; }
.step-feedback.is-bad .step-feedback-title::before { content: "✕ "; }
.step-feedback-line { margin: 2px 0 0; font-weight: 600; color: inherit; opacity: .9; }
body.student-theme .step-btn, .step-btn {
  width: 100%; min-height: 54px; border-radius: 16px; border: 0; border-bottom: 4px solid #1E40AF;
  background: linear-gradient(135deg, #2563EB, #4F46E5); color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; cursor: pointer; transition: transform .1s ease, filter .15s ease, border-bottom-width .1s ease;
}
.step-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.step-btn:disabled { background: #E2E8F0; border-bottom-color: #CBD5E1; color: #94A3B8; cursor: default; }
body.student-theme .step-btn.is-next, .step-btn.is-next { background: linear-gradient(135deg, #16A34A, #22C55E); border-bottom-color: #15803D; }
body.student-theme .step-btn.is-next.is-after-bad, .step-btn.is-next.is-after-bad { background: linear-gradient(135deg, #DC2626, #EF4444); border-bottom-color: #B91C1C; }
.item.is-locked { pointer-events: none; }
.item.is-locked .choice:not(:has(> input:checked)) { opacity: .55; }
.step-shake { animation: step-shake .45s ease; }
@keyframes step-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .step-on .ex-card .item.is-current, .step-feedback, .step-shake, .step-streak { animation: none !important; }
}
/* after the check: the right option green, a wrong pick red */
.step-on .choice-list .choice.is-key, body.student-theme .step-on .choice-list .choice.is-key {
  opacity: 1; border-color: #22C55E; border-bottom-color: #15803D; background: linear-gradient(135deg, #ECFDF3, #F0FDF4);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.22); }
.step-on .choice-list .choice.is-key .choice-key { background: linear-gradient(135deg, #16A34A, #22C55E); color: transparent; }
.step-on .choice-list .choice.is-key .choice-key::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; }
.step-on .choice-list .choice.is-wrong-pick, body.student-theme .step-on .choice-list .choice.is-wrong-pick {
  opacity: 1; border-color: #EF4444; border-bottom-color: #B91C1C; background: #FEF3F2; box-shadow: none; }
.step-on .choice-list .choice.is-wrong-pick .choice-key { background: linear-gradient(135deg, #DC2626, #EF4444); }
.step-on .choice-list .choice.is-wrong-pick .choice-key::after { content: "✕"; }

/* ==== «Культура недели» ==================================================== */
.culture-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 45%, #FDF2F8 100%); border: 1px solid #FDE68A; }
.culture-card:hover { box-shadow: 0 10px 24px rgba(194, 65, 12, 0.12); }
.culture-card-emoji { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; font-size: 1.9rem;
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.12); }
.culture-card-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.culture-card-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #C2410C; }
.culture-card-body strong { font-size: 1.1rem; color: var(--deep-blue, #0F2A4A); }
.culture-card-lead { font-size: .92rem; color: #57534E; line-height: 1.35; }
.culture-head h1 { display: flex; align-items: center; gap: 10px; }
.culture-emoji { font-size: 1.2em; }
.culture-photo { margin: 0 0 16px; }
.culture-photo img { display: block; width: 100%; height: auto; border-radius: 18px; }
.culture-kicker { margin: 0 0 2px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #C2410C; }
.culture-title { margin: 0 0 4px; font-size: 1.6rem; }
.culture-text { list-style: none; counter-reset: line; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.culture-line { position: relative; padding: 12px 14px 12px 44px; border-radius: 14px; background: #F8FAFC; border: 1.5px solid #EEF2F7; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease; }
.culture-line::before { counter-increment: line; content: counter(line); position: absolute; left: 12px; top: 12px; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; background: #FFEDD5; color: #C2410C; font-size: .8rem; font-weight: 800; }
.culture-line:hover, .culture-line:focus-visible { border-color: #FDBA74; outline: none; }
.culture-line .tr { display: block; font-size: 1.15rem; font-weight: 700; color: var(--deep-blue, #0F2A4A); line-height: 1.55rem; }
.culture-line.is-open { background: #FFFBF5; border-color: #FED7AA; }
.culture-ru { display: block; margin-top: 6px; color: #78716C; font-size: 1rem; animation: step-up .25s ease; }
.culture-words .example-list .note { color: var(--text-secondary, #64748B); }
.culture-q { margin: 0 0 16px; }
.culture-why { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #EFF6FF; font-size: .95rem; }
.culture-score { margin: 10px 0 0; font-weight: 800; font-size: 1.1rem; color: var(--deep-blue, #0F2A4A); }
.culture-score:empty { display: none; }
.culture-quiz.is-checked .choice-list .choice.is-key { border-color: #22C55E; border-bottom-color: #15803D; background: linear-gradient(135deg, #ECFDF3, #F0FDF4); }
.culture-quiz.is-checked .choice-list .choice.is-key .choice-key { background: linear-gradient(135deg, #16A34A, #22C55E); color: transparent; }
.culture-quiz.is-checked .choice-list .choice.is-key .choice-key::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; }
.culture-quiz.is-checked .choice-list .choice.is-wrong-pick { border-color: #EF4444; border-bottom-color: #B91C1C; background: #FEF3F2; }
.culture-quiz.is-checked .choice-list .choice.is-wrong-pick .choice-key { background: linear-gradient(135deg, #DC2626, #EF4444); }
.culture-quiz.is-checked .choice-list .choice.is-wrong-pick .choice-key::after { content: "✕"; }
.culture-ru[hidden], .culture-why[hidden] { display: none; }

/* ==== Density pass (2026-10-04): exercises looked too big on phones and the
   exercise column too narrow on computers. ================================ */
/* Computers: the right rail (unit progress / stage / tip) only on very wide
   screens, so the exercise column gets the room. */
@media (min-width: 841px) {
  .learn-layout { grid-template-columns: 224px minmax(0, 1fr); }
  .rail-right { display: none; }
}
@media (min-width: 1500px) {
  .learn-layout { grid-template-columns: 224px minmax(0, 1fr) 220px; }
  .rail-right { display: block; }
}
body.app-mode main.main-wide { max-width: 1320px; margin: 0 auto; }

/* Exercises and results: a compact lesson header (the objective stays on the theory page). */
.learn-main.stage-exercises .lesson-hero .hero-sub,
.learn-main.stage-result .lesson-hero .hero-sub { display: none; }
body.student-theme .learn-main.stage-exercises .lesson-hero h1,
body.student-theme .learn-main.stage-result .lesson-hero h1 { font-size: 1.6rem; line-height: 2rem; }
.learn-main.stage-exercises .lesson-hero, .learn-main.stage-result .lesson-hero { padding-top: 16px; padding-bottom: 14px; }
.learn-main.stage-exercises > .lead { margin: 6px 0 10px; font-size: .95rem; }

/* exercise card */
body.student-theme .ex-card { padding: 18px 16px; border-radius: 20px; }
body.student-theme .ex-head { margin-bottom: 8px; }
body.student-theme .ex-head h2 { font-size: 1.12rem; line-height: 1.5rem; }
.ex-kicker { font-size: .68rem; margin-bottom: 2px; }
body.student-theme .ex-card .item { padding: 12px; margin-top: 10px; border-radius: 16px; }
.item-count { font-size: .68rem; margin-bottom: 4px; }
body.student-theme .ex-card .item .prompt { font-size: 1.05rem; line-height: 1.45rem; margin-bottom: 10px; }
/* options */
.choice-list { gap: 8px; }
.choice-list .choice, body.student-theme .choice-list .choice {
  min-height: 46px; padding: 7px 10px 6px; gap: 10px; border-radius: 13px; border-bottom-width: 3px; font-size: 1rem; }
.choice-list .choice:has(> input:checked), body.student-theme .choice-list .choice:has(> input:checked) { padding: 7px 10px 6px; }
.choice-list .choice:active { padding-bottom: 7px; border-bottom-width: 2px; }
.choice-key { width: 26px; height: 26px; border-radius: 8px; font-size: .8rem; }
/* answer fields, matching, word order */
body.student-theme .ex-card .item input[lang]:not([type=radio]):not([type=hidden]),
body.student-theme .ex-card .item textarea { min-height: 44px; padding: 9px 12px; font-size: 1rem; border-radius: 12px; }
body.student-theme .match-grid .match-row, .match-grid .match-row { padding: 7px 10px; gap: 8px; border-radius: 13px; }
body.student-theme .match-grid .match-row select, .match-grid .match-row select { min-height: 40px; font-size: .95rem; }
.match-left { font-size: 1rem; }
body.student-theme .token { min-height: 40px; padding: 6px 12px; font-size: 1rem; }
.answer-language-cue { font-size: .72rem; margin-bottom: 6px; }
/* step mode and results */
.step-btn, body.student-theme .step-btn { min-height: 48px; font-size: .98rem; border-radius: 14px; }
.step-feedback { padding: 10px 14px; }
.step-feedback-title { font-size: 1.02rem; }
body.student-theme .result { padding: 14px; }
body.student-theme .result .prompt { font-size: 1.02rem; line-height: 1.4rem; }
body.student-theme .result .correction-row { padding: 8px 12px; font-size: 1rem; }

/* Phones: a little tighter still. */
@media (max-width: 640px) {
  body.student-theme .ex-card { padding: 14px 12px; border-radius: 18px; }
  body.student-theme .ex-card .item { padding: 10px; }
  body.student-theme .ex-card .item .prompt { font-size: 1rem; line-height: 1.38rem; }
  .choice-list .choice, body.student-theme .choice-list .choice { min-height: 42px; font-size: .95rem; }
  body.student-theme .learn-main.stage-exercises .lesson-hero h1,
  body.student-theme .learn-main.stage-result .lesson-hero h1 { font-size: 1.35rem; line-height: 1.7rem; }
  .learn-main.stage-exercises .lesson-hero .hero-title-ru,
  .learn-main.stage-result .lesson-hero .hero-title-ru { font-size: .95rem; }
}
@media (max-width: 640px) {
  .learn-main.stage-exercises .lesson-tabs, .learn-main.stage-result .lesson-tabs { margin: 10px 0 8px; }
  .learn-main.stage-exercises .lesson-tabs a, .learn-main.stage-result .lesson-tabs a { padding-top: 7px; padding-bottom: 7px; font-size: .95rem; }
  .learn-main.stage-exercises > .lead { font-size: .88rem; line-height: 1.3rem; }
}

/* ==== «Наглядно»: topic explained on a photo (explainers.py) =============== */
.explainer-lead { margin: 0 0 12px; font-weight: 600; color: var(--deep-blue, #0F2A4A); }
.explainer-photo { position: relative; margin: 0 0 12px; border-radius: 18px; overflow: hidden; }
.explainer-photo img { display: block; width: 100%; height: auto; }
.explainer-mark { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%;
  border: 3px solid #fff; background: linear-gradient(135deg, #2563EB, #7C3AED); color: #fff; font-weight: 900; font-size: .95rem;
  box-shadow: 0 4px 14px rgba(15, 42, 74, 0.35); cursor: pointer; animation: mark-pulse 2.4s ease-in-out infinite; }
body.student-theme .explainer-mark { min-height: 0; padding: 0; }
.explainer-mark.is-on { background: linear-gradient(135deg, #F59E0B, #EF4444); transform: translate(-50%, -50%) scale(1.18); animation: none; }
@keyframes mark-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(15, 42, 74, 0.35), 0 0 0 0 rgba(124, 58, 237, 0.5); }
  50% { box-shadow: 0 4px 14px rgba(15, 42, 74, 0.35), 0 0 0 8px rgba(124, 58, 237, 0); } }
.explainer-legend { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.explainer-legend li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px;
  background: #F8FAFC; border: 1.5px solid #EEF2F7; transition: border-color .15s ease, background-color .15s ease; }
.explainer-legend li.is-on { border-color: #F59E0B; background: #FFFBEB; }
.explainer-num { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #2563EB, #7C3AED); color: #fff; font-size: .8rem; font-weight: 900; }
.explainer-legend .tr { font-weight: 800; color: var(--deep-blue, #0F2A4A); }
.explainer-legend .ru, .explainer-rule .ru { color: #64748B; font-size: .92rem; }
@media (min-width: 700px) { .explainer-legend { grid-template-columns: 1fr 1fr; } }
.explainer-rule { border-radius: 16px; padding: 12px 14px; background: linear-gradient(135deg, #EFF6FF, #F5F3FF); border: 1px solid #DBEAFE; }
.explainer-rule-title { margin: 0 0 8px; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #4338CA; }
.explainer-rule ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.explainer-rule li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.explainer-formula { font-weight: 800; font-size: 1.05rem; color: var(--deep-blue, #0F2A4A); }
.explainer-formula .hl { color: #7C3AED; background: #EDE9FE; border-radius: 6px; padding: 0 3px; }
.explainer-formula .plus { color: #94A3B8; font-weight: 600; }
.explainer-rule .arrow { color: #94A3B8; font-weight: 800; }
.explainer-result { font-weight: 800; color: #1D4ED8; }
.explainer-tip { margin: 10px 0 0; font-size: .92rem; color: #475569; }
@media (prefers-reduced-motion: reduce) { .explainer-mark { animation: none; } }
@media (max-width: 640px) {
  .explainer-legend li { padding: 6px 8px; }
  .explainer-legend .tr { font-size: 1rem; }
  .explainer-legend .ru { font-size: .85rem; }
}

/* ---------------------------------------------------------------------------
   Public articles (/statyi): readable column, example rows, tables
   ------------------------------------------------------------------------ */
.article-main { max-width: 780px; }
.article-head { padding: 18px 0 8px; }
.article-crumbs { font-size: .9rem; color: var(--text-secondary, #475569); padding-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.article-crumbs a { color: var(--primary-blue, #1D4ED8); }
.article-emoji-lg { font-size: 2.6rem; margin: 0 0 4px; line-height: 1; }
.article-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .article-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article-card { display: flex; gap: 14px; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 16px 18px; border-radius: 16px;
  background: var(--surface, #fff); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.article-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 42, 74, .12); }
.article-emoji { flex: none; font-size: 1.7rem; line-height: 1.2; }
.article-card-body { display: grid; gap: 6px; min-width: 0; }
.article-card-body strong { color: var(--text-primary, #172B4D); line-height: 1.3; }
.article-card-body span { color: var(--text-secondary, #475569); font-size: .92rem; line-height: 1.45; }
.article-body { font-size: 1.04rem; line-height: 1.65; color: var(--text-primary, #172B4D); }
.article-section { margin: 26px 0 0; }
.storefront .article-section h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 0 0 10px; }
.article-section p { margin: 0 0 12px; }
.article-examples { list-style: none; margin: 12px 0 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--surface, #fff); box-shadow: var(--shadow-card); }
.article-examples li { display: grid; gap: 2px; padding: 11px 16px; border-top: 1px solid rgba(15, 42, 74, .07); }
.article-examples li:first-child { border-top: 0; }
@media (min-width: 640px) { .article-examples li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: baseline; } }
.article-tr { font-weight: 700; color: var(--primary-blue, #1D4ED8); overflow-wrap: anywhere; }
.article-ru { color: var(--text-secondary, #475569); }
.article-table-wrap { overflow-x: auto; margin: 12px 0; border-radius: 14px; box-shadow: var(--shadow-card); background: var(--surface, #fff); }
.article-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.article-table th { text-align: left; padding: 10px 14px; background: #EEF4FF; color: #1E3A8A; font-size: .85rem; }
.article-table td { padding: 9px 14px; border-top: 1px solid rgba(15, 42, 74, .07); }
.article-table td.is-key { font-weight: 700; white-space: nowrap; }
.article-cta { margin-top: 36px; }

/* Offer after the free lesson; "where to start" after the placement test */
.try-offer-facts { list-style: none; margin: 18px auto 20px; padding: 0; display: grid; gap: 10px; max-width: 560px; }
@media (min-width: 560px) { .try-offer-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.try-offer-facts li { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; padding: 12px 10px; display: grid; gap: 2px; }
.try-offer-facts strong { font-size: 1.25rem; color: #fff; }
.try-offer-facts span { color: #DBEAFE; font-size: .88rem; }
.test-plan-list { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; font-weight: 650; }
@media (max-width: 520px) {
  .article-table { font-size: .88rem; }
  .article-table th, .article-table td { padding: 8px 8px; }
  .article-table td.is-key { white-space: normal; }
}

/* «Моя неделя» on the student home: 7 day dots + goal of the day */
.week-card .plan-head { align-items: center; }
.week-goal { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.week-goal.is-done { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.week-days { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week-day { display: grid; justify-items: center; gap: 4px; }
.week-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem;
  background: rgba(15, 42, 74, .06); color: var(--muted, #64748B); }
.week-day.is-lesson .week-dot { background: #FFEDD5; box-shadow: inset 0 0 0 2px #FB923C; }
.week-day.is-other .week-dot { background: #E0E7FF; color: #4338CA; font-weight: 800; }
.week-day.is-today .week-dot { outline: 2px solid var(--primary-blue, #1D4ED8); outline-offset: 2px; }
.week-label { font-size: .72rem; color: var(--muted, #64748B); white-space: nowrap; }
.week-day.is-today .week-label { color: var(--primary-blue, #1D4ED8); font-weight: 700; }

/* Dictation game («Диктант») */
.dict-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 4px 0 14px; }
.dict-play { min-height: 48px; padding: 10px 22px; font-size: 1.05rem; }
.dict-form { display: flex; flex-wrap: wrap; gap: 10px; }
.dict-input { flex: 1 1 240px; min-height: 48px; font-size: 1.1rem; padding: 10px 14px; border-radius: 12px; }
.dict-check, .dict-next { min-height: 48px; }
.dict-next { display: block; margin: 12px auto 0; min-width: 160px; }
.dict-next[hidden] { display: none; }
.dict-verdict { margin-top: 12px; border-radius: 14px; }
.dict-verdict:empty { display: none; }
.dict-verdict.is-ok { background: #DCFCE7; }
.dict-verdict.is-almost { background: #FEF3C7; }
.dict-verdict.is-bad { background: #FEE2E2; }
.dict-verdict p { margin: 0; padding: 0 14px; }
.dict-title { font-weight: 800; padding-top: 10px !important; }
.dict-answer { font-size: 1.15rem; font-weight: 700; color: var(--text-primary, #172B4D); }
.dict-ru { color: var(--text-secondary, #475569); padding-bottom: 10px !important; }
.dict-novoice { text-align: center; color: var(--text-secondary, #475569); }
.dict-controls > button { flex: 1 1 0; min-width: 0; max-width: 220px; padding-left: 10px; padding-right: 10px; white-space: nowrap; }

/* «Шпаргалка»: the lesson's rule as one infographic-like table */
.cheat-title { margin: 0 0 12px; font-weight: 800; font-size: 1.05rem; color: var(--deep-blue, #0F2A4A); }
.cheat-table { display: grid; gap: 10px; }
.cheat-row { display: grid; gap: 8px; background: #FFF9F1; border: 1px solid #F3E3CC; border-radius: 16px; padding: 12px 14px; }
.cheat-headrow { display: none; }
.cheat-rule { font-weight: 800; color: var(--deep-blue, #0F2A4A); line-height: 1.35; }
.cheat-ending span { display: inline-block; font-size: 1.35rem; font-weight: 850; color: #C2410C; background: #fff; border-radius: 12px; padding: 4px 12px; box-shadow: 0 2px 8px rgba(194, 65, 12, .12); }
.cheat-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cheat-examples li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; align-items: center; background: #fff; border-radius: 12px; padding: 7px 10px; }
.cheat-emoji { grid-row: span 2; font-size: 1.35rem; text-align: center; }
.cheat-formula { color: #334155; overflow-wrap: anywhere; }
.cheat-formula b { color: #C2410C; }
.cheat-formula strong { color: var(--deep-blue, #0F2A4A); font-weight: 800; }
.cheat-ru { color: var(--muted, #64748B); font-size: .9rem; }
.cheat-note { color: #475569; font-size: .93rem; line-height: 1.4; }
.cheat-footer { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #EEF4FF; color: #1E3A8A; display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 600; }
.cheat-footer .tr { font-weight: 800; }
@media (min-width: 760px) {
  .cheat-table { gap: 8px; }
  .cheat-row { grid-template-columns: 1.1fr .75fr 2fr 1.1fr; align-items: center; gap: 12px; }
  .cheat-headrow { display: grid; background: #2B7A8C; border: 0; color: #fff; font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; }
  .cheat-ending { text-align: center; }
  .cheat-note { text-align: center; }
}
.cheat-ending { display: flex; flex-wrap: wrap; gap: 6px; }
.cheat-ending span { white-space: nowrap; }
@media (min-width: 760px) { .cheat-ending { justify-content: center; } .cheat-ending span { font-size: 1.15rem; padding: 3px 10px; } }
.cheat-ending.is-many { gap: 4px; }
.cheat-ending.is-many span { font-size: 1rem; padding: 2px 8px; border-radius: 9px; }
@media (min-width: 760px) {
  .cheat-row { grid-template-columns: 1.05fr .95fr 2fr 1.05fr; }
  .cheat-ending.is-many span { font-size: .92rem; padding: 2px 7px; }
}

/* «Справочник» /learn/grammar: every «Шпаргалка» by unit, with search */
.grammar-search { display: grid; gap: 6px; }
.grammar-search input { min-height: 46px; font-size: 1rem; }
.grammar-unit { margin: 18px 0 0; }
.grammar-unit-title { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.grammar-item { padding: 0; margin: 0 0 8px; overflow: hidden; }
.grammar-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; min-height: 48px; }
.grammar-item > summary::-webkit-details-marker { display: none; }
.grammar-item-title { display: grid; gap: 2px; }
.grammar-item > summary .chevron { transition: transform .2s ease; flex: none; }
.grammar-item[open] > summary .chevron { transform: rotate(90deg); }
.grammar-item .cheatsheet { box-shadow: none; margin: 0; border-radius: 0; border-top: 1px solid var(--line, #E2E8F0); }
.grammar-item .cheatsheet .theory-head { display: none; }
.grammar-actions { margin: 0; padding: 0 16px 14px; }
@media print {
  .sidebar, .tabbar, .top, .foot, .grammar-search, .grammar-actions, .cheat-print, .flash { display: none !important; }
  body { background: #fff !important; }
  .cheatsheet { box-shadow: none !important; break-inside: avoid; }
  .cheat-row { break-inside: avoid; }
}
.cheat-print-row { margin: 10px 0 0; text-align: right; }
.cheat-print-page { background: #fff !important; padding: 20px; max-width: 1000px; margin: 0 auto; }
.cheat-print-page .cheat-print-row { display: none; }
@media print {
  .cheat-print-page { padding: 0; }
  .cheat-print-row { display: none !important; }
  .cheat-headrow { display: grid !important; grid-template-columns: 1.05fr .95fr 2fr 1.05fr; }
  .cheat-row { grid-template-columns: 1.05fr .95fr 2fr 1.05fr !important; }
}
.grammar-unit[hidden], .grammar-item[hidden] { display: none; }
.cheat-print-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cheat-all { font-weight: 700; font-size: .92rem; }
.grammar-item .cheat-all { display: none; }
.grammar-item .cheat-print-row { justify-content: flex-end; }

/* Free lesson: instant answers, the owner's Tanışma photo */
.try-feedback { margin-top: 10px; }
.try-q.is-answered .choice-list .choice { pointer-events: none; }
.try-q.is-answered .choice-list .choice:not(.is-key):not(.is-wrong-pick) { opacity: .55; }
.try-q .choice-list .choice.is-key, body.student-theme .try-q .choice-list .choice.is-key {
  opacity: 1; border-color: #22C55E; border-bottom-color: #15803D; background: linear-gradient(135deg, #ECFDF3, #F0FDF4);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.22); }
.try-q .choice-list .choice.is-key .choice-key { background: linear-gradient(135deg, #16A34A, #22C55E); color: transparent; position: relative; }
.try-q .choice-list .choice.is-key .choice-key::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; }
.try-q .choice-list .choice.is-wrong-pick, body.student-theme .try-q .choice-list .choice.is-wrong-pick {
  opacity: 1; border-color: #EF4444; border-bottom-color: #B91C1C; background: #FEF3F2; box-shadow: none; }
.try-q .choice-list .choice.is-wrong-pick .choice-key { background: linear-gradient(135deg, #DC2626, #EF4444); color: transparent; position: relative; }
.try-q .choice-list .choice.is-wrong-pick .choice-key::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; }
.try-photo { margin: 16px 0 0; border-radius: 18px; overflow: hidden; background: var(--surface, #fff); box-shadow: var(--shadow-card); }
.try-photo img { display: block; width: 100%; height: auto; }
.try-photo figcaption { padding: 12px 16px; line-height: 1.5; color: var(--text-secondary, #475569); }
.try-photo figcaption span[lang="tr"] { font-weight: 800; color: var(--primary-blue, #1D4ED8); }
.try-q-photo { margin: 0 0 12px; border-radius: 14px; overflow: hidden; }
.try-q-photo img { display: block; width: 100%; height: auto; }

/* Teacher dashboard: backup download */
.backup-card.is-due { border: 2px solid #F59E0B; background: #FFFBEB; }
.backup-card form { margin: 8px 0 0; }

/* ---- under a lesson video: what is said, root + ending (video_notes.py) ---- */
.video-note {
  margin: calc(-1 * var(--space-3)) 0 var(--space-6); padding: var(--space-4);
  border-radius: 16px; background: var(--surface, #fff); border: 1px solid rgba(15, 42, 74, .1);
  text-align: left;
}
.video-note-about { margin: 0 0 var(--space-3); font-weight: 600; line-height: 1.45; }
.video-note-h { margin: var(--space-4) 0 var(--space-2); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.video-note-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.video-note-lines li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: baseline; }
.video-note-lines .vn-who {
  grid-row: span 2; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: #E0ECFF; color: #1D4ED8; white-space: nowrap;
}
.video-note-lines .tr, body.student-theme .video-note-lines .tr { font-size: 1.1rem; line-height: 1.5; }
.video-note-lines .vn-ru { color: var(--text-secondary); font-size: .92rem; }
.video-note-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.video-note-parts li { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: #F4F7FB; }
.video-note-parts .vn-word { font-size: 1.1rem; font-weight: 700; color: var(--deep-blue, #0F2A4A); }
.video-note-parts .vn-word b { color: #C2410C; }
.video-note-parts .vn-ru { color: var(--text-secondary); font-size: .88rem; }
.video-note-tip { margin: var(--space-4) 0 0; padding: 10px 12px; border-radius: 12px; background: #FFF7E6; line-height: 1.45; }

/* ---- «Видео-сцена» in review lessons (a1_review_videos.py) ---- */
.scene-video { margin: 0 0 var(--space-4); }
.scene-video video {
  display: block; width: 100%; height: auto; border-radius: 16px; background: #0F2A4A;
  box-shadow: 0 8px 24px rgba(15, 42, 74, .16);
}
.scene-video figcaption { margin-top: var(--space-2); }
.try-q-video video { display: block; width: 100%; height: auto; background: #0F2A4A; }

/* ---- «Видеотека» /learn/videos ---- */
.video-item summary { gap: var(--space-3); }
.video-thumb { flex: none; width: 112px; height: 63px; object-fit: cover; border-radius: 10px; background: #0F2A4A; }
.video-item .lesson-video { margin: var(--space-4) 0 var(--space-4); }
.video-item .video-note { margin-top: 0; }
.video-learned { color: #15803D; font-weight: 700; }
@media (max-width: 480px) { .video-thumb { width: 88px; height: 50px; } }
.video-item > :not(summary) { margin-left: 16px; margin-right: 16px; }
.video-item .grammar-item-title { flex: 1; min-width: 0; }

/* ---- «Достижения» (achievements.py): progress page grid + home strip ---- */
.badge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px; text-align: center;
  border-radius: 18px; background: #F1F5F9; border: 1px solid #E2E8F0; color: #64748B;
}
.badge-tile .badge-emoji { font-size: 2rem; line-height: 1; filter: grayscale(1); opacity: .45; }
.badge-tile strong { font-size: .95rem; color: #475569; line-height: 1.25; }
.badge-todo { font-size: .8rem; line-height: 1.3; }
.badge-tile.is-earned { background: linear-gradient(160deg, #FFFBEB, #FEF3C7); border-color: #FCD34D; color: #92400E; box-shadow: 0 6px 16px rgba(217, 119, 6, .14); }
.badge-tile.is-earned .badge-emoji { filter: none; opacity: 1; }
.badge-tile.is-earned strong { color: #0F2A4A; }
.badge-tile.is-earned .badge-todo { font-weight: 700; color: #B45309; }
.badge-bar { display: block; width: 80%; height: 6px; margin-top: 4px; border-radius: 999px; background: #E2E8F0; overflow: hidden; }
.badge-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F59E0B, #F97316); }
.badge-count { font-size: .75rem; font-weight: 700; color: #94A3B8; }
.badge-strip { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 60%, #FFEDD5 100%); border: 1px solid #FCD34D; }
.badge-strip-emojis { flex: none; display: grid; place-items: center; min-width: 56px; height: 56px; padding: 0 8px; border-radius: 16px;
  background: #fff; font-size: 1.5rem; letter-spacing: -2px; box-shadow: 0 4px 12px rgba(217, 119, 6, .14); }

/* 🎤 under a lesson video: repeat each line (initSayCheck; hidden without speech recognition) */
.video-note .vn-say, .video-note .vn-say-hint { display: none; }
.video-note.say-on .vn-say { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.video-note.say-on .vn-say-hint { display: block; margin: -2px 0 10px; font-size: .85rem; }
.video-note-lines .say-item { background: none; box-shadow: none; padding: 0; border: 0; border-radius: 0; }
.video-note-lines .say-item .tr { font-size: 1.1rem; font-weight: 700; color: var(--deep-blue, #0F2A4A); }
.video-note-lines .vn-who { grid-row: 1 / span 3; }
.video-note-lines .say-btn { min-height: 36px; }
.video-note-lines .say-result { margin: 0; font-size: .88rem; }
.video-note-lines .say-item.is-ok .say-result { color: var(--correct, #2E7D32); }
.video-note-lines .say-item.is-almost .say-result { color: #A16207; }
.badge-won { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; margin-bottom: var(--space-4);
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 55%, #FED7AA 100%); border: 1px solid #F59E0B;
  box-shadow: 0 12px 28px rgba(217, 119, 6, .22); animation: badge-pop .6s cubic-bezier(.22, 1.4, .36, 1) both; }
.badge-won-emoji { flex: none; display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 8px; border-radius: 18px;
  background: #fff; font-size: 2rem; box-shadow: 0 4px 12px rgba(217, 119, 6, .2); }
@keyframes badge-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .badge-won { animation: none; } }
.report-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

/* ---- «Kelimece» (Turkish Wordle) ---- */
.wd-grid { display: grid; gap: 6px; justify-content: center; margin: 4px auto 10px; }
.wd-row { display: grid; grid-template-columns: repeat(5, 52px); gap: 6px; }
.wd-cell { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; border: 2px solid #CBD5E1; background: #fff;
  font-size: 1.6rem; font-weight: 800; color: #0F2A4A; text-transform: none; }
.wd-cell.is-filled { border-color: #64748B; }
.wd-cell.is-ok { background: #16A34A; border-color: #16A34A; color: #fff; }
.wd-cell.is-near { background: #EAB308; border-color: #EAB308; color: #fff; }
.wd-cell.is-no { background: #94A3B8; border-color: #94A3B8; color: #fff; }
.wd-row.is-wrong { animation: wd-shake .35s; }
@keyframes wd-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.wd-msg { min-height: 1.5em; margin: 0 0 6px; text-align: center; font-weight: 600; }
.wd-answer { font-weight: 800; letter-spacing: .08em; }
.wd-hint { margin: 0 0 8px; text-align: center; color: #92400E; font-weight: 700; }
.wd-actions { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.wd-kb { display: grid; gap: 6px; max-width: 520px; margin: 0 auto; }
.wd-kb-row { display: flex; justify-content: center; gap: 4px; }
.wd-key { flex: 1 1 0; min-width: 0; max-width: 44px; min-height: 48px; padding: 0; border-radius: 8px; font-size: 1.05rem; font-weight: 800; }
.wd-key-wide { max-width: 64px; flex-grow: 1.6; font-size: .85rem; }
.wd-key[data-state="ok"] { background: #16A34A; border-color: #16A34A; color: #fff; }
.wd-key[data-state="near"] { background: #EAB308; border-color: #EAB308; color: #fff; }
.wd-key[data-state="no"] { background: #CBD5E1; border-color: #CBD5E1; color: #64748B; }
@media (max-width: 400px) { .wd-row { grid-template-columns: repeat(5, 46px); } .wd-cell { width: 46px; height: 46px; font-size: 1.4rem; } .wd-kb-row { gap: 3px; } }
@media (prefers-reduced-motion: reduce) { .wd-row.is-wrong { animation: none; } }

/* ---- «Saat kaç?» clock game ---- */
.clk-ask { display: grid; justify-items: center; gap: 6px; margin-bottom: 12px; }
.clk-big .clk { width: 180px; height: 180px; }
.clk-face { fill: #fff; stroke: #1D4ED8; stroke-width: 3; }
.clk-num { font-size: 9px; font-weight: 700; fill: #0F2A4A; text-anchor: middle; dominant-baseline: central; font-family: Inter, sans-serif; }
.clk-h { stroke: #0F2A4A; stroke-width: 5; stroke-linecap: round; }
.clk-m { stroke: #F97316; stroke-width: 3; stroke-linecap: round; }
.clk-pin { fill: #0F2A4A; }
.clk-phrase { margin: 0; font-size: 1.8rem; font-weight: 800; color: var(--deep-blue, #0F2A4A); }
.clk-prompt { margin: 0; color: var(--text-secondary, #475569); }
.clk-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 520px; margin: 0 auto; }
.clk-opts.is-pick .clk-opt { padding: 8px; }
.clk-small { width: 100%; max-width: 120px; height: auto; display: block; margin: 0 auto; }
body.student-theme button.g-tile.clk-opt.is-right, .clk-opt.is-right { background: #DCFCE7; border-color: #16A34A; color: #14532D; }
body.student-theme button.g-tile.clk-opt.is-wrong, .clk-opt.is-wrong { background: #FEE2E2; border-color: #DC2626; color: #7F1D1D; }
.clk-verdict { min-height: 1.5em; margin: 10px 0 6px; text-align: center; font-weight: 700; }
.clk-verdict.is-ok { color: #15803D; }
.clk-verdict.is-bad { color: #B91C1C; }
.clk-next { display: block; margin: 0 auto; }

/* ---- «Разговор с роботом» (talk_scenarios.py, static/talk.js) ---- */
.robo { width: 88px; height: 88px; flex: none; }
.robo-wire { stroke: #64748B; stroke-width: 3; }
.robo-bulb { fill: #F97316; }
.robo-head { fill: #1D4ED8; }
.robo-face { fill: #E0ECFF; }
.robo-eyes circle { fill: #0F2A4A; animation: robo-blink 4.5s infinite; transform-origin: center 52px; transform-box: fill-box; }
.robo-mouth { fill: #0F2A4A; transform-box: fill-box; transform-origin: center; }
.robo-ear { fill: #93C5FD; }
.robo-body { fill: #3B82F6; }
.robo.is-talking .robo-mouth { animation: robo-talk .28s ease-in-out infinite alternate; }
.robo.is-talking .robo-bulb { fill: #FACC15; }
@keyframes robo-talk { from { transform: scaleY(1); } to { transform: scaleY(2.6); } }
@keyframes robo-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .robo-eyes circle, .robo.is-talking .robo-mouth { animation: none; } }
.talk-head { display: flex; align-items: center; gap: 16px; }
.talk-head .robo { width: 96px; height: 96px; }
.talk-top { display: flex; align-items: center; gap: 14px; }
.talk-top h1 { margin: 0 0 4px; font-size: 1.4rem; }
.talk-top .talk-status { margin: 0; }
.talk-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.talk-intro { margin-top: 14px; }
.talk-log { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.talk-msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; line-height: 1.4; animation: talk-in .25s ease-out both; }
.talk-msg p { margin: 0; }
.talk-msg.is-bot { justify-self: start; background: #EFF6FF; border: 1px solid #BFDBFE; border-bottom-left-radius: 6px; }
.talk-msg.is-me { justify-self: end; background: #1D4ED8; color: #fff; border-bottom-right-radius: 6px; }
.talk-msg.is-me.is-skipped { background: #94A3B8; }
.talk-msg.is-tip { justify-self: stretch; max-width: none; background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; font-size: .95rem; }
.talk-msg .talk-tr { font-size: 1.1rem; font-weight: 650; }
.talk-msg.is-bot .talk-tr { color: #0F2A4A; }
.talk-line { display: flex; align-items: flex-start; gap: 8px; }
.talk-again { flex: none; min-height: 32px; padding: 2px 8px; font-size: .9rem; }
.talk-tap-listen { display: inline-block; margin-top: 6px; min-height: 32px; padding: 2px 8px; font-size: .85rem; white-space: normal; text-align: left; max-width: 100%; }
.talk-ru { margin-top: 4px; font-size: .88rem; color: var(--text-secondary, #475569); }
.talk-ru summary { cursor: pointer; color: #1D4ED8; font-weight: 600; }
.talk-sample { margin-top: 4px !important; font-weight: 700; }
@keyframes talk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .talk-msg { animation: none; } }
.talk-controls { position: sticky; bottom: 0; margin: 14px -4px 0; padding: 12px 4px 4px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 18px); display: grid; gap: 8px; }
.talk-mic { min-height: 52px; font-size: 1.1rem; }
.talk-mic.is-listening { background: var(--wrong, #C62828); border-color: var(--wrong, #C62828); color: #fff; }
.talk-form { display: flex; gap: 8px; }
.talk-input { flex: 1; min-width: 0; }
.talk-help { display: flex; gap: 8px; flex-wrap: wrap; }
.talk-summary { margin-top: 16px; padding-top: 12px; border-top: 1px solid #E2E8F0; }
.talk-phrases { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.talk-phrases li { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #F4F7FB; }
.talk-phrases .talk-tr { font-weight: 700; color: #0F2A4A; }
.talk-phrase-ru { font-size: .85rem; color: var(--text-secondary, #475569); }
@media (max-width: 480px) { .talk-head { align-items: flex-start; } .talk-head .robo { width: 64px; height: 64px; } .robo { width: 64px; height: 64px; } .talk-msg { max-width: 92%; } }
@media (max-width: 759px) { .talk-controls { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }
.talk-controls[hidden], .talk-summary[hidden], .talk-intro[hidden] { display: none; }
.talk-controls { grid-template-columns: minmax(0, 1fr); }
.talk-controls > * { min-width: 0; }
.talk-form .talk-input { width: auto; flex: 1 1 0; }
.talk-form .talk-send { flex: none; }
[data-talk] [hidden] { display: none !important; }
.talk-phrases li { grid-template-columns: 1fr auto; align-items: center; }
.talk-phrases li > .talk-tr, .talk-phrases li > .talk-phrase-ru { grid-column: 1; }
.talk-say-btn { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; }
.talk-say-out { grid-column: 1 / -1; margin: 4px 0 0; font-size: .95rem; }
.talk-say-out:empty { display: none; }
.say-word { font-weight: 700; border-radius: 6px; padding: 0 3px; }
.say-word.is-ok { background: #DCFCE7; color: #166534; }
.say-word.is-miss { background: #FEE2E2; color: #991B1B; }
.talk-heard { display: block; margin-top: 4px; font-size: .82rem; color: var(--text-secondary, #475569); }
.talk-msg.is-info { justify-self: center; max-width: 92%; background: #F1F5F9; border: 1px dashed #94A3B8; color: #334155; font-weight: 600; font-size: .92rem; }
.talk-partner { position: relative; margin-top: 12px; border-radius: 18px; overflow: hidden; background: #0F2A4A; box-shadow: 0 10px 28px rgba(15, 42, 74, .2); }
.talk-face { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.talk-face-play { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); }
@media (min-width: 900px) { .talk-partner { max-width: 640px; margin-left: auto; margin-right: auto; } }
.robo-smile { fill: none; stroke: #0F2A4A; stroke-width: 4; stroke-linecap: round; opacity: 0; }
.robo-brows path { stroke: #0F2A4A; stroke-width: 3.5; stroke-linecap: round; opacity: 0; }
.robo.is-happy .robo-mouth { opacity: 0; }
.robo.is-happy .robo-smile { opacity: 1; }
.robo.is-happy .robo-bulb { fill: #22C55E; }
.robo.is-confused .robo-brows path { opacity: 1; }
.robo.is-confused .robo-bulb { fill: #EAB308; }
.robo.is-confused { animation: robo-tilt .5s ease-in-out; }
@keyframes robo-tilt { 30% { transform: rotate(-6deg); } 70% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .robo.is-confused { animation: none; } }
.talk-settings { display: grid; gap: 8px; margin: 10px 0 14px; }
.talk-level { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.talk-level button { min-height: 40px; }
.talk-level button.is-on { background: #1D4ED8; border-color: #1D4ED8; color: #fff; }
.talk-level-note { margin: 0; }
.talk-opt { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.talk-opt input { width: 20px; height: 20px; flex: none; }
.talk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.talk-chip { min-height: 34px; padding: 4px 10px; font-size: .88rem; }
.talk-msg .talk-tr.is-veiled { filter: blur(6px); user-select: none; }
.talk-show { min-height: 30px; padding: 2px 10px; font-size: .82rem; margin-top: 4px; }
.talk-stars { font-size: 2rem; letter-spacing: 4px; margin: 4px 0; }
.talk-slips { margin: 8px 0 14px; }
.talk-slip-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.talk-slip-list li { padding: 8px 12px; border-radius: 12px; background: #FFF7ED; border: 1px solid #FED7AA; display: grid; gap: 2px; }
.talk-slip-said { color: #991B1B; text-decoration: line-through; }
.talk-slip-right { color: #166534; font-weight: 700; }
.talk-slip-tip { font-size: .85rem; color: var(--text-secondary, #475569); }
.talk-hub-stars { margin: 4px 0 6px; font-weight: 800; color: #B45309; }
.talk-ask-badge { background: #EDE9FE; color: #5B21B6; }

/* ---- «Ещё» /learn/more: every section on phones ---- */
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.more-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; margin: 0; }
.more-card strong { display: block; color: var(--deep-blue, #0F2A4A); }
.more-card .hint { display: block; margin-top: 2px; }
.more-emoji { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #EFF6FF; font-size: 1.5rem; }
.more-card-wide { grid-column: 1 / -1; background: linear-gradient(135deg, #EFF6FF, #E0E7FF); border-color: #C7D2FE; }
.invite-box { display: grid; gap: 0.8rem; }
.invite-box input, .invite-box textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.invite-box input { min-height: 48px; font-family: ui-monospace, monospace; font-size: 0.9rem;
  padding: 0.7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--warm); }
.invite-friends { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.35rem; }

/* «Свободный разговор с ИИ» (/learn/gemirob) — the talk panel plus topics. */
[data-gemirob] [hidden] { display: none !important; }
.ai-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; margin: 12px 0; }
.ai-topic { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; min-height: 56px; }
.ai-topic .hint { font-weight: 500; }
.ai-left, .ai-privacy { margin: 8px 0 0; }
.ai-privacy { font-size: .85rem; }
.ai-fix .talk-sample-tr { font-weight: 700; }
.ai-thinking p { letter-spacing: 3px; font-weight: 700; animation: ai-dots 1s ease-in-out infinite alternate; }
@keyframes ai-dots { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-thinking p { animation: none; } }
.talk-card.is-ai { border: 2px solid #A78BFA; background: linear-gradient(135deg, #F5F3FF, #fff 60%); }

/* Talk answer box (2026-10-06): a growing textarea on its own line; the
   Turkish letters bar wraps under it instead of squeezing it. 16px+ so iOS
   does not zoom in. */
.talk-form { flex-wrap: wrap; align-items: flex-end; }
.talk-form .talk-input { flex: 1 1 0; min-width: 0; width: auto; min-height: 52px; max-height: 160px; resize: none; overflow-y: auto;
  font: inherit; font-size: 1.1rem; line-height: 1.4; padding: 12px 14px; border-radius: 14px; }
.talk-form .talk-send { flex: none; min-height: 52px; min-width: 56px; }
.talk-form .tr-letters { flex-basis: 100%; order: 99; margin: 0; }
@media (max-width: 480px) { .talk-send-label { display: none; } .talk-form .talk-send { font-size: 1.3rem; } }
/* Guest demo (/try/robo): no student tab bar, and the answer box keeps its height at 375px. */
body.storefront .talk-controls { bottom: 0; }
body.storefront .talk-form .talk-input { flex: 1 1 calc(100% - 72px); min-width: 8rem; min-height: 52px; }
.talk-guest-offer { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: #EFF6FF; border: 1px solid #BFDBFE; }
.talk-guest-offer-title { margin: 0 0 6px; font-weight: 800; color: #0F2A4A; }
.talk-guest-offer .actions { margin-top: 12px; }
.talk-guest-offer .hint { margin: 0; }
/* Гемироб: Robo's AI cousin — same face hooks, violet. */
.gemirob .robo-head { fill: #7C3AED; }
.gemirob .robo-face { fill: #F3E8FF; }
.gemirob .robo-body { fill: #A855F7; }
.gemirob .robo-wire { stroke: #8B5CF6; }
.gemirob .robo-bulb { fill: #F472B6; }
.gemirob .gemirob-spark { fill: #FBBF24; }
.gemirob.is-talking .gemirob-spark { fill: #FDE047; }
.gemirob .robo-eyes circle, .gemirob .robo-mouth { fill: #3B0764; }
.gemirob .robo-smile, .gemirob .robo-brows path { stroke: #3B0764; }
.gemirob-glint { fill: #fff; pointer-events: none; }
.gemirob-cheek { fill: #F9A8D4; opacity: .8; }
.talk-card.is-ai .robo { width: 64px; height: 64px; }
.more-card-ai { border: 2px solid #C4B5FD; }
.nav-new { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: #EDE9FE; color: #6D28D9; font-size: .7rem; font-weight: 800; }
.trial-banner, .trial-lock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.trial-banner p, .trial-lock p, .trial-lock h2 { margin: 0; }
.trial-lock h2 { font-size: 1.15rem; }