/* ============================================================
   Платформа домашних заданий — вёрстка в фирменном стиле
   Deutsch Alexandra Stolz. Токены — в tokens.css.
   Сначала телефон (от 360 px), потом широкие экраны.
   Принцип бренда: спокойно и единообразно; один акцент — красный
   (маркеры секций, главная кнопка); зелёный = «верно / принято»;
   оранжевый = «ждёт ментора» (оранжевое окошко); серый = вторичное. Синего нет.
   ============================================================ */

/* ---------------------------------------------------------------- основа */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--surface-page); color: var(--text-body);
  font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-normal);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img { max-width: 100%; }
a { color: var(--red-600); text-decoration: none; }
a:hover { color: var(--red-700); text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 {
  font-family: var(--font-display); font-weight: var(--fw-black); color: var(--text-heading);
  letter-spacing: var(--ls-tight); line-height: var(--lh-snug); text-wrap: balance;
}
h1 { font-size: 1.6rem; line-height: var(--lh-tight); margin: .2em 0 .45em; }
h2 { font-size: 1.2rem; margin: .2em 0 .5em; }
h3 { font-size: 1.05rem; font-weight: var(--fw-extra); margin: .3em 0; }
p { margin: 0 0 .8em; }
strong, b { font-weight: var(--fw-bold); }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.inline { display: inline; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--green-100); color: var(--ink-900); }

/* подпись-«eyebrow»: красные прописные над заголовком */
.eyebrow {
  display: block; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--text-xs);
  letter-spacing: var(--ls-caps-wide); text-transform: uppercase; color: var(--red-600); margin-bottom: .35rem;
}

/* ---------------------------------------------------------------- шапка */
.topbar {
  position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.topbar-in {
  max-width: calc(var(--container) + 32px); margin: 0 auto; padding: 4px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-900); }
.brand:hover { text-decoration: none; color: var(--ink-900); }
.brand-logo { display: block; height: 42px; width: auto; }
.brand-label {
  padding-left: 12px; border-left: 1px solid var(--border-subtle);
  font-weight: var(--fw-bold); font-size: 11px; line-height: 1.25; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--grey-600);
}
.topnav { display: flex; align-items: center; gap: 2px 4px; flex-wrap: wrap; }
.topnav a, .topnav .linklike {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-sm); color: var(--ink-900);
  transition: background var(--dur-base) var(--ease-out);
}
.topnav a:hover, .topnav .linklike:hover { background: var(--paper-50); text-decoration: none; color: var(--ink-900); }
.topnav a[aria-current="page"] { background: var(--paper); }
.topnav a[aria-current="page"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red-600); margin-right: 8px;
}
/* бейдж у пункта: число новых («Отзывы») — шапка Django и приложения */
.topnav-badge {
  display: inline-block; min-width: 18px; margin-left: 5px; padding: 1px 5px; border-radius: var(--radius-pill);
  background: var(--red-600); color: var(--white); font-family: var(--font-body); font-size: 11px;
  font-weight: var(--fw-bold); line-height: 16px; text-align: center;
}
.topnav .topnav-exit { border: 1px solid var(--grey-300); color: var(--grey-600); margin-left: 4px; }
.topnav .topnav-exit:hover { border-color: var(--ink-900); color: var(--ink-900); background: transparent; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
/* «Бэк-офис» (админка Django) — в конце, перед «Выйти», и неброско: только у администратора */
.topnav .topnav-backoffice { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--text-xs); color: var(--grey-600); padding: 8px 8px; }
.topnav .topnav-backoffice:hover { background: transparent; color: var(--ink-900); text-decoration: underline; }
/* «Бэк-офис» и «Выйти» — вместе в конце меню; у сотрудника (много разделов) прижаты вправо */
.topnav-end { display: inline-flex; align-items: center; gap: 4px; }
.topnav-many .topnav-end { margin-left: auto; }
/* страницы входа: справа от логотипа — «Вход для команды →» / «Вход для учеников →» */
.topbar-side { margin-left: auto; padding: 8px 4px; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-sm); color: var(--grey-600); white-space: nowrap; }
.topbar-side:hover { color: var(--ink-900); }
/* широкий экран: шапка сотрудника в одну строку — логотип, разделы, справа «Бэк-офис» и «Выйти» */
@media (min-width: 1100px) {
  .topbar-in.topbar-wide { max-width: 1272px; }
  .topbar-wide .topnav-many { flex: 1 1 auto; }  /* не влезло (ещё пункт) — перенос, а не вылет вбок */
  .topnav-many a, .topnav-many .linklike { padding: 6px 9px; white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
  .topbar-wide .brand-label { display: none; }  /* иначе вся строка не помещается — подпись у логотипа прячем */
}
/* «Запросы N» — администратору: запросы на скачивание ждут решения / новые чтения уроков Claude */
.nav-count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--red-600); color: var(--white); font-size: var(--text-xs); font-weight: var(--fw-bold); line-height: 1.4; text-align: center; }

/* ---------------------------------------------------------------- страница */
.page { width: 100%; max-width: calc(var(--container) + 32px); margin: 0 auto; padding: 16px 16px 56px; flex: 1 0 auto; }
.crumbs { font-size: var(--text-sm); margin: 4px 0 6px; color: var(--grey-600); }
.crumbs a { color: var(--grey-600); font-weight: var(--fw-semibold); }
.crumbs a:hover { color: var(--ink-900); }
.crumbs .sep { color: var(--grey-300); margin: 0 1px; }
/* «← Назад» на родительскую страницу + крошки ({% crumbs %} в Django, PageCrumbs.vue в приложении) */
.crumbs-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 6px; }
.crumbs-bar .crumbs { margin: 0; }
.back-link {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px;
  border: 1.5px solid var(--grey-300); background: var(--white); color: var(--ink-900);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap;
}
.back-link:hover { border-color: var(--ink-900); color: var(--ink-900); text-decoration: none; }
.page-head { margin: 4px 0 18px; }
.page-head h1 { margin-bottom: .25em; }
.page-head .lead { color: var(--grey-600); margin: 0; }

.footer {
  display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 18px 16px 24px; font-size: var(--text-xs); color: var(--grey-600); letter-spacing: .02em;
}
/* точка-разделитель: в разметке есть «·» (читается и без стилей), на экране — красная точка */
.footer-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--red-600); font-size: 0; overflow: hidden; }

/* ---------------------------------------------------------------- карточки */
.card {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 18px 18px; margin: 0 0 16px;
}
.card.narrow { max-width: 520px; margin: 20px auto; }
/* Datenschutzerklärung (accounts/privacy.html) */
.privacy-card { max-width: 760px; margin: 20px auto; line-height: 1.6; }
.privacy-card h2 { font-size: 18px; margin: 22px 0 6px; }
.privacy-card ul { padding-left: 20px; }
.card > :last-child { margin-bottom: 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.card-head h2 a { color: inherit; }
.card-head h2 a:hover { color: var(--red-600); text-decoration: none; }
/* заголовок блока с красной точкой-маркером (как в карточке клиента CRM) */
.mk-title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin: 0 0 12px; }
.mk-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red-600); flex: none; }

/* пустые состояния и «тихие» экраны с иллюстрацией */
.hero { text-align: center; padding: 26px 20px 24px; }
.hero h1 { font-size: 1.5rem; }
.hero p { color: var(--ink-900); max-width: 40ch; margin-left: auto; margin-right: auto; }
.hero .muted { color: var(--grey-600); }
.illu { display: block; width: auto; height: 132px; margin: 0 auto 12px; }
.illu-sm { height: 96px; }
.illu-disc {
  display: grid; place-items: center; width: 148px; height: 148px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--mentor-wash);
}
.illu-disc img { height: 118px; width: auto; display: block; }
.illu-disc.paper { background: var(--paper); }
.illu-disc.green { background: var(--green-100); }
.empty {
  display: flex; align-items: center; gap: 16px; padding: 18px; text-align: left;
}
.empty img { height: 88px; width: auto; flex: none; }
.empty p { margin: 0; }
.empty .empty-title { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 1.05rem; margin-bottom: 2px; }

/* ---------------------------------------------------------------- кнопки (пилюли) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .7rem 1.35rem; border-radius: var(--radius-pill);
  border: 2px solid var(--grey-300); background: var(--white); color: var(--ink-900);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: .95rem; line-height: 1.1; letter-spacing: .01em;
  text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { border-color: var(--ink-900); color: var(--ink-900); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--red-600); border-color: var(--red-600); color: var(--white); }
.btn-primary:hover { background: var(--red-700); border-color: var(--red-700); color: var(--white); }
/* «Проверить» и «Принять» — зелёный: действие про «верно / подтверждено» */
.btn-check { background: transparent; border-color: var(--green-900); color: var(--green-900); }
.btn-check:hover { background: var(--green-900); border-color: var(--green-900); color: var(--white); }
.btn-accept { background: var(--green-900); border-color: var(--green-900); color: var(--white); }
.btn-accept:hover { background: var(--green-800); border-color: var(--green-800); color: var(--white); }
.btn-warn { background: var(--attn-wash); border-color: var(--attn-line); color: var(--attn-ink); }
.btn-warn:hover { border-color: var(--attn-ink); color: var(--attn-ink); }
.btn-danger { background: var(--white); border-color: var(--bad-line); color: var(--bad-ink); }
.btn-danger:hover { border-color: var(--bad-ink); color: var(--bad-ink); background: var(--bad-wash); }
.btn-light { background: var(--paper-50); border-color: transparent; color: var(--ink-900); }
.btn-light:hover { background: var(--paper); border-color: transparent; }
.btn-big { min-height: 52px; padding: .9rem 1.8rem; font-size: 1.05rem; width: 100%; max-width: 380px; }
.btn-small { min-height: 36px; padding: .4rem .95rem; font-size: var(--text-sm); border-width: 1.5px; }
.btn-block { width: 100%; }
.btn-rec { background: var(--red-600); border-color: var(--red-600); color: var(--white); }
.btn-rec:hover { background: var(--red-700); border-color: var(--red-700); color: var(--white); }
.btn-rec.recording { background: var(--white); color: var(--red-700); border-color: var(--red-600); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--red-100); } }
@media (prefers-reduced-motion: reduce) { .btn-rec.recording { animation: none; } * { transition: none !important; } }
.btn .arrow { font-family: var(--font-body); font-weight: var(--fw-bold); }

/* ---------------------------------------------------------------- сообщения и плашки */
.messages { margin: 4px 0 14px; }
/* после кнопки-формы страница остаётся на месте (keep-scroll.js) — сообщение всплывает сверху экрана */
.messages-float {
  position: fixed; z-index: 50; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px)); margin: 0; box-shadow: var(--shadow-md, 0 6px 24px rgba(0, 0, 0, .12));
  border-radius: var(--radius-md); cursor: pointer; transition: opacity .4s ease, transform .4s ease;
}
.messages-float .msg { margin: 0; }
.messages-float .msg + .msg { margin-top: 6px; }
.messages-hide { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }
.msg {
  padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 8px; font-weight: var(--fw-semibold);
  background: var(--mentor-wash); color: var(--mentor-ink); border: 1px solid var(--mentor-line);
}
.msg-success { background: var(--ok-wash); color: var(--ok-ink); border-color: var(--ok-line); }
.msg-error { background: var(--bad-wash); color: var(--bad-ink); border-color: var(--bad-line); }
.msg-warning { background: var(--attn-wash); color: var(--attn-ink); border-color: var(--attn-line); }

.alert {
  padding: 14px 16px; border-radius: var(--radius-md); margin: 0 0 16px; border: 1px solid var(--border-subtle);
  background: var(--white);
}
.alert-ok { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok-ink); }
.alert-revision { background: var(--attn-wash); border-color: var(--attn-line); color: var(--attn-ink); }
.alert-info { background: var(--mentor-wash); border-color: var(--mentor-line); color: var(--mentor-ink); }
.alert strong { color: inherit; }
.alert a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: var(--fw-semibold); }
.alert-row { display: flex; align-items: center; gap: 14px; }
.alert-row img { height: 72px; width: auto; flex: none; }
.review-comment {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.7); color: var(--ink-900);
}
.note-warn {
  background: var(--attn-wash); color: var(--attn-ink); border: 1px solid var(--attn-line);
  padding: 8px 12px; border-radius: var(--radius-sm); margin: 6px 0; font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- чипы-пилюли статусов */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xs); line-height: 1.3;
  letter-spacing: .02em; white-space: nowrap; background: var(--paper); color: var(--ink-900);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
.chip-accepted, .chip-edvibe { background: var(--ok-wash); color: var(--ok-ink); }
.chip-accepted::before, .chip-edvibe::before { background: var(--green-bright-600); opacity: 1; }
.chip-submitted { background: var(--mentor-tint); color: var(--mentor-ink); }
.chip-needs_revision { background: var(--attn-wash); color: var(--attn-ink); }
.chip-needs_revision::before { background: var(--sun-yellow); opacity: 1; }
.chip-locked { background: var(--paper-50); color: var(--grey-600); }
.chip-open { background: var(--white); color: var(--red-700); box-shadow: inset 0 0 0 1.5px var(--red-100); }
.chip-open::before { background: var(--red-600); opacity: 1; }
.chip-optional { background: var(--paper-50); color: var(--grey-600); }
.chip-optional::before { display: none; }
/* ожидание проверки: 24 / 36 / 48 ч / просрочено — мягкие подложки, яркая только точка */
.chip-wait-green { background: var(--ok-wash); color: var(--ok-ink); }
.chip-wait-green::before { background: var(--green-bright-600); opacity: 1; }
.chip-wait-yellow { background: var(--attn-wash); color: var(--attn-ink); }
.chip-wait-yellow::before { background: var(--sun-yellow); opacity: 1; }
.chip-wait-orange { background: var(--late-wash); color: var(--late-ink); }
.chip-wait-orange::before { background: var(--sun-orange); opacity: 1; }
.chip-overdue, .chip-wait-overdue { background: var(--bad-wash); color: var(--bad-ink); }
.chip-overdue::before, .chip-wait-overdue::before { background: var(--red-600); opacity: 1; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; }

