/* Собран из engine/src/css/, правьте там и запускайте check.bat. Этот файл не править: его пересобирает scripts/build_engine.py. Отпечаток: c57dbf97916d */
/* engine/src/css/01-base.css — основа, шапка, кнопки, вступление, шаг, навигация, меню шагов, режим учителя (ключ, подсветка ответа). Часть стилей движка: собирается в engine/engine.css (check.bat). */
/* Движок уроков: раскладка и компоненты.
   Здесь нет ни одного цвета, шрифта или тени — всё берётся из темы (engine/themes/*.css). */

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--c-bg); color: var(--c-ink);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased; transition: background var(--dur), color var(--dur);
}
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: var(--r-sm) }
h1, h2, h3, h4 { margin: 0; text-wrap: balance }
p { margin: 0 }
a { color: var(--c-accent) }
svg.ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none }
.muted { color: var(--c-muted) }
small.muted, .small { font-size: var(--fs-small) }
[hidden] { display: none !important }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

/* ---------- верхняя панель ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: var(--c-surface); border-bottom: 1px solid var(--c-line) }
.bar-in {
  max-width: var(--page-max); margin: 0 auto; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) max(var(--page-gutter), env(safe-area-inset-right)) var(--sp-2) max(var(--page-gutter), env(safe-area-inset-left));
}
.brand { font: var(--fw-bold) 13px/1.1 var(--font-display); max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.prog { flex: 1; min-width: 50px; height: 8px; background: var(--c-surface-2); border-radius: var(--r-pill); overflow: hidden }
.prog i { display: block; height: 100%; width: 0; background: var(--c-accent); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease) }
.pill {
  font-weight: var(--fw-bold); font-size: var(--fs-small); padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--c-accent-soft); color: var(--c-accent); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pill.hw { background: var(--c-homework-bg); color: var(--c-homework) }
/* кнопка домашки в шапке; в домашке шапка с полоской цвета домашки */
.iconbtn.hw-btn { color: var(--c-homework); background: var(--c-homework-bg) }
.iconbtn.hw-btn:hover { background: var(--c-homework-bg); box-shadow: inset 0 0 0 2px var(--c-homework) }
.iconbtn.hw-btn.on { color: var(--c-ink); background: var(--c-surface-2) }
body.hw-view .bar { border-bottom: 3px solid var(--c-homework) }
.pill.bump { animation: bump .45s var(--ease-bounce) }
.iconbtn {
  width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface);
  display: grid; place-items: center; flex: none; padding: 0; transition: background var(--dur-fast), transform var(--dur-fast);
}
.iconbtn:hover { background: var(--c-surface-2) }
.iconbtn:active { transform: scale(.94) }
a.iconbtn { color: var(--c-ink); text-decoration: none }   /* «В кабинет» в шапке урока (1.9) — ссылка в виде кнопки */
.iconbtn.wide { width: auto; padding: 0 var(--sp-3); gap: var(--sp-2); display: inline-flex; align-items: center; font-weight: var(--fw-semi); font-size: var(--fs-small) }

.wrap {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--sp-2) max(var(--page-gutter), env(safe-area-inset-right)) 120px max(var(--page-gutter), env(safe-area-inset-left));
}

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 11px 18px;
  border-radius: var(--r-md); border: 2px solid var(--c-line); background: var(--c-surface);
  font-weight: var(--fw-semi); font-size: 15px; transition: background var(--dur-fast), transform var(--dur-fast), filter var(--dur-fast);
}
.btn:hover:not(:disabled) { background: var(--c-surface-2) }
.btn:active:not(:disabled) { transform: scale(.97) }
.btn.primary { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent) }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--c-accent) }
.btn.small { padding: 7px 14px; font-size: var(--fs-small); border-radius: var(--r-sm) }
.btn[aria-pressed="true"] { background: var(--c-accent-soft); color: var(--c-accent); border-color: var(--c-accent) }
.btn:disabled { opacity: .45; cursor: default }
.linkbtn { border: 0; background: none; color: var(--c-accent); font-weight: var(--fw-semi); font-size: var(--fs-small); padding: 6px 0; text-decoration: underline; text-underline-offset: 3px }
.row-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center }

/* ---------- вступление ---------- */
.intro { padding: var(--sp-6) 0 var(--sp-4); display: grid; gap: var(--sp-5) }
.intro-cover { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1); aspect-ratio: 16 / 7; background: var(--c-surface-2) }
.intro-cover img { width: 100%; height: 100%; object-fit: cover; display: block }
.tags { display: flex; gap: var(--sp-2); flex-wrap: wrap }
.tags b {
  font: var(--fw-bold) var(--fs-tiny)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 10px; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-muted);
}
.intro h1 { font: var(--fw-bold) clamp(30px, 6.5vw, 48px)/1.08 var(--font-display); letter-spacing: -.02em }
.intro .sub { color: var(--c-muted); max-width: 52ch; font-size: 18px }
.goals { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1) }
.goals h3 { font: var(--fw-bold) 18px/1.3 var(--font-display); margin-bottom: var(--sp-3) }
.goals ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2) }
.goals li { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-2); align-items: start }
.goals li::before { content: "✓"; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent); font-weight: var(--fw-heavy); font-size: 13px; margin-top: 2px }
.intro-meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-semi) }

/* ---------- шаг ---------- */
.step { padding-top: var(--sp-6); animation: stepIn .4s var(--ease) both }
.step[hidden] { display: none }
.step-h { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-5) }
.eyebrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; font: var(--fw-bold) var(--fs-tiny)/1 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--c-accent) }
.badge { padding: 5px 8px; border-radius: var(--r-xs); letter-spacing: .05em }
.badge.hw { background: var(--c-homework-bg); color: var(--c-homework) }
.badge.extra { background: var(--c-extra-bg); color: var(--c-extra) }
.badge.free { background: var(--c-surface-2); color: var(--c-muted) }
.step h2 { font: var(--fw-bold) clamp(23px, 4.4vw, 30px)/1.2 var(--font-display); letter-spacing: -.01em }
.lead { color: var(--c-muted); max-width: 62ch }
.blocks { display: flex; flex-direction: column; gap: var(--sp-5) }
.stack { display: flex; flex-direction: column; gap: var(--sp-4) }
/* мелкие служебные классы вместо стилей в коде */
.mt-2 { margin-top: var(--sp-2) }
.mt-3 { margin-top: var(--sp-3) }
.grow { flex: 1; min-width: 0 }
.stack.tight { gap: 14px }
.text-h { font: var(--fw-bold) 18px/1.3 var(--font-display); margin-bottom: var(--sp-2) }
.reading > .figure, .reading > .audio { margin-bottom: var(--sp-4) }
.task-img { margin-bottom: var(--sp-3) }
.err-card.top { margin-top: var(--sp-6) }
.msg-page { padding-top: 40px }
.msg-page .intro { padding-top: 0 }
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1) }

/* задание: заголовок */
.task-h { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; margin-bottom: var(--sp-2) }
.task-h h3 { font: var(--fw-heavy, 800) 21px/1.3 var(--font-display, var(--font-body)) }
/* значок вида задания (25.10) */
.task-h .t-ico { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--c-marker, #FFE34D); color: var(--c-marker-ink, #111) }
.task-h .t-ico .ico { stroke-width: 2.2 }
.task-h { flex-wrap: nowrap } .task-h .cnt { flex: none } .task-h h3 { flex: 0 1 auto; min-width: 0 }
.task-h .cnt { font-size: 13px; color: var(--c-muted); font-weight: var(--fw-semi); padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-surface-2) }
.task-ins { color: var(--c-muted); margin: 0 0 var(--sp-3); font-size: 15px }

/* навигация по шагам */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--c-surface); border-top: 1px solid var(--c-line) }
.nav-in {
  max-width: var(--page-max); margin: 0 auto; display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between;
  padding: var(--sp-3) max(var(--page-gutter), env(safe-area-inset-right)) calc(var(--sp-3) + env(safe-area-inset-bottom)) max(var(--page-gutter), env(safe-area-inset-left));
}
.nav-pos { font-size: var(--fs-small); color: var(--c-muted); font-weight: var(--fw-semi); text-align: center; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.nav .btn.primary svg { transition: transform var(--dur-fast) }
.nav .btn.primary:hover svg { transform: translateX(3px) }

/* меню шагов */
dialog { border: 0; padding: 0; background: transparent; color: var(--c-ink); max-width: none; max-height: none }
dialog::backdrop { background: var(--c-overlay) }
.sheet-modal {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); height: 100%; margin: 0; background: var(--c-surface);
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; animation: slideIn .3s var(--ease);
}
.sheet-modal.center { inset: 0; margin: auto; width: min(860px, calc(100% - 24px)); height: auto; max-height: calc(100% - 24px); border-radius: var(--r-xl); animation: popIn .3s var(--ease) }
.sheet-modal header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-line) }
.sheet-modal header h3 { font: var(--fw-bold) 18px/1.2 var(--font-display) }
.sheet-modal .body { overflow: auto; padding: var(--sp-3) var(--sp-4) var(--sp-5); flex: 1 }
.menu-group { font: var(--fw-bold) var(--fs-tiny)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); padding: var(--sp-4) var(--sp-2) var(--sp-2) }
.menu-item {
  width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: var(--sp-3); align-items: center; text-align: left;
  border: 0; background: none; padding: 10px var(--sp-2); border-radius: var(--r-md); font-weight: var(--fw-semi);
}
.menu-item:hover { background: var(--c-surface-2) }
.menu-item[aria-current="true"] { background: var(--c-accent-soft); color: var(--c-accent) }
.menu-item .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); font-size: 13px; font-weight: var(--fw-bold); color: var(--c-muted) }
.menu-item.done .n { background: var(--c-good); color: var(--c-accent-ink) }
.menu-item .r { font-size: var(--fs-tiny); color: var(--c-muted); font-variant-numeric: tabular-nums }
.menu-opts { border-top: 1px solid var(--c-line); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); display: grid; gap: var(--sp-2) }
.menu-opts .btn { width: 100%; justify-content: center }
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-weight: var(--fw-semi); font-size: 15px; cursor: pointer; padding: 6px var(--sp-2); min-height: 40px }
.switch input { width: 22px; height: 22px; accent-color: var(--c-accent); cursor: pointer }

