/* CEFR Speaking Exam — hand-authored stylesheet, no build step. */

:root {
  /* Indigo — the brand. --indigo-600 is the primary action colour. */
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;

  /* Text: one near-black for anything that carries meaning, one cool grey for
     everything supporting it. Two weights of text, not five. */
  --ink: #111827;
  --ink-soft: #64748b;
  --ink-faint: #94a3b8;

  --line: #e5e7eb;
  --surface: #ffffff;
  --ground: #f8fafc;
  --ground-2: #f1f5f9;   /* a quiet tint on a surface: chips, wells */
  --line-soft: #f1f5f9;  /* dividers inside a card */

  /* Semantic colour is separate from the brand accent and used sparingly.
     --amber is the indicator; --amber-text is the readable version on a tint,
     because #f59e0b as body text on a pale background fails contrast. */
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --amber: #f59e0b;
  --amber-text: #b45309;
  --amber-bg: #fffbeb;

  /* Premium: a warm gold, used only for Premium students' crown, name and
     ring. --premium-text is the readable one on white. */
  --premium: #f0b100;
  --premium-text: #a86400;
  --premium-tint: #fff6da;
  --premium-glow: rgba(240, 177, 0, .45);

  --radius: 16px;        /* cards */
  --radius-btn: 10px;    /* buttons */
  --radius-pill: 999px;  /* badges, bars */

  /* Subtle depth. A border does most of the separating; the shadow only lifts. */
  --shadow: 0 4px 20px rgba(15, 23, 42, .06);
  --shadow-lg: 0 8px 28px rgba(15, 23, 42, .10);

  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }
a { color: var(--indigo-600); }

/* ---------- shell ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 0 32px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 19px; font-weight: 800; color: var(--indigo-600); letter-spacing: -0.02em; }

/* The brand doubles as the way home, so it is a real button when navigation is
   allowed — keyboard reachable, with a visible focus ring — and a plain label
   while a question is running. */
.brand-btn {
  appearance: none; background: none; border: 0; padding: 0;
  font-family: inherit; line-height: inherit;
  cursor: pointer; border-radius: 6px;
}
.brand-btn:hover { color: var(--indigo-700); }
.brand-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--indigo-100);
}
.nav-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nav-user { color: var(--ink-soft); font-size: 14px; }

/* Destinations sit in the middle of the bar, the account at the right. The
   current one is underlined rather than merely coloured, so it still reads as
   current to anyone who cannot separate the two greys. */
.nav-links { display: flex; align-items: center; gap: 4px; margin-right: auto; margin-left: 8px; }
.nav-link {
  appearance: none; background: none; border: 0;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; cursor: pointer;
  padding: 8px 12px; border-radius: var(--radius-btn);
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--ground); color: var(--ink); }
.nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--indigo-100); }
.nav-link.is-current { color: var(--indigo-600); background: var(--indigo-50); }

.avatar {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--indigo-100); color: var(--indigo-700);
  font-size: 13px; font-weight: 700;
}

/* A phone cannot hold the brand, two destinations and the account on one line —
   squeezed together they wrap mid-word. So the bar becomes two rows: who you
   are on top, where you can go underneath. */
@media (max-width: 700px) {
  .nav { flex-wrap: wrap; min-height: 0; padding: 10px 16px 0; gap: 8px; }
  .brand { white-space: nowrap; font-size: 17px; }
  .nav-user, .avatar { display: none; }
  .nav-links {
    order: 3; width: 100%; margin: 0; gap: 2px;
    border-top: 1px solid var(--line);
  }
  .nav-link { padding: 10px 10px; font-size: 14px; border-radius: 0 0 8px 8px; }
}

main { max-width: var(--maxw); margin: 0 auto; padding: 32px 32px 80px; }
@media (max-width: 900px) { main { padding: 24px 20px 64px; } }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--btn-bg, var(--indigo-600)); color: var(--btn-ink, #fff);
  box-shadow: var(--btn-shadow, none);
  font-weight: 600; font-size: 15px;
  transition: background .15s ease, transform .05s ease;
}
/* An inline SVG with no width carries no intrinsic size, so left alone it
   expands to fill its button and swallows the label. Every icon that sits
   beside text is sized here, and never allowed to shrink the text instead. */
.btn svg, .link-more svg, .nav-link svg, .attempt svg { width: 16px; height: 16px; flex: none; }
.btn-lg svg { width: 18px; height: 18px; }
.btn { white-space: nowrap; }

.btn:hover:not(:disabled) { background: var(--btn-bg-hover, var(--indigo-700)); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ghost-ink, var(--indigo-600)); border-color: var(--ghost-line, var(--indigo-200)); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: var(--indigo-50); }
.btn-danger { background: #dc2626; }
.btn-danger:hover:not(:disabled) { background: var(--red); }

/* Delete sits quietly next to View until it is wanted — destructive controls
   should not compete for attention with the thing people came to do. */
.btn-quiet { color: var(--ink-faint); }
.btn-quiet:hover:not(:disabled) { color: var(--red); }

.confirm-delete {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; border-radius: 8px;
  background: var(--red-bg, #fef2f2);
  border: 1px solid var(--red);
}
.confirm-delete .muted { font-size: 13px; }

.select-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px;
  border: 1px solid var(--indigo-500); border-radius: 10px;
  background: var(--indigo-50);
}
.select-bar .spacer { flex: 1 1 auto; }

/* Folder tiles: speaking and writing, side by side. */
.folder-card {
  display: flex; align-items: flex-start; gap: 16px; text-align: left;
  width: 100%; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .15s ease, transform .15s ease;
}
.folder-card:hover:not(:disabled) { border-color: var(--indigo-500); transform: translateY(-2px); }
.folder-card:focus-visible { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 3px var(--indigo-100); }
.folder-card:disabled { cursor: default; opacity: .6; }
.folder-card h3 { margin-bottom: 4px; }
.folder-icon {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--indigo-50); color: var(--indigo-700);
}
.folder-count { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--indigo-700); }

.pick { width: 17px; height: 17px; accent-color: var(--indigo-600); cursor: pointer; flex: none; }
.pick + label { cursor: pointer; }
.row-selected { border-color: var(--indigo-500); background: var(--indigo-50); }
.btn-sm { padding: 7px 14px; font-size: 14px; }
.btn-block { width: 100%; }
:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 2px; }

/* ---------- surfaces ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.stack { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.muted { color: var(--ink-faint); font-size: 14px; }
.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }

/* ---------- hero ---------- */

.hero { padding: 56px 0 40px; text-align: center; }
.hero h1 { font-size: clamp(32px, 6vw, 52px); margin-bottom: 16px; }
.hero p { font-size: 18px; color: var(--ink-soft); max-width: 34rem; margin: 0 auto 28px; }
.hero .row { justify-content: center; }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.field input, .field select {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font: inherit;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 3px var(--indigo-100); }
.form-card { max-width: 26rem; margin: 40px auto; }

/* ---------- feedback ---------- */

.alert { padding: 12px 14px; border-radius: 9px; font-size: 14px; border: 1px solid; }
.alert-error { background: var(--red-bg); color: var(--red); border-color: #fecaca; }
.alert-warn { background: var(--amber-bg); color: var(--amber-text); border-color: #fde68a; }
.alert-ok { background: var(--green-bg); color: var(--green); border-color: #a7f3d0; }

/* ---------- badges ---------- */

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  background: var(--indigo-50); color: var(--indigo-700);
}
.badge-pass { background: var(--green-bg); color: var(--green); }
.badge-fail { background: var(--red-bg); color: var(--red); }

/* ---------- stats ---------- */

.stat { text-align: left; }
.stat-label { font-size: 13px; color: var(--ink-faint); margin-bottom: 4px; }
.stat-value { font-size: 30px; font-weight: 800; color: var(--indigo-600); font-variant-numeric: tabular-nums; }

/* ---------- exam list ---------- */

.exam-card { display: flex; flex-direction: column; gap: 10px; }
.exam-card h3 { font-size: 18px; }
.exam-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-faint); }

/* ---------- exam runner ---------- */

.progress-track { height: 6px; background: var(--indigo-100); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--indigo-600); border-radius: 999px; transition: width .3s ease; }

/* pre-line: Part 2 puts all three questions in one turn, one per line. */
.question { font-size: 21px; font-weight: 650; line-height: 1.45; margin: 14px 0; white-space: pre-line; }
.followups { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 15px; }
.followups li { margin-bottom: 4px; }

.recorder { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0; }
.rec-button {
  width: 84px; height: 84px; border-radius: 50%;
  border: none; background: #dc2626; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(220, 38, 38, .3);
  transition: transform .15s ease, background .15s ease;
}
.rec-button:hover:not(:disabled) { transform: scale(1.04); }
.rec-button:disabled { background: #9ca3af; box-shadow: none; }
.rec-button.recording { background: var(--ink); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 27, 49, .35); } 50% { box-shadow: 0 0 0 16px rgba(30, 27, 49, 0); } }
@media (prefers-reduced-motion: reduce) { .rec-button.recording { animation: none; } }

.rec-dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.rec-square { width: 24px; height: 24px; border-radius: 4px; background: #fff; }
.timer { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timer.over { color: var(--red); }

/* Writing tasks: the prompt may contain a table or line breaks that matter. */
.question-pre { white-space: pre-wrap; font-size: 17px; }

.essay {
  width: 100%;
  min-height: 340px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  line-height: 1.7;
  resize: vertical;
}
.essay:focus { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 3px var(--indigo-100); }

.transcript {
  background: var(--ground); border: 1px solid var(--line); border-radius: 9px;
  padding: 14px; font-size: 15px; min-height: 72px; white-space: pre-wrap;
  color: var(--ink-soft);
}
audio { width: 100%; margin-top: 10px; }

/* ---------- results ---------- */

.score-hero { text-align: center; padding: 26px 0; }
.score-value { font-size: 60px; font-weight: 800; color: var(--indigo-600); line-height: 1; font-variant-numeric: tabular-nums; }
.score-level { font-size: 26px; font-weight: 700; margin-top: 8px; }

.criteria { display: grid; gap: 12px; margin-top: 12px; }
.criterion { border-top: 1px solid var(--line); padding-top: 12px; }
.criterion-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.criterion-name { font-weight: 650; text-transform: capitalize; }
.criterion-score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--indigo-600); }
.criterion p { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }

.bar-track { height: 5px; background: var(--indigo-100); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--indigo-600); border-radius: 999px; }

.pill-list { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-soft); }
.pill-list li { margin-bottom: 4px; }

.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--indigo-100); border-top-color: var(--indigo-600);
  animation: spin .7s linear infinite; display: inline-block; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center-note { text-align: center; padding: 40px 20px; color: var(--ink-faint); }

/* ---------- exam stimulus (Part 1.2 pictures, Part 2/3 topics) ---------- */

.stimulus-images {
  display: grid; gap: 14px; margin: 16px 0;
  /* auto-fit collapses the empty track, so a single wide picture pair
     (both images in one file) spans the full width instead of half. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.stimulus-images figure { margin: 0; }
.stimulus-images img {
  width: 100%; max-width: 100%; height: auto;
  /* contain, never cover — Part 1.2 is about spotting differences, so
     nothing in the picture may be cropped away. */
  object-fit: contain;
  border-radius: 10px; border: 1px solid var(--line); background: var(--ground);
}
.stimulus-images figcaption { font-size: 13px; color: var(--ink-faint); margin-top: 6px; text-align: center; }

/* Pictures arrive via an authenticated fetch, so there is a moment before the
   blob URL is attached. Hold the space with a calm placeholder instead of
   flashing a broken-image icon. */
.stimulus-images img:not([src]) {
  min-height: 180px;
  background: var(--ground);
}
.media-failed {
  min-height: 120px;
  background: var(--red-bg, #fef2f2);
  border-color: var(--red);
  padding: 12px;
  font-size: 14px;
  color: var(--red);
}

.stimulus-topic {
  margin: 16px 0; padding: 14px 16px;
  background: var(--indigo-50); border-left: 3px solid var(--indigo-600);
  border-radius: 8px; font-size: 16px; line-height: 1.6;
}

.proscons { display: grid; gap: 14px; margin: 16px 0; }
@media (min-width: 560px) { .proscons { grid-template-columns: 1fr 1fr; } }
.proscons h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.proscons .pros h4 { color: var(--green); }
.proscons .cons h4 { color: var(--red); }
.proscons ul { margin: 0; padding-left: 20px; font-size: 15px; color: var(--ink-soft); }
.proscons li { margin-bottom: 5px; }
.proscons .pros, .proscons .cons {
  padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
}

/* ---------- timed phases ---------- */

.phase { text-align: center; padding: 24px 0 8px; }
.phase-label { font-size: 15px; font-weight: 650; color: var(--ink-soft); margin-bottom: 10px; }
.phase-timer {
  font-size: 46px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  color: var(--indigo-600); margin-bottom: 14px;
}
.phase-answer .phase-timer { color: #dc2626; }
.phase-track { height: 6px; background: var(--indigo-100); border-radius: 999px; overflow: hidden; max-width: 420px; margin: 0 auto; }
.phase-fill { height: 100%; background: var(--indigo-600); border-radius: 999px; transition: width 1s linear; }
.phase-fill.recording { background: #dc2626; }

.rec-live {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #dc2626; margin-right: 7px; vertical-align: middle;
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rec-live { animation: none; } }

.badge-mock { background: #fef3c7; color: #92400e; margin-left: 6px; }


/* ==========================================================================
   Dashboard
   Built to answer five questions at a glance: what level am I, what is my
   score, how far to the next level, what do I do next, am I improving.
   Everything below is ordered by that priority, not by how much data exists.
   ========================================================================== */

.welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.welcome h1 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 6px; }
.welcome p { color: var(--ink-soft); font-size: 15px; }
.btn-lg { padding: 14px 24px; font-size: 16px; }

/* ---------- statistics ---------- */

.stat-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 36px; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }

.stat-card { display: flex; gap: 16px; align-items: flex-start; }
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
/* tabular-nums so the three cards' figures line up rather than dancing. */
.stat-figure { font-size: 34px; font-weight: 800; color: var(--indigo-600); line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat-figure .of { font-size: 18px; font-weight: 700; color: var(--ink-faint); }
.stat-note { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.stat-note.up { color: var(--green); font-weight: 600; }

.icon-tile { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--indigo-50); color: var(--indigo-600); }
.icon-tile svg { width: 22px; height: 22px; }

/* ---------- the mock cards ---------- */

.section-head { margin: 0 0 14px; }
.section-head h2 { font-size: 20px; margin-bottom: 4px; }
.section-head p { color: var(--ink-soft); font-size: 14px; }

/* Speaking is the product. It gets the width, the tint and the big control;
   writing gets a quieter card. Equal weight would misrepresent the app. */
.feature-card {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  border-left: 3px solid var(--indigo-600);
  background: linear-gradient(90deg, var(--indigo-50), var(--surface) 55%);
}
.feature-card .grow { flex: 1 1 280px; min-width: 0; }
.feature-card h3 { font-size: 20px; margin-bottom: 4px; }
.feature-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--indigo-600); color: #fff; display: grid; place-items: center; flex: none; }
.feature-icon svg { width: 26px; height: 26px; }

.secondary-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.secondary-card .grow { flex: 1 1 240px; min-width: 0; }
.secondary-card h3 { font-size: 17px; margin-bottom: 4px; }
.secondary-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--ground-2); color: #475569; display: grid; place-items: center; flex: none; }
.secondary-icon svg { width: 21px; height: 21px; }

.meta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; color: var(--ink-soft); font-size: 13px; }
.meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.meta-row svg { width: 14px; height: 14px; }

