/* ══ ТЗ №306.1: дизайн-система AI Teacher — Premium Dark + Soft Ice Blue ═══════════════════════════════════
   Один источник цветов, шрифтов, отступов, радиусов, границ, поверхностей и движения. Глубокий сине-графитовый
   фон, три уровня поверхностей, ледяной голубой — только акцент (действие, голос, активное). Семантические
   цвета состояний всегда идут вместе со словом или формой — цветом одним они не различаются.
   Прежние имена токенов (№292: paper, ink, rule…) — псевдонимы новых: вся разметка живёт на одной системе. */
:root {
  /* Поверхности: от фона к поднятым слоям */
  --bg: #080D16;
  --surface-1: #0D1523;        /* панели, док, поле ввода */
  --surface-2: #131F31;        /* карточки, сообщения, демонстрация */
  --surface-3: #1A2940;        /* наведение, выбранное */
  --border: #24344A;
  --border-strong: #34496A;
  /* Текст */
  --text: #F3F7FC;
  --text-2: #B2BDCC;           /* вторичный: проверен на #080D16 и #131F31 — читается уверенно */
  --text-3: #7F90A8;           /* приглушённый: подписи, время */
  /* Акцент */
  --accent: #A8D7FF;
  --accent-2: #D1E9FF;
  --accent-ink: #061322;       /* текст на акценте */
  --accent-soft: rgba(168, 215, 255, .12);
  --accent-line: rgba(168, 215, 255, .38);
  --glow: 0 0 0 1px rgba(168, 215, 255, .18), 0 0 42px rgba(120, 190, 255, .22);
  /* Состояния — всегда со словом или знаком */
  --success: #8EE6C4;  --success-soft: rgba(142, 230, 196, .12);
  --warning: #F6CF86;  --warning-soft: rgba(246, 207, 134, .12);
  --danger: #FF9F9F;   --danger-soft: rgba(255, 140, 140, .12);
  /* Типографика: один гротеск, иерархия — размером и насыщенностью */
  --sans: "Inter var", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 26px; --fs-3xl: 34px;
  /* Отступы и радиусы */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  /* Движение */
  --ease: cubic-bezier(.2, .7, .2, 1); --t-fast: .16s; --t-med: .24s; --t-slow: .36s;

  /* Псевдонимы прежней системы (№292) — те же значения, второй палитры нет */
  --paper: var(--bg); --paper-2: var(--surface-1); --paper-3: var(--surface-3);
  --ink: var(--text); --ink-2: var(--text-2); --muted: var(--text-3);
  --rule: var(--border); --rule-strong: var(--border-strong);
  --accent-hover: var(--accent-2); --accent-text: var(--accent-ink);
  --error: var(--danger); --error-soft: var(--danger-soft);
  --info: var(--success); --info-soft: var(--success-soft);
  --online: var(--success); --busy: var(--warning); --offline: var(--danger);
  --radius-s: var(--r-sm); --radius: var(--r-md);
  --serif: var(--sans);
  --measure: 62ch;
  --rail: 212px;
  --help: 420px;
  color-scheme: dark;
}

/* ── База ──────────────────────────────────────────────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }      /* атрибут hidden сильнее display у блоков */
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: 22px; margin: 0 0 14px; font-family: var(--serif); font-weight: 500; }
h3 { font-size: 17px; }
p { margin: 0 0 10px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); font-size: 14px; }
.eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.notice { background: var(--warning-soft); color: var(--warning); border-radius: var(--radius-s); padding: 10px 14px; margin: 0 0 12px; }
.error-text { color: var(--error); background: var(--error-soft); border-radius: var(--radius-s); padding: 9px 12px; margin: 0 0 10px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 16px 0; }

/* ── Кнопки: одна форма, несколько ролей ───────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px; border-radius: var(--radius-s);
  border: 1px solid var(--rule-strong); background: transparent; color: var(--ink);
  font-weight: 500; line-height: 1.2; white-space: normal; text-align: center;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .06s ease;
}
.btn:hover { background: var(--paper-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--paper-3); color: var(--ink); }
.btn-link { background: transparent; border: 0; padding: 4px 2px; min-height: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover { background: transparent; color: var(--accent-hover); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 14px; }
.btn-lg { min-height: 50px; padding: 12px 28px; font-size: 17px; }
.btn-icon { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; }
.btn-help { background: transparent; border-color: var(--rule-strong); color: var(--accent); font-weight: 600; }
.btn-help:hover { background: var(--accent-soft); }
.btn-help[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }

textarea, input[type="text"], select {
  width: 100%; border: 1px solid var(--rule-strong); border-radius: var(--radius-s); padding: 10px 12px;
  background: var(--paper); color: var(--ink); resize: vertical;
}
textarea:focus, input[type="text"]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Каркас ──────────────────────────────────────────── */
.app { height: 100%; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 22px; border-bottom: 1px solid var(--rule); position: relative;
}
.app[data-busy="true"] .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: sweep 1.2s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 17px; font-weight: 600; font-family: var(--serif); }
.brand-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.student-name { font-size: 14px; color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--online); }
.status[data-connection="busy"] .status-dot { background: var(--busy); }
.status[data-connection="offline"] .status-dot { background: var(--offline); }
.mode-switch { display: inline-flex; padding: 2px; border-radius: 999px; border: 1px solid var(--rule); }
.mode-switch button { border: 0; background: transparent; color: var(--muted); padding: 3px 10px; border-radius: 999px; font-size: 13px; }
.mode-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.layout { flex: 1 1 auto; min-height: 0; display: flex; }
.rail {
  flex: 0 0 var(--rail); display: flex; flex-direction: column; gap: 2px;
  padding: 18px 12px; border-right: 1px solid var(--rule); overflow-y: auto;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--ink-2); font-size: 15px;
}
.nav-item:hover { background: var(--paper-2); color: var(--ink); }
.nav-item[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.nav-item--quiet { color: var(--muted); }
.nav-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--muted); }
.nav-item[aria-current="page"] .nav-icon { color: var(--accent); }
.nav-icon svg { width: 18px; height: 18px; }
.nav-spacer { flex: 1 1 auto; }
.badge { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper-3); color: var(--muted); font-size: 12px; text-align: center; }
.lesson-nav { list-style: none; margin: 2px 0 6px; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 1px; }
.lesson-nav button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 10px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--ink-2); font-size: 14px; text-align: left;
}
.lesson-nav button:hover { background: var(--paper-2); }
.lesson-nav button[data-status="current"] { color: var(--accent); font-weight: 600; }
.lesson-nav button[data-status="locked"] { color: var(--muted); }
.lesson-icon { width: 18px; text-align: center; flex: none; font-size: 12px; }

.content { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 26px 32px; }
.section { max-width: 760px; margin: 0 auto; }
.section-learn { display: flex; flex-direction: column; gap: 16px; height: 100%; }   /* лента сжимается, сцена видна всегда */

/* ── Вход ──────────────────────────────────────────────── */
.section-start { max-width: 640px; padding-top: 8vh; }
.entry-title { font-family: var(--serif); font-weight: 500; font-size: 38px; line-height: 1.15; margin: 6px 0 16px; letter-spacing: -.015em; }
.entry-lead { font-size: 18px; color: var(--ink-2); margin-bottom: 26px; max-width: 56ch; }
.entry-steps { list-style: none; margin: 0 0 30px; padding: 18px 0 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.entry-steps li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-2); }
.entry-steps strong { color: var(--ink); font-weight: 600; }
.entry-step-n { flex: none; width: 24px; font-family: var(--serif); font-size: 18px; color: var(--accent); line-height: 1.4; }
.entry-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.entry-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.entry-foot { margin: 26px 0 0; color: var(--muted); font-size: 14px; max-width: 52ch; }

