/* ==========================================================
   IB Weakness Scanner — app (dashboard) UI
   GRADELY visual language (target: docs/2026-06-22-app-ui-target.md):
   Poppins + navy ink #0A2342 + primary blue #1E83E0, pill buttons,
   soft cards. Semantic colors (red/amber/green) live ONLY in report/heatmap.

   NB: the accent var is still named --indigo for historical reasons, but its
   VALUE is now Gradely blue — changing the token reskins the whole app.

   Layout: fixed LEFT SIDEBAR (~240px) + MAIN content on the right.
   One <section class="view"> is visible at a time (toggled by app.js).
   ≤700px: sidebar collapses behind a hamburger top bar.
   ========================================================== */

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

:root {
  /* PRIMARY accent = Gradely blue (var name kept as --indigo) */
  --indigo: #1E83E0;
  --indigo-deep: #1769C4;       /* hover / pressed */
  --indigo-tint: rgba(30, 131, 224, 0.08);
  --indigo-ring: rgba(30, 131, 224, 0.28);

  --ink: #0A2342;               /* navy — headings + nav text */
  --ink-2: #44556B;
  --ink-3: #6B7A90;
  --border: #E6EAF0;
  --border-strong: #D5DCE6;
  --bg: #FFFFFF;        /* card / field surface */
  --bg-soft: #F4F7FB;
  --page: #F6F8FB;      /* page background — light blue-gray so white cards lift */

  /* semantic — report + heatmap only */
  --sem-bad-ink: #B42318;
  --sem-bad-bg: #FEF1F0;
  --sem-ok-ink: #197A4B;
  --sem-ok-bg: #EAF6EF;
  /* amber = "needs a human check" (review / low confidence). DESIGN.md --warn family. */
  --sem-warn-ink: #B7791F;
  --sem-warn-bg: #FBF3E2;

  /* ==========================================================
     REDESIGN TOKENS (heatmap + answer keys + settings handoff)
     NEW variables — do NOT overwrite the --sem-* tokens above (report screens
     depend on them). These are the softer "band" ramp + extra surface/text
     tokens the redesign introduces. Named clearly so the Heatmap + Answer
     Keys screens can reuse them later.
     ========================================================== */

  /* Band ramp (softer than --sem-*): heatmap tints + report bands.
     ok = On track (≥70) · watch = Watch (55–69) · risk = At risk (<55). */
  --band-ok-ink: #15734A;   --band-ok-bg: #E7F4EC;   --band-ok-border: #CDE9D8;
  --band-watch-ink: #946217; --band-watch-bg: #FBF3E0; --band-watch-border: #EAD9AE;
  --band-risk-ink: #B42318; --band-risk-bg: #FCEAE7; --band-risk-border: #F3C9BE;

  /* Surfaces / borders introduced by the redesign. */
  --surface: #FFFFFF;               /* card / surface */
  --card-border: #E6EAF0;           /* card border (matches --border) */
  --hairline: #EEF2F7;              /* divider inside cards (rows) */
  --hairline-2: #F0F3F8;            /* softer hairline (item rows) */
  --control-border: #D5DCE6;        /* input / control border */
  --track: #F4F7FB;                 /* segmented / picker track */
  --track-border: #E1E8F2;          /* border on the track */
  --chip-bg: #F0F4FA;               /* neutral chip / icon well */
  --chip-border: #E1E8F2;
  --toggle-off: #D5DCE6;            /* toggle track when off */

  /* Blue-tint callout surface (source-of-truth note). */
  --blue-tint-bg: rgba(30, 131, 224, 0.06);
  --blue-tint-border: rgba(30, 131, 224, 0.28);

  /* Focus ring (redesign spec). */
  --focus-ring: 0 0 0 3px rgba(30, 131, 224, 0.22);

  /* Text ramp (redesign): heading ink → body → muted → faint. */
  --t-ink: #0A2342;                 /* heading ink (matches --ink) */
  --t-body: #44556B;                /* body / strong text */
  --t-muted: #6B7A90;               /* muted text */
  --t-faint: #9FB0C4;               /* faint text / eyebrows / footer */

  --font: "Poppins", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --r-card: 16px;
  --r-field: 10px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(10, 35, 66, 0.05);
  --shadow-2: 0 1px 2px rgba(10, 35, 66, 0.05), 0 18px 44px -20px rgba(10, 35, 66, 0.18);

  --sidebar-w: 240px;   /* width of the fixed left sidebar */
  --topbar-h: 60px;     /* height of the mobile top bar */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Form controls inherit Inter (DESIGN.md §6 a11y). */
input, button, select, textarea { font-family: inherit; }

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--indigo); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 120;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 8px; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 4px;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--indigo);
}

/* ==========================================================
   WORDMARK  (shared: sidebar top + mobile top bar)
   ========================================================== */

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); font-size: 15.5px;
}
.wordmark__mark {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px;
  /* без синего фона — у колбы Gradely свои цвета (navy + синяя жидкость), как на лендинге */
}
.wordmark__text strong { font-weight: 700; }
.wordmark--side { padding: 4px 10px 4px 6px; margin-bottom: 6px; min-height: 44px; }

/* ==========================================================
   APP SHELL  — sidebar + content
   ========================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ----- LEFT SIDEBAR ----- */
.sidebar {
  position: sticky; top: 0;
  align-self: start;
  height: 100vh;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 18px 14px 16px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  z-index: 60;
}

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }

/* a nav item = icon + label, full-width button */
.nav__item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 44px; padding: 9px 11px;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-2);
  text-align: left;
  background: transparent; border: 1px solid transparent;
  border-radius: 10px; cursor: pointer;
  transition: background-color 0.13s ease, color 0.13s ease;
}
/* display:flex выше перебивает [hidden] — вернём скрытие спрятанным пунктам меню. */
.nav__item[hidden] { display: none; }
.nav__item:hover { background: var(--bg-soft); color: var(--ink); }
.nav__icon { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--ink-3); }
.nav__item:hover .nav__icon { color: var(--ink-2); }

/* active item — brand indigo */
.nav__item.is-active {
  background: var(--indigo-tint);
  color: var(--indigo);
  font-weight: 600;
}
.nav__item.is-active .nav__icon { color: var(--indigo); }

.sidebar__foot {
  margin-top: auto; padding: 12px 11px 2px;
  font-size: 12px; line-height: 1.5; color: var(--ink-3);
  border-top: 1px solid var(--border);
}

/* ----- MOBILE TOP BAR (hidden on desktop) ----- */
.topbar { display: none; }
.topbar__menu {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: 10px; color: var(--ink); cursor: pointer;
}
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(22, 24, 31, 0.4);
}

/* ==========================================================
   MAIN CONTENT
   ========================================================== */

.content {
  /* Cap line length so the dashboard breathes on wide screens. */
  width: 100%;
  max-width: 940px;
  padding: clamp(24px, 3.5vw, 44px) clamp(20px, 3.5vw, 44px) 80px;
}

/* Only the active view is shown; others stay hidden via [hidden]. */
.view { outline: none; }
.view[hidden] { display: none; }

.view__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.view__title { font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; }
.view__sub {
  margin-top: 12px; max-width: 64ch;
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
}

/* small muted "sample data" tag next to a section title — honesty */
.sample-tag {
  display: inline-block; vertical-align: middle;
  margin-left: 10px; padding: 3px 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-3); background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 999px;
}

/* ----- generic card (DESIGN.md §4) ----- */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}

/* ==========================================================
   DEMO-MODE TOGGLE  (a small switch; copies share state in app.js)
   ========================================================== */
.demo-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  user-select: none;
}
.demo-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.demo-toggle__track {
  position: relative;
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 0.15s ease;
}
.demo-toggle__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-1);
  transition: transform 0.15s ease;
}
.demo-toggle input:checked + .demo-toggle__track { background: var(--indigo); }
.demo-toggle input:checked + .demo-toggle__track .demo-toggle__thumb { transform: translateX(16px); }
.demo-toggle input:focus-visible + .demo-toggle__track {
  outline: 2px solid var(--indigo); outline-offset: 2px;
}
/* header copy: give it a subtle pill so it reads as a control, not stray text */
.demo-toggle--head {
  padding: 6px 14px 6px 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: var(--shadow-1);
}

/* ==========================================================
   FORM   (New check section — unchanged component styles)
   ========================================================== */

.form-card { padding: clamp(20px, 3vw, 28px); }

.field-group { margin-bottom: 22px; }
.field-group:last-of-type { margin-bottom: 0; }

.field-label {
  display: block; margin-bottom: 8px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.field-label-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.field-label-row .field-label { margin-bottom: 0; }

.field-hint { margin-top: 7px; font-size: 13.5px; color: var(--ink-3); }

/* base field shared with landing page */
.field {
  min-height: 48px; padding: 0 16px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--r-field);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field::placeholder { color: var(--ink-3); }
.field:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.field--block { display: block; width: 100%; }

.textarea {
  min-height: 140px; padding: 12px 16px;
  line-height: 1.55; resize: vertical;
}

/* file input — keep native control but style its frame + button */
.file-input {
  display: block; width: 100%;
  padding: 11px 14px;
  font: inherit; font-size: 15px; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--r-field);
  cursor: pointer;
}
.file-input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.file-input::file-selector-button {
  margin-right: 12px; padding: 7px 14px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--border-strong); border-radius: 8px;
  cursor: pointer;
}
.file-input::file-selector-button:hover { border-color: var(--indigo); color: var(--indigo); }

/* chosen-files list */
.file-list {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 6px;
}
.file-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.file-list li::before {
  content: ""; flex: none;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--indigo-tint); border: 1px solid var(--indigo-ring);
}

.key-as-image {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  cursor: pointer;
}
.key-as-image input { accent-color: var(--indigo); width: 15px; height: 15px; }

.form-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 26px;
}

/* buttons — Gradely pill (shared with landing page) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; padding: 0 26px;
  font: inherit; font-size: 15.5px; font-weight: 600;
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--indigo); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(30, 131, 224, 0.6);
}
.btn--primary:hover { background: var(--indigo-deep); }
.btn--quiet {
  background: var(--bg); color: var(--ink);
  border-color: var(--border-strong); box-shadow: var(--shadow-1);
}
.btn--quiet:hover { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* ==========================================================
   NOTIFICATIONS — колокольчик, панель класса, toast
   (добавлено для real-time нотификаций)
   ========================================================== */

/* колокольчик в топбаре + бейдж со счётчиком */
.bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-field);
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
}
.bell:hover { border-color: var(--indigo); color: var(--indigo); }
.bell__badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center;
}

/* панель «Проверить класс» */
.class-runner__head { margin-bottom: 12px; }
.class-runner__title { margin: 2px 0 6px; font-size: 20px; }
.class-runner__sub { max-width: 62ch; color: var(--ink-2); }
.class-runner__actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px; flex-wrap: wrap;
}
.class-runner__status { font-size: 14px; color: var(--ink-3); min-height: 20px; }
.class-runner__status[data-state="err"] { color: var(--sem-bad-ink); font-weight: 600; }
.class-runner__status[data-state="ok"]  { color: var(--sem-ok-ink, #15803d); font-weight: 600; }

/* динамический список учеников (имя + фото работы + удалить) */
.class-students { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 12px; }
.class-student {
  display: flex; align-items: flex-end; gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
}
.class-student__field { flex: 1 1 0; min-width: 0; }
.class-student__field .field-label { margin-bottom: 6px; }
.class-student__remove {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink-3);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.class-student__remove:hover { border-color: var(--sem-bad-ink); color: var(--sem-bad-ink); }
.class-student__remove:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
@media (max-width: 560px) {
  .class-student { flex-wrap: wrap; }
  .class-student__field { flex-basis: 100%; }
}

/* всплывающие уведомления (toast) */
.toasts {
  position: fixed;
  right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 1000;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--indigo);
  box-shadow: var(--shadow-1, 0 10px 30px rgba(2, 6, 23, 0.12));
  animation: toast-in 160ms ease-out;
}
.toast__body { font-size: 14px; color: var(--ink); }
.toast__title { font-weight: 700; margin-bottom: 2px; }
.toast__close {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font-size: 18px; line-height: 1;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

.form-status { min-height: 22px; margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.form-status[data-state="err"] { color: var(--sem-bad-ink); font-weight: 600; }

/* ==========================================================
   STEP 1 — TEST STRUCTURE BUILDER  (the RANGES builder)
   Front-end only; uses the same tokens as everything else.
   Brand indigo for accents; no semantic red/green here. The
   gap/overlap note uses the amber "needs a human check" family.
   ========================================================== */

.builder-card { padding: clamp(20px, 3vw, 28px); margin-bottom: 22px; }

/* Простой двухшаговый поток: Step 1 / Step 2 — крупные понятные карточки.
   Заголовок чуть больше, отступ под кнопкой действия — заметнее. */
#step1 .builder__title,
#step2 .builder__title { font-size: 21px; }
#step1 .builder-actions,
#step2 .form-actions { margin-top: 18px; }

.builder__head { margin-bottom: 16px; }
.step-eyebrow {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--indigo);
}
.builder__title { font-size: 19px; font-weight: 700; }
.builder__sub { margin-top: 6px; max-width: 60ch; font-size: 14.5px; color: var(--ink-2); }

/* ----- segmented "tabs" (Build here / Scan a sheet) ----- */
.seg {
  display: inline-flex; gap: 4px;
  padding: 4px; margin-bottom: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.seg__btn {
  min-height: 38px; padding: 0 16px;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  background: transparent; border: 1px solid transparent;
  border-radius: 9px; cursor: pointer;
  transition: background-color 0.13s ease, color 0.13s ease, box-shadow 0.13s ease;
}
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-active {
  background: var(--bg); color: var(--indigo);
  border-color: var(--border);
  box-shadow: var(--shadow-1);
}

.builder__panel[hidden] { display: none; }

/* ----- range rows: Questions [from]–[to] · Type · Options · remove ----- */
/* Column header row (matches the grid below). */
.range-head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
  gap: 12px;
  padding: 0 2px 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3);
}

.ranges { display: grid; gap: 10px; }

.range-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
  gap: 12px; align-items: center;
}