/* ---------------------------------------------------------------- «Мои курсы» — карточка курса */
.card.course-card { padding: 0; overflow: hidden; }
.course-top { padding: 18px 18px 14px; display: flex; gap: 14px 18px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.course-top h2 { font-size: 1.35rem; margin: 0 0 2px; }
.course-top h2 a { color: var(--ink-900); }
.course-top h2 a:hover { color: var(--red-600); text-decoration: none; }
.course-sub { color: var(--grey-600); font-size: var(--text-sm); }
.stat { text-align: right; flex: none; }
.stat-value {
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: 2rem; line-height: 1;
  color: var(--green-900); letter-spacing: var(--ls-tight);
}
.stat-value small { font-size: .5em; font-weight: var(--fw-extra); color: var(--grey-600); letter-spacing: 0; }
.stat-label { font-size: var(--text-xs); color: var(--grey-600); margin-top: 4px; }
.course-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; }

.progress { height: 10px; background: var(--paper); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar { height: 100%; min-width: 0; background: var(--green-900); border-radius: var(--radius-pill); position: relative; }
.progress-bar::after {
  content: ""; position: absolute; right: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright);
}
.progress-bar[style*="width: 0%"]::after { display: none; }
.progress-badge { font-weight: var(--fw-semibold); white-space: nowrap; }

.person-line { display: flex; align-items: center; gap: 10px; }
.ava {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--green-900); color: var(--white); font-family: var(--font-display); font-weight: var(--fw-black); font-size: .85rem;
}
.ava.paper { background: var(--paper); color: var(--ink-900); }
.person-line .who-label { font-size: var(--text-xs); color: var(--grey-600); line-height: 1.2; }
.person-line .who-name { font-weight: var(--fw-bold); line-height: 1.25; }

.group-label {
  font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-sm); margin: 0 0 8px;
  display: flex; align-items: center; gap: 8px;
}
/* список ссылок на уроки — крупные строки, удобно нажимать пальцем */
.lesson-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lesson-links a {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--paper-50); color: var(--ink-900); font-weight: var(--fw-semibold);
  transition: background var(--dur-base) var(--ease-out);
}
.lesson-links a:hover { background: var(--paper); text-decoration: none; color: var(--ink-900); }
.lesson-links a::after { content: "→"; margin-left: auto; color: var(--red-600); font-weight: var(--fw-bold); }
.revision-box .lesson-links a { background: var(--white); }
.revision-box {
  border-radius: var(--radius-md); padding: 12px; background: var(--attn-wash); border: 1px solid var(--attn-line);
}
.revision-box .group-label { color: var(--attn-ink); }
.course-meta { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: var(--grey-600); }
.course-foot { padding: 14px 18px; border-top: 1px solid var(--border-subtle); background: var(--paper-50); }

/* ---------------------------------------------------------------- цифры в ряд (Stat) */
.stats { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 4px 0 16px; }
.stats .s { padding: 0 18px; border-left: 1px solid var(--border-subtle); }
.stats .s:first-child { padding-left: 0; border-left: 0; }
.stats .v { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.5rem; line-height: 1; color: var(--ink-900); }
.stats .v small { font-size: .55em; color: var(--grey-600); font-weight: var(--fw-extra); }
.stats .l { font-size: var(--text-xs); color: var(--grey-600); margin-top: 4px; }
.stats .s.ok .v { color: var(--green-900); }

/* ---------------------------------------------------------------- список уроков */
.lesson-list { list-style: none; padding: 0; margin: 0 0 16px; }
.lesson-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  background: var(--card, var(--white)); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); padding: 12px 14px; margin-bottom: 8px; min-height: 60px;
}
.lesson-row:has(a.lesson-link:hover) { box-shadow: var(--shadow-sm); border-color: rgba(56,59,68,.2); }
.lesson-link { flex: 1 1 160px; display: flex; align-items: center; gap: 12px; color: var(--ink-900); min-height: 36px; }
a.lesson-link { color: var(--ink-900); }
a.lesson-link:hover { text-decoration: none; color: var(--red-600); }
.lesson-title { font-weight: var(--fw-semibold); }
.lesson-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.6em; padding: 4px 8px;
  border-radius: 10px; background: var(--paper); color: var(--ink-900);
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: .85em; letter-spacing: 0; line-height: 1.1;
  vertical-align: .12em; margin-right: 4px;
}
h1 .lesson-num { font-size: .62em; padding: 6px 10px; vertical-align: .25em; }
.lesson-row .muted.small { flex-basis: 100%; padding-left: 53px; margin-top: -4px; }
.status-locked { background: var(--paper-50); box-shadow: none; }
.status-locked .lesson-title { color: var(--grey-600); }
.status-locked .lesson-num { background: var(--white); color: var(--grey-600); }
.status-accepted .lesson-num, .status-edvibe .lesson-num { background: var(--ok-wash); color: var(--ok-ink); }
.status-needs_revision .lesson-num { background: var(--attn-wash); color: var(--attn-ink); }
.status-submitted .lesson-num { background: var(--mentor-tint); color: var(--mentor-ink); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* обложка урока (content/covers.py): квадрат слева от номера; нет обложки — пустой квадрат или иконка урока */
.lesson-cover {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  object-fit: cover; background: var(--paper); font-size: 1.4rem; line-height: 1;
}
.lesson-cover.is-empty { background: var(--paper-50); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.lesson-cover-sm { width: 36px; height: 36px; border-radius: 8px; font-size: 1.1rem; }
.lesson-cover-lg { width: 96px; height: 96px; border-radius: 14px; font-size: 2.4rem; }
.status-locked .lesson-cover, .st-ahead .lesson-cover { filter: grayscale(.35); }
.lesson-row.has-cover .muted.small { padding-left: 117px; }
/* строка урока марафона (сотрудник): обложка слева на две строки — номер с названием и «когда открывается» */
.ml-main.has-cover { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.ml-main.has-cover > .lesson-cover { grid-row: span 2; }
.ml-main.has-cover > :not(.lesson-cover) { grid-column: 2; }
.cover-field { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cover-field .cover-controls { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; }
@media (max-width: 560px) {
  .lesson-cover { width: 44px; height: 44px; }
  .lesson-cover-sm { width: 32px; height: 32px; }
  .lesson-cover-lg { width: 80px; height: 80px; }
  .ml-main.has-cover { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; }
  .lesson-row.has-cover .muted.small { padding-left: 0; }
}

/* ---------------------------------------------------------------- урок: разделы и задания */
.lesson-section { margin: 26px 0; }
.section-title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.15rem;
}
.section-title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red-600); flex: none; }
.block-card {
  background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 16px; margin: 0 0 14px; position: relative;
}
.block-card.kind-text, .block-card.kind-image, .block-card.kind-audio, .block-card.kind-video { background: var(--white); }
.block-card.returned { border: 2px solid var(--attn-line); box-shadow: 0 0 0 4px var(--attn-wash); }
.block-card.mentor-task { border-color: var(--mentor-line); box-shadow: 0 0 0 3px var(--mentor-wash), var(--shadow-card); }
.block-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; }
.block-num {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--ink-900); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-extra); font-size: .85rem;
}
.block-instruction { flex: 1 1 200px; font-weight: var(--fw-bold); line-height: 1.4; padding-top: 4px; }
.block-instruction p { margin: 0 0 4px; }
.block-instruction p:last-child { margin-bottom: 0; }
/* образец под заданием (Block.example, content/markup.py render_example): мягкая плашка — тёплый светлый фон,
   полоса графита слева, метка «Beispiel:» — как пишется (с большой буквы, не заглавными: ученики списывают написание — отзыв методиста 16.10); текст обычным шрифтом, ответ после «→» — жирным.
   Цвета «верно/неверно» здесь не используются — образец не ответ ученика. */
.block-example {
  margin: 12px 0 0; padding: 8px 12px; border-left: 4px solid var(--ink-900); border-radius: var(--radius-sm);
  background: var(--paper-50); background: color-mix(in srgb, var(--paper) 45%, var(--white));
  font-weight: var(--fw-regular); line-height: 1.45; overflow-wrap: anywhere;
}
.block-example:first-child { margin-top: 0; }
.block-example-label {
  display: inline-block; margin-right: 8px; vertical-align: 1px;
  font-family: var(--font-display); font-size: .9rem; font-weight: var(--fw-extra); color: var(--grey-600);
}
.block-example-label::after { content: ":"; }
.block-example-answer { font-weight: var(--fw-bold); }
.block-head .chip-optional { margin-top: 4px; }
.block-body { min-width: 0; }
.block-footer {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.block-footer:empty { display: none; }
.check-info { font-size: var(--text-sm); color: var(--grey-600); }
.check-info.ok { color: var(--ok-ink); font-weight: var(--fw-bold); }
.check-info.ok::before { content: "✓ "; color: var(--green-bright-600); }
.check-info.bad { color: var(--bad-ink); font-weight: var(--fw-semibold); }
/* всё заполнено, «Проверить» ещё не нажата — кнопка с акцентом и подсказка рядом */
.btn-check.is-ready { background: var(--green-900); border-color: var(--green-900); color: var(--white); box-shadow: 0 0 0 4px var(--focus-ring); }
.btn-check.is-ready:hover { background: var(--ink-900); border-color: var(--ink-900); }
.check-hint { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-900); }
.check-hint[hidden] { display: none; }
/* пункт собран целиком (до проверки, без оценки) — нейтрально: зелёный в задании значит «верно» */
.ready-mark {
  display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs);
  font-weight: var(--fw-semibold); color: var(--ink-900); background: var(--paper-50); border: 1px solid var(--grey-300);
}
.lt-word > .ready-mark { margin-left: 4px; align-self: flex-start; }
/* «сохранено 13:05» у задания */
.save-line { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); }
.save-line:empty { display: none; }
.save-line.auth, .save-line.offline, .save-line.error { color: var(--bad-ink); font-weight: var(--fw-semibold); }

/* плашка «Все ответы сохранены» — плавающая пилюля под шапкой */
.save-indicator {
  position: sticky; top: calc(var(--header-h) + 8px); z-index: 10; width: fit-content; max-width: 100%;
  margin: 0 0 0 auto; font-size: var(--text-sm); font-weight: var(--fw-semibold);
}
.save-indicator:not(:empty) {
  padding: 7px 14px; border-radius: var(--radius-pill); background: var(--white);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); margin-bottom: 10px; color: var(--grey-600);
}
.save-indicator.ok { color: var(--ok-ink); background: var(--ok-wash); border-color: var(--ok-line); }
.save-indicator.offline, .save-indicator.error { color: var(--bad-ink); background: var(--bad-wash); border-color: var(--bad-line); }
.save-indicator.auth { color: var(--attn-ink); background: var(--attn-wash); border-color: var(--attn-line); }
.save-indicator a { color: inherit; text-decoration: underline; }
/* тихая строка у задания: «правилось на другом устройстве — предыдущий вариант сохранён» */
.sync-note { margin-top: 8px; }

/* ---- пропуски
   Ритм строк: у окошка поле 6px сверху и снизу (--gap-space), и строка с окошком = окошко + 12px — окошки соседних
   строк не слипаются, и когда пункт в одну строку, и когда окошко попало в начало перенесённой строки.
   Строки без окошка — обычные (line-height 2), длинное предложение на телефоне не растягивается.
   Окошко ≈ высоте строки текста (30px, на телефоне 36px), рамка 1px — не выпирает из текста (Георгий 15.10).
   Перевод строки в тексте задания — .gap-br: между пунктами «1) …», «2) …» отступ больше, чем у переноса внутри пункта. */
