/* Тренажёр школы ИИ — детский крупный UI. Тач — первый класс. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(160deg, #f5f8ff 0%, #eef3ff 45%, #f3eefe 100%);
  background-attachment: fixed;
  color: #1c2340; font-size: 18px;
}
button { font: inherit; cursor: pointer; border: none; border-radius: 14px; }
.hidden { display: none !important; }

/* ---------- каркас ---------- */
.screen { max-width: 760px; margin: 0 auto; padding: 16px; }
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 0 0 16px 16px; padding: 10px 16px;
  box-shadow: 0 2px 10px rgba(28,35,64,.08);
}
.topbar .step-title { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 26px;
  padding: 4px 14px; border-radius: 12px; background: #eef2ff; color: #3450d2;
}
.timer.warn { background: #fff1e6; color: #d2691e; }
.timer.over { background: #ffe6e6; color: #c0392b; }

/* ---------- хаб входа ---------- */
.hub { display: flex; flex-direction: column; gap: 18px; padding-top: 8vh; }
.hub h1 { font-size: 26px; margin: 0; text-align: center; }
.hub .card {
  background: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 4px 16px rgba(28,35,64,.08);
}
.hub .stepnum { display: inline-block; background: #3450d2; color: #fff; border-radius: 50%;
  width: 30px; height: 30px; text-align: center; line-height: 30px; font-weight: 800; margin-right: 8px; }
.hub .done .stepnum { background: #27ae60; }
.btn-big {
  display: block; width: 100%; padding: 16px; font-size: 20px; font-weight: 700;
  background: #3450d2; color: #fff; text-align: center; text-decoration: none; border-radius: 14px;
}
.btn-big.secondary { background: #eef2ff; color: #3450d2; }
.hub input {
  width: 100%; padding: 14px; font-size: 22px; border: 2px solid #d6def5; border-radius: 12px; margin-top: 8px;
}
.hub input#code { text-transform: uppercase; letter-spacing: 6px; font-weight: 800; text-align: center; }
.fallback-note { font-size: 14px; color: #7a839f; margin-top: 10px; }
.fallback-note a { color: #3450d2; }
.error { color: #c0392b; font-weight: 600; min-height: 24px; }

/* ---------- контент шага ---------- */
.slide { background: #fff; border-radius: 18px; padding: 26px; margin-top: 16px;
  box-shadow: 0 4px 16px rgba(28,35,64,.06); font-size: 21px; line-height: 1.5; }
.slide h2 { margin-top: 0; }
.slide li { margin: 10px 0; }
.slide .hero { font-size: 64px; line-height: 1.1; text-align: center; margin-bottom: 10px; }
.slide.final { text-align: center; background: linear-gradient(135deg, #fff7e8 0%, #eef2ff 100%); }
.slide.final h2 { font-size: 30px; }
/* markdown-таблица на слайде: без сетки, крупный шрифт как у текста слайда, зебра строк */
.slide table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 21px; line-height: 1.4; }
.slide table th, .slide table td { padding: 10px 14px; text-align: left; }
.slide table th { font-weight: 800; color: #3450d2; }
.slide table tr:nth-child(even) { background: #f5f8ff; }

.emoji-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.emoji-btn { background: #fff; padding: 18px 8px; font-size: 34px; border-radius: 16px;
  box-shadow: 0 2px 8px rgba(28,35,64,.08); display: flex; flex-direction: column; gap: 6px; align-items: center;
  border: 3px solid transparent; transition: transform .12s; }
.emoji-btn:nth-child(6n+1) { background: #fff7e8; }
.emoji-btn:nth-child(6n+2) { background: #eef6ff; }
.emoji-btn:nth-child(6n+3) { background: #eefaf0; }
.emoji-btn:nth-child(6n+4) { background: #fdf0f4; }
.emoji-btn:nth-child(6n+5) { background: #f3f0fd; }
.emoji-btn:nth-child(6n+6) { background: #f0fbfb; }
.emoji-btn:active { transform: scale(.96); }
.emoji-btn .lbl { font-size: 14px; color: #4a5270; }
.emoji-btn.mine { outline: 4px solid #3450d2; }
.board-picks { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.board-picks .pick { background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 16px;
  box-shadow: 0 1px 4px rgba(28,35,64,.1); }

/* сортировка: карточки и корзины — css/media.css */

/* choice — вопрос заметно контрастнее вариантов (кегль + вес + цвет) */
.choice-progress { margin: 12px 4px; font-weight: 700; color: #4a5270; }
.prompt { background: #fff; border-radius: 18px; padding: 22px 24px; font-size: 25px; font-weight: 800;
  line-height: 1.35; color: #1c2340; box-shadow: 0 4px 16px rgba(28,35,64,.06); margin-top: 12px; }
.options { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.opt-btn { background: #fff; padding: 18px; font-size: 18px; font-weight: 400; color: #3a4160;
  line-height: 1.45; text-align: left;
  border-radius: 16px; box-shadow: 0 2px 10px rgba(28,35,64,.1); border: 3px solid transparent; }
.opt-btn:active { border-color: #3450d2; }
.opt-btn.picked { border-color: #27ae60; background: #f0fbf4; }
.ack { text-align: center; font-size: 20px; font-weight: 800; color: #27ae60; margin-top: 14px; min-height: 28px; }
.bank-done { text-align: center; font-size: 24px; font-weight: 800; color: #27ae60; margin-top: 30px; }

/* рефлексия */
.phrases { list-style: none; padding: 0; }
.phrases li { background: #fff; border-radius: 14px; padding: 14px 18px; margin: 10px 0;
  font-size: 20px; box-shadow: 0 2px 8px rgba(28,35,64,.06); }
.phrase-big { font-size: 30px; font-weight: 800; text-align: center; padding: 44px 30px; }
.host-phrases { background: #fff; border-radius: 16px; padding: 12px; }
.host-phrases .phrase-item { padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 16px; }
.host-phrases .phrase-item:hover { background: #eef2ff; }
.host-phrases .phrase-item.picked { background: #3450d2; color: #fff; font-weight: 700; }

/* host_fill: плашки в пропуски */
.host-fill { background: #fff; border-radius: 16px; padding: 16px; }
.fill-line { font-size: 21px; margin: 12px 0; line-height: 1.7; }
.fill-blank { display: inline-block; min-width: 130px; text-align: center; border-bottom: 3px solid #b9c4e8;
  padding: 2px 10px; margin: 0 6px; font-weight: 700; color: #3450d2; white-space: pre; }
.fill-blank.filled { background: #eef2ff; border-radius: 10px; border-bottom-color: #3450d2; }
.fill-blank.clickable { cursor: pointer; background-clip: padding-box; }
.fill-blank.target { border-bottom-color: #f5a623; background: #fff8ec; border-radius: 10px; }
.fill-words { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.word-chip { background: #3450d2; color: #fff; border-radius: 999px; padding: 8px 18px;
  font-size: 18px; font-weight: 700; }
.word-chip.picked { outline: 4px solid #f5a623; }
.word-chip.used { opacity: .35; }
.fill-reset { margin-left: auto; background: #eef2ff; color: #3450d2; padding: 8px 14px; font-size: 14px; }

/* подтверждение ответа + подсказки */
.confirm-btn { margin-top: 16px; }
.confirm-btn.disabled { opacity: .4; pointer-events: none; }
.hint { margin-top: 14px; font-size: 14px; color: #7a839f; text-align: center; }

/* звонок из тренажёра */
.call-btn { font-size: 24px; background: #eef2ff; border-radius: 12px; padding: 6px 12px; }
.call-menu { position: fixed; top: 64px; left: 12px; z-index: 25; background: #fff; border-radius: 16px;
  padding: 14px; box-shadow: 0 8px 26px rgba(28,35,64,.25); display: flex; flex-direction: column; gap: 10px; width: 260px; }
.call-banner { position: sticky; top: 56px; z-index: 9; margin: 10px auto 0; max-width: 720px;
  background: #eafbef; border: 2px solid #27ae60; border-radius: 14px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-weight: 700; }
.call-banner button { background: #27ae60; color: #fff; padding: 8px 14px; font-weight: 700; }
.call-banner #call-banner-close { background: transparent; color: #4a5270; font-size: 16px; margin-left: auto; }

/* рука + оверлеи */
.hand-btn { position: fixed; right: 16px; bottom: 16px; z-index: 20; font-size: 28px;
  width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(28,35,64,.2); }
.hand-btn.raised { background: #f5a623; }
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(28,35,64,.55);
  display: flex; align-items: center; justify-content: center; }
.overlay .msg { background: #fff; border-radius: 22px; padding: 34px 40px; font-size: 26px;
  font-weight: 800; text-align: center; }
.toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: #27ae60; color: #fff; border-radius: 999px; padding: 10px 22px; font-weight: 700; }
.toast.off { background: #7a839f; }
.undo-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: #1c2340; color: #fff; border-radius: 999px; padding: 10px 12px 10px 22px;
  font-weight: 700; display: flex; align-items: center; gap: 12px; }
.undo-bar button { background: #f5a623; color: #1c2340; border-radius: 999px; padding: 8px 16px; font-weight: 800; }
.undo-bar.passive { pointer-events: none; padding: 10px 22px; } /* шаг без отмены: только «Принято», тапы проходят насквозь */
.catchup-banner { background: #eef2ff; color: #3450d2; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px;
  font-size: 15px; font-weight: 600; line-height: 1.35; }

/* ---------- пульт ---------- */
/* 1440, а не 1200 (TASK-12): на ноутбуке 1366 панель управления пульта помещается в одну строку */
.host-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; max-width: 1440px; margin: 0 auto; padding: 16px; }
.host-header { grid-column: 1 / -1; background: #3450d2; color: #fff; border-radius: 18px;
  padding: 14px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 6px 18px rgba(52,80,210,.28); }
.host-header .code-big { font-size: 30px; letter-spacing: 7px; font-weight: 900; color: #fff; }
.host-header .share { font-size: 14px; opacity: .9; }
.host-header .share a { color: #ffd88a; word-break: break-all; }
.host-header .build-version { margin-left: auto; align-self: flex-end; font-size: 11px; opacity: .6; }
/* комната только для чтения (урок поменяли после рестарта) */
.readonly-banner { display: flex; align-items: center; gap: 14px; background: #fdecea; color: #7b1d12;
  border-left: 5px solid #c0392b; border-radius: 14px; padding: 12px 16px; font-weight: 700; }
.readonly-banner button { margin-left: auto; background: #c0392b; color: #fff; border-radius: 10px;
  padding: 8px 14px; font-weight: 800; white-space: nowrap; }
/* продолжили в новой комнате: новый код крупно */
.new-code-notice { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #e8f6ee;
  color: #1d5e36; border-left: 5px solid #27ae60; border-radius: 14px; padding: 14px 18px; font-weight: 700; }
.new-code-notice .code-huge { font-size: 54px; letter-spacing: 12px; font-weight: 900; color: #1c2340; }
.new-code-notice .cap { font-size: 15px; font-weight: 600; flex: 1; min-width: 200px; }
.new-code-notice button { background: #27ae60; color: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 800; }
/* ошибка действия пульта вместо alert */
.host-error { background: #fdecea; color: #7b1d12; border-radius: 12px; padding: 10px 14px; font-weight: 700; }
/* дети со старой страницей после деплоя — одна строка на группу */
.stale-builds { background: #fff6d6; color: #7a5a00; border-left: 5px solid #f2c200; border-radius: 12px;
  padding: 10px 14px; font-weight: 700; }
.host-controls button:disabled { opacity: .5; cursor: default; }
/* ребёнок: занятие продолжается в новой комнате */
.readonly-moved { margin-top: 18px; font-size: 18px; font-weight: 700; }
.readonly-moved b { display: block; font-size: 40px; letter-spacing: 8px; margin: 8px 0 12px; }
@media (max-width: 800px) { .host-layout { grid-template-columns: 1fr; } }
.steps-list { background: #fff; border-radius: 16px; padding: 10px; align-self: start;
  box-shadow: 0 3px 12px rgba(28,35,64,.07); }
.steps-list .step-item { padding: 9px 10px; border-radius: 10px; font-size: 15px; cursor: pointer;
  display: flex; gap: 9px; align-items: baseline; }
.steps-list .step-item .n { flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: #eef2ff; color: #3450d2; font-weight: 800; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.steps-list .step-item:hover { background: #f4f7ff; }
.steps-list .step-item.current { background: #3450d2; color: #fff; font-weight: 700; }
.steps-list .step-item.current .n { background: #ffd88a; color: #1c2340; }
/* шаг детей — метка «дети»; шаг, который ведущая смотрит у себя, — пунктирная рамка (FR-2) */
.steps-list .kids-badge { margin-left: auto; align-self: center; flex: none; font-size: 11px; font-weight: 800;
  background: #ffd88a; color: #1c2340; border-radius: 999px; padding: 1px 8px; }
.steps-list .step-item.viewing { background: #f4f7ff; box-shadow: inset 0 0 0 2px #7d8bc4; font-weight: 700; }
.host-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* панель управления пульта — одна строка на 1366×768 (TASK-12, владелец 23.09: «аж три жирные строки»):
   кнопки ниже и уже, подписи 14 px. Узкое окно — переносится, действия не прячутся */
.host-controls { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center;
  background: #fff; border-radius: 14px; padding: 7px 9px;
  box-shadow: 0 3px 12px rgba(28,35,64,.07); }
/* группы кнопок: просмотр шагов, то, что видят дети (стоп, таймер), инструменты */
.ctl-group { display: flex; gap: 5px; align-items: center; }
.ctl-view { padding-right: 8px; border-right: 2px solid #eef1f8; }
.ctl-tools { margin-left: auto; }
.host-controls button { padding: 6px 8px; font-size: 14px; line-height: 1.3; font-weight: 700; border-radius: 10px;
  background: #eef2ff; color: #3450d2; white-space: nowrap; }
.host-controls button.primary { background: #3450d2; color: #fff; box-shadow: 0 3px 8px rgba(52,80,210,.3); }
.host-controls button.danger { background: #ff5d5d; color: #fff; }
.host-controls button.active { outline: 2px solid #f5a623; outline-offset: 1px; }
/* таймер (TASK-12): основная кнопка «▶ 3:00» / «■ 0:54» и «⚙» с меню */
.timer-group { position: relative; }
#timer-btn { font-variant-numeric: tabular-nums; min-width: 64px; }
#timer-btn .timer-ico { display: inline-block; min-width: .9em; text-align: center; }
/* идёт — тёмная: видно издалека, что таймер включён и что эта же кнопка его выключает */
#timer-btn.running { background: #1c2340; color: #fff; }
#timer-btn .timer-left.warn { color: #ffb36b; }
#timer-btn .timer-left.over { color: #ff8a8a; }
#timer-btn .timer-left.paused { opacity: .65; }
#timer-menu-btn { padding: 6px 7px; line-height: 0; }
#timer-menu-btn .gear-ico { display: block; }
.timer-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: max-content;
  display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #e3e9fb;
  border-radius: 12px; padding: 10px; box-shadow: 0 10px 30px rgba(28,35,64,.25); }
.timer-menu-cap { font-size: 11px; font-weight: 800; color: #7a839f; text-transform: uppercase; letter-spacing: .04em; }
.timer-menu-row { display: flex; gap: 6px; }
.timer-menu-row button { flex: 1; }
.bigstat { background: #fff; border-radius: 16px; padding: 16px 20px; display: flex; gap: 34px; align-items: center;
  box-shadow: 0 3px 12px rgba(28,35,64,.07); }
.bigstat .num { font-size: 40px; font-weight: 900; color: #3450d2; }
.bigstat .cap { color: #7a839f; font-size: 14px; }
.bigstat .waiting { color: #7a839f; font-size: 16px; }
.entry-wrap { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 280px; }
.entry-wrap .cap { text-align: right; font-size: 12px; line-height: 1.3; }
.entry-btn { padding: 10px 16px; font-weight: 700; background: #eef2ff; color: #3450d2; }
.entry-btn.closed { background: #1c2340; color: #ffd88a; }
.students-strip { display: flex; flex-wrap: wrap; gap: 8px; background: #fff; border-radius: 16px; padding: 12px;
  box-shadow: 0 3px 12px rgba(28,35,64,.07); }
.stud { border-radius: 999px; padding: 8px 16px; font-weight: 600; background: #eef2ff; }
.stud.off { opacity: .45; }
.stud.stuck { background: #fff1e6; color: #d2691e; }
.stud.hand { background: #f5a623; color: #fff; }
.host-note-wrap { background: #fffbe8; border-left: 5px solid #f5a623; border-radius: 10px; padding: 8px 12px 10px; }
.host-note-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.host-note-cap { font-size: 12px; font-weight: 700; color: #806624; text-transform: uppercase; letter-spacing: .04em; }
#note-mode-btn { min-height: 24px; padding: 3px 10px; font-size: 12px; font-weight: 600; border-radius: 999px;
  background: #f3e7b8; color: #5c5330; }
/* «Свернуть» / «Развернуть» — одинаково у шпаргалки, экрана детей и следующего шага: справа в заголовке
   блока, контурная капсула (не путать с залитыми «Подробно» и масштабом). Свёрнутый блок — одна строка */
.block-actions { display: flex; align-items: center; gap: 8px; }
.fold-btn { min-height: 24px; padding: 2px 10px; font-size: 12px; font-weight: 700; border-radius: 999px;
  background: transparent; color: #3b4b7a; border: 1.5px solid currentColor; }
.host-note-bar .fold-btn { color: #5c5330; }
.host-note-wrap.folded .host-note-bar { margin-bottom: 0; }
/* конспект читается сверху вниз связным текстом (FR-10): время, план, реплики, слова, за чем
   следить, стоп, мостик. Заголовок блока — короткая метка; у строк (время, стоп, мостик) — в строку */
.host-brief { display: flex; flex-direction: column; gap: 7px; color: #5c5330; font-size: 15px; line-height: 1.45; }
.host-brief .brief-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #a2822b; }
.host-brief div.brief-head { margin-bottom: 1px; }
.host-brief span.brief-head { margin-right: 8px; }
.host-brief .brief-time { font-weight: 700; }
.host-brief ol, .host-brief ul { margin: 0; padding-left: 20px; }
.host-brief li { margin: 1px 0; }
.host-brief p { margin: 0; display: inline; }
.host-brief .brief-say li { font-style: italic; }
.host-brief .brief-stop .brief-head { color: #c0392b; }
.host-brief .brief-bridge p { font-style: italic; }
.host-note { padding: 4px 4px 2px; font-size: 15px; line-height: 1.45; color: #5c5330;
  white-space: pre-line; /* блоки подсказки («ПЕРЕД СТАРТОМ:», «ПОСЛЕ СТОПА:») разделены пустой строкой */ }
.review-panel { background: #fff; border-radius: 16px; padding: 16px; }
.review-panel table { width: 100%; border-collapse: collapse; font-size: 15px; }
.review-panel td, .review-panel th { padding: 8px 10px; border-bottom: 1px solid #eef1f8; text-align: left; }
.review-panel tr.controversial { background: #fff8ec; }
.mark-btn { background: #eef2ff; color: #3450d2; padding: 4px 10px; border-radius: 8px; font-size: 13px; }
.mark-btn.marked { background: #f5a623; color: #fff; }
/* фокус «Сейчас разбираем» (FR-1): кнопка в первой ячейке строки разбора (у прогноза — в заголовке
   колонки) и плашка сверху пульта */
.review-panel td.mark-cell { white-space: nowrap; }
.focus-btn { display: inline-block; margin: 0 0 0 6px; padding: 4px 10px; border-radius: 8px; font-size: 13px;
  font-weight: 700; background: #3450d2; color: #fff; white-space: nowrap; }
.review-panel th .focus-btn { display: block; margin: 6px 0 0; }
.focus-btn.active { background: #e8f6ee; color: #1d5e36; box-shadow: inset 0 0 0 2px #27ae60; cursor: default; }
.focus-banner { display: flex; align-items: center; gap: 14px; background: #eef2ff; color: #1c2a6b;
  border-left: 5px solid #3450d2; border-radius: 14px; padding: 12px 16px; font-weight: 700; }
.focus-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.focus-banner-line { font-size: 17px; }
.focus-banner-offline { font-size: 14px; font-weight: 600; color: #7a5a00; }
.focus-banner-msg { font-size: 15px; color: #7b1d12; }
#focus-clear-btn { background: #3450d2; color: #fff; border-radius: 10px; padding: 8px 16px; font-weight: 800; white-space: nowrap; }
/* ---------- пульт: живой шаг и просмотр (FR-2, FR-10) ---------- */
/* закреплено сверху при любой прокрутке: где сейчас дети + плашка фокуса «Сейчас разбираем»
   (TASK-9b, FR-1) — раньше плашка не была в этом блоке и уезжала за экран при прокрученном разборе */
.pinned-top { position: sticky; top: 0; z-index: 12; display: flex; flex-direction: column; gap: 8px; }
.live-bar { display: flex; align-items: center; gap: 10px;
  background: #1c2340; color: #fff; border-radius: 14px; padding: 10px 14px; font-weight: 800; font-size: 17px;
  box-shadow: 0 4px 14px rgba(28,35,64,.2); }
.live-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; }
.live-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#back-live-btn { flex: none; margin: -4px 0; background: #ffd88a; color: #1c2340; border-radius: 10px; padding: 4px 12px;
  font-size: 14px; font-weight: 800; }
/* отмена перевода: 10 секунд, полоска внизу убывает */
.goto-undo { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff6d6; color: #5c4a00; border-left: 5px solid #f2c200; border-radius: 14px;
  padding: 10px 14px 12px; font-weight: 700; }
#undo-goto-btn { margin-left: auto; background: #1c2340; color: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 800; }
#undo-goto-btn:disabled { opacity: .5; cursor: default; }
.goto-undo-left { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #f2c200;
  transform-origin: left center; animation: undo-left 10s linear forwards; }
@keyframes undo-left { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* шаг на пульте: живой — как раньше; просмотр чужого шага — пунктирная рамка «Детям не видно» */
.view-frame { display: flex; flex-direction: column; gap: 10px; }
.view-frame.previewing { border: 3px dashed #7d8bc4; border-radius: 18px; padding: 12px; background: #f7f8fd; }
.view-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800; color: #2b3766; font-size: 16px; }
.view-cap .view-tag { background: #2b3766; color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 13px; }
.step-digest { background: #fff; border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.45; color: #1c2340; }
.digest-type { font-size: 12px; font-weight: 700; color: #7a839f; text-transform: uppercase; letter-spacing: .04em; }
.digest-hero { font-size: 36px; line-height: 1.2; margin-top: 4px; }
.digest-md h2 { font-size: 18px; margin: 6px 0 4px; }
.digest-md p { margin: 4px 0; }
.digest-md ul { margin: 4px 0; padding-left: 20px; }
.digest-md table { border-collapse: collapse; font-size: 14px; margin: 6px 0; }
.digest-md th, .digest-md td { padding: 3px 10px 3px 0; text-align: left; }
.digest-block { margin-top: 10px; }
.digest-block p { margin: 0; }
.digest-head { font-size: 11px; font-weight: 800; color: #3450d2; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.digest-items { margin: 0; padding-left: 22px; }
.digest-items > li { margin: 6px 0; }
.digest-prompt p { margin: 0 0 2px; font-weight: 700; }
.digest-options, .digest-cards { margin: 2px 0 0; padding-left: 18px; color: #4a5270; }
.digest-cards { columns: 2; column-gap: 24px; }
.digest-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.digest-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #eef2ff; }
.digest-more { color: #7a839f; font-size: 13px; }
.digest-empty { color: #7b1d12; font-weight: 700; margin: 0; }
/* следующий шаг после шага детей: всегда внизу экрана, переводит детей одним нажатием */
/* строка с названием и кнопками — нижняя (column-reverse при прежнем порядке в разметке: читалка экрана идёт
   с названия): карточка прижата к низу окна, и при сворачивании «Показать детям следующий шаг» и «Развернуть»
   остаются на месте, уходит только план над ними */
.next-card { position: sticky; bottom: 0; z-index: 11; margin-top: auto; display: flex; flex-direction: column-reverse; gap: 6px;
  background: #fff; border-top: 4px solid #3450d2; border-radius: 16px; padding: 10px 14px 12px;
  box-shadow: 0 -6px 22px rgba(28,35,64,.16); }
.next-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.next-cap { font-size: 12px; font-weight: 800; color: #626b88; text-transform: uppercase; letter-spacing: .04em; }
/* название сжимается многоточием: кнопки карточки остаются в строке заголовка и на окне уже 1055 px */
.next-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 800; font-size: 17px; }
.next-head button { padding: 10px 14px; font-weight: 700; background: #eef2ff; color: #3450d2; }
.next-head button.primary { background: #3450d2; color: #fff; box-shadow: 0 4px 10px rgba(52,80,210,.35); }
.next-head button:disabled { opacity: .5; cursor: default; }
.next-head .fold-btn { padding: 2px 10px; font-weight: 700; background: transparent; color: #3b4b7a; }
.next-body { display: flex; flex-direction: column; gap: 6px; }
.next-lead { color: #4a5270; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.next-lead:empty { display: none; }
.next-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 18px; }
.next-h { font-size: 11px; font-weight: 800; color: #a2822b; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; }
.next-plan ol { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.35; max-height: 5.4em; overflow: hidden; }
.next-bridge p { margin: 0; font-size: 14px; line-height: 1.35; font-style: italic; color: #5c5330; display: -webkit-box;
  -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* встроенный видеозвонок */
:root { --video-h: 190px; }
.video-strip { height: var(--video-h); background: #1c2340; }
.video-grip { height: 14px; background: #e8edf7; cursor: ns-resize; position: relative;
  touch-action: none; flex: 0 0 auto; }
.video-grip::before { content: ''; position: absolute; left: 50%; top: 6px;
  width: 46px; height: 3px; margin-left: -23px; border-radius: 2px; background: #94a3c4; }
.video-grip:hover::before { background: #366df7; }
.video-strip iframe { border: 0; }
.host-video { height: 230px; background: #1c2340; border-radius: 16px; overflow: hidden;
  box-shadow: 0 3px 12px rgba(28,35,64,.15); }
.host-video iframe { border: 0; }

/* превью детского экрана в пульте (iframe ?preview=1) */
body.preview .hand-btn, body.preview .call-btn, body.preview .call-banner, body.preview .call-menu { display: none !important; }
body.preview #step-content { pointer-events: none; }
.preview-wrap { background: #fff; border-radius: 16px; padding: 10px;
  box-shadow: 0 3px 12px rgba(28,35,64,.07); }
.preview-wrap .preview-cap { display: inline-block; font-size: 12px; color: #fff; background: #5a6bb0;
  border-radius: 999px; padding: 3px 12px; margin: 0 0 8px 2px; font-weight: 600; }
:root { --preview-h: 400px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.preview-head .block-actions { margin-bottom: 8px; }
.preview-zoom { display: flex; gap: 4px; }
.preview-wrap.folded .preview-cap, .preview-wrap.folded .preview-head .block-actions { margin-bottom: 0; }
.preview-zoom button { padding: 3px 10px; font-size: 12px; font-weight: 600; border-radius: 999px;
  background: #e8edf7; color: #3b4b7a; }
.preview-zoom button.active { background: #366df7; color: #fff; }
/* окно превью: iframe шире и выше окна в 1/масштаб раз и ужат transform-ом — видно весь экран ребёнка */
.preview-view { position: relative; height: var(--preview-h); overflow: hidden; border: 1px solid #e3e9fb;
  border-radius: 12px; background: #f2f6ff; }
/* iframe вне потока раскладки: увеличенный (шире окна в 1/масштаб раз) он раздвигал бы панель пульта,
   панель росла, превью пересчитывалось под новую ширину — и так по кругу */
.preview-view iframe { position: absolute; top: 0; left: 0; display: block; border: 0; transform-origin: 0 0;
  background: #f2f6ff; }
.preview-grip { height: 14px; margin-top: 6px; border-radius: 7px; background: #e8edf7; cursor: ns-resize;
  position: relative; touch-action: none; }
.preview-grip::before { content: ''; position: absolute; left: 50%; top: 6px; width: 46px; height: 3px;
  margin-left: -23px; border-radius: 2px; background: #94a3c4; }
.preview-grip:hover::before, .preview-grip.dragging::before { background: #366df7; }

/* онбординг-тур пульта */
.tour-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(28,35,64,.55); }
.tour-target { position: relative; z-index: 51; outline: 4px solid #f5a623; border-radius: 12px; background: #fff; }
.host-header.tour-target { background: #3450d2; } /* белый фон тура съел бы белый код комнаты */
.live-bar.tour-target { background: #1c2340; position: sticky; }
.next-card.tour-target { position: sticky; }
.tour-tip { position: fixed; z-index: 52; width: 320px; background: #fff; border-radius: 16px;
  padding: 16px; box-shadow: 0 10px 34px rgba(28,35,64,.35); font-size: 16px; line-height: 1.45; }
.tour-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tour-count { color: #7a839f; font-size: 13px; margin-left: auto; }
.tour-next { background: #3450d2; color: #fff; padding: 8px 18px; font-weight: 700; }
.tour-skip { background: transparent; color: #7a839f; padding: 8px 0; font-size: 14px; }

.setup-form { max-width: 520px; margin: 8vh auto; background: #fff; border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 20px rgba(28,35,64,.1); }
.setup-form input, .setup-form select { padding: 12px; font-size: 17px; border: 2px solid #d6def5; border-radius: 10px; }
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.setup-link { color: #3450d2; font-weight: 700; font-size: 16px; text-decoration: none; background: #eef2ff;
  border-radius: 10px; padding: 8px 14px; }


/* Пульт только для чтения: модератор всегда, ведущая после закрытия занятия (класс console-readonly
   на <html>, host.js). Листать просмотр можно: он только у себя на пульте */
.console-readonly #go-live-btn,
.console-readonly #go-next-btn,
.console-readonly #goto-undo,
.console-readonly #lock-btn,
.console-readonly #timer-btn.idle,
.console-readonly #timer-menu-btn,
.console-readonly #timer-menu,
.console-readonly .focus-btn,
.console-readonly #focus-clear-btn,
.console-readonly .entry-wrap,
.console-readonly #close-lesson-btn,
.console-readonly #close-confirm,
.console-readonly #rotate-guest-btn,
.console-readonly #rotate-guest-confirm,
.console-readonly #continue-room-btn,
.role-moderator #tour-btn { display: none !important; }
/* идущий таймер виден (остаток), но кнопка его не останавливает */
.console-readonly #timer-btn { pointer-events: none; }
.console-readonly #timer-btn .timer-ico { display: none; }
/* после закрытия занятия переводить некуда: карточки следующего шага и руки не нужны */
.lesson-ended #next-card, .lesson-ended #next-toggle-btn, .lesson-ended #hands-row { display: none !important; }

/* шапка пульта: роль, ссылки взрослых, «Закрыть занятие», подтверждения в два шага */
.host-header .role-tag { background: #ffd88a; color: #1c2340; border-radius: 999px; padding: 4px 12px;
  font-size: 14px; font-weight: 800; }
/* тестовое занятие (W3.3a): заметно, но не красное — это не ошибка; цвет другой, чем у роли «Модератор» рядом */
.host-header .sandbox-tag { background: #c6f1d6; color: #0f3d24; border-radius: 999px; padding: 4px 12px;
  font-size: 14px; font-weight: 800; white-space: nowrap; }
.host-header .role-links { display: flex; flex-direction: column; gap: 4px; }
.host-header .role-link { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* тач-минимум WCAG 24 px, у нас 32 (проект — «тач первый класс»): flex-центрирование вместо роста padding,
   иначе на 400 px строка ссылок переносится ниже, чем нужно */
.host-header .copy-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px;
  background: rgba(255,255,255,.16); color: #fff; border-radius: 8px; padding: 3px 10px;
  font-size: 13px; font-weight: 700; }
.host-header .copy-btn:hover { background: rgba(255,255,255,.28); }
.host-header .header-danger { display: inline-flex; align-items: center; justify-content: center; min-height: 32px;
  margin-left: auto; background: #c0392b; color: #fff; border-radius: 10px;
  padding: 8px 14px; font-weight: 800; white-space: nowrap; }
.host-header .header-danger + .build-version { margin-left: 0; }
.inline-confirm { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; color: #1c2340; border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.inline-confirm span { flex: 1; min-width: 200px; }
.inline-confirm button { background: #eef2ff; color: #3450d2; border-radius: 10px; padding: 8px 14px; font-weight: 800; }
.inline-confirm button.danger { background: #c0392b; color: #fff; }
.ended-banner { background: #1c2340; color: #ffd88a; border-radius: 14px; padding: 12px 16px; font-weight: 800; }
.new-code-notice #mod-moved-go { margin-left: auto; }

/* руки в порядке поднятия и гости — строками рядом с полосой детей */
.hands-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: #fff6e6;
  border-left: 5px solid #f5a623; border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.hands-row .row-cap { color: #7a5a00; }
.hand-item { display: inline-flex; align-items: center; gap: 6px; background: #f5a623; color: #fff;
  border-radius: 999px; padding: 4px 6px 4px 14px; }
.hand-lower { display: inline-flex; align-items: center; justify-content: center; min-height: 32px;
  background: #fff; color: #7a5a00; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; }
.hand-lower:disabled { opacity: .5; cursor: default; }
.guests-row { color: #4a5270; font-size: 15px; font-weight: 600; padding: 0 4px; }

/* гость на экране ребёнка: только просмотр */
.guest-tag { background: #eef2ff; color: #3450d2; border-radius: 999px; padding: 4px 12px; font-size: 13px;
  font-weight: 800; white-space: nowrap; }
body.guest .hand-btn { display: none !important; }
body.guest #step-content { pointer-events: none; }
.guest-closed { text-align: center; font-size: 26px; font-weight: 800; padding: 40px 20px; }
/* конец сессии поверх всего, включая слой фокуса */
.ended-overlay { z-index: 60; background: #eef2ff; }

/* scene (урок 3, «Марсоход»): сцена сама в Shadow DOM, снаружи — только отступ под подсказкой */
.scene-step { margin-top: 12px; }