/* ==========================================================================
   BrainCoach Study — «тетрадь и зелёная ручка» (r19)
   Лист и бумага — спокойный фон; синяя ручка — действия; зелёная ручка —
   единственный яркий акцент: то, что получилось. Красный — только ошибки
   и материал упражнений. Шрифты лежат в проекте (fonts/, OFL).
   ========================================================================== */

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/golos-text-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/golos-text-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/golos-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Only digits of exercises (Schulte numbers, oral counting fields, timers). */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Палитра */
  --c-paper: #F6F7F9;        /* бумага — фон страницы */
  --c-sheet: #FFFFFF;        /* лист — карточки, поля */
  --c-ink: #1B2540;          /* чернила — основной текст (15,2:1) */
  --c-pencil: #55607A;       /* карандаш — подписи (6,3:1) */
  --c-blue: #2448B8;         /* синяя ручка — действия, ссылки, фокус (7,8:1) */
  --c-blue-hover: #1D3A96;
  --c-blue-tint: #EBF0FC;
  --c-blue-line: #C3D0F2;
  --c-green: #136F4E;        /* зелёная ручка — что получилось (6,2:1) */
  --c-green-tint: #E7F3ED;
  --c-green-line: #A9D5BF;
  --c-amber: #9A5B0B;        /* ниже прошлого раза — нейтрально (5,4:1) */
  --c-amber-tint: #FBF1E3;
  --c-error: #B42318;        /* ошибка (6,6:1) */
  --c-error-tint: #FDECEA;
  --c-rule: #7A8499;         /* рамки полей ввода (3,8:1) */
  --c-line: #E1E5EC;         /* тонкие разделители */
  --c-disabled: #E6E9EF;

  /* Шрифты и шкала (база 17 px, шаг ×1,2) */
  --font-text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-digits: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-1: 14px;
  --fs-2: 17px;
  --fs-3: 20px;
  --fs-4: 24px;
  --fs-5: 29px;
  --fs-6: 35px;
  --lh-text: 1.5;
  --lh-head: 1.2;
  --measure: 68ch;

  /* Отступы (сетка 4 px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Радиусы по иерархии */
  --r-cell: 6px;      /* ячейки, чипы */
  --r-control: 10px;  /* кнопки, поля, плитки */
  --r-panel: 16px;    /* панели */
  --r-round: 999px;   /* круглые метки */

  /* Тени: только две */
  --shadow-raised: 0 1px 2px rgba(27, 37, 64, 0.06), 0 2px 8px rgba(27, 37, 64, 0.05);
  --shadow-overlay: 0 16px 40px rgba(27, 37, 64, 0.18);

  --control-h: 48px;
  --touch: 44px;

  /* Прежние имена — ссылаются на новые токены (используются по всему файлу) */
  --bg-app: var(--c-paper);
  --bg-card: var(--c-sheet);
  --bg-card-subtle: #EEF1F5;
  --bg-hover: #E4E8EE;
  --text-main: var(--c-ink);
  --text-muted: var(--c-pencil);
  --text-light: var(--c-pencil);
  --primary: var(--c-blue);
  --primary-light: var(--c-blue-tint);
  --primary-border: var(--c-blue-line);
  --emerald: var(--c-green);
  --emerald-light: var(--c-green-tint);
  --emerald-border: var(--c-green-line);
  --amber: var(--c-amber);
  --amber-light: var(--c-amber-tint);
  --rose: var(--c-error);
  --rose-light: var(--c-error-tint);
  --border-light: var(--c-line);
  --border-dark: var(--c-rule);
  --radius-sm: var(--r-cell);
  --radius-md: var(--r-control);
  --radius-lg: var(--r-panel);
  --radius-xl: var(--r-panel);
  --shadow-sm: var(--shadow-raised);
  --shadow-md: var(--shadow-raised);
  --shadow-lg: var(--shadow-overlay);
  --shadow-elevated: var(--shadow-overlay);
  --font-main: var(--font-text);
  --font-mono: var(--font-digits);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.light-edu-theme {
  font-family: var(--font-text);
  font-size: var(--fs-2);
  line-height: var(--lh-text);
  background-color: var(--c-paper);
  color: var(--c-ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Кнопки и поля наследуют шрифт страницы (иначе браузер ставит свой). */
button, input, select, textarea { font: inherit; }

/* Видимый фокус с клавиатуры для всего, что не задаёт свой. */
:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Screen Transitions */
.screen-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   1. ВХОД
   ========================================================================== */
#authScreen {
  align-items: center;
  justify-content: center;
  padding: var(--sp-5) var(--sp-4);
  background: var(--c-paper);
}

.auth-card {
  background: var(--c-sheet);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-raised);
  width: 100%;
  max-width: 440px;
  padding: var(--sp-6) var(--sp-5);
  text-align: left;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-ink);
  font-weight: 600;
  font-size: var(--fs-1);
  margin-bottom: var(--sp-4);
}

.auth-title {
  font-size: var(--fs-5);
  line-height: var(--lh-head);
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}

.auth-subtitle {
  font-size: var(--fs-2);
  color: var(--c-pencil);
  line-height: var(--lh-text);
  max-width: var(--measure);
  margin-bottom: var(--sp-5);
}

.qr-box {
  background: var(--c-paper);
  border: 1.5px dashed var(--c-rule);
  border-radius: var(--r-panel);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-5);
}

.qr-canvas-wrapper {
  position: relative;
  background: var(--c-sheet);
  padding: var(--sp-3);
  border-radius: var(--r-control);
  border: 1px solid var(--c-line);
  overflow: hidden;
}

.qr-svg { display: block; }
.qr-scan-line { display: none; }

.qr-hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--c-pencil);
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: var(--sp-5) 0;
}

.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--c-line);
}

.auth-divider span {
  padding: 0 var(--sp-3);
  color: var(--c-pencil);
  font-size: var(--fs-1);
}

.auth-phone-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.code-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-1);
}

.code-step label {
  color: var(--c-ink);
  font-size: var(--fs-1);
  font-weight: 600;
}

.code-input {
  width: 100%;
  min-height: var(--control-h);
  border: 1.5px solid var(--c-rule);
  border-radius: var(--r-control);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-sheet);
  color: var(--c-ink);
  font-size: var(--fs-4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  text-align: center;
}

.code-input:focus-visible,
.code-input:focus {
  border-color: var(--c-blue);
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-cell);
  background: transparent;
  color: var(--c-blue);
  cursor: pointer;
  font-size: var(--fs-1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-link:hover { color: var(--c-blue-hover); }

.auth-status {
  min-height: 1.4em;
  margin: 2px 0 0;
  color: var(--c-pencil);
  font-size: var(--fs-1);
  line-height: 1.4;
}

.auth-status.error { color: var(--c-error); }
.auth-status.success { color: var(--c-green); }

.phone-input-group {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  background: var(--c-sheet);
  border: 1.5px solid var(--c-rule);
  border-radius: var(--r-control);
  padding: 0 var(--sp-4);
}

.phone-input-group:focus-within {
  border-color: var(--c-blue);
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
}

.phone-prefix {
  font-weight: 600;
  color: var(--c-pencil);
  margin-right: var(--sp-2);
}

.phone-input-group input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--fs-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  padding: var(--sp-2) 0;
}

.phone-input-group input::placeholder,
.code-input::placeholder { color: var(--c-pencil); opacity: 1; }

/* Кнопки: одна основная (синяя ручка), вторичные — на листе. */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--control-h);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-control);
  border: none;
  background: var(--c-blue);
  color: var(--c-sheet);
  font-weight: 600;
  font-size: var(--fs-2);
  line-height: var(--lh-head);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-primary:hover { background: var(--c-blue-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; }

/* Отключено на время запроса = загрузка. */
.btn-primary:disabled,
.btn-link:disabled,
.btn-secondary:disabled {
  background: var(--c-disabled);
  color: var(--c-pencil);
  cursor: progress;
  transform: none;
}
.btn-link:disabled { background: transparent; }
[aria-busy="true"] { cursor: progress; }

.auth-footer {
  margin-top: var(--sp-5);
  font-size: var(--fs-1);
  color: var(--c-pencil);
}

/* ==========================================================================
   2. ШАПКА
   ========================================================================== */
.edu-topbar {
  background: var(--c-sheet);
  border-bottom: 1px solid var(--c-line);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar-left, .topbar-center, .topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.edu-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.edu-icon { font-size: var(--fs-4); }

.edu-title {
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: var(--lh-head);
  color: var(--c-ink);
}

.highlight { color: var(--c-blue); }

.student-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-paper);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  border-radius: var(--r-round);
  border: 1px solid var(--c-line);
}