/* ---------- CEFR progress ---------- */

/* Deliberately not a percentage bar: the point is where the student sits
   between named CEFR boundaries, not how "full" they are. */
.cefr { margin-top: 8px; }
.cefr-track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--line); margin: 34px 0 10px; }
.cefr-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--indigo-600); }
.cefr-tick { position: absolute; top: -8px; bottom: -8px; width: 2px; background: #cbd5e1; transform: translateX(-1px); }
.cefr-marker { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--indigo-600); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(79,70,229,.45); transform: translate(-50%, -50%); }
.cefr-marker-label { position: absolute; top: -32px; transform: translateX(-50%); font-size: 13px; font-weight: 800; color: var(--indigo-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cefr-scale { position: relative; height: 20px; }
.cefr-band { position: absolute; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.cefr-summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.cefr-level { font-size: 30px; font-weight: 800; color: var(--ink); }
.cefr-score { font-size: 17px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cefr-next { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.cefr-next strong { color: var(--indigo-600); }

/* ---------- skills ---------- */

.skill { margin-bottom: 16px; }
.skill:last-child { margin-bottom: 0; }
.skill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.skill-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.skill-score { font-size: 13px; font-weight: 700; color: var(--indigo-600); font-variant-numeric: tabular-nums; }
.skill-track { height: 8px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.skill-fill { height: 100%; border-radius: var(--radius-pill); background: var(--indigo-600); transition: width .3s ease; }
.skill-insights { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.skill-insights b { color: var(--ink); font-weight: 700; }

/* ---------- recent attempts ---------- */

.attempt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 13px 10px; border: 0; background: none; border-radius: 10px; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.attempt:last-of-type { border-bottom: 0; }
.attempt:hover { background: var(--indigo-50); }
.attempt-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attempt-score { font-weight: 700; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; flex: none; }
.attempt-date { font-size: 13px; color: var(--ink-soft); flex: none; }
/* On a phone the four columns leave the exam name a couple of characters, so
   the name takes its own line and the figures line up underneath it. */
@media (max-width: 700px) {
  .attempt { flex-wrap: wrap; gap: 6px 12px; padding: 12px 8px; }
  .attempt-name { flex: 1 0 100%; white-space: normal; }
  .attempt-date { margin-left: auto; }
}

.link-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: none; border: 0; padding: 0; color: var(--indigo-600); font-weight: 600; font-size: 14px; }
.link-more:hover { color: var(--indigo-700); }

/* ---------- badges ---------- */

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.chip svg { width: 13px; height: 13px; }
.chip-speaking { background: var(--indigo-50); color: var(--indigo-600); }
.chip-writing { background: var(--ground-2); color: #475569; }
.chip-done { background: var(--green-bg); color: var(--green); }
.chip-progress { background: var(--amber-bg); color: var(--amber-text); }
.chip-new { background: var(--ground-2); color: var(--ink-soft); }

/* ---------- empty state ---------- */

.empty-state { text-align: center; padding: 40px 24px; }
.empty-state .icon-tile { width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 16px; }
.empty-state .icon-tile svg { width: 28px; height: 28px; }
.empty-state h3 { font-size: 19px; margin-bottom: 8px; }
.empty-state p { color: var(--ink-soft); font-size: 14px; max-width: 30rem; margin: 0 auto 20px; }

/* ---------- two-column analytics ---------- */

.split { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ==========================================================================
   Mocks listing
   ========================================================================== */

.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.toolbar .search { position: relative; flex: 1 1 260px; min-width: 0; }
.toolbar .search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; }
.toolbar input[type=search] { width: 100%; padding: 10px 13px 10px 38px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); font-size: 14px; }
.toolbar input[type=search]:focus { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 3px var(--indigo-100); }
.toolbar select { padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); font-size: 14px; color: var(--ink); }
.toolbar select:focus { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 3px var(--indigo-100); }

.crumb { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--ink-soft); font-size: 14px; }
.crumb:hover { color: var(--indigo-600); }
.crumb svg { width: 15px; height: 15px; }

.mock-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .mock-grid { grid-template-columns: repeat(2, 1fr); } }

/* Same height per row so the grid reads as a grid, with the primary action
   pinned to the bottom of each card rather than floating mid-air. */
.mock-card { display: flex; flex-direction: column; }
.mock-card .spacer { flex: 1 1 auto; min-height: 10px; }
.mock-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mock-card h3 { font-size: 17px; }
.mock-sub { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.mock-parts { color: var(--ink-faint); font-size: 13px; margin-top: 3px; }
.mock-meta { font-size: 13px; color: var(--ink-soft); margin-top: 12px; font-variant-numeric: tabular-nums; }
.mock-best { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--indigo-50); }
.mock-best .stat-label { color: var(--indigo-700); }
.mock-best .value { font-size: 18px; font-weight: 800; color: var(--indigo-600); margin-top: 2px; font-variant-numeric: tabular-nums; }

.practise-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.practise-row .label { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.chip-btn { padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--indigo-200); background: var(--surface); color: var(--indigo-600); font-size: 13px; font-weight: 600; transition: background .15s ease, border-color .15s ease; }
.chip-btn:hover { background: var(--indigo-50); border-color: var(--indigo-500); }

.featured { border-left: 3px solid var(--indigo-600); background: linear-gradient(135deg, var(--indigo-50), var(--surface) 60%); }
@media (min-width: 820px) { .featured-wrap { grid-column: 1 / -1; } }

/* ---------- shared hover ---------- */

.card-hover { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--indigo-200); }

@media (prefers-reduced-motion: reduce) {
  .card-hover, .card-hover:hover, .skill-fill, .attempt { transition: none; transform: none; }
}

/* ---------- briefing and microphone check ---------- */

.section-head h2 { display: flex; align-items: center; gap: 8px; }
.section-head h2 svg { width: 18px; height: 18px; color: var(--indigo-600); }

.brief-parts { display: flex; flex-direction: column; gap: 10px; }
.brief-part {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px;
}
.brief-part .grow { flex: 1 1 auto; min-width: 0; }
.brief-part strong { font-size: 15px; }
.brief-part p { font-size: 13px; margin-top: 2px; }
.brief-time {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.brief-time svg { width: 14px; height: 14px; }

/* Numbered because the order is the information: these things happen to the
   student in this sequence, whether or not they press anything. */
.brief-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.brief-steps li { font-size: 15px; line-height: 1.5; }

.mic-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.mic-card p { font-size: 14px; }
.mic-card audio { width: 100%; max-width: 420px; }

.mic-live { display: flex; align-items: center; gap: 14px; width: 100%; }
.mic-meter {
  flex: 1 1 auto; height: 12px; border-radius: var(--radius-pill);
  background: var(--ground); border: 1px solid var(--line); overflow: hidden;
}
/* Amber until it is loud enough to count, green once it is — so the bar says
   "heard you", not merely "moving". */
.mic-level { height: 100%; width: 0; background: var(--amber); transition: width .06s linear; }
.mic-level.is-live { background: var(--green); }
.mic-countdown {
  flex: none; font-weight: 700; font-size: 15px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.mic-verdict { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.mic-verdict svg { width: 18px; height: 18px; flex: none; }
.mic-verdict.ok { color: var(--green); }
.mic-verdict.warn { color: var(--amber-text); }
.mic-verdict.bad { color: var(--red); }

.brief-start { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin: 8px 0 40px; }
.brief-start p { font-size: 14px; }

/* An escape hatch, deliberately made to look like prose rather than a button:
   a student who cannot pass the check on a school machine must still be able
   to sit the test, but should not reach for this first. */
.link-inline {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--indigo-600); text-decoration: underline;
  cursor: pointer;
}
.link-inline:hover { color: var(--indigo-700); }

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

/* At phone width three columns squeeze the description into two-word lines, so
   the time drops to its own row and the text gets the full card. */
@media (max-width: 700px) {
  .brief-part { flex-wrap: wrap; row-gap: 6px; }
  .brief-part .grow { flex: 1 1 calc(100% - 60px); }
  .brief-time { width: 100%; padding-left: 60px; }
}

/* ---------- measured vs judged criteria ---------- */

/* Pronunciation and fluency come from a speech assessor that heard the
   recording; the rest are a model's reading of the words. The badge is the only
   honest way to show that they are different kinds of claim. */
.measured-tag {
  display: inline-block; margin-left: 8px;
  padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--green-bg); color: var(--green);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; vertical-align: middle;
}
.bar-fill.measured { background: var(--green); }

.criterion-absent { opacity: .75; }
.criterion-absent .criterion-score { color: var(--ink-faint); }

/* ---------- handed in ---------- */

.submitted-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; max-width: 34rem; margin: 40px auto; padding: 40px 32px;
}
.submitted-mark {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: var(--radius-pill);
  background: var(--green-bg); color: var(--green);
}
.submitted-mark svg { width: 32px; height: 32px; }
.submitted-card h2 { font-size: 22px; }
.submitted-card p { font-size: 15px; max-width: 30rem; }
.submitted-card .btn { margin-top: 6px; }

/* An attempt still being marked. Not a button — there is nothing to open yet,
   and something that looks pressable but does nothing reads as broken. */
.attempt-pending { cursor: default; }
.attempt-pending:hover { background: none; }

/* A slow pulse rather than a spinner: this sits in a list a student is reading,
   and a spinner in the middle of text pulls the eye away from everything else. */
.pulse {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 6px;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; opacity: .8; }
}

/* ---------- writing ---------- */

/* The exam bar stays in reach while the student scrolls a long answer: the
   clock and the hand-in button are the two things they must never hunt for. */
.wr-bar {
  position: sticky; top: 72px; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.wr-bar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wr-clock-wrap { display: flex; align-items: center; gap: 8px; }
.wr-clock-wrap svg { width: 18px; height: 18px; color: var(--ink-soft); }
.wr-clock { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wr-clock.is-low { color: var(--red); }
.wr-save { font-size: 13px; }
.wr-save.is-bad { color: var(--red); }

.wr-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.wr-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 16px; min-width: 120px;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: var(--surface); color: var(--ink); font-weight: 600;
}
.wr-tab.is-active { border-color: var(--indigo-500); background: var(--indigo-50); color: var(--indigo-700); }
.wr-tab:focus-visible { outline: 3px solid var(--indigo-200); outline-offset: 2px; }
.wr-tab-count { font-size: 12px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.wr-panel { display: none; }
.wr-panel.is-active { display: flex; flex-direction: column; gap: 14px; }
.wr-stimulus { display: flex; flex-direction: column; gap: 8px; }
.wr-message {
  padding: 14px 16px; border-left: 3px solid var(--indigo-200);
  background: var(--ground); border-radius: 0 10px 10px 0; line-height: 1.65;
}
.wr-text { min-height: 320px; line-height: 1.7; }
.wr-counter { display: flex; gap: 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.wr-counter .is-met { color: var(--green); font-weight: 600; }
.wr-question { min-height: 0; }

.wr-band { text-align: right; }
.wr-band strong { font-size: 30px; font-variant-numeric: tabular-nums; }

/* In-line corrections: the mistake struck through, the correction beside it,
   exactly as a teacher marks a paper script. */
.wr-script {
  margin-top: 8px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  line-height: 1.9; overflow-wrap: anywhere;
}
.wr-script del, .wr-fixes del, .wr-legend del { color: var(--red); text-decoration: line-through; }
.wr-script ins, .wr-fixes ins, .wr-legend ins { color: var(--green); text-decoration: none; font-weight: 600; }
.wr-fix { white-space: normal; }
.wr-fixes { margin: 10px 0 0; padding-left: 22px; font-size: 14px; }
.wr-fixes li { margin-bottom: 4px; }
.wr-legend { font-size: 12px; }
.wr-details { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--ground); }
.wr-part.is-skipped { opacity: .7; }

.wr-history { display: flex; flex-direction: column; margin-top: 8px; }
.wr-history-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 4px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink);
}
.wr-history-row:hover { background: var(--ground); }
.wr-history-row:last-child { border-bottom: 0; }

@media (max-width: 700px) {
  .wr-bar { top: 64px; }
  .wr-tab { min-width: 0; flex: 1; }
  .wr-text { min-height: 260px; }
}
.mock-meta svg { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- leaderboard ---------- */

/* Medal metals, used only here. Each has a solid tone for the medal and a pale
   tint for the podium step, so the three places read at a glance without
   shouting over the rest of the dashboard. */
.lb-card {
  --gold: #e3a008;  --gold-tint: #fef6d8;
  --silver: #8a94a6; --silver-tint: #eef1f5;
  --bronze: #c2703a; --bronze-tint: #fbeee4;
  overflow: hidden;
  padding-bottom: 0;
}
.lb-head { display: flex; gap: 14px; align-items: center; }
.lb-head h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.lb-head p { font-size: 14px; margin-top: 2px; }
.lb-head-icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--gold-tint); color: var(--gold);
}
.lb-head-icon svg { width: 22px; height: 22px; }
.lb-top10 {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--indigo-50); color: var(--indigo-600);
}