/* заметки учителя */
.teacher { display: none; border-radius: var(--r-md); background: var(--c-teacher-bg); color: var(--c-teacher); padding: var(--sp-3) var(--sp-4); font-size: 15px }
.teacher b.t { display: block; font: var(--fw-bold) var(--fs-tiny)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px }
.teacher ul { margin: 0; padding-left: 20px }
body.teacher-mode .teacher { display: block }
/* режим учителя: значок в шапке, ключ с ответами, подсветка правильного */
.t-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: var(--fs-tiny); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-teacher); background: var(--c-teacher-bg); padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; cursor: help }
.t-key { margin: 0 0 var(--sp-3) }
.t-key-b { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--r-pill); background: var(--c-teacher-bg); color: var(--c-teacher); font-weight: var(--fw-bold); font-size: var(--fs-small); padding: 7px 14px; min-height: 36px }
.t-key-b[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--c-teacher) }
.t-ans { display: none; margin-top: var(--sp-2); border-radius: var(--r-md); background: var(--c-teacher-bg); color: var(--c-teacher); padding: var(--sp-3) var(--sp-4); font-size: 15px; font-weight: var(--fw-semi); animation: fadeUp .25s var(--ease) }
.t-ans ol { margin: 0; padding-left: 22px }
.t-key-b[aria-expanded="true"] + .t-ans { display: block }
/* правильный вариант: при наведении на задание, на телефоне — после нажатия на ключ */
/* выглядит как уже выбранный верный ответ, но вполсилы */
.teacher-mode .task:hover .t-right, .teacher-mode .task.t-open .t-right {
  border-color: color-mix(in srgb, var(--c-good) 55%, transparent);
  background: color-mix(in srgb, var(--c-good-bg) 55%, var(--c-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-good) 55%, transparent);
}
.teacher-mode .gap-in::placeholder { color: transparent }
.teacher-mode .task:hover .gap-in::placeholder, .teacher-mode .task.t-open .gap-in::placeholder { color: var(--c-good); opacity: .55 }
.teacher-mode .dgap[data-ans], .teacher-mode .sel[data-ans], .teacher-mode .slot[data-ans] { position: relative }
.teacher-mode [data-ans]::before {
  content: attr(data-ans); position: absolute; left: 50%; bottom: calc(100% - 6px); transform: translateX(-50%); z-index: 6;
  background: var(--c-good-bg); color: var(--c-good); border: 1px solid var(--c-good); border-radius: var(--r-sm);
  font: var(--fw-bold) 12px/1.2 var(--font-body); padding: 2px 7px; white-space: nowrap; pointer-events: none; display: none;
}
.teacher-mode [data-ans]:hover::before, .teacher-mode .task:hover [data-ans]::before, .teacher-mode .task.t-open [data-ans]::before { display: block }
/* пустой пропуск для перетаскивания: ответ прямо в нём, бледно-зелёным, как будто уже вставлен */
.teacher-mode .task:hover .dgap:not(.filled)[data-ans], .teacher-mode .task.t-open .dgap:not(.filled)[data-ans] {
  border-color: color-mix(in srgb, var(--c-good) 55%, transparent); background: color-mix(in srgb, var(--c-good-bg) 55%, var(--c-surface));
}
.teacher-mode .task:hover .dgap:not(.filled)[data-ans]::before, .teacher-mode .task.t-open .dgap:not(.filled)[data-ans]::before {
  position: static; transform: none; display: inline; background: none; border: 0; padding: 0; font: inherit; color: var(--c-good); opacity: .55;
}
.teacher-mode .dgap.filled::before, .teacher-mode .sel.right::before, .teacher-mode .pic.filled .slot::before { display: none !important }

/* engine/src/css/02-content.css — подача материала: картинки, аудио, текст, правило, таблицы на телефоне, «как думать», ошибки, карточка, устное задание. Часть стилей движка: собирается в engine/engine.css (check.bat). */
/* ---------- картинки, аудио ---------- */
.figure { margin: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-2); box-shadow: var(--shadow-1) }
.figure .ph { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2) }
.figure img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover }
.figure figcaption { font-size: var(--fs-small); color: var(--c-muted); padding: var(--sp-2) var(--sp-2) 2px; text-align: center; font-weight: var(--fw-semi) }
.figure.banner img { aspect-ratio: 16 / 7; max-height: none }
.figure.medium { max-width: 520px; margin-inline: auto; width: 100% }
.ph .lbl {
  position: absolute; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--c-photo-label); color: var(--c-photo-label-ink); font-weight: var(--fw-bold); font-size: var(--fs-small); white-space: nowrap;
  animation: popIn .4s var(--ease-bounce) both;
}
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3) }
.gallery .figure img { aspect-ratio: 4 / 3; max-height: none }
.gallery.n2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
.gallery.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) }
@media (max-width: 640px) { .gallery.n3 .figure img { aspect-ratio: 1 } }
.audio { display: flex; flex-direction: column; gap: var(--sp-2) }
.audio audio { width: 100% }
.audio .title { font-weight: var(--fw-bold) }
.audio-missing { margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-muted); font-weight: var(--fw-semi); font-size: 15px }

/* ---------- текст, чтение ---------- */
.text p + p { margin-top: var(--sp-3) }
.text.note { background: var(--c-surface-2); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5) }
.text.tip { background: var(--c-accent-soft); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5) }
.text.example { border-left: 4px solid var(--c-accent); padding: var(--sp-2) var(--sp-4); font-size: 18px }
mark.hl, .hl { border-radius: 4px; padding: 0 3px; color: inherit; transition: background var(--dur), box-shadow var(--dur) }
.hl-a { background: var(--c-marker); color: var(--c-marker-ink) }
.hl-b { background: var(--c-accent-soft); box-shadow: inset 0 -3px 0 var(--c-accent) }
.story { font-size: 18px; line-height: 1.75; max-width: 64ch }
.story h3 { font: var(--fw-bold) 20px/1.3 var(--font-display); margin-bottom: var(--sp-3) }
.story p { margin: 0 0 var(--sp-3) }
.story:not(.show) .hl { background: none; box-shadow: none; padding: 0; color: inherit }
.legend { display: none; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-small); color: var(--c-muted); margin-top: 6px }
.story.show + .legend { display: flex }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px }
.gloss { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--c-line) }
.gloss > span { font-size: var(--fs-small); padding: 5px 10px; border-radius: var(--r-sm); background: var(--c-surface-2) }
.gloss b { font-weight: var(--fw-bold) }
.read-tools { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4) }

/* ---------- правило (рабочий лист) ---------- */
.rule { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); overflow: hidden }
.rule-h { padding: var(--sp-5) var(--sp-5) 18px; background: var(--c-accent); color: var(--c-accent-ink); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end }
.rule-h h3 { font: var(--fw-bold) 20px/1.2 var(--font-display) }
.rule-h p { margin-top: 4px; font-size: var(--fs-small); opacity: .9 }
.rule-h .lvl { font: var(--fw-bold) var(--fs-tiny)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-radius: var(--r-pill); background: var(--c-accent-tint) }
.rule-b { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5) }
.tbl-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--c-line) }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px }
.tbl.wide { min-width: 600px }
.tbl th { background: var(--c-surface-2); text-align: left; font: var(--fw-bold) var(--fs-tiny)/1.25 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--c-muted); padding: var(--sp-3) 14px }
.tbl td { padding: var(--sp-3) 14px; border-top: 1px solid var(--c-line); vertical-align: top }
.tbl td:first-child { font-weight: var(--fw-bold) }
.tbl td small, .rule small, .text small { display: block; color: var(--c-muted); font-size: 13px; font-weight: var(--fw-body) }
.tbl tr.accent td { background: var(--c-accent-soft) }
.tbl td b, .tbl td strong { color: var(--c-accent); font-weight: var(--fw-heavy) }
/* Широкие таблицы на телефоне: каждая строка становится карточкой */
@media (max-width: 640px) {
  .tbl.wide { min-width: 0 }
  .tbl.wide thead { display: none }
  .tbl.wide tr { display: block; border-top: 1px solid var(--c-line); padding: var(--sp-2) 0 }
  .tbl.wide tbody tr:first-child { border-top: 0 }
  .tbl.wide td { display: grid; grid-template-columns: 38% 1fr; gap: var(--sp-2); border-top: 0; padding: 4px 14px }
  .tbl.wide td::before { content: attr(data-h); color: var(--c-muted); font: var(--fw-bold) var(--fs-tiny)/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .05em }
  .tbl.wide td:first-child { display: block; padding-top: var(--sp-2); padding-bottom: var(--sp-2) }
  .tbl.wide td:first-child::before { content: none }
  .tbl.wide tr.accent { background: var(--c-accent-soft) }
}
.formulas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3) }
.formula { border-radius: var(--r-lg); padding: var(--sp-4) 18px; background: var(--c-surface-2); min-width: 0 }
.formula h4 { margin: 0 0 10px; font: var(--fw-semi) var(--fs-small)/1.3 var(--font-body); color: var(--c-muted) }
.pattern { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px }
.pattern > span { padding: 6px 10px; border-radius: var(--r-sm); background: var(--c-surface); font-weight: var(--fw-bold); font-size: var(--fs-small); border: 1px solid var(--c-line) }
.pattern > span.k { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent) }
.formula p { font-size: 15px }
.formula p + p { color: var(--c-muted); font-size: var(--fs-small); margin-top: 2px }
.rule-notes { margin: 0; padding-left: 20px; display: grid; gap: 6px }