.student-avatar { font-size: var(--fs-3); }

.student-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.student-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--c-ink);
}

.student-status {
  font-size: 13px;
  color: var(--c-pencil);
}

/* Supervisor status */
.supervisor-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-green-tint);
  color: var(--c-green);
  border: 1px solid var(--c-green-line);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-round);
  font-size: var(--fs-1);
  font-weight: 600;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
}

/* Без постоянной анимации: движение — только в ответ на действие ученика. */
.live-dot.pulse { animation: none; }

.course-progress-box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 160px;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--c-pencil);
}

.progress-labels strong { color: var(--c-ink); font-weight: 600; }

.progress-track {
  height: 6px;
  background: var(--c-line);
  border-radius: var(--r-round);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--c-blue);
  border-radius: var(--r-round);
  transition: width 0.3s ease;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-sheet);
  border: 1.5px solid var(--c-rule);
  border-radius: var(--r-control);
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-secondary:hover { background: var(--c-blue-tint); border-color: var(--c-blue); }
.btn-secondary:active { transform: translateY(1px); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  background: none;
  border: none;
  font-size: var(--fs-3);
  cursor: pointer;
  padding: var(--sp-1);
  border-radius: var(--r-control);
}

.btn-icon:hover { background: var(--bg-hover); }

/* ==========================================================================
   3. WORKSPACE LAYOUT (2 Columns)
   ========================================================================== */
.edu-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  padding: 24px;
  flex: 1;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 1080px) {
  .edu-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Stage Area (Left) */
.stage-container {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.player-wrapper {
  width: 100%;
  max-width: min(100%, calc(60vh * 16 / 9));
  max-width: min(100%, calc(60svh * 16 / 9));
  margin-inline: auto;
  background: #000000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  border: 1px solid var(--border-dark);
}

/* YouTube Top Shield Overlay */
.player-top-shield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
  background: linear-gradient(180deg, rgba(27, 37, 64, 0.95) 0%, rgba(27, 37, 64, 0.7) 70%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  z-index: 10;
  pointer-events: none; /* Allows video clicks beneath, while covering title bar */
}

.shield-badge {
  background: rgba(36, 72, 184, 0.92);
  color: var(--c-sheet);
  font-size: var(--fs-1);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-cell);
}

.shield-lesson-title {
  color: var(--c-sheet);
  font-size: 0.9rem;
  font-weight: 600;
}

.iframe-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  background: var(--c-ink);
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-toolbar {
  background: var(--c-sheet);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-light);
}

.tag-phase {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: var(--fs-1);
  padding: 4px 10px;
  border-radius: var(--r-cell);
  margin-right: 12px;
}

.video-hint {
  font-size: var(--fs-1);
  color: var(--text-muted);
}

.btn-accent {
  background: var(--c-blue);
  color: var(--c-sheet);
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
  transition: all 0.2s;
}

.btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

/* ==========================================================================
   4. PRACTICE LAB («Мастерская шлифовки»)
   ========================================================================== */
.practice-lab {
  background: var(--c-sheet);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px;
  animation: fadeIn 0.3s ease;
}

.practice-header {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 18px;
  margin-bottom: 24px;
}

.lab-badge {
  display: inline-block;
  background: var(--amber-light);
  color: var(--c-amber);
  font-weight: 700;
  font-size: var(--fs-1);
  padding: 4px 10px;
  border-radius: var(--r-cell);
  margin-bottom: 8px;
}

.practice-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.practice-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.practice-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.p-tab {
  padding: 8px 16px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s;
}

.p-tab.active {
  background: var(--primary);
  color: var(--c-sheet);
  border-color: var(--primary);
}

.p-tab.voice-tab {
  background: var(--c-blue-tint);
  border-color: var(--c-blue-line);
  color: var(--c-blue);
}

.p-tab.voice-tab.active {
  background: var(--c-blue);
  color: var(--c-sheet);
  border-color: var(--c-blue);
}

/* Arena Card */
.arena-card {
  background: var(--c-paper);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.arena-counter {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.speed-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-1);
}

.speed-btn {
  padding: 4px 8px;
  background: var(--c-sheet);
  border: 1px solid var(--border-light);
  border-radius: var(--r-cell);
  font-size: var(--fs-1);
  font-weight: 600;
  cursor: pointer;
}

.speed-btn.active {
  background: var(--c-ink);
  color: var(--c-sheet);
  border-color: var(--c-ink);
}