.gap-text { --gap-h: 30px; --gap-space: 4px; line-height: 2; }
.gap-br { display: block; height: 8px; }
.gap-br + .gap-br { height: 24px; } /* пустая строка — абзац */
.gap {
  font: inherit; font-size: 1rem; line-height: 1.3; color: var(--ink-900); padding: 2px 6px; min-height: var(--gap-h, 30px);
  margin-block: var(--gap-space, 0); border: 1px solid var(--grey-300); border-radius: 8px; min-width: 6ch; max-width: 100%; background: var(--white);
  vertical-align: baseline; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (max-width: 560px) {
  .gap-text { --gap-h: 36px; }
  .gap { font-size: 1.05rem; }
}
/* фокус в задании — графит, не зелёный: зелёный в задании значит только «верно» после проверки */
/* фокус в пропуске — без подсветки вокруг (Георгий 15.10): только рамка чуть темнее, курсор и так виден */
.gap:focus { outline: none; border-color: var(--grey-600); box-shadow: none; }
.gap:disabled { color: var(--ink-900); background: var(--paper-50); opacity: 1; -webkit-text-fill-color: var(--ink-900); }
/* «оранжевое окошко» — свободный ответ, который проверит ментор: фирменный оранжевый */
.gap-orange, .gap-orange:disabled { background: var(--mentor-wash); border-color: var(--mentor-line); border-style: dashed; }
.gap-orange:focus { border-style: solid; border-color: var(--mentor-ink); box-shadow: none; }
.gap-select { min-width: 8ch; padding-right: 4px; cursor: pointer; }
.gap-holder { display: inline-block; white-space: nowrap; max-width: 100%; }
/* с подсказкой (верный ответ, ключ ментора) пропуск может переноситься — без выезда за экран */
.gap-holder:has(.solution, .key) { white-space: normal; }
.is-ok.gap, .is-ok .gap { border-color: var(--ok-line); background: var(--ok-wash); }
.is-bad.gap { border-color: var(--bad-line); background: var(--bad-wash); }
/* после проверки — знак рядом с пропуском (не только цвет): «✓» верно, «✗» неверно, затем «→ верный ответ» */
.gap-holder:has(> .gap.is-ok, > .gap.is-bad) { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; }
.gap-holder:has(> .gap.is-ok)::after, .gap-holder:has(> .gap.is-bad)::after { order: 1; font-weight: var(--fw-black); }
.gap-holder:has(> .gap.is-ok)::after { content: "✓"; content: "✓" / "верно"; color: var(--ok-ink); }
.gap-holder:has(> .gap.is-bad)::after { content: "✗"; content: "✗" / "неверно"; color: var(--bad-ink); }
.gap-holder:has(> .gap.is-ok, > .gap.is-bad) > .solution { order: 3; margin-left: 2px; }
/* знак препинания сразу после пропуска («[gemacht].», «[gesagt]?») — в держателе пропуска: не уезжает один на новую строку;
   после проверки — сразу за «✓»/«✗» */
.gap-holder:has(> .gap.is-ok, > .gap.is-bad) > .gap-tail { order: 2; margin-left: -4px; }
.solution {
  display: inline-block; margin-left: 6px; color: var(--ok-ink); font-weight: var(--fw-bold); white-space: normal; line-height: 1.4;
}
.key {
  display: inline-block; max-width: 100%; margin-left: 6px; color: var(--ink-900); background: var(--paper); border-radius: 6px;
  padding: 1px 8px; font-size: var(--text-sm); line-height: 1.5; white-space: normal;
}
div.key { display: block; margin: 4px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); width: 100%; }

/* ---- выбор ответа */
.question { padding: 10px; border-radius: var(--radius-md); margin: 0 -10px 8px; transition: background var(--dur-base) var(--ease-out); }
.q-text { margin: 0 0 8px; font-weight: var(--fw-semibold); }
.option {
  display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 10px 14px;
  border: 2px solid var(--paper); border-radius: var(--radius-md); margin: 8px 0; background: var(--white); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.option:hover { border-color: var(--grey-300); }
.option:has(input:checked) { border-color: var(--ink-900); background: var(--paper-50); }
.option input, .tf-btn input { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; accent-color: var(--ink-900); }

/* ---- верно / неверно */
.tf-row { padding: 12px 10px; margin: 0 -10px; border-radius: var(--radius-md); border-bottom: 1px solid var(--border-subtle); }
.tf-row:last-child { border-bottom: 0; }
.tf-text { font-weight: var(--fw-medium); }
.tf-buttons { display: flex; gap: 8px; margin-top: 8px; }
.tf-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  border: 2px solid var(--paper); border-radius: var(--radius-pill); padding: 6px 16px; background: var(--white); cursor: pointer;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-sm);
}
.tf-btn:hover { border-color: var(--grey-300); }
.tf-btn:has(input:checked) { border-color: var(--ink-900); background: var(--paper-50); }

.question.is-ok, .tf-row.is-ok, .match-row.is-ok, .ow-sentence.is-ok { background: var(--ok-wash); box-shadow: inset 0 0 0 1.5px var(--ok-line); }
.question.is-bad, .tf-row.is-bad, .match-row.is-bad, .ow-sentence.is-bad { background: var(--bad-wash); box-shadow: inset 0 0 0 1.5px var(--bad-line); }
/* знак результата у пункта — не только цвет */
.question.is-ok .q-text::before, .tf-row.is-ok .tf-text::before, .match-row.is-ok .match-left::before { content: "✓ "; content: "✓ " / "верно: "; color: var(--ok-ink); font-weight: var(--fw-black); }
.question.is-bad .q-text::before, .tf-row.is-bad .tf-text::before, .match-row.is-bad .match-left::before { content: "✗ "; content: "✗ " / "неверно: "; color: var(--bad-ink); font-weight: var(--fw-black); }
.ow-sentence.is-ok .ow-line::after, .lt-word.is-ok .lt-line::after { content: "✓"; content: "✓" / "верно"; margin-left: 4px; color: var(--ok-ink); font-weight: var(--fw-black); font-size: var(--text-md); }
.ow-sentence.is-bad .ow-line::after, .lt-word.is-bad .lt-line::after { content: "✗"; content: "✗" / "неверно"; margin-left: 4px; color: var(--bad-ink); font-weight: var(--fw-black); font-size: var(--text-md); }
.question.is-ok .option, .question.is-bad .option { background: rgba(255,255,255,.75); }

/* ---- пары */
.match-row {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px; margin: 0 -10px;
  border-radius: var(--radius-md); border-bottom: 1px solid var(--border-subtle);
}
.match-row:last-child { border-bottom: 0; }
.match-left { flex: 1 1 140px; font-weight: var(--fw-semibold); }
.match-select, .filter-bar select {
  flex: 1 1 180px; max-width: 100%; font: inherit; color: var(--ink-900); padding: 8px 12px; min-height: 44px;
  border-radius: var(--radius-md); border: 2px solid var(--grey-300); background: var(--white); cursor: pointer;
}
.match-select:focus, .filter-bar select:focus { outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 4px var(--focus-ring-neutral); }
/* «соедини пары» нажатиями: карточка слева → карточка справа (или наоборот). У пары общий номер (номер строки
   слева); все пары одного спокойного цвета (графитовая рамка, светлый фон) — красный и зелёный значат «неверно / верно».
   Ряды: каждый ряд — левая карточка | правая; правая в паре встаёт напротив своей левой (grid-row ставит скрипт).
   Колонки — подсетки общей сетки, поэтому высота ряда общая: длинное определение не сдвигает соседние ряды.
   Без subgrid (старые браузеры) колонки — свои сетки: порядок тот же, ряды могут разъехаться по высоте. */
.match-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-items: stretch; }
.match-col { display: grid; grid-auto-rows: auto; gap: 8px; align-content: start; min-width: 0; }
@supports (grid-template-rows: subgrid) {
  .match-col { grid-row: 1 / -1; grid-template-rows: subgrid; }
}
.match-item { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }
.match-item > .match-card { flex: 1 1 auto; }
.match-card {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 12px; text-align: left;
  font: inherit; font-weight: var(--fw-semibold); color: var(--ink-900); line-height: 1.3; overflow-wrap: anywhere;
  border: 2px solid var(--grey-300); border-radius: 12px; background: var(--white); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.match-col-right .match-card { font-weight: var(--fw-medium); }
.match-card:hover:not(:disabled) { border-color: var(--ink-900); }
.match-card:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring-neutral); }
.match-card:disabled { cursor: default; color: var(--ink-900); }
.match-card.is-paired { border-color: var(--ink-900); background: var(--paper-50); }
.match-card.is-picked { border-color: var(--ink-900); background: var(--paper-50); box-shadow: 0 0 0 4px var(--focus-ring-neutral); transform: translateY(-2px); }
.match-board.pick-left .match-col-right .match-card:not(.is-paired),
.match-board.pick-right .match-col-left .match-card:not(.is-paired) { border-style: dashed; border-color: var(--ink-900); }
.match-card.is-ok { border-color: var(--ok-line); background: var(--ok-wash); }
.match-card.is-bad { border-color: var(--bad-line); background: var(--bad-wash); }
.match-text { flex: 1 1 auto; min-width: 0; }
.match-badges { flex: 0 0 auto; display: inline-flex; flex-wrap: wrap; gap: 4px; }
.match-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--ink-900); color: var(--white);
  font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-sm); line-height: 1;
}
.match-mark { flex: 0 0 auto; font-weight: var(--fw-extra); font-size: var(--text-md); line-height: 1; }
.match-card.is-ok .match-mark { color: var(--ok-ink); }
.match-card.is-bad .match-mark { color: var(--bad-ink); }
.match-item .solution { margin-left: 0; padding-left: 4px; font-size: var(--text-sm); }
/* длинные фразы на телефоне не помещаются в две колонки — правая колонка встаёт под левую; правые в паре идут
   в порядке своих левых (order ставит скрипт) */
@media (max-width: 559px) {
  .match-board.is-long { display: flex; flex-direction: column; gap: 14px; }
  .match-board.is-long .match-col { display: flex; flex-direction: column; }
  .match-board.is-long .match-col-right { padding-top: 12px; border-top: 1px dashed var(--grey-300); }
  .match-board:not(.is-long) { gap: 8px; }
  .match-board:not(.is-long) .match-card { padding: 8px 10px; }
}

/* ---- порядок слов */
.ow-sentence { padding: 12px; border-radius: var(--radius-md); margin-bottom: 12px; border: 1px solid var(--border-subtle); background: var(--white); }
.ow-line {
  min-height: 56px; padding: 6px 8px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  border-radius: var(--radius-md); background: var(--paper-50); border-bottom: 2px solid var(--ink-900);
}
.ow-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ow-bank:empty { display: none; }
.ow-sentence > :last-child { margin-bottom: 0; }
.ow-placeholder { color: var(--grey-600); font-size: var(--text-sm); padding-left: 4px; }
.ow-word {
  font: inherit; font-weight: var(--fw-semibold); color: var(--ink-900); padding: 6px 14px; min-height: 44px;
  border-radius: var(--radius-pill); border: 2px solid var(--grey-300); background: var(--white); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ow-word:hover:not(:disabled) { border-color: var(--ink-900); }
.ow-word:active:not(:disabled) { transform: scale(.97); }
.ow-word:disabled { cursor: default; }
.ow-word.picked { background: var(--white); border-color: var(--ink-900); }
.ow-word.err { background: var(--bad-wash); border-color: var(--bad-line); color: var(--bad-ink); }
/* первые слова на своих местах после непоследней проверки — зелёные и закреплены */
.ow-word.ok { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ink-900); }

/* ---- банк слов: «перетащи в пропуски» (gap_drag), «подпиши картинки» (image_label)
   Без перетаскивания: нажал плашку → нажал место (или наоборот); нажал занятое место — плашка вернулась.
   Плашки и места крупные — под палец ребёнка; использованные плашки бледнеют. */