/* the "from – to" pair sits in the first column */
.range-row__q {
  display: flex; align-items: center; gap: 8px;
}
.range-row__q .field { width: 100%; min-width: 0; text-align: center; padding: 0 8px; }
.range-row__dash { flex: none; color: var(--ink-3); font-weight: 600; }

/* selects fill their column */
.range-row__type .field,
.range-row__opts .field { width: 100%; min-width: 0; }

/* when Type is FRQ, the Options cell is disabled/dimmed (kept in place so the
   columns don't jump). app.js toggles the is-off class. */
.range-row__opts.is-off { opacity: 0.4; }

/* remove (trash) button */
.range-rm {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: 10px; color: var(--ink-3); cursor: pointer;
  transition: border-color 0.13s ease, color 0.13s ease, background-color 0.13s ease;
}
.range-rm:hover { border-color: var(--sem-bad-ink); color: var(--sem-bad-ink); background: var(--sem-bad-bg); }
/* the last remaining row can't be removed — its button is disabled */
.range-rm[disabled] { opacity: 0.4; cursor: default; }
.range-rm[disabled]:hover { border-color: var(--border-strong); color: var(--ink-3); background: transparent; }

.range-add { margin-top: 14px; }

/* ----- live summary line ----- */
.builder-summary {
  margin-top: 18px;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.builder-summary strong { color: var(--indigo); }

/* ----- gap/overlap note (amber, non-blocking) ----- */
.builder-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 9px 12px;
  background: var(--sem-warn-bg); border: 1px solid #EAD9AE;
  border-radius: 9px;
  color: var(--sem-warn-ink); font-size: 13.5px; font-weight: 500; line-height: 1.5;
}
.builder-note[hidden] { display: none; }
.builder-note svg { flex: none; margin-top: 1px; }

/* ----- generated "test blank" preview ----- */
.blank {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
.blank__label { margin-bottom: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.blank__grid { display: flex; flex-wrap: wrap; gap: 7px; }

/* one chip per question, e.g. "Q1 · MCQ A–D" or "Q11 · FRQ" */
.q-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.q-chip__num { font-weight: 700; color: var(--ink); }
.q-chip__kind { color: var(--ink-3); }
/* MCQ chips get a faint indigo tint so the two types read apart at a glance */
.q-chip--mcq { background: var(--indigo-tint); border-color: var(--indigo-ring); }
.q-chip--mcq .q-chip__kind { color: var(--indigo); }

/* ----- две явные секции билдера (Часть A — MCQ · Часть B — письменные) ----- */
/* Каждая секция — лёгкая карточка-блок, чтобы разделение читалось сразу. */
.sec-block {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg-soft);
}
.sec-block:last-of-type { margin-bottom: 0; }
.sec-block__title {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--indigo);
}
/* поля внутри секции: 1–3 в ряд, переносятся на узких экранах */
.sec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.sec-field .field { width: 100%; }
.sec-field .field-hint { margin-top: 6px; }

/* Create a test: основной ряд настроек — только размер листа + варианты (2 колонки, узко). */
.builder-settings { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 640px; }
/* Свёрнутый блок «Advanced» (Student ID + числовые ответы) — убирает свалку из шага 1. */
.builder-adv { margin: 8px 0 2px; border-top: 1px solid var(--hairline); padding-top: 4px; }
.builder-adv__sum {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 0; font-size: 14px; font-weight: 600; color: var(--t-body); user-select: none;
}
.builder-adv__sum::-webkit-details-marker { display: none; }
.builder-adv__sum::before { content: "▸"; color: var(--t-muted); font-size: 12px; transition: transform .15s ease; }
.builder-adv[open] .builder-adv__sum::before { transform: rotate(90deg); }
.builder-adv__sum:hover { color: var(--indigo); }
.builder-adv__opt { color: var(--t-faint); font-weight: 500; }
.builder-adv > .sec-grid { margin-top: 12px; }

/* Поля «правильный числовой ответ» — компактные строки (ярлык + узкое поле) */
.numeric-answers { display: flex; flex-direction: column; gap: 8px; }
.numeric-answer-row { display: flex; align-items: center; gap: 10px; }
.numeric-answer-row__lbl { font-size: 13.5px; color: var(--ink-2); min-width: 84px; font-weight: 600; }
.numeric-answer-input { max-width: 140px; }

/* Поля «эталон ответа на FRQ» — ярлык + многострочное поле на всю ширину */
/* Письменные (FRQ): настройки (кол-во/баллы/нумерация) в ряд, а эталоны — на ВСЮ
   ширину строками (чип «Open #N» + широкая textarea). Раньше всё было в 4-й узкой
   колонке сетки → кривая пустота и зажатые поля. */
.frq-block { display: block; }
.frq-settings { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); max-width: 720px; }
.frq-keys-wrap { margin-top: 18px; }
.frq-keys__opt { color: var(--t-faint); font-weight: 500; }
.frq-keys { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.frq-key-row { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: start; }
.frq-key-row__lbl {
  display: inline-flex; align-items: center; justify-content: center; height: 36px;
  background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--t-body); white-space: nowrap;
}
.frq-key-input { width: 100%; resize: vertical; min-height: 48px; font-family: inherit; }
@media (max-width: 560px) {
  .frq-key-row { grid-template-columns: 1fr; gap: 6px; }
  .frq-key-row__lbl { justify-content: flex-start; width: fit-content; padding: 0 12px; }
}

/* FRQ/числовые чипы превью — нейтральные (MCQ-оттенок задаётся выше) */
.q-chip--frq { background: var(--bg-soft); border-color: var(--border); }

/* ----- "Scan a sheet" placeholder ----- */
.scan-placeholder {
  padding: 20px; border: 1px dashed var(--border-strong);
  border-radius: var(--r-card); background: var(--bg-soft);
}
.scan-placeholder__badge {
  display: inline-block; margin-bottom: 12px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--sem-warn-ink); background: var(--sem-warn-bg);
  border: 1px solid #EAD9AE;
}
.scan-placeholder .field-label { margin-top: 2px; }
.scan-placeholder .file-input { margin-top: 4px; background: var(--bg); }

/* ----- secondary, collapsible blocks (<details>) below the main flow -----
   Свёрнутые «дополнительно» блоки: печатный бланк и проверка всего класса.
   Не должны спорить с главным потоком (форма → отчёт), поэтому без тяжёлой
   карточки — лёгкая рамка + кликабельный заголовок. */
.more-block {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg-soft);
}
.more-block[open] { background: var(--bg); }
.more-block__summary {
  list-style: none;            /* убрать дефолтный треугольник */
  cursor: pointer;
  padding: 14px 18px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
  user-select: none;
}
.more-block__summary::-webkit-details-marker { display: none; }
/* собственная стрелка-индикатор слева, поворачивается при раскрытии */
.more-block__summary::before {
  content: "›";
  display: inline-block;
  font-size: 18px; line-height: 1; color: var(--ink-3);
  transform: rotate(0deg); transition: transform 0.15s ease;
}
.more-block[open] > .more-block__summary::before { transform: rotate(90deg); }
.more-block__summary:hover { color: var(--ink); }
.more-block__summary:focus-visible {
  outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: var(--r-card);
}
/* внутри раскрытого details карточка не нужна — убираем двойную рамку/отступ */
.more-block > .card { margin-bottom: 0; border: none; box-shadow: none; border-radius: 0; }
.more-block > .card.builder-card { padding-top: 4px; }

/* ----- builder: small screens ----- */
@media (max-width: 560px) {
  /* hide the column headers and stack each row's controls */
  .range-head { display: none; }
  .range-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px; align-items: end;
    border: 1px solid var(--border); border-radius: 12px;
  }
  .range-row__q { grid-column: 1 / -1; }          /* questions span full width */
  .range-rm { width: 100%; height: 44px; }        /* full-width trash on its own line */
  .range-row__opts.is-off { display: flex; }
}

/* ==========================================================
   LOADING / ERROR PANELS
   ========================================================== */

.state-panel {
  margin-top: 22px; padding: 28px 24px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
  text-align: center;
}
.state-panel__text { color: var(--ink-2); font-size: 15.5px; }
.state-panel__title { font-weight: 700; font-size: 17px; margin-bottom: 6px; }

.state-panel--error {
  border-color: var(--sem-bad-bg);
  background: var(--sem-bad-bg);
}
.state-panel--error .state-panel__title { color: var(--sem-bad-ink); }
.state-panel--error .state-panel__text { color: var(--sem-bad-ink); margin-bottom: 16px; }

.spinner {
  display: inline-block; width: 26px; height: 26px; margin-bottom: 12px;
  border: 3px solid var(--indigo-tint);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
}

/* Подсказка под лоадером: «обычно 10–20 сек» — снимает тревогу «не завис ли». */
.state-panel__hint { color: var(--ink-3); font-size: 13px; line-height: 1.45; margin: 6px auto 0; max-width: 50ch; }

/* «Что происходит» — три шага обработки скана (успокаивают ожидание). */
.loading-steps {
  list-style: none; margin: 16px auto 2px; padding: 0;
  display: inline-flex; flex-direction: column; gap: 8px; text-align: left;
}
.loading-steps li { position: relative; padding-left: 22px; font-size: 13px; color: var(--t-muted); }
.loading-steps li::before {
  content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--indigo); opacity: .5;
}

/* Индетерминантная полоса прогресса (бегущий отрезок) — «процесс идёт». */
.state-panel__bar {
  margin: 16px auto 0; width: min(280px, 80%); height: 4px;
  border-radius: 999px; background: var(--indigo-tint); overflow: hidden;
}
.state-panel__bar > span {
  display: block; width: 38%; height: 100%; border-radius: 999px; background: var(--indigo);
  animation: barslide 1.15s ease-in-out infinite;
}
@keyframes barslide { 0% { transform: translateX(-110%); } 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) {
  .state-panel__bar > span { animation-duration: 2.6s; }
}

/* Иконка + действия + «технические детали» в панели ошибки. */
.state-panel__icon { display: inline-flex; color: var(--sem-bad-ink); margin-bottom: 8px; }
.state-panel__actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.state-panel__details { margin: 14px auto 0; max-width: 52ch; text-align: left; }
.state-panel__details summary { cursor: pointer; font-size: 12.5px; color: var(--sem-bad-ink); opacity: .85; }
.state-panel__detail-text {
  margin-top: 6px; font-size: 12px; color: var(--ink-3); word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==========================================================
   REPORT CARD  (reuses landing-page report styling)
   ========================================================== */

.results { margin-top: 26px; }

/* the bar above a re-opened report (My checks) */
.results--history { margin-top: 22px; }
.results__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.results__title { font-size: 17px; font-weight: 700; }

.report-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  padding: clamp(20px, 3vw, 26px);
}