.mode-and-speed {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.practice-sub-mode {
  display: flex;
  background: var(--c-line);
  padding: 2px;
  border-radius: var(--radius-sm);
  gap: 2px;
}

.sub-mode-btn {
  padding: 5px 12px;
  border: none;
  background: transparent;
  border-radius: var(--r-cell);
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sub-mode-btn.active {
  background: var(--c-sheet);
  color: var(--primary);
  box-shadow: var(--shadow-raised);
}

.pair-box {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  width: 100%;
  max-width: 600px;
  justify-content: center;
}

.pair-box .card-left { order: 1; }
.pair-box .pair-link-symbol { order: 2; }
.pair-box .card-right { order: 3; }
.pair-box.reverse-question .card-left { order: 3; border-left: 2px solid var(--border-light); border-right: 4px solid var(--emerald); }
.pair-box.reverse-question .card-right { order: 1; border-right: 2px solid var(--border-light); border-left: 4px solid var(--primary); }

.word-card {
  flex: 1;
  background: var(--c-sheet);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 28px 16px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  position: relative;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.word-card.card-left {
  border-left: 4px solid var(--primary);
}

.word-card.card-right {
  border-right: 4px solid var(--emerald);
  position: relative;
  overflow: hidden;
}

/* Word Cover for Retrieval Mode */
.word-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-card-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  z-index: 5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.word-cover.revealed {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
}

.cover-icon {
  font-size: 1.3rem;
}

.cover-text {
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--text-muted);
}

.btn-reveal {
  background: var(--c-amber-tint) !important;
  color: var(--c-amber) !important;
  border: 1px solid var(--c-amber) !important;
}

.pair-link-symbol {
  font-size: 1.8rem;
  color: var(--text-light);
}

.ai-tip-box {
  background: var(--c-sheet);
  border: 1px solid var(--c-blue-line);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 600px;
  margin-bottom: 28px;
}

.ai-tip-icon {
  font-size: 1.4rem;
}

.ai-tip-text {
  font-size: 0.88rem;
  color: var(--c-ink);
  line-height: 1.45;
  font-style: italic;
}

.arena-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.practice-round-label { color:var(--primary); font-size:var(--fs-1); }
.practice-route { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:10px 0 14px; width:100%; }
.route-step { border:1px solid var(--border-light); border-radius:var(--r-cell); background:var(--c-paper); color:var(--c-pencil); font-size:var(--fs-1); font-weight:700; padding:9px 6px; text-align:center; }
.route-step.active { border-color:var(--c-blue-line); background:var(--c-blue-tint); color:var(--c-blue-hover); }
.retrieval-instruction { color:var(--text-muted); font-size:var(--fs-1); margin:14px 0 8px; text-align:center; }
.practice-voice-panel { border:1px solid var(--c-blue-tint); border-radius:var(--r-panel); background:var(--c-paper); margin:14px 0; padding:16px; text-align:center; }
.practice-voice-status { align-items:center; display:flex; gap:8px; justify-content:center; }
.practice-heard { color:var(--c-pencil); font-size:var(--fs-1); margin:9px 0; min-height:1.25em; }
.lesson-one-microphone { display:none; }
#classroomScreen.lesson-one .lesson-one-microphone { display:block; }
.practice-voice-metrics { display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; margin:10px 0 14px; color:var(--c-pencil); font-size:var(--fs-1); }
.answer-actions { display:flex; gap:10px; justify-content:center; margin:14px 0 4px; }
.btn-answer { border:0; border-radius:var(--r-control); cursor:pointer; font-weight:800; padding:11px 18px; }
.btn-answer.correct { background:var(--c-green-tint); color:var(--c-green); }
.btn-answer.retry { background:var(--c-amber-tint); color:var(--c-amber); }
.practice-summary { border:1px solid var(--c-blue-line); border-radius:var(--r-panel); background:var(--c-blue-tint); padding:28px; text-align:center; }
.practice-summary h3 { color:var(--c-ink); margin:0 0 10px; }
.practice-summary p { color:var(--c-pencil); line-height:1.55; margin:0 0 18px; }

@media (max-width: 720px) {
  #classroomScreen .edu-workspace { padding:10px; gap:12px; }
  #classroomScreen .edu-topbar { height:auto; flex-wrap:wrap; gap:10px; padding:10px; position:static; }
  #classroomScreen .topbar-left,
  #classroomScreen .topbar-center,
  #classroomScreen .topbar-right { flex-wrap:wrap; gap:8px; min-width:0; max-width:100%; }
  #classroomScreen .student-pill { max-width:100%; min-width:0; }
  #classroomScreen .student-meta { min-width:0; overflow-wrap:anywhere; }
  #classroomScreen .video-toolbar { flex-wrap:wrap; gap:12px; padding:12px; }
  #classroomScreen .video-toolbar button { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
  #classroomScreen .player-top-shield { padding:0 8px; gap:8px; }
  #classroomScreen .shield-badge { font-size:var(--fs-1); }
  #classroomScreen .shield-lesson-title { min-width:0; overflow-wrap:anywhere; font-size:var(--fs-1); }
  .answer-actions { flex-direction:column; }
}

/* Lesson 1 only: intrinsic card/header widths must not widen the mobile grid. */
@media (max-width: 720px) {
  #classroomScreen.lesson-one .edu-workspace { padding:10px; gap:12px; grid-template-columns:minmax(0,1fr); }
  #classroomScreen.lesson-one .stage-container { min-width:0; }
  #classroomScreen.lesson-one .edu-topbar { height:auto; flex-wrap:wrap; gap:10px; padding:10px; position:static; }
  #classroomScreen.lesson-one .topbar-left,
  #classroomScreen.lesson-one .topbar-center,
  #classroomScreen.lesson-one .topbar-right { flex-wrap:wrap; gap:8px; min-width:0; max-width:100%; }
  #classroomScreen.lesson-one .student-pill { max-width:100%; min-width:0; }
  #classroomScreen.lesson-one .student-meta { min-width:0; overflow-wrap:anywhere; }
  #classroomScreen.lesson-one .practice-lab { padding:12px; min-width:0; }
  #classroomScreen.lesson-one .arena-card { padding:14px 10px; min-width:0; }
  #classroomScreen.lesson-one .arena-counter { flex-wrap:wrap; gap:8px; overflow-wrap:anywhere; }
  #classroomScreen.lesson-one .pair-box { gap:8px; min-width:0; }
  #classroomScreen.lesson-one .word-card { min-width:0; padding:16px 6px; font-size:clamp(.95rem,4vw,1.25rem); overflow-wrap:anywhere; }
  #classroomScreen.lesson-one .pair-link-symbol { flex:0 0 24px; font-size:1.1rem; }
  #classroomScreen.lesson-one .cover-text { font-size:var(--fs-1); overflow-wrap:anywhere; }
  #classroomScreen.lesson-one .practice-voice-panel { padding:12px 8px; width:100%; min-width:0; }
  #classroomScreen.lesson-one .practice-voice-status strong { min-width:0; overflow-wrap:anywhere; }
  #classroomScreen.lesson-one .voice-live-dot { flex-shrink:0; }
  #classroomScreen.lesson-one .practice-summary { padding:16px 10px; max-width:100%; }
  #classroomScreen.lesson-one button { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
  #classroomScreen.lesson-one .video-toolbar { flex-wrap:wrap; gap:12px; padding:12px; }
  #classroomScreen.lesson-one .player-top-shield { padding:0 8px; }
  #classroomScreen.lesson-one .shield-lesson-title { min-width:0; overflow-wrap:anywhere; }
}

.btn-stage {
  padding: 10px 18px;
  background: var(--c-sheet);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-action-play {
  background: var(--primary);
  color: var(--c-sheet);
  border-color: var(--primary);
  box-shadow: none;
}

/* Voice Blitz Card */
.voice-blitz-card {
  background: var(--c-blue-tint);
  border: 2px dashed var(--c-blue-line);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.blitz-status-bar {
  display: flex;
  gap: 24px;
  font-size: 0.92rem;
  color: var(--c-ink);
  margin-bottom: 28px;
}

.blitz-prompt-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.blitz-hint-label {
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--c-blue);
}

.blitz-pair-stage {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 620px;
  justify-content: center;
  margin: 12px 0 16px;
}

.blitz-slot {
  flex: 1;
  min-height: 84px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: all 0.2s ease;
}

.blitz-slot.known-slot {
  background: var(--c-sheet);
  border: 2px solid var(--c-blue);
  box-shadow: none;
}

.blitz-slot.known-slot .slot-text {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--c-ink);
}

.blitz-link-icon {
  font-size: 1.6rem;
  color: var(--c-blue);
}

.blitz-slot.dash-slot {
  background: rgba(255, 255, 255, 0.7);
  border: 2px dashed var(--c-blue);
  position: relative;
}

.slot-dashes {
  font-size: 2rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--c-blue);
  letter-spacing: 0.25em;
  animation: pulseDashes 1.8s infinite ease-in-out;
}

@keyframes pulseDashes {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; color: var(--c-blue); }
}

.slot-mic-hint {
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--c-blue);
  margin-top: 4px;
}

.voice-wave-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
}

.voice-wave-indicator .bar {
  width: 4px;
  height: 8px;
  background: var(--c-blue);
  border-radius: 2px;
  animation: soundWave 1.2s infinite ease-in-out;
}

.voice-wave-indicator .bar:nth-child(2) { animation-delay: 0.2s; }
.voice-wave-indicator .bar:nth-child(3) { animation-delay: 0.4s; }
.voice-wave-indicator .bar:nth-child(4) { animation-delay: 0.1s; }
.voice-wave-indicator .bar:nth-child(5) { animation-delay: 0.3s; }

@keyframes soundWave {
  0%, 100% { height: 6px; }
  50% { height: 22px; }
}

.blitz-heard-text {
  font-size: 0.95rem;
  font-family: var(--font-text);
  color: var(--c-blue);
  min-height: 24px;
}

.btn-blitz-start {
  background: var(--c-blue);
  color: var(--c-sheet);
  border: none;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}

.btn-blitz-stop {
  background: var(--c-sheet);
  color: var(--c-blue);
  border: 1.5px solid var(--c-blue);
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   5. SIDEBAR (Webcam & Coach Tile)
   ========================================================================== */
.sidebar-supervision {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.observation-tile { background:var(--c-sheet); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm); }
.observation-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.observation-header > div { display:flex; flex-direction:column; gap:2px; }
.observation-eyebrow { color:var(--text-muted); font-size:var(--fs-1); font-weight:700; }
.observation-badge { border-radius:999px; background:var(--bg-card-subtle); color:var(--c-pencil); font-size:var(--fs-1); font-weight:700; padding:5px 9px; }
.phase-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.phase-selector.four-phases { grid-template-columns:repeat(2,1fr); }
.phase-btn { border:1px solid var(--border-light); border-radius:var(--r-cell); background:var(--c-paper); color:var(--c-pencil); cursor:pointer; font-size:var(--fs-1); font-weight:700; padding:9px 4px; }
.phase-btn.active { border-color:var(--c-blue-line); background:var(--c-blue-tint); color:var(--c-blue-hover); }
.phase-explanation { min-height:3.8em; margin:12px 0 0; color:var(--text-muted); font-size:var(--fs-1); line-height:1.5; }
.voice-observer { border-top:1px solid var(--border-light); margin-top:13px; padding-top:13px; }
.voice-observer-status { display:flex; align-items:center; gap:8px; color:var(--c-pencil); font-size:var(--fs-1); }
.voice-live-dot { width:9px; height:9px; border-radius:50%; background:var(--c-pencil); }
.voice-live-dot.listening { background:var(--c-green); box-shadow:0 0 0 4px rgba(19,111,78,.14); }
.voice-live-dot.speaking { background:var(--c-blue); box-shadow:0 0 0 5px rgba(36,72,184,.16); }
.voice-level-track { height:7px; overflow:hidden; margin:10px 0; border-radius:999px; background:var(--c-line); }
.voice-level-fill { width:0; height:100%; border-radius:inherit; background:var(--c-blue); transition:width .08s linear; }
.btn-observer { width:100%; box-shadow:none; font-size:var(--fs-1); padding:10px 12px; }
.privacy-note { margin:9px 0 0; color:var(--c-pencil); font-size:var(--fs-1); line-height:1.45; }
.observation-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }
.observation-metrics div { display:flex; min-width:0; flex-direction:column; gap:4px; border-radius:var(--r-cell); background:var(--c-paper); padding:8px; }
.observation-metrics span { color:var(--c-pencil); font-size:var(--fs-1); }
.observation-metrics strong { color:var(--c-ink); font-size:var(--fs-1); }