/* разбор «как думать» */
.think-ex { font: var(--fw-semi) 18px/1.45 var(--font-body); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-2); margin-bottom: 6px }
.think { margin: 0; padding: 0 }
.think li { list-style: none; display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px dashed var(--c-line) }
.think li:last-child { border-bottom: 0 }
.think .n { width: 34px; height: 34px; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-small) }
.think .why { font-style: italic; color: var(--c-muted) }

/* частые ошибки */
.mistakes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px }
.mk { padding: 14px var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-surface); font-size: 15px; min-width: 0 }
.mk .no { color: var(--c-bad); text-decoration: line-through; text-decoration-thickness: 2px }
.mk .yes { color: var(--c-good); font-weight: var(--fw-bold) }
.mk small { display: block; color: var(--c-muted); margin-top: 4px; font-size: 13px }

/* карточка по клику */
details.fold { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden }
details.fold > summary { list-style: none; cursor: pointer; padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-weight: var(--fw-bold) }
details.fold > summary::-webkit-details-marker { display: none }
details.fold > summary .fold-t { flex: 1; min-width: 0 }
details.fold > summary::after { content: ""; width: 10px; height: 10px; border-right: 3px solid var(--c-accent); border-bottom: 3px solid var(--c-accent); transform: rotate(45deg); transition: transform var(--dur) var(--ease); flex: none; margin-top: -4px }
details.fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px }
details.fold.flat { box-shadow: none; margin-bottom: var(--sp-3) }
details.fold > .fold-b { padding: 0 var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); animation: fadeUp .3s var(--ease) }

/* устное задание */
.speak { border: 2px dashed var(--c-accent); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--c-surface); display: flex; flex-direction: column; gap: var(--sp-3) }
.speak .kind { display: inline-flex; gap: 6px; align-items: center; font: var(--fw-bold) var(--fs-tiny)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent) }
.speak ol, .speak ul { margin: 0; padding-left: 22px; display: grid; gap: 4px }
.spoiler-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2) }
.spoiler-wrap > .spoiler { align-self: stretch }
.spoiler p + p, .teacher p + p { margin-top: var(--sp-3) }
.spoiler { border-radius: var(--r-md); background: var(--c-surface-2); padding: var(--sp-3) var(--sp-4); animation: fadeUp .3s var(--ease) }

/* engine/src/css/03-tasks.css — задания: общее, варианты, поле ввода, фишки и перетаскивание, группы, пропуски, список, ошибка, выделение, пары, картинки, порядок, письмо, блиц. Часть стилей движка: собирается в engine/engine.css (check.bat). */
/* ---------- задания: общее ---------- */
.q { background: var(--c-surface); border: 2px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1); transition: border-color var(--dur) }
.q.done { border-color: var(--c-good) }
.q.example { border-style: dashed; box-shadow: none }
.q-top { display: flex; gap: var(--sp-3); align-items: flex-start; justify-content: space-between }
.q-text { font: var(--fw-semi) var(--fs-task)/1.45 var(--font-body); margin: 0 0 14px }
.q-text.flush { margin: 0 }
.q-no { font: var(--fw-bold) var(--fs-tiny)/1 var(--font-body); color: var(--c-muted); letter-spacing: .06em; flex: none; padding-top: 6px }
.q-no.ex { color: var(--c-accent); text-transform: uppercase }
.q .figure { margin-bottom: 14px; box-shadow: none }
.q .ru { font-size: var(--fs-small); color: var(--c-muted); margin: 0 0 10px }
.blank { display: inline-block; min-width: 76px; border-bottom: 2px solid var(--c-muted); margin: 0 2px; text-align: center; font-weight: var(--fw-bold); color: var(--c-good); transition: color var(--dur) }
.blank.filled { animation: pop .35s var(--ease-bounce) }
.blank.is-ok { color: var(--c-good) }
.blank.is-no { color: var(--c-bad) }
.fb { margin-top: var(--sp-3); font-size: 15px; padding: 10px 14px; border-radius: var(--r-md); display: none }
.fb.show { display: block; animation: fadeUp .25s var(--ease) }
.fb.ok { background: var(--c-good-bg) }
.fb.ok > b:first-child { color: var(--c-good) }
.fb.no { background: var(--c-bad-bg) }
.fb.no > b:first-child { color: var(--c-bad) }
.fb.tip { background: var(--c-surface-2) }
.err-card { border: 2px solid var(--c-bad); background: var(--c-bad-bg); border-radius: var(--r-md); padding: var(--sp-4); font-size: 15px }
.err-card b { color: var(--c-bad) }

/* варианты ответа */
.opts { display: flex; flex-wrap: wrap; gap: 10px }
.opt {
  padding: 12px 18px; border-radius: var(--r-md); border: 2px solid var(--c-line); background: var(--c-surface);
  font-weight: var(--fw-semi); font-size: 16px; text-align: left; transition: transform var(--dur-fast), background var(--dur), border-color var(--dur);
}
.opt:hover:not(:disabled) { border-color: var(--c-accent); transform: translateY(-2px) }
.opt:active:not(:disabled) { transform: scale(.97) }
.opt:disabled { cursor: default }
.opt[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent) }
.opt.right { background: var(--c-good-bg); border-color: var(--c-good); color: var(--c-good); animation: pop .35s var(--ease-bounce) }
.opt.wrong { background: var(--c-bad-bg); border-color: var(--c-bad); color: var(--c-bad); animation: shake .4s }
.opt.dim { opacity: .45 }
.opts.tf .opt { min-width: 110px; text-align: center }

/* поле ввода */
.gaprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; font: var(--fw-semi) var(--fs-task)/1.7 var(--font-body) }
.gap-in {
  font: var(--fw-bold) 17px var(--font-body); color: var(--c-ink); background: var(--c-surface); border: 2px solid var(--c-line);
  border-radius: var(--r-sm); padding: 6px 10px; min-width: 70px; max-width: 100%; transition: border-color var(--dur-fast), background var(--dur);
}
.gap-in:focus { border-color: var(--c-accent); outline: none }
.gap-in.right { border-color: var(--c-good); background: var(--c-good-bg); color: var(--c-good) }
.gap-in.wrong { border-color: var(--c-bad); background: var(--c-bad-bg); animation: shake .4s }
.gap-in:disabled { opacity: 1 }
/* значок Enter внутри поля (25.10) */
.gap-wrap { position: relative; display: inline-flex; align-items: center; max-width: 100% }
.gap-wrap.has-enter .gap-in { padding-right: 36px }
.enter-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--c-muted); cursor: pointer; transition: color var(--dur-fast) }
.gap-wrap.typed .enter-btn, .enter-btn:hover { color: var(--c-enter, var(--c-accent)) }
.enter-btn:disabled, .q.done .enter-btn { display: none }
.check-btn { padding: 8px 14px; border-radius: var(--r-sm); border: 0; background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); font-size: var(--fs-small); transition: transform var(--dur-fast) }
.check-btn:active { transform: scale(.95) }
.check-btn:disabled { opacity: .4; cursor: default }
/* табличный вид поля ввода */
.gridtask { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); overflow: hidden }
.gridtask .gh, .gridtask .gr { display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center; padding: 10px 18px }
.gridtask .gh { background: var(--c-surface-2); font: var(--fw-bold) var(--fs-tiny)/1.2 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--c-muted); padding-block: var(--sp-3) }
.gridtask .gr { border-top: 1px solid var(--c-line); font-weight: var(--fw-semi) }
.gridtask .gr.done { background: var(--c-good-bg) }
.gridtask .gr .gap-in { width: 100% }
.gridtask .gr .fb { grid-column: 1 / -1; margin-top: 0 }
.gridtask .cell { min-width: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap }

/* фишки, банк слов, перетаскивание */
.bank { display: flex; flex-wrap: wrap; gap: 10px; min-height: 56px; padding: 14px; border-radius: var(--r-md); background: var(--c-surface-2); align-items: center }
.bank + .dlist, .bank + .dtext { margin-top: var(--sp-4) }
.bank.sticky { position: sticky; top: 62px; z-index: 5; box-shadow: var(--shadow-1) }
.chip {
  padding: 9px 15px; border-radius: var(--r-md); border: 2px solid var(--c-line); background: var(--c-surface);
  font-weight: var(--fw-bold); font-size: 16px; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform var(--dur-fast), border-color var(--dur), background var(--dur), opacity var(--dur);
}
.chip:hover:not(:disabled) { border-color: var(--c-accent); transform: translateY(-2px) }
.chip[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent); transform: translateY(-3px); box-shadow: var(--shadow-1) }
.chip.wrong { animation: shake .4s; border-color: var(--c-bad) }
.chip.placed { border-color: var(--c-good); background: var(--c-good-bg); color: var(--c-good); cursor: default; pointer-events: none; animation: pop .35s var(--ease-bounce) }
.chip.placed.miss { border-color: var(--c-line); background: var(--c-surface); color: var(--c-muted) }
.chip.used { opacity: .35; text-decoration: line-through; text-decoration-thickness: 2px; cursor: default; transform: none }
.chip.dragging { opacity: .3 }
.ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; box-shadow: var(--shadow-drag); transform-origin: center; opacity: .95 }
/* копия слова при перетаскивании идёт за курсором без задержки */
.ghost { transition: none !important; animation: none !important; will-change: transform }
.placing [data-drop]:not(.filled) { border-color: var(--c-accent) }
.drop-hover { background: var(--c-accent-soft) !important; border-color: var(--c-accent) !important }