.dd-hint { margin: 0 0 6px; font-size: var(--text-sm); color: var(--grey-600); } /* сейчас только «собери слово из букв» */
.dd-bank {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; margin-bottom: 14px;
  border-radius: var(--radius-md); background: var(--paper-50); border: 1px dashed var(--grey-300);
}
.dd-plate {
  font: inherit; font-weight: var(--fw-semibold); color: var(--ink-900); padding: 8px 16px; min-height: 48px; min-width: 48px;
  border-radius: var(--radius-pill); border: 2px solid var(--grey-300); background: var(--white); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.dd-plate:hover:not(:disabled) { border-color: var(--ink-900); }
.dd-plate:disabled { cursor: default; }
.dd-plate.is-picked { border-color: var(--ink-900); background: var(--paper-50); box-shadow: 0 0 0 4px var(--focus-ring-neutral); transform: translateY(-2px); }
.dd-plate.is-used { opacity: .35; }
/* места для плашек — 44px и на компьютере; ритм строк — как у пропусков (.gap-text: поле 6px у места) */
.dd-text { --gap-h: 44px; }
.dd-slot {
  font: inherit; font-weight: var(--fw-semibold); color: var(--ink-900); line-height: 1.3; vertical-align: baseline;
  min-width: 8ch; min-height: var(--gap-h, 44px); margin-block: var(--gap-space, 0); max-width: 100%; padding: 6px 12px; border: 2px dashed var(--grey-300); border-radius: 10px;
  background: var(--white); cursor: pointer; overflow-wrap: anywhere;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.dd-slot:not(.is-empty) { border-style: solid; border-color: var(--ink-900); }
.dd-slot.is-ready { border-color: var(--ink-900); background: var(--paper-50); }
.dd-slot.is-target { border-color: var(--ink-900); box-shadow: 0 0 0 4px var(--focus-ring-neutral); }
.dd-slot:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring-neutral); }
.dd-slot:disabled { cursor: default; color: var(--ink-900); }
.dd-slot.is-ok { border-color: var(--ok-line); background: var(--ok-wash); }
.dd-slot.is-bad { border-color: var(--bad-line); background: var(--bad-wash); }
.dd-slot.is-ok::after { content: " ✓"; content: " ✓" / " верно"; color: var(--ok-ink); font-weight: var(--fw-black); }
.dd-slot.is-bad::after { content: " ✗"; content: " ✗" / " неверно"; color: var(--bad-ink); font-weight: var(--fw-black); }
.dd-slot.is-example { display: inline-block; border-style: solid; border-color: var(--border-subtle); background: var(--paper-50); cursor: default; }
.il-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.il-card {
  margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; min-width: 0;
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--white);
}
.il-card.is-ok { background: var(--ok-wash); border-color: var(--ok-line); }
.il-card.is-bad { background: var(--bad-wash); border-color: var(--bad-line); }
.il-card.is-example { background: var(--paper-50); }
.il-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 8px; background: var(--paper-50); }
.il-cap { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: center; }
.il-cap .dd-slot { width: 100%; min-width: 0; }
.il-cap .solution { margin-left: 0; }
.il-badge { font-size: var(--text-xs); color: var(--grey-600); }
@media (min-width: 560px) { .il-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .il-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ---- цвета рода в заданиях (коробки «разложи по группам», артикль в «слове из букв»).
   Это содержимое задания из методики (der синий, das зелёный, die розовый), а не цвета интерфейса. */
.c-blue { --c: #2D6CC0; --c-wash: #E4EEFA; }
.c-green { --c: #2F8A3E; --c-wash: #E3F2E4; }
.c-pink { --c: #C8417F; --c-wash: #FBE5EF; }
.c-yellow { --c: #B88A00; --c-wash: #FBF2D2; }
.c-orange { --c: #C96A12; --c-wash: #FDF0E2; }
.c-grey { --c: var(--grey-600); --c-wash: var(--paper-50); }

/* ---- «разложи по группам» (sort): нажал карточку → нажал коробку */
.srt-pool {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; margin-bottom: 12px; min-height: 64px; align-items: center;
  border-radius: var(--radius-md); background: var(--paper-50); border: 1px dashed var(--grey-300);
}
.srt-card {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: inherit; font-weight: var(--fw-semibold); color: var(--ink-900); min-height: 48px; min-width: 48px; max-width: 100%;
  padding: 6px 12px; border-radius: 12px; border: 2px solid var(--grey-300); background: var(--white); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.srt-card:hover:not(:disabled) { border-color: var(--ink-900); }
.srt-card:disabled { cursor: default; }
.srt-card.is-picked { border-color: var(--ink-900); background: var(--paper-50); box-shadow: 0 0 0 4px var(--focus-ring-neutral); transform: translateY(-2px); }
.srt-card.is-ok { border-color: var(--ok-line); background: var(--ok-wash); }
.srt-card.is-bad { border-color: var(--bad-line); background: var(--bad-wash); }
/* знак результата в углу карточки — не только цвет */
.srt-card.is-ok, .srt-card.is-bad { position: relative; }
.srt-card.is-ok::after, .srt-card.is-bad::after {
  position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  color: var(--white); font-size: .75rem; font-weight: var(--fw-black); line-height: 1;
}
.srt-card.is-ok::after { content: "✓"; content: "✓" / "верно"; background: var(--green-900); }
.srt-card.is-bad::after { content: "✗"; content: "✗" / "неверно"; background: var(--red-600); }
.srt-card.is-example { background: var(--paper-50); border-style: dashed; }
.srt-img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; }
.srt-boxes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .srt-boxes { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.srt-box {
  border: 3px solid var(--c); background: var(--c-wash); border-radius: var(--radius-md); padding: 8px; min-height: 96px;
  display: flex; flex-direction: column; gap: 8px; cursor: pointer;
}
.srt-box.is-ready { box-shadow: 0 0 0 4px var(--focus-ring-neutral); }
.srt-box-head {
  font: inherit; font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-md); color: var(--c);
  background: var(--white); border: 2px solid var(--c); border-radius: var(--radius-pill); padding: 6px 14px; min-height: 44px; cursor: pointer;
}
.srt-box-head:disabled { cursor: default; }
.srt-box-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.srt-placed { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; }
.srt-placed .solution { margin-left: 0; font-size: var(--text-sm); }

/* ---- перетаскивание карточек банка — второй способ рядом с «нажал → нажал» (sort, gap_drag, image_label, match).
   Pointer Events (static/js/blocks.js и frontend/editor/src/player/cardDrag.ts): призрак карточки идёт за пальцем,
   места, куда можно положить, обведены пунктиром (is-drop-ok), место под пальцем — сплошной рамкой (is-over).
   touch-action: none ставится скриптом только на перетаскиваемую карточку — страница прокручивается как обычно. */
.dd-plate, .dd-slot, .srt-card, .match-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.srt-card img { -webkit-user-drag: none; }
.dd-ghost {
  position: fixed; z-index: 1000; margin: 0; box-sizing: border-box; pointer-events: none; cursor: grabbing;
  border-color: var(--ink-900) !important; border-style: solid !important; background: var(--white) !important;
  box-shadow: var(--shadow-md); opacity: .95; will-change: transform;
}
.dd-ghost.is-returning { transition: transform 200ms var(--ease-out); }
.is-drag-source { opacity: .35; }
.is-drag-armed { box-shadow: 0 0 0 4px var(--focus-ring-neutral); transform: scale(1.04); }
body.dd-dragging, body.dd-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
[data-drop].is-drop-ok { outline: 2px dashed var(--grey-600); outline-offset: 2px; }
[data-drop].is-drop-ok.is-over { outline: 3px solid var(--ink-900); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus-ring-neutral); }
.dd-slot.is-drop-ok.is-over, .match-card.is-drop-ok.is-over, .dd-bank.is-drop-ok.is-over, .srt-pool.is-drop-ok.is-over { background: var(--paper-50); }
/* выбрали карточку нажатием — места, куда положить, один раз «вспыхивают»: «куда положить?» */
@keyframes dd-where { 0% { box-shadow: 0 0 0 0 rgba(56, 59, 68, .32); } 100% { box-shadow: 0 0 0 12px rgba(56, 59, 68, 0); } }
.dd-slot.is-ready, .srt-box.is-ready,
.match-board.pick-left .match-col-right .match-card:not(.is-paired),
.match-board.pick-right .match-col-left .match-card:not(.is-paired) { animation: dd-where 700ms var(--ease-out) 1; }
@media (prefers-reduced-motion: reduce) {
  .dd-slot.is-ready, .srt-box.is-ready, .match-board .match-card { animation: none; }
  .dd-ghost.is-returning { transition: none; }
  .is-drag-armed { transform: none; }
}

/* ---- «собери слово из букв» (letters) */
.lt-word {
  padding: 12px; margin-bottom: 12px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--white);
  display: flex; flex-direction: column; gap: 10px;
}
.lt-word.is-ok { background: var(--ok-wash); border-color: var(--ok-line); }
.lt-word.is-bad { background: var(--bad-wash); border-color: var(--bad-line); }
.lt-word.is-example { background: var(--paper-50); }
.lt-img { width: 120px; height: 120px; object-fit: contain; border-radius: 10px; background: var(--paper-50); }
.lt-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lt-prefix { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-md); margin-right: 4px; color: var(--c, var(--ink-900)); }
.lt-slot {
  display: inline-grid; place-items: center; width: 40px; height: 46px; border-radius: 8px; border: 2px dashed var(--grey-300);
  background: var(--white); font: inherit; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--ink-900); padding: 0;
}
button.lt-slot { cursor: pointer; }
.lt-slot.is-filled { border-style: solid; border-color: var(--ink-900); }
.lt-slot.is-example { border-color: var(--border-subtle); background: var(--paper-50); }
.lt-slot.err { border-color: var(--bad-line); background: var(--bad-wash); color: var(--bad-ink); }
.lt-slot:disabled { cursor: default; color: var(--ink-900); }
.lt-bank { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lt-letter {
  width: 48px; height: 48px; border-radius: 12px; border: 2px solid var(--grey-300); background: var(--white); cursor: pointer;
  font: inherit; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--ink-900);
}
.lt-letter:hover:not(:disabled) { border-color: var(--ink-900); }
.lt-letter.is-used { opacity: .3; }
.lt-letter:disabled { cursor: default; }
.lt-reset { margin-left: auto; }

/* ---- «Словарь урока» (vocab): немецкое слово жирным (артикль в цвете рода — .c-blue/.c-green/.c-pink), формы
   бледнее, перевод; 🔊 у каждой строки, «🔊 Озвучить все» сверху. На телефоне перевод — под словом.
   Та же разметка — static/js/blocks.js (renderVocab) и frontend/editor/src/player/VocabList.vue. */
.vocab-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 10px; }
.vocab-bar[hidden] { display: none; }
.vocab-all { min-height: 44px; }
.vocab-all.is-on { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.vocab-forms-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--text-sm); color: var(--grey-600);
  cursor: pointer;
}
.vocab-forms-toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink-900); }
.vocab-note { margin: 0 0 8px; }
.vocab-list {
  list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--white); overflow: hidden;
}
.vocab-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; border-top: 1px solid var(--border-subtle); }
.vocab-row:first-child { border-top: 0; }
.vocab-row.is-playing { background: var(--paper-50); box-shadow: inset 4px 0 0 var(--ink-900); }
.vocab-play {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 2px solid var(--grey-300); background: var(--white); font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.vocab-play:hover:not(:disabled) { border-color: var(--ink-900); }
.vocab-row.is-playing .vocab-play { border-color: var(--ink-900); box-shadow: 0 0 0 4px var(--focus-ring-neutral); }
.vocab-play.is-off { visibility: hidden; }
.vocab-mute .vocab-play { display: none; }
.vocab-img { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--paper-50); }
.vocab-text {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 20px;
  align-items: baseline;
}
.vocab-de { font-size: var(--text-md); color: var(--ink-900); overflow-wrap: anywhere; }
.vocab-de b { font-weight: var(--fw-bold); }
.vocab-art { color: var(--c); }
.vocab-forms { font-size: var(--text-sm); color: var(--grey-600); }
.vocab-ru { color: var(--ink-900); overflow-wrap: anywhere; }
@media (max-width: 559px) {
  .vocab-row { gap: 10px; padding: 8px 10px 8px 8px; }
  .vocab-text { grid-template-columns: minmax(0, 1fr); }
  .vocab-ru { font-size: var(--text-sm); }
}

/* ---- картинка и звук у пункта (вопрос теста, утверждение), варианты-картинки */
.item-media { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 8px; }
.item-img { display: block; max-width: min(100%, 320px); max-height: 240px; object-fit: contain; border-radius: var(--radius-sm); background: var(--paper-50); }
.item-audio { width: 100%; max-width: 360px; height: 44px; }
.tf-text .item-media { margin-bottom: 6px; }
.choice-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
@media (min-width: 560px) { .choice-pics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice-pics .option { margin: 0; }
.option-pic { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px; }
.option-pic input { order: 2; }
.option-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 8px; background: var(--paper-50); }
.solution-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.solution-img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 2px solid var(--ok-line); background: var(--white); margin-left: 0; }
.rv-row-img { display: block; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: var(--paper-50); margin-bottom: 4px; }

/* ---- письмо */
.essay, .review-controls textarea, .review-final textarea, .reset-box textarea, .reco-card textarea {
  width: 100%; font: inherit; color: var(--ink-900); padding: 12px 14px; border-radius: var(--radius-md);
  border: 2px solid var(--grey-300); background: var(--white); line-height: var(--lh-normal);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.essay { min-height: 180px; background: var(--mentor-wash); border-color: var(--mentor-line); }
.essay:focus, .review-controls textarea:focus, .review-final textarea:focus, .reset-box textarea:focus,
.reco-card textarea:focus {
  outline: none; border-color: var(--green-900); box-shadow: 0 0 0 4px var(--focus-ring);
}
.essay:disabled { opacity: 1; color: var(--ink-900); -webkit-text-fill-color: var(--ink-900); }
.essay-view {
  white-space: pre-wrap; background: var(--paper-50); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.essay-view:empty { display: none; }
.word-counter { font-size: var(--text-sm); color: var(--grey-600); margin-top: 6px; }
.word-counter.over, .word-counter.under { color: var(--attn-ink); font-weight: var(--fw-semibold); }

/* ---- голос и фото */
.voice > .muted.small, .photo > .muted.small { margin-bottom: 4px; }
.rec-controls, .photo-controls { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; align-items: stretch; }
.rec-status:empty { display: none; }
.file-label { font-size: var(--text-sm); color: var(--grey-600); display: flex; flex-direction: column; gap: 6px; }
.file-input { max-width: 100%; font: inherit; font-size: var(--text-sm); }
.file-input::file-selector-button {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--ink-900);
  border: 1.5px solid var(--grey-300); background: var(--white); border-radius: var(--radius-pill);
  padding: 8px 14px; margin-right: 10px; cursor: pointer;
}
label.btn .file-input { display: none; }
.audio-list { display: flex; flex-direction: column; gap: 8px; }
.audio-list audio { width: 100%; max-width: 460px; }
.file-item { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.photo-grid .file-item { flex-direction: column; align-items: stretch; margin: 0; }
.photo-grid > .muted { grid-column: 1 / -1; }
.photo-grid img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); display: block; }