/* Student Webcam Tile */
.webcam-tile {
  background: var(--c-sheet);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.webcam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cam-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-1);
  font-weight: 700;
}

.cam-dot {
  width: 8px;
  height: 8px;
  background: var(--emerald);
  border-radius: 50%;
}

.cam-badge {
  font-size: var(--fs-1);
  font-weight: 700;
  background: var(--emerald-light);
  color: var(--c-green);
  padding: 2px 8px;
  border-radius: var(--r-cell);
}

.webcam-video-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  background: var(--c-ink);
  border-radius: var(--radius-md);
  overflow: hidden;
}

#studentWebcam {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror reflection */
}

.cam-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--c-ink);
  color: var(--c-pencil);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  gap: 8px;
  font-size: var(--fs-1);
}

.cam-ph-icon {
  font-size: 2rem;
}

.btn-mini-cam {
  margin-top: 6px;
  background: var(--primary);
  color: var(--c-sheet);
  border: none;
  padding: 6px 12px;
  border-radius: var(--r-cell);
  font-size: var(--fs-1);
  font-weight: 600;
  cursor: pointer;
}

.posture-guideline {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 60%;
  height: 70%;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 50% 50% 40% 40%;
  pointer-events: none;
}

.webcam-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.metric-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-1);
}

.chip-k {
  color: var(--text-muted);
}

.chip-v {
  font-weight: 700;
}

.text-emerald { color: var(--emerald); }