/* разложить по группам */
.buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3) }
.bucket {
  text-align: left; border: 2px dashed var(--c-line); border-radius: var(--r-lg); padding: 14px; min-height: 140px; background: var(--c-surface);
  display: flex; flex-direction: column; gap: 10px; transition: border-color var(--dur), background var(--dur);
}
.placing .bucket:hover { background: var(--c-accent-soft) }
.bucket h4 { font: var(--fw-bold) 16px/1.2 var(--font-display) }
.bucket p { font-size: 13px; color: var(--c-muted) }
.bucket .in { display: flex; flex-wrap: wrap; gap: var(--sp-2) }

/* пропуски для перетаскивания */
.dgap {
  display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 38px; padding: 2px 10px; margin: 2px 3px;
  border: 2px dashed var(--c-muted); border-radius: var(--r-sm); background: var(--c-surface); vertical-align: middle;
  font-weight: var(--fw-bold); color: var(--c-muted); cursor: pointer; transition: border-color var(--dur), background var(--dur);
}
.dgap.filled { border-style: solid; border-color: var(--c-good); background: var(--c-good-bg); color: var(--c-good); cursor: default; animation: pop .35s var(--ease-bounce) }
.dgap.filled.miss { border-color: var(--c-line); background: var(--c-surface-2); color: var(--c-ink) }
.dgap.wrong { animation: shake .4s; border-color: var(--c-bad); background: var(--c-bad-bg) }
.dtext { font: var(--fw-semi) var(--fs-task)/2.1 var(--font-body) }
.dtext p + p { margin-top: var(--sp-3) }
.dlist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2) }
.dlist li { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; font: var(--fw-semi) var(--fs-task)/2.1 var(--font-body) }
.dlist li .n { color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-bold) }

/* выпадающий список в тексте */
.sel { position: relative; display: inline-block; vertical-align: middle; margin: 2px 3px }
.sel select {
  appearance: none; -webkit-appearance: none; font: var(--fw-bold) 16px var(--font-body); color: var(--c-ink); background: var(--c-surface);
  border: 2px solid var(--c-line); border-radius: var(--r-sm); padding: 5px 32px 5px 10px; cursor: pointer; transition: border-color var(--dur), background var(--dur);
}
.sel::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2.5px solid var(--c-accent); border-bottom: 2.5px solid var(--c-accent); transform: rotate(45deg); pointer-events: none }
.sel select:focus { border-color: var(--c-accent); outline: none }
.sel.right select { border-color: var(--c-good); background: var(--c-good-bg); color: var(--c-good); opacity: 1 }
.sel.right::after { display: none }
.sel.right select { padding-right: 10px }
.sel.wrong select { border-color: var(--c-bad); background: var(--c-bad-bg); animation: shake .4s }

/* найти ошибку, собрать предложение */
.toks { display: flex; flex-wrap: wrap; gap: 6px }
.tok { padding: 8px 12px; border-radius: var(--r-sm); border: 2px solid transparent; background: var(--c-surface-2); font-weight: var(--fw-semi); font-size: 17px; transition: background var(--dur), border-color var(--dur), transform var(--dur-fast) }
.tok:hover:not(:disabled) { border-color: var(--c-accent); transform: translateY(-2px) }
.tok:disabled { cursor: default }
.tok.wrong { animation: shake .4s; border-color: var(--c-bad); background: var(--c-bad-bg) }
.tok.found { background: var(--c-bad-bg); color: var(--c-bad); text-decoration: line-through; border-color: var(--c-bad); animation: pop .35s var(--ease-bounce) }
/* выделить слова в тексте */
.mw-text { margin: 0; font-size: var(--fs-task); line-height: 2.1 }
.mw-w { white-space: nowrap }
.mw { font: inherit; font-weight: var(--fw-semi); color: inherit; background: transparent; border: 2px solid transparent; border-radius: var(--r-xs); padding: 0 2px; margin: 0 -2px; line-height: 1.5; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast) }
.mw:hover:not(:disabled) { border-color: var(--c-accent); }
.mw[aria-pressed="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent) }
.mw:disabled { cursor: default }
.mw.extra, .mw.wrong { background: var(--c-bad-bg); border-color: var(--c-bad); color: var(--c-bad) }
.mw.wrong { animation: shake .4s }
.mw.hit { background: var(--c-good-bg); border-color: var(--c-good); color: var(--c-good); animation: pop .35s var(--ease-bounce) }
.mw.missed { border: 2px dashed var(--c-good); color: var(--c-good); background: transparent }
.mw.extra:disabled { text-decoration: line-through }
.line { min-height: 58px; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 10px; border-radius: var(--r-md); border: 2px dashed var(--c-line); margin-bottom: 10px; align-items: center; transition: border-color var(--dur), background var(--dur) }
.line:empty::before { content: attr(data-empty); color: var(--c-muted); font-size: var(--fs-small); padding-left: 6px }
.line.right { border-style: solid; border-color: var(--c-good); background: var(--c-good-bg) }
.line.wrong { border-color: var(--c-bad); animation: shake .4s }
.tiles { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); min-height: 44px }
.tile { padding: 9px 14px; border-radius: 11px; border: 2px solid var(--c-line); background: var(--c-surface); font-weight: var(--fw-bold); font-size: 16px; animation: pop .25s var(--ease) }
.tile:hover:not(:disabled) { border-color: var(--c-accent) }
.tile:disabled { cursor: default }

/* сопоставить пары */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--sp-4) }
.match .col { display: flex; flex-direction: column; gap: 10px }
.mcard {
  text-align: left; padding: 12px 14px; border-radius: var(--r-md); border: 2px solid var(--c-line); background: var(--c-surface);
  font-weight: var(--fw-semi); font-size: 16px; min-height: 52px; transition: transform var(--dur-fast), border-color var(--dur), background var(--dur);
}
.mcard:hover:not(:disabled) { border-color: var(--c-accent) }
.mcard[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); transform: translateY(-2px) }
.mcard.wrong { animation: shake .4s; border-color: var(--c-bad) }
.mcard:disabled { cursor: default; color: var(--c-ink) }
.mcard.paired { animation: pop .35s var(--ease-bounce); border-color: transparent }
.mcard.p1 { background: var(--c-pair-1) } .mcard.p2 { background: var(--c-pair-2) } .mcard.p3 { background: var(--c-pair-3) }
.mcard.p4 { background: var(--c-pair-4) } .mcard.p5 { background: var(--c-pair-5) } .mcard.p6 { background: var(--c-pair-6) }

/* слова к картинкам */
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3) }
.pic { background: var(--c-surface); border: 2px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); transition: border-color var(--dur), background var(--dur) }
.pic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); display: block; background: var(--c-surface-2) }
.pic .slot { min-height: 40px; border: 2px dashed var(--c-muted); border-radius: var(--r-sm); display: grid; place-items: center; font-weight: var(--fw-bold); color: var(--c-muted); font-size: var(--fs-small) }
.pic.filled { border-color: var(--c-good) }
.pic.filled .slot { border-style: solid; border-color: var(--c-good); background: var(--c-good-bg); color: var(--c-good); font-size: 16px; animation: pop .35s var(--ease-bounce) }
.pic.filled.miss .slot { border-color: var(--c-line); background: var(--c-surface-2); color: var(--c-ink) }
.pic.wrong { animation: shake .4s; border-color: var(--c-bad) }

/* расставить по порядку */
.olist { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); min-height: 58px; border: 2px dashed var(--c-line); border-radius: var(--r-md); padding: var(--sp-2) }
.olist:empty::before { content: attr(data-empty); color: var(--c-muted); font-size: var(--fs-small); padding: 10px }
.olist.right { border-style: solid; border-color: var(--c-good); background: var(--c-good-bg) }
.oitem {
  width: 100%; text-align: left; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 11px 14px;
  border-radius: var(--r-md); border: 2px solid var(--c-line); background: var(--c-surface); font-weight: var(--fw-semi); font-size: 16px; animation: pop .25s var(--ease);
}
.oitem:hover:not(:disabled) { border-color: var(--c-accent) }
.oitem .n { width: 26px; height: 26px; border-radius: 50%; background: var(--c-surface-2); display: grid; place-items: center; font-size: 13px; font-weight: var(--fw-bold); color: var(--c-muted) }
.oitem.ok { border-color: var(--c-good) }
.oitem.ok .n { background: var(--c-good); color: var(--c-accent-ink) }
.oitem.bad { border-color: var(--c-bad); animation: shake .4s }
.oitem:disabled { cursor: default; color: var(--c-ink) }
.opool { display: grid; gap: var(--sp-2) }
.opool .oitem .n { visibility: hidden }

/* письменный ответ */
.write textarea {
  width: 100%; min-height: 180px; resize: vertical; border: 2px solid var(--c-line); border-radius: var(--r-md); padding: 14px;
  background: var(--c-surface); font: var(--fw-body) 17px/1.6 var(--font-body); color: var(--c-ink);
}
.write textarea:focus { border-color: var(--c-accent); outline: none }
.write .meta { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; align-items: center; font-size: var(--fs-small); color: var(--c-muted); font-weight: var(--fw-semi); margin: var(--sp-2) 0 var(--sp-3) }
.write .meta .ok { color: var(--c-good) }
.usewords { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-2) 0 }
.usewords span { padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-surface-2); font-size: var(--fs-small); font-weight: var(--fw-bold); transition: background var(--dur), color var(--dur) }
.usewords span.on { background: var(--c-good-bg); color: var(--c-good) }
.usewords span.on::before { content: "✓ " }
.write ol, .write ul { margin: 0 0 var(--sp-2); padding-left: 22px }