.report-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
/* export-to-gradebook action row (U5.3) */
.report-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* FRQ manual grading rows (open questions) */
.frq-grade { display: grid; gap: 10px; margin-top: 6px; }
.frq-row {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 64px auto 1fr;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-field); background: var(--bg-soft);
}
.frq-row__q { font-weight: 700; color: var(--ink); }
.frq-row__mark { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.frq-mark-input {
  width: 56px; font: inherit; font-size: 14px; text-align: center;
  padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg);
}
.frq-mark-input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.frq-row__max { color: var(--ink-3); }
/* Что ИИ распознал в рукописи (дословно) — на всю ширину строки, под полями */
.frq-row__read { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); margin-top: 2px; word-break: break-word; }
.frq-row__read-lbl { font-weight: 700; color: var(--indigo); }
.frq-row__read--empty { color: var(--ink-3); font-style: italic; }
/* AI-бейдж рядом с баллом: что предложил Gemini; .is-low — низкая уверенность/флаг */
.frq-row__ai {
  margin-left: 8px; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--indigo-ring); color: var(--indigo);
}
.frq-row__ai.is-low { background: #FFF3D6; color: #9A6700; }
.frq-auto-err { color: #9A6700; }
.frq-row__comment {
  font: inherit; font-size: 13.5px; padding: 7px 10px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg);
}
.frq-row__comment:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
@media (max-width: 560px) {
  .frq-row { grid-template-columns: 1fr auto; }
  .frq-row__comment { grid-column: 1 / -1; }
}
.report-card__meta { display: grid; gap: 3px; }
.report-card__student { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.report-card__paper { color: var(--ink-3); font-size: 13.5px; }

/* "needs review" banner under the header when status === needs_review */
.review-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; padding: 12px 14px;
  background: var(--sem-warn-bg); border: 1px solid #EAD9AE;
  border-radius: 10px;
  color: var(--sem-warn-ink); font-size: 14.5px; font-weight: 500;
}
.review-banner svg { flex: none; margin-top: 1px; }

/* ==========================================================
   REVIEW STEP — «Review what the AI read» (V2b)
   Редактируемый список того, что распознал ИИ. Стиль в духе .card/.field.
   ========================================================== */
.review { margin-top: 20px; }
.review__head { margin-bottom: 16px; }
.review__title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 6px; }
.review__sub { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

.review-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

/* one editable reading row */
.review-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-soft);
}
/* flagged (low-confidence) rows get an amber frame so they stand out */
.review-row--flag {
  border-color: #EAD9AE;
  background: var(--sem-warn-bg);
}
.review-row__q { display: flex; flex-direction: column; gap: 6px; }
.review-row__num {
  font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
}
/* the textual "please check" badge — so the flag isn't colour-only (a11y) */
.review-row__badge {
  display: inline-block; align-self: start;
  padding: 2px 7px; border-radius: 999px;
  background: var(--sem-warn-ink); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
}
.review-row__field { min-width: 0; }
.review-row__input { background: #fff; }
.review-row__flag {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 8px;
  color: var(--sem-warn-ink); font-size: 13px; font-weight: 500; line-height: 1.5;
}
.review-row__flag svg { flex: none; margin-top: 1px; }

.review-empty { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 560px) {
  .review-row { grid-template-columns: 1fr; gap: 8px; }
}

.score-badge {
  flex: none; display: inline-flex; align-items: baseline; gap: 1px;
  padding: 7px 13px; border-radius: 10px;
  background: var(--bg-soft); border: 1px solid var(--border);
  font-weight: 700; font-size: 20px; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.score-badge__sep { color: var(--ink-3); font-weight: 400; }
/* Цвет итогового балла по доле верных — те же пороги/палитра, что у карты тем. */
.score-badge--ok   { background: var(--sem-ok-bg);   border-color: #BFE6CE; color: var(--sem-ok-ink); }
.score-badge--warn { background: var(--sem-warn-bg); border-color: #F0DCB0; color: var(--sem-warn-ink); }
.score-badge--bad  { background: var(--sem-bad-bg);  border-color: #F5C9C4; color: var(--sem-bad-ink); }
.score-badge--ok .score-badge__sep,
.score-badge--warn .score-badge__sep,
.score-badge--bad .score-badge__sep { color: currentColor; opacity: .55; }

/* section blocks inside the report */
.report-card__block { padding-top: 20px; }
.report-card__block + .report-card__block { margin-top: 20px; border-top: 1px solid var(--border); }
.report-card__h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 15px; font-weight: 700;
  margin-bottom: 13px;
}
.report-card__h-count {
  padding: 1.5px 9px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.report-card__note { color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ----- chips (semantic, report only) ----- */
.chip {
  display: inline-flex; align-items: center;
  padding: 2.5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.chip--bad { background: var(--sem-bad-bg); color: var(--sem-bad-ink); }
.chip--ok { background: var(--sem-ok-bg); color: var(--sem-ok-ink); }
.chip--warn { background: var(--sem-warn-bg); color: var(--sem-warn-ink); }
.chip--neutral { background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--border); }
/* провенанс «live» (реальный результат, а не пример) — индиго, чтобы не путать с зелёным статусом */
.chip--live { background: var(--indigo-ring); color: var(--indigo); }

/* ----- weak-topics list ----- */
/* ----- stepper (U2.1): 1 Build key — 2 Print sheet ----- */
.stepper {
  display: flex; align-items: center; gap: 10px; list-style: none;
  margin: 0 0 16px; padding: 0;
}
.stepper__step {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-3);
}
.stepper__step + .stepper__step::before {
  content: ""; width: 22px; height: 1px; background: var(--border-strong); margin-right: 2px;
}
.stepper__n {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border-strong);
  font-size: 12px; font-weight: 700; color: var(--ink-3);
}
.stepper__step.is-current { color: var(--ink); }
.stepper__step.is-current .stepper__n {
  background: var(--indigo); border-color: var(--indigo); color: #fff;
}

/* ----- HOME HUB (U1.3) — Gradely redesign (Home.dc.html) ----- */
/* Центрированная колонка-герой: спокойный вход без выдуманных данных. */
.hub {
  max-width: 920px; margin: 0 auto;
  min-height: calc(100vh - 150px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 6vh, 64px) 0;
}
.hub__eyebrow {
  margin: 0 0 14px; color: var(--indigo);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.hub__title { margin: 0; max-width: 16ch; line-height: 1.08; letter-spacing: -0.022em; }
.hub__lead {
  margin: 16px 0 0; max-width: 60ch;
  font-size: 16.5px; line-height: 1.6; color: var(--t-body);
}

.hub-cards {
  display: grid; gap: 18px; margin-top: 32px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px) { .hub-cards { grid-template-columns: 1fr; } }

.hub-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-align: left;
  padding: 26px 24px 22px; border: 1px solid var(--card-border); border-radius: 16px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(10, 35, 66, .04); cursor: pointer;
  transition: box-shadow .18s ease, border-color .18s ease, transform .14s ease;
}
.hub-card--primary { border-color: rgba(30, 131, 224, .28); }
.hub-card:hover { border-color: var(--indigo); transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(10, 35, 66, .32); }
.hub-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hub-card:active { transform: translateY(-1px); }

.hub-card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px;
}
.hub-card--primary .hub-card__icon {
  background: var(--indigo); color: #fff; box-shadow: 0 8px 18px -8px rgba(30, 131, 224, .7);
}
.hub-card--step2 .hub-card__icon {
  background: #F0F4FA; color: var(--indigo); border: 1px solid #E1E8F2;
}

.hub-card__step {
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}
.hub-card--primary .hub-card__step {
  background: var(--blue-tint-bg); border: 1px solid rgba(30, 131, 224, .28); color: var(--indigo);
}
.hub-card--step2 .hub-card__step {
  background: #F0F4FA; border: 1px solid #E1E8F2; color: var(--t-muted);
}

.hub-card__title { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--t-ink); }
.hub-card__sub { font-size: 14.5px; color: var(--t-body); line-height: 1.5; max-width: 34ch; }
.hub-card__cta {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 600; color: var(--indigo);
}
.hub-card__cta svg { transition: transform .15s ease; }
.hub-card:hover .hub-card__cta svg { transform: translateX(3px); }

/* «Как это работает» — тихая карточка со стрелками между шагами. */
.hub-how {
  margin-top: 22px; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(10, 35, 66, .04);
}
.hub-how__title {
  margin: 0 0 15px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #9FB0C4;
}
.hub-steps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px;
  list-style: none; margin: 0; padding: 0;
}
.hub-steps li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--t-body); }
.hub-steps__arrow { color: #9FB0C4; font-weight: 600; padding: 0 2px; }
.hub-steps__n {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--blue-tint-bg); color: var(--indigo); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; flex: none;
}
.hub-example { margin: 22px 0 0; }
.link-btn {
  background: none; border: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--indigo); cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* ----- topic mastery heatmap (U5.1): color reads instantly -----
   NB: own namespace (.topic-*) so it never collides with the CLASS heatmap
   (.heatmap/.heat-row/.heat-track in the Class heatmap view). */
.topic-heatmap {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.topic-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: var(--r-field); border: 1px solid;
}
.topic-cell__pct { font-size: 22px; font-weight: 800; line-height: 1; }
.topic-cell__topic { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.topic-cell__marks { font-size: 11.5px; opacity: 0.8; }
.topic-cell--ok   { background: var(--sem-ok-bg);   border-color: #BFE6CE; color: var(--sem-ok-ink); }
.topic-cell--warn { background: var(--sem-warn-bg); border-color: #F0DCB0; color: var(--sem-warn-ink); }
.topic-cell--bad  { background: var(--sem-bad-bg);  border-color: #F5C9C4; color: var(--sem-bad-ink); }

.weak-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.weak-topics li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--ink-2);
}
.weak-topics li::before {
  content: ""; flex: none; margin-top: 7px;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--sem-bad-ink);
}

/* ----- reteach plan ----- */
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; counter-reset: step; }
.plan-row {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: 14px 16px;
}
.plan-row__num {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--indigo-tint); color: var(--indigo);
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.plan-row__text { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }

/* ----- per-question diagnosis rows (signature misconception card) ----- */
.questions { display: grid; gap: 12px; }

.q-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: 16px 18px 16px 21px;
}
/* semantic left-border encodes the result (DESIGN.md §4 — allowed, report-only) */
.q-card::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px; background: var(--border-strong);
}
.q-card[data-result="incorrect"]::before { background: var(--sem-bad-ink); }
.q-card[data-result="partial"]::before { background: var(--sem-warn-ink); }
.q-card[data-result="correct"]::before { background: var(--sem-ok-ink); }
.q-card[data-result="review"]::before { background: var(--sem-warn-ink); }
/* a flagged card (review OR low confidence) gets a subtle amber wash so it can't be missed */
.q-card.is-flagged {
  border-color: #EAD9AE;
  background: linear-gradient(0deg, var(--sem-warn-bg), var(--sem-warn-bg)) padding-box;
  background-color: #FFFDF7;
}

.q-card__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 12px;
}
.q-card__id {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.q-card__num {
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.q-card__topic { font-size: 14px; color: var(--ink-3); }
.q-card__tags { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.q-card__marks {
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* the verbatim student answer — shown as a quote, monospace-ish feel via tabular */
.q-card__answer {
  margin-top: 12px; padding: 10px 12px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px; color: var(--ink);
}
.q-card__answer-label {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.q-card__answer-text { white-space: pre-wrap; word-break: break-word; }
/* SCAN-4 / D-025: пометка «исправлено учителем» + след «scanner read X → Y» */
.q-card__edited {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; background: var(--sem-warn-bg); color: var(--sem-warn-ink);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.q-card__read-trace { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.q-card__read-trace b { color: var(--ink-2); }

/* the diagnosis block */
.q-card__diagnosis { margin-top: 12px; display: grid; gap: 6px; }
.q-card__mis { font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.q-card__ms {
  font-size: 14.5px; color: var(--ink-2);
}
.q-card__ms strong { color: var(--ink); font-weight: 650; }

/* amber flag line — the low-confidence / review warning, never hidden */
.q-flag {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 9px 11px;
  background: var(--sem-warn-bg); border: 1px solid #EAD9AE;
  border-radius: 8px;
  color: var(--sem-warn-ink); font-size: 13.5px; font-weight: 500; line-height: 1.5;
}
.q-flag svg { flex: none; margin-top: 1px; }
.q-flag__conf { font-weight: 700; font-variant-numeric: tabular-nums; }

/* written feedback — ready to hand to the student */
.feedback-block .report-card__note {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
}

/* ==========================================================
   DATA TABLES  (My class · My checks · Answer keys)
   ========================================================== */

.table-card { overflow: hidden; }     /* clip rows to the card's rounded corners */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.data-table th, .data-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: middle;
}
.data-table thead th {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table tbody tr + tr td { border-top: 1px solid var(--border); }
.data-table td { color: var(--ink-2); }
.data-table .name { font-weight: 600; color: var(--ink); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .muted { color: var(--ink-3); }

/* clickable history rows */
.data-table--clickable tbody tr { cursor: pointer; transition: background-color 0.12s ease; }
.data-table--clickable tbody tr:hover { background: var(--indigo-tint); }
.data-table--clickable tbody tr:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }

/* small "Use" link-button inside the keys table */
.table-action {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--indigo);
  background: transparent; border: 0; padding: 4px 6px; cursor: pointer;
  border-radius: 6px;
}
.table-action:hover { background: var(--indigo-tint); }

/* ==========================================================
   EMPTY STATES
   ========================================================== */

.empty-state {
  display: grid; place-items: center; gap: 6px;
  padding: clamp(36px, 6vw, 56px) 24px;
  text-align: center;
  background: var(--bg); border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
}
/* атрибут hidden должен реально прятать (класс display:grid иначе перебивает его) */
.empty-state[hidden] { display: none; }
.empty-state__icon {
  display: grid; place-items: center;
  width: 50px; height: 50px; margin-bottom: 6px;
  border-radius: 12px;
  background: var(--indigo-tint); color: var(--indigo);
}
.empty-state__title { font-size: 17px; font-weight: 700; }
.empty-state__text { max-width: 40ch; color: var(--ink-2); font-size: 15px; }
.empty-state .btn { margin-top: 12px; }

/* ==========================================================
   CLASS HEATMAP
   ========================================================== */

/* Main column caps at 1080px on this screen (matches the mockup). */
.heatmap-view { max-width: 1080px; }

/* ----- header row: title + sample pill (left), class picker (right) ----- */
.heat-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.heat-header__lead { min-width: 0; }
.heat-header__titlerow { display: flex; align-items: center; gap: 11px; }
.heat-header .view__sub { margin: 9px 0 0; max-width: 62ch; }

/* muted «sample data» pill */
.sample-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  font-size: 11.5px; font-weight: 600; color: var(--t-muted); white-space: nowrap;
}

/* bordered control wrapping the existing <select> */
.heat-class-control {
  display: flex; align-items: center; gap: 8px; margin-bottom: 0;
  height: 42px; padding: 0 6px 0 14px;
  background: var(--surface); border: 1px solid var(--control-border);
  border-radius: 11px;
}
.heat-class-control__icon { flex: none; color: var(--t-faint); }
.heat-class-control__select {
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 600; color: #1B2F4D;
  padding: 0 4px; min-width: 0; max-width: none; height: auto; cursor: pointer;
}
.heat-class-control:focus-within { border-color: var(--indigo); box-shadow: var(--focus-ring); }

/* ----- summary strip: three stat cards ----- */
.heat-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.heat-stat {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--surface); border: 1px solid var(--card-border);
  border-radius: 14px; box-shadow: var(--shadow-1); padding: 15px 17px;
}
.heat-stat__well {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
}
.heat-stat__body { min-width: 0; }
.heat-stat__label {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--t-faint);
}
.heat-stat__value {
  margin: 5px 0 0; font-size: 17px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--t-ink); font-variant-numeric: tabular-nums;
}
.heat-stat__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--t-muted); }
/* icon-well tints per band + blue */
.heat-stat__well--risk  { background: var(--band-risk-bg);  color: var(--band-risk-ink); }
.heat-stat__well--watch { background: var(--band-watch-bg); color: var(--band-watch-ink); }
.heat-stat__well--blue  { background: #E7F1FC;              color: #1E6FBF; }

/* ----- topic mastery card (elevated) ----- */
.heatmap-card {
  padding: clamp(18px, 3vw, 24px); margin-top: 0;
  box-shadow: 0 1px 2px rgba(10, 35, 66, .04), 0 12px 32px -26px rgba(10, 35, 66, .22);
}
.heat-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.heat-card-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--t-ink); }
.heat-card-hint { font-size: 12px; color: var(--t-faint); }