/* ---- материалы */
.text-material { line-height: var(--lh-relaxed); }
.text-material h3 { margin: .3em 0; }
.text-material p:last-child { margin-bottom: 0; }
.text-material table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.text-material td, .text-material th { border: 1px solid var(--border-subtle); padding: 6px 10px; }
.image-material { margin: 0; }
.image-material img, video { max-width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.audio-material audio, .task-media-wrap audio { width: 100%; }
.caption { color: var(--grey-600); font-size: var(--text-sm); margin-top: 6px; }
.video-frame { position: relative; padding-top: 56.25%; border-radius: var(--radius-md); overflow: hidden; background: var(--paper); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* «Интерактив» (embed: игра Wordwall и др.): окно в пропорциях кода вставки (по умолчанию 500:380), на компьютере
   не шире 720 px, на телефоне — во всю ширину; под окном подпись и «Открыть в новом окне ↗».
   Разметка — embedFrame() в static/js/blocks.js и EmbedFrame.vue (frontend/editor/src/player). */
.embed-material { max-width: 720px; }
.embed-frame {
  position: relative; width: 100%; aspect-ratio: 500 / 380; border-radius: var(--radius-md); overflow: hidden;
  background: var(--paper); border: 1px solid var(--border-subtle);
}
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.embed-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 6px; }
.embed-foot .caption { margin-top: 0; }
.embed-open { color: var(--red-600); font-size: var(--text-sm); white-space: nowrap; margin-left: auto; }
.task-media-wrap { margin-bottom: 12px; }
/* материал «файл PDF» — крупная строка-ссылка, удобно нажать пальцем */
.file-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border-radius: var(--radius-md);
  background: var(--paper-50); color: var(--ink-900); font-weight: var(--fw-semibold);
}
.file-link:hover { background: var(--paper); color: var(--ink-900); text-decoration: none; }
.file-badge {
  flex: none; display: inline-grid; place-items: center; padding: 6px 8px; border-radius: 8px; background: var(--red-600); color: var(--white);
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: .75rem; letter-spacing: .04em;
}
.file-name { flex: 1; min-width: 0; }
.file-open { color: var(--red-600); font-size: var(--text-sm); white-space: nowrap; }
.task-media-wrap img, .task-media-wrap video { max-width: 100%; border-radius: var(--radius-md); display: block; }
/* картинка урока (материал «картинка», картинка к заданию): на компьютере не во весь экран — не шире 560 и не выше
   420 px, по центру блока (отзыв методиста 16.10); маленькую не растягиваем, пропорции те же. На телефоне — во всю ширину, как раньше.
   Нажал — крупно поверх страницы (.img-lightbox): ZoomImage.vue у Vue, zoomable() в static/js/blocks.js. */
.image-material img.lesson-img, .task-media-wrap img.lesson-img {
  width: auto; height: auto; max-width: min(100%, 560px); max-height: 420px; object-fit: contain;
  display: block; margin-left: auto; margin-right: auto;
}
@media (max-width: 560px) {
  .image-material img.lesson-img, .task-media-wrap img.lesson-img { max-width: 100%; max-height: none; }
}
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring-neutral); }
.img-lightbox {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  padding: 5vh 5vw; box-sizing: border-box; background: rgba(56, 59, 68, .88); cursor: zoom-out;
}
.img-lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; }
.img-lightbox-img {
  display: block; max-width: 90vw; max-height: calc(90vh - 40px); width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-md); background: var(--white);
}
.img-lightbox-caption { color: var(--white); font-size: var(--text-sm); text-align: center; max-width: 90vw; }
.img-lightbox-close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--white); color: var(--ink-900); font: inherit; font-size: 1.25rem; line-height: 1;
}
.img-lightbox-close:hover { background: var(--paper-50); }
.img-lightbox-close:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .45); }

/* ---- отзыв ментора в уроке ученика */
.mentor-feedback {
  border-radius: var(--radius-md); padding: 12px 14px; margin: 0 0 12px;
  background: var(--ok-wash); color: var(--ok-ink); border: 1px solid var(--ok-line);
}
.mentor-feedback.bad { background: var(--attn-wash); color: var(--attn-ink); border-color: var(--attn-line); }
.mf-title { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-sm); margin-bottom: 4px; }
.corrected { margin-top: 8px; background: var(--white); color: var(--ink-900); border-radius: var(--radius-sm); padding: 8px 12px; }

/* ---- низ урока: отправка */
.submit-bar {
  margin: 28px 0 8px; padding: 20px 18px; background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-align: center;
}
.submit-bar > :last-child { margin-bottom: 0; }
/* остался только «← К списку уроков» — без лишней карточки */
.submit-bar:not(:has(form, p, .alert)) { background: none; border: 0; box-shadow: none; padding: 0; }
.submit-bar form { margin: 0 0 10px; }
.submit-bar .muted.small { margin: 10px 0 0; }
.submit-bar .back-link { display: inline-block; margin-top: 10px; font-weight: var(--fw-semibold); color: var(--grey-600); }
.submit-bar .back-link:hover { color: var(--ink-900); }
.submit-bar #lesson-done { text-align: left; }

/* ---------------------------------------------------------------- ментор: очередь */
.filter-bar { margin: 0 0 12px; }
.filter-bar label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: var(--fw-semibold); font-size: var(--text-sm); }
.filter-bar select { flex: 0 1 320px; }
.queue { list-style: none; padding: 0; margin: 0; }
.queue-row {
  border-radius: var(--radius-md); margin-bottom: 10px; border: 1px solid var(--border-subtle);
  background: var(--white); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.queue-row:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.queue-row a { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; color: inherit; }
.queue-row a:hover { text-decoration: none; }
.q-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.q-main strong { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 1.05rem; }
.q-lesson { color: var(--ink-900); }
.q-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--grey-600); font-size: var(--text-sm); align-items: center; }
.q-meta .chip { order: -1; }
.q-meta strong { color: var(--ink-900); }
.queue-row.wait-overdue { border-color: var(--bad-line); }
h1 .chip { vertical-align: .3em; font-size: .75rem; }

/* ---------------------------------------------------------------- ментор: проверка */
.review-controls {
  border-top: 1px solid var(--border-subtle); margin-top: 14px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px;
}
.verdict { display: flex; flex-wrap: wrap; gap: 8px; }
.verdict label {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  border: 2px solid var(--paper); border-radius: var(--radius-pill); padding: 6px 14px; cursor: pointer; background: var(--white);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-sm);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.verdict label:hover { border-color: var(--grey-300); }
.verdict input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink-900); }
.verdict .v-ok:has(input:checked) { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok-ink); }
.verdict .v-ok input { accent-color: var(--green-900); }
.verdict .v-bad:has(input:checked) { background: var(--bad-wash); border-color: var(--bad-line); color: var(--bad-ink); }
.verdict .v-bad input { accent-color: var(--red-600); }
.verdict .v-none:has(input:checked) { background: var(--paper-50); border-color: var(--grey-300); }
.corrected-input { background: var(--paper-50) !important; }
.review-controls .btn-danger { align-self: flex-start; }
.history { font-size: var(--text-sm); margin-top: 10px; color: var(--grey-600); }
.history summary, details.card summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--ink-900); }
.history ol { padding-left: 20px; margin: 8px 0; }
.review-final { text-align: left; }
.review-final label { display: block; margin-bottom: 8px; font-family: var(--font-display); }
.final-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.final-buttons .btn-big { flex: 1 1 200px; max-width: none; }
.prev-sub { border-top: 1px solid var(--border-subtle); padding: 10px 0; }
.prev-sub:first-of-type { margin-top: 10px; }
.review-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--grey-600); font-size: var(--text-sm); margin: 0 0 16px; }
.review-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--grey-300); font-size: 0; overflow: hidden; }
.feedback-verdict { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-sm); }

/* ---------------------------------------------------------------- таблицы */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  text-align: left; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
  color: var(--grey-600); padding: 8px 10px; border-bottom: 2px solid var(--ink-900); white-space: nowrap;
}
.table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.table .cell-main { font-weight: var(--fw-bold); }
.table .cell-main .muted { font-weight: var(--fw-regular); margin-top: 2px; }
.table a { font-weight: var(--fw-semibold); }
/* на телефоне строки таблицы превращаются в карточки — без горизонтальной прокрутки */
@media (max-width: 640px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; text-align: right; }
  .table-stack td[data-label]::before {
    content: attr(data-label); color: var(--grey-600); font-size: var(--text-xs); font-weight: var(--fw-semibold); flex: none;
  }
  .table-stack td.cell-main { display: block; font-size: 1rem; padding-bottom: 6px; }
  .table-stack td.cell-main::before { display: none; }
  .table-stack td[colspan] { display: block; }
  .table-stack td[colspan]::before { display: none; }
}

/* ---------------------------------------------------------------- вход и демо-вход */
.login-card { text-align: center; padding: 28px 22px; }
.login-card h1 { font-size: 1.7rem; }
.login-card > form { margin: 18px 0 12px; }
.login-card .btn-big { margin: 0 auto; }
/* вход учеников — зелёный (вход команды остаётся красным), решение Георгия 14.10.2026 */
.login-card-student .eyebrow { color: var(--green-900); }
.login-card-student .btn-primary { background: var(--green-900); border-color: var(--green-900); }
.login-card-student .btn-primary:hover { background: var(--green-800); border-color: var(--green-800); }
.demo-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; text-align: left; }
.demo-person { margin: 0; }
.demo-person .demo-btn {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-height: 64px; text-align: left;
  border: 2px solid var(--paper); border-radius: var(--radius-md); background: var(--white); cursor: pointer; font: inherit; color: var(--ink-900);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.demo-person .demo-btn:hover { border-color: var(--ink-900); box-shadow: var(--shadow-sm); }
.demo-person .demo-btn::after { content: "→"; margin-left: auto; color: var(--red-600); font-weight: var(--fw-bold); }
.demo-btn .who-name { font-family: var(--font-display); font-weight: var(--fw-extra); display: block; }
.demo-btn .who-role { font-size: var(--text-sm); color: var(--grey-600); display: block; line-height: 1.35; }
.demo-group { margin: 16px 0 0; font-weight: var(--fw-bold); font-size: var(--text-xs); letter-spacing: var(--ls-caps-wide); text-transform: uppercase; color: var(--grey-600); }

/* ---------------------------------------------------------------- телефон: узкие экраны */
@media (max-width: 560px) {
  .brand-label { display: none; }
  /* много разделов (проверка + кабинет методиста): меню — отдельной строкой под логотипом, прокрутка вбок */
  /* position: relative — иначе .sr-only (absolute) внутри меню вылезает за прокрутку и раздвигает страницу вбок */
  .topnav-many { position: relative; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; }
  .topnav-many::-webkit-scrollbar { display: none; }
  .topnav-many a, .topnav-many .linklike { white-space: nowrap; flex: none; }
  .topbar-in { padding: 6px 12px; }
  .topnav a, .topnav .linklike { padding: 8px 12px; min-height: 40px; }
  .course-top .stat { text-align: left; }
}
@media (max-width: 420px) {
  /* шапка остаётся в одну строку: подпись поменьше, пункты плотнее */
  .topbar-in { gap: 6px; }
  .brand-logo { height: 40px; }
  .topnav:not(.topnav-many) { gap: 2px; flex-wrap: nowrap; }
  .topnav a, .topnav .linklike { padding: 8px 9px; font-size: 13px; white-space: nowrap; }
  .topnav .topnav-exit { margin-left: 2px; }
  .topnav a[aria-current="page"]::before { display: none; }
}

/* ---------------------------------------------------------------- широкие экраны */
@media (min-width: 700px) {
  h1 { font-size: 2.1rem; }
  .page { padding: 24px 16px 64px; }
  .card { padding: 22px 24px; }
  .block-card { padding: 20px 22px; }
  .course-top { padding: 22px 24px 16px; }
  .course-body { padding: 0 24px 22px; }
  .course-foot { padding: 14px 24px; }
  .rec-controls, .photo-controls { flex-direction: row; align-items: center; }
  .file-label { flex-direction: row; align-items: center; }
  .tf-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
  .tf-buttons { margin-top: 0; flex: none; }
  .tf-btn { flex: none; min-width: 112px; }
  .queue-row a { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .q-main { flex-direction: column; gap: 2px; }
  .q-meta { justify-content: flex-end; }
  .q-meta .chip { order: 1; }
  .verdict label { flex: none; }
  .submit-bar { padding: 24px; }
  .hero { padding: 36px 32px 32px; }
  .illu { height: 150px; }
  .login-card { padding: 36px 36px 30px; }
}

/* «Всё сдано» в карточке курса */
.empty-done { background: var(--ok-wash); color: var(--ok-ink); border: 1px solid var(--ok-line); border-radius: var(--radius-md); padding: 12px 16px; }
.empty-done img { height: 72px; }

/* ================================================================ «Моя учёба» — главный экран ученика
   По марафону: шапка с прогрессом и ментором, потом блоки «Сделать сейчас / Ждёт проверки / Сделано / Впереди».
   Цвета статусов те же, что у чипов: доработка — солнечный, на проверке — фирменный оранжевый, принят — зелёный. */
.study { margin: 0 0 28px; }
.study + .study { padding-top: 8px; border-top: 1px dashed var(--grey-300); }
.study-head h2 { font-size: 1.3rem; margin: 0 0 12px; }
.study-head h2 a { color: var(--ink-900); }
.study-head h2 a:hover { color: var(--red-600); text-decoration: none; }
.study-progress { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 14px; margin-bottom: 10px; }
.study-count { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-display); }
.study-count .v { font-weight: var(--fw-black); font-size: 2rem; line-height: 1; color: var(--green-900); letter-spacing: var(--ls-tight); }
.study-count .of { font-weight: var(--fw-extra); color: var(--grey-600); }
.study-count .l { font-family: var(--font-body); font-size: var(--text-sm); color: var(--grey-600); margin-left: 4px; }
.study-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.study-praise { margin: 10px 0 0; font-weight: var(--fw-semibold); color: var(--ok-ink); }
.study-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.study-all { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); }