/* блиц */
.blitz { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: var(--sp-5); text-align: center; transition: background var(--dur) }
.blitz.flash-ok { background: var(--c-good-bg) }
.blitz.flash-no { background: var(--c-bad-bg) }
.timer { height: 10px; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; margin-bottom: 14px }
.timer i { display: block; height: 100%; width: 100%; background: var(--c-accent); border-radius: var(--r-pill) }
.timer.low i { background: var(--c-bad) }
.blitz-meta { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--c-muted); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; margin-bottom: 18px }
.blitz-q { font: var(--fw-semi) clamp(19px, 3.6vw, 24px)/1.4 var(--font-body); min-height: 2.8em; display: grid; place-items: center; margin-bottom: var(--sp-5) }
.blitz-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); max-width: 480px; margin: 0 auto }
.blitz-btns button { padding: 18px; border-radius: var(--r-lg); border: 2px solid var(--c-line); background: var(--c-surface); font: var(--fw-bold) 22px/1 var(--font-display); transition: transform var(--dur-fast), background var(--dur) }
.blitz-btns button:hover:not(:disabled) { border-color: var(--c-accent); background: var(--c-accent-soft) }
.blitz-btns button:active { transform: scale(.96) }
.blitz-start { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3) }
.blitz-start p { color: var(--c-muted); max-width: 44ch }
.blitz-big { font: var(--fw-bold) 40px/1 var(--font-display); color: var(--c-accent) }

/* engine/src/css/04-summary-dict.css — итог шага, каталог и загрузка, словарь (слово по нажатию, окошко, рамка «Слова», «Мой словарь»). Часть стилей движка: собирается в engine/engine.css (check.bat). */
/* ---------- итог ---------- */
.result { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: center }
.ring { width: 150px; height: 150px; position: relative }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg) }
.ring circle { fill: none; stroke-width: 12 }
.ring .bg { stroke: var(--c-surface-2) }
.ring .fg { stroke: var(--c-accent); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease) }
.ring .num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: var(--fw-bold) 30px/1 var(--font-display); font-variant-numeric: tabular-nums }
.ring .num small { display: block; font: var(--fw-semi) 13px var(--font-body); color: var(--c-muted); margin-top: 4px }
.result h3 { font: var(--fw-bold) 22px/1.25 var(--font-display); margin-bottom: var(--sp-2) }
.result p { margin: 0 0 14px; color: var(--c-muted) }
.breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-4) }
.breakdown div { padding: 10px var(--sp-3); border-radius: var(--r-md); background: var(--c-surface-2); font-size: var(--fs-small); display: flex; justify-content: space-between; gap: var(--sp-2); font-variant-numeric: tabular-nums; font-weight: var(--fw-semi) }
.breakdown div.low { background: var(--c-bad-bg) }
.breakdown b { font-weight: var(--fw-heavy) }
.review { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); font-size: 15px }
.nowican-art { display: block; width: 100%; height: auto; max-height: 280px; aspect-ratio: 2 / 1; object-fit: contain; border-radius: var(--r-md); margin-bottom: var(--sp-4); background: #F7F3EB }
.nowican h3 { font: var(--fw-bold) 20px/1.25 var(--font-display); margin-bottom: 4px }
.nowican ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2) }
.nowican label { display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-3); align-items: center; padding: 12px 14px; border-radius: var(--r-md); border: 2px solid var(--c-line); cursor: pointer; font-weight: var(--fw-semi); transition: border-color var(--dur), background var(--dur) }
.nowican input { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; border-radius: var(--r-sm); border: 2px solid var(--c-line); margin: 0; display: grid; place-items: center; transition: background var(--dur), border-color var(--dur) }
.nowican input:checked { background: var(--c-good); border-color: var(--c-good) }
.nowican input:checked::after { content: "✓"; color: var(--c-accent-ink); font-weight: var(--fw-heavy); animation: pop .3s var(--ease-bounce) }
.nowican label:has(input:checked) { border-color: var(--c-good); background: var(--c-good-bg) }
.nowican label:active { transform: scale(.985) }
.nowican label.just { animation: canTick .45s var(--ease-bounce) }
.nowican label.just input { animation: bump .4s var(--ease-bounce) }
.nowican.is-done { border-color: var(--c-good) }
.nowican.all-done { animation: canGlow 1.1s var(--ease) }
.can-done { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-good); color: var(--c-accent-ink); animation: popIn .45s var(--ease-bounce) }
.can-done[hidden] { display: none }
.can-done b { display: block; font: var(--fw-bold) 18px/1.25 var(--font-display) }
.can-done span { font-weight: var(--fw-semi); font-size: 15px; opacity: .92 }
.can-done-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c-accent-ink) 22%, transparent); animation: bump .5s .2s var(--ease-bounce) both }
.can-done-ico span, .can-done-ico svg { opacity: 1 }
.credits { font-size: 13px; color: var(--c-muted); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-line) }
.credits ul { margin: 6px 0 0; padding-left: 18px }
.credits a { display: inline-block; padding: 8px 0 }

/* ---------- каталог, загрузка ---------- */
.catalog { display: grid; gap: var(--sp-3); margin-top: var(--sp-5) }
.lesson-card { display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; text-decoration: none; color: inherit; background: var(--c-surface); border: 2px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-1); transition: border-color var(--dur), transform var(--dur-fast) }
.lesson-card:hover { border-color: var(--c-accent); transform: translateY(-2px) }
.lesson-card h3 { font: var(--fw-bold) 18px/1.25 var(--font-display) }
.lesson-card p { color: var(--c-muted); font-size: var(--fs-small); margin-top: 4px }
.dropzone { border: 3px dashed var(--c-line); border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5); text-align: center; color: var(--c-muted); transition: border-color var(--dur), background var(--dur) }
.dropzone.over { border-color: var(--c-accent); background: var(--c-accent-soft) }
.loading { padding: var(--sp-7) 0; text-align: center; color: var(--c-muted) }

.toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 160px); background: var(--c-ink); color: var(--c-bg);
  padding: 10px 18px; border-radius: var(--r-md); font-weight: var(--fw-semi); font-size: 15px; transition: transform .35s var(--ease), opacity .35s; z-index: 50; max-width: calc(100% - 32px); opacity: 0; pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1 }

/* ---------- словарь: слово по нажатию, окошко, рамка «Слова» (engine/dict.js) ---------- */
/* нажимаемое слово: в тексте не выделяется, на компьютере — рука и лёгкое подчёркивание при наведении */
.w { cursor: pointer; border-radius: 4px; transition: background var(--dur-fast), box-shadow var(--dur-fast); -webkit-tap-highlight-color: transparent }
@media (hover: hover) {
  .w:hover { text-decoration: underline 2px; text-decoration-color: color-mix(in srgb, var(--c-accent) 55%, transparent); text-underline-offset: 3px }
}
.w.w-on { background: var(--c-accent-soft); box-shadow: 0 0 0 2px var(--c-accent-soft) }
.task[data-lookup="never"] .w, .task[data-lookup="after"] .q:not(.done) .w { cursor: inherit; text-decoration: none }

.ep-pop {
  position: fixed; z-index: 60; width: max-content; max-width: min(360px, calc(100vw - 16px)); min-width: 220px;
  background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: 14px 16px 14px; font-size: 16px; line-height: 1.45;
  animation: popIn .16s var(--ease) both; transform-origin: var(--arrow-x, 50%) top;
}
.ep-pop.above { transform-origin: var(--arrow-x, 50%) bottom }
.ep-pop .ep-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; background: none; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--c-muted) }
.ep-pop .ep-x:hover { background: var(--c-surface-2); color: var(--c-ink) }
.ep-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding-right: 34px }
.ep-w { font: var(--fw-bold) 20px/1.2 var(--font-display) }
.ep-ipa { color: var(--c-muted); font-size: 15px; font-weight: var(--fw-semi) }
.ep-snd {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--c-accent-soft); color: var(--c-accent);
  display: inline-grid; place-items: center; flex: none; transition: transform var(--dur-fast), background var(--dur-fast);
}
.ep-snd:hover { filter: brightness(1.05) }
.ep-snd:active { transform: scale(.92) }
.ep-snd.playing { background: var(--c-accent); color: var(--c-accent-ink); animation: bump .45s var(--ease-bounce) }
.ep-meta { color: var(--c-muted); font-size: 13px; font-weight: var(--fw-semi); margin-top: 2px }
.ep-meta b { color: var(--c-ink) }
.ep-main { margin-top: 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--c-accent-soft); color: var(--c-ink); font-weight: var(--fw-bold); font-size: 17px }
.ep-main.plain { background: none; padding: 0; font-weight: var(--fw-semi) }
.ep-rest, .ep-all { margin: 8px 0 0; padding-left: 20px }
.ep-rest { color: var(--c-muted); font-size: 14px; list-style: disc }
.ep-all { font-weight: var(--fw-semi) }
.ep-rest li + li, .ep-all li + li { margin-top: 2px }
.ep-rest i, .ep-all i { font-style: normal; font-size: 12px; color: var(--c-muted); font-weight: var(--fw-semi) }
.ep-note { margin-top: 8px; font-size: 13px; color: var(--c-muted) }
.ep-foot { margin-top: 12px }
.ep-add {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: var(--r-md);
  border: 2px solid var(--c-accent); background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); font-size: 15px;
  transition: transform var(--dur-fast), filter var(--dur-fast);
}
.ep-add:hover:not(:disabled) { filter: brightness(1.08) }
.ep-add:active:not(:disabled) { transform: scale(.96) }
.ep-add.on { background: var(--c-good-bg); border-color: var(--c-good-bg); color: var(--c-good); cursor: default; opacity: 1 }
.ep-add.just { animation: pop .4s var(--ease-bounce) }
.ep-alt { display: block; margin-top: 10px; padding: 8px 0 0; border: 0; border-top: 1px dashed var(--c-line); width: 100%; text-align: left; background: none; color: var(--c-accent); font-weight: var(--fw-semi); font-size: 14px }
.ep-alt:hover { text-decoration: underline }
.ep-lock { padding-right: 34px; font-weight: var(--fw-semi); font-size: 15px; color: var(--c-muted) }

