* { margin: 0; padding: 0; box-sizing: border-box; }
/* Значения оставлены как запасной вариант на случай, если savely.css почему-то
   не загрузится: без них сайт остался бы вообще без цветов. Настоящая палитра
   и ночная тема живут в tokens.css, savely.css переназначает эти же имена.
   Раньше здесь стоял оранжевый var(--accent) — при сбое загрузки он возвращался. */
/* Запасные значения на случай, если tokens.css не загрузился: сайт
   останется читаемым, пусть и в прежней гамме. Цвета ЗДЕСЬ НЕ МЕНЯТЬ
   при смене гаммы — этот файл грузится после tokens.css, и правка тут
   молча перекроет новые токены. Так уже было: заказчик поменял зелёный,
   а дневная тема осталась старой, потому что значение дублировалось
   в двух файлах. Живые значения — только в tokens.css. */
:root {
  --bg: #F6F5F0;
  --card: #FCFBF7;
  --muted: #5A665E;
  --accent-dark: #35503C;
  --green: #3F7256;
  --red: #A85454;
  --border: #D8DBD4;
  --shadow: 0 1px 2px rgba(43, 54, 48, .04), 0 8px 24px rgba(43, 54, 48, .06);
  --radius: 18px;
}
body {
  font-family: "Nunito", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  /* dvh, а не vh: на мобильном Safari 100vh считается по РАЗВЁРНУТОМУ
     окну — без адресной строки, — и страница оказывается выше экрана.
     Появляется лишняя прокрутка на пустой странице и прыжок вёрстки
     в момент, когда строка прячется. dvh считает по фактическому. */
  min-height: 100dvh;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.muted-small { color: var(--muted); font-size: var(--text-caption); font-weight: 600; }
/* ---------- шапка ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1060px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 18px;
}
.brand {
  font-family: inherit; font-size: var(--text-body); font-weight: 900; color: var(--ink);
  background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.brand-cat { font-size: var(--text-subheading); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav-btn {
  font-family: inherit; font-size: var(--text-caption); font-weight: 700; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 8px 12px; border-radius: 10px;
  transition: all .15s;
}
.nav-btn:hover { color: var(--ink); background: var(--accent-soft); }
.nav-btn.active { color: var(--accent-dark); background: var(--accent-soft); }
.badge {
  background: var(--accent); color: var(--on-accent); font-size: var(--text-caption); font-weight: 800;
  border-radius: 20px; padding: 1px 7px; margin-left: 2px;
}
.user-chip { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--text-caption); }
.level-chip {
  background: var(--ink); color: var(--paper); font-size: var(--text-caption); font-weight: 800;
  padding: 3px 9px; border-radius: 20px;
}
.link-btn {
  font-family: inherit; background: none; border: none; color: var(--muted);
  font-size: var(--text-caption); cursor: pointer; text-decoration: underline;
}
.link-btn.danger { color: var(--red); font-weight: 800; }
/* ---------- каркас ---------- */
.screen { padding: 36px 20px 80px; }
.narrow { max-width: 560px; margin: 0 auto; }
.wide { max-width: 1060px; margin: 0 auto; }
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--border); padding: 24px;
}
.btn {
  font-family: inherit; font-size: var(--text-caption); font-weight: 800; cursor: pointer;
  border-radius: 14px; padding: 13px 26px; border: none; transition: all .15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 2px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn-wide { width: 100%; }
.btn-small { font-size: var(--text-caption); padding: 9px 16px; }
/* ---------- кот ---------- */
.cat-avatar {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border-radius: 50%; box-shadow: var(--shadow);
}
.cat-big { width: 110px; height: 110px; font-size: var(--text-display); margin: 0 auto; }
.cat-mid { width: 76px; height: 76px; font-size: var(--text-heading-lg); margin: 0 auto 14px; }
.cat-small { width: 48px; height: 48px; font-size: var(--text-subheading); }
/* ---------- приветствие ---------- */
.hero { max-width: 560px; margin: 0 auto; text-align: center; }
.hero-cat { margin-bottom: 18px; }
.speech-bubble {
  position: relative; display: inline-block; margin-top: 16px;
  background: var(--surface); border: 2px solid var(--border); border-radius: 16px;
  padding: 12px 18px; font-weight: 700; font-size: var(--text-caption); box-shadow: var(--shadow);
}
.speech-bubble::before {
  content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  border: 10px solid transparent; border-bottom-color: var(--surface); border-top: none;
}
.hero h1 { font-size: var(--text-heading); font-weight: 900; line-height: 1.2; margin: 18px 0 10px; }
.hero-sub { color: var(--muted); font-size: var(--text-body-sm); font-weight: 600; margin-bottom: 14px; }
/* Выделения внутри подводки: акцент на обещании, а не на всей строке */
.hero-sub b { color: var(--ink); font-weight: 800; }
.auth-card { text-align: left; }
/* Кто вы: ученик или репетитор.
 *
 * Стоит НАД вкладками «Регистрация / Вход» и крупнее их — потому что
 * это вопрос первее. Сайт ученика и панель репетитора живут по разным
 * адресам, формы входа у них похожи, и репетитор, попавший на страницу
 * ученика, вводил верный пароль и получал «не подошло».
 *
 * Активная сторона — кнопка (мы уже здесь), неактивная — ссылка
 * на соседнюю страницу. Разметка разная намеренно: так переход
 * работает и без JS, и открывается в новой вкладке средним щелчком.
 */
.role-switch {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.role-btn {
  flex: 1; text-align: center; text-decoration: none;
  font-family: inherit; font-weight: 900; font-size: var(--text-body-sm, 15px);
  padding: 13px 10px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--border); background: var(--bg); color: var(--muted);
  transition: border-color .15s, color .15s, background .15s;
  min-height: 48px; display: flex; align-items: center; justify-content: center;
}
.role-btn:hover { color: var(--ink); border-color: var(--line-control, var(--border)); }
.role-btn.active {
  background: var(--accent-soft); border-color: var(--accent-line, var(--accent));
  color: var(--accent-dark, var(--accent)); cursor: default;
}
.role-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; background: var(--bg); border-radius: 12px; padding: 4px; }
.tab {
  flex: 1; font-family: inherit; font-weight: 800; font-size: var(--text-caption); padding: 9px;
  border: none; border-radius: 9px; background: none; color: var(--muted); cursor: pointer;
}
.tab.active { background: var(--surface); color: var(--ink); }
.auth-card label { display: block; font-weight: 800; font-size: var(--text-caption); margin-bottom: 14px; color: var(--ink); }
.auth-card input {
  display: block; width: 100%; margin-top: 6px; font-family: inherit; font-size: var(--text-caption);
  padding: 11px 14px; border: 1px solid var(--line-control); border-radius: 12px; outline: none;
  transition: border-color .15s; background: var(--bg);
}
.auth-card input:focus { border-color: var(--accent); background: var(--surface); }
.fine-print { margin-top: 12px; font-size: var(--text-caption); color: var(--muted); text-align: center; font-weight: 600; }
/* ---------- тест ---------- */
.test-intro, .test-result { text-align: center; }
.test-intro h2, .test-result h2 { font-size: var(--text-subheading); font-weight: 900; margin-bottom: 12px; }
.test-intro p { color: var(--muted); font-weight: 600; margin-bottom: 24px; line-height: 1.55; }
.progress { height: 8px; background: var(--accent-soft); border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width .25s; }
/* В карточках полоса идёт сразу под счётчиком — отступ до карточки */
.trainer-progress { margin-bottom: var(--space-12); }
.test-counter { text-align: center; color: var(--muted); font-weight: 800; font-size: var(--text-caption); margin: 10px 0 18px; }
.word-quiz-card { text-align: center; padding: 40px 24px; }
.quiz-label { color: var(--muted); font-weight: 700; font-size: var(--text-caption); margin-bottom: 10px; }
.quiz-word { font-size: var(--text-heading-lg); font-weight: 800; margin-bottom: 28px; letter-spacing: -0.5px; }
.quiz-word-small { font-size: var(--text-heading); margin-bottom: 12px; }
.quiz-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
.quiz-buttons .btn { min-width: 140px; }
.result-cards { display: flex; gap: 14px; justify-content: center; margin: 22px 0; }
.result-card { flex: 1; max-width: 220px; text-align: center; }
.result-label { color: var(--muted); font-weight: 700; font-size: var(--text-caption); }
.result-value { font-size: var(--text-heading); font-weight: 900; color: var(--accent-dark); margin: 6px 0 2px; }
.result-note { color: var(--muted); font-weight: 600; font-size: var(--text-caption); }
.savely-comment {
  background: var(--accent-soft); border-radius: 14px; padding: 14px 18px;
  font-weight: 700; margin-bottom: 24px; font-size: var(--text-caption);
}
/* ---------- главная ---------- */
.dash-head { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.dash-head .cat-avatar { margin: 0; flex-shrink: 0; }
.dash-head h2 { font-size: var(--text-subheading); font-weight: 900; }
.dash-head .muted { font-weight: 600; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.section-head h2, .section-head h3 { font-weight: 900; }
.word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.word-card { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.word-card .w-en { font-size: var(--text-body); font-weight: 900; }
.word-card .w-level { font-size: var(--text-caption); font-weight: 800; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; align-self: flex-start; }
.word-card .w-ru { color: var(--ink); font-weight: 700; }
.word-card .w-ex { color: var(--muted); font-size: var(--text-caption); font-style: italic; flex: 1; }
.word-card .btn { margin-top: 10px; font-size: var(--text-caption); padding: 8px 14px; }
.word-card .added { color: var(--green); font-weight: 800; font-size: var(--text-caption); margin-top: 10px; }
/* ---------- словарь ---------- */
.add-word-row { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
@media (max-width: 480px) {
  /* На телефоне два поля в одной строке сжимались до ~170px, и подсказка
     «слово по-английски» обрезалась на живом слове («по-английс…»).
     Столбиком поле шире — и подсказка читается, и цель нажатия больше.
     #screen-dictionary в селекторе обязателен: базовое правило для
     .add-word-row input идёт ниже по файлу и иначе побеждает. */
  #screen-dictionary .add-word-row input,
  #screen-dictionary .add-word-row select,
  #screen-dictionary .add-word-row button { flex: 1 1 100%; }
}
.add-word-row input {
  flex: 1; min-width: 160px; font-family: inherit; font-size: var(--text-caption);
  padding: 11px 14px; border: 2px solid var(--border); border-radius: 12px; outline: none; background: var(--surface);
}
.add-word-row input:focus { border-color: var(--accent); }
/* Выбор папки прямо в строке добавления слова. Тот же вид, что у полей,
   но select не растягиваем — он узкий по содержимому. */
.add-word-folder {
  font-family: inherit; font-size: var(--text-caption); padding: 11px 12px;
  border: 2px solid var(--border); border-radius: 12px; outline: none;
  background: var(--surface); color: inherit; cursor: pointer; max-width: 100%;
}
.add-word-folder:focus { border-color: var(--accent); }
.add-word-newfolder { flex: 1; min-width: 140px; }
.dict-list { display: flex; flex-direction: column; gap: 8px; }
.dict-row {
  display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 18px; box-shadow: var(--shadow);
}
.dict-row .d-en { font-weight: 900; font-size: var(--text-body-sm); min-width: 140px; }
.dict-row .d-ru { color: var(--muted); font-weight: 700; flex: 1; }
.dict-row .d-status { font-size: var(--text-caption); font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.d-status.new { background: var(--accent-soft); color: var(--accent); }
.d-status.learning { background: var(--accent-soft); color: var(--accent-dark); }
.d-status.learned { background: var(--accent-soft); color: var(--green); }
.dict-row .d-del {
  background: none; border: none; cursor: pointer; color: var(--muted); font-size: var(--text-caption);
  padding: 4px; border-radius: 8px;
}
.dict-row .d-del:hover { color: var(--red); }
.empty-state { text-align: center; padding: 40px 0; color: var(--muted); font-weight: 700; }
.empty-state p { margin-bottom: 18px; }
.empty-state h2 { color: var(--ink); margin-bottom: 10px; font-weight: 900; }
/* ---------- карточки ---------- */
.flashcard { perspective: 1000px; cursor: pointer; }
.flashcard-inner {
  position: relative; width: 100%; height: 260px;
  transition: transform .45s; transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
.flashcard-back { transform: rotateY(180deg); background: var(--accent-soft); }
.flip-hint { color: var(--muted); font-size: var(--text-caption); font-weight: 700; }
.flash-example { color: var(--muted); font-style: italic; font-weight: 600; font-size: var(--text-caption); }
.quiz-buttons .btn:disabled { opacity: .45; cursor: default; transform: none; }
.goal-card .xp-bar-fill.done { background: var(--green); }
.lb-card { padding: 14px 18px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-weight: 700; font-size: var(--text-caption); }
.lb-row + .lb-row { border-top: 1px solid var(--border); }
.lb-place { min-width: 26px; font-size: var(--text-caption); }
.lb-name { flex: 1; }
.lb-xp { color: var(--muted); font-weight: 800; }
.lb-me { color: var(--accent-dark); }
.lb-me .lb-xp { color: var(--accent-dark); }
/* ---------- награды ---------- */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ach-card {
  padding: 16px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px; opacity: .62;
}
.ach-card.ach-done { opacity: 1; }
.ach-icon {
  width: 56px; height: 56px; border-radius: 18px; font-size: var(--text-heading-sm);
  display: flex; align-items: center; justify-content: center;
}
.ach-name { font-size: var(--text-caption); font-weight: 900; }
.ach-desc { font-size: var(--text-caption); color: var(--muted); font-weight: 600; line-height: 1.35; }
.ach-got { font-size: var(--text-caption); font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.ach-progress { font-size: var(--text-caption); font-weight: 800; color: var(--muted); }
.ach-card .xp-bar { width: 100%; margin: 4px 0 0; }
.ach-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 200;
  transform: translate(-50%, 140%); transition: transform .38s cubic-bezier(.2,.9,.3,1.2);
  display: flex; align-items: center; gap: 12px; max-width: 92vw;
  background: var(--ink); color: var(--surface); border-radius: 18px;
  padding: 12px 20px 12px 14px; box-shadow: 0 10px 34px rgba(0,0,0,.28);
}
.ach-toast.show { transform: translate(-50%, 0); }
.ach-toast-icon {
  width: 44px; height: 44px; border-radius: 12px; font-size: var(--text-subheading);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ach-toast b { display: block; font-size: var(--text-caption); }
.ach-toast i { display: block; font-size: var(--text-caption); opacity: .75; font-style: normal; }
/* ---------- домашка у ученика ---------- */
.invite-note {
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 700;
  border-radius: 14px; padding: 12px 18px; margin-bottom: 18px; font-size: var(--text-caption);
}
.hw-card { padding: 16px 20px; margin-bottom: 26px; border-left: 5px solid var(--accent); }
.hw-card.hw-done { border-left-color: var(--green); }
.hw-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hw-label { font-weight: 800; font-size: var(--text-caption); color: var(--accent-dark); text-transform: uppercase; letter-spacing: .4px; }
.hw-due { font-weight: 700; font-size: var(--text-caption); color: var(--muted); }
.hw-title { font-weight: 900; font-size: var(--text-body-sm); margin: 6px 0 10px; }
/* Вид задания под названием: «Викторина · 10 вопросов» */
.hw-kind { color: var(--muted); font-weight: 700; font-size: var(--text-caption); margin: -6px 0 10px; }
.hw-card .btn { margin-top: 12px; }
/* ---------- образы слов ---------- */
.word-art {
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; line-height: 1; flex-shrink: 0;
  background: var(--accent-soft);
}
.word-art-big { width: 92px; height: 92px; font-size: var(--text-display); border-radius: 24px; margin: 0 auto 14px; }
.word-art-mid { width: 76px; height: 76px; font-size: var(--text-heading-lg); border-radius: 18px; margin: 0 auto 16px; }
.word-art-small { width: 46px; height: 46px; font-size: var(--text-subheading); border-radius: 12px; }
.word-art-tiny { width: 34px; height: 34px; font-size: var(--text-body); border-radius: 12px; }
.w-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.w-head .w-level { align-self: center; }
/* ---------- слово дня ---------- */
.wod-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; margin-bottom: 26px;
}
.wod-label { font-weight: 800; font-size: var(--text-caption); color: var(--accent-dark); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.wod-main { display: flex; align-items: center; gap: 6px; }
.wod-word { font-weight: 900; font-size: var(--text-body); }
.wod-tr { font-weight: 700; color: var(--muted); }
.wod-card .w-ex { flex: 1; min-width: 160px; }
.wod-card .added { color: var(--green); font-weight: 800; font-size: var(--text-caption); }
/* ---------- словарь: поиск и детали ---------- */
.dict-controls { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.dict-controls input {
  flex: 1; min-width: 180px; font-family: inherit; font-size: var(--text-caption);
  padding: 10px 14px; border: 2px solid var(--border); border-radius: 12px; outline: none; background: var(--surface);
}
.dict-controls input:focus { border-color: var(--accent); }
.dict-filters { display: flex; gap: 6px; }
.dict-filter.active { background: var(--accent); color: var(--surface); }
.dict-row { cursor: pointer; }
.dict-detail {
  background: var(--accent-soft); border-radius: 12px; padding: 10px 18px;
  font-size: var(--text-caption); font-weight: 600; color: var(--ink); margin: -4px 8px 4px;
}
.dict-detail p { margin: 4px 0; }
/* ---------- чат ---------- */
.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 140px); min-height: 420px; }
.chat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.chat-head-info { flex: 1; }
#voice-mode-btn.voice-active {
  background: var(--accent); color: var(--surface); border-color: var(--accent);
  animation: typingPulse 1.4s ease-in-out infinite;
}
.mic-btn, .stt-lang-btn {
  font-family: inherit; cursor: pointer; border: 2px solid var(--border);
  background: var(--surface); border-radius: 14px; transition: all .15s;
}
.mic-btn { font-size: var(--text-body); padding: 8px 13px; }
.mic-btn:hover, .stt-lang-btn:hover { border-color: var(--accent); }
.mic-btn.listening {
  background: var(--surface-alt); border-color: var(--red);
  animation: micPulse 1s ease-in-out infinite;
}
@keyframes micPulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(224,91,91,.15); } }
.stt-lang-btn { font-size: var(--text-caption); font-weight: 800; color: var(--muted); padding: 8px 10px; }
.msg-say {
  background: none; border: none; cursor: pointer; font-size: var(--text-caption);
  padding: 0 0 0 6px; opacity: .6; vertical-align: middle;
}
.msg-say:hover { opacity: 1; }
.voice-settings { padding: 16px 18px; margin-bottom: 14px; }
.vs-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.vs-row label { font-weight: 800; font-size: var(--text-caption); min-width: 130px; }
.vs-row select {
  flex: 1; min-width: 160px; font-family: inherit; font-size: var(--text-caption); font-weight: 600;
  padding: 8px 10px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); outline: none;
}
.vs-row select:focus { border-color: var(--accent); }
.vs-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.chat-box {
  flex: 1; overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.msg { max-width: 80%; padding: 10px 15px; border-radius: 16px; font-weight: 600; font-size: var(--text-caption); line-height: 1.45; white-space: pre-wrap; }
.msg-cat { background: var(--accent-soft); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg-user { background: var(--ink); color: var(--surface); border-bottom-right-radius: 4px; align-self: flex-end; }
.msg-typing { color: var(--muted); animation: typingPulse 1.1s ease-in-out infinite; }
@keyframes typingPulse { 50% { opacity: .45; } }
.chat-chips { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.chip {
  font-family: inherit; font-size: var(--text-caption); font-weight: 700; color: var(--accent-dark);
  background: var(--accent-soft); border: none; border-radius: 20px; padding: 7px 14px; cursor: pointer;
}
.chip:hover { background: var(--accent-soft); }
.chat-input-row { display: flex; gap: 10px; }
.chat-input-row input {
  /* min-width: 0 обязателен: flex-поле по умолчанию не сжимается уже
     содержимого, и на телефоне подсказка обрезалась на «Напиши или скажи С…» */
  flex: 1; min-width: 0; font-family: inherit; font-size: var(--text-caption); padding: 12px 16px;
  border: 2px solid var(--border); border-radius: 14px; outline: none; background: var(--surface);
}
.chat-input-row input:focus { border-color: var(--accent); }
.chat-input-row .btn { padding: 12px 20px; }
/* ---------- очки, звания, статистика ---------- */
.xp-chip {
  background: var(--accent-soft); color: var(--accent-dark); font-size: var(--text-caption);
  font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.streak-chip {
  background: var(--surface-alt); color: var(--red); font-size: var(--text-caption);
  font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 30px;
}
.stat-card { padding: 16px 18px; }
.stat-label { color: var(--muted); font-weight: 800; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .4px; }
.stat-value { font-weight: 900; font-size: var(--text-subheading); margin: 4px 0 2px; }
.stat-unit { font-size: var(--text-caption); font-weight: 700; color: var(--muted); }
.stat-note { color: var(--muted); font-weight: 600; font-size: var(--text-caption); }
.xp-bar { height: 7px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; margin: 8px 0 6px; }
.xp-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.xp-earned { color: var(--accent-dark); font-weight: 900; font-size: var(--text-body); margin-bottom: 8px; }
.say-btn {
  background: none; border: none; cursor: pointer; font-size: var(--text-caption);
  padding: 2px 4px; border-radius: 8px; vertical-align: middle;
}
.say-btn:hover { background: var(--accent-soft); }
/* ---------- тренировки ---------- */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ex-card {
  font-family: inherit; text-align: left; cursor: pointer; padding: 18px;
  display: flex; flex-direction: column; gap: 4px; transition: all .15s;
}
.ex-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.ex-icon { font-size: var(--text-heading-sm); }
.ex-name { font-weight: 900; font-size: var(--text-caption); color: var(--ink); }
.ex-desc { font-weight: 600; font-size: var(--text-caption); color: var(--muted); }
.ex-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ex-head h2 { font-weight: 900; font-size: var(--text-subheading); }
.ex-hint { text-align: center; margin-bottom: 14px; }
.mcq-options { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mcq-option {
  font-family: inherit; font-size: var(--text-caption); font-weight: 700; color: var(--ink);
  background: var(--bg); border: 2px solid var(--border); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; text-align: left; transition: all .12s;
}
.mcq-option:hover { border-color: var(--accent); }
.mcq-option.right { background: var(--accent-soft); border-color: var(--green); color: var(--green); }
.mcq-option.wrong { background: var(--surface-alt); border-color: var(--red); color: var(--red); }
.pairs-wrap { display: flex; gap: 12px; }
.pairs-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pair-item {
  font-family: inherit; font-size: var(--text-caption); font-weight: 700; color: var(--ink);
  background: var(--surface); border: 2px solid var(--border); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; transition: all .12s; text-align: center;
}
.pair-item:hover { border-color: var(--accent); }
.pair-item.sel { border-color: var(--accent); background: var(--accent-soft); }
.pair-item.done { opacity: .35; border-color: var(--green); background: var(--accent-soft); pointer-events: none; }
.pair-item.bad { border-color: var(--red); background: var(--surface-alt); }
.type-input {
  display: block; width: 100%; margin: 14px auto 0; font-family: inherit; font-size: var(--text-body-sm);
  font-weight: 700; text-align: center; padding: 12px 14px;
  border: 2px solid var(--border); border-radius: 12px; outline: none; background: var(--bg);
}
.type-input:focus { border-color: var(--accent); background: var(--surface); }
.type-area { text-align: left; font-weight: 600; font-size: var(--text-caption); resize: vertical; }
.type-feedback { margin-top: 12px; font-weight: 700; font-size: var(--text-caption); min-height: 20px; }
.type-feedback.ok { color: var(--green); }
.type-feedback.err { color: var(--red); }
.scramble-answer {
  font-size: var(--text-heading-sm); font-weight: 900; letter-spacing: 3px; margin: 6px 0 16px; min-height: 40px;
}
/* Ответ-фраза: разрядка в 3px хороша для букв, но рвёт слова */
.scramble-answer.phrase { letter-spacing: 2px; font-size: var(--text-heading-sm); line-height: 1.4; }
/* Зазор между словами фразы. Буквы стоят с разрядкой в 2–3 пикселя, и
   обычный пробел на её фоне не читается: «bearout» и «bear out» выглядят
   одинаково. Отступ заметно больше межбуквенного — граница слов видна
   сразу, но строка не распадается на две. */
.scr-word + .scr-word { margin-left: 14px; }
.scr-word { display: inline-block; min-width: 4px; }
.scr-gap { font-style: normal; color: var(--muted); opacity: .45; }
.scramble-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.scr-tile {
  font-family: inherit; font-size: var(--text-body); font-weight: 900; color: var(--ink);
  background: var(--surface); border: 2px solid var(--border); border-radius: 10px;
  min-width: 44px; padding: 9px 12px; cursor: pointer; transition: all .12s;
}
.scr-tile:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.scr-tile:disabled { opacity: .25; cursor: default; }
.scr-tile.sel { border-color: var(--accent); background: var(--accent-soft); }
.pool-note-extra { opacity: .85; }
.blitz-bar {
  display: flex; justify-content: space-between; font-weight: 800; font-size: var(--text-caption);
  margin-bottom: 10px; color: var(--muted);
}
.blitz-bar b { color: var(--accent-dark); font-size: var(--text-body-sm); }
.cat-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.cat-word { font-size: var(--text-caption); }
.cat-boxes { display: flex; gap: 12px; }
.cat-box {
  flex: 1; background: var(--surface); border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 14px; min-height: 140px; cursor: pointer; transition: all .12s;
}
.cat-box:hover { border-color: var(--accent); }
.cat-box.bad { border-color: var(--red); background: var(--surface-alt); }
.cat-box-title { font-weight: 900; text-align: center; margin-bottom: 10px; }
.cat-box-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cat-chip {
  background: var(--accent-soft); color: var(--green); font-weight: 800; font-size: var(--text-caption);
  border-radius: 20px; padding: 4px 10px;
}
.ws-grid { display: grid; gap: 4px; max-width: 420px; margin: 0 auto; }
.ws-cell {
  font-family: inherit; font-size: var(--text-caption); font-weight: 800; text-transform: uppercase;
  aspect-ratio: 1; background: var(--surface); border: 2px solid var(--border); border-radius: 8px;
  cursor: pointer; color: var(--ink); transition: all .1s; padding: 0;
}
.ws-cell:hover { border-color: var(--accent); }
.ws-cell.sel { background: var(--accent-soft); border-color: var(--accent); }
.ws-cell.found { background: var(--accent-soft); border-color: var(--green); color: var(--green); }
.ws-target.ws-done { text-decoration: line-through; color: var(--green); }
.cw-grid { display: grid; gap: 3px; max-width: 460px; margin: 0 auto 16px; }
.cw-cell { position: relative; aspect-ratio: 1; }
.cw-cell::before {
  content: attr(data-num); position: absolute; top: 1px; left: 3px;
  font-size: var(--text-caption); font-weight: 800; color: var(--accent-dark); z-index: 1;
}
/* Клетка — div с буквой; печатает скрытый «пульт» .cw-ctl (см. crossword
   в exercises.js). Подсветка: .in-word — клетки текущего слова, .active —
   куда встанет следующая буква. */
.cw-cell {
  display: flex; align-items: center; justify-content: center; cursor: text; user-select: none;
  font-family: inherit; font-size: var(--text-caption); font-weight: 800; text-transform: uppercase;
  border: 2px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink);
}
.cw-cell.in-word { background: var(--accent-soft); }
.cw-cell.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cw-cell.ok { background: var(--accent-soft); border-color: var(--green); }
.cw-cell.err { background: var(--surface-alt); border-color: var(--red); }
.cw-scroll { position: relative; }
.cw-ctl {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0;
  border: 0; padding: 0; margin: 0; font-size: 16px;   /* 16px — iOS не зумит поле */
}
.cw-empty { aspect-ratio: 1; }
.cw-clues { max-width: 460px; margin: 0 auto 14px; display: flex; flex-direction: column; gap: 2px; }
.cw-clue {
  font-family: inherit; font-weight: 700; font-size: var(--text-caption); text-align: left;
  background: none; border: none; color: var(--ink); cursor: pointer;
  padding: 6px 10px; border-radius: 10px;
}
.cw-clue:hover { background: var(--surface-alt); }
.cw-clue.active { background: var(--accent-soft); }
.cw-current {
  max-width: 460px; margin: 0 auto 10px; min-height: 1.5em; text-align: center;
  font-weight: 800; font-size: var(--text-body-sm); line-height: 1.4;
}
/* Страница не должна ездить вбок. Никогда.
 *
 * Репетитор прислал скриншот: панель уехала влево, часть интерфейса
 * за краем. Воспроизвести в Chrome на пяти ширинах не удалось —
 * значит виновата либо особенность Safari, либо масштаб страницы,
 * и в обоих случаях искать причину по одному скриншоту дороже, чем
 * закрыть саму возможность.
 *
 * overflow-x: clip, а не hidden: hidden создаёт контейнер прокрутки
 * и ломает position: sticky (у нас на нём держится шапка панели).
 * Для старых браузеров ниже лежит запасное правило.
 */
html { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}
/* Длинное слово без пробелов — вторая классическая причина такой
   поездки: адрес почты или ссылка в карточке ученика. */
body { overflow-wrap: break-word; }

/* ---------- адаптив ---------- */
@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  /* flex-basis: 100% обязателен — базовое `flex: 1` даёт basis 0%,
     из-за чего меню не переносится на свою строку и уезжает за экран */
  /* Переносим пункты на вторую строку вместо горизонтальной прокрутки:
     при скролле «Награды» и «Чат с Савелием» уезжали за край, и ученик
     о них просто не узнавал — подсказки, что можно листать, не было */
  .nav {
    order: 3; flex: 1 0 100%; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 2px 4px; padding-bottom: 2px;
  }
  /* Палец ребёнка на телефоне промахивается по мелким целям.
     Держим область нажатия около 44px, не раздувая сам текст. */
  .nav-btn { white-space: nowrap; font-size: var(--text-caption); padding: 11px 12px; }
  .link-btn { padding: 12px 6px; margin: -12px -6px; }
  .stat-note .link-btn { display: inline-block; }
  .btn-small { padding: 11px 16px; }
  .word-card .btn { padding: 11px 14px; }
  .user-chip span#user-name-chip { display: none; }
  .hero h1 { font-size: var(--text-subheading); }
  .quiz-word { font-size: var(--text-heading); }
  .result-cards { flex-direction: column; align-items: center; }
  .result-card { width: 100%; max-width: none; }
  /* Шесть карточек по одной мерке занимали два экрана, а звание
     переносилось на три строки. На телефоне ужимаем всё разом. */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 12px 13px; }
  .stat-label { font-size: var(--text-caption); letter-spacing: .3px; }
  .stat-value { font-size: var(--text-body); margin: 2px 0 1px; }
  .stat-note { font-size: var(--text-caption); line-height: 1.35; }
  .dash-head { gap: 12px; margin-bottom: 20px; }
  .dash-head h2 { font-size: var(--text-body); }
  .dash-head .cat-avatar { width: 52px; height: 52px; font-size: var(--text-subheading); }
  .ach-grid { grid-template-columns: repeat(2, 1fr); }
  .pair-item { font-size: var(--text-caption); padding: 10px 6px; }
  .ws-cell { font-size: var(--text-caption); border-radius: 6px; }
  .cw-cell { font-size: var(--text-caption); }
  .cat-boxes { flex-direction: column; }
}
/* сообщение от репетитора у ученика */
#tutor-msg-box { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.tmsg-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px;
  border-left: 5px solid var(--muted);
}
.tmsg-card.tmsg-new { border-left-color: var(--accent); background: var(--surface-alt); }
.tmsg-icon { font-size: var(--text-subheading); }
.tmsg-from { font-weight: 800; font-size: var(--text-caption); color: var(--accent-dark);
             text-transform: uppercase; letter-spacing: .4px; }
.tmsg-text { font-weight: 700; margin-top: 3px; }
.code-value { font-size: var(--text-body); letter-spacing: 1px; color: var(--accent-dark); user-select: all; }
.demo-note {
  background: var(--surface-alt); color: var(--muted); font-weight: 700; font-size: var(--text-caption);
  border-radius: 14px; padding: 12px 18px; margin-bottom: 18px; line-height: 1.5;
}
/* --- Проверка домашки по фото --- */
.photo-cta { text-align: center; }
.photo-cta-text {
  color: var(--muted); font-weight: 700; font-size: var(--text-caption);
  line-height: 1.5; margin-bottom: 14px;
}
.photo-card { border-left: 4px solid var(--accent); }
.photo-verdict { margin-top: 4px; }
.photo-summary { font-weight: 700; line-height: 1.55; margin-bottom: 8px; }
.photo-praise {
  color: var(--green); font-weight: 800; font-size: var(--text-caption);
  line-height: 1.5; margin-bottom: 8px;
}
.photo-mistakes-head {
  font-weight: 900; font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin: 12px 0 8px;
}
.photo-mistakes { list-style: none; display: grid; gap: 10px; }
.photo-mistakes li {
  background: var(--surface-alt); border-radius: 14px; padding: 11px 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.m-wrong { color: var(--red); font-weight: 800; text-decoration: line-through; }
.m-arrow { color: var(--muted); font-weight: 900; }
.m-right { color: var(--green); font-weight: 900; }
.m-why {
  flex: 1 0 100%; color: var(--muted); font-weight: 600;
  font-size: var(--text-caption); line-height: 1.45;
}
.photo-unreadable p { line-height: 1.55; }
/* --- Задание текстом и чтение вслух --- */
.hw-task { line-height: 1.55; font-weight: 600; margin: 8px 0 4px; white-space: pre-wrap; }
.hw-reading { background: var(--surface-alt); border-radius: 14px; padding: 14px 16px; margin-top: 12px; }
.hw-reading-label { font-weight: 900; font-size: var(--text-caption); margin-bottom: 6px; }
.hw-reading-text { font-size: var(--text-body-sm); line-height: 1.6; margin-bottom: 12px; }
.rd-result { margin-top: 12px; }
.rd-score { font-size: var(--text-subheading); font-weight: 900; }
.rd-score span { font-size: var(--text-caption); font-weight: 700; color: var(--muted); }
.rd-comment { font-weight: 700; margin: 4px 0 10px; line-height: 1.5; }
.rd-marked { line-height: 1.9; font-size: var(--text-caption); }
.rd-ok { color: var(--ink); }
.rd-wrong { color: var(--red); font-weight: 800; text-decoration: underline wavy var(--red); }
.rd-missed { color: var(--ink-soft); font-weight: 800; opacity: .65; text-decoration: line-through; }
.vs-hint {
  background: var(--accent-soft); color: var(--ink-soft); font-weight: 700; font-size: var(--text-caption);
  line-height: 1.5; border-radius: 12px; padding: 11px 14px; margin-bottom: 12px;
}

/* Защита от прокликивания: варианты открываются после паузы на чтение —
   пока она идёт, они бледные и не нажимаются (см. runMCQ). Появление
   плавное, чтобы читалось как «варианты появляются», а не «сломалось». */
.mcq-option { transition: all .12s, opacity .35s ease; }
.mcq-options.mcq-wait .mcq-option { opacity: .38; pointer-events: none; }
.rushed-note {
  color: var(--red); font-weight: 700; line-height: 1.5; max-width: 34em; margin: 4px auto 10px;
}

/* Разбор ответов после подхода — как в Wordwall: все вопросы, что ответил
   ученик и как надо. Раскрыт сразу, если были ошибки. */
.ex-review { max-width: 34rem; margin: 14px auto 6px; text-align: left; }
.ex-review summary { cursor: pointer; font-weight: 800; font-size: var(--text-caption); color: var(--accent-dark); }
.ex-review-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ex-review-list li { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.ex-review-list li.bad { border-color: var(--red); }
.ex-review-mark { flex: none; display: inline-flex; margin-top: 3px; color: var(--green); }
.ex-review-list li.bad .ex-review-mark { color: var(--red); }
.ex-review-q { font-weight: 700; font-size: var(--text-caption); line-height: 1.4; }
.ex-review-a { font-size: var(--text-caption); font-weight: 600; margin-top: 2px; }
.ex-review-a s { color: var(--red); }
.ex-review-a b { color: var(--green); }
.ex-review-why { font-size: var(--text-caption); color: var(--muted); font-weight: 600; margin-top: 2px; line-height: 1.4; }
/* Выражения из подхода — чипы «+ give up · сдаваться» */
.phrase-take-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; }
.phrase-take-chip i { color: var(--muted); font-style: normal; font-weight: 600; margin-left: 4px; }
.phrase-take-chip.added { background: var(--accent-soft); border-color: var(--green); color: var(--green); }
/* Отбор слов на тренировку в словаре */
.dict-pick-row { margin-top: 8px; }
.dict-pick-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; padding: 10px 14px; background: var(--accent-soft); border-radius: 12px;
  font-weight: 700; font-size: var(--text-caption);
  position: sticky; top: 8px; z-index: 5;
}
.dict-pick-bar.hidden { display: none; }
.dict-row.picking { padding-left: 8px; }
.d-pick { width: 20px; height: 20px; flex: none; accent-color: var(--accent); cursor: pointer; }
/* Подпись под заголовком группы упражнений («Выражения», «На слух» без озвучки) */
.ex-group-note { margin: -8px 0 12px; max-width: 44em; line-height: 1.45; }
.ex-card-off { opacity: .55; cursor: not-allowed; }
/* Подсказка в поиске слов: первая буква ненайденного слова */
.ws-cell.hinted { background: var(--accent-soft); border-color: var(--accent); animation: ws-hint-pulse 1s ease 3; }
@keyframes ws-hint-pulse { 50% { transform: scale(1.12); } }
/* Подсказка сменить уровень (адаптация): заметная, но не назойливая */
.level-nudge {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--accent-soft); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px;
  font-weight: 700; font-size: var(--text-caption); line-height: 1.45;
}
.level-nudge-btns { display: flex; align-items: center; gap: 10px; }
/* Кнопка языка — рядом с темой, тем же весом */
.lang-btn {
  font-family: inherit; font-size: var(--text-caption); font-weight: 900; letter-spacing: .04em;
  background: none; border: 2px solid var(--border); border-radius: 10px; color: var(--ink-soft);
  padding: 5px 9px; cursor: pointer;
}
.lang-btn:hover { border-color: var(--accent); color: var(--ink); }

/* ===== Ролик на экране регистрации =====
   До нажатия это картинка с кнопкой: видео весит полтора мегабайта,
   и тянуть его тем, кто пришёл просто зарегистрироваться, незачем. */
.intro-video { margin: 22px auto 26px; max-width: 620px; width: 100%; }
.intro-play {
  display: block; position: relative; width: 100%; padding: 0;
  border: 1px solid var(--line-control); border-radius: var(--radius-card);
  overflow: hidden; cursor: pointer; background: var(--surface);
  box-shadow: 0 6px 22px rgba(43, 54, 48, .12);
}
.intro-play img { display: block; width: 100%; height: auto; }
/* Треугольник рисуем рамкой, без картинки: одна фигура — один элемент. */
.intro-play-mark {
  position: absolute; left: 50%; top: 50%; width: 74px; height: 74px;
  margin: -37px 0 0 -37px; border-radius: 50%;
  background: rgba(252, 251, 247, .94);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.intro-play-mark::after {
  content: ""; position: absolute; left: 29px; top: 23px;
  border-style: solid; border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--accent);
}
/* Подпись СВЕРХУ, а не снизу: внизу кадра у кота реплики в облаках,
   и надпись с ними сталкивалась — нечитаемо становилось и то, и другое. */
.intro-play-label {
  position: absolute; left: 0; right: 0; top: 0;
  /* --cat-eye, а не --surface: видео-сцена тёмная в обеих темах, а --surface
     ночью сам тёмный — подпись пропала бы. Глаз кота светлый всегда. */
  padding: 12px 16px 26px; color: var(--cat-eye);
  font-size: var(--text-caption); font-weight: 700;
  background: linear-gradient(rgba(12, 30, 18, .82), transparent);
}
/* Кружок и так рисуется тоном --cat-eye (rgba выше — тот же #FCFBF7
   с прозрачностью); при наведении он становится непрозрачным. */
.intro-play:hover .intro-play-mark { background: var(--cat-eye); }
.intro-play:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.intro-video video { width: 100%; display: block; border-radius: var(--radius-card); }

/* Возрастная маркировка (436-ФЗ). Знак обязан быть заметен, но это
   служебная пометка, а не элемент продвижения — поэтому спокойная
   рамка в подвале, а не яркая плашка. */
.age-mark {
  display: inline-block;
  border: 2px solid var(--line-soft);
  border-radius: 8px;
  padding: 2px 9px;
  font-weight: 900;
  font-size: var(--text-caption);
  color: var(--muted);
  letter-spacing: .02em;
}

/* Подпись-договор на экране приветствия: «Ты учишь. Я помню.» с котом.
   Кот здесь маленький и в строке — это подпись, а не иллюстрация. */
.hero-deal {
  /* Не flex: кот должен стоять В СТРОКЕ после «Договорились?», а не
     уезжать на свою строчку, когда фраза переносится на узком экране. */
  text-align: center;
  font-family: var(--font-display), sans-serif;
  font-size: var(--text-subheading);
  color: var(--ink);
  margin-top: 6px;
}
.cat-avatar.cat-tiny {
  width: 42px; height: 42px;
  display: inline-block; vertical-align: -12px; margin-left: 6px;
}

/* Проверочный раунд теста: варианты ответа столбиком.
   Кнопки во всю ширину — по ним попадают пальцем, не целясь. */
.verify-options { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.verify-option { width: 100%; justify-content: flex-start; text-align: left; min-height: 52px; }
/* Предложение с пропуском длиннее слова — уменьшаем и разрешаем перенос */
.quiz-word.verify-sentence {
  font-size: var(--text-subheading);
  line-height: 1.35;
  white-space: normal;
}

/* Кнопка «Отметить несколько» в словаре: иконка галочки рядом с подписью */
.chip-pick { display: inline-flex; align-items: center; gap: 7px; }
.chip-pick .ic-inline, .chip-pick svg { flex: none; }


/* Атрибут hidden должен побеждать всегда.
   =========================================================================
   Браузерное правило [hidden]{display:none} живёт в стилях самого браузера,
   а любой наш класс с display: — в авторских. Авторские сильнее, поэтому
   элемент с display:flex оставался НА ЭКРАНЕ, хотя код честно ставил ему
   hidden. Хуже, что невидимая панель продолжала ловить мышь.

   Раньше это лечили поимённо, отдельным правилом на каждый класс
   (в css/board.css и css/games.css). Список ручной — значит неполный: на
   боевой доске так и висели две панели, .bd-share-menu (210×14) и .bd-call
   (211×198, окошки видеозвонка). Обе перехватывали клики поверх холста,
   то есть репетитор не мог рисовать в этих местах, а видно там ничего не
   было — искать такое можно долго.

   Одно правило вместо списка закрывает и эти два случая, и все будущие.
   !important тут по делу: смысл правила в том, чтобы побеждать чужой
   display, а иначе оно и не работает. */
[hidden] { display: none !important; }

/* Вкладка «Урок»: ссылка на доску в ряду кнопок-разделов. Есть только
   у учеников с репетитором; зелёная точка — урок открыт прямо сейчас. */
a.nav-lesson { text-decoration: none; position: relative; }
a.nav-lesson.live .nav-ico::after {
  content: ""; position: absolute; margin-left: 14px; margin-top: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--surface);
}

/* ===== «?» — вход в «Вопросы и ответы» =====
   Одна кнопка на всех страницах: маленький круг с вопросительным знаком.
   Владелец: «не вижу вопрос-ответ» — страница была только ссылкой в
   подвале, туда никто не долистывает. Иконки «?» в наборе нет, знак
   набран текстом заголовочным шрифтом — читается как значок.
   В шапках стоит в потоке (.help-btn), на страницах без шапки и на
   экране приветствия прибит к правому верхнему углу (.help-btn-fixed). */
.help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-control);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 900; font-size: 17px; line-height: 1;
  text-decoration: none;
  transition: border-color var(--dur, .12s) var(--ease, ease), color var(--dur, .12s) var(--ease, ease);
}
.help-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.help-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.help-btn-fixed {
  position: fixed; top: 14px; right: 14px; z-index: 60;
  width: 44px; height: 44px; font-size: 19px;
  box-shadow: var(--shadow-soft);
}
/* На доске — той же формы, что соседние кнопки панели: bd-btn задаёт
   размер и цвет, здесь только круглость и знак. */
.help-btn-board { border-radius: 50%; width: 44px; min-width: 44px; padding: 0; font-weight: 900; }   /* конвенция 44px: палец ребёнка */