.heatmap { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
/* one topic row: name+sub | progress track | badge + % */
.heat-row {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: minmax(150px, 1.1fr) 2fr auto;
}
.heat-row__label { min-width: 0; }
.heat-row__topic {
  margin: 0; font-size: 14px; font-weight: 600; color: #1B2F4D;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.heat-row__sub { margin: 1px 0 0; font-size: 12px; color: #A8B6C8; }
.heat-track {
  height: 12px; border-radius: var(--r-pill); background: var(--hairline);
  overflow: hidden;
}
.heat-track__fill { height: 100%; border-radius: var(--r-pill); }
.heat-row__meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  min-width: 150px;
}
.heat-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap;
}
.heat-badge--ok    { background: var(--band-ok-bg);    color: var(--band-ok-ink);    border-color: var(--band-ok-border); }
.heat-badge--watch { background: var(--band-watch-bg); color: var(--band-watch-ink); border-color: var(--band-watch-border); }
.heat-badge--risk  { background: var(--band-risk-bg);  color: var(--band-risk-ink);  border-color: var(--band-risk-border); }
.heat-row__pct {
  min-width: 42px; text-align: right; font-size: 15px; font-weight: 700;
  color: var(--t-ink); font-variant-numeric: tabular-nums;
}
/* band fill colours (progress track) */
.heat-fill--ok    { background: var(--band-ok-ink); }
.heat-fill--watch { background: var(--band-watch-ink); }
.heat-fill--risk  { background: var(--band-risk-ink); }

/* legend */
.heat-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--hairline);
  font-size: 12px; color: #8A98AC;
}
.heat-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.heat-legend__swatch { width: 11px; height: 11px; border-radius: 3px; }
.heat-legend__swatch--risk  { background: var(--band-risk-bg);  box-shadow: inset 0 0 0 1px var(--band-risk-border); }
.heat-legend__swatch--watch { background: var(--band-watch-bg); box-shadow: inset 0 0 0 1px var(--band-watch-border); }
.heat-legend__swatch--ok    { background: var(--band-ok-bg);    box-shadow: inset 0 0 0 1px var(--band-ok-border); }