.study-block { padding: 16px; }
.study-label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.05rem; }
.study-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grey-300); flex: none; }
.block-do .study-label::before { background: var(--red-600); }
.block-wait .study-label::before { background: var(--orange-600); }
.block-done .study-label::before { background: var(--green-bright-600); }
.study-label .count {
  font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-xs); color: var(--grey-600);
  background: var(--paper-50); border-radius: var(--radius-pill); padding: 2px 9px;
}
.st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-item { border-radius: var(--radius-md); background: var(--paper-50); padding: 4px; }
.st-main { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: 10px; color: var(--ink-900); }
a.st-main:hover { background: var(--paper); text-decoration: none; color: var(--ink-900); }
.st-main .lesson-num { flex: none; margin: 0; background: var(--white); }
.st-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-title { font-weight: var(--fw-bold); line-height: 1.3; }
.st-meta { font-size: var(--text-sm); color: var(--grey-600); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; line-height: 1.35; }
.st-meta .chip { margin-right: 2px; }
.st-meta .dot { color: var(--grey-300); }
.st-note { margin: 0 10px 8px; font-size: var(--text-sm); line-height: 1.45; }
.st-note.from-mentor { background: var(--white); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 6px 8px; }
.st-note-who { font-weight: var(--fw-bold); }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px 6px; }
.st-actions .btn-light { background: var(--white); }
.st-actions .btn-light:hover { background: var(--paper); }
/* статусы строк — мягкие подложки, яркие только точки и чипы */
.st-revision { background: var(--attn-wash); box-shadow: inset 0 0 0 1px var(--attn-line); }
.st-revision a.st-main:hover { background: rgba(255,255,255,.45); }
.st-revision .lesson-num { color: var(--attn-ink); }
.st-started { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--red-100); }
/* принятый урок: ментор обнулил задание — «переделать» как доработка, «доп. практика» — спокойнее */
.st-redo { background: var(--attn-wash); box-shadow: inset 0 0 0 1px var(--attn-line); }
.st-redo .lesson-num { color: var(--attn-ink); }
.st-practice { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--grey-300); }
.st-started a.st-main:hover { background: var(--paper-50); }
.st-waiting .lesson-num { background: var(--mentor-tint); color: var(--mentor-ink); }
.st-waiting .st-note { color: var(--mentor-ink); }
.st-done .lesson-num { background: var(--ok-wash); color: var(--ok-ink); }
.st-ahead { background: transparent; padding: 0 4px; }
.st-ahead .st-main { min-height: 44px; padding: 6px; }
.st-ahead .lesson-num { background: var(--paper-50); color: var(--grey-600); }
.st-ahead .st-title { font-weight: var(--fw-semibold); color: var(--grey-600); }
.st-ahead .st-meta { color: var(--ink-900); font-weight: var(--fw-semibold); }
.block-ahead .st-list { gap: 2px; }
.chip-started { background: var(--white); color: var(--red-700); box-shadow: inset 0 0 0 1.5px var(--red-100); }
.chip-started::before { background: var(--red-600); opacity: 1; }
.st-more { margin-top: 10px; }
.st-more > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--grey-300); font-family: var(--font-display);
  font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--ink-900);
}
.st-more > summary::-webkit-details-marker { display: none; }
.st-more > summary::after { content: "▾"; color: var(--red-600); }
.st-more[open] > summary { margin-bottom: 10px; }
.st-more[open] > summary::after { content: "▴"; }
.st-empty { margin: 0; color: var(--ink-900); }
.st-edvibe { margin: 10px 0 0; font-size: var(--text-sm); color: var(--grey-600); }
.st-hint { margin: 10px 0 0; font-size: var(--text-xs); color: var(--grey-600); }
.parents-note { font-size: var(--text-sm); color: var(--grey-600); text-align: center; max-width: 52ch; margin: 8px auto 0; }
/* «Мои курсы» → «Программа»: путь ребёнка по уровням (learning/program, static/css/program.css) */
.program-entry { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; color: var(--ink-900); border: 1px solid var(--border-subtle); transition: box-shadow .15s, border-color .15s; }
a.program-entry:hover { text-decoration: none; color: var(--ink-900); box-shadow: var(--shadow-sm); border-color: rgba(56,59,68,.25); }
.program-entry > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.program-entry b { font-family: var(--font-display); font-weight: var(--fw-extra); }
.program-entry .muted { font-size: var(--text-sm); }
.program-entry-icon { font-size: 1.8rem; line-height: 1; flex: none; }
/* «Мои дети»: где ребёнок на пути по программе — у каждого ребёнка своя строка */
.family-program { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--paper-50); color: var(--ink-900); font-size: var(--text-sm); }
.family-program > span:nth-child(2) { flex: 1; min-width: 0; }
.family-program b { color: var(--red-700); }
a.family-program:hover { text-decoration: none; color: var(--ink-900); background: var(--red-100); }
.empty-done.card { margin-bottom: 16px; }

/* ================================================================ «После проверки» — разбор сдачи */
.rv-verdict { border-width: 2px; }
.rv-accepted { border-color: var(--ok-line); }
.rv-needs_revision { border-color: var(--attn-line); }
.rv-submitted { border-color: var(--mentor-line); }
.rv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.rv-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.05rem;
}
.rv-badge.ok { background: var(--ok-wash); color: var(--ok-ink); }
.rv-badge.attn { background: var(--attn-wash); color: var(--attn-ink); }
.rv-badge.wait { background: var(--mentor-tint); color: var(--mentor-ink); }
.rv-when { font-size: var(--text-sm); color: var(--grey-600); }
.rv-comment { margin: 0; }
.rv-comment blockquote {
  margin: 0 0 12px; padding: 4px 0 4px 16px; border-left: 4px solid var(--green-900);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 1.2rem; line-height: 1.45; color: var(--ink-900);
}
.rv-needs_revision .rv-comment blockquote { border-left-color: var(--sun-yellow); }
.rv-comment .who-label { font-size: var(--text-xs); color: var(--grey-600); }
.rv-comment .who-name { font-weight: var(--fw-bold); }
.rv-auto { margin: 0; }
.rv-praise { margin: 12px 0 0; font-weight: var(--fw-bold); color: var(--ok-ink); }
.rv-fix { margin-top: 16px; }
.rv-old { margin: 12px 0 0; font-size: var(--text-sm); color: var(--grey-600); }
.rv-history { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.rv-history-label { font-size: var(--text-sm); color: var(--grey-600); font-weight: var(--fw-semibold); width: 100%; }
.rv-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: var(--radius-pill);
  background: var(--white); border: 1.5px solid var(--grey-300); color: var(--ink-900); font-size: var(--text-sm);
}
.rv-tab:hover { border-color: var(--ink-900); color: var(--ink-900); text-decoration: none; }
.rv-tab[aria-current="page"] { border-color: var(--ink-900); background: var(--paper-50); font-weight: var(--fw-bold); }
.rv-tab-n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper);
  font-family: var(--font-display); font-weight: var(--fw-black);
}
.rv-tab-accepted .rv-tab-n { background: var(--ok-wash); color: var(--ok-ink); }
.rv-tab-needs_revision .rv-tab-n { background: var(--attn-wash); color: var(--attn-ink); }
.rv-tab-submitted .rv-tab-n { background: var(--mentor-tint); color: var(--mentor-ink); }
.rv-answer { margin: 0 0 12px; }
.rv-label { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--grey-600); margin-bottom: 6px; }
/* ответ с пропусками в разборе: строка выше плашки ответа на ~10px — плашки соседних строк не слипаются */
.rv-inline { white-space: pre-wrap; line-height: 2.4; margin: 0; }
.rv-gap {
  display: inline-block; padding: 0 8px; border-radius: 8px; line-height: 1.6; font-weight: var(--fw-semibold);
  background: var(--paper-50); border: 1.5px solid var(--grey-300);
}
.rv-gap.ok { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok-ink); }
.rv-gap.bad { background: var(--bad-wash); border-color: var(--bad-line); color: var(--bad-ink); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.rv-expected { display: inline-block; margin-left: 6px; color: var(--ok-ink); font-weight: var(--fw-bold); font-size: var(--text-sm); }
.rv-rows { list-style: none; margin: 0; padding: 0; }
.rv-rows li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 4px; background: var(--paper-50); }
.rv-rows li.ok { background: var(--ok-wash); }
.rv-rows li.bad { background: var(--bad-wash); }
.rv-row-label { font-size: var(--text-sm); color: var(--grey-600); }
.rv-row-value { font-weight: var(--fw-semibold); }
.rv-rows li.ok .mark { color: var(--green-bright-600); }
.rv-rows li.bad .mark, .rv-rows li.bad .rv-row-value { color: var(--bad-ink); }
.rv-rows li.bad .rv-expected { color: var(--ok-ink); }
.rv-auto-line { margin: 8px 0 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.rv-auto-line.ok { color: var(--ok-ink); }
.rv-auto-line.bad { color: var(--bad-ink); }
.rv-no-mark { margin: 0; }
.rv-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 24px 0 0; }
.rv-bottom .back-link { font-weight: var(--fw-semibold); color: var(--grey-600); }
.alert-link { margin: 10px 0 0; }
/* переход по ссылке «№3» из панели — задание не прячется под шапкой */
.block-card { scroll-margin-top: calc(var(--header-h) + 16px); scroll-margin-bottom: 120px; }

/* ================================================================ урок: липкая панель внизу
   «Осталось N заданий: №3, №5» / «Все задания сделаны — отправь урок на проверку» + кнопка.
   На телефоне кнопка всегда видна, без прокрутки до конца урока. */
.lesson-dock {
  position: sticky; bottom: 0; z-index: 15; margin: 24px -16px 0; padding: 10px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -8px 24px -14px rgba(56,59,68,.35);
  -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
}
.lesson-dock[hidden] { display: none; }
.dock-text { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dock-title { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-sm); }
.dock-sub { font-size: var(--text-sm); color: var(--grey-600); }
.dock-sub:empty { display: none; }
.dock-sub a { font-weight: var(--fw-bold); }
.lesson-dock.is-ready .dock-title { color: var(--ok-ink); }
.lesson-dock.is-ready .dock-title::before { content: "✓ "; color: var(--green-bright-600); }
.dock-form { flex: none; margin: 0; }
.dock-form .btn { min-height: 44px; padding: .6rem 1.1rem; font-size: .9rem; }
@media (max-width: 380px) {
  .dock-form { flex: 1 1 100%; }
  .dock-form .btn { width: 100%; }
}
@media (min-width: 700px) {
  .lesson-dock { margin: 28px 0 0; padding: 14px 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .study-block { padding: 18px 22px; }
  .rv-rows li { flex-direction: row; justify-content: space-between; gap: 16px; }
  .rv-row-value { text-align: right; }
}
.st-open a.st-main::after { content: "→"; margin-left: auto; padding-left: 6px; color: var(--red-600); font-weight: var(--fw-bold); }

/* ================================================================ урок: разделы (навигатор ученика)
   Разметка — frontend/editor/src/player/SectionNav.vue (редактор «Глазами ученика», приложение) и
   static/js/section-nav.js (Django-страница урока). Страница урока: .lsn-layout > .lsn-top (шапка урока),
   .lsn-aside (разделы), .lsn-main (задания, панель «Осталось…»). Разделов один — has-nav нет, всё как раньше.
   Широкий экран (≥ 1100px): липкая панель «Разделы» в левом поле, колонка урока — те же 880px на том же месте
   (на 1100–1400px она сдвигается вправо, у 1100px чуть сужается, чтобы панель поместилась — как в редакторе).
   Ширина раскладки — ширина экрана без полей (100vw − 48px, не больше 228 + 880 + 228): третья колонка
   (1fr) забирает только остаток, когда колонка урока уже 880px.
   Телефон и планшет: липкая строка под шапкой «Раздел 2 из 4 · Lesen ▾», по нажатию — тот же список;
   «Проверить», панель «Отправить» внизу, «Сообщить» и переключатель редактора она не закрывает.
   --lsn-head — настоящая высота шапки (ставит скрипт: в приложении шапка на телефоне выше --header-h). */
.lsn-layout > .lsn-aside { display: none; }
/* телефон: полоса цвета страницы во всю ширину — задания, уезжающие под строку, не просвечивают над и под ней */
.lsn-layout.has-nav > .lsn-aside {
  display: block; position: sticky; top: var(--lsn-head, var(--header-h)); z-index: 12; margin: 0 -16px; padding: 6px 16px;
  background: var(--surface-page);
}
.lsn { position: relative; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.lsn-toggle {
  display: flex; width: 100%; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; margin: 0;
  border: 0; border-radius: inherit; background: transparent; font: inherit; color: var(--ink-900); text-align: left; cursor: pointer;
}
.lsn-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.lsn-toggle-count { flex: none; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--grey-600); }
.lsn-toggle-sep { flex: none; color: var(--grey-600); }
.lsn-toggle-title { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsn-caret { flex: none; margin-left: auto; color: var(--grey-600); transition: transform var(--dur-base) var(--ease-out); }
.lsn-toggle[aria-expanded="true"] .lsn-caret { transform: rotate(180deg); }
.lsn-body {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); padding: 10px 8px;
  max-height: min(60vh, calc(100vh - var(--lsn-head, var(--header-h)) - 200px)); overflow: auto; overscroll-behavior: contain;
  background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.lsn.is-open .lsn-body { display: block; }
.lsn-head {
  margin: 0 10px 6px; font-weight: var(--fw-bold); font-size: var(--text-xs); letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase; color: var(--grey-600);
}
.lsn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* position: relative — подпись .sr-only (absolute) не вылезает из прокрутки списка */
.lsn-link {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 8px 10px;
  border-radius: var(--radius-sm); color: var(--ink-900); text-decoration: none; transition: background var(--dur-fast) var(--ease-out);
}
.lsn-link:hover { background: var(--paper-50); color: var(--ink-900); text-decoration: none; }
.lsn-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -1px; }
.lsn-item.is-current .lsn-link { background: var(--paper); }
.lsn-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: 1.3; overflow-wrap: anywhere; }
.lsn-item.is-current .lsn-title::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red-600);
  margin-right: 7px; vertical-align: .15em;
}
.lsn-count { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--grey-600); }
.lsn-item.is-done .lsn-count { color: var(--ok-ink); }
.lsn-check { color: var(--green-bright-600); font-weight: var(--fw-black); }
/* переход к разделу: заголовок не прячется под шапкой; фокус на заголовке — без рамки от мыши */
.lsn-layout .lesson-section { scroll-margin-top: calc(var(--lsn-head, var(--header-h)) + 16px); }
.lsn-layout .section-title:focus { outline: none; }
.lsn-layout .section-title:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; border-radius: 6px; }
@media (max-width: 1099.98px) {
  /* под шапкой ещё строка разделов: задания и заголовки не прячутся под неё, «Все ответы сохранены» — ниже неё */
  .lsn-layout.has-nav .lesson-section, .lsn-layout.has-nav .block-card { scroll-margin-top: calc(var(--lsn-head, var(--header-h)) + 68px); }
  .lsn-layout.has-nav .save-indicator { top: calc(var(--lsn-head, var(--header-h)) + 64px); }
}
@media (min-width: 1100px) {
  .lsn-layout.has-nav {
    --lsn-w: min(calc(100vw - 48px), 1336px);
    display: grid; grid-template-columns: 228px minmax(0, 880px) minmax(0, 1fr); grid-template-rows: auto 1fr;
    align-items: start;
    width: var(--lsn-w); margin-left: calc((100% - var(--lsn-w)) / 2);
  }
  .lsn-layout.has-nav > .lsn-top { grid-column: 2; grid-row: 1; min-width: 0; }
  .lsn-layout.has-nav > .lsn-main { grid-column: 2; grid-row: 2; min-width: 0; }
  .lsn-layout.has-nav > .lsn-aside { grid-column: 1; grid-row: 1 / span 2; top: calc(var(--lsn-head, var(--header-h)) + 16px); margin: 0 24px 0 0; padding: 0; background: none; }
  .lsn {
    padding: 14px 10px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    max-height: calc(100vh - var(--lsn-head, var(--header-h)) - 32px); overflow: auto; overscroll-behavior: contain;
  }
  .lsn-toggle { display: none; }
  .lsn-body { display: block; position: static; padding: 0; max-height: none; overflow: visible; border: 0; box-shadow: none; background: none; }
}
@media print { .lsn-layout > .lsn-aside { display: none; } }