.wordbox { margin-top: var(--sp-2); border: 2px dashed var(--c-accent-soft); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5) var(--sp-3) }
.wb-h { display: flex; align-items: center; gap: 8px; font: var(--fw-bold) 15px/1.2 var(--font-display); color: var(--c-accent) }
.wb-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0 }
.wb-row { display: grid; grid-template-columns: minmax(130px, 1fr) 1.4fr auto; align-items: center; gap: 4px var(--sp-3); padding: 8px 0; border-top: 1px solid var(--c-line) }
.wb-row:first-child { border-top: 0 }
.wb-wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px }
.wb-w { font-weight: var(--fw-bold); font-size: 17px }
.wb-ipa { color: var(--c-muted); font-size: 13px; font-weight: var(--fw-semi) }
.wb-ru { font-weight: var(--fw-semi) }
.wb-ru small { color: var(--c-muted); font-weight: var(--fw-semi); white-space: nowrap }
.wb-act { display: flex; align-items: center; gap: 6px; justify-content: flex-end }
.wb-act .ep-snd { width: 36px; height: 36px }
.wb-act .ep-add { min-height: 36px; padding: 5px 10px; font-size: 14px; background: var(--c-surface); color: var(--c-accent) }
.wb-act .ep-add.on { background: var(--c-good-bg); color: var(--c-good) }
@media (max-width: 640px) {
  .wordbox { padding: var(--sp-3) var(--sp-4) var(--sp-2) }
  .wb-row { grid-template-columns: 1fr auto; }
  .wb-ru { grid-column: 1; font-size: 15px }
  .wb-act { grid-column: 2; grid-row: 1 / span 2 }
  .wb-act .ep-add span { display: none }
  .wb-act .ep-add { width: 40px; min-height: 40px; padding: 0; justify-content: center }
  .wb-act .ep-snd { width: 40px; height: 40px }
}

.wordbox.locked .wb-list { display: none }
.wb-lock { margin-top: 6px; color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-semi) }
.wordbox.opened { animation: popIn .35s var(--ease) both }
.ep-credits { margin-top: 8px }
.ep-credits summary { cursor: pointer; padding: 6px 0; font-weight: var(--fw-semi) }
.ep-credits ul { margin: 4px 0 0; padding-left: 18px }
.ep-credits a { padding: 4px 0 }

/* кнопка «Мой словарь» в шапке: счётчик слов */
.iconbtn.words-btn { position: relative }
.iconbtn-n {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-accent-ink); font-size: 11px; font-weight: var(--fw-bold); line-height: 18px; text-align: center;
}

/* engine/src/css/05-sync.css — синхронный урок (1.13, задача 23; 1.15, задача 25): строка присутствия под шапкой («Лиза в уроке · шаг 3»), жёлтая полоса «Лиза ушла на шаг 2» + «Вернуть к себе», карточка «взята» и полёт карточки у второго участника, словарь ученика поверх урока, «Показать ответ» у учителя, блок, который учитель только что открыл ученику. Модуль стилей: собирается в engine/engine.css (check.bat). */
.sync-row { border-top: 1px solid var(--c-line); background: var(--c-surface) }
.sync-in { max-width: 980px; margin: 0 auto; padding: 4px var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); min-height: 34px; font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--c-muted) }
.sync-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c-line); box-shadow: inset 0 0 0 1px var(--c-muted) }
.sync-row.on .sync-dot { background: var(--c-good); box-shadow: 0 0 0 3px var(--c-good-bg) }
.sync-row.on .sync-l { color: var(--c-ink) }
.sync-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sync-follow { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; flex: none }
.sync-follow input { width: 18px; height: 18px; accent-color: var(--c-accent); cursor: pointer; margin: 0 }
.sync-short { display: none }
.sync-call { flex: none; white-space: nowrap }
.sync-call[hidden] { display: none }
.t-only-ph { display: none }
.sync-open { animation: popIn .35s var(--ease) }
/* 1.15: ученик ушёл от учителя — заметная полоса под шапкой (только у учителя); высота постоянная, текст в одну строку */
.sync-away { background: var(--c-marker); color: var(--c-marker-ink); border-top: 1px solid var(--c-marker-ink) }
.sync-away[hidden] { display: none }
.sync-away-in { max-width: 980px; margin: 0 auto; padding: 8px var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; font-weight: var(--fw-bold) }
.sync-away-in > .ico { flex: none }
.sync-away-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body, 16px) }
.sync-back { flex: none; white-space: nowrap; background: var(--c-marker-ink); color: var(--c-marker); border-color: var(--c-marker-ink); min-height: 42px; font-weight: var(--fw-bold) }
.sync-back:hover { filter: brightness(1.15) }
.sync-away { animation: syncAwayIn .25s var(--ease) }
@keyframes syncAwayIn { from { opacity: 0 } to { opacity: 1 } }
/* 1.15: карточку «взял» второй участник — пунктирная рамка и приподнята; полёт карточки — копия поверх страницы */
.sync-held { outline: 2px dashed var(--c-accent); outline-offset: 3px; transform: translateY(-3px); box-shadow: var(--shadow-1); transition: transform .15s var(--ease) }
.sync-fly { position: fixed; z-index: 80; margin: 0; pointer-events: none; box-sizing: border-box; box-shadow: var(--shadow-2, var(--shadow-1)) }
.sync-show { margin-top: var(--sp-2); font-size: var(--fs-small) }
/* 1.15: «Мой словарь» в синхронном уроке — окно поверх урока (урок под ним не перезагружается) */
.sync-words { position: fixed; inset: 0; z-index: 70; background: var(--c-overlay); display: flex; align-items: stretch; justify-content: center; padding: 24px }
.sync-words-f { width: 100%; max-width: 980px; height: 100%; border: 0; border-radius: var(--r-3, 16px); background: var(--c-bg); box-shadow: var(--shadow-2, var(--shadow-1)) }
body.sync-words-open { overflow: hidden }
@media (max-width: 640px) {
  .sync-words { padding: 0 }
  .sync-words-f { border-radius: 0 }
  .sync-away-in { padding: 6px 12px; gap: 8px; min-height: 52px }
  .sync-away-l { font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25 }
  .sync-back { padding: 6px 12px; min-height: 40px; font-size: 14px }
  .sync-in { padding: 3px 12px; gap: 6px; min-height: 30px; font-size: 13px }
  .sync-long { display: none }
  .sync-short { display: inline }
  .sync-call { padding: 4px 10px; min-height: 28px }
  .sync-call span { display: none }
}
/* блиц второго участника (1.15): его нажатие — зелёным или красным */
.sync-blitz .blitz-btns button:disabled { opacity: 1; cursor: default }
.sync-blitz .blitz-btns button.is-ok { border-color: var(--c-good); background: var(--c-good-bg); color: var(--c-good) }
.sync-blitz .blitz-btns button.is-no { border-color: var(--c-bad); background: var(--c-bad-bg); color: var(--c-bad) }
/* engine/src/css/05-test-timer.css — движок 1.6–1.7: тест (полоска, «Сдать тест», разбор), универсальный таймер, часы урока в шапке. Часть стилей движка: собирается в engine/engine.css (check.bat). */
/* ---------- движок 1.6 (задача 11): тест, беглость, запись голоса, карточки, «только для учителя» ---------- */
.badge.test { background: var(--c-ink); color: var(--c-bg) }
.badge.manual { background: var(--c-teacher-bg); color: var(--c-teacher); font: var(--fw-bold) var(--fs-tiny)/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--r-xs) }
.speak-top { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between }