/* ----- item analysis: questions the class struggled with ----- */
.item-analysis-card { padding: clamp(18px, 3vw, 24px); margin-top: 18px; }
.ia-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--t-ink); }
.ia-sub { margin: 6px 0 0; font-size: 13px; color: #8A98AC; max-width: 74ch; }
.item-analysis { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.ia-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 44px minmax(130px, 1.3fr) minmax(120px, 1fr) 2fr 54px;
  padding: 9px 12px; border: 1px solid var(--hairline-2); border-radius: 11px;
  transition: border-color .12s, background-color .12s;
}
.ia-row:hover { border-color: var(--track-border); background: #FCFDFE; }
.ia-row__q {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; border-radius: 8px; background: var(--chip-bg);
  color: var(--t-body); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ia-row__topic {
  font-size: 13.5px; font-weight: 500; color: #1B2F4D;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ia-row__common { font-size: 12.5px; color: #8A98AC; }
.ia-row__common strong { color: var(--band-risk-ink); font-weight: 700; }
.ia-bar { height: 8px; border-radius: var(--r-pill); background: var(--hairline); overflow: hidden; }
.ia-bar__fill { display: block; height: 100%; border-radius: var(--r-pill); }
.ia-bar__fill--ok    { background: var(--band-ok-ink); }
.ia-bar__fill--watch { background: var(--band-watch-ink); }
.ia-bar__fill--risk  { background: var(--band-risk-ink); }
.ia-row__pct {
  text-align: right; font-size: 13.5px; font-weight: 700; color: var(--t-ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .ia-row { grid-template-columns: 44px 1fr 54px; }
  .ia-row__common, .ia-bar { display: none; }
}

/* ==========================================================
   SETTINGS
   ========================================================== */

.settings-card { padding: clamp(6px, 1vw, 8px) clamp(18px, 3vw, 24px); }

.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px;
  padding: 20px 0;
}
.setting-row + .setting-row { border-top: 1px solid var(--border); }
.setting-row__text { max-width: 52ch; }
.setting-row__label { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.setting-row__hint { margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }
.setting-row__value {
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.setting-row .field { min-width: 180px; }

/* source-of-truth reminder row */
.setting-row--note { padding-top: 18px; }
.setting-row__note {
  display: flex; align-items: flex-start; gap: 9px;
  width: 100%; padding: 12px 14px;
  background: var(--indigo-tint); border: 1px solid var(--indigo-ring);
  border-radius: 10px;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.setting-row__note svg { flex: none; margin-top: 2px; color: var(--indigo); }

/* ==========================================================
   SETTINGS (redesign) — секции-карточки, тумблеры, сегменты, callout.
   Узкая колонка (780px), «eyebrow» над каждой карточкой, ряды с
   разделителями-волосинками. Использует новые band/surface/text токены.
   ========================================================== */

#view-settings { max-width: 780px; }

/* «Eyebrow» — маленький заголовок секции над карточкой */
.set-eyebrow {
  margin: 24px 0 9px; padding-left: 2px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t-faint);
}
.set-eyebrow:first-of-type { margin-top: 8px; }

.set-card { padding: 2px 22px; }

/* Ряд настройки: подпись слева, контрол справа; между рядами — волосинка */
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px 18px;
  padding: 18px 0; border-top: 1px solid var(--hairline);
}
.set-card .set-row:first-child { border-top: 0; }
.set-row__text { min-width: 0; max-width: 52ch; }
.set-row__label { display: block; font-size: 15px; font-weight: 600; color: var(--t-ink); }
.set-row__hint { margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--t-muted); }

.set-select { min-width: 190px; }

/* Read-only «чип» (версия силлабуса) */
.set-chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px;
  background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--t-body);
  font-variant-numeric: tabular-nums;
}

/* Тумблер (role=switch): трек 46×27, кружок 21, сдвиг 19px во включённом */
.toggle {
  position: relative; flex: none; width: 46px; height: 27px; padding: 0;
  border: 0; border-radius: 999px; background: var(--toggle-off); cursor: pointer;
  transition: background-color .16s ease;
}
.toggle[aria-checked="true"] { background: var(--indigo); }
.toggle__knob {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(10, 35, 66, .35);
  transition: transform .16s ease;
}
.toggle[aria-checked="true"] .toggle__knob { transform: translateX(19px); }
.toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Сегментированный контрол: трек-подложка + активная белая «таблетка» */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--track); border: 1px solid var(--track-border); border-radius: 11px;
}
.seg__btn {
  height: 36px; padding: 0 15px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; font: 600 13.5px var(--font); color: var(--t-muted);
  cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.seg__btn:hover { color: var(--t-body); }
.seg__btn.is-active {
  background: #fff; color: var(--indigo); border-color: var(--card-border);
  box-shadow: 0 1px 2px rgba(10, 35, 66, .06);
}
.seg__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Сегменты внутри поля билдера (Create a test): заполняют ячейку .sec-field,
   кнопки делят ширину поровну и сжимаются — не вылезают на соседнее поле. */
.seg--field { display: flex; width: 100%; }
.seg--field .seg__btn { flex: 1 1 0; min-width: 0; padding: 0 6px; }

/* Синий callout «источник правды» */
.set-callout {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 16px; padding: 13px 15px;
  background: var(--blue-tint-bg); border: 1px solid var(--blue-tint-border);
  border-radius: 11px;
  font-size: 13.5px; line-height: 1.5; color: var(--t-body);
}
.set-callout svg { flex: none; margin-top: 1px; color: var(--indigo); }

.set-meta { margin: 18px 0 4px; font-size: 12.5px; color: var(--t-faint); }

@media (max-width: 560px) {
  .set-row { align-items: flex-start; }
  .set-select, .seg { width: 100%; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* ----- ≤700px: sidebar collapses to a top bar / hamburger ----- */
@media (max-width: 700px) {
  /* minmax(0,1fr), а не 1fr: иначе min-content широкой таблицы-журнала распирает
     колонку и вся страница едет вбок. С 0-минимумом колонка сжимается, а таблица
     скроллится ВНУТРИ своей карточки (.gradebook-scroll{overflow-x:auto}). */
  .shell { grid-template-columns: minmax(0, 1fr); }

  /* show the mobile top bar */
  .topbar {
    position: sticky; top: 0; z-index: 70;
    display: flex; align-items: center; gap: 12px;
    height: var(--topbar-h); padding: 0 14px;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border);
  }
  .topbar .wordmark { margin-right: auto; }

  /* sidebar becomes an off-canvas drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(280px, 82vw); height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-2);
    z-index: 80;
  }
  .sidebar.is-open { transform: translateX(0); }
  .wordmark--side { display: none; }   /* the top bar already shows the wordmark */

  .content {
    max-width: none; min-width: 0;   /* min-width:0 — чтобы контент мог сжиматься уже min-content */
    padding: clamp(18px, 5vw, 24px) clamp(16px, 5vw, 22px) 72px;
  }

  .view__head { gap: 12px; }
  .demo-toggle--head { display: none; }   /* the top bar's Demo toggle is used instead */

  /* Билдер Create a test на мобилке: основные настройки — в одну колонку; сетка ключа
     в 2 колонки, иначе 4 колонки кружков распирают страницу (горизонтальный скролл). */
  .builder-settings { grid-template-columns: 1fr; }
  .mcq-bubble-grid { column-count: 2 !important; }
}

@media (max-width: 460px) {
  .mcq-bubble-grid { column-count: 1 !important; } /* на телефоне ключ — одной колонкой */
}

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

/* ----- mobile table strategy: let wide tables scroll inside their card,
         so the PAGE never scrolls horizontally ----- */
@media (max-width: 700px) {
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 560px; }   /* keeps columns readable; card scrolls, page does not */
}

/* ----- small phones ----- */
@media (max-width: 480px) {
  body { font-size: 16px; }
  .report-card { padding: 18px; }
  .form-actions .btn { width: 100%; }
  .q-card__head { align-items: flex-start; }
  .heat-row { grid-template-columns: 1fr auto; gap: 6px 12px; }   /* label spans, track+meta wrap under */
  .heat-row__label { grid-column: 1 / -1; }
  .heat-track { grid-column: 1; }
  .heat-row__meta { grid-column: 2; min-width: 0; }
}

/* Заглушка для пустой теплокарты (когда нет реальных данных) */
.empty-inline {
  padding: 24px 16px;
  border: 1px dashed var(--border, #d4d4d8);
  border-radius: 10px;
  color: var(--muted, #6b7280);
  background: var(--bg-soft, #fafafa);
  text-align: center;
  font-size: 14px;
}

/* ==========================================================
   СРЕЗ 2 — MCQ answer key + builder actions + scan form
   (канонический путь: печатный бланк → код-OMR судит MCQ)
   ========================================================== */

/* ----- Answer key (MCQ), стиль ZipGrade: кликабельные буквы ----- */
.mcq-key { margin-top: 18px; }
.mcq-key__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 10px;
}
.mcq-key__title { font-size: 15px; font-weight: 700; margin: 0; }
/* Живой счётчик — заметный синий pill; пустой тест = тихий серый. */
.mcq-key__count {
  margin: 0; font-size: 13px; font-weight: 700;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--indigo); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(30, 131, 224, 0.7);
}
.mcq-key__count.is-empty {
  background: var(--bg-soft); color: var(--ink-3);
  box-shadow: none; border: 1px solid var(--border);
}
/* Правило-callout: длина теста = число отмеченных ответов. */
.key-rule {
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--t-body);
  max-width: 70ch;
  padding: 11px 14px; border-radius: var(--r-field);
  background: var(--blue-tint-bg); border: 1px solid var(--blue-tint-border);
  border-left: 4px solid var(--indigo);
}
.key-rule strong { color: var(--ink); }
.mcq-key__hint { font-size: 12.5px; color: var(--ink-3); margin: 0 0 6px; max-width: 60ch; }

/* Сетка раскладывается в несколько колонок (CSS columns) — переменная
   --key-cols задаётся из JS (2 для 50-вопросного листа, 4 для 100). */
.mcq-bubble-grid {
  column-count: var(--key-cols, 4);
  column-gap: 18px;
  max-height: 420px;       /* длинный список ключа скроллится, не растягивая страницу */
  overflow-y: auto;
  padding: 6px 4px;
  border: 1px solid var(--track-border);
  border-radius: 12px;
  background: var(--track);
}
/* Один вопрос: номер + ряд букв. break-inside — чтобы ряд не рвался между колонками. */
/* Пустые ряды приглушены, отмеченные (.is-answered) — яркие: реальный тест «проявляется». */
.bubble-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 8px;
  break-inside: avoid;
  opacity: 0.5;
  transition: opacity .12s ease, background-color .12s ease;
}
.bubble-row:hover { opacity: 0.85; }
.bubble-row.is-answered { opacity: 1; background: var(--blue-tint-bg); }
.bubble-row.is-answered .bubble-row__q { color: var(--indigo); }
.bubble-row__q {
  min-width: 26px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.bubble-row__opts { display: flex; gap: 5px; }

/* Кликабельная буква-кружок. Выбранная (.is-on) заливается индиго. */
.bubble {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--control-border);
  background: #fff;
  color: var(--t-body);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color .08s ease, border-color .08s ease, color .08s ease;
}
.bubble:hover { border-color: var(--indigo); color: var(--indigo); }
.bubble.is-on {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.bubble:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* ----- Builder: две кнопки в ряд ----- */
.builder-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ----- Scan a sheet form ----- */
.scan-form { display: grid; gap: 16px; }
.scan-form__title { font-size: 16px; font-weight: 700; margin: 0; }

/* test picker: select + refresh on one row */
.scan-test-row { display: flex; gap: 8px; align-items: stretch; }
.scan-test-row .field { flex: 1; }
.scan-test-row .btn { flex: none; white-space: nowrap; }

/* manual-id fallback collapsed out of the main flow (U3.2) */
.scan-advanced { margin-top: 8px; }
.scan-advanced > summary {
  cursor: pointer; font-size: 13px; color: var(--ink-3); font-weight: 500;
  list-style: none; padding: 4px 0; width: max-content;
}
.scan-advanced > summary:hover { color: var(--indigo); }
.scan-advanced[open] > summary { margin-bottom: 8px; }

/* ===== LOGIN GATE (Слой 1: вход через Google) — перекрывает всё до входа ===== */
.login-gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg-soft, #F6F8FB);
}
.login-gate[hidden] { display: none; }
.login-card {
  width: 100%; max-width: 400px; text-align: center;
  background: #fff; border: 1px solid var(--card-border, #E6EAF0);
  border-radius: 16px; padding: 36px 28px;
  box-shadow: 0 12px 32px -24px rgba(10, 35, 66, .22);
}
.login-card__mark { display: inline-flex; margin-bottom: 12px; }
.login-card__title { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #0A2342); }
.login-card__sub { margin: 0 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2, #44556B); }
.login-card__btn { display: flex; justify-content: center; min-height: 44px; }
.login-card__hint { margin: 14px 0 0; min-height: 18px; font-size: 13px; color: var(--ink-3, #6B7A90); }
.login-card__trust { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline, #EEF2F7);
  font-size: 12.5px; color: var(--ink-3, #6B7A90); }

/* Вошедший учитель + «Sign out» в футере сайдбара */
.sidebar__user { display: flex; align-items: center; gap: 8px; padding: 0 4px 10px; }
.sidebar__user[hidden] { display: none; }
.sidebar__user-avatar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip-bg, #F0F4FA); color: var(--indigo, #1E83E0); font-size: 12px; font-weight: 700;
}
.sidebar__user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar__user-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink, #0A2342);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__signout { flex: 0 0 auto; background: none; border: none; padding: 2px 4px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3, #6B7A90); }
.sidebar__signout:hover { color: var(--indigo, #1E83E0); text-decoration: underline; }

/* BIG upload zone (U3.2): a tappable label; the real <input> is visually hidden */
.upload-zone {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 30px 20px;
  border: 2px dashed var(--border-strong); border-radius: var(--r-card);
  background: var(--bg-soft); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.upload-zone:hover { border-color: var(--indigo); background: var(--indigo-tint); }
/* Перетаскивание файлов над зоной — как hover, но рамка сплошная («можно бросать») */
.upload-zone--drag { border-color: var(--indigo); border-style: solid; background: var(--indigo-tint); }
.upload-zone__icon { font-size: 30px; line-height: 1; }
.upload-zone__title { font-size: 16px; font-weight: 700; color: var(--ink); }
.upload-zone__hint { font-size: 12.5px; color: var(--ink-3); max-width: 46ch; }
.upload-zone__input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.upload-zone:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.upload-files { margin: 0; font-size: 13px; font-weight: 600; color: var(--indigo); }
.upload-files__head { display: block; margin-bottom: 6px; }
.upload-files__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.upload-files__item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-field); background: var(--bg-soft);
}
.upload-files__num {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--indigo); color: #fff;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.upload-files__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 500; }
.upload-files__rm {
  flex: none; border: none; background: none; cursor: pointer; color: var(--ink-3);
  font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.upload-files__rm:hover { background: #FDE8E8; color: #C0392B; }

/* Превью-плитки загруженных страниц: миниатюра + номер порядка + ✕ (U-polish).
   Видно, ЧТО загружено и в каком порядке уйдёт на сервер. */
.upload-thumbs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.upload-thumb { position: relative; width: 96px; }
.upload-thumb__img {
  width: 96px; height: 120px; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--border); background: var(--bg-soft);
}
.upload-thumb__num {
  position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 999px; box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
}
.upload-thumb__rm {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.upload-thumb__rm:hover { background: #C0392B; }
.upload-thumb__name {
  display: block; margin-top: 4px; max-width: 96px; font-size: 11px; font-weight: 500; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* trust line at the point of doubt (U3.3) */
.trust-line {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 12px 14px; border-radius: var(--r-field);
  background: var(--sem-ok-bg); color: var(--sem-ok-ink);
  font-size: 13px; line-height: 1.5;
}
.trust-line__icon { flex: none; font-size: 15px; }
.trust-line strong { color: var(--sem-ok-ink); }

/* SCAN-1: подсказка про вертикальную съёмку (амбер-callout над зоной загрузки) */
.capture-tip {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-field);
  background: var(--sem-warn-bg); color: var(--sem-warn-ink);
  font-size: 13px; line-height: 1.5;
}
.capture-tip__icon { flex: none; font-size: 15px; }
.capture-tip strong { color: var(--sem-warn-ink); }

/* ----- REVIEW & CONFIRM (U4.1): photo left, recognized answers right ----- */
.review-card { margin-top: 18px; }
.review-grid {
  display: grid; gap: 20px; margin-top: 6px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.review-photo {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-field);
  padding: 10px; max-height: 540px; overflow: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.review-photo__img { width: 100%; height: auto; border-radius: 8px; display: block; }
.review-answers { display: grid; gap: 8px; align-content: start; max-height: 540px; overflow: auto; }
.rev-row {
  display: grid; grid-template-columns: 42px 90px 1fr; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px;
}
.rev-row.is-flagged { background: var(--sem-warn-bg); }
.rev-row__q { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rev-row__input {
  font: inherit; font-size: 14px; text-align: center; text-transform: uppercase;
  padding: 7px 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg);
}
.rev-row.is-flagged .rev-row__input { border-color: #E6B566; }
.rev-row__input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.rev-row__flag { font-size: 12px; color: var(--sem-warn-ink); }
/* Открытые (FRQ) вопросы в Review — оцениваются ИИ, не код-OMR */
.rev-frq-head { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.rev-row--frq { grid-template-columns: 60px 1fr; background: var(--indigo-ring); }
.rev-frq-note { font-size: 13px; color: var(--indigo); font-weight: 600; }
.review-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
@media (max-width: 720px) {
  .review-grid { grid-template-columns: 1fr; }
}

/* ── Честные состояния выравнивания скана (сигнал report.alignment) ──
   uncertain → предупреждающий баннер (амбер); unreadable → крупная retake-карточка. */

/* Баннер «выровнено неточно» — над обычным review. Амбер = «нужна проверка». */
.align-warn {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 16px; padding: 12px 14px;
  border: 1px solid #EAD9AE; border-radius: var(--r-field);
  background: var(--sem-warn-bg); color: var(--sem-warn-ink);
  font-size: 14px; font-weight: 500; line-height: 1.5;
}
.align-warn__icon { font-size: 16px; line-height: 1.4; }

/* Retake-карточка «лист не распознан» — красная рамка, показывается ВМЕСТО отчёта. */
.retake-card {
  margin: 4px 0 4px; padding: 18px 18px 16px;
  border: 1px solid var(--sem-bad-bg); border-left: 4px solid var(--sem-bad-ink);
  border-radius: var(--r-field); background: var(--sem-bad-bg);
}
.retake-card__head { display: flex; align-items: center; gap: 10px; }
.retake-card__icon { font-size: 22px; color: var(--sem-bad-ink); line-height: 1; }
.retake-card__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--sem-bad-ink); }
.retake-card__body { margin: 8px 0 12px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.retake-card__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.retake-card__thumb {
  width: 96px; height: 128px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border); background: var(--bg);
}
.retake-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Мелкий флаг «⚠ переснять» рядом с бейджем ученика в сетке класса. */
.align-flag {
  display: inline-block; margin-left: 6px;
  font-size: 0.76rem; font-weight: 600; white-space: nowrap;
  color: var(--sem-warn-ink); cursor: help;
}
.scan-form__sub { margin: -6px 0 0; }
#scan-test-refresh { margin-top: 8px; }

@media (max-width: 480px) {
  .builder-actions .btn { width: 100%; }
}

/* Строка-чекбокс (напр. «ровный скан» для движка OMRChecker) */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted, #4b5563);
  cursor: pointer;
}
.checkbox-row input { margin: 0; }

/* ==========================================================
   ICON POLISH (ui-ux-pro-max anti-pattern #1: SVG icons, not emoji)
   Hub + upload icons render in brand blue; inline icons align to text.
   Reuses the same Lucide-SVG system as the sidebar nav.
   ========================================================== */
.hub-card__icon,
.upload-zone__icon { line-height: 0; color: var(--indigo); }
/* inline icon inside the text link "See an example report" */
.link-btn svg { vertical-align: -3px; margin-right: 2px; }
/* trust-line shield inherits the green trust colour */
.trust-line__icon svg { display: block; }

/* ==========================================================
   MY TESTS — список сохранённых тестов (карточки-«папки») + редактор ключа
   ========================================================== */
.mytests-status { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.mytests-status[data-state="err"] { color: var(--sem-bad-ink); font-weight: 600; }

/* папки-фильтры (чипы) над сеткой тестов */
.mytests-folders { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.folder-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 600;
  transition: border-color .1s, background .1s, color .1s;
}
.folder-chip:hover { border-color: var(--indigo); color: var(--indigo); }
.folder-chip:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.folder-chip.is-on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.folder-chip__n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--bg-soft); color: var(--ink-3); font-size: 11px; font-weight: 700;
}
.folder-chip.is-on .folder-chip__n { background: rgba(255,255,255,.25); color: #fff; }
.folder-chip--new { border-style: dashed; color: var(--indigo); }
.folder-chip--new:hover { background: var(--indigo-tint); }
.mytests-empty-folder { color: var(--ink-2); font-size: 14.5px; padding: 8px 2px; }

/* выбор папки в редакторе теста */
.keyedit__folder { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.keyedit__folder-label { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.keyedit__folder-select { max-width: 280px; }

/* панель действий выбранной папки (Add exams…) */
.mytests-folder-actions { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mytests-folder-actions:empty { display: none; }
.mytests-folder-actions__note { font-size: 13px; color: var(--ink-3); }

/* пикер «добавить экзамены в папку» */
.picker-all {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  margin: 4px 0 12px; font-size: 14px; color: var(--ink-2);
}
.picker-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 52vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px; padding: 6px;
}
.picker-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 10px; border-radius: 8px;
}
.picker-row:hover { background: var(--bg-soft); }
.picker-row__title { font-weight: 600; font-size: 14px; color: var(--ink); flex: 0 1 auto; }
.picker-row__meta { font-size: 12px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.picker-row__cur { color: var(--indigo); font-weight: 600; }

.mytests-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.test-card {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 14px 14px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-1); transition: border-color .12s, box-shadow .12s, transform .06s;
}
.test-card:hover { border-color: var(--indigo); box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.test-card:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.test-card:active { transform: translateY(1px); }
.test-card__icon {
  flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--indigo-tint); color: var(--indigo);
}
.test-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.test-card__title { font-weight: 700; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.test-card__meta { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.test-card__open { flex: none; font-size: 13px; font-weight: 600; color: var(--indigo); }

/* ── My tests / Answer keys: Google-Drive-стиль (крошки + папки/файлы) ── */
.drive-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.breadcrumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.crumb { background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--indigo);
  padding: 4px 6px; border-radius: 6px; }
.crumb:hover { background: var(--indigo-tint); }
.crumb:last-of-type { color: var(--ink); }
.crumb__sep { color: var(--ink-3); }

.drive-card {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 14px; cursor: pointer; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
  transition: border-color .12s, box-shadow .12s, transform .06s; font: inherit;
}
.drive-card:hover { border-color: var(--indigo); box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.drive-card:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.drive-card:active { transform: translateY(1px); }
.drive-card__icon { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--indigo-tint); color: var(--indigo); }
.drive-card__icon--file { background: var(--bg-soft); color: var(--ink-2); }
.drive-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.drive-card__title { font-weight: 700; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-card__meta { font-size: 12px; color: var(--ink-3); }
.drive-card--folder .drive-card__title { color: var(--ink); }
.drive-card__menu { flex: none; background: none; border: none; cursor: pointer; color: var(--ink-3);
  font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 6px; opacity: 0; transition: opacity .1s; }
.drive-card:hover .drive-card__menu, .drive-card:focus-within .drive-card__menu { opacity: 1; }
.drive-card__menu:hover { background: var(--bg-soft); color: var(--ink); }
/* «🖨 Печать бланка» на карточке теста — видимое действие (не прячем, как меню) */
.drive-card__print { flex: none; background: none; border: 1px solid var(--border); cursor: pointer; color: var(--ink-2);
  font-size: 15px; line-height: 1; padding: 6px 9px; border-radius: 8px; opacity: .85; transition: opacity .1s, background .1s, border-color .1s; }
.drive-card:hover .drive-card__print { opacity: 1; }
.drive-card__print:hover { background: var(--indigo-tint); color: var(--indigo); border-color: var(--indigo); }

/* ==========================================================
   ANSWER-KEY CARD (редизайн): вертикальная карточка теста —
   колба + заголовок + футер «saved … · Open →». Переопределяет
   .drive-card--file за счёт порядка (тот же класс-вес, ниже в файле).
   ========================================================== */
.drive-card--file.keycard {
  flex-direction: column; align-items: stretch; gap: 0; padding: 0;
  border-color: var(--card-border);
}
.drive-card--file.keycard:hover {
  border-color: #CBDAEE; transform: translateY(-2px);
  box-shadow: 0 18px 34px -24px rgba(10, 35, 66, .32);
}
.keycard__top { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 13px; }
.keycard__icon {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 12px; color: var(--t-muted);
}
.keycard__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.keycard__title { font-size: 15.5px; font-weight: 700; color: var(--t-ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keycard__meta { font-size: 12.5px; color: var(--t-muted); }
.keycard__print {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--card-border); border-radius: 9px; background: #fff; color: var(--t-muted);
  cursor: pointer; opacity: .9; transition: color .12s, border-color .12s, opacity .12s;
}
.keycard:hover .keycard__print { opacity: 1; }
.keycard__print:hover { color: var(--indigo); border-color: var(--indigo); }
.keycard__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--hairline-2);
  font-size: 12.5px; color: var(--t-faint);
}
.keycard__open { display: inline-flex; align-items: center; gap: 5px; color: var(--indigo); font-weight: 600; }

/* ==========================================================
   ANSWER-KEY SLIDE-OVER (read-only превью ключа).
   ========================================================== */
.keyso-scrim { position: fixed; inset: 0; background: rgba(10, 35, 66, .45); z-index: 60; }
.keyso {
  position: fixed; top: 0; right: 0; height: 100%; width: min(500px, 100%); z-index: 61;
  display: flex; flex-direction: column; background: #F6F8FB;
  box-shadow: -24px 0 60px -28px rgba(10, 35, 66, .5);
  transform: translateX(100%); transition: transform .22s ease;
}
.keyso.is-open { transform: translateX(0); }
.keyso__head { position: relative; padding: 20px 22px 16px; background: #fff; border-bottom: 1px solid var(--card-border); }
.keyso__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--t-faint); }
.keyso__close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--card-border); background: #fff; color: var(--t-muted); cursor: pointer; font-size: 14px;
  transition: color .12s, border-color .12s;
}
.keyso__close:hover { color: var(--indigo); border-color: var(--indigo); }
.keyso__id { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.keyso__flask {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 13px; color: var(--indigo);
}
.keyso__title { font-size: 18px; font-weight: 700; color: var(--t-ink); line-height: 1.25; }
.keyso__sub { font-size: 12.5px; color: var(--t-muted); margin-top: 2px; }
.keyso__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.keyso__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keyso__tile { background: #fff; border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 10px; text-align: center; }
.keyso__tnum { font-size: 21px; font-weight: 800; color: var(--t-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.keyso__tlab { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--t-faint); margin-top: 3px; }
.keyso__card { background: #fff; border: 1px solid var(--card-border); border-radius: 14px; padding: 15px 16px; }
.keyso__ch { font-size: 14px; font-weight: 700; color: var(--t-ink); }
.keyso__chint { font-size: 12px; color: var(--t-muted); margin: 2px 0 12px; }
.keyso__mcqgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.keyso-mcq { display: flex; align-items: center; gap: 8px; }
.keyso-qn { font-size: 12.5px; font-weight: 700; color: var(--t-muted); min-width: 30px; font-variant-numeric: tabular-nums; }
.keyso-bubs { display: inline-flex; gap: 5px; }
.keyso-bub {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--card-border); background: #fff; color: #CBD5E1; font-size: 11.5px; font-weight: 700;
}
.keyso-bub.is-on { background: var(--indigo); border-color: var(--indigo); color: #fff; box-shadow: 0 1px 3px rgba(30, 131, 224, .4); }
.keyso-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hairline); }
.keyso-row:first-of-type { border-top: 0; }
.keyso-qbadge {
  flex: none; min-width: 40px; height: 28px; padding: 0 9px; display: grid; place-items: center;
  background: var(--chip-bg); border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--t-body);
  font-variant-numeric: tabular-nums;
}
.keyso-ans { font-size: 14px; font-weight: 700; color: var(--t-ink); font-variant-numeric: tabular-nums; }
.keyso-frq-note { font-size: 13px; color: var(--t-body); line-height: 1.45; }
.keyso__foot { display: flex; gap: 8px; padding: 14px 16px; background: #fff; border-top: 1px solid var(--card-border); }
.keyso__use { flex: 1; }

/* Карточка «Syllabus topics» в слайд-овере: список Q→тема + загрузка PDF */
.keyso-topiclist { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.keyso-trow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hairline); }
.keyso-trow:first-child { border-top: 0; }
.keyso-ttitle { font-size: 13.5px; color: var(--t-body); font-weight: 500; }
.keyso-tag-btn { width: 100%; }
.keyso-tag-status { display: block; margin-top: 8px; font-size: 12.5px; color: var(--t-muted); }

@media (max-width: 560px) { .keyso { width: 100%; } }

/* поповер-меню папки */
.drive-menu { position: absolute; top: 48px; right: 10px; z-index: 20; min-width: 180px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.16); padding: 6px; }
.drive-menu__item { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font: inherit; padding: 8px 10px; border-radius: 6px; color: var(--sem-bad-ink); }
.drive-menu__item:hover { background: var(--sem-bad-bg); }
/* Нейтральный пункт меню (Rename) — не красный, как Delete. */
.drive-menu__item--plain { color: var(--ink); }
.drive-menu__item--plain:hover { background: var(--bg-soft); }
.drive-menu--confirm { padding: 12px; min-width: 230px; cursor: default; }
.drive-menu__msg { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
.drive-menu__row { display: flex; gap: 8px; }
.drive-menu__del { color: var(--sem-bad-ink); border-color: var(--sem-bad-bg); }
.drive-menu__del:hover { background: var(--sem-bad-bg); }

/* ── Checks внутри answer key (Task A): список сканов этого теста ── */
.keyedit__checks { margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.keyedit__checks-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.keyedit__checks-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 7px; border-radius: 999px; background: var(--indigo-tint); color: var(--indigo-deep); font-size: 12px; font-weight: 700; }
.checks-list { display: flex; flex-direction: column; gap: 6px; }
.check-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); transition: border-color .1s, background .1s; }
.check-row:hover { border-color: var(--indigo); background: var(--indigo-tint); }
.check-row:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--indigo-ring); }
.check-row__who { font-weight: 600; color: var(--ink); flex: 1 1 auto; }
.check-row__date { color: var(--ink-3); font-size: 13px; }
.check-row__score { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.check-row__open { color: var(--indigo); font-weight: 600; font-size: 13px; flex: none; }
.keyedit__report { margin-top: 14px; }

/* ---- редактор ключа одного теста ---- */
.keyedit { padding: clamp(18px, 3vw, 24px); }
.keyedit__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.keyedit__print { margin-left: auto; flex: none; } /* пара «Print/Scan» — вправо вместе */
.keyedit__scan { flex: none; }
.keyedit__titlewrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.keyedit__title { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
/* Редактируемое название теста (answer key): выглядит как заголовок, но правится. */
.keyedit__title-input {
  font: inherit; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--t-ink);
  width: 100%; max-width: 340px; padding: 4px 8px; margin: -4px -8px 0;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
}
.keyedit__title-input:hover { border-color: var(--card-border); }
.keyedit__title-input:focus { outline: none; border-color: var(--indigo); box-shadow: var(--focus-ring); background: #fff; }
.keyedit__id { font-size: 12px; color: var(--ink-3); }
.keyedit__hint { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 4px 0 18px; }
.keyedit__block { padding-top: 16px; }
.keyedit__block + .keyedit__block { margin-top: 16px; border-top: 1px solid var(--border); }
.keyedit__h { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.keyedit__note { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.keyedit__rows { display: flex; flex-direction: column; gap: 8px; }
.keyedit__row { display: flex; align-items: center; gap: 12px; }
.keyedit__q {
  flex: none; min-width: 42px; font-weight: 700; font-size: 14px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.keyedit__opts { display: flex; flex-wrap: wrap; gap: 6px; }
/* letter key button (ZipGrade-подобный) */
.lk {
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 9px; background: var(--bg);
  font: inherit; font-weight: 700; font-size: 14px; color: var(--ink-2);
  transition: border-color .1s, background .1s, color .1s;
}
.lk:hover { border-color: var(--indigo); color: var(--indigo); }
.lk:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.lk.is-on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.keyedit__num {
  width: 96px; font: inherit; font-size: 14px; text-align: center;
  padding: 7px 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg);
}
.keyedit__num:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.keyedit__row--marks { margin-bottom: 4px; }
/* открытые вопросы: эталон (модельный ответ) на каждый FRQ */
.keyedit__frqs { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.keyedit__frq { display: flex; align-items: flex-start; gap: 12px; }
.keyedit__frq .keyedit__q { padding-top: 8px; }
.keyedit__model {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; line-height: 1.45; resize: vertical;
  padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); color: var(--ink);
}
.keyedit__model:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.keyedit__model::placeholder { color: var(--ink-3); }
/* кнопки в шапке раздела (Refresh + Create a test) */
.view__head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.keyedit__actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
/* кнопка удаления теста — красная, отодвинута вправо */
.keyedit__delete { margin-left: auto; color: var(--sem-bad-ink); border-color: var(--sem-bad-bg); }
.keyedit__delete:hover { background: var(--sem-bad-bg); border-color: var(--sem-bad-ink); color: var(--sem-bad-ink); }
.keyedit__status { font-size: 13.5px; font-weight: 600; }
.keyedit__status[data-state="ok"]   { color: var(--sem-ok-ink); }
.keyedit__status[data-state="warn"] { color: var(--sem-warn-ink); }
.keyedit__status[data-state="err"]  { color: var(--sem-bad-ink); }

/* ===========================================================
   CLASSES — controls (class picker + "New class" form) and
   the per-class analytics pickers. Built on existing tokens.
   =========================================================== */
.class-controls { display: flex; flex-direction: column; gap: 14px; }
/* MYCLASS-3: панель действий выбранного класса (Scan sheets for this class) */
.class-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.class-actions__hint { font-size: 13px; color: var(--ink-3); }

/* MYCLASS-1: классы списком (карточки-чипы) вместо выпадашки */
.class-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.class-list__empty { color: var(--ink-3); font-size: 14px; margin: 0; }
.class-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 600;
  transition: border-color .1s, background .1s, color .1s;
}
.class-chip:hover { border-color: var(--indigo); color: var(--indigo); }
.class-chip:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.class-chip.is-on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.class-chip__n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--bg-soft); color: var(--ink-3); font-size: 11px; font-weight: 700;
}
.class-chip.is-on .class-chip__n { background: rgba(255,255,255,.25); color: #fff; }
/* выпадашка #class-picker заменена списком — прячем её и подпись (логика на ней остаётся) */
#class-picker, label[for="class-picker"] { display: none; }
.class-controls__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.class-controls__label { font-weight: 600; color: var(--ink); }
.class-controls__select { min-width: 240px; max-width: 360px; }
.new-class-form { display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border); padding-top: 14px; }
/* атрибут hidden должен реально прятать форму (иначе display:flex выше его перебивает) */
.new-class-form[hidden] { display: none; }
.new-class-form__row { display: flex; gap: 10px; flex-wrap: wrap; }
.new-class-form__row .field { flex: 1 1 200px; }
.new-class-form__actions { display: flex; align-items: center; gap: 10px; }
.new-class-form__msg { color: var(--muted); font-size: 0.9rem; }
.new-class-form code { background: var(--indigo-tint); color: var(--indigo-deep);
  padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }

/* «+» в углу — круглая кнопка создания класса (Telegram/WhatsApp-стиль) */
.class-add-fab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  border: none; background: var(--indigo); color: #fff;
  font-size: 26px; line-height: 1; font-weight: 400;
  box-shadow: 0 2px 8px rgba(30,131,224,.35); transition: background .12s, transform .12s, box-shadow .12s;
}
.class-add-fab:hover { background: var(--indigo-deep); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30,131,224,.4); }
.class-add-fab:active { transform: translateY(0); }
.class-add-fab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--indigo-ring); }
.class-add-fab span { margin-top: -2px; }

/* Пустой стейт: большая плитка «создать первый класс» */
.class-add-tile {
  display: flex; align-items: center; gap: 14px; width: 100%; cursor: pointer; text-align: left;
  padding: 18px 20px; border-radius: var(--r-card, 14px);
  border: 1.5px dashed var(--border); background: var(--bg); color: var(--ink-2);
  font: inherit; transition: border-color .12s, background .12s;
}
.class-add-tile:hover { border-color: var(--indigo); background: var(--indigo-tint); }
.class-add-tile:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-ring); }
.class-add-tile__plus {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 999px; background: var(--indigo); color: #fff;
  font-size: 24px; line-height: 1; margin-top: -2px;
}
.class-add-tile__text { display: flex; flex-direction: column; gap: 2px; }
.class-add-tile__text strong { color: var(--ink); font-size: 15px; }
.class-add-tile__hint { color: var(--ink-3); font-size: 13px; }