/* Coach Malik Tile */
.coach-tile {
  background: var(--c-sheet);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coach-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.coach-avatar {
  width: 48px;
  height: 48px;
  background: var(--c-blue-tint);
  border: 2px solid var(--c-blue-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.coach-live-tag {
  background: var(--emerald);
  color: var(--c-sheet);
  font-size: var(--fs-1);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.coach-name {
  font-size: 0.92rem;
  font-weight: 800;
}

.coach-role {
  font-size: var(--fs-1);
  color: var(--text-muted);
}

.coach-speech {
  background: var(--c-sheet);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: var(--fs-1);
  color: var(--c-ink);
  line-height: 1.4;
  position: relative;
}

.coach-quick-audio {
  display: flex;
  gap: 8px;
}

.btn-audio-tip {
  flex: 1;
  padding: 6px 8px;
  background: var(--c-sheet);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-1);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-audio-tip:hover {
  background: var(--bg-hover);
}

/* Accordion */
.lesson-accordion {
  background: var(--c-sheet);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.accordion-title {
  font-size: var(--fs-1);
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.modules-quick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lesson-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-1);
  cursor: pointer;
  transition: background 0.15s;
}

.lesson-nav-item:hover {
  background: var(--bg-hover);
}

.lesson-nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
}

.lesson-nav-item.locked {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ==========================================================================
   6. MODALS (Smart Pause & Course Map)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-card {
  background: var(--c-sheet);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  max-width: 500px;
  width: 100%;
  padding: 32px;
  text-align: center;
  animation: modalPop 0.3s ease-out;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.pause-card {
  background: var(--c-sheet);
}

.pause-badge {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: var(--fs-1);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.pause-card h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.pause-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 24px;
}

.timer-circular-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
}

.timer-svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

.timer-track {
  fill: none;
  stroke: var(--c-line);
  stroke-width: 8;
}

.timer-bar {
  fill: none;
  stroke: var(--primary);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.29; /* 2 * PI * 54 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.timer-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--primary);
}

.pause-exercises {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
  background: var(--c-sheet);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.ex-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-1);
  font-weight: 600;
}

.ex-icon {
  font-size: 1.2rem;
}

/* Map Card */
.map-card {
  max-width: 800px;
  text-align: left;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.btn-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.module-box {
  background: var(--c-paper);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
}

.module-title {
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--primary);
}

.lesson-list-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lesson-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-sheet);
  padding: 8px 12px;
  border-radius: var(--r-cell);
  border: 1px solid var(--border-light);
  font-size: var(--fs-1);
}

.lesson-row-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
}
/* Study v1 uses the existing classroom and its responsive layout. */
.course-panel { padding:24px; margin:18px 0; border:1px solid var(--c-line); border-radius:var(--r-panel); background:var(--c-sheet); }
.course-panel button { margin:8px 6px 8px 0; }
.course-panel .pair-box { margin:20px auto; min-width:0; gap:10px; }
.course-panel .word-card { min-width:0; overflow-wrap:anywhere; padding:24px 10px; font-size:clamp(1rem,3vw,1.6rem); }
.course-panel .pair-link-symbol { flex:0 0 28px; }
@media (max-width:720px) { .course-panel { padding:14px; min-width:0; } .course-panel button { max-width:100%; white-space:normal; overflow-wrap:anywhere; } }
.course-panel label { display:block; margin:10px 0; }
.course-panel textarea { width:100%; box-sizing:border-box; padding:12px; border:1px solid var(--c-line); border-radius:var(--r-control); font:inherit; }
.course-panel pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.6; }
#courseQuestion { font-size:1.6rem; font-weight:700; }
#registrationStep input, #registrationStep select { width:100%; box-sizing:border-box; min-height:var(--control-h); padding:12px; margin:8px 0; font:inherit; color:var(--c-ink); background:var(--c-sheet); border:1.5px solid var(--c-rule); border-radius:var(--r-control); }
#studyStatus { padding:10px; color:var(--c-pencil); }
/* Optional trainers: explicit controls, no color-only feedback or compulsory motion. */
/* r20 · уроки: зона нажатия не меньше 44 px у кнопок урока */
.p-tab, .speed-btn, .sub-mode-btn, .btn-accent, .btn-reveal, .btn-answer, .btn-stage, .btn-action-play,
.btn-blitz-start, .btn-blitz-stop, .lesson-row-card, .route-step { min-height: var(--touch); }
.btn-accent:hover { background: var(--c-blue-hover); }

.study-trainers{max-width:1080px;margin:20px auto;padding:clamp(16px,3vw,28px);border:1px solid #c7d2fe;border-radius:24px;background:linear-gradient(145deg,#fff,#f0f7ff);color:#172554;box-shadow:0 12px 30px #1e40af0a}
.study-trainers h2{font-size:clamp(24px,4vw,34px);line-height:1.2;margin:8px 0 16px}
.trainer-eyebrow{color:#1d4ed8;font-weight:700;font-size:14px}.trainer-feedback{padding:12px 16px;background:#e0f2fe;border-radius:12px;min-height:48px}
.trainer-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}.trainer-choices section{padding:16px;background:#fff;border:1px solid #dbeafe;border-radius:16px;display:flex;flex-direction:column;gap:12px}
.study-trainers button,.study-trainers select{min-height:44px;font:inherit;border-radius:12px;padding:10px 14px;cursor:pointer}.study-trainers select{max-width:100%;background:#fff;border:1px solid #93c5fd}
.study-trainers button:focus-visible,.study-trainers select:focus-visible,.study-trainers input:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}.study-trainers button:disabled{opacity:.5;cursor:default}
.trainer-controls,.trainer-color-choices{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}.study-trainers progress{width:100%;height:16px;accent-color:#2563eb}
.trainer-schulte{display:grid;grid-template-columns:repeat(var(--grid),minmax(0,1fr));gap:6px;max-width:560px;margin:16px auto}.trainer-schulte button{min-width:0;padding:6px;aspect-ratio:1;font-size:clamp(16px,3vw,24px);background:#fff;border:1px solid #93c5fd;color:#172554}
.trainer-kelly{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.trainer-kelly-cell{padding:12px;background:white;border:1px solid #dbeafe;border-radius:12px;min-width:0}.trainer-kelly-cell.current{outline:3px solid #2563eb}.trainer-kelly-cell label{display:block;font-weight:700}.trainer-kelly-cell input{display:block;box-sizing:border-box;width:100%;min-height:44px;margin:8px 0;padding:8px;border:1px solid #94a3b8;border-radius:8px;background:#f8fafc;font:inherit}.trainer-kelly-cell small{display:block}
.trainer-color-word{font-size:clamp(32px,8vw,64px);font-weight:800;text-align:center;padding:32px 12px;background:#111827;border:2px solid #475569;border-radius:16px;overflow-wrap:anywhere}.trainer-save,.trainer-disclosure{font-size:14px;line-height:1.5;color:#475569}.study-trainers ul{padding-left:20px}
@media(max-width:400px){.study-trainers{padding:12px;border-radius:16px}.trainer-schulte{gap:3px}.trainer-schulte button{min-height:32px;padding:2px;font-size:17px}.trainer-kelly{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.study-trainers *{animation:none!important;transition:none!important}}
.trainer-kelly-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:16px 0;background:#fff;padding:16px;border:1px solid #cbd5e1;border-radius:14px;scroll-margin-top:140px}
.kelly-column{display:grid;gap:6px;min-width:0}.study-trainers .kelly-row{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:8px;min-height:40px;border:1px solid transparent;border-radius:7px;padding:2px;margin:0}
.kelly-row.current{border-color:#2563eb;background:#eff6ff}.kelly-row span{font-size:clamp(14px,1.5vw,19px);font-weight:650}.study-trainers .kelly-row input{width:100%;min-width:0;min-height:36px;border:1px solid #64748b;border-radius:5px;padding:4px;font:inherit;text-align:center;background:#fff;color:#172554;cursor:pointer;margin:0}.kelly-row small{grid-column:1/-1;color:#92400e}
.kelly-sheet-active h2{font-size:24px;margin:4px 0 8px}.kelly-sheet-active .trainer-feedback{min-height:0;padding:8px 12px}.kelly-sheet-active .trainer-controls{margin:8px 0}.kelly-sheet-active .trainer-controls .btn-primary{width:auto;flex:1}.kelly-sheet-active .trainer-eyebrow{font-size:12px}.kelly-sheet-active{padding:16px}
.trainer-sheet-controls{position:sticky;top:76px;background:#f3f8ff;padding:4px 0;z-index:3}
.trainer-raduga-frame{display:block;width:100%;height:65vh;min-height:360px;max-height:680px;border:1px solid #b2aea0;border-radius:12px;background:#fafafa}
/* Raduga clean full screen: fixed fallback where the Fullscreen API is unavailable (iPhone). */
.trainer-raduga-micline{margin:4px 0;font-weight:600;color:#0f172a}
.trainer-raduga-bar{display:none}
.trainer-raduga-stage.is-full{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;background:#fafafa;margin:0;padding:0}
.trainer-raduga-stage.is-full .trainer-raduga-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 10px;background:#fff;border-bottom:1px solid #e2e8f0;font-size:15px;color:#0f172a}
.trainer-raduga-stage.is-full .trainer-raduga-bar button{min-height:36px;padding:4px 12px;width:auto}
.trainer-raduga-left{font-variant-numeric:tabular-nums;font-weight:700;min-width:3.5em}
.trainer-raduga-barmic{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trainer-raduga-stage.is-full .trainer-raduga-frame{flex:1;height:auto;min-height:0;max-height:none;border:0;border-radius:0}
.trainer-schulte button.schulte-red{background:#EA0020;color:#fff;border-color:#fff}.trainer-schulte button.schulte-black{background:#1F1F1F;color:#fff;border-color:#fff}
.schulte-active h2{font-size:24px;margin:4px 0 8px}.schulte-active .trainer-feedback{min-height:0;padding:8px 12px}.schulte-active .trainer-schulte{width:min(100%,560px,calc(100svh - 330px))}.schulte-active .trainer-schulte button{margin:0;min-height:0}
@media(max-width:700px){.trainer-kelly-sheet{grid-template-columns:1fr;padding:10px}.study-trainers .kelly-row{grid-template-columns:minmax(0,1fr) 90px}.kelly-row span{font-size:18px}.study-trainers .kelly-row input{min-height:44px}.trainer-sheet-controls{position:static}}

/* Full-screen trainers: task, time and main controls only (lesson 8–11 trainers). */
.study-trainers.trainer-full{position:fixed;inset:0;z-index:2147483000;margin:0;max-width:none;width:100%;height:100%;box-sizing:border-box;border:0;border-radius:0;background:#fff;overflow:auto;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.study-trainers.trainer-full:fullscreen{background:#fff}
.trainer-full>.trainer-eyebrow,.trainer-full>h2,.trainer-full>.trainer-disclosure,.trainer-full>.trainer-save,.trainer-full>ul,.trainer-full>.trainer-return,.trainer-full>p:not(.trainer-feedback):not([data-round-facts]){display:none}
.trainer-full.schulte-active>.trainer-feedback,.trainer-full.raduga-active>.trainer-feedback,.trainer-full.kelly-sheet-active>h3,.trainer-full.raduga-active>h3,.trainer-full.raduga-active>.trainer-controls,.trainer-full.raduga-active>[data-round-facts]{display:none}
.trainer-full .trainer-controls{margin:4px 0}.trainer-full [data-round-facts]{margin:0;font-size:15px}
.study-trainers.trainer-full.schulte-active .trainer-schulte{width:min(100%,calc(100svh - 150px));margin:0 auto}
.trainer-full.raduga-active{padding:0;gap:0}.trainer-full .trainer-raduga-stage{flex:1;display:flex;flex-direction:column;min-height:0}
.trainer-full .trainer-raduga-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 10px;background:#fff;border-bottom:1px solid #e2e8f0;font-size:15px;color:#0f172a}
.trainer-full .trainer-raduga-bar button{min-height:36px;padding:4px 12px;width:auto}
.trainer-full .trainer-raduga-frame{flex:1;height:auto;min-height:0;max-height:none;border:0;border-radius:0}
/* Wrong Schulte tap: highlight the number to find next. */
.trainer-schulte button.schulte-hint{outline:4px solid #facc15;outline-offset:-4px;box-shadow:0 0 0 4px #facc15;animation:schulte-hint .8s ease-in-out 2}
@keyframes schulte-hint{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.trainer-schulte button.schulte-hint{animation:none}}

/* Matrix memory (lesson 11). */
.trainer-matrix{display:grid;grid-template-columns:repeat(var(--grid),1fr);gap:8px;width:min(100%,460px,calc(100svh - 360px));margin:8px auto}
.study-trainers.trainer-full .trainer-matrix{width:min(100%,calc(100svh - 280px))}
.trainer-matrix button{aspect-ratio:1;margin:0;min-height:0;padding:0;width:100%;font-size:clamp(22px,6vw,40px);font-weight:700;border:2px solid #94a3b8;border-radius:10px;background:#fff;color:#0f172a}
.trainer-matrix button.selected{border-color:#2563eb;box-shadow:0 0 0 3px #93c5fd}
.trainer-matrix button.ok{background:#dcfce7;border-color:#16a34a}.trainer-matrix button.missed{background:#ffedd5;border-color:#f97316}.trainer-matrix button.extra{background:#f1f5f9;color:#64748b;text-decoration:line-through}
.trainer-matrix-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:min(100%,460px);margin:4px auto}.trainer-matrix-pad button{margin:0;min-height:44px;font-size:20px;width:100%}

/* Pupil instruction before a trainer round. */
.trainer-intro-title{text-align:center;font-size:28px;margin:8px 0}
.trainer-intro{max-width:640px;margin:12px auto;padding:16px 20px;border-radius:14px;background:#f8fafc;border:1px solid #cbd5e1;font-size:clamp(18px,2.4vw,24px);line-height:1.45;color:#0f172a}
.trainer-intro p{margin:6px 0}
.trainer-intro-active>.trainer-feedback,.trainer-intro-active>.trainer-eyebrow,.trainer-intro-active>h2{display:none}
.trainer-intro-active>.trainer-controls{justify-content:center}.study-trainers.trainer-full.trainer-intro-active{justify-content:center}

/* Matrix full screen fits one viewport: compact keypad with «Подтвердить», field sized by height. */
.trainer-matrix-area{display:flex;flex-direction:column;align-items:center;gap:8px}
.trainer-matrix-pad{grid-template-columns:repeat(6,1fr)}.trainer-matrix-pad .btn-primary{grid-column:span 2}
.trainer-full.matrix-active>progress{display:none}.trainer-full.matrix-active>h3{margin:2px 0}
.study-trainers.trainer-full .trainer-matrix{width:min(100%,520px,calc(100vh - 300px));width:min(100%,520px,calc(100dvh - 300px));margin:0 auto}
@media (orientation:landscape) and (min-width:700px){
 .trainer-full .trainer-matrix-area{flex-direction:row;justify-content:center;gap:24px}
 .study-trainers.trainer-full .trainer-matrix{width:min(55vw,calc(100vh - 190px));width:min(55vw,calc(100dvh - 190px));margin:0}
 .trainer-full .trainer-matrix-pad{width:min(320px,35vw);grid-template-columns:repeat(3,1fr)}
}

/* Matrix pictograms and arrow directions. */
.trainer-matrix .matrix-icon{font-size:.9em;line-height:1}.trainer-matrix .matrix-arrow,.trainer-matrix-pad .matrix-arrow{display:inline-block;line-height:1;font-weight:800}
.trainer-matrix-pad button{position:relative}.trainer-matrix-pad button small{position:absolute;right:4px;bottom:2px;font-size:10px;opacity:.55}
.trainer-matrix-pad .matrix-icon{font-size:22px;line-height:1}
/* Coloured arrows: green = own team, yellow = opponents; two keypad rows of 8. */
.matrix-arrow.arrow-green{color:#15803d}
/* Yellow alone is nearly invisible on white: thin dark outline keeps it readable and lighter than green. */
.matrix-arrow.arrow-yellow{color:#facc15;text-shadow:1px 1px 0 #713f12,-1px -1px 0 #713f12,1px -1px 0 #713f12,-1px 1px 0 #713f12}
.trainer-matrix-pad.pad-color{grid-template-columns:repeat(8,1fr)}.trainer-matrix-pad.pad-color .pad-erase{grid-column:span 3}.trainer-matrix-pad.pad-color .btn-primary{grid-column:span 5}
@media (orientation:landscape) and (min-width:700px){.trainer-full .trainer-matrix-pad.pad-color{grid-template-columns:repeat(4,1fr);width:min(360px,38vw)}.trainer-full .trainer-matrix-pad.pad-color .pad-erase,.trainer-full .trainer-matrix-pad.pad-color .btn-primary{grid-column:span 2}}
/* Larger arrows, square cells keep their proportions. */
.trainer-matrix .matrix-arrow{font-size:1.45em}.trainer-matrix-pad .matrix-arrow{font-size:28px}

/* r13 · N-back (lesson 11): 3×3 field, centre is the fixation point; D F J K keys in keyboard order. */
.trainer-nback{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,420px,calc(100svh - 340px));margin:8px auto}
.study-trainers.trainer-full .trainer-nback{width:min(100%,520px,calc(100vh - 300px));width:min(100%,520px,calc(100dvh - 300px))}
.nb-cell{aspect-ratio:1;border:2px solid #cbd5e1;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
.nb-center::after{content:'+';color:#94a3b8;font-size:28px;font-weight:700}
.nb-figure{width:80%;height:80%}
.trainer-nback-keys{display:flex;gap:8px;justify-content:center;width:min(100%,560px);margin:6px auto}
.trainer-nback-keys button{flex:1;margin:0;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:manipulation}
.trainer-nback-keys b{font-size:22px;line-height:1}.trainer-nback-keys span{font-size:13px}
.trainer-nback-keys button.pressed{background:#dbeafe;border-color:#2563eb;box-shadow:0 0 0 3px #93c5fd}
.trainer-full.nback-active>progress{display:none}.trainer-full.nback-active>h3{margin:2px 0}

/* r15 · Proofreading (lesson 11): sticky «Ищи» bar, sheet of 10 (phone) / 20 (laptop) signs per row, colour-only marks. */
.pf-bar{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;padding:6px 0;border-bottom:1px solid #e2e8f0}
.pf-look{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:700;font-size:18px;flex:1}
.pf-look small{font-weight:400;font-size:14px}
.pf-target{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 4px;border:2px solid #0f172a;border-radius:8px;font-size:28px;font-weight:800;background:#fff}
.pf-target .pf-ring{width:34px;height:34px}
.pf-left{font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;min-width:56px;text-align:center}
.pf-sheet{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:8px 0}
.pf-sheet>button,.pf-sheet>span{position:relative;display:flex;align-items:center;justify-content:center;margin:0;min-height:36px;padding:0;aspect-ratio:1;font-size:clamp(18px,4.6vw,24px);font-weight:600;background:#fff;color:#0f172a;border:1px solid #cbd5e1;border-radius:6px;touch-action:manipulation;box-sizing:border-box}
.pf-sheet .pf-ring{width:72%;height:72%}
.pf-sheet>.pf-r1{background:#f1f5f9}
@media (min-width:700px){.pf-sheet{grid-template-columns:repeat(20,1fr)}.pf-sheet>button,.pf-sheet>span{font-size:22px}.pf-sheet>.pf-r1{background:#fff}.pf-sheet>.pf-r2{background:#f1f5f9}}
.pf-sheet>.pf-ok{background:#bbf7d0;border-color:#16a34a}.pf-sheet>.pf-bad{background:#fecaca;border-color:#dc2626}
.pf-sheet>.pf-ok::after,.pf-sheet>.pf-bad::after{position:absolute;right:2px;top:0;font-size:11px;line-height:1.2;font-weight:800}
.pf-sheet>.pf-ok::after{content:'✓';color:#15803d}.pf-sheet>.pf-bad::after{content:'✗';color:#b91c1c}
.pf-sheet>.pf-miss{border:3px solid #dc2626}
.pf-review{max-height:60vh;overflow:auto}
.trainer-full.proof-active>progress{display:none}.trainer-full.proof-active>h2{display:none}
/* r16 · корректурная проба: только вперёд, карточка итога, время практики */
.pf-sheet>.pf-past{opacity:.4}
.pf-hint{flex-basis:100%;min-height:1.2em;font-size:15px;font-weight:600;color:#b45309}
.pf-card{margin:12px 0;padding:16px;background:#f0fdf4;border:2px solid #86efac;border-radius:16px;display:flex;flex-direction:column;gap:10px}
.pf-card h3{margin:0;font-size:22px}
.pf-card-sub{margin:0;color:#475569;font-size:14px}
.pf-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.pf-tile{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:#fff;border:1px solid #d1fae5;border-radius:12px}
.pf-tile>span{font-size:13px;color:#64748b}
.pf-tile>b{font-size:22px;font-variant-numeric:tabular-nums;color:#0f172a}
.pf-tile>small{font-size:13px;font-weight:600}
.pf-tile>.pf-up{color:#15803d}.pf-tile>.pf-down{color:#b45309}.pf-tile>.pf-same{color:#64748b}
.pf-badges{display:flex;flex-wrap:wrap;gap:8px}
.pf-badges>span{padding:6px 12px;background:#fef9c3;border:1px solid #facc15;border-radius:999px;font-weight:700;font-size:14px}
.pf-cheer{margin:0;font-size:17px;font-weight:600;color:#166534}
.pf-trend,.pf-practice{margin:0;font-size:15px;color:#334155}
.pf-card .trainer-controls{margin:4px 0 0}
.trainer-practice{margin:16px 0;padding:16px;background:#fff;border:1px solid #dbeafe;border-radius:16px}
.trainer-practice h3{margin:0 0 8px}.trainer-practice ul{margin:0 0 8px;padding-left:20px}.trainer-practice p{margin:0;color:#475569;font-size:14px}
/* r17 · карточка итога для всех тренажёров, информация перед раундом */
.trainer-intro .trainer-intro-info{font-size:15px;color:#166534;background:#f0fdf4;border-radius:10px;padding:6px 10px;margin:6px 0 0}
/* r18 · всплывающие подсказки */
.hint{display:inline-block;vertical-align:middle}
.hint-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;min-height:0;margin:0 0 0 6px;padding:0;border-radius:50%;border:1px solid #93c5fd;background:#eff6ff;color:#1d4ed8;font-size:14px;font-weight:700;line-height:1;cursor:pointer;position:relative}
.hint-btn::before{content:'';position:absolute;inset:-9px}
.hint-btn:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.hint-btn[aria-expanded="true"]{background:#1d4ed8;color:#fff}
.hint-pop{display:block;margin:6px 0 0;padding:8px 10px;background:#0f172a;color:#fff;border-radius:10px;font-size:14px;font-weight:400;line-height:1.4;max-width:320px}
.hint-pop[hidden]{display:none}
.trainer-choices h3{display:flex;flex-wrap:wrap;align-items:center}
.trainer-choices h3 .hint{display:contents}
.trainer-choices h3 .hint-pop{flex-basis:100%}
.pf-tile{position:relative;padding-right:36px}
.pf-tile>.hint{display:contents}
.pf-tile .hint-btn{position:absolute;top:8px;right:8px;margin:0}

/* ==========================================================================
   r21 · тренажёры: только «рамка» — панель, заголовки, меню, инструкция,
   полосы управления, карточка итога, время практики, история, подсказки.
   Поля упражнений (ячейки, цвета стимулов Шульте, N-back, Матрицы, отметки
   пробы) и внутренности Радуги не меняются.
   ========================================================================== */
.study-trainers {
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  background: var(--c-sheet);
  color: var(--c-ink);
  box-shadow: var(--shadow-raised);
}
.study-trainers h2 { font-size: var(--fs-5); line-height: var(--lh-head); font-weight: 700; color: var(--c-ink); }
.study-trainers h3 { font-size: var(--fs-3); line-height: var(--lh-head); font-weight: 700; color: var(--c-ink); }
.trainer-eyebrow { color: var(--c-pencil); font-weight: 600; font-size: var(--fs-1); }
.trainer-feedback { background: var(--c-blue-tint); color: var(--c-ink); border-radius: var(--r-control); }
.trainer-save, .trainer-disclosure { color: var(--c-pencil); max-width: var(--measure); }

/* Меню тренажёров */
.trainer-choices section {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  padding: var(--sp-4);
}
.trainer-choices section > p { color: var(--c-pencil); max-width: var(--measure); }

/* Кнопки и списки тренажёров: радиус кнопки, видимый синий фокус (был янтарный, 2,2:1) */
.study-trainers button, .study-trainers select { border-radius: var(--r-control); }
.study-trainers select { background: var(--c-sheet); border: 1.5px solid var(--c-rule); color: var(--c-ink); }
.study-trainers button:focus-visible, .study-trainers select:focus-visible, .study-trainers input:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
}
.trainer-controls button:not(.btn-primary), .trainer-choices button:not(.btn-primary), .pf-bar button:not(.btn-primary) {
  background: var(--c-sheet);
  border: 1.5px solid var(--c-rule);
  color: var(--c-ink);
  font-weight: 600;
}
.trainer-controls button:not(.btn-primary):hover, .trainer-choices button:not(.btn-primary):hover, .pf-bar button:not(.btn-primary):hover {
  background: var(--c-blue-tint);
  border-color: var(--c-blue);
}
.study-trainers .btn-primary { border: 0; }

/* Цифры упражнений — JetBrains Mono, ровные по ширине */
.trainer-schulte button, .study-trainers .kelly-row input, .trainer-kelly-cell input, .pf-left {
  font-family: var(--font-digits);
  font-variant-numeric: tabular-nums;
}

/* Инструкция перед раундом */
.trainer-intro {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  color: var(--c-ink);
}
.trainer-intro-title { font-size: var(--fs-5); line-height: var(--lh-head); }
.trainer-intro .trainer-intro-info { color: var(--c-green); background: var(--c-green-tint); border-radius: var(--r-control); }

/* Полосы управления */
.pf-bar { background: var(--c-sheet); border-bottom: 1px solid var(--c-line); }
.pf-target { border-color: var(--c-ink); border-radius: var(--r-cell); background: var(--c-sheet); }
.pf-hint { color: var(--c-amber); }
.trainer-nback-keys button.pressed { background: var(--c-blue-tint); border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-line); }
.trainer-raduga-frame { border-color: var(--c-line); border-radius: var(--r-control); }

/* Карточка итога: лист, факты на плитках; зелёная пометка на полях у «Что получилось» */
.pf-card {
  background: var(--c-sheet);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  padding: var(--sp-5);
  gap: var(--sp-3);
}
.pf-card h3 { font-size: var(--fs-4); line-height: var(--lh-head); }
.pf-card-sub { color: var(--c-pencil); font-size: var(--fs-1); }
.pf-tile { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-control); }
.pf-tile > span { color: var(--c-pencil); font-size: var(--fs-1); }
.pf-tile > b { font-size: var(--fs-4); color: var(--c-ink); font-weight: 600; }
.pf-tile > small { font-size: var(--fs-1); }
.pf-tile > .pf-up { color: var(--c-green); }
.pf-tile > .pf-down { color: var(--c-amber); }
.pf-tile > .pf-same { color: var(--c-pencil); }
.pf-badges > span { background: var(--c-green-tint); border: 1px solid var(--c-green-line); color: var(--c-green); font-weight: 600; }
.pf-cheer { font-size: var(--fs-2); font-weight: 500; color: var(--c-ink); max-width: var(--measure); }
.pf-card .pf-cheer:not(.pf-cheer + .pf-cheer) {
  color: var(--c-green);
  font-weight: 600;
  border-left: 3px solid var(--c-green);
  padding-left: var(--sp-3);
}
.pf-trend, .pf-practice { color: var(--c-pencil); max-width: var(--measure); }

/* Время практики и история */
.trainer-practice { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-panel); }
.trainer-practice li { font-variant-numeric: tabular-nums; }
.trainer-practice p { color: var(--c-pencil); }

/* Подсказки «?»: видимый круг 26 px, зона нажатия 44 px (через ::before) */
.study-trainers .hint-btn {
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border-radius: var(--r-round);
  border: 1px solid var(--c-blue-line);
  background: var(--c-blue-tint);
  color: var(--c-blue);
}
.study-trainers .hint-btn[aria-expanded="true"] { background: var(--c-blue); color: var(--c-sheet); }
.hint-pop { background: var(--c-ink); color: var(--c-sheet); border-radius: var(--r-control); }

/* ==========================================================================
   r25 · урок: компактная строка занятия, блок «Только преподавателю»,
   карточки тренажёров равной высоты, свёрнутые «Время практики» и «История».
   ========================================================================== */
.lesson-timing {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4);
  background: var(--c-sheet); border: 1px solid var(--c-line); border-radius: var(--r-panel);
}
.lesson-timing-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); flex: 1 1 260px; margin: 0; font-size: 15px; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.lesson-timing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.lesson-timing .hint { display: contents; }
.lesson-timing .hint-btn { width: 26px; height: 26px; min-height: 0; padding: 0; margin: 0; border-radius: var(--r-round); border: 1px solid var(--c-blue-line); background: var(--c-blue-tint); color: var(--c-blue); position: relative; }
.lesson-timing .hint-btn[aria-expanded="true"] { background: var(--c-blue); color: var(--c-sheet); }
.lesson-timing .hint-pop { flex-basis: 100%; }
#lessonTimingStatus { flex-basis: 100%; margin: 0; font-size: var(--fs-1); color: var(--c-pencil); }
#lessonTimingStatus:empty { display: none; }

.teacher-only { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); border: 1.5px dashed var(--c-rule); border-radius: var(--r-panel); background: var(--c-paper); }
.teacher-only-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.teacher-only-title { font-size: var(--fs-1); font-weight: 600; color: var(--c-pencil); }
.teacher-only-body p { margin: var(--sp-1) 0 0; font-size: var(--fs-1); color: var(--c-ink); }
.teacher-mark { border: 1.5px dashed var(--c-rule); border-radius: var(--r-control); background: var(--c-paper); padding: var(--sp-3); }
.teacher-mark::before { content: 'Только преподавателю'; display: block; margin-bottom: var(--sp-2); font-size: var(--fs-1); font-weight: 600; color: var(--c-pencil); }
body.teacher-as-student .teacher-only { border-color: transparent; background: transparent; padding: 0; }
body.teacher-as-student .teacher-only-title, body.teacher-as-student .teacher-only-body, body.teacher-as-student .teacher-mark, body.teacher-as-student #reportDownload { display: none; }

/* Тренажёры: левый край как у строки занятия, пустая плашка не показывается */
.study-trainers { margin-left: 0; margin-right: 0; max-width: none; }
.trainer-feedback:empty { display: none; }
.trainer-choices { align-items: stretch; }
.trainer-choices section > p + select, .trainer-choices section > p + .btn-primary { margin-top: auto; }
.trainer-practice, .trainer-history { margin: var(--sp-4) 0; padding: 0 var(--sp-4); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-panel); }
.trainer-practice > summary, .trainer-history > summary { display: flex; align-items: center; min-height: var(--touch); cursor: pointer; font-weight: 600; color: var(--c-ink); }
.trainer-practice[open], .trainer-history[open] { padding-bottom: var(--sp-4); }
.trainer-history > ul { margin: 0; }

/* r27 · устный счёт: значения только для показа, активное поле подсвечено, пустое — нейтрально */
.study-trainers .kelly-plain { grid-template-columns: minmax(0,1fr) 72px; }
.kelly-plain .kelly-value { display: flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid var(--c-line); border-radius: var(--r-cell); background: var(--c-sheet); font-family: var(--font-digits); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.kelly-plain.current .kelly-value { border: 2px solid var(--c-blue); background: var(--c-blue-tint); }
.trainer-kelly-sheet + .trainer-controls [data-finish], .trainer-controls [data-finish] { font-weight: 600; }

/* r31 (2026-11-07): урок 11 — компактная карточка итога, как в ОМП (study_trainers.js, опция compact). Палитра и шрифт Study. */
.study-trainers [hidden]{display:none!important}
.omp-result{margin:0 0 12px;padding:14px 16px;border:1px solid var(--c-green-line);border-radius:12px;background:var(--c-sheet);scroll-margin-top:8px}
.omp-result-title{margin:0;font-size:18px;line-height:1.3}.omp-result-sub{margin:2px 0 0;color:var(--c-pencil);font-size:13px}
.omp-result-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:8px 0 4px}.omp-result-big b{font-size:44px;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--c-ink)}
.omp-result-big span{color:var(--c-pencil);font-size:14px}
.omp-result-line{margin:0 0 8px;font-size:15px;line-height:1.35}.omp-result-line.is-up{color:var(--c-green);font-weight:700}
.omp-bars{display:flex;align-items:flex-end;gap:6px;height:56px;max-width:320px;margin:6px 0 2px}
.omp-bar{flex:1;min-width:0;border-radius:4px 4px 0 0;background:var(--c-line)}.omp-bar.is-now{background:var(--c-blue-line)}.omp-bar.is-best{background:var(--c-green)}
.omp-result-best{margin:0 0 8px;font-size:13px;color:var(--c-green)}
.omp-result .trainer-controls{margin:8px 0 6px}.omp-result-today{margin:4px 0 0;font-size:13px;color:var(--c-pencil)}
@media (max-width:420px){.omp-result{padding:12px}.omp-result-big b{font-size:38px}}

/* r32 (2026-11-07): урок 11 — плитки тренажёров, как на главном экране ОМП. Только переменные Study. */
.study-l11 h2{margin:0 0 var(--sp-3);font-size:var(--fs-4)}
.study-l11 .omp-back{margin:0 0 var(--sp-3)}
.study-l11 .omp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin:0 0 var(--sp-4)}
@media (min-width:600px){.study-l11 .omp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.study-l11 .omp-tile{display:grid;grid-template-columns:auto 1fr;column-gap:var(--sp-2);row-gap:2px;align-items:center;align-content:center;min-height:72px;padding:var(--sp-3);border:1px solid var(--c-line);border-radius:var(--radius-lg);background:var(--c-sheet);color:var(--c-ink);text-align:left;cursor:pointer;font:inherit;width:auto}
.study-l11 .omp-tile-icon{grid-row:1 / span 2;font-size:26px;line-height:1}
.study-l11 .omp-tile b{font-size:var(--fs-2);line-height:1.2;overflow-wrap:break-word;hyphens:auto}
.study-l11 .omp-tile-fact{font-size:13px;color:var(--c-pencil)}.study-l11 .omp-tile-fact:empty{display:none}
.study-l11 .omp-tile:active{background:var(--c-blue-tint);border-color:var(--c-blue)}
.study-l11 .omp-tile:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}

/* ===================== Study UI 1 (Malik 2026-11-09): удобнее ученику на телефоне =====================
   Тетрадь: синяя ручка — действие, зелёная — что получилось. Видео — сразу под шапкой; учёт занятия — внизу;
   части видео — оглавлением; одно главное действие. Логика уроков не меняется. */

/* Шапка: без бегущей плашки «Режим сопровождения»; «Выйти» словом; аватар — буква имени. */
#classroomScreen .topbar-center { display: none; }
#classroomScreen .student-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-blue-tint); color: var(--c-blue); font-weight: 700; font-size: var(--fs-2); flex: 0 0 auto; }
#classroomScreen .btn-exit { min-height: 40px; padding: 6px 14px; }
#classroomScreen .progress-fill { background: var(--c-blue); }

/* Порядок на экране урока: статус → видео/тренажёр → учёт занятия (время, перерыв, закончить) внизу. */
#classroomScreen #lessonTimingPanel { order: 5; }
#classroomScreen .video-classroom { display: flex; flex-direction: column; gap: 12px; }
#classroomScreen .video-classroom > .lesson-one-microphone { order: 2; }

/* Плеер: поверх видео — только название урока (полоса по-прежнему закрывает шапку YouTube). */
#classroomScreen .shield-badge { display: none; }
#classroomScreen .player-top-shield { justify-content: flex-start; }
#classroomScreen .shield-lesson-title { font-size: var(--fs-1); line-height: 1.25; }

/* Под видео: без «Фаза 1: Освоение метода»; подсказка и главное действие. */
#classroomScreen .tag-phase { display: none; }
#classroomScreen .video-hint { color: var(--c-pencil); }

/* Оглавление видео: как оглавление в тетради — название, точки, время; ✓ зелёной ручкой. */
#classroomScreen #lessonVideos { display: block; padding: 4px 16px 12px; background: var(--c-sheet); }
#classroomScreen .toc-title { margin: 8px 0 4px; font-weight: 700; font-size: var(--fs-2); color: var(--c-ink); }
#classroomScreen .toc-note { margin: 4px 0 8px; font-size: var(--fs-1); color: var(--c-pencil); }
#classroomScreen .toc-row { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: baseline; gap: 6px; width: 100%; min-height: 44px; margin: 0; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; background: none; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
#classroomScreen .toc-row:hover:not(:disabled) { background: var(--c-blue-tint); }
#classroomScreen .toc-row:focus-visible { outline: 3px solid var(--c-blue); outline-offset: -3px; }
#classroomScreen .toc-row:disabled { color: var(--c-pencil); cursor: default; opacity: .7; }
#classroomScreen .toc-label { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
#classroomScreen .toc-label::after { content: ''; flex: 1 1 auto; min-width: 12px; border-bottom: 2px dotted var(--c-line); transform: translateY(-4px); }
#classroomScreen .toc-time { font-family: var(--font-digits); font-size: var(--fs-1); color: var(--c-pencil); font-variant-numeric: tabular-nums; white-space: nowrap; }
#classroomScreen .toc-mark { color: var(--c-green); font-weight: 800; }
#classroomScreen .toc-row.is-done .toc-label { color: var(--c-green); }
#classroomScreen .toc-video { font-weight: 700; }
#classroomScreen .toc-part { padding-left: 4px; }
#classroomScreen .toc-part .toc-label { font-weight: 500; }

/* Боковая панель урока 1: «Модули курса» — в «Программе», на узком экране не повторяем. */
@media (max-width: 1080px) { #classroomScreen .lesson-accordion { display: none; } }

@media (max-width: 720px) {
  /* Шапка в две строки: имя и «Выйти»; урок N из 11 с полосой и «Программа». Без логотипа и подписи курса. */
  #classroomScreen .edu-topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 10px 12px; }
  #classroomScreen .topbar-left, #classroomScreen .topbar-right { display: contents; }
  #classroomScreen .edu-logo, #classroomScreen .student-status { display: none; }
  #classroomScreen .student-pill { grid-column: 1; grid-row: 1; padding: 0; border: 0; background: none; box-shadow: none; gap: 10px; }
  #classroomScreen .student-name { font-size: var(--fs-2); }
  #classroomScreen .btn-exit { grid-column: 2; grid-row: 1; }
  #classroomScreen .course-progress-box { grid-column: 1; grid-row: 2; min-width: 0; }
  #classroomScreen .progress-labels { display: block; font-size: var(--fs-1); }
  #classroomScreen .progress-labels span { display: none; }
  #classroomScreen .topbar-right > .btn-secondary:not(.btn-exit) { grid-column: 2; grid-row: 2; min-height: 40px; padding: 6px 12px; }
  /* Под видео: подсказка и кнопка во всю ширину. */
  #classroomScreen .video-toolbar { flex-direction: column; align-items: stretch; }
  #classroomScreen .video-toolbar .toolbar-right, #classroomScreen .video-toolbar button { width: 100%; }
  #classroomScreen #lessonVideos { padding: 4px 12px 10px; }
}

/* Study UI 1b (Malik, скриншоты после UI 1): без пустых блоков и чёрных полос.
   Пустой статус над уроком не занимает места; оглавление без прежних отступов ряда кнопок (из-под них проступал чёрный фон плеера);
   в уроке с одним видео пустое оглавление не рисует белую полосу. */
#classroomScreen #studyStatus:empty { display: none; }
#classroomScreen #lessonVideos { margin: 0; }
#classroomScreen #lessonVideos:empty { display: none; }