/* ── Контекст шага ─────────────────────────────────────── */
.step-card { padding: 0 0 14px; border-bottom: 1px solid var(--rule); }
.step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.step-title { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.step-task { margin-top: 10px; }
.step-task p:last-child { margin: 0; color: var(--ink-2); }
.step-materials { margin-top: 10px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.environment-card { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.environment-line span:first-child { color: var(--muted); }
.environment-question { font-weight: 500; }
.platform-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.preparation { margin-top: 8px; }
.preparation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ── Разговор: стенограмма, не чат с пузырями ──────────── */
.chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.messages { list-style: none; margin: 0; padding: 6px 0 18px; flex: 1 1 auto; min-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.msg { display: flex; flex-direction: column; max-width: var(--measure); }
.msg-meta { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; }
.msg-meta time { font-weight: 400; letter-spacing: 0; text-transform: none; }
.msg-bubble { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg--teacher .msg-bubble { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink); }
.msg--student { padding-left: 16px; border-left: 2px solid var(--rule-strong); }
.msg--student .msg-bubble { color: var(--ink-2); line-height: 1.55; }
.msg--notice .msg-bubble { font-family: var(--sans); font-size: 15px; color: var(--info); background: var(--info-soft); padding: 10px 14px; border-radius: var(--radius-s); }
.msg--error .msg-bubble { font-family: var(--sans); font-size: 15px; color: var(--error); background: var(--error-soft); padding: 10px 14px; border-radius: var(--radius-s); }
.msg--pending { opacity: .55; }
.msg-voiced { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.thinking .msg-bubble { color: var(--muted); display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 15px; }
.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out; }
.thinking-dots span:nth-child(2) { animation-delay: .2s; }
.thinking-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.teacher-audio { margin-top: 8px; }

/* Док действий: главное действие — одно, второстепенные тихие. */
.dock { border-top: 1px solid var(--rule); padding: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.turn-state { margin: 0; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.turn-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.turn-state[data-kind="waiting"]::before { background: var(--busy); }
.turn-state[data-kind="closed"]::before { background: var(--muted); }
.teacher-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.teacher-actions .btn-primary { order: -1; }
.teacher-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.instruction-status { width: 100%; margin: 0 0 2px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; }
.instruction-counter { font-weight: 600; color: var(--ink-2); }
.instruction-choice:empty { display: none; }
.dock-help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dock-help:empty { display: none; }

.submission { border-top: 1px solid var(--rule); padding: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.submission-title { font-weight: 600; margin: 0; }
.submission-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.submission-field--confirm label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.submission-field--confirm input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.review-box { border-top: 1px solid var(--rule); padding: 12px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.review-box .muted { color: var(--info); margin: 0; }

/* ── Голосовой режим: сцена разговора ──────────────────── */
.stage { border-top: 1px solid var(--rule); padding: 18px 0 8px; text-align: center; }
.live-teacher { font-family: var(--serif); font-size: 20px; line-height: 1.45; color: var(--ink); max-width: var(--measure); margin: 0 auto 14px; min-height: 0; }
.live-teacher:empty { display: none; }
.stage-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.stage-left { justify-self: end; }
.stage-right { justify-self: start; display: flex; align-items: center; gap: 2px; }
.stage-side { color: var(--muted); }
.voice-button {
  position: relative; width: 76px; height: 76px; border-radius: 50%; border: 0; padding: 0;
  background: var(--accent); color: var(--accent-text); display: grid; place-items: center;
  transition: background .15s ease, transform .1s ease;
}
.voice-button:hover { background: var(--accent-hover); }
.voice-button:active { transform: scale(.97); }
.voice-button:disabled { opacity: .6; cursor: default; }
.voice-ring { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.live-state { margin: 12px 0 2px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.live-hint { margin: 0; color: var(--muted); font-size: 13px; max-width: 48ch; margin-inline: auto; }
/* Состояния: кольцо и цвет кнопки — слова ниже. */
.stage[data-live="listening"] .voice-ring { opacity: 1; animation: pulse 1.8s ease-out infinite; }
.stage[data-live="hearing"] .voice-ring { opacity: 1; inset: -11px; border-width: 3px; }
.stage[data-live="hearing"] .voice-button { background: var(--ink); color: var(--paper); }
.stage[data-live="transcribing"] .voice-ring, .stage[data-live="processing"] .voice-ring, .stage[data-live="starting"] .voice-ring,
.stage[data-live="micRequest"] .voice-ring, .stage[data-live="micReady"] .voice-ring {
  opacity: 1; border-style: dashed; border-color: var(--rule-strong); animation: turn 2.4s linear infinite;
}
.stage[data-live="speaking"] .voice-button { background: var(--paper); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.stage[data-live="speaking"] .voice-ring { opacity: 1; animation: pulse 1.8s ease-out infinite; }
.stage[data-live="error"] .voice-button, .stage[data-live="noSpeech"] .voice-button { background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--rule-strong); }
.stage[data-live="error"] .live-state { color: var(--error); }
.app[data-voice="unavailable"] .voice-button { background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 2px var(--rule); cursor: default; }
@keyframes pulse { 0% { transform: scale(.92); opacity: .9; } 70% { transform: scale(1.18); opacity: 0; } 100% { opacity: 0; } }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .thinking-dots span, .app[data-busy="true"] .topbar::after, .voice-ring { animation: none !important; }
}

/* ── Текстовый режим: форма ввода ──────────────────────── */
.recording-state { margin: 0; padding: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px 0 6px; border-top: 1px solid var(--rule); }
.composer textarea, .note-form textarea, .note-edit textarea { width: 100%; }
.composer textarea { resize: none; max-height: 160px; min-height: 42px; background: var(--paper-2); border-color: transparent; }
.composer textarea:focus { background: var(--paper); border-color: var(--accent); }
.composer-icon { flex: none; width: 42px; height: 42px; border: 1px solid var(--rule-strong); border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ink-2); }
.composer-icon:hover { background: var(--paper-2); }
.composer-send { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.composer-send:hover { background: var(--accent-hover); }
.composer-icon:disabled { opacity: .45; cursor: default; }
.composer button.recording { background: var(--offline); border-color: var(--offline); color: #fff; }
.composer-foot { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.composer-foot .btn-link { margin-left: auto; font-size: 13px; }
/* Два режима одного экрана: показывается либо сцена разговора, либо форма ввода. История — одна. */
.app[data-input="voice"] .composer, .app[data-input="voice"] .composer-foot, .app[data-input="voice"] .recording-state { display: none; }
.app[data-input="text"] .stage { display: none; }

/* ── Помощь по шагу ────────────────────────────────────── */
.help-panel {
  flex: 0 0 var(--help); display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--rule); background: var(--paper-2);
}
.help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--rule); }
.help-title { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 0; }
.help-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.help-foot { padding: 12px 20px 16px; border-top: 1px solid var(--rule); }
.help-action { padding: 12px 14px; border-left: 3px solid var(--accent); color: var(--ink); }
.help-action .label { color: var(--accent); }
.help-video { width: 100%; max-height: 260px; border-radius: var(--radius-s); background: #000; }
.help-video-missing { padding: 14px; border-radius: var(--radius-s); border: 1px dashed var(--rule-strong); color: var(--muted); display: flex; gap: 12px; align-items: flex-start; }
.help-demo { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--warning); background: var(--warning-soft); border-radius: 999px; padding: 2px 10px; align-self: flex-start; }
.help-steps { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.help-steps li { line-height: 1.55; }
.help-steps .btn-link { font-size: 13px; margin-left: 6px; }
.help-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.help-meta { color: var(--muted); font-size: 13px; }

/* ── Уроки, материалы, заметки, памятка ──────────────────── */
.lesson-list, .note-list, .step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.lesson-row {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 4px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink);
}
.lesson-row:hover { background: var(--paper-2); }
.lesson-row[data-status="current"] { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.lesson-row[data-status="locked"] { color: var(--muted); }
.lesson-sub { display: block; font-size: 13px; color: var(--muted); }
.lesson-value { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.meter { width: 90px; height: 5px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); }
.lesson-detail { padding: 6px 0; }
.step-list li { padding: 8px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 10px; }
.step-list li:last-child { border-bottom: 0; }
.step-note { color: var(--muted); font-size: 13px; }

.material-group { margin-bottom: 18px; }
.material-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.material-card { text-align: left; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: transparent; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.material-card:hover { border-color: var(--rule-strong); background: var(--paper-2); }
.material-card-title { font-weight: 600; }
.material-viewer { padding: 6px 0; }
.material-title { font-family: var(--serif); font-weight: 500; font-size: 26px; margin-top: 8px; }
.material-content { max-width: var(--measure); }
.material-content pre { background: var(--paper-2); border-radius: var(--radius-s); padding: 10px 12px; overflow-x: auto; white-space: pre; }
.material-content code { background: var(--paper-2); border-radius: 4px; padding: 1px 5px; }

.note-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.note-form .btn { align-self: flex-start; }
.note { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.note-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 8px; }
.note-actions { display: flex; gap: 6px; }
.note-edit { display: flex; flex-direction: column; gap: 8px; }

.product-card { padding: 0; border-bottom: 1px solid var(--rule); }
.product-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.product-summary::-webkit-details-marker { display: none; }
.product-summary .eyebrow { margin: 0; }
.product-summary-hint { font-size: 13px; color: var(--muted); }
.product-card[open] .product-summary-hint { visibility: hidden; }
.product-card > :last-child:not(summary) { margin-bottom: 16px; }
.product-card .product-known { color: var(--ink-2); }
.product-question { font-weight: 500; }
.product-block { margin-top: 10px; }
.product-task { padding: 10px 14px; border-radius: var(--radius-s); background: var(--paper-2); }
.product-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.product-history { color: var(--muted); font-size: 14px; }
.project-teacher { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }

/* ── Developer ─────────────────────────────────────────── */
.dev-panel { flex: 0 0 320px; border-left: 1px solid var(--rule); background: var(--paper-2); padding: 16px; overflow-y: auto; font-size: 13px; }
.dev-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dev-header h2 { font-size: 14px; margin: 0; font-family: var(--sans); font-weight: 600; }
.dev-badge { font-size: 11px; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; }
.dev-fields { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.dev-fields dt { color: var(--muted); }
.dev-fields dd { margin: 0; overflow-wrap: anywhere; }

/* ── Адаптивность ──────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --help: 360px; }
  .dev-panel { flex-basis: 260px; }
}
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .rail {
    flex: none; flex-direction: row; flex-wrap: nowrap; gap: 4px; padding: 6px 10px;
    border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; overflow-y: hidden;
  }
  .lesson-nav, .nav-spacer { display: none; }
  .nav-item { width: auto; flex: none; padding: 7px 10px; font-size: 14px; }
  .nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
  .nav-item span:not(.nav-icon):not(.badge) { white-space: nowrap; }
  .content { padding: 14px 16px; }
  .section-start { padding-top: 3vh; }
  .entry-title { font-size: 30px; }
  .section-learn { height: auto; min-height: 100%; }
  .messages { max-height: 46vh; min-height: 120px; }   /* сцена разговора остаётся на экране без прокрутки */
  .msg--teacher .msg-bubble { font-size: 18px; }
  .stage-row { grid-template-columns: 1fr auto 1fr; gap: 6px; }
  .stage-side { font-size: 13px; padding-inline: 8px; }
  .help-panel { position: fixed; inset: 0; z-index: 20; flex-basis: auto; border-left: 0; }
  .dev-panel { flex-basis: auto; border-left: 0; border-top: 1px solid var(--rule); }
  .topbar { padding: 8px 12px; }
  .student-name { display: none; }
}

/* ══ ТЗ №306: голосовое пространство ═══════════════════════════════════════════════════════════════════
   Центр экрана — разговор голосом: визуализация реального звука, реплика учителя, состояние. Меню курса и
   стенограмма — выдвижные панели поверх экрана, по запросу. Те же токены «тетради», отдельной дизайн-системы нет. */
:root { --topbar: 54px; --drawer-left: min(300px, 86vw); --drawer-right: min(420px, 94vw); --ease: cubic-bezier(.2, .7, .2, 1); }

.topbar { display: grid; grid-template-columns: 1fr auto 1fr; height: var(--topbar); padding: 0 14px; z-index: 5; background: var(--paper); }
.topbar-start { display: flex; align-items: center; gap: 10px; }
.topbar-actions { justify-self: end; gap: 10px; }
.topbar-lesson { margin: 0; justify-self: center; max-width: 46vw; font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-lesson strong { color: var(--ink); font-weight: 600; }
.icon-button {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); transition: background .15s ease, color .15s ease;
}
.icon-button:hover { background: var(--paper-2); color: var(--ink); }
.icon-button[aria-expanded="true"] { background: var(--paper-3); color: var(--ink); }
.icon-button-sm { width: 30px; height: 30px; }
.unread-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); }

/* Каркас: содержание во всю ширину, панели — поверх. */
.layout { position: relative; }
.content { padding: 18px 28px 22px; }
.drawer {
  position: fixed; top: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; min-height: 0;
  background: var(--paper); box-shadow: 0 0 0 1px var(--rule), 0 18px 48px rgba(0, 0, 0, .14);
  transition: transform .24s var(--ease), visibility 0s linear .24s; visibility: hidden;
}
.drawer-left { left: 0; width: var(--drawer-left); transform: translateX(-102%); }
.drawer-right { right: 0; width: var(--drawer-right); transform: translateX(102%); }
.app[data-menu="open"] .drawer-left, .app[data-transcript="open"] .drawer-right {
  transform: none; visibility: visible; transition: transform .24s var(--ease), visibility 0s;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 10px 18px; border-bottom: 1px solid var(--rule); }
.drawer-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 19px; }
.rail.drawer { flex: none; padding: 0 10px 14px; border-right: 0; overflow-y: auto; gap: 2px; }
.rail.drawer .drawer-head { margin: 0 -10px 10px; }
.scrim { position: fixed; inset: 0; z-index: 25; background: rgba(20, 18, 14, .28); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Стенограмма: реплики, не чат с пузырями; длинный разговор прокручивается внутри панели. */
.transcript .messages { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 16px 20px 22px; gap: 18px; }
.transcript .msg--teacher .msg-bubble { font-size: 17px; }
.transcript-latest { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule-strong); }

/* Сцена: голос в центре свободного пространства. */
.section-learn { gap: 12px; }
.stage {
  flex: 1 0 auto; min-height: min(62vh, 560px); border-top: 0; padding: 4px 0 6px;
  display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; gap: 22px;
}
.stage[data-demo="shown"] { grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); }
.stage-core { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 640px; }
.orb { position: relative; width: 248px; height: 248px; display: grid; place-items: center; }
.voice-viz { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orb .voice-button { width: 92px; height: 92px; z-index: 1; box-shadow: 0 10px 30px rgba(43, 77, 122, .18); }
.orb .voice-ring { display: none; }                         /* кольцо теперь рисует визуализация реального звука */
.stage .live-state { margin: 6px 0 0; font-size: 14px; letter-spacing: .02em; color: var(--muted); }
.stage .live-teacher { margin: 14px auto 0; font-size: 22px; line-height: 1.45; max-width: 34ch; min-height: 0;
  animation: rise .35s var(--ease); }
.stage .live-hint { margin-top: 12px; }
.stage .stage-row { margin-top: 18px; display: flex; justify-content: center; gap: 6px; }
.stage .stage-left, .stage .stage-right { justify-self: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Контекст и действия занятия — компактно под сценой. */
.context { align-self: center; width: 100%; max-width: 760px; border-top: 1px solid var(--rule); }
.context-summary { list-style: none; cursor: pointer; display: flex; justify-content: center; gap: 10px; padding: 10px 0; font-size: 13px; color: var(--muted); }
.context-summary::-webkit-details-marker { display: none; }
.context-summary::after { content: "▾"; transition: transform .2s ease; }
.context[open] .context-summary::after { transform: rotate(180deg); }
.context-summary:hover { color: var(--ink-2); }
.context-hint:empty { display: none; }
.context[open] { padding-bottom: 10px; }
.context > :not(summary) { animation: rise .25s var(--ease); }
.chat { flex: none; }
.dock { border-top: 0; padding-top: 0; align-items: center; }
.dock .teacher-actions, .dock .dock-help { justify-content: center; }
.turn-state { justify-content: center; }
.app[data-input="text"] .section-learn .chat { order: 2; }

/* ── Микродемонстрация ──────────────────────────────── */
.demo {
  margin: 0; width: 100%; border-radius: 14px; background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule), 0 14px 34px rgba(0, 0, 0, .10);
  padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 8px; animation: demo-in .32s var(--ease);
}
@keyframes demo-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.demo.leaving { animation: demo-out .22s ease forwards; }
@keyframes demo-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
.demo-head { display: flex; align-items: baseline; gap: 10px; padding: 0 2px; }
.demo-head .eyebrow { margin: 0; flex: none; }
.demo-title { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-caption { margin: 0; min-height: 1.5em; font-size: 14px; color: var(--ink-2); padding: 0 2px; }
.demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.demo-note { font-size: 12px; color: var(--muted); }
.demo-foot .btn-link { font-size: 13px; }
.demo-screen { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: #dfe4ea;
  font: 12px/1.3 var(--sans); color: #1d232b; user-select: none; }
.demo-el { position: absolute; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 6px; overflow: hidden;
  white-space: nowrap; transition: opacity .25s ease, transform .25s ease; }
.demo-el[data-kind="window"] { align-items: flex-start; padding: 26px 10px 8px; background: #fbfbfc; box-shadow: 0 6px 18px rgba(0, 0, 0, .16); border-radius: 8px; flex-direction: column; white-space: normal; }
.demo-el[data-kind="window"]::before { content: ""; position: absolute; top: 9px; left: 10px; width: 34px; height: 8px;
  background: radial-gradient(circle at 4px 4px, #ff5f57 3.5px, transparent 4px), radial-gradient(circle at 16px 4px, #febc2e 3.5px, transparent 4px), radial-gradient(circle at 28px 4px, #28c840 3.5px, transparent 4px); }
.demo-el[data-kind="window"][data-os="windows"]::before { left: auto; right: 10px; width: 46px; background: none; content: "—  ☐  ✕"; height: auto; top: 5px; font-size: 11px; color: #555; letter-spacing: 2px; }
.demo-el[data-kind="terminal"] { background: #1f2329; color: #d7dde5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; align-items: flex-start; padding: 26px 10px 8px; flex-direction: column; white-space: pre-wrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); border-radius: 8px; }
.demo-el[data-kind="terminal"]::before { content: ""; position: absolute; top: 9px; left: 10px; width: 34px; height: 8px;
  background: radial-gradient(circle at 4px 4px, #ff5f57 3.5px, transparent 4px), radial-gradient(circle at 16px 4px, #febc2e 3.5px, transparent 4px), radial-gradient(circle at 28px 4px, #28c840 3.5px, transparent 4px); }
.demo-el[data-kind="bar"] { background: rgba(255, 255, 255, .75); border-radius: 0; font-weight: 600; }
.demo-el[data-kind="field"] { background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); border-radius: 10px; font-size: 13px; }
.demo-el[data-kind="item"] { background: rgba(255, 255, 255, .92); }
.demo-el[data-kind="button"] { background: #2b4d7a; color: #fff; justify-content: center; font-weight: 600; }
.demo-el[data-kind="label"] { background: transparent; color: #4b5563; }
.demo-el[data-hidden="true"] { opacity: 0; transform: translateY(4px); pointer-events: none; }
.demo-el .demo-typed::after { content: "▍"; animation: blink 1s steps(1) infinite; margin-left: 1px; }
.demo-hl { position: absolute; border-radius: 8px; box-shadow: 0 0 0 3px #f2b134, 0 0 0 7px rgba(242, 177, 52, .28);
  transition: all .45s var(--ease); pointer-events: none; opacity: 0; }
.demo-hl.on { opacity: 1; }
.demo-cursor { position: absolute; width: 18px; height: 22px; left: 50%; top: 60%; transition: left .7s var(--ease), top .7s var(--ease); pointer-events: none; z-index: 3; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.demo-cursor.click::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #f2b134; animation: ripple .45s ease-out; }
@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.demo-keys { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 4; animation: rise .25s ease; }
.demo-key { min-width: 34px; padding: 6px 10px; border-radius: 7px; background: #fff; box-shadow: 0 2px 0 #b8bec8, 0 4px 12px rgba(0,0,0,.18); font-weight: 600; font-size: 13px; text-align: center; }

/* ── Заметки по урокам ──────────────────────────────── */
.lesson-notes { margin: 0 0 26px; }
.lesson-notes-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; }
.lesson-notes-tabs button { border: 1px solid var(--rule); background: transparent; color: var(--ink-2); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.lesson-notes-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lesson-notes-tabs button[data-empty="true"] { color: var(--muted); }
.note-section { margin: 0 0 16px; }
.note-section h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.note-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.note-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.note-item:last-child { border-bottom: 0; }
.note-status { font-size: 12px; white-space: nowrap; border-radius: 999px; padding: 1px 9px; background: var(--paper-2); color: var(--ink-2); }
.note-status[data-status="CONFIRMED"] { background: var(--info-soft); color: var(--info); }
.note-status[data-status="REPORTED"] { background: var(--accent-soft); color: var(--accent); }
.note-status[data-status="DISCUSSED"], .note-status[data-status="PLANNED"] { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.notes-subtitle { margin: 6px 0 6px; font-family: var(--serif); font-weight: 500; font-size: 18px; }

@media (min-width: 1280px) {
  .app[data-transcript="open"] .content { padding-right: calc(var(--drawer-right) + 28px); }   /* разговор не закрывает сцену */
  .app[data-transcript="open"] .scrim { display: none; }
}
@media (max-width: 960px) {
  .stage[data-demo="shown"] { grid-template-columns: 1fr; }
  .stage[data-demo="shown"] .orb { width: 168px; height: 168px; }
  .stage[data-demo="shown"] .orb .voice-button { width: 70px; height: 70px; }
}
@media (max-width: 860px) {
  .layout { flex-direction: row; }
  .rail.drawer { flex-direction: column; flex-wrap: nowrap; padding: 0 10px 14px; overflow-x: hidden; overflow-y: auto; border-bottom: 0; }
  .rail.drawer .lesson-nav, .rail.drawer .nav-spacer { display: flex; }
  .rail.drawer .nav-item { width: 100%; padding: 8px 10px; font-size: 15px; }
  .rail.drawer .nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
  .content { padding: 10px 14px 16px; }
  .topbar { padding: 0 6px; }
  .brand h1 { font-size: 15px; }
  .stage { min-height: 56vh; }
  .orb { width: 200px; height: 200px; }
  .stage .live-teacher { font-size: 19px; }
}
@media (max-width: 520px) {
  .brand { display: none; }
  .topbar-lesson { max-width: 58vw; }
  .status-text, #status-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .demo, .demo-cursor, .demo-hl, .stage .live-teacher { transition: none !important; animation: none !important; }
}

/* Текстовый режим: лента над полем ввода, сцена голоса уступает место; демонстрация остаётся видна. */
.app[data-input="text"] .stage { display: grid; min-height: 0; }

/* Узкий экран: заголовок урока рядом с кнопкой меню, без наложения; переключатель режима разработчика — тише. */
@media (max-width: 860px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .topbar-lesson { justify-self: start; max-width: none; min-width: 0; }
  .mode-switch button { padding: 2px 7px; font-size: 12px; }
  .stage[data-demo="shown"] { gap: 14px; }
}

/* ══ ТЗ №306.1: компоненты на токенах дизайн-системы ═══════════════════════════════════════════════════
   Этот слой последний: прежние правила остаются для разметки, а вид задают общие компоненты ниже. */
body {
  background: radial-gradient(1100px 680px at 50% 28%, #0F1B2E 0%, rgba(15, 27, 46, 0) 70%), var(--bg);
  color: var(--text); font: 400 16px/1.55 var(--sans); letter-spacing: -.003em;
}
h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.012em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
.eyebrow { font-size: 11px; letter-spacing: .12em; color: var(--text-3); }
.label { color: var(--text-2); }
.muted { color: var(--text-3); }
.notice { background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(246, 207, 134, .25); border-radius: var(--r-sm); }
.error-text { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(255, 140, 140, .25); border-radius: var(--r-sm); }
.error-text::before { content: "⚠ "; }
::selection { background: rgba(168, 215, 255, .3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Кнопки: одна форма, роли — заливкой */
.btn { min-height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface-1);
  color: var(--text); font-weight: 500; transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform .06s ease; }
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600;
  box-shadow: 0 6px 22px rgba(120, 190, 255, .22); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-link { color: var(--accent); }
.btn-link:hover { color: var(--accent-2); }
.btn-help { background: var(--surface-1); border-color: var(--accent-line); color: var(--accent); }
.btn-help:hover, .btn-help[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }

/* Поля ввода */
textarea, input[type="text"], select { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); }
textarea::placeholder, input::placeholder { color: var(--text-3); }
textarea:focus, input[type="text"]:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Верхняя панель */
.topbar { height: 60px; padding: 0 16px; background: rgba(8, 13, 22, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.brand h1 { font-family: var(--sans); font-size: var(--fs-md); font-weight: 600; letter-spacing: .01em; }
.brand-mark { width: 9px; height: 9px; background: var(--accent); box-shadow: 0 0 12px rgba(168, 215, 255, .8); }
.topbar-lesson { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.topbar-lesson strong { color: var(--text); font-weight: 600; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-2); }
.icon-button:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.icon-button[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.icon-button-sm { width: 30px; height: 30px; border-color: transparent; background: transparent; }
.unread-dot { background: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 10px rgba(168, 215, 255, .8); }
.status { padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-xs); }
.status-dot { box-shadow: 0 0 8px currentColor; color: var(--success); }
.status[data-connection="busy"] .status-dot { color: var(--warning); }
.status[data-connection="offline"] .status-dot { color: var(--danger); }
.student-name { color: var(--text-3); }
.mode-switch { border-color: var(--border); background: var(--surface-1); }
.mode-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* Панели: одна поверхность, одна граница, плавный выезд */
.drawer { background: var(--surface-1); box-shadow: 0 0 0 1px var(--border), 0 24px 70px rgba(0, 0, 0, .55); }
.drawer-head { border-bottom: 1px solid var(--border); padding: 14px 16px 12px 20px; }
.drawer-title { font-family: var(--sans); font-size: var(--fs-lg); font-weight: 600; }
.scrim { background: rgba(3, 6, 12, .62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.nav-item { min-height: 40px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-md); }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item[aria-current="page"], .rail.drawer .nav-item[aria-current="page"] {
  background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); border-radius: var(--r-sm); }
.nav-icon { color: var(--text-3); }
.nav-item[aria-current="page"] .nav-icon { color: var(--accent); }
.badge { background: var(--surface-3); color: var(--text-2); }
.lesson-nav { padding-left: 14px; margin: 2px 0 8px; border-left: 1px solid var(--border); margin-left: 21px; }
.lesson-nav button { min-height: 34px; color: var(--text-2); border-radius: var(--r-sm); }
.lesson-nav button:hover { background: var(--surface-2); color: var(--text); }
.lesson-nav button[data-status="current"] { color: var(--accent); background: var(--accent-soft); }
.lesson-nav button[data-status="locked"] { color: var(--text-3); }

/* Стенограмма: учитель и студент различаются положением, поверхностью и подписью */
.messages { gap: 14px; }
.msg-meta { font-size: 11px; letter-spacing: .1em; color: var(--text-3); }
.msg-bubble { font-family: var(--sans); }
.msg--teacher .msg-bubble { font-family: var(--sans); font-size: var(--fs-md); line-height: 1.55; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px var(--r-md) var(--r-md) var(--r-md); padding: 11px 14px; }
.transcript .msg--teacher .msg-bubble { font-size: var(--fs-md); }
.msg--student { align-self: flex-end; align-items: flex-end; padding-left: 0; border-left: 0; max-width: 88%; }
.msg--student .msg-bubble { color: var(--text); background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-md) 4px var(--r-md) var(--r-md); padding: 10px 14px; }
.msg--notice .msg-bubble { background: var(--surface-1); color: var(--text-2); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.msg--error .msg-bubble { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(255, 140, 140, .3); border-radius: var(--r-md); }
.msg--error .msg-bubble::before { content: "⚠ "; }
.msg-voiced { color: var(--accent); }
.transcript-latest { background: var(--surface-3); border: 1px solid var(--accent-line); color: var(--accent); border-radius: var(--r-pill); }

/* ── Сцена голоса ───────────────────────────────────── */
.stage { min-height: min(66vh, 600px); }
.orb { width: 288px; height: 288px; }
.orb .voice-button {
  width: 92px; height: 92px; border: 1px solid var(--accent-line); color: var(--accent);
  background: radial-gradient(circle at 50% 35%, #1B2B45 0%, #0F1828 72%); box-shadow: var(--glow);
  transition: transform var(--t-fast) ease, border-color var(--t-med) ease, background var(--t-med) ease, color var(--t-med) ease, box-shadow var(--t-med) ease;
}
.orb .voice-button:hover { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(168, 215, 255, .35), 0 0 54px rgba(120, 190, 255, .32); }
.stage[data-live="listening"] .voice-button { color: var(--accent-2); border-color: var(--accent); }
.stage[data-live="hearing"] .voice-button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-2); }
.stage[data-live="speaking"] .voice-button { background: radial-gradient(circle at 50% 35%, #1B2B45 0%, #0F1828 72%); color: var(--accent); box-shadow: var(--glow); }
.stage[data-live="error"] .voice-button, .stage[data-live="noSpeech"] .voice-button { color: var(--danger); border-color: rgba(255, 140, 140, .45); box-shadow: none; }
.app[data-voice="unavailable"] .orb .voice-button { color: var(--text-3); border-color: var(--border); box-shadow: none; }
.stage .live-state { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
  background: var(--surface-1); border: 1px solid var(--border); }
.stage .live-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.stage[data-live="listening"] .live-state::before, .stage[data-live="hearing"] .live-state::before { background: var(--accent-2); box-shadow: 0 0 8px var(--accent); }
.stage[data-live="speaking"] .live-state::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.stage[data-live="processing"] .live-state::before, .stage[data-live="transcribing"] .live-state::before { background: var(--warning); }
.stage[data-live="error"] .live-state { color: var(--danger); border-color: rgba(255, 140, 140, .35); background: var(--danger-soft); }
.stage[data-live="error"] .live-state::before { background: var(--danger); }
.stage .live-teacher { font-family: var(--sans); font-size: var(--fs-xl); font-weight: 500; line-height: 1.45; letter-spacing: -.01em;
  color: var(--text); max-width: 32ch; margin-top: 18px; }
.stage .live-hint { font-size: var(--fs-sm); color: var(--text-3); max-width: 44ch; }
.stage .stage-row { gap: 8px; }
.stage-side { border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-1); color: var(--text-2); min-height: 34px; padding: 6px 14px; }
.stage-side:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

/* Контекст и действия занятия */
.context { border-top: 1px solid var(--border); }
.context-summary { color: var(--text-3); font-size: var(--fs-sm); }
.context-summary:hover { color: var(--text); }
.context .step-card, .context .environment-card, .context .product-card { background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px; margin-top: 8px; }
.step-title { font-family: var(--sans); font-weight: 600; font-size: var(--fs-lg); }
.turn-state { color: var(--text-2); font-size: var(--fs-sm); }
.turn-state::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.submission, .review-box { border-top: 1px solid var(--border); }

/* ── Микродемонстрация ──────────────────────────────── */
.demo { background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: 14px 14px 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(168, 215, 255, .05); }
.demo-head .eyebrow { color: var(--accent); }
.demo-title { color: var(--text); font-size: var(--fs-sm); }
.demo-screen { border-radius: var(--r-md); border: 1px solid var(--border); }
.demo-caption { color: var(--text); font-size: var(--fs-md); font-weight: 500; }
.demo-note { color: var(--text-3); }
.demo-hl { border-radius: 9px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(168, 215, 255, .28), 0 0 24px rgba(168, 215, 255, .45); }
.demo-cursor.click::after { border-color: var(--accent); }

/* ── Ввод текстом ───────────────────────────────────── */
.composer { border-top: 0; padding-top: 10px; }
.composer textarea { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); }
.composer textarea:focus { background: var(--surface-1); border-color: var(--accent); }
.composer-icon { border-color: var(--border); background: var(--surface-1); color: var(--text-2); }
.composer-icon:hover { background: var(--surface-2); color: var(--text); }
.composer-send { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.composer-send:hover { background: var(--accent-2); }
.composer-foot { color: var(--text-3); }

/* ── Разделы: уроки, материалы, заметки ───────────────── */
.content .section > h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-5); }
.entry-title { font-family: var(--sans); font-weight: 650; font-size: var(--fs-3xl); letter-spacing: -.02em; }
.entry-lead { color: var(--text-2); }
.entry-step-n { font-family: var(--sans); font-weight: 600; color: var(--accent); }
.lesson-row { border-bottom: 1px solid var(--border); border-radius: 0; }
.lesson-row:hover { background: var(--surface-1); }
.lesson-row[data-status="current"] { box-shadow: inset 3px 0 0 var(--accent); }
.meter { background: var(--surface-3); }
.meter span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.material-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); }
.material-card:hover { background: var(--surface-2); border-color: var(--border-strong); }
.lesson-notes-tabs button { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-2); padding: 6px 14px; font-weight: 500; }
.lesson-notes-tabs button:hover { background: var(--surface-2); color: var(--text); }
.lesson-notes-tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.note-section { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px 6px; }
.note-section h4 { color: var(--text-3); font-size: 11px; letter-spacing: .12em; }
.note-item { border-bottom: 1px solid var(--border); padding: 9px 0; }
.note-status { font-size: var(--fs-xs); font-weight: 600; padding: 2px 10px; border: 1px solid transparent; }
.note-status::before { margin-right: 5px; }
.note-status[data-status="CONFIRMED"] { background: var(--success-soft); color: var(--success); border-color: rgba(142, 230, 196, .3); }
.note-status[data-status="CONFIRMED"]::before { content: "✓"; }
.note-status[data-status="REPORTED"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.note-status[data-status="REPORTED"]::before { content: "◆"; }
.note-status[data-status="DISCUSSED"] { background: var(--warning-soft); color: var(--warning); border-color: rgba(246, 207, 134, .3); }
.note-status[data-status="DISCUSSED"]::before { content: "◐"; }
.note-status[data-status="PLANNED"] { background: transparent; color: var(--text-3); border-color: var(--border-strong); }
.note-status[data-status="PLANNED"]::before { content: "○"; }
.notes-subtitle { font-family: var(--sans); font-weight: 600; font-size: var(--fs-lg); }
.note { border-bottom: 1px solid var(--border); }
.help-panel, .dev-panel { background: var(--surface-1); border-left: 1px solid var(--border); }
.help-title { font-family: var(--sans); font-weight: 600; }
.help-action { border-left-color: var(--accent); background: var(--surface-2); border-radius: var(--r-sm); }

/* ── Мобильная композиция: своя, а не уменьшенная ─────── */
@media (max-width: 860px) {
  .topbar { height: 56px; padding: 0 10px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .brand, .student-name, .mode-switch { display: none; }
  .topbar-lesson { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; justify-self: start; min-width: 0; width: 100%; }
  .topbar-lesson strong { font-size: var(--fs-sm); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-lesson .topbar-step { font-size: var(--fs-xs); color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .status { padding: 0; width: 30px; height: 30px; justify-content: center; }
  .status #status-text { display: none; }
  .orb { width: 232px; height: 232px; }
  .orb .voice-button { width: 80px; height: 80px; }
  .stage { min-height: 58vh; padding-top: 8px; }
  .stage .live-teacher { font-size: var(--fs-lg); max-width: 30ch; }
  .stage[data-demo="shown"] .orb { width: 176px; height: 176px; }
  .stage[data-demo="shown"] .orb .voice-button { width: 66px; height: 66px; }
  .demo { padding: 12px 10px 10px; border-radius: var(--r-md); }
  .demo-caption { font-size: var(--fs-sm); }
  .drawer-right { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .orb .voice-button, .nav-item { transition: none !important; }
}
@media (min-width: 861px) {
  .topbar-lesson strong + .topbar-step::before { content: "·"; margin-right: 8px; color: var(--text-3); }
}
/* Пока студент говорит или реплика обрабатывается, прежние слова учителя отходят на второй план. */
.stage[data-live="hearing"] .live-teacher, .stage[data-live="transcribing"] .live-teacher,
.stage[data-live="processing"] .live-teacher { opacity: .38; transition: opacity var(--t-med) ease; }
.stage-side { white-space: nowrap; }
.stage .stage-row { flex-wrap: wrap; }
.demo-foot .btn-link { white-space: nowrap; }
@media (max-width: 860px) { .demo-head .eyebrow { display: none; } }
.composer-foot .btn-link { white-space: nowrap; }

/* ══ ТЗ №306.1 (критическое дополнение): линия, а не круг; разговор справа — компактный и раскрываемый ══ */
.orb { display: none; }
.app[data-input="text"] .stage { display: grid; min-height: min(56vh, 520px); }
.app[data-input="text"] .stage-core { display: flex; }
.stage-core { gap: 0; }
.voice-line { display: block; width: min(100%, 760px); height: 168px; }
.stage .live-state { margin-top: 6px; }
.stage .stage-row { margin-top: 22px; align-items: center; }
.stage .voice-button {
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--accent-line); color: var(--accent); background: var(--surface-1);
  box-shadow: 0 0 0 1px rgba(168, 215, 255, .08); transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.stage .voice-button:hover { background: var(--surface-2); border-color: var(--accent); }
.stage .voice-button .voice-ring { display: none; }
.stage[data-live="listening"] .voice-button, .stage[data-live="speaking"] .voice-button { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.stage[data-live="hearing"] .voice-button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-2); }
.stage[data-live="error"] .voice-button, .stage[data-live="noSpeech"] .voice-button { color: var(--danger); border-color: rgba(255, 140, 140, .45); background: var(--surface-1); }
.app[data-voice="unavailable"] .stage .voice-button { color: var(--text-3); border-color: var(--border); }
.stage[data-demo="shown"] { grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); }

/* Разговор справа — раскрытое состояние: лента и под ней ввод текстом */
.transcript-foot { border-top: 1px solid var(--border); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-1); }
.transcript-text { align-self: stretch; }
.app[data-input="text"] .transcript-text { display: none; }
.app[data-input="voice"] .transcript-foot .composer, .app[data-input="voice"] .transcript-foot .composer-foot,
.app[data-input="voice"] .transcript-foot .recording-state { display: none; }
.transcript-foot .composer { padding: 0; }
.transcript-foot .composer-foot { font-size: var(--fs-xs); }

/* Компактное окно разговора: видно, что разговор записывается и что в нём есть текст */
.transcript-peek {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 20; width: 248px;
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; text-align: left; cursor: pointer;
  background: rgba(13, 21, 35, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-2);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, transform var(--t-med) var(--ease);
  animation: fade .3s ease;
}
.transcript-peek:hover { border-color: var(--accent-line); background: var(--surface-2); }
.peek-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.peek-title { color: var(--text); }
.peek-count { color: var(--text-3); font-weight: 500; text-transform: none; letter-spacing: 0; }
.peek-open { margin-left: auto; color: var(--accent); }
.peek-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.transcript-peek[data-live="on"] .peek-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.peek-last { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1180px) { .transcript-peek { top: auto; bottom: 20px; transform: none; } }
@media (max-width: 860px) {
  .voice-line { height: 120px; }
  .stage .voice-button { width: 52px; height: 52px; }
  .transcript-peek { right: 12px; bottom: 14px; width: auto; max-width: 62vw; padding: 9px 12px; border-radius: var(--r-pill); }
  .transcript-peek .peek-last { display: none; }
  .stage[data-demo="shown"] { grid-template-columns: 1fr; }
}

/* Композиция сцены: линия — на всю ширину сверху; под ней реплика учителя; демонстрация — рядом с репликой. */
.stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "line" "core"; align-content: center; row-gap: 8px; }
.stage[data-demo="shown"] { grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); grid-template-areas: "line line" "core demo"; column-gap: 32px; }
.voice-line { grid-area: line; justify-self: center; width: min(100%, 920px); height: 180px; }
.stage-core { grid-area: core; align-self: start; }
.demo { grid-area: demo; align-self: start; }
@media (max-width: 960px) {
  .stage[data-demo="shown"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "line" "core" "demo"; }
}
@media (max-width: 860px) { .voice-line { height: 128px; } }
/* Узкий экран: вход в разговор — кнопка справа в верхней строке со счётчиком; плавающее окно не перекрывает действия. */
@media (max-width: 860px) { .transcript-peek { display: none !important; } }
.transcript-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.transcript-count:empty { display: none; }
@media (min-width: 861px) { .transcript-count { display: none; } }

/* ══ ТЗ №306.2: композиция и визуальная иерархия ════════════════════════════════════════════════════════
   Главное — голосовой учитель. Транскрипт и демонстрация — вспомогательные и не спорят с ним за внимание.
   Поверхности различаются оттенком, а не рамками; голубой — дозированно; свечение почти не используется. */
:root { --hairline: rgba(255, 255, 255, .06); --veil: rgba(255, 255, 255, .025); --glow: none; }

/* Свечение и рамки — только там, где они что-то значат */
.btn-primary { box-shadow: none; }
.brand-mark, .status-dot, .turn-state::before { box-shadow: none; }
.unread-dot { box-shadow: 0 0 0 2px var(--bg); }
.icon-button { border-color: transparent; background: transparent; }
.icon-button:hover { background: var(--surface-2); border-color: transparent; }
.icon-button[aria-expanded="true"] { background: var(--surface-2); border-color: transparent; color: var(--accent); }
.status { border-color: transparent; background: transparent; }
.topbar { background: rgba(8, 13, 22, .9); border-bottom-color: var(--hairline); }

/* Сцена: линия — сверху на всю ширину; под ней по центру реплика и управление; демонстрация — справа от неё */
.stage { min-height: min(64vh, 560px); row-gap: 4px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "line" "core"; }
.stage[data-demo="shown"] { grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr); grid-template-areas: "line line line" ". core demo"; column-gap: 28px; }
.voice-line { height: 150px; width: min(100%, 880px); }
.stage-core { max-width: 600px; }
.stage .live-state { margin-top: 2px; padding: 0; background: transparent; border: 0; font-size: 11px; letter-spacing: .12em; color: var(--text-3); }
.stage .live-state::before { width: 5px; height: 5px; box-shadow: none !important; }
.stage[data-live="error"] .live-state { background: transparent; border: 0; }
.stage .live-teacher { font-size: 20px; font-weight: 400; line-height: 1.55; letter-spacing: -.005em; max-width: 46ch; margin-top: 12px; color: var(--text); }
.stage .live-hint { margin-top: 10px; font-size: 12px; max-width: 46ch; }
.stage .stage-row { margin-top: 16px; gap: 4px; flex-wrap: nowrap; }
.stage .stage-left, .stage .stage-right { display: contents; }
.stage .voice-button { width: 44px; height: 44px; order: -1; margin-right: 6px; border-color: var(--hairline); background: var(--surface-1); box-shadow: none; }
.stage .voice-button .voice-glyph { width: 18px; height: 18px; }
.stage[data-live="listening"] .voice-button, .stage[data-live="speaking"] .voice-button { background: var(--accent-soft); border-color: transparent; }
.stage-side { border: 0; background: transparent; color: var(--text-3); min-height: 32px; padding: 4px 10px; font-size: var(--fs-sm); }
.stage-side:hover { background: var(--veil); color: var(--text); }

/* Демонстрация — вспомогательная: размер по содержимому, без многоуровневых рамок */
.demo { justify-self: start; width: min(100%, 340px); padding: 8px; gap: 6px; border-radius: var(--r-md);
  background: var(--veil); border: 1px solid var(--hairline); box-shadow: none; animation: demo-in .3s var(--ease); }
.demo-head { align-items: center; gap: 2px; padding: 0 2px 0 4px; }
.demo-title { font-size: 12px; font-weight: 500; color: var(--text-2); }
.demo-head .icon-button-sm { width: 26px; height: 26px; color: var(--text-3); }
.demo-head .icon-button-sm:hover { color: var(--text); background: var(--veil); }
.demo-screen { border: 0; border-radius: 9px; }
.demo-caption { font-size: 12.5px; font-weight: 400; color: var(--text-2); padding: 0 4px 2px; min-height: 1.4em; }
.demo-hl { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px rgba(168, 215, 255, .2); }
.demo-el { font-size: 11px; }

/* Транскрипт в свёрнутом виде — узкий язычок у правого края, а не карточка */
.transcript-peek {
  top: 50%; bottom: auto; right: 0; transform: translateY(-50%); width: auto; max-width: none;
  writing-mode: vertical-rl; flex-direction: row; align-items: center; gap: 10px;
  padding: 16px 9px; border-radius: 10px 0 0 10px; border: 1px solid var(--hairline); border-right: 0;
  background: var(--surface-1); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.transcript-peek:hover { background: var(--surface-2); color: var(--text); border-color: var(--hairline); }
.transcript-peek .peek-title { color: inherit; font-weight: 600; }
.transcript-peek .peek-count { letter-spacing: 0; text-transform: none; color: var(--text-3); }
.transcript-peek .peek-dot { width: 6px; height: 6px; background: var(--border-strong); box-shadow: none; }
.transcript-peek[data-unread="yes"] .peek-dot, .transcript-peek[data-live="on"] .peek-dot { background: var(--accent); box-shadow: none; }
.transcript-peek .peek-last { display: none; }
@media (max-width: 1180px) { .transcript-peek { top: 50%; bottom: auto; transform: translateY(-50%); } }

/* Раскрытый разговор — спокойные поверхности */
.drawer { box-shadow: 0 0 0 1px var(--hairline), 0 20px 60px rgba(0, 0, 0, .5); }
.msg--teacher .msg-bubble { background: var(--veil); border-color: var(--hairline); }
.msg--student .msg-bubble { background: var(--accent-soft); border-color: transparent; }
.transcript-foot { background: transparent; border-top-color: var(--hairline); }

/* Ширина, где справа нет места: демонстрация — под репликой, по центру */
@media (max-width: 1320px) {
  .stage[data-demo="shown"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "line" "core" "demo"; }
  .stage[data-demo="shown"] .demo { justify-self: center; margin-top: 14px; }
}
@media (max-width: 860px) {
  .voice-line { height: 110px; }
  .stage .live-teacher { font-size: 17px; }
  .stage[data-demo="shown"] .demo { width: min(100%, 360px); }
}
/* Сцене нужна вся ширина: колонки по бокам реплики — место для демонстрации, а не пустые поля раздела. */
.section.section-learn { max-width: 1360px; }
.section-learn > .context, .section-learn > .chat { width: 100%; max-width: 760px; align-self: center; }
@media (min-width: 1321px) {
  .stage[data-demo="shown"] { grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(300px, 1fr); }
}

/* ══ ТЗ №306.2 (критическая поправка): центр — без текста; транскрипт — слева вверху ═══════════════════════ */
/* Центр: линия, короткий статус, компактное управление. Реплики учителя здесь нет — она в транскрипте. */
.stage .live-teacher { display: none !important; }
.stage .live-hint { display: none; }
.stage[data-live="idle"] .live-hint, .stage[data-live="error"] .live-hint { display: block; }
.stage { min-height: min(62vh, 540px); }
.stage-core { align-self: center; }
.stage .live-state { margin-top: 10px; }
.stage .stage-row { margin-top: 18px; }
#transcript-toggle { display: none !important; }      /* вход в транскрипт — само окно слева вверху */

/* Свёрнутый транскрипт: небольшое окно у левого края рабочей области, под верхней строкой */
.transcript-peek {
  position: fixed; top: calc(var(--topbar, 60px) + 16px); left: 16px; right: auto; bottom: auto; transform: none;
  writing-mode: horizontal-tb; width: 260px; max-width: calc(100vw - 32px); flex-direction: column; align-items: stretch; gap: 6px;
  padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: var(--veil); color: var(--text-2); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); z-index: 18;
}
.transcript-peek:hover { background: var(--surface-1); border-color: var(--border); color: var(--text); }
.transcript-peek .peek-head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.transcript-peek .peek-title { color: var(--text-2); font-weight: 600; }
.transcript-peek .peek-count { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--text-3); }
.transcript-peek .peek-open { color: var(--text-3); flex: none; }
.transcript-peek .peek-last { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
@media (max-width: 1180px) { .transcript-peek { top: calc(var(--topbar, 60px) + 16px); bottom: auto; transform: none; } }

/* Раскрытый транскрипт: панель в том же углу, не на всю высоту экрана; сворачивается тем же действием */
.drawer.transcript {
  top: calc(var(--topbar, 60px) + 16px); bottom: auto; left: 16px; right: auto; width: min(400px, calc(100vw - 32px));
  height: min(70vh, 660px); border-radius: var(--r-lg); overflow: hidden;
  transform: translateY(-8px) scale(.98); transform-origin: top left; opacity: 0;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) ease, visibility 0s linear var(--t-med);
}
.app[data-transcript="open"] .drawer.transcript { transform: none; opacity: 1; visibility: visible;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) ease, visibility 0s; }
.drawer.transcript .drawer-title { cursor: pointer; }
@media (min-width: 1280px) {
  .app[data-transcript="open"] .content { padding-right: 28px; padding-left: 440px; }   /* панель не закрывает сцену */
}
@media (max-width: 860px) {
  :root { --topbar: 56px; }
  .transcript-peek:not([hidden]) { display: flex !important; }
  .transcript-peek { top: calc(var(--topbar) + 8px); left: 10px; right: 10px; width: auto; max-width: none; padding: 8px 12px; }
  .transcript-peek .peek-last { -webkit-line-clamp: 1; }
  .drawer.transcript { top: calc(var(--topbar) + 8px); left: 10px; width: calc(100vw - 20px); height: calc(100vh - var(--topbar) - 18px); }
  .stage { padding-top: 64px; }
}
/* Линия, статус и управление — одна группа в центре; демонстрация выравнивается по линии. */
.stage { grid-template-rows: auto auto; align-content: center; }
.stage-core { align-self: start; margin-top: 6px; }
.stage[data-demo="shown"] .demo { align-self: start; margin-top: -40px; }
@media (max-width: 1320px) { .stage[data-demo="shown"] .demo { margin-top: 18px; } }

/* ── Дополнение к ТЗ №308: контекстные ссылки — компактно справа вверху, зеркально транскрипту ─────── */
.links { position: fixed; z-index: 30; top: calc(var(--topbar, 60px) + 16px); right: 16px;
  width: min(296px, calc(100vw - 32px)); display: grid; gap: 8px; }
.links[hidden] { display: none; }                  /* hidden сильнее раскладки (как у окна транскрипта) */
.link-card { display: grid; gap: 4px; padding: 10px 12px 12px; border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--hairline); animation: link-in .24s var(--ease, ease-out); }
.link-head { display: flex; align-items: center; gap: 6px; }
.link-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.link-close { width: 24px; height: 24px; font-size: 11px; color: var(--text-3); }
.link-close:hover { color: var(--text); background: var(--veil); }
.link-purpose { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.link-note { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-3); }
.link-open { margin-top: 6px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--veil); color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.link-open::after { content: "↗"; margin-left: auto; }
.link-open:hover { background: var(--accent-soft); }
.link-open:focus-visible, .link-close:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.link-host { color: var(--text-3); font-weight: 500; font-size: 12px; }
.msg-bubble a, .note-links a { color: var(--accent); text-decoration: none; word-break: break-word; }
.msg-bubble a:hover, .note-links a:hover { text-decoration: underline; }
@keyframes link-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .link-card { animation: none; } }
@media (max-width: 860px) {
  /* на узком экране карточка закрывала звуковую линию — здесь она часть сцены, под демонстрацией */
  .links { position: static; grid-column: 1 / -1; justify-self: center; width: min(100%, 360px); margin-top: 14px; }
  .link-purpose { font-size: 12px; }
}

/* ══ ТЗ №353: схемы понятий и стопка карточек ═══════════════════════════════════════════════════════════════
   Одна мысль — одна схема: узлы, рамки групп и связи. Карточки складываются стопкой: впереди текущая, прежние —
   закладками с названием темы. На широком экране — в правом нижнем углу, не закрывая разговор. */
.demo-dock { grid-area: demo; align-self: start; justify-self: center; width: min(100%, 440px); display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.demo-dock .demo { grid-area: auto; }               /* область сцены — у стопки, не у карточки внутри неё */
.demo-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.demo-tabs[hidden], .demo-dock .demo[hidden] { display: none; }
.demo-tab { display: inline-flex; align-items: center; max-width: 100%; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border); animation: link-in .2s var(--ease, ease-out); }
.demo-tab-open { background: none; border: 0; padding: 5px 2px 5px 12px; max-width: 210px; color: var(--text-2);
  font: 500 12.5px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.demo-tab-open:hover { color: var(--text); }
.demo-tab-close { background: none; border: 0; width: 26px; height: 26px; border-radius: 50%; color: var(--text-3);
  font-size: 15px; line-height: 1; cursor: pointer; }
.demo-tab-close:hover { color: var(--text); background: var(--veil); }
.demo-tab-open:focus-visible, .demo-tab-close:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.demo-el[data-kind="node"] { justify-content: center; padding: 0 3px; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px; font-size: 10.5px; font-weight: 600; }
.demo-el[data-kind="frame"] { background: transparent; border: 1px dashed var(--border-strong); border-radius: 10px;
  align-items: flex-end; justify-content: center; padding: 0 4px 2px; color: var(--text-3); font-size: 10px; }
.demo-el[data-kind="frame"][data-tone="accent"] { border: 1.5px solid var(--accent); color: var(--accent); padding: 1px 1px 0;
  background: rgba(168, 215, 255, .07); align-items: flex-start; font-size: 9.5px; font-weight: 600; }
.demo-el[data-kind="frame"][data-tone="loop"] { border: 1.5px dashed var(--accent); border-top: 0; border-radius: 0 0 14px 14px; }
.demo-el[data-kind="label"] { color: var(--text-2); justify-content: center; white-space: normal; text-align: center; }
.demo-el[data-kind="line"] { padding: 0; border-radius: 1px; background: var(--text-3); overflow: visible; }
.demo-el[data-kind="line"]::after { content: ""; position: absolute; width: 0; height: 0; border: 4px solid transparent; }
.demo-el[data-kind="line"][data-dir="h"]::after { right: -6px; top: 50%; transform: translateY(-50%); border-left: 6px solid var(--text-3); }
.demo-el[data-kind="line"][data-dir="v"]::after { bottom: -6px; left: 50%; transform: translateX(-50%); border-top: 6px solid var(--text-3); }
.demo-el .demo-typed-done { white-space: pre-wrap; }
.note-visual { display: grid; gap: 6px; padding: 10px 0 12px; border-top: 1px solid var(--border); }
.note-visual:first-of-type { border-top: 0; }
.note-visual h5 { margin: 0; font: 600 var(--fs-sm)/1.3 var(--sans); color: var(--text); }
.note-thesis, .note-concept, .note-takeaway { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.note-thesis { color: var(--text); }
.note-scene { width: min(100%, 420px); border: 1px solid var(--border); border-radius: var(--r-md); }
.note-visual-open { justify-self: start; font-size: 13px; }
@media (min-width: 1100px) {
  .demo-dock { position: fixed; z-index: 25; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); }
  .stage[data-demo="shown"] .demo-dock .demo { margin-top: 0; align-self: auto; }
  .app[data-card="shown"] .content { padding-right: calc(min(380px, 100vw - 32px) + 32px); }   /* карточка не закрывает урок */
}
@media (prefers-reduced-motion: reduce) { .demo-tab, .demo-el { animation: none; transition: none; } }

/* ══ ТЗ №356: схема понятия (Visual Learning Design System, docs/visual_design/VISUAL_DESIGN_SYSTEM.md) ═══════════
   Понятие — текст без рамки; связь — тонкая линия, которая прорисовывается; ось времени — полоса с делениями;
   рамка — только граница системы; один акцент на схему. Без теней, ореолов, градиентов и курсора. */
.demo-screen[data-style="scheme"] { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.demo-screen[data-style="scheme"] .demo-el { padding: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; white-space: normal; color: var(--text); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="text"] { justify-content: center; text-align: center;
  align-items: flex-start; font: 600 13px/1.3 var(--sans); }   /* текст — от верха своей строки: перенос не сдвигает схему */
.demo-screen[data-style="scheme"] .demo-el[data-kind="text"][data-role="note"] { align-items: flex-start;
  font: 400 11.5px/1.35 var(--sans); color: var(--text-2); }
.demo-screen[data-style="scheme"] .demo-el[data-align="left"] { justify-content: flex-start; text-align: left; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="text"][data-tone="accent"] { color: var(--accent); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"] { overflow: visible; background: var(--text-3);
  transition: transform .35s var(--ease), opacity .2s ease; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-dir="h"] { height: 1.5px; transform-origin: left center; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-dir="h"][data-arrow="start"] { transform-origin: right center; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-dir="v"] { width: 1.5px; transform-origin: center top; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-dir="h"][data-hidden="true"] { transform: scaleX(0); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-dir="v"][data-hidden="true"] { transform: scaleY(0); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"]::after { border-width: 3.5px; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-dir="h"]::after { right: -5px; border-left: 5px solid var(--text-3); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-dir="v"]::after { bottom: -5px; border-top: 5px solid var(--text-3); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-dir="h"][data-arrow="start"]::after { right: auto; left: -5px;
  border-left: 0; border-right: 5px solid var(--text-3); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-arrow="none"]::after { display: none; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-tone="accent"] { background: var(--accent); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-tone="accent"][data-dir="h"][data-arrow="start"]::after { border-right-color: var(--accent); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="span"] { height: 3px; border-radius: 2px; transform-origin: left center;
  background: linear-gradient(to right, var(--accent) 0 31.6%, transparent 31.6% 34.2%, var(--accent) 34.2% 65.8%,
              transparent 65.8% 68.4%, var(--accent) 68.4%);       /* три месяца квартала */
  transition: transform .35s var(--ease), opacity .2s ease; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="span"][data-hidden="true"] { transform: scaleX(0); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="frame"] { border: 1px solid var(--border-strong); border-radius: 8px; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="frame"][data-tone="console"] { border-color: var(--border);
  background: rgba(0, 0, 0, .28); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="code"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 400 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="code"][data-role="output"] { color: var(--text-2); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="code"][data-role="name"] { font-weight: 600; font-size: 12px; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-dir="v"][data-arrow="start"] { transform-origin: center bottom; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="line"][data-dir="v"][data-arrow="start"]::after { bottom: auto; top: -5px;
  border-top: 0; border-bottom: 5px solid var(--text-3); }
.demo-screen[data-style="scheme"] ~ .demo-caption { min-height: 2.6em; }
/* ТЗ №358: цвет по смыслу. Четыре близких оттенка — последовательные этапы одного процесса (от голубого к
   лиловому), отдельный мятный — результат. Номер этапа написан на отрезке: различимо и без цвета. */
.demo-screen[data-style="scheme"] { --q1: #8fd0ff; --q2: #7fb0ff; --q3: #a39cff; --q4: #c79cf5; --result: #86e0b2; }
.demo-screen[data-style="scheme"] .demo-el[data-align="right"] { justify-content: flex-end; text-align: right; }
.demo-screen[data-style="scheme"] .demo-el[data-kind="span"][data-tone^="q"] { height: auto; border-radius: 3px;
  justify-content: center; align-items: center; color: #0b1220; font: 700 11px/1 var(--sans);
  background: linear-gradient(to right, var(--c) 0 32.8%, rgba(11, 18, 32, .55) 32.8% 33.6%, var(--c) 33.6% 66.2%,
              rgba(11, 18, 32, .55) 66.2% 67%, var(--c) 67%); }                /* три месяца квартала */
.demo-screen[data-style="scheme"] .demo-el[data-tone="q1"] { --c: var(--q1); }
.demo-screen[data-style="scheme"] .demo-el[data-tone="q2"] { --c: var(--q2); }
.demo-screen[data-style="scheme"] .demo-el[data-tone="q3"] { --c: var(--q3); }
.demo-screen[data-style="scheme"] .demo-el[data-tone="q4"] { --c: var(--q4); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="text"][data-tone^="q"] { color: var(--c); }
.demo-screen[data-style="scheme"] .demo-el[data-kind="text"][data-tone="result"] { color: var(--result); }
@media (prefers-reduced-motion: reduce) {
  .demo-screen[data-style="scheme"] .demo-el { transition: none; }
}

/* ══ ТЗ №340: личный кабинет студента — те же токены дизайн-системы, без своей палитры ══════════════════════ */
.account .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.account-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.account-nav button, .account button.secondary { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); }
.account-nav button[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); border-color: var(--accent-line); }
.account-main { max-width: 760px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-7); display: grid; gap: var(--sp-4); }
.account-main section { display: grid; gap: var(--sp-4); }
.account-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.account-card h2 { margin: 0; font-size: var(--fs-lg); }
.account-card p { margin: 0; color: var(--text-2); }
.account-card form { display: grid; gap: var(--sp-3); }
.account-card label { display: grid; gap: var(--sp-1); color: var(--text-2); font-size: var(--fs-sm); }
.account-card input[type="email"] { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); padding: var(--sp-2) var(--sp-3); }
.account-card button:not(.secondary), .account-button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); font-weight: 600; justify-self: start; text-decoration: none; display: inline-block; }
.account-card button:disabled { opacity: .6; cursor: wait; }
.account-notice { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--success-soft); color: var(--text); }
.account-alert { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--danger-soft); color: var(--text); }
.account-hint { color: var(--text-3); font-size: var(--fs-sm); }
.account-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.account-list li { border-top: 1px solid var(--border); padding-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.account-links { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
#pay-box { display: grid; gap: var(--sp-2); }
.cabinet-link { color: var(--accent); text-decoration: none; font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--accent-line); border-radius: var(--r-pill); }

/* ТЗ №350: база знаний и Мастерская Skills */
.knowledge-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.knowledge-card { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 0.75rem 1rem; }
.knowledge-card p { margin: 0.35rem 0 0; }
.knowledge-open { font-weight: 600; text-align: left; }
.knowledge-why { font-style: italic; }
.knowledge-section { margin: 0.5rem 0; }
.knowledge-section summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.knowledge-material h3 { margin-top: 0.75rem; }
.knowledge-practice { border-left: 3px solid var(--accent, #4a6cf7); padding-left: 0.75rem; }
.skill-editor { margin-top: 1rem; }
.skill-field { margin: 0.75rem 0; display: grid; gap: 0.25rem; }
.skill-field input, .skill-field textarea, .skill-field select { width: 100%; box-sizing: border-box; }
.skill-field p { margin: 0; }
.skill-test { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr 2fr; gap: 0.5rem; margin-bottom: 0.5rem; }
.skill-finding.skill-blocker { color: var(--danger, #b42318); }
.skill-finding.skill-warning { color: var(--warning, #8a5a00); }
@media (max-width: 640px) { .skill-test { grid-template-columns: 1fr; } }
#knowledge-query, .skill-field input, .skill-test input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text);
}
#knowledge-query:focus, .skill-field input:focus, .skill-test input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ТЗ №351: раздел «Проект» и многострочные поля формы */
#project-prompt-text, #project-summary-input, .submission-field textarea { width: 100%; box-sizing: border-box; font-family: inherit; }

/* ── ТЗ №369: тестовая оплата и панель сотрудника ────────────────────────────────────────────────────────── */
.test-banner {
  border: 2px solid var(--danger);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 16px;
  background: var(--danger-soft);
  color: var(--danger);
  text-align: center;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.admin-wrap {
  overflow-x: auto;
}
.admin-tag {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  background: rgba(127, 127, 127, 0.18);
}
.admin-tag.test {
  background: var(--danger-soft);
  color: var(--danger);
}
.admin-message.internal {
  border-left: 3px solid var(--accent-line);
  padding-left: 8px;
}

/* ── ТЗ №369: публичный портал и вкладки кабинета — токены дизайн-системы, без своей палитры ─────────────── */
.portal-bar { position: sticky; top: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); height: auto; min-height: 60px; padding: var(--sp-2) var(--sp-4); }
.portal-brand { color: var(--text); text-decoration: none; font-weight: 600; }
.portal-nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.portal-nav a, .portal-footer a, .portal-secondary { color: var(--text-2); text-decoration: none; }
.portal-nav a:hover, .portal-footer a:hover, .portal-secondary:hover { color: var(--accent); }
.portal-cta { white-space: nowrap; }
.portal-main { max-width: 960px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-7); display: grid; gap: var(--sp-7); }
.portal-hero { display: grid; gap: var(--sp-4); padding-top: var(--sp-5); }
.portal-hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; max-width: 22ch; }
.portal-eyebrow { margin: 0; color: var(--accent); font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; }
.portal-lead { margin: 0; max-width: var(--measure); color: var(--text-2); font-size: var(--fs-lg); }
.portal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin: var(--sp-2) 0 0; }
.portal-section { display: grid; gap: var(--sp-4); scroll-margin-top: 80px; }
.portal-section h2 { font-size: var(--fs-2xl); }
.portal-section h3 { font-size: var(--fs-lg); }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.portal-program { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.portal-lesson strong { color: var(--text); font-weight: 600; }
.portal-bullets, .portal-steps { margin: 0; padding-left: 1.25em; display: grid; gap: var(--sp-2); color: var(--text-2); max-width: var(--measure); }
.portal-steps strong { color: var(--text); }
.portal-demo { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.portal-demo p { margin: 0; color: var(--text-2); }
.portal-who { display: inline-block; min-width: 5.5em; color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }
.portal-faq { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.portal-faq summary { cursor: pointer; font-weight: 600; }
.portal-faq p { margin: var(--sp-2) 0 0; color: var(--text-2); }
.portal-legal p { font-size: var(--fs-sm); }
.portal-footer { border-top: 1px solid var(--border); padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.portal-footer p { margin: 0; }
.locked-card { border-color: var(--warning); }
.lock-label { display: inline-block; color: var(--warning); font-size: var(--fs-sm); font-weight: 600; }
.account-card input[type="text"], .account-card textarea, .account-card select { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); padding: var(--sp-2) var(--sp-3); font: inherit; }
@media (max-width: 720px) {
  .portal-nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--sp-1); }
  .portal-main { padding-top: var(--sp-4); gap: var(--sp-6); }
}
.account-card form button { justify-self: start; }
/* ТЗ №369: шапка кабинета и панели растёт по содержимому; на узком экране вкладки прокручиваются, а не наезжают */
.account .topbar { height: auto; min-height: 60px; padding: var(--sp-2) var(--sp-4); }
@media (max-width: 720px) {
  .account-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: var(--sp-1); }
  .account-nav button { white-space: nowrap; flex: 0 0 auto; }
}

/* ══ ТЗ «Полная реализация Lab Capital Production»: единая чёрная система платформы ═══════════════════════
   Последний слой: те же токены, что у главной страницы, — кабинет, учебная среда, «О курсе» и служебные экраны
   выглядят как один продукт. Чёрный фон, нейтральные серые поверхности, светлый акцент без свечения. */
:root {
  --bg: #000;
  --surface-1: #0b0b0c;
  --surface-2: #121213;
  --surface-3: #1b1b1d;
  --border: #262628;
  --border-strong: #3a3a3d;
  --text: #f2f2f0;
  --text-2: #b9b9b5;
  --text-3: #85857f;
  --accent: #f2f2f0;
  --accent-2: #ffffff;
  --accent-ink: #000;
  --accent-soft: rgba(242, 242, 240, .08);
  --accent-line: rgba(242, 242, 240, .3);
  --glow: none;
}
body { background: var(--bg); }
.orb .voice-button, .stage[data-live="speaking"] .voice-button { background: var(--surface-2); box-shadow: none; }
.orb .voice-button:hover { box-shadow: none; }

/* Общая навигация авторизованной части: кабинет, обучение, выход */
.platform-links { display: inline-flex; align-items: center; gap: var(--sp-2); }
.platform-links a, .platform-links button {
  appearance: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent; color: var(--text);
  font: inherit; font-size: var(--fs-sm); text-decoration: none; cursor: pointer;
}
.platform-links a:hover, .platform-links button:hover { border-color: var(--border-strong); background: var(--surface-2); }
.platform-links a:focus-visible, .platform-links button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* Кабинет: карточка курса */
.course-card { display: grid; gap: var(--sp-3); }
.course-card .course-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.course-card .course-meta li { padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-xs); color: var(--text-2); }
.course-card .course-meta li[data-tone="open"] { color: var(--text); border-color: var(--border-strong); }
.account-nav .nav-logout { margin-left: auto; }

/* Страница неизвестного адреса */
.notfound { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 40px 20px; text-align: center; }
.notfound h1 { font-weight: 300; font-size: clamp(28px, 3vw + 14px, 48px); letter-spacing: -.02em; }
.notfound p { color: var(--text-2); }

/* Демонстрационный режим (флаг --demo): метка в углу каждой страницы — не сдвигает раскладку и не ловит клики */
.demo-banner { position: fixed; right: 8px; bottom: 8px; z-index: 1000; max-width: calc(100vw - 16px); padding: 4px 10px;
  border: 1px solid #5a4a20; border-radius: 999px; background: rgba(42, 36, 20, .94); color: #f3e3b3;
  font-size: 12px; line-height: 1.35; pointer-events: none; }
@media (max-width: 720px) { .demo-banner { font-size: 11px; padding: 3px 8px; } .demo-banner-more { display: none; } }
.demo-scenarios { display: grid; gap: var(--sp-2); justify-items: center; margin: var(--sp-5) 0 var(--sp-3); }
.demo-scenarios .btn { min-width: min(320px, 100%); }
.demo-entry-note { min-height: 1.4em; }

/* ══ ТЗ «Упрощение кабинета»: страница «Обучение» — курс, одно действие, программа; без карточек-статусов ══════ */
.account-nav { flex-wrap: nowrap; }
.account-main { width: 100%; box-sizing: border-box; }          /* одна ширина колонки у всех разделов */
.account-nav .nav-logout { background: transparent; }
.course-hero { display: grid; gap: var(--sp-3); padding: var(--sp-6) 0 var(--sp-5); border-bottom: 1px solid var(--border); }
.course-hero p { margin: 0; }
.course-eyebrow { color: var(--text-3); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; }
.course-hero h2 { margin: 0; font-weight: 300; font-size: clamp(28px, 2.4vw + 16px, 42px); letter-spacing: -.02em; line-height: 1.12; }
.course-lead { color: var(--text-2); font-size: var(--fs-lg); max-width: 34em; }
.course-state { justify-self: start; padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  color: var(--text-2); font-size: var(--fs-sm); }
.course-state[data-tone="open"] { color: var(--text); border-color: var(--accent-line); }
.course-next { color: var(--text); max-width: 36em; }
.course-progress { color: var(--text-3); font-size: var(--fs-sm); }
.course-action { margin-top: var(--sp-2) !important; }
.account .course-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 12px 28px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink);
  font: inherit; font-size: var(--fs-md); font-weight: 600; text-decoration: none; cursor: pointer; }
.account .course-primary:hover { background: var(--accent-2); }
.account .course-primary:focus-visible, .program-head:focus-visible, .link-button:focus-visible {
  outline: 2px solid var(--accent-line); outline-offset: 3px; }
.course-program { display: grid; gap: var(--sp-3); padding-top: var(--sp-2); }
.course-program h3, .course-access h3 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.course-program > p { margin: 0; }
.program-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.program-row { border-bottom: 1px solid var(--border); }
.program-head { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-3);
  width: 100%; padding: var(--sp-4) 0; background: none; border: 0; color: var(--text); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer; }
a.program-head:hover .program-title { text-decoration: underline; text-underline-offset: 3px; }
.program-label { color: var(--text-3); font-size: var(--fs-sm); }
.program-title { font-size: var(--fs-md); }
.program-status { color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; }
.program-row[data-status="current"] .program-status { color: var(--text); }
.program-row[data-status="current"] .program-label { color: var(--text); }
.program-row[data-status="locked"] .program-title { color: var(--text-3); }
.program-goal, .program-reason { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4) calc(76px + var(--sp-3)); color: var(--text-3);
  font-size: var(--fs-sm); }
.program-reason { color: var(--text-2); }
.course-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.course-links a, .link-button { color: var(--text-2); background: none; border: 0; padding: 0; font: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.course-access { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.course-access p { margin: 0; color: var(--text-2); }
.course-access form { display: grid; gap: var(--sp-3); }
.course-access label { display: grid; gap: var(--sp-1); color: var(--text-2); font-size: var(--fs-sm); }
.course-access button:not(.secondary) { justify-self: start; background: var(--accent); color: var(--accent-ink); border: 0;
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); font-weight: 600; }
.profile-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); margin: 0; }
.profile-list dt { color: var(--text-3); font-size: var(--fs-sm); }
.profile-list dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .account .topbar { flex-wrap: nowrap; gap: var(--sp-2); }
  .account .topbar h1 { display: none; }
  .account-nav { width: auto; overflow: visible; padding-bottom: 0; gap: 4px; }
  .account-nav button { padding: 6px 10px; font-size: var(--fs-sm); }
  .course-hero { padding-top: var(--sp-4); }
  .program-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .program-label { grid-column: 1 / -1; }
  .program-goal, .program-reason { margin-left: 0; }
  .account .course-primary { width: 100%; }
}

/* ══ ТЗ «Переделка личного кабинета»: рабочее пространство Lab Capital AI ═════════════════════════════════
   Чёрный фон, монохром, без карточек на главном экране и без цветных акцентов. Домик в углу открывает панель
   аккаунта; AI Teacher — по центру; слева — инструменты. Закрытое — приглушено и с замком; решает сервер. */
body.ws-page { background: #000; color: #E6E6E6; }
.workspace { --ws-line: #262626; --ws-dim: #8C8C8C; --ws-soft: #CFCFCF; min-height: 100%; }
.ws-icon, .ws-tool { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--ws-soft); cursor: pointer; position: relative; transition: background var(--t-fast), color var(--t-fast); }
.ws-icon svg, .ws-tool svg, .drawer-list svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
.ws-icon:hover, .ws-tool:hover { background: #121212; color: #fff; }
.ws-icon:focus-visible, .ws-tool:focus-visible, .drawer-list button:focus-visible, .ai-teacher:focus-visible {
  outline: 1px solid #BDBDBD; outline-offset: 2px; }
.ws-top { position: fixed; top: 16px; left: 16px; z-index: 30; }
.ws-top .ws-icon { background: #000; }
.ws-top .ws-icon:hover { background: #121212; }
.ws-tools { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 20; }
.ws-tools[hidden], .ws-top[hidden] { display: none; }
.ws-tool[data-locked="true"] { color: #5E5E5E; }
.ws-lock { position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; display: none; color: #9A9A9A; }
.ws-lock svg { width: 12px; height: 12px; stroke-width: 2; }
.ws-tool[data-locked="true"] .ws-lock { display: block; }
.ws-tool::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: 6px; background: #111; color: #D9D9D9;
  border: 1px solid var(--ws-line); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
@media (hover: hover) { .ws-tool:hover::after { opacity: 1; } }
.ws-tool:focus-visible::after { opacity: 1; }

/* Центр: AI Teacher */
body.ws-home .account-main { min-height: 100%; box-sizing: border-box; align-content: center; padding-top: 72px; padding-bottom: 72px; }
.workspace .account-main { padding-top: 72px; }
.ws-center { display: grid; justify-items: center; gap: 14px; position: relative; }
.ai-teacher { position: relative; width: 176px; height: 176px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  cursor: pointer; display: grid; place-items: center; }
.ai-frame { width: 176px; height: 176px; border-radius: 50%; border: 1px solid #3A3A3A; display: grid; place-items: center;
  transition: opacity var(--t-med), border-color var(--t-med); }
.ai-orb { position: absolute; width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid #E6E6E6; }
.ai-lines { position: absolute; display: flex; gap: 5px; align-items: center; height: 26px; }
.ai-lines i { display: block; width: 3px; border-radius: 2px; background: #E6E6E6; height: 12px; }
.ai-lines i:nth-child(2) { height: 24px; }
.ai-teacher:hover .ai-frame { border-color: #6A6A6A; }
.ai-teacher[data-locked="false"] .ai-lines i { animation: ws-voice 2.4s var(--ease) infinite; }
.ai-teacher[data-locked="false"] .ai-lines i:nth-child(2) { animation-delay: .3s; }
.ai-teacher[data-locked="false"] .ai-lines i:nth-child(3) { animation-delay: .6s; }
@keyframes ws-voice { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@media (prefers-reduced-motion: reduce) { .ai-teacher .ai-lines i { animation: none !important; } }
.ai-teacher[data-locked="true"] .ai-frame { opacity: .32; }
.ai-lock { position: absolute; right: 22px; bottom: 22px; width: 26px; height: 26px; border-radius: 50%; background: #000;
  border: 1px solid #3A3A3A; display: none; place-items: center; color: #BDBDBD; }
.ai-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-teacher[data-locked="true"] .ai-lock { display: grid; }
.ai-caption { margin: 0; font-size: 13px; letter-spacing: .08em; color: var(--ws-dim); }
.ws-toast { position: absolute; top: calc(100% + 18px); width: max-content; max-width: 340px; margin: 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ws-soft);
  padding: 10px 14px; border: 1px solid var(--ws-line); border-radius: 10px; background: #0A0A0A; display: grid; gap: 6px; justify-items: center; }
.ws-toast[hidden] { display: none; }
.workspace .link-button { color: #E6E6E6; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ws-back { margin: 0; }
.ws-back .link-button { text-decoration: none; color: var(--ws-dim); font-size: 14px; }
.ws-back .link-button:hover { color: #fff; }

/* Панель аккаунта */
.drawer-veil { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 35; }
.drawer-veil[hidden] { display: none; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 272px; max-width: 84vw; box-sizing: border-box; padding: 16px;
  background: #0A0A0A; border-right: 1px solid var(--ws-line); z-index: 40; transform: translateX(-102%); visibility: hidden;
  transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med); }
.drawer.open { transform: none; visibility: visible; transition: transform var(--t-med) var(--ease); }
.drawer-close { margin-left: auto; }
.drawer-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 2px; }
.drawer-list button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 10px;
  background: transparent; color: #D6D6D6; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.drawer-list button:hover { background: #151515; color: #fff; }
.drawer-list svg { width: 20px; height: 20px; flex: none; }

/* Разделы аккаунта в той же монохромной гамме */
.workspace .account-card { background: transparent; border-color: var(--ws-line); border-radius: 12px; }
.workspace .account-card p, .workspace .account-card label { color: #BDBDBD; }
.workspace .account-card button:not(.secondary), .workspace .account-button { background: #E6E6E6; color: #000; }
.workspace .account-card button.secondary, .workspace button.secondary { background: transparent; color: #D6D6D6; border: 1px solid #3A3A3A; }
.workspace .account-card input, .workspace .account-card textarea, .workspace .account-card select { background: #0D0D0D;
  border: 1px solid var(--ws-line); border-radius: 8px; padding: 8px 12px; color: #E6E6E6; font: inherit; }
.workspace .course-state { border-color: #3A3A3A; color: #BDBDBD; }
.workspace .course-state[data-tone="open"] { color: #fff; border-color: #6A6A6A; }
@media (max-width: 640px) {
  .ws-top { top: 12px; left: 12px; }
  .ws-tools { left: 12px; }
  .workspace .account-main { padding-left: 16px; padding-right: 16px; }
  body.ws-home .account-main { padding-left: 64px; padding-right: 64px; }
  .ai-teacher, .ai-frame { width: 152px; height: 152px; }
  .ai-lock { right: 18px; bottom: 18px; }
  .ws-toast { max-width: 240px; }
}