/* Форма нового класса: поля + слоты учеников */
.new-class-form__title { font-weight: 700; color: var(--ink); font-size: 16px; margin: 0; }
.new-class-form__field { display: flex; flex-direction: column; gap: 6px; }
.student-slots { display: flex; flex-direction: column; gap: 8px; }
.student-slot { display: flex; align-items: center; gap: 10px; }
.student-slot__num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-3);
  font-size: 12px; font-weight: 700;
}
.student-slot__input { flex: 1 1 auto; }

/* ===========================================================
   GRADEBOOK (My class) — Kundelik-стиль: ученики × экзамены.
   =========================================================== */
.class-detail-head { margin: 4px 0 14px; }
.class-detail-head__name { font-size: 20px; font-weight: 700; color: var(--ink); }
.class-detail-head__desc { margin-top: 4px; color: var(--ink-3); font-size: 14px; }
.class-detail-head__desc[hidden] { display: none; }

.gradebook-card { padding: 0; overflow: hidden; }
.gradebook-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gradebook { border-collapse: collapse; width: 100%; font-size: 14px; }
.gradebook th, .gradebook td { border-bottom: 1px solid var(--border); padding: 10px 14px; text-align: center; }
.gradebook thead th { background: var(--bg-soft); color: var(--ink-2); font-weight: 600;
  position: sticky; top: 0; vertical-align: bottom; }