/* тест: полоска сверху, «Сдать тест», результат */
.test-bar { border: 2px solid var(--c-ink); border-radius: var(--r-lg); background: var(--c-surface); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2) }
.test-bar.done { border-color: var(--c-good) }
.test-bar-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4) }
.test-name { display: inline-flex; align-items: center; gap: 8px; font: var(--fw-bold) 17px/1.2 var(--font-display) }
.test-pos { color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-semi) }
.test-clock { margin-left: auto; font: var(--fw-bold) 16px/1 var(--font-body); font-variant-numeric: tabular-nums; padding: 7px 12px; border-radius: var(--r-pill); background: var(--c-surface-2) }
.test-clock.low { background: var(--c-bad-bg); color: var(--c-bad) }
.test-note { font-size: var(--fs-small); color: var(--c-muted); font-weight: var(--fw-semi); display: flex; flex-wrap: wrap; gap: 6px var(--sp-2); align-items: center }
.test-note b { color: var(--c-ink) }
.test-end { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding-top: var(--sp-2) }
.test-submit { padding: 14px 26px; font-size: 17px }
.test-res { display: grid; gap: var(--sp-4); scroll-margin-top: 80px }
.test-res-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-3) }
.test-res-h h3 { font: var(--fw-bold) 22px/1.25 var(--font-display) }
.test-res .breakdown { margin: 0 }
.test-score { display: grid; justify-items: end; gap: 4px }
.test-score b { font: var(--fw-bold) 34px/1 var(--font-display); font-variant-numeric: tabular-nums }
.test-score span { color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-semi) }
.test-score .test-again-score { color: var(--c-ink); font-size: 15px }
.test-score .test-again-score b { font: inherit; font-weight: var(--fw-bold) }
.test-sub { font: var(--fw-bold) 17px/1.2 var(--font-display) }
.test-mist { margin: 0; padding-left: 24px; display: grid; gap: var(--sp-2) }
.test-mist li { padding-left: 4px }
.test-mist .q { display: block; font-weight: var(--fw-semi); border: 0; padding: 0; box-shadow: none; background: none }
.test-mist .pair { font-size: 15px }
.test-mist .no { color: var(--c-bad); text-decoration: line-through; text-decoration-thickness: 2px }
.test-mist .yes { color: var(--c-good) }
.test-first { font-size: var(--fs-small); font-weight: var(--fw-semi); padding: 10px 14px; border-radius: var(--r-md); background: var(--c-surface-2) }
.test-perfect { font: var(--fw-bold) 18px/1.3 var(--font-display); color: var(--c-good) }
body.in-test .cheat-btn { display: none }
.step.is-test:not(.test-done) .w { cursor: inherit; text-decoration: none }
/* разбор после сдачи: без тряски и «прыжков», правильный ответ рядом */
.test-rv .rv, .test-rv .opt, .test-rv .gap-in, .test-rv .line, .test-rv .tok, .test-rv .mw, .test-rv .oitem { animation: none !important }
.fix { display: inline-block; margin: 0 4px; font-weight: var(--fw-bold); color: var(--c-good); font-size: 15px }
.pic > .fix { display: block; text-align: center; margin: 0 }
.rv-mark { display: block }
.gr.rv-ok .rv-mark::after { content: "✓"; color: var(--c-good); font-weight: var(--fw-heavy) }
.gr.rv-no .rv-mark::after { content: "✗"; color: var(--c-bad); font-weight: var(--fw-heavy) }
.gr.rv-no { background: var(--c-bad-bg) }
.gr.rv-ok { background: var(--c-good-bg) }
.dgap.set { border-style: solid; border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-ink) }
.dgap.wrong.rv, .pic.wrong.rv { border-color: var(--c-bad); background: var(--c-bad-bg) }
.pic.wrong.rv .slot { border-style: solid; border-color: var(--c-bad); color: var(--c-bad) }
.pic.set .slot { border-style: solid; border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-ink); font-size: 16px }
.chip.bad { border-color: var(--c-bad); background: var(--c-bad-bg); color: var(--c-bad); cursor: default }
.chip.bad .fix { font-size: 13px }
.chip.placed.rv { pointer-events: none }
.line.wrong.rv { background: var(--c-bad-bg) }
.tok[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent) }
.tok.picked-no { border-color: var(--c-bad); background: var(--c-surface); color: var(--c-bad) }
.rv-pairs { display: grid; gap: var(--sp-2) }
.rv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: center; padding: 10px 14px; border-radius: var(--r-md); border: 2px solid var(--c-line); font-weight: var(--fw-semi) }
.rv-pair.ok { border-color: var(--c-good); background: var(--c-good-bg) }
.rv-pair.no { border-color: var(--c-bad); background: var(--c-bad-bg) }
.rv-pair.ex { border-style: dashed }
.rv-pair .fix { grid-column: 1 / -1; margin: 0 }
.teacher-mode .task:hover .mcard.t-pair, .teacher-mode .task.t-open .mcard.t-pair { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-good) 55%, transparent) }

/* универсальный таймер: блок timer, раунды беглости, таймер в шапке (движок 1.7, пункт 50) */
.utimer { border-radius: var(--r-lg); background: var(--c-surface-2); padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); transition: background var(--dur), box-shadow var(--dur) }
.ut-head { display: flex; align-items: center; gap: var(--sp-3); min-height: 36px }
.ut-head .kind { display: inline-flex; gap: 6px; align-items: center; flex: none; font: var(--fw-bold) var(--fs-tiny)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted) }
.ut-title { flex: 1; min-width: 0; font-weight: var(--fw-semi); font-size: var(--fs-small) }
.ut-bell { margin-left: auto; width: 36px; height: 36px }
.ut-bell[aria-pressed="false"] { color: var(--c-muted) }
.ut-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5) }
.ut-ring { width: 148px; height: 148px; position: relative; flex: none }
.ut-ring svg { width: 100%; height: 100%; transform: rotate(-90deg) }
.ut-ring circle { fill: none; stroke-width: 10 }
.ut-ring .bg { stroke: var(--c-line) }
.ut-ring .fg { stroke: var(--c-accent); stroke-linecap: round; transition: stroke-dashoffset .3s linear, stroke var(--dur) }
.ut-face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center }
.ut-time { font: var(--fw-bold) 38px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; transition: color var(--dur) }
.ut-sub { font: var(--fw-semi) 13px/1.2 var(--font-body); color: var(--c-muted); min-height: 1em }
.ut-side { flex: 1; min-width: 230px; display: grid; gap: var(--sp-3); align-content: center }
.ut-label { font-weight: var(--fw-semi); font-size: 17px }
.ut-presets { display: flex; flex-wrap: wrap; gap: 6px }
.ut-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 2px solid var(--c-line);
  background: var(--c-surface); font-weight: var(--fw-semi); font-size: var(--fs-small); font-variant-numeric: tabular-nums; transition: border-color var(--dur-fast), transform var(--dur-fast)
}
.ut-chip:hover { border-color: var(--c-accent) }
.ut-chip:active { transform: scale(.96) }
.ut-chip[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent) }
.ut-chip .n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-surface-2); font-size: 12px; color: var(--c-ink) }
.ut-own { border-style: dashed }
.ut-custom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.ut-in { width: 9ch; padding: 8px 10px; border-radius: var(--r-md); border: 2px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); font: inherit; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums }
.ut-in:focus { outline: none; border-color: var(--c-accent) }
.ut-in.shake { animation: shake .4s; border-color: var(--c-bad) }
.ut-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.ut-adj { padding: 10px 12px; font-variant-numeric: tabular-nums }
.ut-play { min-width: 132px }
.ut-reset { background: var(--c-surface) }
.ut-next { justify-self: start }
.ut-status { font-weight: var(--fw-semi); color: var(--c-good) }
.ut-status:empty { display: none }
.utimer.low { background: var(--c-bad-bg); box-shadow: inset 0 0 0 3px var(--c-bad) }
.utimer.low .ut-time { color: var(--c-bad) }
.utimer.low .ut-ring .fg { stroke: var(--c-bad) }
.utimer.low.run .ut-time { animation: flPulse 1s var(--ease) infinite }
.utimer.over .ut-time { color: var(--c-muted) }
.utimer.warn { animation: bump .45s var(--ease-bounce) }
.utimer.flash { animation: flFlash 1.2s var(--ease) }
/* время урока и таймер в шапке */
.clock-btn .clk-v { font-variant-numeric: tabular-nums }
.clock-btn.on { box-shadow: inset 0 0 0 2px var(--c-good) }
.clock-btn.cd { background: var(--c-marker); color: var(--c-marker-ink); border-color: transparent }
.sheet-modal.center.clock-modal { width: min(600px, calc(100% - 24px)); height: fit-content }
.clock-modal .body { display: grid; gap: var(--sp-4); align-content: start }
.clk { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--c-surface-2) }
.clk-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-3) }
.clk-h .kind { display: inline-flex; gap: 6px; align-items: center; font: var(--fw-bold) var(--fs-tiny)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted) }
.clk-time { font: var(--fw-bold) 38px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.clk.run .clk-time { color: var(--c-good) }
@keyframes flPulse { 50% { opacity: .55 } }
@keyframes flFlash { 0%, 40% { background: var(--c-marker); color: var(--c-marker-ink); box-shadow: 0 0 0 6px var(--c-marker) } 100% { box-shadow: 0 0 0 0 transparent } }

/* engine/src/css/06-rec-cards-phone.css — запись голоса, карточки, блок «только для учителя», анимации, телефон (последним: переопределяет всё выше). Часть стилей движка: собирается в engine/engine.css (check.bat). */
/* запись голоса */
.speak.record { border-style: solid }
.rec { display: grid; gap: var(--sp-3) }
.rec-live { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap }
.rec-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 24px 0 18px; border-radius: var(--r-pill); border: 0;
  background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); font-size: 17px; transition: transform var(--dur-fast), filter var(--dur-fast);
}
.rec-btn svg { width: 24px; height: 24px }
.rec-btn:hover:not(:disabled) { filter: brightness(1.06) }
.rec-btn:active:not(:disabled) { transform: scale(.96) }
.rec-btn:disabled { opacity: .5; cursor: progress }
.rec-btn.on { background: var(--c-bad); color: var(--c-bg); animation: recOn 1.4s var(--ease) infinite }
@keyframes recOn { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-bad) 45%, transparent) } 50% { box-shadow: 0 0 0 10px transparent } }
.rec-info { flex: 1; min-width: 200px; display: grid; gap: 6px }
.rec-time { font: var(--fw-bold) 22px/1 var(--font-body); font-variant-numeric: tabular-nums }
.rec-low .rec-time { color: var(--c-bad) }
.rec-level { height: 10px; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden }
.rec-level i { display: block; height: 100%; width: 0; background: var(--c-good); border-radius: var(--r-pill); transition: width .08s linear }
.rec[data-state="idle"] .rec-level { opacity: .4 }
.rec-hint { color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-semi) }
.rec-have { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--c-good-bg); animation: fadeUp .3s var(--ease) }
.rec-have-h { display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); align-items: baseline }
.rec-name { font: var(--fw-bold) 17px/1.25 var(--font-display) }
.rec-meta { color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-semi) }
.rec-msg { padding: 10px 14px; border-radius: var(--r-md); background: var(--c-surface-2); font-weight: var(--fw-semi); font-size: 15px }
.rec-msg.bad { background: var(--c-bad-bg); color: var(--c-ink); box-shadow: inset 4px 0 0 var(--c-bad) }
.rec-cmp { border-top: 1px dashed var(--c-line); padding-top: var(--sp-3); display: grid; gap: var(--sp-2) }
.rec > *, .rec-cmp > * { min-width: 0 }
.rec-none { display: grid; gap: var(--sp-2); justify-items: start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-2) }
.rec-none p { margin: 0; overflow-wrap: anywhere }
.rec-none > * { max-width: 100%; min-width: 0 }
.rec-load-w { display: inline-flex; max-width: 100% }
.rec-none .btn { white-space: normal; text-align: left; height: auto; min-height: 36px; min-width: 0; max-width: 100% }
.rec-all { margin: 0; font-weight: var(--fw-semi) }
.rec-all a { color: inherit; text-decoration: underline; text-underline-offset: 3px }
.btn .ico + span { white-space: nowrap }