/* Podium: second, first, third — the winner in the middle and highest. */
.lb-podium {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; align-items: end;
  margin-top: 22px;
}
.lb-spot { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.lb-spot.is-empty { visibility: hidden; }
.lb-avatar {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 19px; color: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
}
.lb-gold   .lb-avatar { width: 74px; height: 74px; font-size: 23px; background: linear-gradient(145deg, #f7c948, var(--gold)); }
.lb-silver .lb-avatar { background: linear-gradient(145deg, #c3cad6, var(--silver)); }
.lb-bronze .lb-avatar { background: linear-gradient(145deg, #e0a178, var(--bronze)); }
.lb-medal {
  position: absolute; right: -4px; bottom: -4px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--ink);
  background: var(--surface); border: 2px solid currentColor;
}
.lb-gold .lb-medal { color: var(--gold); }
.lb-silver .lb-medal { color: var(--silver); }
.lb-bronze .lb-medal { color: var(--bronze); }
.lb-name {
  margin-top: 10px; max-width: 100%;
  font-weight: 700; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-score { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 2px; }
.lb-gold .lb-score { font-size: 32px; }
.lb-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.lb-step {
  width: 100%; margin-top: 12px;
  border-radius: 12px 12px 0 0;
  display: grid; place-items: start center;
  font-weight: 800; font-size: 22px; padding-top: 10px;
}
.lb-step span { opacity: .55; }
.lb-gold   .lb-step { height: 76px; background: var(--gold-tint);   color: var(--gold); }
.lb-silver .lb-step { height: 56px; background: var(--silver-tint); color: var(--silver); }
.lb-bronze .lb-step { height: 42px; background: var(--bronze-tint); color: var(--bronze); }
.lb-spot.is-you .lb-avatar { outline: 3px solid var(--indigo-500); outline-offset: 3px; }

.lb-you {
  display: inline-block; vertical-align: 2px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--radius-pill);
  background: var(--indigo-600); color: #fff;
}

/* Places 4-10 sit directly under the podium, on the same ground. */
.lb-list { list-style: none; margin: 0 -24px; padding: 6px 24px; border-top: 1px solid var(--line); }
.lb-list li {
  display: grid; grid-template-columns: 28px 32px minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: 10px;
}
.lb-list li + li { border-top: 1px solid var(--line); }
.lb-list li.is-you { background: var(--indigo-50); border-top-color: transparent; }
.lb-rank { font-weight: 800; color: var(--ink-faint); font-variant-numeric: tabular-nums; text-align: center; }
.lb-mini {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  background: var(--indigo-100); color: var(--indigo-700);
}
.lb-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row-meta { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.lb-row-score { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

.lb-empty {
  margin-top: 18px; padding: 22px; border-radius: 12px;
  display: flex; gap: 14px; align-items: center;
  background: var(--ground); color: var(--ink-soft);
}
.lb-empty svg { flex: none; width: 28px; height: 28px; color: var(--gold); }

.lb-foot {
  margin: 0 -24px; padding: 14px 24px 18px;
  border-top: 1px solid var(--line); background: var(--ground);
  display: flex; flex-direction: column; gap: 10px;
}
.lb-standing { font-weight: 600; font-size: 14px; }
.lb-nick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.lb-nick-label { color: var(--ink-soft); font-size: 13px; }
.lb-nick.is-editing { display: block; }
.lb-nick-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.lb-nick-form input { flex: 1 1 180px; min-width: 0; }

@media (max-width: 560px) {
  .lb-podium { gap: 6px; }
  .lb-avatar { width: 48px; height: 48px; font-size: 16px; }
  .lb-gold .lb-avatar { width: 58px; height: 58px; font-size: 19px; }
  .lb-score { font-size: 21px; }
  .lb-gold .lb-score { font-size: 25px; }
  .lb-name { font-size: 13px; }
  .lb-meta { font-size: 11px; }
  .lb-list, .lb-foot { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .lb-list li { grid-template-columns: 22px 28px minmax(0, 1fr) auto; gap: 8px; }
  .lb-row-meta { display: none; }
  .lb-mini { width: 28px; height: 28px; }
}

/* ---------- speaking rooms ---------- */

.vc-consent { max-width: 560px; text-align: left; }
.vc-consent-icon {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 14px;
  display: grid; place-items: center; background: var(--indigo-50); color: var(--indigo-600);
}
.vc-consent-icon svg { width: 26px; height: 26px; }
.vc-rules { margin: 14px 0 20px; padding-left: 20px; display: grid; gap: 6px; }

.vc-partner {
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--indigo-600), #6d5bf0);
  color: #fff; border-color: transparent;
}
.vc-partner .muted { color: rgba(255,255,255,.82); }
.vc-partner h2 { font-size: 22px; }
.vc-partner-text { flex: 1 1 300px; }
.vc-partner .btn { background: #fff; color: var(--indigo-700); border-color: #fff; }
.vc-partner .btn svg { width: 18px; height: 18px; }
.vc-partner .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.vc-wait { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vc-pulse {
  width: 14px; height: 14px; border-radius: 50%; background: #fff; flex: none;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: vc-pulse 1.4s infinite;
}
@keyframes vc-pulse { to { box-shadow: 0 0 0 14px rgba(255,255,255,0); } }

.vc-clubs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vc-club { display: flex; flex-direction: column; gap: 10px; }
.vc-club h3 { font-size: 17px; }
.vc-seats { display: flex; align-items: center; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.vc-seat { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--indigo-200); }
.vc-seat.is-taken { background: var(--green); border-color: var(--green); }
.vc-club-names { font-size: 13px; min-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-club .btn { margin-top: auto; }

.vc-room-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.vc-timer { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vc-timer.is-low { color: var(--red); }
.vc-rec {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--red);
  padding: 6px 12px; border-radius: var(--radius-pill); background: var(--red-bg);
}
.vc-rec span { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: vc-blink 1.2s infinite; }
@keyframes vc-blink { 50% { opacity: .25; } }

.vc-topic {
  padding: 18px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.vc-topic-label {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo-600);
}
.vc-topic-text { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.5; }
.vc-args { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.vc-args ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-soft); }

.vc-people { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.vc-person {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 18px 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
}
.vc-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 22px; color: #fff;
  background: linear-gradient(145deg, var(--indigo-500), var(--indigo-700));
  transition: box-shadow .12s ease;
}
.vc-person.is-me .vc-avatar { background: linear-gradient(145deg, #34d399, var(--green)); }
/* The ring that shows who is speaking right now. */
.vc-person.is-talking .vc-avatar { box-shadow: 0 0 0 4px var(--surface), 0 0 0 8px var(--green); }
.vc-person.is-failed { opacity: .6; }
.vc-person-name { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-person-meta { font-size: 12px; color: var(--ink-soft); min-height: 16px; }
.vc-person-state { font-size: 12px; color: var(--amber-text); min-height: 16px; }

.vc-controls {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 12px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
.vc-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 88px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--ground); color: var(--ink);
  font-size: 12px; font-weight: 600;
}
.vc-btn svg { width: 22px; height: 22px; }
.vc-btn.is-on { background: var(--amber-bg); border-color: #fde68a; color: var(--amber-text); }
.vc-leave { background: var(--red); border-color: var(--red); color: #fff; }
.vc-btn:focus-visible { outline: 3px solid var(--indigo-200); outline-offset: 2px; }

.vc-after .vc-stars { display: flex; gap: 6px; margin-top: 8px; }
.vc-stars button {
  font-size: 28px; line-height: 1; padding: 2px 4px;
  background: none; border: 0; color: var(--line);
}
.vc-stars button:hover, .vc-stars button:hover ~ button { color: var(--line); }
.vc-stars:hover button { color: #f5b301; }
.vc-stars button:hover ~ button { color: var(--line); }

@media (max-width: 560px) {
  .vc-args { grid-template-columns: 1fr; }
  .vc-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-btn { min-width: 72px; }
  .vc-topic-text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-pulse, .vc-rec span { animation: none; }
}

/* ------------------------------------------------------------ text chat */

.ch-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--indigo-50); border-radius: var(--radius-btn);
  align-self: flex-start;
}
.ch-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-soft);
  font: inherit; font-weight: 600; cursor: pointer;
}
.ch-tab svg { width: 16px; height: 16px; }
.ch-tab.is-current { background: var(--surface); color: var(--indigo-600); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.ch-tab:focus-visible, .ch-room:focus-visible, .ch-flag:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 2px; }

.ch-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
.ch-rooms { display: flex; flex-direction: column; gap: 6px; }
.ch-room {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.ch-room:hover { border-color: var(--indigo-500); }
.ch-room.is-current { border-color: var(--indigo-600); background: var(--indigo-50); color: var(--indigo-600); }
.ch-room-count { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.ch-panel { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-width: 0; }
.ch-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ch-list {
  display: flex; flex-direction: column; gap: 8px;
  height: min(55vh, 460px); overflow-y: auto; padding: 4px 2px;
  overscroll-behavior: contain;
}
.ch-list-call { height: 180px; }
.ch-empty { margin: auto; text-align: center; font-size: 14px; padding: 0 12px; }

.ch-msg {
  align-self: flex-start; max-width: 85%;
  padding: 8px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--ground); border: 1px solid var(--line);
}
.ch-msg.is-mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--indigo-50); border-color: var(--indigo-200); }
.ch-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.ch-name { font-weight: 700; color: var(--ink); }
.ch-level { padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-weight: 600; }
.ch-time { font-variant-numeric: tabular-nums; }
.ch-flag {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 13px; padding: 0 2px; line-height: 1;
}
.ch-flag:hover { color: var(--red); }
.ch-text { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.ch-deleted { font-style: italic; color: var(--ink-soft); }
.ch-report { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ch-report input { flex: 1 1 160px; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }

.ch-compose { display: flex; gap: 8px; }
.ch-compose input {
  flex: 1; min-width: 0; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  font: inherit; background: var(--surface); color: var(--ink);
}
.ch-compose input:focus { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 3px var(--indigo-50); }
.ch-rules { font-size: 12px; margin: 0; }

.ch-call { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.ch-call-head { display: flex; align-items: center; gap: 6px; }
.ch-call-head svg { width: 16px; height: 16px; color: var(--indigo-600); }

@media (max-width: 640px) {
  .ch-layout { grid-template-columns: minmax(0, 1fr); }
  .ch-rooms { flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
  .ch-room { flex: 0 0 auto; }
  .ch-list { height: 52vh; }
  .ch-msg { max-width: 92%; }
}

/* -------------------------------------------------------------- premium */

.crown { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--premium); }
.crown svg { width: 15px; height: 15px; filter: drop-shadow(0 1px 1px rgba(168, 100, 0, .35)); }
.gold-name {
  font-weight: 700;
  background: linear-gradient(100deg, #b86e00, #e8a300 45%, #b86e00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-name { color: var(--premium-text); background: none; }
}

/* Any avatar circle can hold a picture instead of initials. */
.vc-avatar, .lb-avatar, .lb-mini, .ch-av, .vc-face, .pr-avatar { position: relative; overflow: visible; }
.av-pic {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; display: block;
}
/* The glowing gold ring. */
.vc-avatar.is-premium, .lb-avatar.is-premium, .lb-mini.is-premium, .ch-av.is-premium,
.vc-face.is-premium, .pr-avatar.is-premium {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--premium), 0 0 16px 3px var(--premium-glow);
}
@media (prefers-reduced-motion: no-preference) {
  .vc-avatar.is-premium, .pr-avatar.is-premium { animation: pr-glow 2.8s ease-in-out infinite; }
}
@keyframes pr-glow {
  50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--premium), 0 0 24px 7px var(--premium-glow); }
}
/* Speaking still wins: the green ring says who is talking. */
.vc-person.is-talking .vc-avatar.is-premium { animation: none; box-shadow: 0 0 0 4px var(--surface), 0 0 0 8px var(--green); }
.lb-mini .av-pic, .lb-avatar .av-pic { z-index: 0; }
.lb-medal { z-index: 1; }

/* Chat: a small face beside other people's messages. */
.ch-row { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; align-self: flex-start; }
.ch-row.is-mine { align-self: flex-end; }
.ch-row .ch-msg { max-width: 100%; min-width: 0; }
.ch-msg.is-premium:not(.is-mine) { background: var(--premium-tint); border-color: #f3dc94; }
.ch-av {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--indigo-100); color: var(--indigo-700);
}
@media (max-width: 640px) { .ch-row { max-width: 94%; } }

/* Clubs: who is inside, and the Premium seat. */
.vc-faces { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-face {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--indigo-100); color: var(--indigo-700);
}
.vc-seat.is-gold { border-color: var(--premium); border-style: dashed; }
.vc-seat.is-gold.is-taken { background: var(--premium); border-style: solid; }

.btn-gold {
  background: linear-gradient(135deg, #f7c948, #e39b00); color: #3b2500;
  border-color: #d99000;
}
.btn-gold:hover:not(:disabled) { background: linear-gradient(135deg, #f9d263, #eaa40a); }
.btn-gold svg { width: 15px; height: 15px; vertical-align: -2px; }

/* The strip at the top of the speaking club. */
.pr-strip { display: flex; align-items: center; gap: 18px; padding: 18px 20px; }
.pr-strip.is-premium { background: linear-gradient(120deg, var(--premium-tint), var(--surface) 60%); border-color: #f3dc94; }
.pr-strip.is-free { align-items: flex-start; }
.pr-avatar {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #fff;
  background: linear-gradient(145deg, var(--indigo-500), var(--indigo-700));
}
.pr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-body h3 { font-size: 17px; }
.pr-name { font-size: 18px; }
.pr-status { font-weight: 600; color: var(--premium-text); font-size: 14px; }
.pr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pr-upload { position: relative; cursor: pointer; }
.pr-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.pr-upload:focus-within { outline: 2px solid var(--premium-text); outline-offset: 2px; }
.pr-upload.is-busy { opacity: .7; cursor: progress; }
.pr-note { font-size: 12px; }
.pr-error { font-size: 13px; color: var(--red); }
.pr-perks { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin: 2px 0 0; padding: 0; }
.pr-perks li { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pr-perks svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--premium); }
.pr-topup { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--premium-text); font-weight: 600; font-size: 14px; }
.pr-topup svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--premium); }
@media (max-width: 640px) {
  .pr-strip { flex-wrap: wrap; gap: 14px; }
  .pr-strip.is-free .btn-gold { width: 100%; }
}

/* ================================================================
   App shell for students: five tabs — a bar along the bottom of a
   phone, the same five links across the top of a computer.
   ================================================================ */

.nav-student { min-height: 60px; flex-wrap: nowrap; }
.nav-me {
  width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; position: relative;
  background: var(--indigo-100); color: var(--indigo-700);
  font-weight: 800; font-size: 14px;
}
.nav-me.is-premium { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--premium); }
.nav-me:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--indigo-200); }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex;
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, .05);
}
.tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 0; border: 0; background: none;
  color: var(--ink-soft); font-size: 11px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.tab-icon { display: grid; place-items: center; width: 54px; height: 30px; border-radius: 15px; transition: background .15s ease; }
.tab-icon svg { width: 22px; height: 22px; }
.tab.is-current { color: var(--indigo-600); font-weight: 700; }
.tab.is-current .tab-icon { background: var(--indigo-50); }
.tab:focus-visible { outline: none; }
.tab:focus-visible .tab-icon { box-shadow: 0 0 0 2px var(--indigo-500); }

@media (max-width: 899px) {
  .nav-student { padding: 0 16px; min-height: 56px; }
  .nav-student .nav-desktop { display: none; }
  .nav-student .brand { font-size: 18px; }
  main.has-tabs { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) {
  .tabbar { display: none; }
  .nav-student .nav-links { margin-left: 24px; }
}
/* The staff menu on a phone: one row, no name. */
@media (max-width: 700px) {
  .nav-staff { flex-wrap: nowrap; padding: 8px 16px; }
  .nav-staff .nav-links { order: 0; width: auto; border: 0; }
}

/* Screens that read as one column stay one comfortable column on a computer. */
main[data-screen="dashboard"], main[data-screen="profile"], main[data-screen="rank"],
main[data-screen="topup"], main[data-screen="results"] { max-width: 760px; }
main[data-screen="speak"] { max-width: 980px; }

.page-head { display: flex; flex-direction: column; gap: 4px; }
.page-head h1 { font-size: 26px; letter-spacing: -0.02em; }
@media (max-width: 640px) {
  main { padding-left: 16px; padding-right: 16px; }
  .page-head h1 { font-size: 24px; }
  main.stack { gap: 16px; }
}

/* A two-way switch: Speaking | Writing, Voice | Chat. */
.seg {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px; gap: 4px; max-width: 420px;
  background: var(--indigo-50); border-radius: 12px;
}
.seg-btn {
  height: 42px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink-soft); font-weight: 700; font-size: 15px;
}
.seg-btn.is-current { background: var(--surface); color: var(--indigo-600); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.seg-btn:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 1px; }
/* The club's own switch takes the same shape. */
.ch-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 420px; box-sizing: border-box; }
.ch-tab { justify-content: center; height: 42px; }

/* ----------------------------------------------------------- home */

.home-hello { display: flex; flex-direction: column; gap: 4px; }
.home-hello h1 { font-size: 26px; letter-spacing: -0.02em; }
.home-level { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.home-level-top { display: flex; justify-content: space-between; align-items: center; }
.home-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.home-score { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.home-score span { font-size: 17px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.home-bar { height: 8px; border-radius: var(--radius-pill); background: var(--indigo-50); overflow: hidden; }
.home-bar span { display: block; height: 100%; background: var(--indigo-600); border-radius: inherit; }
.home-level-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.home-first { flex-direction: row; align-items: center; gap: 14px; }
.home-first h2 { font-size: 17px; margin-bottom: 4px; }
.home-first p { font-size: 14px; }
.home-start { display: flex; flex-direction: column; gap: 8px; }
.home-start .btn { min-height: 56px; font-size: 17px; }
.home-balance { text-align: center; font-size: 13px; color: var(--ink-soft); }
.home-balance .link-more { margin: 0; font-size: 13px; display: inline; }
.home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; min-height: 104px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); font-size: 14px; font-weight: 700; text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.home-tile:hover { border-color: var(--indigo-200); transform: translateY(-1px); }
.home-tile:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 2px; }
.home-tile-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--indigo-50); color: var(--indigo-600); }
.home-tile-icon svg { width: 22px; height: 22px; }
.home-tile-icon.is-green { background: var(--green-bg); color: var(--green); }
.home-tile-icon.is-gold { background: var(--premium-tint); color: var(--premium-text); }
.home-tile-live { display: inline-flex; align-items: center; margin-top: -4px; font-size: 11px; font-weight: 600; color: var(--green); }
.home-rank {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%;
  text-align: left; color: var(--ink); font: inherit;
}
.home-rank:hover { border-color: var(--indigo-200); }
.home-rank > svg { width: 20px; height: 20px; color: var(--ink-faint); flex: 0 0 20px; }
.home-rank-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: grid; place-items: center; background: #fef6d8; color: #b7791f; }
.home-rank-icon svg { width: 20px; height: 20px; }
.home-rank-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-rank-text .muted { font-size: 13px; }

/* ---------------------------------------------------------- profile */

.prof-balance { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.prof-balance h2 { font-size: 16px; }
.prof-balance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prof-bal { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; }
.prof-bal span { font-size: 12px; font-weight: 600; }
.prof-bal strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.prof-bal.is-indigo { background: var(--indigo-50); color: var(--indigo-700); }
.prof-bal.is-green { background: var(--green-bg); color: #15803d; }
.prof-bal strong { color: var(--ink); }
.btn-block { width: 100%; justify-content: center; }
.menu-card { padding: 0; overflow: hidden; }
.menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border: 0; background: none; text-align: left; color: var(--ink);
  border-top: 1px solid var(--line);
}
.menu-row:first-child { border-top: 0; }
.menu-row:hover { background: var(--ground); }
.menu-row:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: -2px; }
.menu-row > svg { width: 18px; height: 18px; color: var(--ink-faint); flex: 0 0 18px; }
.menu-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-50); color: var(--indigo-600); }
.menu-icon svg { width: 20px; height: 20px; }
.menu-icon.is-green { background: var(--green-bg); color: var(--green); }
.menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-text .muted { font-size: 13px; }
.prof-nick { padding: 14px 16px; }
.prof-nick .lb-nick { margin: 0; }
.prof-signout { color: var(--red); border-color: #fecaca; min-height: 48px; }
.prof-signout svg { width: 18px; height: 18px; }
.prof-signout:hover:not(:disabled) { background: var(--red-bg); }

/* ---------------------------------------------------------- sponsors */

.ad { display: flex; flex-direction: column; gap: 6px; }
.ad[hidden] { display: none; }
.ad-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.ad-link {
  display: block; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  aspect-ratio: 16 / 5; max-width: 560px; width: 100%;
}
.ad-link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-link:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 2px; }

/* ------------------------------------------------ club list on phones */

@media (max-width: 640px) {
  .vc-clubs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vc-club {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px;
    align-items: center; padding: 14px 16px;
  }
  .vc-club > * { grid-column: 1; }
  .vc-club > .btn { grid-column: 2; grid-row: 1 / span 4; margin: 0; min-width: 96px; }
  .vc-club-names { display: none; }
  .vc-partner { padding: 18px; }
  .toolbar { gap: 8px; }
  .toolbar select { flex: 1 1 140px; }
}

/* ---------------------------------------- mock cards and switches on phones */

@media (max-width: 640px) {
  .mock-grid { gap: 12px; }
  .mock-card { padding: 16px; }
  .mock-card .mock-sub, .mock-card .mock-parts { display: none; }
  .mock-card .mock-meta { margin-top: 4px; }
  .mock-card .spacer { display: none; }
  .mock-best { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding: 8px 12px; }
  .mock-best .value { font-size: 16px; margin-top: 0; }
  .mock-card > .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 12px !important; }
  .mock-card > .row .btn { justify-content: center; min-height: 44px; padding-left: 10px; padding-right: 10px; }
  .mock-card > .row .btn svg { display: none; }
  .practise-row { gap: 6px; margin-top: 12px; padding-top: 12px; flex-wrap: nowrap; }
  .practise-row .label { flex: 1 1 auto; min-width: 0; }
  .chip-btn { min-width: 40px; min-height: 36px; padding: 4px 8px; }
  .ch-tab { white-space: nowrap; font-size: 14px; }
  .ch-tab svg { display: none; }
}

/* =================================================================
   Lists as in the phone design: one card, rows divided by a hairline,
   a square badge on the left, a chevron on the right.
   ================================================================= */

.list-card { padding: 0; overflow: hidden; }
.list-card > h2 { font-size: 16px; padding: 16px 16px 10px; margin: 0; }
.list-row { display: flex; align-items: stretch; border-top: 1px solid var(--line-soft); }
.list-card > .list-row:first-child { border-top: 0; }
.list-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 0; background: none; text-align: left; color: var(--ink);
  min-height: 64px;
}
.list-main:hover { background: var(--ground); }
.list-main:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: -2px; }
.list-main > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--ink-faint); }
.list-badge {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--indigo-50); color: var(--indigo-700);
  font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums;
}
.list-badge svg { width: 20px; height: 20px; }
.list-badge.is-done { background: var(--green-bg); color: #15803d; }
.list-badge.is-green { background: var(--green-bg); color: var(--green); }
.list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-text strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-text span { font-size: 13px; color: var(--ink-soft); }
.list-end { font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.list-side {
  flex: 0 0 auto; border: 0; border-left: 1px solid var(--line-soft); background: none;
  padding: 0 16px; font-size: 13px; font-weight: 700; color: var(--indigo-600);
}
.list-side:hover { background: var(--indigo-50); }

/* The next full mock, at the top of Testlar. */
.tests-featured {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: linear-gradient(160deg, var(--surface) 55%, var(--indigo-50));
}
.tests-featured h2 { font-size: 22px; letter-spacing: -0.02em; }
.tests-featured p { color: #475569; font-size: 14px; line-height: 1.5; }
.tests-featured .mock-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.tests-featured .mock-sub, .tests-featured .mock-meta { margin: 0; }
.tests-featured .spacer { display: none; }
.tests-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo-600); }
.tests-have { font-size: 13px; color: var(--ink-soft); text-align: center; }
.tests-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.tests-actions .btn, .tests-featured > .btn { justify-content: center; }
main[data-screen="mocks"], main[data-screen="writing"] { max-width: 760px; }

/* Home: the latest results. */
.home-recent { display: flex; flex-direction: column; gap: 8px; }
.home-recent-head { display: flex; justify-content: space-between; align-items: baseline; }
.home-recent-head h2 { font-size: 16px; }
.home-recent-head .link-more { margin: 0; }
.home-result {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; min-height: 64px; box-sizing: border-box;
  border: 0; border-top: 1px solid var(--line-soft); background: none; text-align: left; color: var(--ink);
}
.home-result:first-child { border-top: 0; }
button.home-result:hover { background: var(--ground); }
.home-result-score { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.home-result-score span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* Klub: rooms as rows in one card. */
.vc-room-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.vc-room-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vc-room-name { display: flex; align-items: center; gap: 8px; }
.vc-room-name strong { font-size: 15px; }
.vc-room-name .chip { padding: 2px 8px; font-size: 11px; }
.vc-room-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vc-room-meta .vc-seat { width: 10px; height: 10px; }
.vc-room-meta .vc-faces { gap: 0; }
.vc-room-meta .vc-face { width: 24px; height: 24px; margin-left: -4px; border: 2px solid var(--surface); font-size: 10px; }
.vc-room-row > .btn { min-width: 100px; min-height: 42px; justify-content: center; }
.vc-rooms > h2 { padding-bottom: 6px; }
@media (max-width: 640px) {
  .vc-partner { flex-direction: column; align-items: stretch; }
  .vc-partner .vc-partner-action, .vc-partner .vc-partner-action .btn { width: 100%; justify-content: center; }
}

/* Phone top bar: the brand on Asosiy, the page's name everywhere else. */
.nav-title { display: none; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
@media (max-width: 899px) {
  .nav-student.has-title .brand { display: none; }
  .nav-student.has-title .nav-title { display: block; margin-right: auto; }
  main[data-screen="mocks"] .page-head h1, main[data-screen="writing"] .page-head h1,
  main[data-screen="speak"] .page-head h1, main[data-screen="rank"] .page-head h1,
  main[data-screen="profile"] .page-head h1 { display: none; }
  main[data-screen="speak"] .page-head .muted, main[data-screen="rank"] .page-head .muted { font-size: 14px; }
}
@media (max-width: 640px) {
  .vc-partner { gap: 14px; }
  .vc-partner .vc-partner-text { flex: none; }
  .vc-partner h2 { font-size: 20px; }
}
@media (max-width: 899px) {
  main[data-screen="mocks"] > .page-head, main[data-screen="writing"] > .page-head,
  main[data-screen="profile"] > .page-head { display: none; }
}
/* Teacher menu on a phone: brand, two links and Sign out on one line. */
@media (max-width: 700px) {
  .nav-staff { gap: 8px; }
  .nav-staff .brand { font-size: 16px; }
  .nav-staff .nav-links { margin-left: 0; gap: 0; }
  .nav-staff .nav-link { padding: 8px 8px; font-size: 13px; }
  .nav-staff .avatar { display: none; }
  .nav-staff .nav-right { gap: 6px; flex-wrap: nowrap; }
  .nav-staff .btn-sm { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .nav-staff .brand { display: none; }
}

/* ================================================================ games */

.ch-tabs.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; }
.home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-tile { padding: 14px 4px; min-height: 96px; font-size: 13px; }
.home-tile-icon.is-rose { background: #fff1f2; color: #e11d48; }
@media (max-width: 380px) { .home-tile-icon { width: 38px; height: 38px; } .home-tile { font-size: 12px; } }

.gm-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.gm-card-head { display: flex; align-items: center; gap: 12px; }
.gm-card-head h2 { font-size: 18px; }
.gm-card p { font-size: 14px; color: #475569; line-height: 1.5; }
.gm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gm-card-foot .btn { min-height: 44px; }
.gm-today { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gm-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center; }
.gm-icon svg { width: 22px; height: 22px; }
.gm-icon.big { width: 60px; height: 60px; border-radius: 16px; }
.gm-icon.big svg { width: 30px; height: 30px; }
.gm-icon.is-indigo { background: var(--indigo-50); color: var(--indigo-600); }
.gm-icon.is-gold { background: var(--premium-tint); color: var(--premium-text); }
.gm-icon.is-green { background: var(--green-bg); color: var(--green); }

.gm-leaders .gm-leaders-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.gm-leaders .link-more { margin: 0; }
.gm-rank-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.gm-rank-row.is-you { background: var(--indigo-50); }
.gm-rank { width: 22px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gm-rank-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gm-rank-points { font-weight: 800; font-variant-numeric: tabular-nums; }
.gm-empty { padding: 4px 16px 16px; font-size: 14px; }
.gm-you { font-size: 14px; text-align: center; }
.seg-sm { max-width: 280px; }
.seg-sm .seg-btn { height: 36px; font-size: 14px; }

/* A game in progress */
.gm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gm-progress { font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gm-score { font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.gm-score span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.gm-bar { height: 6px; border-radius: var(--radius-pill); background: var(--indigo-50); overflow: hidden; }
.gm-bar span { display: block; height: 100%; background: var(--indigo-600); border-radius: inherit; transition: width .2s linear; }
.gm-summary { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px; text-align: center; }
.gm-summary h2 { font-size: 22px; }
.gm-big { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.gm-big span { font-size: 16px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.gm-counted { font-weight: 700; color: var(--green); }
.gm-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; width: 100%; max-width: 420px; }
.gm-actions .btn { justify-content: center; }

.eh-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.eh-prompt { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--indigo-600); }
.eh-sentence { display: flex; flex-wrap: wrap; gap: 8px; }
.eh-word {
  padding: 8px 12px; min-height: 44px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 18px; font-weight: 600;
}
.eh-word:not(:disabled):hover { border-color: var(--indigo-500); background: var(--indigo-50); }
.eh-word:disabled { cursor: default; }
.eh-word.is-picked { border-color: var(--indigo-600); background: var(--indigo-50); color: var(--indigo-700); }
.eh-word.is-error { border-color: var(--red); background: var(--red-bg); color: var(--red); text-decoration: line-through; }
.eh-word.is-miss { border-color: var(--amber); background: var(--amber-bg); }
.eh-options { display: grid; gap: 8px; }
.eh-option { justify-content: center; min-height: 48px; font-size: 16px; }
.eh-reveal { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.eh-reveal.is-right { border-color: #86efac; background: var(--green-bg); }
.eh-reveal.is-wrong { border-color: #fecaca; background: var(--red-bg); }
.eh-reveal strong { font-size: 17px; }
.eh-fixed { font-size: 17px; font-weight: 600; }

.dl-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.dl-player { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.dl-av { width: 48px; height: 48px; border-radius: 50%; position: relative; display: grid; place-items: center; background: var(--indigo-100); color: var(--indigo-700); font-weight: 800; }
.dl-av.is-premium { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--premium); }
.dl-name { max-width: 100%; font-weight: 600; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; gap: 3px; justify-content: center; }
.dl-score { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dl-player.is-me .dl-score { color: var(--indigo-600); }
.dl-vs { font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; }
.dl-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.dl-question { font-size: 19px; font-weight: 700; line-height: 1.35; }
.dl-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dl-option {
  position: relative; min-height: 60px; padding: 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 16px; font-weight: 700;
}
.dl-option:not(:disabled):hover { border-color: var(--indigo-500); background: var(--indigo-50); }
.dl-option:disabled { cursor: default; }
.dl-option.is-picked { border-color: var(--indigo-600); background: var(--indigo-50); }
.dl-option.is-right { border-color: var(--green); background: var(--green-bg); color: #15803d; }
.dl-option.is-wrong { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.dl-opp-mark { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; display: grid; place-items: center; }
.dl-status { text-align: center; font-weight: 700; color: var(--ink-soft); min-height: 22px; }

/* Taboo inside a room */
.tb-start { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tb-start .muted { font-size: 13px; }
.tb-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-color: #fecdd3; }
.tb-head { display: flex; justify-content: space-between; align-items: center; }
.tb-turn { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.tb-clock { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: #e11d48; }
.tb-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px; border-radius: 12px; background: #fff1f2; }
.tb-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9f1239; }
.tb-word { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.tb-taboo { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tb-taboo span { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid #fecdd3; color: #be123c; font-weight: 600; text-decoration: line-through; }
.tb-guess { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tb-buzz { background: #e11d48; border-color: #e11d48; }
.tb-buzz:hover:not(:disabled) { background: #be123c; }
.tb-scores { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-scores span { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--ground); font-size: 13px; }
.tb-scores span.is-me { background: var(--indigo-50); color: var(--indigo-700); }
.tb-stop { align-self: flex-start; margin: 0; font-size: 13px; }
.ch-system { align-self: center; max-width: 92%; text-align: center; font-size: 13px; font-weight: 600; color: #9f1239; background: #fff1f2; padding: 5px 12px; border-radius: var(--radius-pill); }

/* Word Sprint: a teacher's room and the live vocabulary race in it */
.vr-units { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.vr-unit-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer;
}
.vr-unit-row input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--indigo-600); }
.vr-unit-row.is-on { border-color: var(--indigo-600); background: var(--indigo-50); }
.vr-unit-num { flex: 0 0 22px; text-align: center; font-weight: 800; color: var(--indigo-600); }
.vr-unit-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-unit-count { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.vr-total { text-align: center; }

.vr-code-banner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px; border-radius: var(--radius); background: var(--indigo-50); text-align: center;
}
.vr-code-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.vr-code { font-size: 40px; font-weight: 800; letter-spacing: .14em; color: var(--indigo-700); }

.vr-roster { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.vr-roster-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.vr-roster-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.vr-track-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vr-status-row { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 2px; font-size: 12.5px; color: var(--ink-soft); }

/* One shared lane for the whole class instead of a row per student -- the
   track stays a fixed height no matter how many students are racing, so
   nobody has to scroll to find themselves (vrJitterFor spreads runners onto
   different vertical slots when several land at a similar progress %). */
.vr-shared-track {
  position: relative; height: 130px; border-radius: var(--radius);
  background: var(--ground); overflow: hidden; margin: 8px 0;
}
.vr-shared-track::after { content: ''; position: absolute; right: 6px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--amber); }
.vr-runner { position: absolute; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); transition: left .3s ease, top .3s ease; }
.vr-chip {
  position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 11px; color: #fff; background: var(--indigo-600);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18); overflow: hidden;
}
/* .av-pic is `position: absolute; inset: 0` site-wide, sized to its nearest
   positioned ancestor -- without .vr-chip being `position: relative` this
   escapes to the page's containing block and covers the whole screen. */
.vr-chip img.av-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vr-chip-glyph { background: none; box-shadow: none; font-size: 24px; }

/* Finishers peel off the shared track into this ranked list, oldest finish
   first -- a fixed, scrollable height so it never grows past the card no
   matter how many students have finished. */
.vr-finish-head {
  margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 13px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em;
}
.vr-finish-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; margin-top: 8px; padding: 3px 6px; margin-inline: -6px; }
.vr-finish-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 5px 4px; border-radius: 8px; }
.vr-finish-rank { width: 22px; text-align: center; font-weight: 800; color: var(--ink-soft); }
.vr-finish-rank.is-medal { font-size: 15px; }
.vr-finish-chip {
  position: relative; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  display: grid; place-items: center; font-weight: 800; font-size: 10px; color: #fff; background: var(--indigo-600);
}
.vr-finish-chip img.av-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vr-finish-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-finish-score { flex: 0 0 auto; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Track & Field literally shows a runner, so a student's real photo (when
   they have one) appears there; the other styles show a vehicle/animal
   glyph instead of a person. */
.vr-style-kart .vr-chip-glyph, .vr-style-rocket .vr-chip-glyph, .vr-style-animal .vr-chip-glyph { background: none; box-shadow: none; }
.vr-style-rocket .vr-shared-track { background: #10142b; }
.vr-style-rocket .vr-shared-track::after { background: #6366f1; }
.vr-style-animal .vr-shared-track { background: #e7f5e1; }

@keyframes vr-bob { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-4px); } }
.vr-style-track .vr-runner { animation: vr-bob .4s ease-in-out infinite; }

/* A student sees the same track under their own question/result, sized down
   so it doesn't dominate the screen in a big class. Scrolling on one axis
   forces the browser to clip the other too, so a runner circle near the
   very edge (it's centered on `left`, so it can straddle the boundary)
   would otherwise get sliced -- the padding/margin pair below gives that
   overflow somewhere to go before the scroll container's edge clips it. */
.vr-mini-track .vr-track-head h2 { font-size: 16px; }
.vr-mini-track .vr-shared-track { height: 100px; }
.vr-mini-track .vr-runner { width: 28px; height: 28px; }
.vr-mini-track .vr-finish-list { max-height: 200px; padding: 3px 14px; margin-inline: -14px; }

.vr-style-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.vr-style-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 12px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.vr-style-card.is-on { border-color: var(--indigo-600); background: var(--indigo-50); }
.vr-style-card .vr-style-glyph { font-size: 22px; }
.vr-style-card b { font-size: 13px; }
.vr-style-desc { text-align: center; margin-top: 2px; }

.vr-join-form { display: flex; gap: 10px; flex-wrap: wrap; }
.vr-code-input {
  flex: 1; min-width: 0; font-size: 26px; font-weight: 800; letter-spacing: .22em; text-align: center;
  text-transform: uppercase; padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.vr-code-input:focus { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 3px var(--indigo-100); }

.vr-missed-head { font-size: 14px; font-weight: 700; margin-top: 4px; }
.vr-missed { list-style: none; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; }
.vr-missed li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; border-radius: 8px; background: var(--ground); font-size: 14px; }

/* ================================================================ logo */

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--indigo-600); text-decoration: none; }
.logo-mark { width: 34px; height: 34px; flex: 0 0 34px; color: var(--indigo-600); }
.logo-words { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.logo-name { font-family: "Sora", "Inter", system-ui, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.logo-name span { color: var(--indigo-600); }
.logo-family { font-family: "Sora", "Inter", system-ui, sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: 0.42em; color: var(--premium-text); margin-top: 3px; }
.logo-tagline { font-family: "Sora", "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #334155; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; }
.logo-tagline::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--indigo-600); }
.nav-student.has-title .brand { display: inline-flex; }
@media (max-width: 899px) {
  /* On a phone the page name takes the brand's place; the mark stays. */
  .nav-student.has-title .brand .logo-words { display: none; }
  .nav-student.has-title .brand { margin-right: 4px; }
  .nav-student .logo-mark { width: 30px; height: 30px; flex-basis: 30px; }
}
@media (max-width: 380px) {
  .nav-staff .brand { display: inline-flex; }
  .nav-staff .brand .logo-words { display: none; }
}

/* Large lockup on the landing and sign-in pages */
.logo-lockup { display: inline-flex; align-items: center; gap: 16px; text-align: left; }
.logo-lockup .logo-mark { width: 76px; height: 76px; flex-basis: 76px; }
.logo-lockup .logo-name { font-size: 34px; }
.logo-lockup .logo-family { font-size: 12px; margin-top: 5px; }
.hero .logo-lockup { margin-bottom: 28px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.auth-logo .logo-lockup .logo-mark { width: 60px; height: 60px; flex-basis: 60px; }
.auth-logo .logo-lockup .logo-name { font-size: 26px; }
@media (max-width: 420px) {
  .logo-lockup { gap: 12px; }
  .logo-lockup .logo-mark { width: 60px; height: 60px; flex-basis: 60px; }
  .logo-lockup .logo-name { font-size: 27px; }
  .logo-tagline { font-size: 10.5px; }
}

/* ---------------------------------- Home: speaking and writing side by side */

.home-skill {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
  padding: 12px 0 2px; border: 0; border-top: 1px solid var(--line-soft); background: none;
  text-align: left; color: var(--ink);
}
.home-label + .home-skill { border-top: 0; padding-top: 4px; }
.home-skill:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 4px; border-radius: 8px; }
.home-skill-head { display: flex; align-items: center; gap: 10px; }
.home-skill-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-right: auto; }
.home-skill-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--indigo-50); color: var(--indigo-600); }
.home-skill-icon svg { width: 16px; height: 16px; }
.home-skill-icon.is-green { background: var(--green-bg); color: var(--green); }
.home-skill-score { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.home-skill-score span { font-size: 14px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.home-skill-none { font-size: 14px; }
.home-bar.is-empty { background: var(--ground-2); }
.home-skill .home-level-foot { font-size: 12px; }
.home-skill:has(.is-green) .home-bar span { background: var(--green); }

.home-start-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-start-buttons .btn { justify-content: center; min-height: 56px; font-size: 16px; padding-left: 10px; padding-right: 10px; }
.home-start-buttons .btn svg { width: 18px; height: 18px; }
.btn-writing { background: var(--green); border-color: var(--green); }
.btn-writing:hover:not(:disabled) { background: #15803d; border-color: #15803d; }
.home-tiles.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------- install */
.in-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.in-card h2 { font-size: 17px; }
.in-card p { line-height: 1.55; }
.in-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.in-steps li { counter-increment: step; display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.in-steps li::before {
  content: counter(step); flex: 0 0 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--indigo-50); color: var(--indigo-700); font-weight: 800; font-size: 14px;
}
.in-note { font-size: 13px; }
.in-done { font-weight: 700; color: var(--green); }
.in-other { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.in-other summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.in-other .in-steps { margin-top: 12px; }
.in-share { display: inline-grid; place-items: center; vertical-align: -4px; color: var(--indigo-600); }
.in-card .btn svg, .menu-icon svg { flex: none; }

/* ==========================================================================
   Chat rooms, voice messages and the speaking-room stage (Oct 2026)

   Messenger conventions students already know: the other person's bubble
   white on a cool grey ground with their face beside it, your own bubble in
   the brand indigo on the right, a voice message as a play button and a
   waveform. Speaking rooms sit on a deep indigo "stage" with a seat for
   everyone, the empty seats drawn too.
   ========================================================================== */

:root {
  --chat-ground: #eef1f8;
  --chat-mine: var(--indigo-600);
  --stage-1: #1b1a4a;
  --stage-2: #2b2a78;
  --stage-3: #3d36b8;
  --lvl-all: #475569;  --lvl-all-bg: #eef2f7;
  --lvl-b1: #0f766e;   --lvl-b1-bg: #d5f5ef;
  --lvl-b2: #4338ca;   --lvl-b2-bg: #e3e7ff;
  --lvl-c1: #b4235a;   --lvl-c1-bg: #fde4ec;
}

/* ---------- level badges ---------- */
.cx-lvl {
  display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 8px;
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--lvl-all); background: var(--lvl-all-bg);
}
.cx-lvl.is-big { width: 44px; height: 44px; border-radius: 14px; font-size: 14px; flex: none; }
.cx-lvl.lvl-b1 { color: var(--lvl-b1); background: var(--lvl-b1-bg); }
.cx-lvl.lvl-b2 { color: var(--lvl-b2); background: var(--lvl-b2-bg); }
.cx-lvl.lvl-c1 { color: var(--lvl-c1); background: var(--lvl-c1-bg); }

.cx-section {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.cx-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--indigo-600); color: #fff; font-size: 11px; letter-spacing: 0;
}

/* ---------- rooms list ---------- */
.cx-intro {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap;
  padding: 20px 22px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.cx-intro > div { flex: 1 1 280px; min-width: 0; }
.cx-intro h2 { font-size: 20px; }
.cx-intro p { margin-top: 4px; font-size: 14px; }
.cx-intro .btn svg { width: 18px; height: 18px; vertical-align: -4px; }
.cx-locked { color: var(--premium-text); font-weight: 600; font-size: 13px !important; }

.cx-create { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; }
.cx-create-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cx-create-head h3 { font-size: 17px; }
.cx-create .field span { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.cx-segs { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-seg {
  padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px;
}
.cx-seg.is-on { background: var(--indigo-600); border-color: var(--indigo-600); color: #fff; }
.cx-icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft);
}
.cx-icon-btn:hover { background: var(--ground); color: var(--ink); }
.cx-icon-btn svg { width: 20px; height: 20px; }

.cx-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.cx-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.cx-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cx-seatline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cx-seatline b { color: var(--ink); }
.cx-seatdots { display: inline-flex; gap: 3px; }
.cx-seatdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.cx-seatdots i.is-taken { background: var(--green); }
.cx-card-name { font-size: 17px; overflow-wrap: anywhere; }
.cx-card-topic {
  font-size: 14px; color: var(--ink-soft); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cx-card-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.cx-card-foot .btn { margin-left: auto; flex: none; }
.cx-hostline { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.cx-host-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cx-host-av, .cx-stack-av {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  background: var(--indigo-100); color: var(--indigo-700);
}
.cx-stack { display: inline-flex; padding-left: 6px; }
.cx-stack-av { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.cx-stack-more {
  margin-left: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ground); color: var(--ink-soft); font-size: 10px; font-weight: 800; box-shadow: 0 0 0 2px var(--surface);
}
.cx-host-av.is-premium, .cx-stack-av.is-premium { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--premium); }
.cx-none {
  padding: 18px; border-radius: var(--radius); border: 1.5px dashed var(--line);
  color: var(--ink-soft); font-size: 14px; text-align: center;
}

.cx-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cx-tile {
  display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0;
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.cx-tile:hover { border-color: var(--indigo-200); box-shadow: var(--shadow); }
.cx-tile:focus-visible, .cx-seg:focus-visible, .cx-round:focus-visible, .cx-voice:focus-visible, .cx-seat:focus-visible {
  outline: 2px solid var(--indigo-500); outline-offset: 2px;
}
.cx-tile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cx-tile-name { font-weight: 700; }
.cx-tile-count { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cx-chev { color: var(--ink-faint); display: grid; }
.cx-chev svg { width: 18px; height: 18px; }

/* ---------- inside a room ---------- */
.cx-room {
  display: flex; flex-direction: column; overflow: hidden;
  height: min(calc(100dvh - 150px), 860px); min-height: 440px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--chat-ground); box-shadow: var(--shadow);
}
main[data-screen="speak"]:has(.cx-room) { max-width: 820px; }
.cx-head {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.cx-head-text { flex: 1; min-width: 0; }
.cx-head h2 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-head-sub {
  display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0;
  font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden;
}
.cx-head-sub .cx-lvl { height: 18px; min-width: 28px; font-size: 11px; padding: 0 6px; }
.cx-head-topic { overflow: hidden; text-overflow: ellipsis; }
.cx-close-btn { flex: none; color: var(--red); }

.cx-confirm, .cx-seat-menu {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none;
  padding: 10px 14px; background: var(--red-bg); border-bottom: 1px solid #fecaca; font-size: 14px;
}
.cx-confirm span, .cx-seat-menu span { flex: 1 1 180px; font-weight: 600; }
.cx-seat-menu { background: var(--surface); border-color: var(--line); }

.cx-seats {
  display: flex; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none;
  padding: 12px 12px 10px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.cx-seats::-webkit-scrollbar { display: none; }
.cx-seat {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 62px;
  padding: 0; border: 0; background: none; color: var(--ink); font: inherit;
}
.cx-seat-av {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(145deg, var(--indigo-500), var(--indigo-700));
}
.cx-seat-av.is-premium { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--premium), 0 0 12px 2px var(--premium-glow); }
.cx-seat.is-empty .cx-seat-av { background: transparent; border: 1.5px dashed #c9cfdb; color: #b3bac8; }
.cx-seat.is-empty .cx-seat-av svg { width: 18px; height: 18px; }
.cx-seat.is-open .cx-seat-av { box-shadow: 0 0 0 3px var(--red); }
button.cx-seat { cursor: pointer; }
.cx-seat-name {
  max-width: 62px; font-size: 11px; font-weight: 600; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-seat.is-empty .cx-seat-name { color: var(--ink-faint); font-weight: 500; }
.cx-host-tag {
  position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--premium); color: #fff;
  box-shadow: 0 0 0 2px var(--surface);
}
.cx-host-tag svg { width: 12px; height: 12px; }
.cx-inline-alert { margin: 8px 12px 0; flex: none; }

.cx-room .cx-msgs { flex: 1; height: auto; min-height: 0; padding: 14px 12px 6px; gap: 2px; }
.cx-foot { flex: none; padding: 8px 10px 10px; background: var(--surface); border-top: 1px solid var(--line); }
.cx-foot .ch-rules { margin: 6px 4px 0; font-size: 11px; color: var(--ink-faint); }

/* ---------- messages ---------- */
.cx-msgs { display: flex; flex-direction: column; gap: 2px; }
.cx-row { display: flex; align-items: flex-start; gap: 8px; max-width: 84%; align-self: flex-start; margin-top: 10px; }
.cx-row.is-cont { margin-top: 2px; }
.cx-row.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.cx-row .ch-av { flex: 0 0 34px; width: 34px; height: 34px; font-size: 12px; margin-top: 2px; }
.cx-face-gap { flex: 0 0 34px; }
.cx-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cx-row.is-mine .cx-col { align-items: flex-end; }
.cx-who { display: flex; align-items: center; gap: 6px; margin: 0 0 3px 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.cx-who .ch-level { font-size: 10px; padding: 0 5px; }
.cx-bubble {
  max-width: 100%; padding: 9px 13px; border-radius: 18px 18px 18px 6px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 1.5px rgba(15, 23, 42, .08);
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; font-size: 15px;
}
.cx-row.is-cont:not(.is-mine) .cx-bubble { border-top-left-radius: 6px; }
.cx-row.is-mine .cx-bubble { background: var(--chat-mine); color: #fff; border-radius: 18px 18px 6px 18px; }
.cx-row.is-mine.is-cont .cx-bubble { border-top-right-radius: 6px; }
.cx-bubble.is-premium { background: #fffaf0; box-shadow: 0 0 0 1px #f3dc94; }
.cx-bubble.is-voice { padding: 6px 12px 6px 6px; }
.cx-bubble .ch-deleted { color: inherit; opacity: .7; }
.cx-meta { display: flex; align-items: center; gap: 4px; margin: 2px 6px 0; min-height: 16px; }
.cx-meta .ch-time { font-size: 11px; color: var(--ink-faint); }
.cx-meta .ch-flag { margin: 0; display: grid; opacity: 0; transition: opacity .12s ease; }
.cx-meta .ch-flag svg { width: 12px; height: 12px; }
.cx-row:hover .ch-flag, .ch-flag:focus-visible { opacity: 1; }
@media (hover: none) { .cx-meta .ch-flag { opacity: .55; } }
.cx-col .ch-report { width: min(320px, 70vw); }

/* Voice message */
.cx-voice {
  display: flex; align-items: center; gap: 10px; min-width: 190px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.cx-play {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--indigo-600); color: #fff;
}
.cx-play svg { width: 16px; height: 16px; }
.cx-row.is-mine .cx-play { background: #fff; color: var(--indigo-600); }
.cx-voice.is-loading .cx-play { animation: vc-blink 1s infinite; }
.cx-wave { display: flex; align-items: center; gap: 2px; height: 26px; flex: 1; min-width: 96px; }
.cx-wave i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: #c3c9e8; transition: background .1s linear; }
.cx-wave i.is-done { background: var(--indigo-600); }
.cx-row.is-mine .cx-wave i { background: rgba(255, 255, 255, .45); }
.cx-row.is-mine .cx-wave i.is-done { background: #fff; }
.cx-dur { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

/* Composer */
.cx-compose { display: flex; align-items: center; gap: 8px; }
.cx-compose input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font: inherit; font-size: 15px; background: var(--ground); color: var(--ink);
}
.cx-compose input:focus { outline: none; border-color: var(--indigo-500); background: var(--surface); box-shadow: 0 0 0 3px var(--indigo-50); }
.cx-round {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--indigo-600); color: #fff;
}
.cx-round svg { width: 20px; height: 20px; }
.cx-round:disabled { opacity: .5; cursor: default; }
.cx-mic { background: var(--indigo-50); color: var(--indigo-600); }
.cx-mic:hover { background: var(--indigo-100); }
.cx-cancel { background: var(--ground); color: var(--ink-soft); }
.cx-recbar {
  flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border-radius: var(--radius-pill); background: var(--red-bg); color: var(--red);
}
.cx-recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; animation: vc-blink 1s infinite; }
.cx-rectime { font-weight: 800; font-variant-numeric: tabular-nums; }
.cx-reclabel { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-reclimit { margin-left: auto; font-size: 12px; opacity: .75; white-space: nowrap; }

/* The chat inside a call uses the same bubbles on the same ground. */
.ch-call .cx-msgs { background: var(--chat-ground); border-radius: 12px; padding: 4px 10px 10px; }
.ch-call .ch-list-call { height: 220px; }

@media (max-width: 899px) {
  .cx-room { height: calc(100dvh - 56px - 40px - env(safe-area-inset-bottom, 0px)); min-height: 420px; }
}
@media (max-width: 640px) {
  main[data-screen="speak"]:has(.cx-room) { padding: 8px 0 0; }
  .cx-room { border-radius: 0; border-left: 0; border-right: 0; height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px)); }
  .cx-row { max-width: 90%; }
  .cx-reclimit { display: none; }
  .cx-card-foot { flex-wrap: wrap; }
}

/* ---------- speaking rooms: lobby cards ---------- */
.vl-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.vl-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.vl-card.is-live { border-color: #c7d2fe; background: linear-gradient(180deg, #f7f8ff, var(--surface) 60%); }
.vl-card-top { display: flex; align-items: center; gap: 8px; }
.vl-live {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--red-bg); color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .05em;
}
.vl-live span { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: vc-blink 1.2s infinite; }
.vl-count { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.vl-name { font-size: 17px; }
.vl-seats { display: flex; gap: 6px; flex-wrap: wrap; }
.vl-seat {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px dashed #c9cfdb; font-size: 11px; font-weight: 800; color: #fff;
}
.vl-seat.is-taken { border: 0; background: linear-gradient(145deg, var(--indigo-500), var(--indigo-700)); }
.vl-seat.is-premium { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--premium); }
.vl-seat.is-gold { border-color: var(--premium); color: var(--premium); }
.vl-seat.is-gold svg { width: 14px; height: 14px; }
.vl-seat.is-gold.is-taken { color: #fff; }
.vl-card .btn svg { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- speaking rooms: the stage ---------- */
.vr-stage {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px 18px 16px; border-radius: 22px; color: #fff;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(129, 140, 248, .35), transparent 60%),
    linear-gradient(165deg, var(--stage-1), var(--stage-2) 55%, var(--stage-3));
  box-shadow: var(--shadow-lg);
}
.vr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vr-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.vr-sub { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.vr-sub svg { width: 14px; height: 14px; }
.vr-top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vr-rec {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(239, 68, 68, .2); color: #fecaca; font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
.vr-rec span { width: 7px; height: 7px; border-radius: 50%; background: #f87171; animation: vc-blink 1.2s infinite; }
.vr-timer { font-size: 24px; color: #fff; }
.vr-timer.is-low { color: #fca5a5; }

.vr-stage .vc-topic {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; color: #fff;
  backdrop-filter: blur(6px);
}
.vr-stage .vc-topic-label { color: #c7d2fe; }
.vr-stage .vc-topic-text { font-size: 17px; }
.vr-stage .vc-args ul, .vr-stage .section-title { color: rgba(255, 255, 255, .75); }
.vr-stage .vc-topic .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); background: transparent; }

.vr-seats { display: grid; gap: 14px 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px 0; }
.vr-stage.is-pair .vr-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; margin: 0 auto; width: 100%; }
.vr-stage .vc-person { padding: 6px 4px; background: none; border: 0; gap: 4px; }
.vr-stage .vc-avatar {
  position: relative; width: 74px; height: 74px; font-size: 24px;
  background: linear-gradient(145deg, #7c83f7, #4f46e5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}
.vr-stage .vc-person.is-me .vc-avatar { background: linear-gradient(145deg, #34d399, #059669); }
.vr-stage .vc-person.is-talking .vc-avatar {
  box-shadow: 0 0 0 3px #4ade80, 0 0 22px 6px rgba(74, 222, 128, .45);
}
.vr-stage .vc-person.is-talking .vc-avatar.is-premium { box-shadow: 0 0 0 3px #4ade80, 0 0 22px 6px rgba(74, 222, 128, .45); }
.vr-stage .vc-person.is-empty .vc-avatar {
  background: rgba(255, 255, 255, .04); border: 1.5px dashed rgba(255, 255, 255, .28); box-shadow: none; color: rgba(255, 255, 255, .45);
}
.vr-stage .vc-person.is-empty .vc-avatar svg { width: 22px; height: 22px; }
.vr-stage .vc-person-name { color: #fff; font-size: 14px; }
.vr-stage .vc-person.is-empty .vc-person-name { color: rgba(255, 255, 255, .45); font-weight: 500; font-size: 13px; }
.vr-stage .vc-person-meta { color: rgba(255, 255, 255, .6); }
.vr-stage .vc-person-state { color: #fde68a; }
.vr-stage .lb-you { background: rgba(255, 255, 255, .16); color: #fff; }
.vr-stage .gold-name { background: linear-gradient(100deg, #ffd769, #ffe9a8 45%, #f5c242); -webkit-background-clip: text; background-clip: text; }
.vr-muted {
  position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 0 0 2px var(--stage-2);
}
.vr-muted svg { width: 13px; height: 13px; }
.vr-muted::after { content: ''; position: absolute; width: 16px; height: 2px; background: #fff; transform: rotate(-45deg); }
.vr-alone { text-align: center; font-size: 14px; color: rgba(255, 255, 255, .7); margin-top: -6px; }

.vr-stage .vr-controls {
  position: static; margin: 4px auto 0; padding: 0; gap: 22px;
  background: none; border: 0; box-shadow: none;
}
.vr-btn {
  min-width: 0; padding: 0; gap: 6px; border: 0; background: none; color: rgba(255, 255, 255, .85);
  font-size: 12px; font-weight: 600;
}
.vr-btn-ic {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; transition: background .12s ease;
}
.vr-btn:hover .vr-btn-ic { background: rgba(255, 255, 255, .22); }
.vr-btn .vr-btn-ic svg { width: 24px; height: 24px; }
.vr-btn.is-on { background: none; border: 0; color: #fde68a; }
.vr-btn.is-on .vr-btn-ic { background: #fff; color: var(--red); }
.vr-btn.vc-leave { background: none; border: 0; }
.vr-btn.vc-leave .vr-btn-ic { background: #ef4444; }
.vr-btn.vc-leave:hover .vr-btn-ic { background: #dc2626; }
.vr-btn:focus-visible { outline: none; }
.vr-btn:focus-visible .vr-btn-ic { box-shadow: 0 0 0 3px #c7d2fe; }

@media (max-width: 560px) {
  .vr-stage { margin: 0 -8px; padding: 16px 12px 14px; border-radius: 18px; }
  .vr-stage .vc-avatar { width: 64px; height: 64px; font-size: 21px; }
  .vr-seats { gap: 12px 4px; }
  .vr-stage .vc-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vr-stage.is-pair .vc-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-recdot, .vr-rec span, .vl-live span, .cx-voice.is-loading .cx-play { animation: none; }
}

/* The three Klub tabs share the width evenly and never wrap a label. */
.ch-tabs.is-three { display: grid; width: 100%; }
.ch-tabs.is-three .ch-tab { justify-content: center; white-space: nowrap; min-width: 0; }
@media (max-width: 420px) { .ch-tabs.is-three .ch-tab { padding: 8px 4px; font-size: 14px; } }

/* Stage seats: rows of three, the last row centred; no blank lines under names. */
.vr-stage .vc-people.vr-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 0; }
.vr-stage .vr-seats .vc-person { flex: 0 0 33.333%; min-width: 0; }
.vr-stage.is-pair .vr-seats .vc-person { flex-basis: 50%; }
.vr-stage .vc-person-state:empty { display: none; }
.vr-stage .vc-person-meta { min-height: 0; }
.vr-stage .vc-person-meta:empty { display: none; }
.ch-tab svg { flex: none; }
.vl-seats { gap: 4px; }
.vl-seat { width: 28px; height: 28px; }
@media (min-width: 700px) {
  .vr-stage:not(.is-pair) .vr-seats .vc-person { flex-basis: 20%; }
}

/* Writing check: a part pasted without its task text. */
.wc-noprompt { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--amber-text); }
.wc-noprompt[hidden] { display: none; }

/* ==========================================================================
   AI Ustoz — the live voice coach. A soft gradient "orb" that breathes while
   the student talks (--lvl comes from the microphone level) and glows while
   the coach speaks.
   ========================================================================== */
.ch-tabs.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px; }
@media (max-width: 520px) {
  .ch-tabs.is-four .ch-tab { font-size: 12.5px; padding: 8px 2px; }
  .ch-tabs.is-four .ch-tab svg { display: none; }
}

.ai-card { padding: 22px; }
.ai-gate { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.ai-gate h2 { font-size: 21px; }
.ai-points { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.ai-notice {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
  background: var(--amber-bg); color: var(--amber-text); border: 1px solid #fde68a;
}
.ai-tick { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; cursor: pointer; }
.ai-tick input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--indigo-600); }

.ai-stage {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 18px 18px; border-radius: 22px; color: #fff; text-align: center;
  background:
    radial-gradient(90% 60% at 50% 30%, rgba(129, 140, 248, .35), transparent 70%),
    linear-gradient(165deg, var(--stage-1), var(--stage-2) 55%, var(--stage-3));
  box-shadow: var(--shadow-lg);
}
.ai-top { align-self: stretch; display: flex; justify-content: flex-end; min-height: 22px; }
.ai-left { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }
.ai-orb {
  --lvl: 0;
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #c7d2fe, #818cf8 45%, #4f46e5 75%);
  box-shadow: 0 0 calc(18px + var(--lvl) * 40px) calc(4px + var(--lvl) * 14px) rgba(165, 180, 252, .55);
  transform: scale(calc(1 + var(--lvl) * .12));
  transition: transform .08s linear, box-shadow .08s linear;
}
.ai-orb span { width: 46%; height: 46%; border-radius: 50%; background: rgba(255, 255, 255, .22); filter: blur(2px); }
.ai-orb.is-small { width: 64px; height: 64px; margin-bottom: 4px; }
.ai-stage.act-speaking .ai-orb { animation: ai-talk 1.1s ease-in-out infinite; background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 45%, #d97706 80%); box-shadow: 0 0 40px 12px rgba(251, 191, 36, .45); }
.ai-stage.act-thinking .ai-orb { animation: ai-think 1.4s ease-in-out infinite; }
.ai-stage.is-idle .ai-orb, .ai-stage.is-ended .ai-orb { filter: saturate(.7) brightness(.95); }
@keyframes ai-talk { 50% { transform: scale(1.08); } }
@keyframes ai-think { 50% { opacity: .7; transform: scale(.96); } }
.ai-status { min-height: 22px; font-weight: 700; font-size: 15px; color: rgba(255, 255, 255, .9); }
.ai-controls { display: flex; gap: 22px; justify-content: center; }
.ai-start { background: #fff; color: var(--indigo-700); border-color: #fff; }
.ai-start svg { width: 20px; height: 20px; vertical-align: -4px; }
.ai-hint { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .6); }

.ai-try .cx-section { margin-top: 2px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip {
  padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--indigo-200);
  background: var(--indigo-50); color: var(--indigo-700); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ai-chip:hover { background: var(--indigo-100); }
.ai-chip:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 2px; }

.ai-log { padding: 10px; }
.ai-msgs { height: auto; max-height: 52vh; background: var(--chat-ground); border-radius: 12px; padding: 4px 10px 10px; }
.ai-av { background: linear-gradient(145deg, #818cf8, #4f46e5) !important; color: #fff !important; font-size: 11px; }
.ai-pics { align-self: stretch; margin: 10px 0 4px; }
.ai-pics-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin: 0 0 6px 4px; }
.ai-pics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-pics-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--surface); }
@media (prefers-reduced-motion: reduce) {
  .ai-stage .ai-orb { animation: none !important; transition: none; }
}

/* ---- AI Ustoz: the stage the teacher fills */
.ai-gate-faces { display: flex; gap: 10px; }
.ai-gate-faces img {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: var(--shadow);
}
.ai-stage.has-scene {
  overflow: hidden; isolation: isolate;
  justify-content: space-between; gap: 0;
  padding: 0; min-height: min(74svh, 660px);
  background: #3b3128;
}
@media (min-width: 900px) { .ai-stage.has-scene { min-height: 560px; } }
.ai-scene {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  display: block; background: #3b3128 center 35% / cover no-repeat;
}
.ai-scene-top {
  align-self: stretch; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 14px 14px 30px;
  background: linear-gradient(rgba(12, 10, 30, .45), transparent);
}
.ai-scene-bottom {
  align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 60px 16px 16px;
  background: linear-gradient(transparent, rgba(12, 10, 30, .55) 35%, rgba(12, 10, 30, .78));
}
.ai-scene-bottom .ai-status { text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.ai-scene-bottom .ai-hint { color: rgba(255, 255, 255, .78); }
.ai-face-name {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 7px 12px; border-radius: 12px;
  background: rgba(15, 14, 40, .5); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ai-face-name strong { font-size: 16px; line-height: 1.2; }
.ai-face-name span { font-size: 11px; opacity: .82; letter-spacing: .02em; }
.ai-stage.has-scene .ai-left { background: rgba(15, 14, 40, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ai-stage.has-scene.is-live.act-listening { box-shadow: inset 0 0 0 3px rgba(134, 239, 172, .7), var(--shadow-lg); }
.ai-stage.has-scene.is-live.act-speaking { box-shadow: inset 0 0 0 3px rgba(253, 230, 138, .75), var(--shadow-lg); }
.ai-av-face { object-fit: cover; }
.ai-pick { position: absolute; top: 64px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ai-pick-btn {
  display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(15, 14, 40, .45); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ai-pick-btn img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ai-pick-btn.is-on { background: #fff; color: var(--indigo-700); }
.ai-pick-btn:focus-visible { outline: 3px solid #fde68a; outline-offset: 2px; }

/* ---- AI Ustoz: the robot teacher (public/robot.js) */
.ai-stage.has-robot {
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(129, 140, 248, .45), transparent 70%),
    linear-gradient(165deg, var(--stage-1), var(--stage-2) 55%, var(--stage-3));
}
.ai-robot {
  position: absolute; inset: 0; z-index: -1;
  display: flex; align-items: center; justify-content: center;
  padding: 70px 24px 170px;
}
.ai-robot .rb { width: min(100%, 360px); height: auto; max-height: 100%; overflow: visible; }
.rb-shadow { fill: rgba(8, 6, 30, .35); }
.rb-eyes { opacity: 0; transition: opacity .12s ease; }
.rb-eyes.is-on { opacity: 1; }
.rb-blush { opacity: 0; transition: opacity .5s ease; }
.rb-light { transition: fill .5s ease; filter: drop-shadow(0 0 6px currentColor); }
.ai-stage.act-listening.is-live .rb-light { animation: rb-pulse 1.6s ease-in-out infinite; }
.rb-zzz { opacity: 0; transition: opacity .6s ease; }
.rb-zzz.is-on { opacity: .9; }
.rb-zzz.is-on text { animation: rb-zzz 2.6s ease-in-out infinite; }
.rb-zzz text:nth-child(2) { animation-delay: .35s !important; }
.rb-zzz text:nth-child(3) { animation-delay: .7s !important; }
.rb-dots circle { animation: rb-dot 1.2s ease-in-out infinite; }
.rb-dots circle:nth-child(2) { animation-delay: .2s; }
.rb-dots circle:nth-child(3) { animation-delay: .4s; }
.rb-tear { animation: rb-tear 2.2s ease-in infinite; }
.rb-heart { transform-box: fill-box; transform-origin: center; animation: rb-beat 1s ease-in-out infinite; }
@keyframes rb-pulse { 50% { opacity: .45; } }
@keyframes rb-zzz { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-6px); opacity: .5; } }
@keyframes rb-dot { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes rb-tear { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes rb-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .rb-zzz.is-on text, .rb-dots circle, .rb-tear, .rb-heart, .ai-stage .rb-light { animation: none !important; }
}
.rb-red { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.rb[data-face="angry"] .rb-red { opacity: 1; }
.rb-steam { opacity: 0; transition: opacity .3s ease; }
.rb[data-face="angry"] .rb-steam { opacity: .9; }
.rb[data-face="angry"] .rb-steam path { animation: rb-steam 1s ease-in-out infinite; }
.rb-steam path:nth-child(2) { animation-delay: .25s !important; }
@keyframes rb-steam { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-5px); opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .rb-steam path { animation: none !important; } }

/* ---- link from the sign-in screen to the parents' page (public/parent.html) */
.parent-link {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--indigo-100); background: var(--indigo-50);
  color: var(--ink); text-decoration: none;
}
.parent-link:hover { border-color: var(--indigo-200); }
.parent-link > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; text-align: left; }
.parent-link small { color: var(--ink-soft); }
.parent-link-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--indigo-600); flex: none; }

/* ---- Sign in with Google */
.google-sign { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.google-btn { display: flex; justify-content: center; min-height: 44px; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--ink-faint, #94a3b8); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line, #e2e8f0); }

/* Vocabulary test → "Uyga vazifani topshirish" */
.vr-hw-option { border-color: var(--indigo-200); background: var(--indigo-50); }
.vr-hw-units { max-height: none; }
.vr-hw-unit { cursor: pointer; text-align: left; font: inherit; }
.vr-hw-unit:disabled { opacity: .6; cursor: wait; }
.vr-hw-pct { min-width: 92px; text-align: right; font-weight: 700; font-size: 14px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vr-hw-pct.is-good { color: #15803d; }
.vr-hw-pct.is-mid { color: #b45309; }
.vr-hw-pct.is-low { color: #b91c1c; }
.vr-hw-general { border-style: dashed; }
.vr-hw-saved { color: #15803d; font-weight: 700; }
.vr-hw-failed { color: #b91c1c; font-weight: 600; }
@media (max-width: 480px) { .vr-hw-unit { flex-wrap: wrap; } .vr-hw-pct { min-width: 0; } }
.vr-hw-general { flex-wrap: wrap; }
.vr-hw-general .vr-unit-count { white-space: normal; flex: 1 1 100%; order: 3; }

/* ===================== Message box (Xabarlar) ===================== */
.nav-right { gap: 10px; }
.nav-inbox {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); padding: 0;
  display: grid; place-items: center; position: relative; background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.nav-inbox svg { width: 18px; height: 18px; }
.nav-inbox:hover, .nav-inbox.is-current { color: var(--indigo-700); border-color: var(--indigo-200); background: var(--indigo-50); }
.nav-badge {
  position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface); font-variant-numeric: tabular-nums;
}
.inbox-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--indigo-200); border-radius: 14px; background: var(--indigo-50);
  color: var(--indigo-700); font: inherit; font-weight: 700; cursor: pointer; text-align: left;
}
.inbox-banner-go { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; white-space: nowrap; }
.inbox-banner-go svg { width: 16px; height: 16px; }
.inbox-list { padding: 4px 0; }
.inbox-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--ink);
}
.inbox-row:last-child { border-bottom: 0; }
.inbox-row:hover { background: var(--ground); }
.inbox-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--indigo-50); color: var(--indigo-600); }
.inbox-ic svg { width: 20px; height: 20px; }
.inbox-ic.is-gift { background: var(--amber-bg); }
.inbox-ic.is-score { background: var(--green-bg); }
.inbox-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inbox-row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row.is-unread .inbox-row-title { font-weight: 800; }
.inbox-row-text { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-gift-tag { color: var(--amber-text); }
.inbox-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; white-space: nowrap; }
.inbox-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--indigo-600); }
.inbox-msg { display: flex; flex-direction: column; gap: 16px; }
.inbox-msg-head { display: flex; gap: 12px; align-items: flex-start; }
.inbox-msg-head h1 { font-size: 20px; line-height: 1.3; margin: 0 0 2px; text-wrap: balance; }
.inbox-msg-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }
.msg-body { line-height: 1.6; overflow-wrap: anywhere; }
.msg-body h3 { font-size: 1.25em; margin: .4em 0 .2em; }
.msg-body p, .msg-body div { margin: 0 0 .55em; }
.msg-body ul, .msg-body ol { margin: .3em 0 .6em; padding-left: 1.4em; }
.msg-body a { color: var(--indigo-600); text-decoration: underline; }
.msg-body blockquote { margin: .4em 0; padding-left: 12px; border-left: 3px solid var(--indigo-200); color: var(--ink-soft); }

/* the gift */
.gift { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 16px 18px;
  border-radius: 18px; background: linear-gradient(180deg, #fff8e6, #fff); border: 1px solid #fde68a; text-align: center; overflow: hidden; }
.gift-hint { margin: 0; color: var(--ink-soft); }
.gift-what { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); }
.gift-done { margin: 0; font-weight: 700; color: var(--green); }
.gift-btn { min-width: 220px; }
.gift-art { position: relative; width: 120px; height: 112px; }
.gift-box { position: absolute; left: 10px; right: 10px; bottom: 0; height: 70px; border-radius: 8px; background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: inset 0 -8px 0 rgba(0,0,0,.12); }
.gift-lid { position: absolute; left: 2px; right: 2px; top: 22px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #818cf8, #4f46e5); z-index: 2; transition: transform .6s cubic-bezier(.3,1.6,.5,1); }
.gift-lid::before, .gift-lid::after { content: ''; position: absolute; top: -20px; width: 26px; height: 22px; border: 6px solid #f59e0b; border-radius: 50% 50% 0 50%; }
.gift-lid::before { left: 30px; transform: rotate(-20deg); border-bottom-color: transparent; }
.gift-lid::after { right: 30px; transform: rotate(20deg) scaleX(-1); border-bottom-color: transparent; }
.gift-ribbon { position: absolute; left: 50%; width: 16px; margin-left: -8px; top: 22px; bottom: 0; background: #f59e0b; z-index: 3; }
.gift-art.is-waiting { animation: gift-wiggle 2.4s ease-in-out infinite; }
.gift-art.is-opening { animation: gift-shake .5s ease-in-out infinite; }
.gift-art.is-open .gift-lid { transform: translate(16px, -30px) rotate(24deg); }
.gift-art.is-open .gift-ribbon { top: 46px; }
@keyframes gift-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg); } 82% { transform: rotate(6deg); } 88% { transform: rotate(-4deg); } 94% { transform: rotate(2deg); } }
@keyframes gift-shake { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-5deg); } 75% { transform: translateX(4px) rotate(5deg); } }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -10px; left: calc(var(--i) * 5.5% + 2%); width: 8px; height: 12px; border-radius: 2px;
  background: hsl(calc(var(--i) * 47), 85%, 58%); animation: confetti-fall 1.8s ease-in calc(var(--i) * 0.05s) both; }
@keyframes confetti-fall { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(260px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gift-art.is-waiting, .gift-art.is-opening, .confetti i { animation: none; }
  .confetti { display: none; }
  .gift-lid { transition: none; }
}

/* score update table */
.score-change { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.score-change table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.score-change th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.score-change td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.score-change td:not(:first-child), .score-change th:not(:first-child) { text-align: right; width: 26%; }
.score-change tr.is-total td { background: var(--ground); font-weight: 600; }
.score-change td.is-up { color: var(--green); font-weight: 800; }
.score-change td.is-up::before { content: '▲ '; font-size: 10px; }
.score-change td.is-down { color: var(--red); font-weight: 800; }
.expert-badge { display: inline-block; margin: 10px auto 0; padding: 4px 12px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 13px; font-weight: 700; }
.expert-card { border-color: var(--indigo-200); }
.expert-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.expert-field input { width: 76px; }

/* ===================== English Hub Support chat ===================== */
.inbox-support {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--indigo-200); border-radius: var(--radius); color: var(--ink);
  background: linear-gradient(135deg, var(--indigo-50), #fff 70%);
}
.inbox-support:hover { border-color: var(--indigo-500); }
.inbox-support-go { color: var(--indigo-600); display: grid; place-items: center; }
.inbox-support-go svg { width: 20px; height: 20px; }
.nav-badge.is-inline { position: static; box-shadow: none; }
.sp-ava { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-600); color: #fff; }
.sp-ava .logo-mark { width: 66%; height: 66%; flex: 0 0 auto; color: #fff; }
.sp-head .sp-ava .logo-mark { color: var(--indigo-600); }
.sp-ava.is-big { flex-basis: 42px; width: 42px; height: 42px; }

.sp-chat {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: var(--surface); height: calc(100dvh - 210px); min-height: 420px; box-shadow: 0 8px 30px rgba(30, 27, 75, .06);
}
.sp-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; }
.sp-head .sp-ava { background: #fff; color: var(--indigo-600); }
.sp-head div { display: flex; flex-direction: column; line-height: 1.25; }
.sp-head span { font-size: 12.5px; opacity: .85; }
.sp-msgs {
  flex: 1; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px;
  background: radial-gradient(circle at 20% 0%, #eef2ff 0, transparent 45%), #f8fafc; overscroll-behavior: contain;
}
.sp-day { display: flex; justify-content: center; margin: 8px 0 2px; }
.sp-day span { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; }
.sp-row { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.sp-row.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.sp-bubble {
  display: flex; flex-direction: column; gap: 4px; padding: 9px 12px 6px; border-radius: 18px; font-size: 15px; line-height: 1.45;
  background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); min-width: 0;
}
.sp-row.is-mine .sp-bubble { background: var(--indigo-600); color: #fff; border-color: var(--indigo-600); border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.sp-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-meta { align-self: flex-end; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sp-row.is-mine .sp-meta { color: rgba(255,255,255,.75); }
.sp-meta .is-seen { color: #a5f3fc; font-weight: 700; }
.sp-kind { align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.18); }
.sp-shot { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; display: block; }
.sp-shot img { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; }
.sp-note { align-self: center; font-size: 12.5px; color: var(--green); background: var(--green-bg); padding: 6px 12px; border-radius: 999px; text-align: center; }
.sp-compose { border-top: 1px solid var(--line); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.sp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sp-chips::-webkit-scrollbar { display: none; }
.sp-chip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.sp-chip:hover { border-color: var(--indigo-200); }
.sp-chip.is-on { color: var(--indigo-700); background: var(--indigo-50); border-color: var(--indigo-500); }
.sp-chip.is-problem.is-on { color: #b91c1c; background: var(--red-bg); border-color: #fca5a5; }
.sp-chip.is-idea.is-on { color: var(--amber-text); background: var(--amber-bg); border-color: #fcd34d; }
.sp-chip.is-praise.is-on { color: #15803d; background: var(--green-bg); border-color: #86efac; }
.sp-input { display: flex; align-items: flex-end; gap: 8px; }
.sp-input textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 160px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 22px;
  font: inherit; font-size: 15px; line-height: 1.4; background: var(--ground); outline: none;
}
.sp-input textarea:focus { border-color: var(--indigo-500); background: var(--surface); box-shadow: 0 0 0 3px var(--indigo-100); }
.sp-attach { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; cursor: pointer; background: var(--ground); border: 1px solid var(--line); }
.sp-attach:hover { background: var(--indigo-50); }
.sp-send { flex: 0 0 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--indigo-600); color: #fff; cursor: pointer; }
.sp-send:hover { background: var(--indigo-700); }
.sp-send:disabled { opacity: .6; cursor: wait; }
.sp-send .spinner { width: 18px; height: 18px; border-color: rgba(255,255,255,.4); border-top-color: #fff; }
.sp-preview { position: relative; align-self: flex-start; }
.sp-preview img { display: block; max-height: 90px; border-radius: 10px; border: 1px solid var(--line); }
.sp-preview button { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; }
.sp-zoom { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .85); display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.sp-zoom img { max-width: 100%; max-height: 100%; border-radius: 12px; }
main.has-tabs .sp-chat { height: calc(100dvh - 250px); }
.vr-hw-book { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.vr-hw-book + .vr-hw-book { margin-top: 10px; }
.vr-hw-book.is-open { border-color: var(--indigo-200); }
.vr-hw-book-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: var(--indigo-50); font: inherit; text-align: left; cursor: pointer; color: var(--ink); flex-wrap: wrap; }
.vr-hw-book-title { flex: 1 1 0; font-weight: 700; min-width: 0; }
.vr-hw-book-meta { order: 3; flex: 1 1 100%; font-size: 13px; color: var(--ink-soft); padding-left: 2px; }
.vr-hw-book-chev { order: 2; }
.vr-hw-book-chev { display: grid; place-items: center; transition: transform .2s; color: var(--indigo-600); }
.vr-hw-book-chev svg { width: 18px; height: 18px; }
.vr-hw-book.is-open .vr-hw-book-chev { transform: rotate(90deg); }
.vr-hw-book .vr-hw-units { padding: 10px; }