/* первый столбец — ученик; «приклеен» слева при горизонтальной прокрутке */
.gradebook__corner, .gradebook__student {
  text-align: left; position: sticky; left: 0; z-index: 1; background: var(--bg);
  min-width: 160px;
}
.gradebook thead .gradebook__corner { background: var(--bg-soft); }
.gradebook__student { font-weight: 600; color: var(--ink); }
.gradebook__student-name { display: inline; }
.gradebook__student-id { color: var(--ink-3); font-weight: 500; font-size: 12px; margin-left: 6px; }
.gradebook__student .row-remove { float: right; margin-left: 8px; opacity: 0; transition: opacity .1s; }
.gradebook__student:hover .row-remove { opacity: 1; }
/* столбец-экзамен: название сверху + дата */
.gradebook__exam { min-width: 92px; }
.gradebook__exam-name { display: block; font-weight: 700; color: var(--ink); }
.gradebook__exam-date { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 500; margin-top: 2px; }
/* ячейка-балл */
.gradebook__cell { font-variant-numeric: tabular-nums; }
.gradebook__score { display: block; font-weight: 700; }
.gradebook__pct { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.gradebook__cell--empty { color: var(--ink-4, #c2c9d6); }
.gradebook__cell.is-good .gradebook__score { color: var(--sem-ok-ink, #1a7f4b); }
.gradebook__cell.is-mid  .gradebook__score { color: var(--sem-warn-ink, #9a6a00); }
.gradebook__cell.is-low  .gradebook__score { color: var(--sem-bad-ink, #b3261e); }
/* столбец «+ New exam» */
.gradebook__addcol { min-width: 64px; }
.gradebook__addexam {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  width: 30px; height: 30px; border-radius: 999px; border: 1px dashed var(--border);
  background: var(--bg); color: var(--indigo); font-size: 18px; line-height: 1; font: inherit;
}
.gradebook__addexam:hover { border-color: var(--indigo); background: var(--indigo-tint); }
.gradebook__addexam:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--indigo-ring); }
.gradebook__addexam-label { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 3px; }

/* три статы под журналом */
.class-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.class-stats[hidden] { display: none; }
.class-stat {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-card, 14px);
  padding: 14px 16px; text-align: center;
}
.class-stat__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-3); }
.class-stat__value { display: block; font-size: 26px; font-weight: 700; color: var(--ink); margin-top: 4px;
  font-variant-numeric: tabular-nums; }
.class-stat__value--high { color: var(--sem-ok-ink, #1a7f4b); }
.class-stat__value--low { color: var(--sem-bad-ink, #b3261e); }
@media (max-width: 560px) {
  .class-stats { grid-template-columns: 1fr; }
  .class-stat { display: flex; align-items: center; justify-content: space-between; text-align: left; }
  .class-stat__value { margin-top: 0; }
}

/* ===========================================================
   MY CLASS v2 — два уровня: корень (карточки-папки) + деталь.
   =========================================================== */
/* Корень: классы как «папки» (Google-Drive-стиль) + плитка «+». */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.class-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  text-align: left; cursor: pointer; padding: 18px; min-height: 118px;
  border: 1px solid var(--border); border-radius: var(--r-card, 14px); background: var(--bg);
  font: inherit; transition: border-color .12s, box-shadow .12s, transform .08s;
}
.class-card:hover { border-color: var(--indigo); box-shadow: 0 4px 14px rgba(30,131,224,.12); }
.class-card:active { transform: translateY(1px); }
.class-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--indigo-ring); }
.class-card__icon { color: var(--indigo); }
.class-card__name { font-weight: 700; color: var(--ink); font-size: 15px; }
.class-card__meta { color: var(--ink-3); font-size: 13px; margin-top: auto; }
.class-card--add { align-items: center; justify-content: center; border-style: dashed; color: var(--ink-3); }
.class-card--add:hover { color: var(--indigo); background: var(--indigo-tint); }
.class-card--add .class-card__name { color: inherit; font-weight: 600; }
.class-card__plus { font-size: 30px; line-height: 1; color: var(--indigo); }

/* Деталь: шапка с «назад» + редактируемое имя. */
.back-link { background: none; border: none; color: var(--indigo); cursor: pointer; font: inherit;
  font-weight: 600; padding: 0; margin-bottom: 8px; }
.back-link:hover { text-decoration: underline; }
.class-detail__titlewrap { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.class-name-input {
  font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--ink);
  border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; margin-left: -8px;
  background: transparent; max-width: 540px;
}
.class-name-input:hover { border-color: var(--border); }
.class-name-input:focus { outline: none; border-color: var(--indigo); background: var(--bg); }
.class-detail__msg { font-size: 12.5px; color: var(--ink-3); min-height: 1em; }

/* Участники: код + имя + ⋮удалить; пустые слоты для ввода. */
.participants-card__head { margin-bottom: 12px; }
.participants { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.participant { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.participant__code {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 8px;
  border-radius: 8px; background: var(--bg-soft); color: var(--ink-3); font-size: 12.5px; font-weight: 700;
}
.participant__code--new { color: var(--indigo); background: var(--indigo-tint); }
.participant__name { flex: 1 1 auto; font-weight: 600; color: var(--ink); }
.participant__input { flex: 1 1 auto; }
.participant__menu { background: none; border: none; cursor: pointer; color: var(--ink-3);
  font-size: 18px; line-height: 1; padding: 4px 10px; border-radius: 6px; }
.participant__menu:hover { background: var(--bg-soft); color: var(--ink); }
.participant__confirm { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--ink-2); }
.participant__do-remove { color: var(--sem-bad-ink); border-color: var(--sem-bad-bg); }
.participant__do-remove:hover { background: var(--sem-bad-bg); }

.class-create-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
/* атрибут hidden должен реально прятать (display:flex иначе перебивает hidden) */
.class-create-bar[hidden], .class-actions[hidden] { display: none; }

/* Журнал: строка средних снизу под каждым столбцом. */
.gradebook tfoot th, .gradebook tfoot td { border-top: 2px solid var(--border); background: var(--bg-soft); }
.gradebook__avg-label { text-align: left; color: var(--ink-2); font-weight: 700; }
.gradebook__avg { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ===========================================================
   GRADEBOOK REDESIGN (.gb-*) — heatmap-стиль журнал по макету.
   Токены переиспользуем (--band-*, --surface, --hairline …).
   =========================================================== */
/* Шапка детали: имя + пилюля Term + подзаголовок слева, % / Marks справа. */
.gb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.gb-head__titlerow { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.gb-term-pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px;
  background: var(--chip-bg); border: 1px solid var(--chip-border);
  font-size: 12px; font-weight: 600; color: var(--t-body);
}
.gb-head__sub { margin: 9px 0 0; font-size: 14.5px; color: var(--t-muted); }
/* сегментированный тумблер % / Marks на треке */
.gb-unit { display: inline-flex; gap: 3px; padding: 3px; background: var(--hairline);
  border: 1px solid var(--chip-border); border-radius: 10px; }
.gb-unit__btn {
  min-height: 32px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 600;
  border-radius: 7px; border: 1px solid transparent; cursor: pointer;
  background: transparent; color: var(--t-muted);
}
.gb-unit__btn.is-on {
  background: var(--surface); color: var(--indigo); border-color: var(--chip-border);
  box-shadow: 0 1px 2px rgba(10,35,66,.06);
}
.gb-unit__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Карточка журнала: белая, скруглённая, приподнятая, со скроллом. */
.gradebook-card.gb-card {
  border: 1px solid var(--card-border); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(10,35,66,.04), 0 12px 32px -24px rgba(10,35,66,.22);
}
.gb-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px;
  font-variant-numeric: tabular-nums; }
.gb-table th, .gb-table td { border: none; padding: 0; }

/* thead */
.gb-corner {
  position: sticky; left: 0; z-index: 3; text-align: left; vertical-align: bottom;
  padding: 15px 18px; background: #FCFDFE; border-bottom: 1px solid var(--track-border);
  box-shadow: 9px 0 16px -14px rgba(10,35,66,.28);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t-faint); min-width: 226px;
}
.gb-th {
  vertical-align: bottom; text-align: center; padding: 13px 8px; background: #FCFDFE;
  border-bottom: 1px solid var(--track-border); border-left: 1px solid #F2F5F9; min-width: 104px;
}
.gb-th__date { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #B6C2D2; }
.gb-th__label { margin-top: 5px; font-size: 12.5px; font-weight: 600; color: #1B2F4D; line-height: 1.2; }
.gb-th__max { margin-top: 3px; font-size: 10.5px; color: #A8B6C8; }
.gb-th--avg {
  vertical-align: bottom; text-align: center; padding: 13px 10px; background: #F4F8FE;
  border-bottom: 1px solid #DCE6F4; border-left: 1px solid #DCE6F4; min-width: 92px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo);
}
/* столбец «+ New exam» в шапке остаётся справа от Average */
.gb-th--add { vertical-align: bottom; text-align: center; padding: 13px 8px; background: #FCFDFE;
  border-bottom: 1px solid var(--track-border); border-left: 1px solid #F2F5F9; min-width: 64px; }

/* Кликабельный заголовок экзамена (есть testId) + меню действий по нему. */
.gb-th--act { cursor: pointer; }
.gb-th--act:hover { background: #F1F6FD; }
.gb-th--act:hover .gb-th__label { color: var(--indigo); }
.gb-th--act:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--indigo); }
.gb-exam-menu {
  position: fixed; z-index: 1200; min-width: 190px; padding: 6px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(10, 35, 66, .18);
}
.gb-exam-menu__item {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13.5px; padding: 9px 10px; border-radius: 7px; color: var(--t-ink); white-space: nowrap;
}
.gb-exam-menu__item:hover { background: var(--bg-soft); }

/* tbody — строки-ученики */
.gb-row { cursor: pointer; }
.gb-stu {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  border-bottom: 1px solid var(--hairline); box-shadow: 9px 0 16px -14px rgba(10,35,66,.28);
}
.gb-row:hover .gb-stu { background: #F8FAFD; }
.gb-stu__inner { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 18px; min-height: 54px; }
.gb-avatar {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #42587A; background: #EDF1F8; box-shadow: inset 0 0 0 1px var(--track-border);
}
.gb-stu__name { margin: 0; font-size: 14px; font-weight: 600; color: #1B2F4D;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.gb-stu__meta { margin: 1px 0 0; font-size: 11.5px; color: #A8B6C8; }
.gb-cell { border-bottom: 1px solid var(--hairline); border-left: 1px solid #F4F7FA; }
.gb-cell__fill {
  display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 6px 10px;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.gb-cell__fill--ok    { background: var(--band-ok-bg);    color: var(--band-ok-ink); }
.gb-cell__fill--watch { background: var(--band-watch-bg); color: var(--band-watch-ink); }
.gb-cell__fill--risk  { background: var(--band-risk-bg);  color: var(--band-risk-ink); }
.gb-cell__fill--empty { background: var(--surface); color: #CBD5E1; font-size: 15px; }
/* столбец средних per-student (подсвеченный) */
.gb-avgcell { border-bottom: 1px solid var(--hairline); border-left: 1px solid #DCE6F4; background: #F8FBFF; }
.gb-avgcell__inner { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; padding: 6px 10px; }
.gb-avgcell__num { font-size: 15px; font-weight: 800; color: var(--t-ink); letter-spacing: -.01em; }
.gb-avgcell__num--empty { color: #C2CCDA; }
.gb-delta { font-weight: 700; }
.gb-delta--up   { font-size: 10.5px; color: #1F9254; }
.gb-delta--down { font-size: 10.5px; color: #C0392B; }
.gb-delta--flat { font-size: 11px; color: #C2CCDA; }
.gb-addcell { border-bottom: 1px solid var(--hairline); border-left: 1px solid #F4F7FA; }

/* tfoot — строка «Class average» */
.gb-foot-label {
  position: sticky; left: 0; z-index: 2; background: #F4F6FA; border-top: 1.5px solid var(--control-border);
  box-shadow: 9px 0 16px -14px rgba(10,35,66,.28);
}
.gb-foot-label__inner { display: flex; align-items: center; gap: 9px; padding: 14px 18px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--t-body); }
.gb-foot-cell { padding: 14px 8px; text-align: center; background: #F4F6FA;
  border-top: 1.5px solid var(--control-border); border-left: 1px solid var(--card-border);
  font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.gb-foot-cell--ok    { color: var(--band-ok-ink); }
.gb-foot-cell--watch { color: var(--band-watch-ink); }
.gb-foot-cell--risk  { color: var(--band-risk-ink); }
.gb-foot-cell--empty { color: #C2CCDA; }
.gb-foot-overall { padding: 14px 10px; text-align: center; background: #E9F1FB;
  border-top: 1.5px solid #CBDAEE; border-left: 1px solid #CBDAEE;
  font-size: 16px; font-weight: 800; color: var(--t-ink); letter-spacing: -.01em; }
.gb-foot-add { padding: 14px 8px; background: #F4F6FA; border-top: 1.5px solid var(--control-border);
  border-left: 1px solid var(--card-border); }

/* Легенда */
.gb-legend { margin-top: 15px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 0 2px; }
.gb-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #8A98AC; }
.gb-legend__sw { width: 10px; height: 10px; border-radius: 3px; }
.gb-legend__sw--ok    { background: #DDF0E6; box-shadow: inset 0 0 0 1px #BFE6CE; }
.gb-legend__sw--watch { background: #FBF1DC; box-shadow: inset 0 0 0 1px #EAD9B0; }
.gb-legend__sw--risk  { background: #FCE6E3; box-shadow: inset 0 0 0 1px #F3C8C2; }
.gb-legend__hint { display: inline-flex; align-items: center; font-size: 12px; color: #A8B6C8; margin-left: auto; }

/* Тост (демо-действия) */
.gb-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1100;
  padding: 12px 20px; border-radius: 999px; background: #0A2342; color: #fff;
  font-size: 13.5px; font-weight: 600; box-shadow: 0 18px 40px -16px rgba(10,35,66,.7);
}
.gb-toast[hidden] { display: none; }

/* ===========================================================
   STUDENT-PROFILE SLIDE-OVER (.sp-*)
   =========================================================== */
.sp-scrim {
  position: fixed; inset: 0; z-index: 1000; background: rgba(10,35,66,0.45);
  display: flex; justify-content: flex-end;
}
.sp-scrim[hidden] { display: none; }
.sp-panel {
  width: min(440px, 100%); height: 100%; background: var(--bg, #F6F8FB);
  box-shadow: -24px 0 60px -28px rgba(10,35,66,0.5);
  display: flex; flex-direction: column; outline: none;
}
.sp-head { flex: none; padding: 20px 22px; background: var(--surface); border-bottom: 1px solid var(--card-border); }
.sp-head__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.sp-close {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--card-border); background: var(--surface); color: var(--t-body); cursor: pointer;
  font-size: 15px; line-height: 1;
}
.sp-close:hover { border-color: var(--indigo); color: var(--indigo); }
.sp-head__id { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.sp-avatar { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%;
  font-size: 17px; font-weight: 700; color: #fff; }
.sp-name { margin: 0; font-size: 19px; font-weight: 700; color: var(--t-ink); }
.sp-meta { margin: 2px 0 0; font-size: 13px; color: var(--t-muted); }

.sp-body { flex: 1; overflow-y: auto; padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 16px; }
.sp-card { background: var(--surface); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px 18px; }
.sp-card--score { display: flex; align-items: center; gap: 18px; }
.sp-ring { position: relative; width: 74px; height: 74px; border-radius: 50%; flex: none; }
.sp-ring__hole { position: absolute; inset: 7px; border-radius: 50%; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sp-ring__num { font-size: 20px; font-weight: 700; color: var(--t-ink); line-height: 1; }
.sp-ring__cap { font-size: 9px; color: var(--t-faint); }
.sp-score__side { flex: 1; min-width: 0; }
.sp-score__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-badge { font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; }
.sp-badge--ok    { background: #EAF6EF; color: #197A4B; }
.sp-badge--watch { background: #FBF3E2; color: #B7791F; }
.sp-badge--risk  { background: #FEF1F0; color: #B42318; }
.sp-scoredelta { font-size: 12.5px; font-weight: 700; }
.sp-scoredelta--up   { color: #197A4B; }
.sp-scoredelta--down { color: #B42318; }
.sp-scoredelta--flat { color: var(--t-faint); font-weight: 600; }
.sp-spark { margin-top: 10px; overflow: visible; display: block; }

.sp-card__title { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; color: var(--t-ink); }
.sp-mastery { display: flex; flex-direction: column; gap: 11px; }
.sp-mrow__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.sp-mrow__topic { font-size: 13px; color: var(--t-body); }
.sp-mrow__pct { font-size: 12.5px; font-weight: 700; }
.sp-track { height: 8px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.sp-track__fill { height: 100%; border-radius: 999px; }

.sp-checks { display: flex; flex-direction: column; gap: 9px; }
.sp-checkrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--hairline-2); border-radius: 10px; }
.sp-checkrow__main { min-width: 0; flex: 1; }
.sp-checkrow__topic { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--t-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-checkrow__date { margin: 1px 0 0; font-size: 12px; color: var(--t-faint); }
.sp-pill { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sp-pill--ok    { background: #EAF6EF; color: #197A4B; }
.sp-pill--watch { background: #FBF3E2; color: #B7791F; }
.sp-pill--risk  { background: #FEF1F0; color: #B42318; }
.sp-checkrow__score { font-size: 13.5px; font-weight: 700; color: var(--t-ink); white-space: nowrap; }

.sp-card--reteach { background: var(--blue-tint-bg); border-color: var(--blue-tint-border); }
.sp-reteach__title { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--t-ink); }
.sp-reteach__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sp-reteach__item { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--t-body); }
.sp-reteach__dot { flex: none; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
.sp-empty { font-size: 13px; color: var(--t-muted); }

.sp-foot { flex: none; padding: 14px 22px; background: var(--surface); border-top: 1px solid var(--card-border);
  display: flex; gap: 10px; }
.sp-foot__primary { flex: 1; justify-content: center; }

/* ===========================================================
   Отчёт как SLIDE-OVER (My checks): правая панель + затемнение,
   вместо инлайн-блока на всё окно. Клик по фону / Close / Esc — закрыть.
   =========================================================== */
.report-so {
  position: fixed; inset: 0; z-index: 70; background: rgba(10, 35, 66, .45);
  display: flex; justify-content: flex-end;
}
.report-so[hidden] { display: none; }
.report-so__panel {
  width: min(600px, 100%); height: 100%; background: #F6F8FB;
  box-shadow: -24px 0 60px -28px rgba(10, 35, 66, .5);
  display: flex; flex-direction: column; overflow: hidden;
}
.report-so__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; background: #fff; border-bottom: 1px solid var(--card-border); margin: 0;
}
.report-so #checks-report-card { flex: 1; overflow-y: auto; padding: 16px 20px 28px; }

/* Add exam: панель печати именных бланков + отметка присутствующих. */
.add-exam-attendance { margin: 14px 0; }
.add-exam-attendance__title { font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.add-exam-attendance__note { color: var(--ink-3); font-size: 13px; margin-bottom: 10px; }
.attendance-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.attendance { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; }
.attendance:hover { border-color: var(--indigo); }
.attendance__name { flex: 1 1 auto; font-weight: 600; color: var(--ink); }
.attendance__code { color: var(--ink-3); font-size: 12px; }

/* ── Builder: выбор типов вопросов (MCQ / FRQ) ── */
.qtype-chooser { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.qtype-chooser__label { font-weight: 700; color: var(--ink); font-size: 14px; margin-right: 2px; }
.qtype-pill {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg); color: var(--ink-2);
  transition: border-color .12s, background .12s, color .12s;
}
.qtype-pill:hover { border-color: var(--indigo); }
.qtype-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--indigo-ring); }
.qtype-pill__tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 999px; border: 1.5px solid var(--border); font-size: 11px; line-height: 1; color: transparent; }
.qtype-pill__sub { font-weight: 500; font-size: 12px; color: var(--ink-3); }
.qtype-pill.is-on { border-color: var(--indigo); background: var(--indigo-tint); color: var(--indigo-deep); }
.qtype-pill.is-on .qtype-pill__tick { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.qtype-pill.is-on .qtype-pill__sub { color: var(--indigo); }
/* атрибут hidden должен реально прятать группу (display:grid иначе перебивает) */
.qtype-group[hidden] { display: none; }

/* Add exam: выбор источника ключа + мини-браузер существующих экзаменов */
.exam-source { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.exam-picker { margin: 0 0 14px; }
.exam-picker[hidden] { display: none; }
.exam-picker .mytests-grid { margin-top: 10px; }
.exam-card.is-selected { border-color: var(--indigo); background: var(--indigo-tint); box-shadow: 0 0 0 2px var(--indigo-ring); }
.exam-selected { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.exam-selected[hidden] { display: none; }
/* per-view class picker bar (heatmap / checks) */
.view-class-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; }
.view-class-bar .field { min-width: 240px; max-width: 360px; }

/* per-row remove button (roster) */
.row-remove { border: none; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 4px 6px;
  border-radius: var(--r-field); }
.row-remove:hover { background: var(--sem-bad-bg); color: var(--sem-bad-ink); }
.row-remove:disabled { opacity: 0.4; cursor: default; }

/* Print sheets card (My class): mode A/B chooser */
.print-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 12px; }
.print-controls .field { min-width:260px; max-width:420px; }
.print-modes { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.print-mode { display:flex; gap:10px; align-items:flex-start; font-size:0.92rem;
  padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-field); cursor:pointer; }
.print-mode input { margin-top:3px; }
.print-mode:hover { border-color:var(--indigo); background:var(--indigo-tint); }

/* ==========================================================
   INLINE CLASS RESULTS (5c) — the grid shown inside the Scan
   screen when one scan holds many students (409 multiple_students).
   Mirrors bulk.html's review grid, restyled with the dashboard
   design tokens so it looks native to this page.
   ========================================================== */
.scan-class { margin-top: 16px; }
.scan-class__status { margin: 4px 0 14px; font-size: 0.92rem; color: var(--ink-2); min-height: 18px; }
.scan-class__wait { margin: 0; color: var(--ink-3); font-size: 0.92rem; }

/* Gradescope-style review: карточки учеников с миниатюрами их страниц */
.scan-class__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.stu-card {
  border: 1px solid var(--card-border, #E6EAF0); border-radius: 12px;
  background: var(--surface, #fff); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.stu-card__head { display: flex; align-items: center; gap: 10px; }
.stu-card__avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip-bg, #F0F4FA); color: var(--indigo);
  font-size: 0.82rem; font-weight: 700; letter-spacing: .02em;
}
.stu-card__who { min-width: 0; display: flex; flex-direction: column; }
.stu-card__name { font-weight: 700; color: var(--ink); font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stu-card__meta { font-size: 0.78rem; color: var(--ink-3); }
.stu-card__badge { margin-left: auto; text-align: right; }
.stu-card__score { font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.stu-card__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stu-card__pg { position: relative; }
.stu-card__pg img {
  width: 56px; height: 74px; object-fit: cover; display: block;
  border: 1px solid var(--border); border-radius: 8px; cursor: zoom-in;
  transition: transform .12s ease, box-shadow .12s ease;
}
.stu-card__pg img:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -6px rgba(10,35,66,.4); }
.stu-card__pg span {
  position: absolute; left: 3px; top: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--indigo); color: #fff;
  font-size: 0.66rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.stu-card__open {
  align-self: flex-start; margin-top: 2px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--indigo); font: inherit; font-size: 0.88rem; font-weight: 600;
}
.stu-card__open:hover { text-decoration: underline; }

/* Отчёт ученика под сеткой (тот же reportHtml, что в My checks) */
.scan-class__report { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.scan-class__report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scan-class__report-head h3 { margin: 0; font-size: 1.02rem; color: var(--ink); }

/* Лайтбокс страницы (клик по миниатюре) */
.pg-light {
  position: fixed; inset: 0; z-index: 80; cursor: zoom-out;
  background: rgba(10, 35, 66, .55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pg-light[hidden] { display: none; }
.pg-light__fig { margin: 0; max-width: min(92vw, 760px); max-height: 92vh; text-align: center; }
.pg-light__fig img {
  max-width: 100%; max-height: calc(92vh - 34px);
  border-radius: 10px; background: #fff; box-shadow: 0 18px 50px -20px rgba(0,0,0,.6);
}
.pg-light__fig figcaption { margin-top: 8px; color: #fff; font-size: 0.9rem; font-weight: 600; }
/* status pills — same 3 states as the bulk grid, using semantic tokens */
.scan-class .bulk-badge { display: inline-block; font-size: 0.78rem; padding: 3px 9px;
  border-radius: var(--r-pill); font-weight: 600; }
.scan-class .bulk-badge--ok   { background: var(--sem-ok-bg);   color: var(--sem-ok-ink); }
.scan-class .bulk-badge--wait { background: var(--sem-warn-bg); color: var(--sem-warn-ink); }
.scan-class .bulk-badge--bad  { background: var(--sem-bad-bg);  color: var(--sem-bad-ink); }
/* unassigned tray (photos whose QR couldn't be read) */
.scan-class__unassigned { margin-top: 14px; font-size: 0.9rem; color: var(--ink-2); }
.scan-class__unassigned .bulk-un-list { list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px; }
.scan-class__unassigned .bulk-un-list li { display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; }
.scan-class__unassigned .bulk-un-list img { width: 40px; height: 40px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border); }
/* лоток с ручным назначением: миниатюра крупнее (кликабельна) + селект + Grade */
.bulk-un-list--assign li { flex-wrap: wrap; }
.bulk-un-list--assign img { width: 46px; height: 60px; cursor: zoom-in; }
.bulk-un-sel { max-width: 200px; font-size: 0.85rem; padding: 6px 8px; }