/* карточки «вспомни, потом проверь» */
.fc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3) }
.fc-title { font: var(--fw-bold) 18px/1.3 var(--font-display) }
.fc-ins { color: var(--c-muted); font-size: 15px; margin-top: 4px }
.fc-body { display: grid; gap: var(--sp-3) }
.fc-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-weight: var(--fw-semi); font-size: var(--fs-small); color: var(--c-muted) }
.fc-again { padding: 4px 9px; border-radius: var(--r-pill); background: var(--c-extra-bg); color: var(--c-extra); font-weight: var(--fw-bold); font-size: var(--fs-tiny); letter-spacing: .05em; text-transform: uppercase }
.fc-bar { flex: 1; min-width: 80px; height: 6px; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden }
.fc-bar i { display: block; height: 100%; background: var(--c-accent); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease) }
.fc-stage { perspective: 1400px }
.fc-card { display: grid; position: relative; transform-style: preserve-3d; transition: transform .5s var(--ease); min-height: 230px }
.fc-card.is-flipped { transform: rotateY(180deg) }
.fc-card.tappable { cursor: pointer }
.fc-face {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); text-align: center; padding: var(--sp-5); border-radius: var(--r-xl); border: 2px solid var(--c-line); background: var(--c-surface); box-shadow: var(--shadow-1);
}
.fc-back { transform: rotateY(180deg); border-color: var(--c-accent); background: var(--c-accent-soft) }
.fc-card.flip-in { animation: none }
.fc-card.next-in .fc-front { animation: fcNext .35s var(--ease) both }
.fc-card.back-in .fc-front { animation: fcBack .35s var(--ease) both }
@keyframes fcNext { from { opacity: 0; transform: translateX(26px) } }
@keyframes fcBack { from { opacity: 0; transform: translateY(16px) } }
.fc-ask { color: var(--c-muted); font: var(--fw-bold) var(--fs-tiny)/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase }
.fc-ru { font: var(--fw-bold) clamp(24px, 5vw, 34px)/1.2 var(--font-display); max-width: 22ch }
.fc-gap { font: var(--fw-semi) clamp(20px, 4vw, 26px)/1.45 var(--font-body); max-width: 30ch }
.fc-gap .blank { min-width: 90px }
.fc-img { width: min(100%, 360px); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2) }
.fc-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.fc-hint { color: var(--c-muted); font-size: 15px }
.fc-t-ans { font-size: var(--fs-small); color: var(--c-good); opacity: .7; display: none }
body.teacher-mode .fc-t-ans { display: block }
.fc-word { display: inline-flex; align-items: center; gap: var(--sp-3) }
.fc-word b { font: var(--fw-bold) clamp(30px, 7vw, 46px)/1.1 var(--font-display); letter-spacing: -.01em }
.fc-ipa { color: var(--c-muted); font-size: 17px; font-weight: var(--fw-semi); margin-top: -6px }
.fc-mean { font-weight: var(--fw-bold); font-size: 19px }
.fc-full { font-size: 18px; font-weight: var(--fw-semi) }
.fc-act { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) }
.fc-act .btn { min-height: 54px; min-width: 180px; font-size: 17px; font-weight: var(--fw-bold) }
.fc-yes { border-color: var(--c-good); color: var(--c-good); background: var(--c-good-bg) }
.fc-no { border-color: var(--c-line) }
.fc-keys { text-align: center; color: var(--c-muted); font-size: 13px; font-weight: var(--fw-semi) }
@media (hover: none) { .fc-keys { display: none } }
.fc-sum { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-xl); border: 2px solid var(--c-good); background: var(--c-surface); animation: popIn .35s var(--ease) both }
.fc-big b { font: var(--fw-bold) 24px/1.2 var(--font-display) }
.fc-sub { font-weight: var(--fw-semi); color: var(--c-muted) }
.fc-miss { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 17px }
.fc-miss small { color: var(--c-muted); font-weight: var(--fw-semi) }
.fc-sum .btn { white-space: normal; text-align: left; max-width: 100% }
.fc-tnote b.t { margin-bottom: 4px }
.btn.just { animation: pop .4s var(--ease-bounce) }

/* блок «только для учителя» (виден в режиме учителя) */
.t-only { border: 2px dashed var(--c-teacher); border-radius: var(--r-lg); padding: var(--sp-3); display: grid; gap: var(--sp-3); background: color-mix(in srgb, var(--c-teacher-bg) 45%, transparent) }
.t-only.is-shown { border-style: solid; border-color: var(--c-good); background: color-mix(in srgb, var(--c-good-bg) 45%, transparent) }
.t-only.flip { animation: popIn .3s var(--ease) }
.t-only-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3) }
.t-only-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-teacher-bg); color: var(--c-teacher) }
.t-only.is-shown .t-only-ico { background: var(--c-good-bg); color: var(--c-good) }
.t-only-l { font: var(--fw-bold) var(--fs-tiny)/1.2 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--c-teacher); flex: 1; min-width: 140px }
.t-only.is-shown .t-only-l { color: var(--c-good) }
.t-eye { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px; border-radius: var(--r-pill); border: 2px solid var(--c-teacher); background: var(--c-surface); color: var(--c-teacher); font-weight: var(--fw-bold); font-size: var(--fs-small) }
.t-eye[aria-pressed="true"] { border-color: var(--c-good); color: var(--c-good) }
.t-eye:active { transform: scale(.96) }
.t-only-n { font-size: 13px; color: var(--c-muted); font-weight: var(--fw-semi) }

@media (max-width: 640px) {
  .test-clock { margin-left: 0 }
  .test-score { justify-items: start }
  .fl-timer { padding: var(--sp-4) }
  .fc-face { padding: var(--sp-4) }
  .fc-act .btn { flex: 1; min-width: 0; padding-left: 10px; padding-right: 10px }
  .rec-btn { width: 100%; justify-content: center }
  .rv-pair { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  .fc-card { transition: none }
}

/* ---------- анимации ---------- */
@keyframes bump { 40% { transform: scale(1.2) } }
@keyframes pop { 50% { transform: scale(1.07) } }
@keyframes shake { 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px) } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px) } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0 } }
@keyframes popIn { from { transform: scale(.94); opacity: 0 } }
@keyframes canTick { 0% { transform: scale(1) } 40% { transform: scale(1.03) } 100% { transform: scale(1) } }
@keyframes canGlow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-good) 45%, transparent) } 100% { box-shadow: 0 0 0 18px transparent } }

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  .brand { display: none }
  .card, .q, .blitz, .speak { padding: var(--sp-4) }
  .rule-h, .rule-b { padding-left: var(--sp-4); padding-right: var(--sp-4) }
  .story { font-size: 17px }
  .result { grid-template-columns: 1fr; justify-items: start }
  .gridtask .gh { display: none }
  .gridtask .gr { grid-template-columns: 1fr; padding: 14px var(--sp-4) }
  .gridtask .cell[data-label]::before { content: attr(data-label); font-size: var(--fs-tiny); color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; width: 100% }
  .match { gap: var(--sp-2) }
  .mcard { font-size: 15px; padding: 10px 11px }
  .nav .btn { padding: 10px 14px }
  .iconbtn.wide span { display: none }
  .iconbtn.wide.clock-btn.cd { width: auto; padding: 0 7px }
  .iconbtn.wide.clock-btn.cd svg { display: none }
  .iconbtn.wide.clock-btn.cd span { display: inline; font-size: 13px; font-weight: var(--fw-bold) }
  .ut-body { justify-content: center }
  .ut-ring { width: 136px; height: 136px }
  .ut-side { min-width: 100% }
  .utimer { padding: var(--sp-4) }
  .ut-ctrl { gap: 6px }
  .ut-play { min-width: 104px }
  .ut-adj { padding: 10px }
  /* шапка на телефоне: полоска прогресса уходит под шапку тонкой линией, кнопки компактнее */
  .bar-in { gap: 4px; position: relative }
  .prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; min-width: 0; border-radius: 0 }
  .prog i { border-radius: 0 }
  .bar-in > button:first-of-type { margin-left: auto }
  .iconbtn { width: 34px; height: 34px }
  .iconbtn.wide { width: 34px; padding: 0; justify-content: center }
  .pill { padding: 6px 9px }
  .t-badge { padding: 6px }
  .t-badge span { display: none }
  .intro-cover { aspect-ratio: 16 / 9 }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}

/* «Урок проведён» в шапке урока у учителя (1.10, задача 20) */
.iconbtn.done-btn { border-color: var(--c-ink) }
.iconbtn.done-btn.on { background: var(--c-good-bg); color: var(--c-good); border-color: var(--c-good) }
/* на телефоне в шапке нет места: значок «Учитель» уступает место кнопке «Урок проведён» */
@media (max-width: 640px) { .bar-in:has(.done-btn) .t-badge { display: none } }