/* ---------------------------------------------------------------- вход по email */
.email-login { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 12px; text-align: left; }
.email-label { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-sm); }
.email-input {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink-900); padding: 12px 14px; min-height: 52px;
  border: 2px solid var(--grey-300); border-radius: var(--radius-md); background: var(--white);
}
.email-input:focus { outline: none; border-color: var(--green-900); box-shadow: 0 0 0 4px var(--focus-ring); }
.email-login .btn-big { margin: 4px auto 0; }
.login-error { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bad-wash); color: var(--bad-ink); border: 1px solid var(--bad-line); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.login-note { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--paper-50); font-size: var(--text-sm); }
/* пароль входа по email (15.10): «Забыли пароль?» под кнопкой, подсказка к новому паролю */
.login-forgot { align-self: center; }
.email-hint { margin: -4px 0 0; color: var(--text-muted); font-size: var(--text-sm); }

/* ---------------------------------------------------------------- «Кабинет ученика глазами сотрудника» */
/* Нейтральная графитовая полоса под шапкой (липкая вместе с ней): чей кабинет и что это только просмотр */
.viewas-bar { background: var(--ink-900); color: var(--paper-50); }
.viewas-in {
  max-width: calc(var(--container) + 32px); margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
  font-size: var(--text-sm); line-height: 1.35;
}
.viewas-text { min-width: 0; overflow-wrap: anywhere; }
.viewas-text strong { color: var(--white); }
.viewas-ro { color: var(--grey-300); white-space: nowrap; }
.viewas-back {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: var(--radius-pill); color: var(--white);
  font-family: var(--font-display); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap;
}
.viewas-back:hover { background: rgba(255,255,255,.12); color: var(--white); }
.viewas-back:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }
/* кнопка «Кабинет ученика» в списках сотрудника */
.btn-viewas { white-space: nowrap; }
.page-head-actions { margin: 10px 0 0; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
@media (max-width: 560px) {
  /* на телефоне полоса не должна съедать экран: текст и «Вернуться» в одну строку */
  .viewas-in { flex-wrap: nowrap; padding: 6px 12px; font-size: var(--text-xs); }
  .viewas-back { min-height: 32px; padding: 4px 10px; }
}

.study-h1 { font-size: 1.5rem; margin: 2px 0 12px; }
.crumbs + .study { margin-top: 4px; }
/* закрытый урок: под замком, приглушённо, не кликается */
.lock { font-size: .85em; margin-right: 3px; filter: grayscale(1); }
.st-ahead .st-main, .lesson-row.is-locked { opacity: .78; }
.lesson-row.is-locked .lesson-title { color: var(--grey-600); }
.st-next-hint { margin: 4px 0 18px; padding: 12px 14px; border: 1px dashed var(--grey-300); border-radius: var(--radius-md); color: var(--grey-600); font-size: var(--text-sm); text-align: center; }

/* ---------- аватар: фото или буква ---------- */
img.ava-photo { object-fit: cover; background: var(--paper); display: block; }
.ava-sm { width: 30px; height: 30px; font-size: .75rem; }
.ava-lg { width: 48px; height: 48px; font-size: 1.05rem; }
.ava-xl { width: 120px; height: 120px; font-size: 2.6rem; }
.topnav-profile { display: inline-flex; align-items: center; padding: 2px !important; border-radius: 50%; }
.topnav-profile[aria-current="page"] { box-shadow: 0 0 0 2px var(--ink-900); }
.profile-card { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.profile-body { flex: 1 1 260px; min-width: 0; }
.profile-upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.profile-upload .field { margin: 0; flex: 1 1 220px; }
/* «Подключения Claude» в «Мой профиль» (коннектор, connector/) */
.claude-list { list-style: none; padding: 0; margin: 0 0 8px; }
.claude-list li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.claude-list li:last-child { border-bottom: 0; }
.claude-list form { margin: 0; }
.claude-url { overflow-wrap: anywhere; }

/* ---------- вид марафона: счётчики слева, ментор справа ---------- */
.study-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 10px; }
.study-top .study-progress { margin: 0; flex: 1 1 auto; justify-content: flex-start; }
.study-mentor { flex: none; text-align: left; }
.study-foot { justify-content: flex-end; margin-top: 10px; }
@media (max-width: 600px) {
  .study-top { flex-direction: column; align-items: flex-start; }
  .study-mentor .ava-lg { width: 36px; height: 36px; font-size: .85rem; }
}

/* ---------- «Мои курсы» строками ---------- */
.course-rows { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.course-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) minmax(150px, 210px) 20px; align-items: center; gap: 12px 20px; margin: 0; color: var(--ink-900); border: 1px solid var(--border-subtle); transition: box-shadow .15s, border-color .15s; }
a.course-row:hover { text-decoration: none; color: var(--ink-900); box-shadow: var(--shadow-sm); border-color: rgba(56,59,68,.25); }
.course-row.has-revision { border-left: 4px solid var(--attn-ink); }
.course-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.course-row-title { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 1.2rem; line-height: 1.25; }
/* карточки одной высоты: марафон, курс и ментор — в одну строку с многоточием (полностью — в подсказке) */
.course-row-main > .eyebrow, .course-row .course-row-title, .course-row-mentor .who-name, .course-row-mentor .who-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-row-mentor { min-width: 0; }
.course-row-mentor > span { min-width: 0; }
.course-row-child { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 100%; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--green-100); color: var(--green-900); font-size: var(--text-xs); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-row-progress { display: flex; flex-direction: column; gap: 6px; }
.course-row-progress .progress { display: block; height: 8px; }
.course-row-progress .progress-bar { display: block; height: 100%; }
.course-row-progress .chip { align-self: flex-start; }
.course-row-mentor .who-label, .course-row-mentor .who-name { display: block; }
/* «Проверка домашки до ДД.ММ»: последние 7 дней — тёплая подсветка, после — блёкло */
.check-line { align-self: flex-start; margin-top: 2px; font-size: var(--text-sm); color: var(--ink-900); }
.check-line.is-soon { padding: 1px 8px; border-radius: 6px; background: var(--late-wash); color: var(--late-ink); font-weight: var(--fw-bold); }
.check-line.is-over { color: var(--grey-600); font-weight: normal; }
.course-row-go { color: var(--red-600); font-weight: var(--fw-bold); font-size: 1.2rem; }
.course-row .level-flag { display: inline-block; vertical-align: .2em; padding: 2px 8px; border-radius: 6px; background: var(--green-100); color: var(--green-900); font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-xs); }
@media (max-width: 700px) {
  .course-row { grid-template-columns: minmax(0, 1fr) 20px; }
  .course-row-main { grid-column: 1 / 2; }
  .course-row-go { grid-column: 2; grid-row: 1; }
  .course-row-progress, .course-row-mentor { grid-column: 1 / -1; }
}

/* «⏳ Ждут проверки» в таблицах учеников */
.waiting-chip { white-space: nowrap; }
.waiting-none { color: var(--grey-300); font-weight: var(--fw-bold); }
.tariff-form { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
/* «Продлить проверку» одному ученику (вкладка «Ученики» марафона) */
.check-extended { margin-top: 4px; color: var(--late-ink); }
.check-extend { margin-top: 4px; }
.check-extend summary { cursor: pointer; color: var(--grey-600); }
.check-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
/* Очередь проверки: «Все ученики моих марафонов» (второй ментор марафона подменяет в отпуск) */
.queue-team { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 6px 0; font-size: var(--text-sm); cursor: pointer; }
.queue-team input { width: 18px; height: 18px; margin: 0; accent-color: var(--green-900); }

/* ---------------------------------------------------------------- переделка задания (обнулить в принятом уроке) */
.redo-alert .redo-line + .redo-line { margin-top: 10px; }
.redo-alert .redo-keep { margin: 8px 0 0; }
.redo-mark { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.redo-mark.redo-check { background: var(--attn-wash); color: var(--attn-ink); }
.redo-mark.redo-practice { background: var(--paper-50); color: var(--ink-900); }
.redo-mark .redo-comment { font-weight: var(--fw-regular); margin-top: 4px; }
.reset-box { margin-top: 10px; }
.reset-box > summary { list-style: none; display: inline-flex; cursor: pointer; }
.reset-box > summary::-webkit-details-marker { display: none; }
.reset-box .reset-body { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.reset-box textarea { width: 100%; }

/* ---------------------------------------------------------------- «Реко ментора» */
.review-final .reco-note-label { margin-top: 12px; }
.reco-card.is-due { border: 2px solid var(--attn-line); background: var(--attn-wash); }
.reco-due { margin: 0 0 8px; color: var(--attn-ink); }
.reco-progress { margin: 0 0 8px; font-weight: var(--fw-semibold); }
.reco-text { white-space: pre-wrap; }
.reco-notes-title { font-size: var(--text-sm); margin: 16px 0 4px; }
.reco-notes { padding-left: 20px; margin: 0; font-size: var(--text-sm); }
.reco-notes li { margin: 4px 0; }
.reset-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.reset-form { margin-top: 8px; }
.redo-hint { margin: 0 0 14px; }

/* ---------------------------------------------------------------- вход: «или» и «Войти через Google» */
.login-or { display: flex; align-items: center; gap: 12px; margin: 6px auto 12px; max-width: 380px; color: var(--grey-600); font-size: var(--text-sm); }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--grey-300); }
/* «Войти через Google» — основная кнопка (красная), форма email под ней — вторая (белая) */
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 4px auto 14px; }
.btn-google:hover { text-decoration: none; }
.btn-google .google-g { flex: none; color: currentColor; }
.btn-outline { background: var(--white); border-color: var(--grey-300); color: var(--ink-900); }
.btn-outline:hover { border-color: var(--ink-900); background: var(--white); color: var(--ink-900); }
/* выбор «Как войти?»: родитель — зелёная полоска слева */
.choose-list .demo-btn.choose-parent { border-left: 4px solid var(--green-900); }
.topnav .topnav-switch { color: var(--green-900); font-weight: var(--fw-bold); }

/* ---------------------------------------------------------------- кабинет родителя «Мои дети» */
.family-card { margin-bottom: 18px; padding: 18px; }
.family-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.family-ava { background: var(--green-100); color: var(--green-900); }
.family-who { flex: 1 1 200px; min-width: 0; }
.family-who h2 { margin: 0; font-size: 1.35rem; }
.family-who p { margin: 2px 0 0; overflow-wrap: anywhere; }
.family-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.family-actions .btn-study-as { background: var(--green-900); border-color: var(--green-900); color: var(--white); }
.family-actions .btn-study-as:hover { background: var(--green-800); border-color: var(--green-800); }
.family-courses { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.family-course { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 260px); gap: 12px 20px; align-items: center; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--ink-900); background: var(--white); }
a.family-course:hover { text-decoration: none; color: var(--ink-900); box-shadow: var(--shadow-sm); border-color: rgba(56,59,68,.25); }
.family-course.has-revision { border-left: 4px solid var(--attn-ink); }
.family-course-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.family-course .level-flag { display: inline-block; vertical-align: .2em; padding: 2px 8px; border-radius: 6px; background: var(--green-100); color: var(--green-900); font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-xs); }
.family-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: var(--text-sm); }
.family-fact b { font-family: var(--font-display); font-weight: var(--fw-extra); }
.family-fact.is-streak { color: var(--brown-ink); }
.family-next { font-size: var(--text-sm); color: var(--grey-600); }
.family-next b { color: var(--ink-900); }
.family-mentor { margin-top: 4px; font-size: var(--text-sm); }
.family-empty { margin: 14px 0 0; }
.family-comments { margin-top: 18px; }
.family-comments ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.family-comments a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--paper-50); color: var(--ink-900); }
.family-comments a:hover { text-decoration: none; background: var(--paper); }
.family-comment-meta { display: block; font-size: var(--text-xs); color: var(--grey-600); }
.family-comment-text { display: block; margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .family-card { padding: 14px; }
  .family-course { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .family-actions { width: 100%; }
  .family-actions .btn, .family-actions form { flex: 1 1 auto; }
  .family-actions form .btn { width: 100%; }
}

/* ---------------------------------------------------------------- «Как тебе урок?» — оценка урока в один клик
   (learning/ratings.py; ученик — templates/learning/_rate_card.html + static/js/rating.js и RateLesson.vue,
   методист — сводка у урока, панель «Оценки учеников», «Оценки уроков»; ментор — лицо у урока ученика) */
.rate-card { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card); box-shadow: var(--shadow-xs); }
.rate-card.is-quiet { padding: 0; border: 0; background: none; box-shadow: none; font-size: var(--text-sm); color: var(--grey-600); }
.rate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rate-row[hidden], .rate-details[hidden], .rate-error[hidden], .rate-link[hidden] { display: none; }
.rate-title { font-weight: var(--fw-bold); color: var(--ink-900); }
.rate-faces { display: inline-flex; gap: 8px; }
.rate-face { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--grey-300); border-radius: 50%; background: var(--white); font-size: 1.45rem; line-height: 1;
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-fast); }
.rate-face:hover { transform: scale(1.08); border-color: var(--green-900); }
.rate-face:focus-visible, .rate-chip:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }
.rate-face[aria-pressed="true"] { border-color: var(--green-900); background: var(--green-100); transform: scale(1.08); }
.rate-face:disabled { cursor: default; transform: none; }
.rate-link { color: var(--grey-600); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; }
.rate-link:hover { color: var(--ink-900); }
.rate-skip { margin-left: auto; }
.rate-details { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rate-thanks { margin: 0; font-size: var(--text-sm); color: var(--grey-600); }
.rate-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.rate-chip { min-height: 36px; padding: 4px 14px; border: 1.5px solid var(--grey-300); border-radius: var(--radius-pill);
  background: var(--white); color: var(--ink-900); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.rate-chip:hover { border-color: var(--green-900); }
.rate-chip[aria-pressed="true"] { border-color: var(--green-900); background: var(--green-100); color: var(--green-900);
  font-weight: var(--fw-semibold); }
.rate-comment { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); }
.rate-comment textarea { width: 100%; min-height: 64px; resize: vertical; }
.rate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rate-error { margin: 8px 0 0; font-size: var(--text-sm); color: var(--bad-ink); }
.rate-yours { color: var(--grey-600); }
.rate-big { font-size: 1.25rem; line-height: 1; }
.rate-quote { font-style: italic; }
/* у ментора — оценка ученика рядом со статусом урока */
.rate-mark { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--grey-600); }
.rate-mark > [aria-hidden] { font-size: 1.15rem; line-height: 1; }
/* методист: «😊 12 · 😐 3 · 😕 2» у урока, панель урока, «Оценки уроков» */
.rate-sum { white-space: nowrap; font-size: var(--text-sm); color: var(--grey-600); text-decoration: none; }
a.rate-sum:hover { color: var(--ink-900); text-decoration: underline; }
.rate-sum.is-bad { color: var(--bad-ink); font-weight: var(--fw-semibold); }
.rate-panel .stats { margin-bottom: 8px; }
.rate-panel-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.rate-panel-reasons li { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--paper-50); font-size: var(--text-sm); }
.rate-panel-reasons b { margin-left: 4px; }
.rate-comments { margin: 0; padding: 0; list-style: none; }
.rate-comments li { padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.rate-comments li:first-child { border-top: 0; }
.rate-comments .rate-comment-text { white-space: pre-line; overflow-wrap: anywhere; }
.rate-comments .rate-comment-meta { margin-top: 2px; font-size: var(--text-xs); color: var(--grey-600); }
.rate-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--text-sm); }
.rate-filter select { max-width: 100%; }
.rate-alarm .v, .rate-alarm .l { color: var(--bad-ink); }

/* ================================================================ «Занятия» (templates/learning/_classes.html, Vue —
   ClassesCard.vue): следующее занятие группы и «Войти на занятие» — выделена за 15 минут до начала */
.cl-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px; }
.cl-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cl-card .cl-title { margin: 0; }
.cl-card .cl-title::before { background: var(--red-600); }
.cl-when, .cl-meta, .cl-source { margin: 0; }
.cl-label { color: var(--grey-600); }
.cl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cl-meta > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cl-code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95em; background: var(--paper-50);
  border-radius: var(--radius-sm); padding: 2px 8px; user-select: all;
}
.cl-join { flex: none; }
.cl-url { overflow-wrap: anywhere; }
.cl-staff { margin-top: -4px; }
@media (max-width: 560px) { .cl-join { width: 100%; justify-content: center; } }

/* ---------------------------------------------------------------- проверка по пунктам и разметка письма (16.10)
   Пункты (оранжевые окошки и др.): у каждого своя рамка «верно / неверно» + комментарий (_points_review.html,
   PointsReview.vue). Письмо: пометки ментора прямо в тексте (review-marks.js, EssayMarker.vue; только чтение —
   _essay_marked.html, EssayMarked.vue). Автозадание на проверке — одна строка-итог (.auto-line). */
.points-review { display: flex; flex-direction: column; gap: 10px; }
.point-frame {
  border: 1.5px dashed var(--mentor-line); border-radius: var(--radius-md); padding: 10px 12px; background: var(--white);
  display: flex; flex-direction: column; gap: 8px;
}
.point-frame.is-ok { border-style: solid; border-color: var(--ok-line); background: var(--ok-wash); }
.point-frame.is-bad { border-style: solid; border-color: var(--bad-line); background: var(--bad-wash); }
.point-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.point-title { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-sm); color: var(--mentor-ink); }
.point-text { white-space: pre-wrap; }
.point-kept { color: var(--ok-ink); font-weight: var(--fw-semibold); }
.point-answer { display: inline-block; min-width: 3ch; padding: 1px 8px; margin: 0 2px; cursor: default; font-weight: var(--fw-semibold); }
.point-verdict label { flex: 0 1 auto; min-height: 38px; }
.point-comment { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.point-comment textarea { min-height: 38px; }
.point-mark { font-weight: var(--fw-bold); font-size: var(--text-sm); }
.point-mark.ok { color: var(--ok-ink); }
.point-mark.bad { color: var(--bad-ink); }
.point-note { font-size: var(--text-sm); }
.points-total { margin: 0; font-weight: var(--fw-semibold); color: var(--grey-600); }
.points-total.bad { color: var(--bad-ink); }
.points-total.ok { color: var(--ok-ink); }
.task-comment-label { font-weight: var(--fw-semibold); font-size: var(--text-sm); }
/* комментарий ментора у окошка в уроке ученика (blocks.js / GapsTask.vue) */
.gap-mentor-note {
  display: block; margin: 4px 0 8px; padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm);
  background: var(--attn-wash); color: var(--attn-ink); border: 1px solid var(--attn-line); white-space: pre-wrap;
}
.gap-mentor-note.ok { background: var(--ok-wash); color: var(--ok-ink); border-color: var(--ok-line); }
.gap-mentor-note::before { content: "Ментор: "; font-weight: var(--fw-bold); }
.mentor-point-notes { margin: 10px 0 0; padding-left: 20px; font-size: var(--text-sm); }

/* письмо с пометками */
.mk-essay { white-space: pre-wrap; line-height: 1.9; padding: 12px 14px; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.mk-essay.mk-editable { cursor: text; background: var(--mentor-wash); border-color: var(--mentor-line); }
.mk-error { text-decoration: underline wavy var(--red-600); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-skip-ink: none; }
.mk-fix del { color: var(--bad-ink); text-decoration-color: var(--red-600); text-decoration-thickness: 2px; }
.mk-fix ins { text-decoration: none; color: var(--ok-ink); font-weight: var(--fw-bold); margin-left: 3px; }
.mk-fix ins:empty { display: none; }
.mk-comment { background: #FFF1B8; border-radius: 3px; box-shadow: 0 0 0 1px #F4C84B inset; padding: 0 1px; }
.mk-n { font-size: .7em; font-weight: var(--fw-black); color: var(--attn-ink); margin-left: 1px; }
.mk-notes { margin: 8px 0 0; padding-left: 24px; font-size: var(--text-sm); }
.mk-notes li { margin: 2px 0; }
.mk-legend { margin: 6px 0 0; color: var(--grey-600); }
.mk-toolbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 8px; }
.mk-btn-error { text-decoration: underline wavy var(--red-600); text-underline-offset: 3px; }
.mk-btn-comment { background: #FFF1B8; }
.mk-hint { color: var(--grey-600); }
.mk-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--paper-50); }
.mk-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.mk-form-buttons { display: flex; gap: 6px; }
.mk-list { margin: 8px 0 0; padding-left: 0; list-style: none; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 4px; }
.mk-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mk-item-type { font-weight: var(--fw-bold); }
.mk-item .btn { min-height: 30px; padding: 2px 10px; }
.essay-under-marks .essay-view, .essay-under-marks textarea.essay { display: none !important; }
.essay-marked-block { margin: 0 0 12px; }
.essay-marked-block .mk-title-line { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-sm); margin: 0 0 6px; }

/* автозадание на проверке ментора */
.auto-review > summary { cursor: pointer; list-style: none; }
.auto-review > summary::-webkit-details-marker { display: none; }
.auto-line { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: baseline; padding: 6px 12px; border-radius: var(--radius-pill); font-weight: var(--fw-bold); font-size: var(--text-sm); background: var(--paper-50); color: var(--grey-600); }
.auto-line.ok { background: var(--ok-wash); color: var(--ok-ink); }
.auto-line.bad { background: var(--bad-wash); color: var(--bad-ink); }
.auto-line::before { content: "▸"; }
.auto-review[open] > .auto-line::before { content: "▾"; }
.auto-more { font-weight: var(--fw-semibold); opacity: .8; }
.auto-review .block-body { margin-top: 10px; }

/* значки статуса урока: ⏳ на проверке, ✓ принято, ↩ вернули на доработку (learning/templatetags, StatusIcon.vue) */
.status-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; font-size: .85em; font-weight: var(--fw-black); line-height: 1; flex: none; vertical-align: middle; }
.status-icon.si-submitted { background: var(--mentor-tint); color: var(--mentor-ink); }
.status-icon.si-accepted { background: var(--ok-wash); color: var(--ok-ink); }
.status-icon.si-needs_revision { background: var(--bad-wash); color: var(--bad-ink); }
.gm-status circle { stroke: var(--white); stroke-width: 1.5; }
.gm-status text { font-size: 11px; font-weight: 900; text-anchor: middle; }
.gm-status.si-submitted circle { fill: var(--mentor-tint); } .gm-status.si-submitted text { fill: var(--mentor-ink); }
.gm-status.si-accepted circle { fill: var(--ok-wash); } .gm-status.si-accepted text { fill: var(--ok-ink); }
.gm-status.si-needs_revision circle { fill: var(--bad-wash); } .gm-status.si-needs_revision text { fill: var(--bad-ink); }
.st-main .status-icon, .lesson-link .status-icon { margin: 0 2px; }
/* «Мои проверенные работы» */
.works-lesson { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-md); margin: 14px 0 6px; }
.works-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.works-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--white); color: inherit; }
.works-link-row:hover { text-decoration: none; box-shadow: var(--shadow-sm); }
.works-main { font-weight: var(--fw-semibold); flex: 1 1 auto; }
.auto-reset { margin-top: 10px; }
.mk-form[hidden], .mk-list[hidden] { display: none; }
/* «Hast du Fragen?»: вопрос ученика ментору (learning/questions.py) — в уроке (blocks.js, BlockCard.vue) и в очереди */
.question-box { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.question-send { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.question-status { font-size: var(--text-sm); color: var(--grey-600); }
.question-status.ok { color: var(--ok-ink); }
.question-status.bad { color: var(--bad-ink); }
.question-reply { border-radius: var(--radius-md); padding: 12px 14px; background: var(--ok-wash); color: var(--ok-ink); border: 1px solid var(--ok-line); }
.question-reply .qr-asked { color: var(--ink-900); margin: 0 0 8px; font-size: var(--text-sm); }
.question-reply .qr-text { white-space: pre-line; overflow-wrap: anywhere; }
.queue-subhead { font-size: var(--text-md); margin: 18px 0 10px; }
.question-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-color: var(--mentor-line); }
.question-row:hover { transform: none; }
.question-row .q-text { background: var(--mentor-wash); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--ink-900); overflow-wrap: anywhere; white-space: pre-line; }
.q-reply > summary { list-style: none; display: inline-flex; cursor: pointer; }
.q-reply > summary::-webkit-details-marker { display: none; }
.q-reply form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.q-reply textarea { width: 100%; min-height: 96px; font: inherit; padding: 10px 12px; border-radius: var(--radius-md); border: 2px solid var(--grey-300); resize: vertical; }
.q-reply textarea:focus { outline: none; border-color: var(--green-900); box-shadow: 0 0 0 4px var(--focus-ring); }