/* ============================================================
   汉语 · CHINESE LESSONS — DESIGN SYSTEM v4
   Характер: игровое, бодрое приложение-тренажёр в духе больших
   геймифицированных языковых платформ — плотные закруглённые
   "нажимаемые" кнопки с объёмной нижней гранью, чистый белый
   холст, звонкие насыщенные цвета, путь-дорожка уроков вместо
   таблицы, праздничные озвученные реакции.
   ============================================================ */

:root {
  --green: #9455ff; --green-hover: #8339ff; --green-dark: #6a1fd6; --green-soft: #ece0ff;
  --red: #ff4b4b; --red-hover: #e53e3e; --red-dark: #cc3a3a; --red-soft: #ffdfe0;
  --blue: #1cb0f6; --blue-hover: #0ea1e8; --blue-dark: #1899d6; --blue-soft: #ddf4ff;
  --gold: #ffc800; --gold-hover: #f2b600; --gold-dark: #e0a800; --gold-soft: #fff3c4;
  --purple: #ff6fae; --purple-dark: #d94f8c; --purple-soft: #ffe1ee;

  /* совместимость со старыми именами переменных в компонентах */
  --jade: var(--green); --jade-hover: var(--green-hover); --jade-soft: var(--green-soft); --jade-glow: rgba(88,204,2,0.35);
  --cinnabar: var(--red); --cinnabar-hover: var(--red-hover); --cinnabar-soft: var(--red-soft);
  --ink-blue: var(--blue); --ink-blue-hover: var(--blue-hover); --ink-blue-soft: var(--blue-soft);
  --yellow: var(--gold);

  --bg: #ffffff;
  --bg-rgb: 255,255,255;
  --surface: #ffffff;
  --surface-rgb: 255,255,255;
  --canvas: #f7f7f7;
  --text: #3c3c3c;
  --text-light: #777777;
  --border: #e5e5e5;
  --border-strong: #d5d5d5;
  --shadow: 0 8px 20px -8px rgba(0,0,0,0.16);
  --shadow-lg: 0 20px 44px -14px rgba(0,0,0,0.24);
  --radius: 20px;
  --radius-sm: 14px;
  --font: "Nunito", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --font-display: "Nunito", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --mascot-watermark-img: url(/assets/mascot-watermark.webp);
  /* Переменные, на которые уже ссылались стили, но которые нигде не были
     объявлены (работал только запасной цвет, без учёта тёмной темы). */
  --coral: var(--red); --orange: #ff9600; --yellow-soft: var(--gold-soft);
  --text-muted: var(--text-light); --ink-blue-dark: var(--blue-dark); --radius-lg: 24px;
  --surface-alt: var(--canvas); --surface-hover: var(--border);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
}

body.dark-theme {
  --green: #ac7bff; --green-hover: #c09bff; --green-dark: #8a4dff; --green-soft: #2b1f45;
  --red: #ff5c5c; --red-hover: #ff7373; --red-dark: #e53e3e; --red-soft: #3a1414;
  --blue: #2fc0ff; --blue-hover: #4fcbff; --blue-dark: #1cb0f6; --blue-soft: #0f2c38;
  --gold: #ffcd1f; --gold-hover: #ffd84d; --gold-dark: #e0a800; --gold-soft: #332a05;
  --purple: #ff8fbf; --purple-dark: #ff6fae; --purple-soft: #3a1f2c;

  --jade: var(--green); --jade-hover: var(--green-hover); --jade-soft: var(--green-soft); --jade-glow: rgba(88,204,2,0.35);
  --cinnabar: var(--red); --cinnabar-hover: var(--red-hover); --cinnabar-soft: var(--red-soft);
  --ink-blue: var(--blue); --ink-blue-hover: var(--blue-hover); --ink-blue-soft: var(--blue-soft);
  --yellow: var(--gold);

  --bg: #131f24; --bg-rgb: 19,31,36;
  --surface: #1c2b32; --surface-rgb: 28,43,50;
  --canvas: #0f181d;
  --text: #f2f2f2;
  --text-light: #94a3ab;
  --border: #2c3d45;
  --border-strong: #3c4f58;
  --shadow: 0 8px 20px -8px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 44px -14px rgba(0,0,0,0.6);
  --coral: var(--red); --yellow-soft: var(--gold-soft); --text-muted: var(--text-light);
  --ink-blue-dark: var(--blue-dark); --surface-alt: var(--canvas); --surface-hover: var(--border);
}
body.dark-theme .option.selected { background: var(--ink-blue-soft); }
body.dark-theme .option.correct { background: var(--jade-soft); }
body.dark-theme .option.wrong { background: var(--cinnabar-soft); }
body.dark-theme .feedback.correct { background: var(--jade-soft); }
body.dark-theme .feedback.wrong { background: var(--cinnabar-soft); }
body.dark-theme .admin-form { background: var(--surface); }
body.dark-theme .task-editor-item { background: var(--bg); }
body.dark-theme .admin-table th { background: var(--surface); }
body.dark-theme .admin-table tr:nth-child(even) { background: rgba(255,255,255,0.03); }
body.dark-theme .settings-card { background: var(--surface); }
body.dark-theme .write-input,
body.dark-theme .pinyin-input,
body.dark-theme .admin-form input,
body.dark-theme .admin-form textarea,
body.dark-theme .admin-form select,
body.dark-theme .admin-login input,
body.dark-theme .settings-card select {
  background-color: var(--bg); color: var(--text); border-color: var(--border);
}
body.dark-theme .match-item:hover,
body.dark-theme .word-tile:hover,
body.dark-theme .option:hover { background: var(--bg); }
body.dark-theme .sentence-slots { background: var(--bg); }
body.dark-theme .welcome::before { opacity: 0.05; }

/* --- Режим "Меньше анимаций" (от укачивания) --- см. комментарий в index.html */
body.reduce-motion-active, body.reduce-motion-active * {
  animation-duration: 0.001ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* --- Сброс и база --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Кнопки и поля без своего класса раньше брали цвет текста и шрифт из
   системных настроек браузера (чёрный текст, системный шрифт) — в тёмной
   теме это давало чёрные надписи на тёмном фоне (менеджер курсов, языков,
   конструктор видов заданий, «собери предложение»...). Теперь по умолчанию
   они наследуют цвет и шрифт страницы; все .btn-классы по-прежнему задают
   свой цвет сами. */
button, input, textarea, select { color: inherit; font-family: inherit; }
/* Нативные элементы (полосы прокрутки, выпадающие списки <option>, поля
   без класса) — тоже в тёмной палитре браузера, а не белые. */
body.dark-theme { color-scheme: dark; }
/* Единый, заметный фокус-индикатор для клавиатурной навигации,
   оформленный в цветах дизайн-системы (вместо системного синего) */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ink-blue);
  outline-offset: 2px;
}
html { font-size: 16px; scroll-behavior: smooth; }
html.text-size-sm { font-size: 13px; }
html.text-size-lg { font-size: 19px; }
html.text-size-xl { font-size: 23px; }
body.theme-boot, body.theme-boot * { transition: none !important; }
body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }
::selection { background: var(--jade); color: #fff; }

/* thin custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* --- Анимации --- */
@keyframes bounce { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-6px) scale(1.02); } 60% { transform: translateY(0) scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-1deg); } 40% { transform: translateX(6px) rotate(1deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes pop { 0% { transform: scale(0.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.15) rotate(3deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flame { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(2deg); } }
@keyframes ringPop { 0% { stroke-dashoffset: var(--ring-full); } 100% { stroke-dashoffset: var(--ring-offset); } }
@keyframes confettiFall { to { transform: translateY(115vh) rotate(540deg); opacity: 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes brushIn { from { stroke-dashoffset: 340; opacity:0; } to { stroke-dashoffset: 0; opacity:1; } }
@keyframes stampDown {
  0% { transform: translateY(-60px) scale(0.5); opacity: 0; }
  60% { transform: translateY(6px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.hidden { display: none !important; }
/* Подсказки. Раньше общего правила не было — .hint был оформлен только
   внутри .settings-card/.question, а в модалках (менеджер курсов, публикация,
   конструктор видов, группы) подсказки выглядели как обычный крупный текст. */
.hint { font-size: 0.82rem; color: var(--text-light); font-weight: 600; line-height: 1.45; }
.bounce { animation: bounce 0.5s var(--ease-back); }

/* --- Значок-медаль: используется в логотипе (маленький) и как
   "медаль" на экране результатов (большая, с эффектом отскока) --- */
.hanko {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; color: #fff !important;
  background: var(--green); border-radius: 30%;
  position: relative; user-select: none; flex-shrink: 0;
}
.hanko-sm { width: 60px; height: 60px; font-size: 1.8rem; border-radius: 16px; box-shadow: 0 5px 0 0 var(--green-dark); }
/* --- Значок-логотип как картинка (маскот-осьминог) вместо буквы-печати ---
   .hanko остаётся общей "рамкой" (см. выше), а .hanko-img только убирает
   фон/тень исходного .hanko-sm (картинка уже сама по себе — закруглённый
   значок с собственным фоном) и делает рамку круглой под форму артворка. */
.hanko-img { background: transparent; box-shadow: none; }
.hanko-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Лёгкое "помахивание щупальцами" при наведении на лого — не зацикленная
   анимация (лого в sticky-шапке видно всегда, бесконечный луп раздражал бы),
   а разовый плейфул отклик на hover. Общий рубильник .reduce-motion-active
   (см. начало файла) гасит её так же, как и любую другую анимацию. */
@keyframes octoWave {
  0%, 100% { transform: rotate(0deg) scale(1); }
  22% { transform: rotate(-10deg) scale(1.06); }
  48% { transform: rotate(7deg) scale(1.06); }
  74% { transform: rotate(-4deg) scale(1.02); }
}
.logo:hover .hanko-img img { animation: octoWave 0.65s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .logo:hover .hanko-img img { animation: none; } }
.hanko-lg {
  width: 88px; height: 88px; font-size: 2.15rem; border-radius: 50%;
  background: var(--gold); box-shadow: 0 6px 0 0 var(--gold-dark);
  margin: 0 auto 18px; display: table;
  animation: stampDown 0.6s var(--ease-back) both; animation-delay: 0.1s;
}
@media (prefers-reduced-motion: reduce) { .hanko-lg { animation: none; } }
.shake { animation: shake 0.45s ease; }
.fade-in { animation: fadeIn 0.35s var(--ease) forwards; }
.slide-up { animation: slideUp 0.5s var(--ease) forwards; }

/* --- Макет --- */
/* overflow-x: clip — страховка: что бы ни оказалось шире экрана внутри
   приложения, оно не растянет страницу на телефоне (см. .welcome ниже, §44). */
.app { max-width: 780px; margin: 0 auto; padding: 0 20px; position: relative; overflow-x: clip; }
.header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; row-gap: 10px;
  padding: 16px 4px; margin-bottom: 22px;
  position: sticky; top: 0; z-index: 100;
  background: rgba(var(--bg-rgb),0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s ease;
}
.lang-switch { display: flex; gap: 4px; align-items: center; margin-right: 6px; background: var(--surface); padding: 4px; border-radius: 999px; border: 1px solid var(--border); }
.lang-btn { min-width: 34px; padding: 6px 9px; font-size: 0.76rem; border-radius: 999px; border: none; background: transparent; color: var(--text); font-weight: 600; }
.lang-btn.active { background: var(--jade); color: #fff; box-shadow: 0 3px 10px -2px var(--jade-glow); }
.logo {
  font-size: 1.32rem; font-weight: 700; font-family: var(--font-display); color: var(--text);
  cursor: pointer; user-select: none; display: flex; align-items: center; gap: 12px; letter-spacing: 0.01em;
  transition: transform 0.2s var(--ease-back);
  min-width: 0;
}
.logo:active { transform: scale(0.94); }
.header-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* --- Интро-анимация лого при первой загрузке приложения (только значок и
   название, без аватарки/маскота) — включается один раз через
   playIntroAnimation(), см. init(). --- */
@keyframes octoIntroHanko {
  0% { transform: scale(0.3) rotate(-25deg); opacity: 0; }
  55% { transform: scale(1.18) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes octoIntroTitle {
  0% { transform: translateX(-6px); opacity: 0; letter-spacing: 0.3em; }
  100% { transform: translateX(0); opacity: 1; letter-spacing: 0.01em; }
}
.logo.intro-play .hanko { animation: octoIntroHanko 0.7s var(--ease-back) both; }
.logo.intro-play #app-title-text { display: inline-block; animation: octoIntroTitle 0.55s ease-out 0.18s both; }
@media (prefers-reduced-motion: reduce) {
  .logo.intro-play .hanko, .logo.intro-play #app-title-text { animation: none; }
}

/* --- Стрик-бейдж --- */
.streak-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--gold-soft); border: 2px solid var(--gold);
  font-weight: 900; font-size: 0.85rem; color: var(--gold-dark);
  white-space: nowrap;
}
.streak-badge .flame { display: inline-block; animation: flame 1.6s ease-in-out infinite; }
.streak-badge.hidden-badge { display: none; }

/* --- XP-бейдж --- */
.xp-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--blue-soft); border: 2px solid var(--blue);
  font-weight: 900; font-size: 0.85rem; color: var(--blue-dark);
  white-space: nowrap;
}
.xp-badge.hidden-badge { display: none; }
.xp-badge .xp-gem { display: inline-block; }
.xp-badge.xp-pulse { animation: pulse 0.4s var(--ease-back); }

/* --- Разбор ошибок на экране результатов --- */
.mistakes-review { text-align: left; max-width: 520px; margin: 8px auto 22px; }
.mistakes-review-toggle {
  background: none; border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 16px; font-weight: 800; color: var(--text); cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: space-between; font-family: var(--font);
}
.mistakes-review-toggle:hover { border-color: var(--border-strong); }
.mistakes-review-list { display: none; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.mistakes-review-list.expanded { display: flex; }
.mistake-item {
  background: var(--red-soft); border: 2px solid var(--red); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 0.92rem;
}
.mistake-item .mistake-q { font-weight: 800; margin-bottom: 4px; }
.mistake-item .mistake-your { color: var(--red-dark); }
.mistake-item .mistake-correct { color: var(--green-dark); font-weight: 800; }

/* --- Выпадающие списки (select) ---
   Раньше <select> без отдельного класса рендерился совсем "голым"
   (нативный вид ОС/браузера — прямые углы, системная стрелка), что
   резко выбивалось из общего скруглённого дизайна приложения. Единое
   базовое правило ниже даёт всем select одинаковый скруглённый вид со
   своей стрелкой-шевроном; более специфичные правила (.admin-table
   select, .course-switch-row select и т.п.) по-прежнему могут
   переопределять отступы/размер — переопределяется не будет только
   сама стрелка и appearance:none, так как их никто из них не трогает. */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 34px 9px 12px; font-family: inherit; font-size: 0.92rem; font-weight: 600;
  background-color: var(--bg); color: var(--text); cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23777777' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
  transition: border-color 0.15s ease;
}
select:hover { border-color: var(--border-strong); }
select:focus { border-color: var(--ink-blue); }
select:disabled { opacity: 0.55; cursor: not-allowed; }
body.dark-theme select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3ab' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
}
/* На некоторых select текст значения может быть длиннее видимой ширины
   (например длинные названия курсов) — раньше браузер просто обрезал
   текст без многоточия прямо на границе. text-overflow на самом select
   поддерживается не везде одинаково, но там, где поддерживается (Chrome,
   Edge), это чинит именно эту проблему без другой вёрстки. */
select { text-overflow: ellipsis; }

/* --- Чекбоксы ---
   Как и с select выше — раньше чекбоксы (менеджер курса "разрешённые
   виды заданий", экспорт, автосохранение черновиков и т.п., см.
   AI_GUIDE.md §35.11) оставались чисто нативными: серый квадратик из
   палитры ОС, никак не связанный с цветовой темой приложения. accent-color
   — однострочное решение без переписывания разметки во всех ~10 местах
   использования: перекрашивает нативный чекбокс под тему, при этом
   базовая форма/поведение остаются нативными (доступность не страдает).
*/
input[type="checkbox"] { accent-color: var(--ink-blue); cursor: pointer; }

/* --- Экраны --- */
.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.4s var(--ease); }

/* --- Кнопки --- */
.btn {
  border: none; border-radius: var(--radius-sm);
  padding: 13px 22px 15px; font-size: 0.95rem; font-weight: 800; font-family: inherit;
  text-transform: uppercase; letter-spacing: 0.03em;
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease, background 0.15s ease;
}
/* Объёмная "нажимаемая" кнопка: цветная нижняя грань служит тенью;
   при клике кнопка "проваливается" на высоту этой грани. */
.btn:active { transform: translateY(4px); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 4px 0 0 var(--green-dark); }
.btn-primary:hover { background: var(--green-hover); }
.btn-primary:active { box-shadow: 0 0 0 0 var(--green-dark); }
.btn-secondary { background: var(--surface); color: var(--blue); box-shadow: 0 4px 0 0 var(--border-strong); border: 2px solid var(--border); }
.btn-secondary:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.btn-secondary:active { box-shadow: 0 0 0 0 var(--border-strong); }
.btn-danger { background: var(--surface); color: var(--red); box-shadow: 0 4px 0 0 var(--red-soft); border: 2px solid var(--red-soft); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-danger:active { box-shadow: 0 0 0 0 var(--red-soft); }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 4px 0 0 var(--blue-dark); }
.btn-blue:hover { background: var(--blue-hover); }
.btn-blue:active { box-shadow: 0 0 0 0 var(--blue-dark); }
/* В тёмной теме голубой фон светлее, белый текст на нём почти не читался
   (кнопки «Опубликовать», «Редактировать») — тёмный текст вместо белого. */
body.dark-theme .btn-blue { color: #06222e; }
.btn-large { padding: 16px 34px 19px; font-size: 1.05rem; border-radius: var(--radius); }
.btn-small { padding: 9px 14px; font-size: 0.78rem; box-shadow: 0 3px 0 0 var(--border-strong); display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.btn-small.btn-primary { box-shadow: 0 3px 0 0 var(--green-dark); }
.btn-icon {
  padding: 10px; font-size: 1.05rem; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); border: 2px solid var(--border);
  box-shadow: 0 3px 0 0 var(--border-strong); text-transform: none;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; letter-spacing: normal;
}
.btn-icon:hover { background: var(--blue-soft); }
.btn-icon:active { box-shadow: 0 0 0 0 var(--border-strong); }
body.dark-theme .btn-icon { background: var(--surface); border-color: var(--border); }
body.dark-theme .btn-icon:hover { background: var(--blue-soft); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* --- Приветствие --- */
/* overflow-x: clip — водяной знак ::before шире экрана телефона (560px),
   и без обрезки мобильный браузер растягивал ВСЮ страницу до его ширины:
   всё мельчило, а нижнее меню уезжало за нижний край экрана (§44). clip,
   а не hidden: hidden сделал бы .welcome скролл-контейнером и обрезал бы
   знак ещё и сверху (top: -30px). */
.welcome { text-align: center; padding: 44px 20px 56px; position: relative; overflow-x: clip; }
.welcome::before {
  content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  width: 560px; height: 560px; max-width: 100vw; /* не шире экрана — иначе телефон «отдаляет» всю страницу */
  background-image: var(--mascot-watermark-img);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0.035; pointer-events: none; z-index: -1;
}
.mascot-bubble {
  width: 190px; height: 190px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; text-align: center;
  animation: fadeIn 0.5s var(--ease) both, floaty 3.2s ease-in-out 0.6s infinite;
}
.mascot-bubble img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.12)); }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.welcome-badge {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 16px; border-radius: 999px;
  width: max-content; max-width: 100%; margin: 0 auto 18px;
  background: var(--blue-soft); color: var(--blue-dark); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; border: 2px solid var(--blue-soft);
  animation: fadeIn 0.5s var(--ease) 0.1s both;
}
.welcome h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2.6vw, 3rem); font-weight: 900; margin-bottom: 12px;
  color: var(--text); letter-spacing: -0.01em; position: relative; display: block;
  animation: slideUp 0.6s var(--ease) 0.2s both;
}
.welcome p { font-size: 1.03rem; font-weight: 700; color: var(--text-light); margin-bottom: 32px; max-width: 440px; margin-left: auto; margin-right: auto; animation: fadeIn 0.5s var(--ease) 0.5s both; }
.welcome-links { display: flex; gap: 10px 18px; justify-content: center; flex-wrap: wrap; margin-top: 22px; animation: fadeIn 0.5s var(--ease) 0.7s both; }
.welcome-links-label { color: var(--text-light); font-weight: 700; font-size: .92rem; }
.welcome-links a { color: var(--text-light); font-weight: 800; font-size: .92rem; text-decoration: none; border-bottom: 2px dashed var(--border-strong); padding-bottom: 1px; }
.welcome-links a:hover, .welcome-links a:focus-visible { color: var(--text); border-bottom-color: var(--text-light); }
.welcome-version { margin-top: 14px; animation: fadeIn 0.5s var(--ease) 0.8s both; }
.welcome-version a { color: var(--text-light); font-size: .82rem; font-weight: 700; text-decoration: none; opacity: .85; }
.welcome-version a:hover, .welcome-version a:focus-visible { color: var(--text); opacity: 1; text-decoration: underline; }
.welcome > .btn, .welcome-actions { animation: pop 0.5s var(--ease-back) 0.7s both; }
@media (prefers-reduced-motion: reduce) { .mascot-bubble { animation: none; } }

/* --- Список уроков --- */
/* --- Дорожка уроков (path) --- */
.lesson-path { display: flex; flex-direction: column; align-items: center; padding: 36px 0 64px; position: relative; }
.lesson-path::before {
  content: ''; position: absolute; top: 30px; bottom: 30px; left: 50%; width: 6px; margin-left: -3px;
  background: repeating-linear-gradient(var(--border-strong) 0 10px, transparent 10px 22px);
  border-radius: 3px; z-index: 0;
}
/* Когда JS успешно построил SVG-кривую между заданиями — прячем запасную пунктирную линию */
.lesson-path.has-svg-path::before { display: none; }
.lesson-path-svg { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
.lesson-path-curve { fill: none; stroke: var(--border-strong); stroke-width: 6px; stroke-linecap: round; stroke-dasharray: 2 16; }
.lesson-node { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 1; margin-bottom: 14px; animation: slideUp 0.45s var(--ease) backwards; }
.lesson-node:nth-child(8n+1) { margin-left: 0; }
.lesson-node:nth-child(8n+2) { margin-left: 46px; }
.lesson-node:nth-child(8n+3) { margin-left: 68px; }
.lesson-node:nth-child(8n+4) { margin-left: 46px; }
.lesson-node:nth-child(8n+5) { margin-left: 0; }
.lesson-node:nth-child(8n+6) { margin-left: -46px; }
.lesson-node:nth-child(8n+7) { margin-left: -68px; }
.lesson-node:nth-child(8n+8) { margin-left: -46px; }
.lesson-bubble {
  width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; cursor: pointer; position: relative; border: none; padding: 6px;
  background: var(--green); color: #fff; box-shadow: 0 6px 0 0 var(--green-dark);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
  /* overflow не обрезаем: значок ✓ и пульсирующее кольцо текущего урока выходят за край кружка;
     несколько эмодзи ограничивает сама .lesson-bubble-icon */
  box-sizing: border-box;
}
.lesson-bubble-icon {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  line-height: 1.05; max-width: 100%; max-height: 100%; overflow: hidden; word-break: break-all;
}
.lesson-bubble:hover { filter: brightness(1.06); }
.lesson-bubble:active { transform: translateY(6px); box-shadow: 0 0 0 0 var(--green-dark) !important; }
.lesson-node.locked .lesson-bubble { background: var(--border); color: var(--text-light); box-shadow: 0 6px 0 0 var(--border-strong); cursor: not-allowed; }
.lesson-node.completed .lesson-bubble { background: var(--gold); box-shadow: 0 6px 0 0 var(--gold-dark); }
.lesson-node.skipped .lesson-bubble { background: var(--border-strong); box-shadow: 0 6px 0 0 var(--text-light); opacity: 0.85; }
.lesson-node .check-badge.skipped-badge { background: var(--text-light); }
.lesson-node.current .lesson-bubble::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--green);
  animation: ringPulse 1.7s ease-out infinite;
}
@keyframes ringPulse { 0% { transform: scale(0.92); opacity: 0.7; } 100% { transform: scale(1.4); opacity: 0; } }
.lesson-node .check-badge {
  position: absolute; top: -3px; right: -3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; border: 3px solid var(--canvas); box-shadow: var(--shadow);
}
/* Подпись урока — с фоном страницы, чтобы пунктир дорожки шёл «под» ней, а не
   по тексту; и шире, чтобы название не рассыпалось в столбик по слову. */
.lesson-node-label { margin-top: 8px; font-size: 0.82rem; font-weight: 800; text-align: center; max-width: 150px; color: var(--text); background: var(--canvas); border-radius: 10px; padding: 2px 8px; line-height: 1.3; }
.lesson-node.locked .lesson-node-label { color: var(--text-light); }
.lesson-node-stars { margin-top: 2px; font-size: 0.7rem; letter-spacing: 1px; }
.lesson-node-stars .dim { opacity: 0.25; }
.lesson-start-tag {
  position: absolute; top: -40px; background: var(--surface); color: var(--green); border: 2px solid var(--green);
  padding: 5px 13px; border-radius: 10px; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.05em;
  white-space: nowrap; animation: bounce 1.6s ease-in-out infinite; box-shadow: var(--shadow);
}
.lesson-start-tag::after {
  content: ''; position: absolute; bottom: -7px; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--green);
}
@media (prefers-reduced-motion: reduce) { .lesson-node.current .lesson-bubble::after, .lesson-start-tag { animation: none; } }

/* --- Задание --- */
.task-container { padding: 12px 0; min-height: 300px; }
.progress-bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 34px; }
.progress-fill {
  height: 100%; width: 0%; border-radius: 4px; transition: width 0.5s var(--ease);
  background: linear-gradient(90deg, var(--jade), var(--ink-blue));
}
.question { font-size: 1.2rem; font-weight: 700; text-align: center; margin-bottom: 30px; animation: fadeIn 0.4s var(--ease); }
.question .chinese, .tone-base {
  font-family: var(--font-display); font-weight: 600; color: var(--text);
  /* Отступ намеренно в px, а не в em (как было раньше) — правка "крупнее
     иероглиф, но не крупнее ячейка": пока padding был в em, увеличение
     font-size автоматически раздувало и саму рамку-ячейку вместе с
     символом. Фиксированный px-отступ держит размер плашки почти
     неизменным, пока символ внутри становится заметно крупнее (см.
     font-size ниже и в медиа-запросе @media (min-width: 600px)). */
  display: inline-block; padding: 6px 16px; border-radius: 10px; margin-bottom: 10px;
  background: var(--surface); border: 1.5px solid var(--border);
  background-image:
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--border) calc(50% - 0.5px), var(--border) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--border) calc(50% - 0.5px), var(--border) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-repeat: no-repeat; background-position: center; box-shadow: var(--shadow);
}
.question .chinese { font-size: 3.4rem; line-height: 1.1; }
.question .chinese.has-audio { position: relative; padding-right: 1.5em; }
.question .chinese.has-audio::after { content: '🔊'; font-size: 0.5em; position: absolute; top: 6px; right: 8px; }
.question .hint { font-size: 0.88rem; color: var(--text-light); font-weight: 500; margin-bottom: 10px; }
.question .question-instruction { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }

/* --- Варианты ответа --- */
.options { display: grid; grid-template-columns: 1fr; gap: 11px; margin-bottom: 26px; }
.option {
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px; font-size: 1.02rem; cursor: pointer; text-align: center; font-family: inherit;
  font-weight: 800; color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s var(--ease-back), box-shadow 0.15s ease;
}
.option:hover { border-color: var(--ink-blue); background: var(--ink-blue-soft); transform: translateY(-2px); box-shadow: var(--shadow); }
.option.selected { border-color: var(--ink-blue); background: var(--ink-blue-soft); }
.option.correct { border-color: var(--jade); background: var(--jade-soft); animation: bounce 0.5s var(--ease-back); box-shadow: 0 0 0 4px var(--jade-glow); }
.option.wrong { border-color: var(--cinnabar); background: var(--cinnabar-soft); animation: shake 0.45s ease; }
.option.disabled { pointer-events: none; opacity: 0.75; }
/* Иероглиф внутри варианта ответа заметно крупнее обычного текста —
   см. isMostlyHanzi()/.has-hanzi, не увеличиваем текст переводов. */
.option.has-hanzi { font-size: 1.7rem; font-family: var(--font-display); padding: 12px 16px; }

/* --- Картинка --- */
.task-image { text-align: center; margin-bottom: 22px; }
.task-image img { max-width: 210px; max-height: 210px; border-radius: var(--radius); object-fit: contain; border: 1px solid var(--border); box-shadow: var(--shadow); }
.task-image .emoji-placeholder { font-size: 5.2rem; line-height: 1; animation: floatY 3.5s ease-in-out infinite; display: inline-block; }

/* --- Карточка-памятка (новое слово) --- */
.flashcard {
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 32px 24px; text-align: center; box-shadow: var(--shadow); animation: pop 0.35s var(--ease-back);
  margin-bottom: 22px;
}
.flashcard-badge {
  display: inline-block; background: var(--blue-soft); color: var(--blue-dark); font-weight: 800;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 14px;
  border-radius: 20px; margin-bottom: 18px;
}
.flashcard-chinese { font-size: 3.6rem; font-weight: 800; line-height: 1.15; margin-bottom: 6px; }
.flashcard-chinese.has-audio::after { content: '🔊'; font-size: 1.1rem; margin-left: 10px; vertical-align: middle; }
.flashcard-pinyin { font-size: 1.15rem; color: var(--text-light); font-weight: 700; margin-bottom: 10px; }
.flashcard-translation { font-size: 1.3rem; font-weight: 700; color: var(--text); margin-bottom: 18px; }
.flashcard-example-wrap { border-top: 1.5px dashed var(--border); padding-top: 16px; margin-top: 6px; }
.flashcard-example { font-size: 1.15rem; font-weight: 600; margin-bottom: 4px; }
/* Отдельные слова словаря внутри предложения/утверждения — каждое кликабельно
   и озвучивается по отдельности (см. renderTextWithVocabAudio в JS). */
.vocab-word-audio { cursor: pointer; border-bottom: 2px dotted currentColor; }
.vocab-word-audio:hover, .vocab-word-audio:active { opacity: 0.65; }
.flashcard-example-translation { font-size: 0.92rem; color: var(--text-light); }

/* --- Сопоставление --- */
.match-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 26px; }
.match-col { display: flex; flex-direction: column; gap: 10px; }
.match-item {
  display: block; width: 100%; font-family: inherit; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px; text-align: center; font-size: 1.08rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s var(--ease-back); user-select: none;
}
.match-item:hover { border-color: var(--ink-blue); background: var(--ink-blue-soft); transform: scale(1.02); }
.match-item.dragging { opacity: 0.5; }
.match-item.matched { border-color: var(--jade); background: var(--jade-soft); cursor: default; }
.match-item.wrong-match { border-color: var(--cinnabar); background: var(--cinnabar-soft); animation: shake 0.35s ease; }
/* Иероглиф в карточке сопоставления — крупнее, как и в .option.has-hanzi,
   тот же принцип: увеличиваем только сам иероглиф, не пиньинь/перевод. */
.match-item.has-hanzi { font-size: 1.55rem; font-family: var(--font-display); }
.match-item:focus-visible { outline: 3px solid var(--ink-blue); outline-offset: 2px; }
.match-drop-zone {
  min-height: 58px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; color: var(--text-light);
  font-size: 0.88rem; transition: all 0.2s ease;
}
.match-drop-zone.drag-over { border-color: var(--ink-blue); background: var(--ink-blue-soft); transform: scale(1.03); }

/* --- Написание иероглифа (порядок черт) --- */
.hanzi-write-wrap { margin-bottom: 26px; }
.hanzi-write-hint { margin-bottom: 14px; text-align: center; font-size: 1rem; }
.hanzi-write-grids { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.hanzi-write-cell {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color 0.2s ease, background 0.2s ease;
}
.hanzi-write-cell-done { border-color: var(--jade); background: var(--jade-soft); }
.hanzi-write-cell-done .hanzi-write-target { background: transparent; border-color: var(--jade); }
.hanzi-write-target {
  border: 1px dashed var(--border); border-radius: 8px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hanzi-write-loading { font-size: 0.78rem; color: var(--text-light); text-align: center; padding: 0 8px; }
.hanzi-write-hint-btn {
  width: 100%; font-size: 0.76rem; padding: 8px 6px;
  text-transform: none; letter-spacing: normal; font-weight: 600; white-space: normal;
}
.hanzi-write-status { text-align: center; margin-top: 10px; min-height: 1.2em; font-weight: 600; }
.hanzi-write-error { text-align: center; color: var(--cinnabar); font-size: 0.9rem; padding: 10px; }
.hanzi-write-skip-wrap { text-align: center; margin-top: 14px; }
.hanzi-write-grids-disabled { pointer-events: none; opacity: 0.55; }
.hanzi-write-admin-preview { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.hanzi-write-admin-preview-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); }

/* --- Математика: тренажёр примеров (math-drill) --- */
.math-drill-wrap { margin-bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.math-drill-progress { font-weight: 700; }
.math-drill-score { margin-bottom: 6px; }
.math-drill-card {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 28px 20px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg, 20px);
  animation: pop 0.25s var(--ease-back);
}
.math-drill-expr {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: 1px; text-align: center;
}
@media (min-width: 600px) { .math-drill-expr { font-size: 3.1rem; } }
.math-drill-input {
  width: 160px; text-align: center; font-size: 1.6rem; font-weight: 700; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
}
.math-drill-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.math-drill-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.math-drill-option {
  min-width: 64px; padding: 12px 18px; font-size: 1.2rem; font-weight: 700; font-family: var(--font-display);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  cursor: pointer; transition: all 0.15s var(--ease-back);
}
.math-drill-option:hover { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-2px); }
.math-drill-option.is-selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px var(--blue-soft); }
.math-drill-submit { width: 100%; max-width: 220px; }
.math-drill-feedback { font-weight: 700; text-align: center; margin-top: -4px; }
.math-drill-feedback.is-correct { color: var(--jade); }
.math-drill-feedback.is-wrong { color: var(--cinnabar); }
.math-drill-timerbar-wrap {
  width: 100%; max-width: 420px; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden;
}
.math-drill-timerbar-fill { height: 100%; background: var(--blue); width: 100%; }
.math-drill-result { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-weight: 700; font-size: 1.05rem; padding: 10px 0; }
.math-drill-result-emoji { font-size: 3rem; animation: pop 0.4s var(--ease-back); }
.math-drill-result-pass { color: var(--jade); }
.math-drill-result-fail { color: var(--text); }
/* --- Математика: охота за парой (math-hunt) --- */
.math-hunt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin-top: 10px; }
.math-hunt-tile {
  min-height: 64px; padding: 10px 8px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  cursor: pointer; transition: all 0.15s var(--ease-back); display: flex; align-items: center; justify-content: center;
  text-align: center; word-break: break-word;
}
.math-hunt-tile:hover:not(.matched) { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-2px); }
.math-hunt-tile.is-selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px var(--blue-soft); }
.math-hunt-tile.matched { border-color: var(--jade); background: var(--jade-soft); cursor: default; opacity: 0.75; animation: pop 0.3s var(--ease-back); }
.math-hunt-tile.wrong-flash { border-color: var(--cinnabar); background: var(--cinnabar-soft); animation: shake 0.4s ease; }
@media (min-width: 600px) { .math-hunt-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }
/* --- Музыка: повтори ритм (music-rhythm) --- */
.music-rhythm-status { font-weight: 700; text-align: center; margin: 6px 0; min-height: 1.4em; }
.music-rhythm-status.is-correct { color: var(--jade); }
.music-rhythm-status.is-wrong { color: var(--cinnabar); }
.music-rhythm-pads { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 12px; max-width: 420px; margin: 10px auto 16px; }
.music-rhythm-pad {
  aspect-ratio: 1; border-radius: var(--radius); border: none; cursor: pointer;
  background: var(--pad-color, var(--blue)); opacity: 0.55; transition: opacity 0.12s ease, transform 0.12s var(--ease-back);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);
}
.music-rhythm-pad:hover { opacity: 0.7; }
.music-rhythm-pad.is-lit { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 4px rgba(255,255,255,0.3), inset 0 -4px 0 rgba(0,0,0,0.15); }
/* --- Музыка: нотный стан (music-notes) --- */
.music-staff-wrap { max-width: 320px; margin: 6px auto 14px; }
.music-staff-svg { width: 100%; height: auto; display: block; }
/* Инлайн-пара "от/до" в форме редактирования math-drill (и переиспользуемо
   для любых будущих пар "мин/макс" в админке) */
.admin-inline-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.admin-inline-row label { margin: 0; white-space: nowrap; }
.admin-inline-row input[type="number"] { width: 90px; }
.tts-voice-status-badge { font-size: 0.82rem; white-space: nowrap; }
.tts-voice-controls { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tts-voice-controls select, .admin-form .tts-voice-controls select { width: auto; padding: 6px 28px 6px 10px; font-size: 0.85rem; }

/* ══ ИГРА С КЛЮЧАМИ (задание hanzi-game) ══════════════════════ */
.hg-wrap { display:flex; flex-direction:column; gap:14px; animation:fadeIn .3s var(--ease); }

/* Выбор уровня */
.hg-level-screen { display:flex; flex-direction:column; align-items:center; gap:16px; padding:6px 0; text-align:center; }
.hg-level-title { font-size:1rem; font-weight:900; color:var(--text); }
.hg-level-sub { font-size:.82rem; color:var(--text-light); }
.hg-level-cards { display:flex; flex-direction:column; gap:9px; width:100%; }
.hg-level-card {
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:2px solid var(--border);
  border-radius:var(--radius); padding:13px 16px;
  cursor:pointer; transition:all .12s ease;
  box-shadow:0 3px 0 var(--border-strong); text-align:left;
}
.hg-level-card:hover { border-color:var(--green); background:var(--green-soft); transform:translateY(-2px); box-shadow:0 5px 0 var(--green-dark); }
.hg-level-card:active { transform:translateY(3px); box-shadow:none; }
.hg-level-num { font-size:1.6rem; line-height:1; min-width:30px; }
.hg-level-info { flex:1; }
.hg-level-name { font-size:.88rem; font-weight:800; color:var(--text); margin-bottom:1px; }
.hg-level-desc { font-size:.72rem; color:var(--text-light); }
.hg-level-count { font-size:.72rem; font-weight:800; background:var(--canvas); border:1px solid var(--border); border-radius:40px; padding:2px 9px; color:var(--text-light); white-space:nowrap; }

/* Вкладки режима */
.hg-tabs { display:flex; background:var(--canvas); border:2px solid var(--border); border-radius:var(--radius); padding:3px; gap:3px; }
.hg-tab { flex:1; padding:7px 8px; border-radius:var(--radius-sm); border:none; font-family:inherit; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; transition:all .15s ease; color:var(--text-light); background:transparent; display:flex; align-items:center; justify-content:center; gap:4px; }
.hg-tab.active { background:var(--green); color:#fff; box-shadow:0 3px 0 var(--green-dark); }
.hg-back-btn { background:none; border:none; font-family:inherit; font-size:.75rem; font-weight:800; color:var(--text-light); cursor:pointer; padding:0; display:flex; align-items:center; gap:4px; }
.hg-back-btn:hover { color:var(--text); }

/* Прогресс и статы */
.hg-prog-bar { background:var(--border); border-radius:40px; height:7px; overflow:hidden; }
.hg-prog-fill { height:100%; border-radius:40px; background:linear-gradient(90deg,var(--green),var(--blue)); transition:width .5s var(--ease); }
.hg-stats-row { display:flex; gap:6px; flex-wrap:wrap; }
.hg-stat-pill { background:var(--surface); border:2px solid var(--border); border-radius:40px; padding:3px 12px; font-size:.78rem; font-weight:800; color:var(--text); display:flex; align-items:center; gap:4px; }

/* Карточка иероглифа */
.hg-char-card { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); padding:18px 18px 16px; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; overflow:hidden; text-align:center; }
.hg-char-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--green),var(--blue)); }
.hg-char-lbl { font-size:.65rem; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-light); }
.hg-char-big { font-size:3.5rem; line-height:1; font-weight:400; color:var(--text); user-select:none; }
.hg-char-big.hg-pop { animation:pop .35s var(--ease-back); }
.hg-char-py { font-size:.9rem; font-weight:800; color:var(--green); }
.hg-char-tr { font-size:.82rem; color:var(--text-light); }
.hg-char-hint { background:var(--green-soft); color:var(--green); border-radius:40px; padding:2px 12px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }

/* Сетка ключей */
.hg-rad-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.hg-rad { aspect-ratio:1; background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:3px; box-shadow:0 3px 0 var(--border-strong); transition:all .1s ease; user-select:none; }
.hg-rad-c { font-size:1.5rem; font-weight:400; line-height:1; color:var(--text); }
.hg-rad-s { font-size:.52rem; color:var(--text-light); font-weight:700; text-align:center; line-height:1.2; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 2px; }
.hg-rad:hover:not(.hg-locked) { border-color:var(--green); background:var(--green-soft); transform:translateY(-2px); box-shadow:0 5px 0 var(--green-dark); }
.hg-rad:hover:not(.hg-locked) .hg-rad-c { color:var(--green); }
.hg-rad:active:not(.hg-locked) { transform:translateY(3px); box-shadow:none; }
.hg-rad.hg-sel { border-color:var(--green); background:var(--green-soft); box-shadow:0 3px 0 var(--green-dark); }
.hg-rad.hg-sel .hg-rad-c { color:var(--green-dark); }
.hg-rad.hg-correct { border-color:var(--green); background:var(--green-soft); box-shadow:0 3px 0 var(--green-dark); animation:bounce .4s var(--ease-back); }
.hg-rad.hg-correct .hg-rad-c { color:var(--green-dark); }
.hg-rad.hg-wrong { border-color:var(--red); background:var(--red-soft); box-shadow:0 3px 0 var(--red-dark); animation:shake .4s ease; }
.hg-rad.hg-wrong .hg-rad-c { color:var(--red-dark); }
.hg-rad.hg-missed { border-color:var(--gold); background:var(--gold-soft); box-shadow:0 3px 0 var(--gold-dark); }
.hg-rad.hg-missed .hg-rad-c { color:var(--gold-dark); }
.hg-rad.hg-locked { pointer-events:none; }

/* Кнопки */
.hg-btns { display:flex; gap:8px; }
.hg-btns .btn { flex:1; }

/* Свободная сборка */
.hg-free-lbl { font-size:.68rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-light); margin-bottom:2px; }
.hg-free-lbl span { font-weight:600; text-transform:none; letter-spacing:0; }
.hg-pool-wrap, .hg-hand-wrap { display:flex; flex-wrap:wrap; gap:8px; background:var(--canvas); border-radius:var(--radius); padding:10px; min-height:66px; border:2px solid var(--border); }
.hg-hand-wrap { border-style:dashed; }
.hg-key { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:56px; height:56px; background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-sm); box-shadow:0 3px 0 var(--border-strong); cursor:pointer; transition:all .1s ease; user-select:none; padding:3px; }
.hg-key-c { font-size:1.4rem; font-weight:400; line-height:1; color:var(--text); }
.hg-key-s { font-size:.5rem; color:var(--text-light); font-weight:700; text-align:center; line-height:1.2; max-width:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.hg-pool-wrap .hg-key:hover { border-color:var(--green); background:var(--green-soft); transform:translateY(-2px); box-shadow:0 5px 0 var(--green-dark); }
.hg-pool-wrap .hg-key:hover .hg-key-c { color:var(--green-dark); }
.hg-pool-wrap .hg-key:active { transform:translateY(3px); box-shadow:none; }
.hg-hand-wrap .hg-key:hover { border-color:var(--red); background:var(--red-soft); }
.hg-hand-wrap .hg-key:hover .hg-key-c { color:var(--red-dark); }
.hg-empty { color:var(--text-light); font-size:.8rem; width:100%; text-align:center; padding:8px 0; }
.hg-status-bar { background:var(--surface); border:2px solid var(--border); border-radius:60px; padding:8px 16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hg-status-ch { font-size:1.6rem; line-height:1; background:var(--canvas); padding:2px 9px; border-radius:var(--radius-sm); border:2px solid var(--border); min-width:36px; text-align:center; }
.hg-status-ch.hg-pop { animation:bounce .3s var(--ease-back); }
.hg-status-desc { font-size:.78rem; color:var(--text-light); }
.hg-status-desc strong { color:var(--text); }
.hg-status-prog { margin-left:auto; background:var(--canvas); padding:2px 10px; border-radius:40px; font-size:.7rem; font-weight:800; border:1px solid var(--border); }
.hg-log { font-size:.72rem; color:var(--text-light); background:var(--canvas); border-radius:var(--radius-sm); padding:7px 13px; border:1px solid var(--border); max-height:66px; overflow-y:auto; }
.hg-log div { padding:2px 0; border-bottom:1px solid var(--border); }
.hg-log div:last-child { border-bottom:none; }

/* Подсказки */
.hg-hint-grid { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:12px 0 16px; }
.hg-hint-item { display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--canvas); padding:7px 11px; border-radius:var(--radius-sm); border:2px solid var(--border); min-width:60px; }
.hg-hint-item .hi-c { font-size:1.7rem; line-height:1.2; }
.hg-hint-item .hi-p { font-size:.68rem; color:var(--text-light); font-weight:700; }
.hg-hint-item .hi-t { font-size:.62rem; color:var(--text-light); }

/* Финал */
.hg-finish-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:10px 0; }
.hg-finish-emoji { font-size:3rem; line-height:1; animation:pop .5s var(--ease-back); }
.hg-score-circle { width:90px; height:90px; border-radius:50%; background:var(--green); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:1.8rem; font-weight:900; box-shadow:0 5px 0 var(--green-dark),var(--shadow-lg); animation:pop .5s var(--ease-back) .1s both; }
.hg-score-circle small { font-size:.65rem; opacity:.85; }
.hg-finish-title { font-size:1.15rem; font-weight:900; }
.hg-finish-sub { font-size:.82rem; color:var(--text-light); max-width:240px; }
.hg-coll-row { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.hg-coll { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-sm); padding:4px 9px; font-size:1.25rem; display:flex; flex-direction:column; align-items:center; gap:1px; box-shadow:0 3px 0 var(--border-strong); }
.hg-coll small { font-size:.55rem; color:var(--text-light); font-weight:800; }

/* Адаптив — телефон: чуть крупнее ключи для удобного нажатия */
@media (max-width:480px) {
  .hg-char-big { font-size:4rem; }
  .hg-rad-c { font-size:1.6rem; }
  .hg-rad-grid { gap:7px; }
  .hg-key { width:58px; height:58px; }
  .hg-key-c { font-size:1.45rem; }
}



/* Режимные вкладки */
.hg-tabs {
  display: flex; background: var(--canvas);
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 4px; gap: 4px;
}
.hg-tab {
  flex: 1; padding: 9px 10px; border-radius: var(--radius-sm); border: none;
  font-family: inherit; font-size: 0.8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; transition: all 0.15s ease;
  color: var(--text-light); background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.hg-tab.active {
  background: var(--green); color: #fff;
  box-shadow: 0 3px 0 var(--green-dark);
}

/* Прогресс */
.hg-prog-bar {
  background: var(--border); border-radius: 40px; height: 8px; overflow: hidden;
}
.hg-prog-fill {
  height: 100%; border-radius: 40px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  transition: width 0.5s var(--ease);
}

/* Статы */
.hg-stats-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hg-stat-pill {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 40px; padding: 4px 14px;
  font-size: 0.82rem; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 4px;
}

/* ── ВИКТОРИНА ── */

/* Карточка иероглифа */
.hg-char-card {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 26px 22px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; overflow: hidden; text-align: center;
}
.hg-char-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}
.hg-char-lbl {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-light);
}
.hg-char-big {
  font-size: 5rem; line-height: 1; font-weight: 400; color: var(--text); user-select: none;
}
.hg-char-big.hg-pop { animation: pop 0.35s var(--ease-back); }
.hg-char-py { font-size: 1rem; font-weight: 800; color: var(--green); }
.hg-char-tr { font-size: 0.88rem; color: var(--text-light); }
.hg-char-hint {
  background: var(--green-soft); color: var(--green);
  border-radius: 40px; padding: 3px 14px;
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Сетка ключей для выбора */
.hg-rad-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.hg-rad {
  aspect-ratio: 1;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 4px 3px;
  box-shadow: 0 3px 0 var(--border-strong);
  transition: all 0.1s ease; user-select: none;
}
.hg-rad-c { font-size: 1.8rem; font-weight: 400; line-height: 1; color: var(--text); }
.hg-rad-s {
  font-size: 0.55rem; color: var(--text-light); font-weight: 700;
  text-align: center; line-height: 1.2; max-width: 100%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 2px;
}
.hg-rad:hover:not(.hg-locked) {
  border-color: var(--green); background: var(--green-soft);
  transform: translateY(-2px); box-shadow: 0 5px 0 var(--green-dark);
}
.hg-rad:hover:not(.hg-locked) .hg-rad-c { color: var(--green); }
.hg-rad:active:not(.hg-locked) { transform: translateY(3px); box-shadow: none; }
.hg-rad.hg-sel { border-color: var(--green); background: var(--green-soft); box-shadow: 0 3px 0 var(--green-dark); }
.hg-rad.hg-sel .hg-rad-c { color: var(--green-dark); }
.hg-rad.hg-correct { border-color: var(--green); background: var(--green-soft); box-shadow: 0 3px 0 var(--green-dark); animation: bounce 0.4s var(--ease-back); }
.hg-rad.hg-correct .hg-rad-c { color: var(--green-dark); }
.hg-rad.hg-wrong { border-color: var(--red); background: var(--red-soft); box-shadow: 0 3px 0 var(--red-dark); animation: shake 0.4s ease; }
.hg-rad.hg-wrong .hg-rad-c { color: var(--red-dark); }
.hg-rad.hg-missed { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 3px 0 var(--gold-dark); }
.hg-rad.hg-missed .hg-rad-c { color: var(--gold-dark); }
.hg-rad.hg-locked { pointer-events: none; }

/* Кнопки игры — используем классы .btn сайта, дополнительные стили */
.hg-btns { display: flex; gap: 10px; }
.hg-btns .btn { flex: 1; }
.hg-btns .btn-icon-only { flex: 0 0 auto; min-width: 48px; }

/* ── СВОБОДНАЯ СБОРКА ── */
.hg-free-section {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-light);
  margin-bottom: 4px;
}
.hg-free-section span {
  font-weight: 600; text-transform: none; letter-spacing: 0;
  font-size: 0.7rem; color: var(--text-light);
}
.hg-pool-wrap, .hg-hand-wrap {
  display: flex; flex-wrap: wrap; gap: 10px;
  background: var(--canvas); border-radius: var(--radius);
  padding: 12px; min-height: 72px; border: 2px solid var(--border);
}
.hg-hand-wrap { border-style: dashed; }
.hg-key {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: 60px; height: 60px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 3px 0 var(--border-strong);
  cursor: pointer; transition: all 0.1s ease; user-select: none; padding: 4px;
}
.hg-key-c { font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--text); }
.hg-key-s { font-size: 0.52rem; color: var(--text-light); font-weight: 700; text-align: center; line-height: 1.2; max-width: 52px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hg-pool-wrap .hg-key:hover { border-color: var(--green); background: var(--green-soft); transform: translateY(-2px); box-shadow: 0 5px 0 var(--green-dark); }
.hg-pool-wrap .hg-key:hover .hg-key-c { color: var(--green-dark); }
.hg-pool-wrap .hg-key:active { transform: translateY(3px); box-shadow: none; }
.hg-hand-wrap .hg-key:hover { border-color: var(--red); background: var(--red-soft); }
.hg-hand-wrap .hg-key:hover .hg-key-c { color: var(--red-dark); }
.hg-empty { color: var(--text-light); font-size: 0.82rem; width: 100%; text-align: center; padding: 8px 0; }

.hg-status-bar {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 60px; padding: 9px 18px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hg-status-ch {
  font-size: 1.8rem; line-height: 1;
  background: var(--canvas); padding: 2px 10px;
  border-radius: var(--radius-sm); border: 2px solid var(--border); min-width: 40px; text-align: center;
}
.hg-status-ch.hg-pop { animation: bounce 0.3s var(--ease-back); }
.hg-status-desc { font-size: 0.8rem; color: var(--text-light); }
.hg-status-desc strong { color: var(--text); }
.hg-status-prog { margin-left: auto; background: var(--canvas); padding: 2px 12px; border-radius: 40px; font-size: 0.72rem; font-weight: 800; border: 1px solid var(--border); }

.hg-log {
  font-size: 0.75rem; color: var(--text-light);
  background: var(--canvas); border-radius: var(--radius-sm);
  padding: 8px 14px; border: 1px solid var(--border);
  max-height: 70px; overflow-y: auto;
}
.hg-log div { padding: 2px 0; border-bottom: 1px solid var(--border); }
.hg-log div:last-child { border-bottom: none; }

/* Подсказки (модалка) */
.hg-hint-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0 18px; }
.hg-hint-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--canvas); padding: 8px 12px;
  border-radius: var(--radius-sm); border: 2px solid var(--border); min-width: 64px;
}
.hg-hint-item .hi-c { font-size: 1.9rem; line-height: 1.2; }
.hg-hint-item .hi-p { font-size: 0.7rem; color: var(--text-light); font-weight: 700; }
.hg-hint-item .hi-t { font-size: 0.65rem; color: var(--text-light); }

/* Финальный экран */
.hg-finish-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 12px 0;
}
.hg-finish-emoji { font-size: 3.5rem; line-height: 1; animation: pop 0.5s var(--ease-back); }
.hg-score-circle {
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 900;
  box-shadow: 0 5px 0 var(--green-dark), var(--shadow-lg);
  animation: pop 0.5s var(--ease-back) 0.1s both;
}
.hg-score-circle small { font-size: 0.68rem; opacity: 0.85; }
.hg-finish-title { font-size: 1.3rem; font-weight: 900; }
.hg-finish-sub { font-size: 0.85rem; color: var(--text-light); max-width: 260px; }
.hg-coll-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hg-coll {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 10px;
  font-size: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 1px;
  box-shadow: 0 3px 0 var(--border-strong);
}
.hg-coll small { font-size: 0.58rem; color: var(--text-light); font-weight: 800; }

@media (max-width: 480px) {
  .hg-char-big { font-size: 3.8rem; }
  .hg-rad-grid { gap: 7px; }
  .hg-rad-c { font-size: 1.5rem; }
  .hg-key { width: 52px; height: 52px; }
  .hg-key-c { font-size: 1.3rem; }
}


/* --- Собрать предложение --- */
.sentence-area { margin-bottom: 26px; }
.sentence-slots {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 58px; padding: 13px;
  background: var(--surface); border-radius: var(--radius-sm); border: 1.5px dashed var(--border);
  margin-bottom: 16px; align-items: center;
}
.sentence-slot {
  font-family: var(--font-display); background: var(--ink-blue-soft); border: 1.5px solid var(--ink-blue);
  border-radius: var(--radius-sm); padding: 8px 16px; font-size: 1.05rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s var(--ease-back); animation: pop 0.3s var(--ease-back);
}
.sentence-slot:hover { background: var(--cinnabar-soft); border-color: var(--cinnabar); transform: translateY(-2px); }
.sentence-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.word-tile {
  font-family: var(--font-display); background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 18px; font-size: 1.05rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s var(--ease-back); color: var(--text);
}
.word-tile:hover { border-color: var(--ink-blue); background: var(--ink-blue-soft); transform: translateY(-2px); }
.word-tile:active { transform: translateY(0) scale(0.96); }

/* --- Правда/Ложь --- */
.tf-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 26px; }
.tf-btn { padding: 20px; font-size: 1.05rem; border-radius: var(--radius); }
.tf-btn.selected { outline: 2.5px solid var(--ink-blue); outline-offset: -2.5px; }

/* --- Аудио --- */
.audio-player { text-align: center; margin-bottom: 26px; }
.audio-player audio { width: 100%; max-width: 400px; border-radius: var(--radius-sm); }
.audio-btn {
  width: 78px; height: 78px; border-radius: 50%;
  background: linear-gradient(155deg, var(--jade), var(--jade-hover)); color: #fff; border: none;
  font-size: 1.9rem; cursor: pointer; transition: transform 0.15s var(--ease-back), box-shadow 0.2s ease;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
  box-shadow: 0 8px 22px -6px var(--jade-glow);
}
.audio-btn:hover { transform: scale(1.06); }
.audio-btn:active { transform: scale(0.94); }
.audio-label { font-size: 0.88rem; color: var(--text-light); margin-bottom: 18px; }
.recording-active { background: #e5484d !important; color: #fff !important; border-color: #e5484d !important; animation: recPulse 1.2s ease-in-out infinite; }
@keyframes recPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0.5); } 50% { box-shadow: 0 0 0 8px rgba(229,72,77,0); } }

/* --- Выбор тона --- */
.tone-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-bottom: 26px; }
@media (min-width: 500px) { .tone-options { grid-template-columns: repeat(4, 1fr); } }
.tone-base { text-align: center; font-size: 2rem; margin: 0 auto 26px; display: table; }

/* --- Поля ввода --- */
.write-input, .pinyin-input {
  width: 100%; padding: 16px; font-size: 1.2rem; font-family: var(--font-display);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); text-align: center; margin-bottom: 12px;
  outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; background: var(--surface); color: var(--text);
}
.write-input:focus, .pinyin-input:focus { border-color: var(--ink-blue); box-shadow: 0 0 0 4px var(--ink-blue-soft); }
.pinyin-area { margin-bottom: 26px; }
.tone-buttons { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tone-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface);
  font-size: 1.1rem; font-family: inherit; cursor: pointer; transition: all 0.15s var(--ease-back);
  display: flex; align-items: center; justify-content: center; color: var(--text);
}
.tone-btn:hover { border-color: var(--ink-blue); background: var(--ink-blue-soft); transform: scale(1.08); }
.tone-btn:active { transform: scale(0.94); }

/* --- Обратная связь --- */
.feedback {
  padding: 16px; border-radius: var(--radius-sm); font-weight: 800; text-align: center;
  margin-bottom: 18px; animation: slideUp 0.35s var(--ease-back); font-size: 1rem;
}
.feedback.correct { background: var(--green-soft); color: var(--green-dark); border: 2px solid var(--green); }
.feedback.wrong { background: var(--red-soft); color: var(--red-dark); border: 2px solid var(--red); }

/* --- Липкая нижняя панель действий (в духе игровых языковых тренажёров) --- */
.task-actions {
  position: sticky; bottom: 12px; background: var(--surface); padding: 14px 16px;
  border-radius: var(--radius); border: 2px solid var(--border); box-shadow: var(--shadow);
  z-index: 5; transition: background 0.2s ease, border-color 0.2s ease;
}
.task-actions.is-correct { background: var(--green-soft); border-color: var(--green); }
.task-actions.is-wrong { background: var(--red-soft); border-color: var(--red); }
/* Нет ни одной видимой кнопки (сопоставление проверяется само) — не показываем
   пустую плашку. */
.task-actions:not(:has(> button:not(.hidden))) { display: none !important; }

/* --- Результаты --- */
.results { text-align: center; padding: 44px 20px; animation: slideUp 0.6s var(--ease); position: relative; }
.results h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.1rem); font-weight: 700; margin-bottom: 18px; color: var(--text); }
.stars { display: flex; justify-content: center; gap: 14px; margin: 22px 0; font-size: 2.6rem; }
.star { filter: grayscale(1); opacity: 0.25; transition: all 0.4s var(--ease-back); }
.star.filled { filter: grayscale(0) sepia(1) hue-rotate(0deg) saturate(3); opacity: 1; animation: pop 0.5s var(--ease-back); }
#result-stats { font-size: 1.02rem; color: var(--text-light); margin-bottom: 26px; }
#result-skipped-note { font-size: 0.92rem; color: var(--text-light); margin-top: -18px; margin-bottom: 26px; }

/* --- Confetti / Toast --- */
#confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 500; }
.confetti-piece { position: absolute; top: -12px; border-radius: 2px; animation: confettiFall linear forwards; }
#toast-container {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 10100; display: flex; flex-direction: column; gap: 10px; align-items: center;
  width: min(92vw, 420px); pointer-events: none;
}
.toast {
  pointer-events: auto; background: var(--surface); color: var(--text); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.92rem; font-weight: 600;
  box-shadow: var(--shadow-lg); animation: toastIn 0.35s var(--ease-back); max-width: 100%;
  white-space: pre-line; text-align: center; cursor: pointer;
}
.toast.success { border-color: var(--jade); }
.toast.error { border-color: var(--cinnabar); }
.toast.toast-confirm { cursor: default; text-align: left; border-color: var(--coral, #e05a5a); }
.toast-confirm-message { margin-bottom: 10px; white-space: pre-line; }
.toast-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.toast-confirm-actions button {
  border-radius: 8px; padding: 7px 14px; font-weight: 700; font-size: 0.85rem; cursor: pointer; border: 1.5px solid var(--border);
}
.toast-confirm-yes { background: var(--coral, #e05a5a); color: #fff; border-color: var(--coral, #e05a5a); }
.toast-confirm-no { background: var(--canvas); color: var(--text); }

/* --- FAB «Наверх» --- */
.fab-scroll-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 52px; height: 52px; border-radius: 50%;
  border: none; background: var(--ink-blue); color: #fff; font-size: 1.3rem; font-weight: 900; cursor: pointer;
  box-shadow: 0 6px 0 0 var(--ink-blue-dark, var(--blue-dark)), var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease;
}
.fab-scroll-top:hover { filter: brightness(1.06); }
.fab-scroll-top:active { transform: translateY(4px); box-shadow: var(--shadow-lg); }
.fab-scroll-top.hidden { opacity: 0; transform: translateY(12px); pointer-events: none; display: flex; }
@media (prefers-reduced-motion: reduce) { .fab-scroll-top { transition: none; } }

.feedback-list { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.feedback-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-alt, rgba(0,0,0,0.03)); text-decoration: none; color: inherit; transition: background 0.15s ease;
}
.feedback-item:hover { background: var(--surface-hover, rgba(0,0,0,0.06)); }
.feedback-item .feedback-icon { font-size: 1.4rem; flex-shrink: 0; }
.feedback-item .feedback-text { display: flex; flex-direction: column; }
.feedback-item .feedback-label { font-size: 0.78rem; color: var(--text-light); }
.feedback-item .feedback-value { font-weight: 700; }

/* --- Админка --- */
.admin-login { max-width: 380px; margin: 60px auto; text-align: center; animation: slideUp 0.5s var(--ease); }
.admin-login h2 { font-family: var(--font-display); font-weight: 700; margin-bottom: 22px; }
.admin-login input {
  width: 100%; padding: 14px; font-size: 0.98rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 16px; font-family: inherit; outline: none;
  background: var(--surface); color: var(--text); transition: border-color 0.2s ease;
}
.admin-login input:focus { border-color: var(--ink-blue); box-shadow: 0 0 0 4px var(--ink-blue-soft); }
.admin-login .hint { margin-top: 18px; font-size: 0.82rem; color: var(--text-light); line-height: 1.5; }
.admin-panel { padding: 16px 0; }
.admin-panel h2 { font-family: var(--font-display); font-weight: 700; margin-bottom: 14px; font-size: 1.45rem; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
/* --- Админка §44: курс над вкладками, 5 вкладок по смыслу --- */
.admin-course-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.admin-course-bar-label { display: block; font-size: 0.78rem; font-weight: 800; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.admin-course-bar-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-course-bar-row select {
  flex: 1 1 200px; min-width: 0; padding: 10px 34px 10px 12px; font-size: 0.95rem; font-weight: 700;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background-color: var(--bg); color: var(--text); font-family: inherit;
}
.admin-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-course-badge { font-size: 0.78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); }
body.dark-theme .admin-course-badge { color: var(--blue); }
.admin-course-warning { color: var(--red); margin: -6px 0 14px; }
.admin-tab-btn {
  appearance: none; border: none; background: none; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: 0.95rem; color: var(--text-light); padding: 10px 14px 12px;
  border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.15s ease, border-color 0.15s ease;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
}
.admin-tab-btn:hover { color: var(--text); }
.admin-tab-btn.active { color: var(--green); border-bottom-color: var(--green); }
.admin-tab-icon { font-size: 1.05rem; line-height: 1; }
.admin-group-toggle { appearance: none; border: none; background: none; font-family: inherit; padding: 6px 4px; }
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; animation: fadeIn 0.2s ease; }
/* На телефоне 5 вкладок в строку не влезают подписью рядом с иконкой —
   делаем как в нижнем меню: иконка сверху, короткая подпись снизу. */
@media (max-width: 600px) {
  .admin-panel h2 { font-size: 1.2rem; margin-bottom: 10px; }
  .admin-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; overflow: visible; }
  .admin-tab-btn { flex-direction: column; gap: 3px; padding: 8px 1px 9px; font-size: 0.62rem; letter-spacing: -0.01em; min-width: 0; }
  .admin-tab-icon { font-size: 1.3rem; }
  .admin-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
.admin-panel-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.admin-panel-toolbar-hint { flex-basis: 100%; margin: 2px 0 0; font-size: 0.8rem; color: var(--text-light); }
.admin-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* Строки уроков (вместо таблицы) */
.admin-lesson-list { display: flex; flex-direction: column; gap: 8px; min-height: 12px; }
.admin-lesson-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); min-width: 0;
}
.admin-lesson-row:hover { border-color: var(--ink-blue); }
.admin-lesson-row .drag-handle { cursor: grab; color: var(--text-light); font-size: 1.1rem; flex-shrink: 0; touch-action: none; user-select: none; padding: 4px 2px; }
.admin-lesson-icon { font-size: 1.4rem; flex-shrink: 0; width: 1.6em; text-align: center; }
.admin-lesson-main { flex: 1; min-width: 0; }
.admin-lesson-title { font-weight: 800; overflow-wrap: anywhere; }
.admin-lesson-meta { font-size: 0.8rem; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-lesson-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-icon-btn { min-width: 38px; justify-content: center; }
.admin-lesson-empty { color: var(--text-light); font-size: 0.88rem; padding: 6px 2px; }
.admin-group-add { margin-top: 8px; }
.admin-more-btn { flex-shrink: 0; min-width: 38px; }
@media (max-width: 520px) {
  .admin-lesson-row { flex-wrap: wrap; padding: 10px; gap: 8px; }
  .admin-lesson-main { flex-basis: calc(100% - 80px); }
  .admin-lesson-actions { flex-basis: 100%; }
  .admin-lesson-actions [data-action="edit"] { flex: 1; justify-content: center; }
  .admin-lesson-actions .btn { min-height: 40px; }
}
/* Меню действий «⋯» */
.admin-sheet { display: flex; flex-direction: column; gap: 6px; }
.admin-sheet-heading { font-size: 0.78rem; font-weight: 800; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.04em; margin: 8px 2px 0; }
.admin-sheet-item {
  text-align: left; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font-family: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.admin-sheet-item:hover:not(:disabled) { border-color: var(--ink-blue); background: var(--ink-blue-soft); }
.admin-sheet-item:disabled { opacity: 0.45; cursor: not-allowed; }
.admin-sheet-item.active { border-color: var(--jade); }
.admin-sheet-item.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
/* Вкладка «Инструменты» */
.admin-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.admin-tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.admin-tool-card .hint { flex: 1; margin: 0 0 6px; font-size: 0.84rem; color: var(--text-light); }
.admin-tool-card .btn { align-self: flex-start; }
.admin-tool-title { font-weight: 800; font-size: 1rem; }
.admin-danger-card { border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
/* Вкладка «Публикация» */
.admin-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.admin-filter-chip {
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px;
  padding: 6px 12px; font-family: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer;
}
.admin-filter-chip.active { background: var(--green); border-color: var(--green); color: #fff; }
.publish-status-row { display: flex; gap: 12px; align-items: center; margin: 4px 0 6px; }
.publish-status-icon { font-size: 1.8rem; flex-shrink: 0; }
.publish-status-title { font-weight: 800; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.course-vis-badge { font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.course-vis-public { background: var(--ink-blue-soft); color: var(--ink-blue); }
.course-vis-private { background: var(--green-soft); color: var(--green-dark, var(--green)); }
.inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; background: var(--canvas); padding: 1px 6px; border-radius: 6px; }
/* Выбор видимости (публичный/приватный) */
.visibility-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
.visibility-option {
  display: flex !important; flex-direction: column; gap: 2px; padding: 10px 12px; margin: 0 !important;
  border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--bg);
}
.visibility-option input { position: absolute; opacity: 0; pointer-events: none; }
.visibility-option.active { border-color: var(--green); background: var(--green-soft); }
.visibility-option-title { font-weight: 800; color: var(--text); font-size: 0.95rem; }
.visibility-option-desc { font-weight: 600; font-size: 0.78rem; color: var(--text-light); }
@media (max-width: 420px) { .visibility-choice { grid-template-columns: 1fr; } }
/* Окно «Доступ» */
.access-section { border-top: 1.5px dashed var(--border); padding-top: 12px; margin-top: 12px; }
.access-units { display: flex; flex-wrap: wrap; gap: 6px; }
.access-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font-size: 0.78rem; font-weight: 800; }
.access-chip-closed { border-color: var(--orange, #f0a030); }
.access-code.access-code-sm { font-size: 0.78rem; padding: 2px 6px; letter-spacing: 0.03em; white-space: nowrap; }
.access-row-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.access-row-dim { opacity: 0.6; }
.access-list-row-edit { display: block; }
.access-key-form { border: 2px solid var(--blue-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0; background: var(--bg); }
.access-key-form label { display: block; font-weight: 800; font-size: 0.82rem; margin: 8px 0 4px; }
.access-key-form .access-check, .access-key-form .unit-access-option { font-weight: 700; }
.access-key-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.access-key-grid .modal-input { margin: 0; width: 100%; }
.access-scope { margin: 6px 0; }
.access-scope .unit-access-option { padding: 4px 0; }
.access-scope-units { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 0 0 4px; }
.access-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; cursor: pointer; }
@media (max-width: 520px) {
  .access-list-row { flex-wrap: wrap; }
  .access-row-actions { width: 100%; justify-content: flex-start; }
}
.access-section h4 { margin: 0 0 6px; font-size: 0.98rem; }
.access-code-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.access-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.08em;
  background: var(--canvas); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; user-select: all;
}
.access-inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.access-inline .modal-input { flex: 1 1 160px; min-width: 0; margin: 0; }
.access-inline input[type="number"] { flex: 0 0 72px; width: 72px; }
.access-count-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--text-light); }
.access-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.access-list-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.access-list-main { flex: 1; min-width: 0; }
.access-list-name { font-weight: 800; overflow-wrap: anywhere; }
.access-list-sub { font-size: 0.78rem; color: var(--text-light); overflow-wrap: anywhere; }
.access-invite-icon { font-size: 1.2rem; flex-shrink: 0; }
.access-status { min-height: 1.1em; margin: 4px 0 0; }
.access-fresh-box { border: 2px solid var(--green); background: var(--green-soft); border-radius: var(--radius-sm); padding: 10px; margin: 8px 0; }
.access-fresh-codes { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; white-space: pre-wrap; margin: 0 0 8px; font-size: 0.95rem; user-select: all; }
/* Каталог курсов: ввод кода + раздел приватных */
.course-code-entry { margin-bottom: 12px; }
/* .hint внутри модалок раньше наследовал обычный размер текста — делаем
   его таким же мелким и приглушённым, как в карточках настроек. */
.modal .hint { font-size: 0.84rem; color: var(--text-light); line-height: 1.45; }
.course-code-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); }
.course-code-form.hidden { display: none !important; }
.course-code-form .modal-input { margin: 0; }
#courses-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.course-section-title { margin: 14px 0 8px; font-size: 0.95rem; }
.course-card-private { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.course-card-private-badge { background: var(--green-soft); color: var(--green-dark, var(--green)); }
.import-vocab-candidates-list { max-height: 340px; overflow-y: auto; border: 1.5px solid var(--border); border-radius: var(--radius-sm); }
.import-vocab-candidate-row {
  display: grid; grid-template-columns: 22px 1.1fr 1fr 1.6fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 0.92rem;
}
.import-vocab-candidate-row:last-child { border-bottom: none; }
.import-vocab-candidate-row:hover { background: var(--canvas); }
.import-vocab-candidate-row.already-added { opacity: 0.55; cursor: default; }
.import-vocab-candidate-hanzi { font-weight: 800; }
.import-vocab-candidate-pinyin, .import-vocab-candidate-translation { color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-vocab-candidate-badge { font-size: 0.72rem; font-weight: 700; color: var(--text-light); white-space: nowrap; }
@media (max-width: 640px) {
  .import-vocab-candidate-row { grid-template-columns: 22px 1fr; grid-template-areas: "cb hanzi" "cb pinyin" "cb translation" "cb badge"; row-gap: 2px; }
}
.admin-table { width: 100%; border-collapse: collapse; margin-bottom: 26px; font-size: 0.92rem; }
.admin-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 26px; }
.admin-table-scroll .admin-table { margin-bottom: 0; }
.admin-table-actions-cell { white-space: normal; }
/* Раскладка кнопок — на внутренней обёртке, а не на самой <td>: display:flex
   на ячейке выбивал её из табличной раскладки (кривые границы/ширина), и
   на ПК колонка действий не помещалась и обрезалась справа. */
.admin-table-actions { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.admin-table-actions-cell > .btn { margin: 2px; }
.btn-icon-only { padding: 8px 10px 10px; min-width: 38px; letter-spacing: 0; }
.admin-group-access-on { background: var(--gold-soft) !important; border-color: var(--gold) !important; }
.admin-table th, .admin-table td { border: 1px solid var(--border); padding: 11px; text-align: left; }
.admin-table th { background: var(--surface); font-weight: 700; }
.admin-table tr:nth-child(even) { background: rgba(0,0,0,0.015); }
.admin-table tr { transition: background 0.15s ease; }
.admin-table tr:hover td { background: var(--jade-soft); }
/* На узких экранах таблицы админки (уроки/словарь) раньше листались вбок
   (.admin-table-scroll — overflow-x: auto) — по прямой жалобе пользователя
   "экран нужно листать слишком широкий". Ниже 680px таблица превращается
   в стопку карточек: каждая строка — своя карточка, каждая ячейка — пара
   "подпись: значение" (подпись берётся из data-label, тот же текст, что
   и в заголовке колонки на десктопе — не дублируем перевод отдельно).
   Ячейка действий (.admin-table-actions-cell) без подписи — кнопки в ней
   самоописательны. Горизонтального скролла на этой ширине больше нет. */
@media (max-width: 680px) {
  .admin-table-scroll { overflow-x: visible; }
  .admin-table-scroll .admin-table thead { display: none; }
  .admin-table-scroll .admin-table, .admin-table-scroll .admin-table tbody,
  .admin-table-scroll .admin-table tr, .admin-table-scroll .admin-table td {
    display: block; width: 100%;
  }
  .admin-table-scroll .admin-table tr {
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: 12px; overflow: hidden;
  }
  .admin-table-scroll .admin-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border: none; border-bottom: 1px solid var(--border); text-align: right;
    /* white-space: normal — правило ниже (max-width: 600px) ставит ячейкам
       nowrap, и в режиме карточек длинный перевод вылезал за край (§44). */
    white-space: normal; overflow-wrap: anywhere; min-width: 0;
  }
  .admin-table-scroll .admin-table td:last-child { border-bottom: none; }
  .admin-table-scroll .admin-table td[data-label]::before {
    content: attr(data-label); font-weight: 700; color: var(--text-light);
    text-align: left; flex-shrink: 0; margin-right: 10px;
  }
  .admin-table-scroll .admin-table td:empty { display: none; }
  .admin-table-scroll .admin-table td.admin-table-actions-cell {
    justify-content: flex-start; text-align: left;
  }
}
/* --- Строка инлайн-редактирования слова словаря (см. openVocabWordForm):
   форма открывается прямо в таблице рядом со словом, а не отдельно наверху
   экрана — не нужно скроллить, чтобы найти её после клика "Изменить". --- */
.vocab-inline-edit-row td { padding: 0; border: none; background: transparent; }
.vocab-inline-edit-row .admin-form { margin: 8px 0 14px; border-radius: var(--radius-sm); border-left: 4px solid var(--jade); animation: fadeIn 0.2s var(--ease); }
.admin-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 26px; box-shadow: var(--shadow); }
.admin-form label { display: block; font-weight: 700; margin-bottom: 6px; margin-top: 14px; font-size: 0.9rem; color: var(--text-light); }
.admin-form input, .admin-form textarea, .admin-form select {
  width: 100%; padding: 11px; font-size: 0.98rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; outline: none; margin-bottom: 8px; background-color: var(--bg); color: var(--text); transition: border-color 0.2s ease;
}
.admin-form select { padding-right: 34px; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus { border-color: var(--ink-blue); box-shadow: 0 0 0 4px var(--ink-blue-soft); }
.admin-form textarea { resize: vertical; min-height: 80px; }
.task-editor-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px; transition: border-color 0.2s ease; }
.task-editor-item:hover { border-color: var(--ink-blue); }
.task-editor-item .task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; cursor: pointer; }
.task-header-title { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.task-header-toggle { color: var(--text-light); padding: 8px; }
.task-move-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-light);
  font-size: 0.85rem; cursor: pointer; flex-shrink: 0; margin-right: 2px;
}
.task-move-btn:hover:not(:disabled) { background: var(--jade-soft); color: var(--jade); border-color: var(--jade); }
.task-move-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.task-editor-item .task-content { display: none; }
.task-editor-item.expanded .task-content { display: block; animation: fadeIn 0.25s ease; }
.task-editor-item .task-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* --- Мобильные экраны: крупнее зоны нажатия для учителей, которым неудобно
   попадать по мелким кнопкам (перетаскивание, удаление вариантов и т.д.) --- */
@media (max-width: 600px) {
  .admin-form { padding: 16px; }
  .admin-form input, .admin-form textarea, .admin-form select { padding: 13px 12px; font-size: 1rem; }
  .admin-form select { padding-right: 36px; }
  .task-drag-handle, .task-move-btn { width: 40px; height: 40px; font-size: 1.1rem; }
  .task-header-toggle { font-size: 1.2rem; padding: 10px; }
  .dynamic-list-item, .dynamic-pair-item { gap: 10px; }
  .dynamic-list-item .btn-remove, .dynamic-pair-item .btn-remove {
    min-width: 40px; min-height: 40px; font-size: 1rem; padding: 8px 12px;
  }
  .task-editor-item .task-actions .btn,
  .admin-group-actions .btn { padding: 10px 14px; font-size: 0.92rem; }
  .admin-table .col-desc { display: none; }
  .admin-table th, .admin-table td { padding: 9px 8px; white-space: nowrap; }
  .admin-table .drag-handle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
  .admin-table-actions-cell .btn { padding: 9px 12px; font-size: 0.85rem; min-height: 38px; }
  .admin-table select { min-width: 130px; padding: 10px 8px; }
}

/* Группы уроков по главам в админке (бывшие "task-section") */
.admin-group { margin-bottom: 18px; }
.admin-group-header { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; flex-wrap: wrap; }
.admin-group-toggle { cursor: pointer; font-size: 0.78rem; color: var(--text-light); width: 16px; text-align: center; user-select: none; flex-shrink: 0; }
.admin-group-titles { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px; }
.admin-group-title-input { width: 100%; border: 1.5px solid transparent; background: transparent; font-weight: 800; font-size: 0.98rem; padding: 5px 7px; border-radius: 8px; color: var(--text); font-family: inherit; }
.admin-group-title-input:hover { border-color: var(--border); }
.admin-group-title-input:focus { border-color: var(--ink-blue); background: var(--bg); outline: none; }
.admin-group-desc-input { width: 100%; border: 1.5px solid transparent; background: transparent; font-size: 0.84rem; color: var(--text-light); padding: 4px 7px; border-radius: 8px; font-family: inherit; }
.admin-group-desc-input:hover { border-color: var(--border); }
.admin-group-desc-input:focus { border-color: var(--ink-blue); background: var(--bg); outline: none; color: var(--text); }
.admin-group-title-static { flex: 1; font-weight: 700; color: var(--text-light); font-style: italic; padding: 5px 7px; }
.admin-group-count { font-size: 0.78rem; font-weight: 700; color: var(--text-light); background: var(--canvas); border-radius: 10px; padding: 2px 10px; flex-shrink: 0; }
.admin-group-actions { display: flex; gap: 4px; flex-shrink: 0; }
.admin-group-actions .btn { padding: 5px 10px; }
.admin-group-body { padding: 12px 0 2px 18px; border-left: 2px solid var(--border); margin: 8px 0 0 9px; }
.admin-group.collapsed .admin-group-body { display: none; }
@media (max-width: 600px) {
  .admin-group-body { padding-left: 8px; margin-left: 4px; }
  .admin-group-header { padding: 8px 10px; }
}
.admin-table select { width: auto; min-width: 180px; padding: 8px 30px 8px 10px; font-size: 0.9rem; border: 1.5px solid var(--border); border-radius: 10px; font-family: inherit; background-color: var(--bg); color: var(--text); outline: none; cursor: pointer; }
.admin-table select:focus { border-color: var(--ink-blue); }

/* --- Drag-and-drop: перетаскивание заданий и уроков в редакторе --- */
.drag-handle {
  cursor: grab; touch-action: none; user-select: none; color: var(--text-light);
  font-size: 1.1rem; padding: 2px 8px; flex-shrink: 0; border-radius: 6px;
}
.drag-handle:hover { background: var(--canvas); color: var(--text); }
.drag-handle:active { cursor: grabbing; }
.drag-source-hidden { visibility: hidden; }
.drag-ghost { list-style: none; }
tr.drag-ghost { display: table; }
.drag-placeholder { background: transparent; }
.task-editor-item .task-header { gap: 8px; }
.task-drag-handle { margin-right: 2px; }

/* --- Главы на экране уроков (стиль Duolingo) --- */
.chapter-nav-wrap { position: relative; display: flex; align-items: center; gap: 6px; }
.chapter-nav { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 16px; margin-bottom: 4px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; flex: 1; min-width: 0; }
.chapter-nav-btn { flex-shrink: 0; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: inherit; font-weight: 800; font-size: 0.82rem; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; white-space: nowrap; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 6px; }
.chapter-nav-btn:hover { border-color: var(--ink-blue); }
.chapter-nav-btn:active { transform: scale(0.96); }
.chapter-nav-btn.current { background: var(--ink-blue); border-color: var(--ink-blue); color: #fff; }
.chapter-nav-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--border-strong); }
.chapter-nav-btn.completed .chapter-nav-dot { background: var(--green); }
.chapter-nav-btn.locked .chapter-nav-dot { background: var(--text-light); }
.chapter-nav-btn.locked { opacity: 0.75; cursor: not-allowed; }
.chapter-nav-btn.current .chapter-nav-dot { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.chapter-nav-lock-icon { font-size: 0.74rem; }
.chapter-nav-arrow { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 900; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s ease; }
.chapter-nav-arrow:hover { border-color: var(--ink-blue); }
.chapter-nav-arrow.hidden { display: none; }
.chapter-goto-btn { margin-top: 14px; background: var(--surface); color: var(--text); box-shadow: 0 3px 0 0 rgba(0,0,0,0.18); }
.chapter-goto-btn:hover { filter: brightness(1.08); }
.chapter-goto-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.3); }
.chapter-block { margin-bottom: 8px; scroll-margin-top: 16px; }
.chapter-header { border-radius: var(--radius); padding: 20px 24px; margin-bottom: 28px; color: #fff; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.chapter-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 15%, rgba(255,255,255,0.16), transparent 60%); pointer-events: none; }
.chapter-number { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.chapter-title { font-family: var(--font-display); font-size: 1.32rem; font-weight: 900; margin-top: 2px; }
.chapter-desc { font-size: 0.9rem; font-weight: 600; opacity: 0.92; margin-top: 6px; max-width: 60ch; }
.chapter-header.c0 { background: linear-gradient(135deg, var(--green), var(--green-dark)); }
.chapter-header.c1 { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); }
.chapter-header.c2 { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); }
.chapter-header.c3 { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.chapter-header.c4 { background: linear-gradient(135deg, var(--red), var(--red-dark)); }

.settings-card { background: var(--surface); border-radius: var(--radius); padding: 22px; margin-bottom: 26px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.resume-lesson-banner { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; background: var(--jade); color: #fff; border: none; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; font-weight: 800; font-size: 0.95rem; cursor: pointer; text-align: left; }
.resume-lesson-banner:active { transform: scale(0.98); }
.settings-card h3 { font-weight: 700; margin-bottom: 12px; font-size: 1.05rem; }
.settings-card label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.9rem; color: var(--text-light); }
.settings-card select {
  width: 100%; padding: 11px 34px 11px 11px; font-size: 0.98rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; background-color: var(--bg); color: var(--text); margin-bottom: 12px;
}
.settings-card input[type="text"], .settings-card input[type="email"], .settings-card input[type="password"] {
  width: 100%; box-sizing: border-box; padding: 11px; font-size: 0.98rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; background-color: var(--bg); color: var(--text); margin-bottom: 12px; outline: none; transition: border-color 0.15s ease;
}
.settings-card input[type="text"]:focus, .settings-card input[type="email"]:focus, .settings-card input[type="password"]:focus {
  border-color: var(--ink-blue); box-shadow: 0 0 0 4px var(--ink-blue-soft);
}
.settings-card input[type="text"]::placeholder, .settings-card input[type="email"]::placeholder, .settings-card input[type="password"]::placeholder {
  color: var(--text-light); opacity: 0.7;
}
body.dark-theme .settings-card input[type="text"], body.dark-theme .settings-card input[type="email"], body.dark-theme .settings-card input[type="password"] {
  background-color: var(--surface); color: var(--text); border-color: var(--border);
}
.settings-card .hint { font-size: 0.82rem; color: var(--text-light); margin-top: 4px; margin-bottom: 12px; }
/* Тот же вид, что у .settings-card input[type=text/email/password] (см.
   выше), но для полей вне .settings-card — в частности поиск в витрине
   курсов и email в модалке друзей. Без этого такие инпуты рендерились
   голым системным белым полем браузера — не только не в тон дизайну, но
   и буквально белым посреди тёмной темы. */
.modal-input, input.modal-input {
  padding: 11px; font-size: 0.98rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; background-color: var(--bg); color: var(--text); outline: none; transition: border-color 0.15s ease;
}
.modal-input:focus { border-color: var(--ink-blue); box-shadow: 0 0 0 4px var(--ink-blue-soft); }
.modal-input::placeholder { color: var(--text-light); opacity: 0.7; }
body.dark-theme .modal-input { background-color: var(--surface); color: var(--text); border-color: var(--border); }
.remote-only-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; vertical-align: middle;
  background: var(--jade-soft); color: var(--jade); border-radius: 999px; padding: 3px 10px;
}
.btn-link {
  appearance: none; border: none; background: none; padding: 4px 0; cursor: pointer;
  color: var(--ink-blue); font-weight: 700; font-size: 0.9rem; font-family: inherit; text-decoration: underline;
}
.btn-link:hover { color: var(--ink-blue-hover, var(--ink-blue)); }
.password-field-wrapper { position: relative; }
.password-field-wrapper input[type="text"], .password-field-wrapper input[type="password"] {
  padding-right: 44px;
}
.password-toggle-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; margin-top: -6px;
  display: flex; align-items: center; justify-content: center;
  appearance: none; border: none; background: none; padding: 0; cursor: pointer;
  color: var(--text-light); border-radius: 6px;
}
.password-toggle-btn:hover { color: var(--text); background: var(--ink-blue-soft); }
.password-toggle-btn svg { width: 20px; height: 20px; display: block; }
.account-agree-row {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; cursor: pointer;
  font-size: 0.85rem; color: var(--text-light); font-weight: 500;
}
.account-agree-row + .account-agree-row { margin-top: 6px; }
.legal-update-links { margin: 8px 0 8px 20px; line-height: 1.9; }
.account-agree-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }
.account-registration-closed-note {
  background: var(--gold-soft); border: 1.5px solid var(--gold); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 0.9rem; line-height: 1.5; color: var(--text); margin-bottom: 4px;
}

/* --- Экран настроек --- */
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-weight: 800; font-size: 0.98rem; }
.settings-row-desc { font-size: 0.82rem; color: var(--text-light); font-weight: 500; margin-top: 2px; }
.credits-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.credits-item { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 0.85rem; }
.credits-item a { color: var(--blue); font-weight: 700; text-decoration: none; }
.credits-item a:hover { text-decoration: underline; }

/* --- Аватар (профиль/друзья) --- */
.profile-card-row { display: flex; align-items: center; gap: 14px; }
.avatar-circle {
  border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--purple-soft, var(--ink-blue-soft)); border: 2px solid var(--border);
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.avatar-circle img.avatar-fallback-logo { width: 96%; height: 96%; object-fit: contain; }
.profile-avatar-btn { padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; }
.profile-avatar-btn .avatar-circle { border-color: var(--ink-blue); transition: transform 0.15s var(--ease-back); }
.profile-avatar-btn:hover .avatar-circle { transform: scale(1.05); }
.username-badge { font-weight: 700; color: var(--ink-blue); font-size: 0.85rem; }
.avatar-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.avatar-tab-btn {
  flex: 1; padding: 8px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.avatar-tab-btn.active { background: var(--ink-blue); border-color: var(--ink-blue); color: #fff; }
.avatar-swatch-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; justify-content: center; }
.avatar-swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0;
}
.avatar-swatch.active { border-color: var(--ink-blue); box-shadow: 0 0 0 2px var(--ink-blue-soft); }
/* Свотчи лица/причёски конструктора аватара — крупнее и квадратные (не
   круглые, как цветовые), чтобы вписанный SVG-превью не обрезался и
   форма причёски/лица была узнаваема на таком маленьком размере. */
.avatar-part-swatch {
  width: 52px; height: 44px; border-radius: var(--radius-sm); background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.avatar-part-swatch svg { width: 100%; height: 100%; }
.avatar-accessory-btn {
  font-size: 1.3rem; padding: 6px 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--surface); cursor: pointer;
}
.avatar-accessory-btn.active { border-color: var(--ink-blue); background: var(--ink-blue-soft); }
.avatar-crop-frame {
  width: 220px; height: 220px; margin: 0 auto; border-radius: 50%; overflow: hidden; position: relative;
  background: var(--canvas); border: 2px dashed var(--border); touch-action: none; cursor: grab;
}
.avatar-crop-frame img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; pointer-events: none; }
.friend-card { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.friend-card:last-child { border-bottom: none; }
.friend-card-name { font-weight: 800; font-size: 0.95rem; }
.friend-card-sub { font-size: 0.78rem; color: var(--text-light); font-weight: 600; }
.friend-shared-streak { font-size: 0.82rem; font-weight: 700; color: var(--orange, #e07b1e); white-space: nowrap; }
.credits-license { font-size: 0.72rem; color: var(--text-light); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.credits-use { font-size: 0.8rem; color: var(--text-light); }
.settings-icon-btn { width: 46px; height: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; border-radius: 14px; background: var(--canvas); border: 1.5px solid var(--border); flex-shrink: 0; }
.settings-icon-btn.muted-toggle { opacity: 0.5; }
.settings-lang-switch { display: flex; gap: 8px; background: var(--canvas); border-radius: 999px; padding: 6px; width: fit-content; }
.settings-lang-switch .lang-btn { min-width: 52px; padding: 8px 14px; font-size: 0.9rem; }
.text-size-options { display: flex; gap: 10px; flex-wrap: wrap; }
.text-size-btn {
  border: 1.5px solid var(--border); background: var(--canvas); border-radius: 12px; padding: 10px 18px;
  cursor: pointer; font-weight: 800; color: var(--text); transition: all 0.15s ease;
}
.text-size-btn.active { border-color: var(--jade); background: var(--jade-soft); box-shadow: 0 0 0 3px var(--jade-glow); }
.course-card-item {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--jade); background: var(--jade-soft); font-weight: 700;
}
.course-card-future { opacity: 0.65; margin-top: 10px; font-size: 0.85rem; }
.course-pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.course-pill {
  border: 1.5px solid var(--border); background: var(--canvas); border-radius: 999px;
  padding: 7px 14px; font-weight: 700; font-size: 0.85rem; cursor: pointer; color: var(--text);
  transition: all 0.15s ease;
}
.course-pill:hover { border-color: var(--jade); }
.course-pill-active { border-color: var(--jade); background: var(--jade-soft); }
.course-switch-block, .course-demo-block {
  margin-top: 16px; padding-top: 16px; border-top: 1.5px dashed var(--border);
}
.course-switch-title { font-weight: 800; margin-bottom: 8px; }
.course-switch-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.course-switch-row label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; flex: 1; min-width: 220px; }
.course-switch-row select {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 34px 8px 10px;
  background-color: var(--canvas); color: var(--text); font-weight: 600;
}
.course-switch-msg { margin-top: 8px; font-size: 0.85rem; color: var(--coral, #e05a5a); min-height: 1.2em; }
.course-demo-hint { font-size: 0.85rem; opacity: 0.75; margin: 0 0 10px; }
.course-mgr-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--canvas);
}
.course-mgr-row.course-mgr-row-active { border-color: var(--jade); background: var(--jade-soft); }
.course-mgr-row-label { flex: 1; font-weight: 700; }
.course-mgr-row input[type="text"] {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 8px; font-weight: 600;
  background: var(--surface, var(--canvas)); color: var(--text); width: 100%;
}
.course-mgr-row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.course-mgr-action-group { display: flex; gap: 4px; }
.course-mgr-row-actions button {
  border: 1.5px solid var(--border); background: var(--canvas); color: var(--text); font-family: inherit; border-radius: 8px; padding: 6px 10px; min-height: 34px;
  cursor: pointer; font-size: 0.85rem; font-weight: 600; white-space: nowrap;
}
.course-mgr-row-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
.course-mgr-delete-danger { border-color: var(--coral, #e05a5a); color: var(--coral, #e05a5a); margin-left: auto; }
.course-mgr-add-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed var(--border); }
/* --- Визуальный конструктор видов заданий (§41) — палитра + холст --- */
.ctt-palette-chip {
  border: 1.5px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 6px 12px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all .15s ease;
}
.ctt-palette-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.ctt-palette-chip.ctt-chip-active { background: var(--jade); color: #fff; border-color: var(--jade); }
.ctt-canvas-wrap {
  position: relative; margin-top: 14px; border: 1.5px dashed var(--border); border-radius: var(--radius);
  background: var(--bg); overflow: auto; -webkit-overflow-scrolling: touch;
  min-height: 220px; max-height: 60vh; touch-action: none;
}
.ctt-canvas-svg { position: absolute; top: 0; left: 0; pointer-events: none; }
.ctt-canvas-curve { fill: none; stroke: var(--jade); stroke-width: 2; opacity: 0.55; }
.ctt-node {
  position: absolute; display: flex; align-items: center; gap: 8px; min-width: 140px;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-weight: 700; font-size: 0.88rem; cursor: grab; user-select: none;
  box-shadow: var(--shadow); touch-action: none;
}
.ctt-node-dragging { cursor: grabbing; box-shadow: 0 6px 18px rgba(0,0,0,0.18); z-index: 5; }
.ctt-node-interaction { border-color: var(--jade); background: var(--jade-soft); font-size: 0.95rem; }
.ctt-node-check { border-color: var(--blue, #1cb0f6); opacity: 0.9; }
.ctt-node-content { border-style: dashed; }
.ctt-node-icon { font-size: 1.15rem; flex-shrink: 0; }
.ctt-builtin-note { color: var(--text-light); }
@media (max-width: 640px) {
  .ctt-canvas-wrap { min-height: 260px; }
}
.course-mgr-add-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.course-mgr-add-form select, .course-mgr-add-form input[type="text"] {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px;
  background-color: var(--canvas); color: var(--text); font-weight: 600;
}
.course-mgr-add-form select { padding-right: 34px; }
.admin-course-switcher { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.admin-course-switcher select { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 34px 8px 10px; font-weight: 700; background-color: var(--canvas); color: var(--text); }

/* --- Динамические списки --- */
.correct-picker-checkboxes { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; padding: 8px 10px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); }
.correct-picker-checkbox-item { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.correct-picker-checkbox-item input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; cursor: pointer; }
.dynamic-list, .dynamic-pair-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dynamic-list-item, .dynamic-pair-item { display: flex; gap: 8px; align-items: center; }
.dynamic-list-item input, .dynamic-pair-item input { flex: 1; margin-bottom: 0 !important; }
.dynamic-list-item .btn-remove, .dynamic-pair-item .btn-remove {
  padding: 6px 10px; font-size: 0.78rem; background: var(--surface); color: var(--cinnabar); border: 1px solid var(--cinnabar); border-radius: var(--radius-sm);
}
.dynamic-list-item .btn-remove:hover, .dynamic-pair-item .btn-remove:hover { background: var(--cinnabar); color: #fff; }

/* --- Панель словаря внутри урока --- */
.task-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
/* Выход из урока: раньше из урока можно было уйти только через меню. Урок не
   теряется — на главной появляется плашка «продолжить урок». */
.task-exit-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); color: var(--text-light); font-size: 1.05rem; font-weight: 800; cursor: pointer; line-height: 1; transition: color .15s, border-color .15s; }
.task-exit-btn:hover, .task-exit-btn:focus-visible { color: var(--text); border-color: var(--border-strong); }
#btn-lesson-vocab { font-size: 0.82rem; }

/* --- Экран «Словарь» --- */
.vocab-controls { margin-bottom: 20px; }
.vocab-search {
  width: 100%; padding: 13px 16px; font-size: 0.98rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-family: inherit; background: var(--surface); color: var(--text);
  margin-bottom: 12px;
}
.vocab-search:focus { border-color: var(--ink-blue); outline: none; }
.vocab-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.vocab-filter-btn {
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 700; font-size: 0.85rem;
  cursor: pointer; font-family: inherit; transition: all 0.15s var(--ease);
}
.vocab-filter-btn:hover { border-color: var(--ink-blue); }
.vocab-filter-btn.active { background: var(--ink-blue); border-color: var(--ink-blue); color: #fff; }

.vocab-group { margin-bottom: 24px; }
.vocab-group-title {
  font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-light); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--border);
}
.vocab-items { display: flex; flex-direction: column; gap: 8px; }
.vocab-item {
  display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); flex-wrap: wrap;
}
.vocab-item .vocab-hanzi { font-size: 1.5rem; font-weight: 700; font-family: var(--font-display); }
.vocab-item .vocab-pinyin { color: var(--ink-blue); font-weight: 700; font-size: 0.92rem; }
.vocab-item .vocab-translation { color: var(--text-light); font-size: 0.92rem; margin-left: auto; }
.vocab-audio-btn {
  border: none; background: var(--jade); color: #fff; width: 30px; height: 30px; border-radius: 50%;
  font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.15s var(--ease-back);
}
.vocab-audio-btn:hover { transform: scale(1.08); }
.vocab-audio-btn:active { transform: scale(0.92); }
.btn-icon.muted-toggle { opacity: 0.55; }
.vocab-empty { text-align: center; color: var(--text-light); padding: 30px 0; }

/* --- Списки слов внутри модалки урока --- */
.vocab-modal-group { margin-bottom: 16px; }
.vocab-modal-group:last-child { margin-bottom: 0; }
.vocab-modal-group-title { font-weight: 700; font-size: 0.85rem; color: var(--text-light); margin-bottom: 8px; }
.vocab-modal-items { display: flex; flex-direction: column; gap: 6px; }
.vocab-modal-item {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; background: var(--canvas);
  border-radius: var(--radius-sm); flex-wrap: wrap;
}
.vocab-modal-item .vocab-hanzi { font-size: 1.25rem; font-weight: 700; }
.vocab-modal-item .vocab-pinyin { color: var(--ink-blue); font-weight: 700; font-size: 0.85rem; }
.vocab-modal-item .vocab-translation { color: var(--text-light); font-size: 0.85rem; margin-left: auto; }

/* --- Модальное окно --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,14,10,0.55); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 10000; padding: 16px;
}
.modal-overlay.active { display: flex; animation: fadeIn 0.2s ease; }
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; max-width: 500px; width: 100%; max-height: 80vh; overflow-y: auto;
  animation: pop 0.3s var(--ease-back); box-shadow: var(--shadow-lg);
}
.modal h3 { font-weight: 700; margin-bottom: 16px; font-family: var(--font-display); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.legal-doc h4 { font-size: 1rem; font-weight: 800; margin: 18px 0 8px; }
.legal-doc h4:first-child { margin-top: 0; }
.legal-doc p { margin-bottom: 10px; line-height: 1.5; }
.legal-doc ul { margin: 0 0 10px; padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; line-height: 1.5; }
.legal-doc a { color: var(--ink-blue); font-weight: 700; }
.legal-doc p, .legal-doc li { font-size: 0.9rem; }
.legal-doc .legal-meta { font-size: 0.82rem; color: var(--text-light); font-style: italic; }
.legal-doc table.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 0.88rem; }
.legal-doc .legal-table th, .legal-doc .legal-table td { border: 1px solid var(--border); padding: 7px 9px; text-align: left; vertical-align: top; line-height: 1.4; }
.legal-doc .legal-table th { background: var(--canvas); font-weight: 800; }
.legal-links { display: flex; flex-direction: column; gap: 4px; }
.legal-links a { color: var(--ink-blue); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 0.92rem; }
.marketplace-course-item {
  display: flex; align-items: center; gap: 12px; padding: 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 10px;
}
.marketplace-course-icon { font-size: 1.8rem; flex-shrink: 0; }
.marketplace-course-info { flex: 1; min-width: 0; }
.marketplace-course-title { font-weight: 800; }
.marketplace-course-desc { font-size: 0.85rem; color: var(--text-light); margin-top: 2px; }
.marketplace-course-meta { font-size: 0.78rem; color: var(--text-light); margin-top: 4px; }
.my-course-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.my-course-actions .btn { white-space: nowrap; }
.course-search-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.course-search-bar input[type="text"] { flex: 1; min-width: 160px; }
.course-search-bar select { flex-shrink: 0; }
.course-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.course-card {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 14px;
  display: flex; flex-direction: column; gap: 8px; position: relative;
}
.course-card-header { display: flex; align-items: center; gap: 10px; }
.course-card-icon { font-size: 1.9rem; flex-shrink: 0; }
.course-card-title { font-weight: 800; line-height: 1.25; }
.course-card-desc { font-size: 0.85rem; color: var(--text-light); flex: 1; }
.course-card-langs { font-weight: 700; font-size: 0.85rem; }
.course-card-author { font-size: 0.78rem; color: var(--text-light); }
.course-card-meta { font-size: 0.75rem; color: var(--text-light); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.course-card-owned-badge {
  margin-left: auto; align-self: flex-start; flex-shrink: 0;
  font-size: 0.7rem; font-weight: 700; color: var(--green, #2fae5c);
  background: rgba(47, 174, 92, 0.14);
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
/* Курс, на который вела ссылка #course=НОМЕР */
.course-card.course-card-focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
@media (max-width: 480px) {
  .marketplace-course-item { flex-wrap: wrap; }
  /* не сжимать кнопки уже их текста — лишние переносятся на следующую строку */
  .my-course-actions { flex-direction: row; flex-wrap: wrap; width: 100%; margin-top: 8px; }
  .my-course-actions .btn { flex: 1 1 auto; }
}

/* --- Видеозвонок --- */
.call-hint { margin-bottom: 18px; }
.call-video-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.call-video-toggle input { width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; }
.call-video-off-placeholder { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; background: var(--surface); color: var(--text-light); font-size: 2rem; }
.call-video-off-placeholder span.label-text { font-size: 0.75rem; font-weight: 700; }
.call-video-wrap-local.video-off video, .call-video-wrap-remote.video-off video { display: none; }
.call-video-wrap-local.video-off .call-video-off-placeholder, .call-video-wrap-remote.video-off .call-video-off-placeholder { display: flex; }
.call-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 18px; margin-bottom: 14px;
}
.call-box-label { display: block; font-size: 0.82rem; color: var(--text-light); font-weight: 700; margin-bottom: 8px; }
.call-my-code {
  font-family: "Nunito", monospace; font-size: 1.6rem; font-weight: 900; letter-spacing: 0.04em;
  color: var(--green-dark); margin-bottom: 10px; word-break: break-all;
}
.call-join-row { display: flex; gap: 10px; flex-wrap: wrap; }
.call-join-row input {
  flex: 1 1 180px; padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font); font-weight: 700; font-size: 1rem; background: var(--bg); color: var(--text);
}
.call-join-row input:focus { border-color: var(--blue); outline: none; }
.call-status { min-height: 1.4em; font-weight: 700; color: var(--text-light); }
.call-videos {
  position: relative; background: #111; border-radius: var(--radius-sm); overflow: hidden;
  margin-bottom: 18px; box-shadow: var(--shadow);
}
.call-video-wrap-remote { position: relative; width: 100%; aspect-ratio: 16/9; background: #111; }
.call-video-wrap-remote video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Своё видео — маленький перетаскиваемый PIP-блок поверх видео собеседника, как в Zoom/WhatsApp */
.call-video-wrap-local {
  position: absolute; right: 12px; bottom: 12px; width: 30%; max-width: 190px; min-width: 84px;
  aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  border: 2px solid rgba(255,255,255,0.55); cursor: grab; touch-action: none; z-index: 5; background: #222;
}
.call-video-wrap-local.dragging { cursor: grabbing; transition: none !important; }
.call-video-wrap-local video { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-video-label {
  position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 0.78rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; pointer-events: none;
}
.call-video-wrap-local .call-video-label { font-size: 0.68rem; padding: 2px 7px; left: 5px; bottom: 5px; }

/* --- Режим «доска/презентация»: собственное видео и видео собеседника
   уступают место общей доске/слайдам, становятся компактной полоской.
   Своё видео по умолчанию сворачивается в кружок, разворачивается по клику. --- */
.call-room.board-focus .call-videos {
  max-width: 300px; margin: 0 auto 14px; transition: max-width 0.25s var(--ease);
}
.call-room.board-focus .call-video-wrap-local {
  width: 40px; height: 40px; aspect-ratio: 1/1; border-radius: 50%; right: 6px; bottom: 6px;
  transition: width 0.25s var(--ease), height 0.25s var(--ease), border-radius 0.25s var(--ease);
}
.call-room.board-focus .call-video-wrap-local .call-video-label { display: none; }
.call-room.board-focus .call-video-wrap-local::after {
  content: '⤢'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.85rem; text-shadow: 0 1px 3px rgba(0,0,0,0.7); pointer-events: none;
}
.call-room.board-focus .call-video-wrap-local.expanded {
  width: 34%; max-width: 150px; aspect-ratio: 4/3; border-radius: 12px;
}
.call-room.board-focus .call-video-wrap-local.expanded .call-video-label { display: block; }
.call-room.board-focus .call-video-wrap-local.expanded::after { content: '⤡'; font-size: 1rem; }
.call-room.board-focus .call-panel { box-shadow: var(--shadow-lg); }
@media (min-width: 700px) {
  .call-room.board-focus .call-videos { max-width: 340px; }
}
.call-connection-indicator {
  position: absolute; left: 12px; top: 12px; z-index: 6; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 0.78rem; font-weight: 700; padding: 5px 10px; border-radius: 20px; display: flex; align-items: center; gap: 5px;
}
.call-controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.call-ctrl-btn { font-size: 1.2rem; padding: 12px 16px; }
.call-mute-badge {
  position: absolute; right: 8px; top: 8px; background: var(--red); color: #fff;
  font-size: 0.95rem; line-height: 1; padding: 6px 8px; border-radius: 50%; box-shadow: var(--shadow); z-index: 6;
}
@media (max-width: 520px) {
  .call-controls .call-ctrl-text { display: none; }
  .call-controls .call-ctrl-icon { font-size: 1.05rem; }
}
.call-panel {
  position: relative; margin-top: 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px; animation: fadeIn 0.2s ease;
}
.call-panel-close { position: absolute; right: 8px; top: 8px; z-index: 2; padding: 6px 10px; }
.call-chat-messages {
  display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; margin-bottom: 12px; padding-right: 4px;
}
.call-chat-msg {
  max-width: 82%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--bg);
  border: 1px solid var(--border); font-size: 0.92rem; align-self: flex-start;
}
.call-chat-msg.own { align-self: flex-end; background: var(--blue-soft); border-radius: 14px 14px 4px 14px; }
.call-chat-msg.system { align-self: center; background: transparent; color: var(--text-light); font-size: 0.82rem; font-style: italic; }
.call-chat-input-row { display: flex; gap: 8px; }
.call-chat-input-row input {
  flex: 1; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font); background: var(--bg); color: var(--text);
}
.call-chat-input-row input:focus { border-color: var(--blue); outline: none; }
.call-board-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.call-board-tools { display: flex; gap: 6px; }
.board-tool-btn.active { background: var(--blue-soft); color: var(--blue-dark); }
.board-select { padding: 8px 34px 8px 10px; border: 2px solid var(--border); border-radius: var(--radius-sm); background-color: var(--bg); color: var(--text); font-family: var(--font); font-weight: 700; }
.call-board-hint { margin: 0 0 10px; font-size: 0.8rem; }
.call-board-tool { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--text-light); }
.call-board-canvas-wrap { position: relative; }
.call-board-canvas {
  width: 100%; height: auto; display: block; background: #fff; border-radius: var(--radius-sm);
  border: 2px solid var(--border); touch-action: none; cursor: crosshair;
}
.call-board-canvas-wrap.tool-hand .call-board-canvas { cursor: grab; }
.call-board-canvas-wrap.tool-text .call-board-canvas { cursor: text; }
.board-text-input {
  position: absolute; z-index: 10; border: 2px dashed var(--blue); background: rgba(255,255,255,0.95); color: #222;
  font-family: var(--font); font-weight: 700; padding: 2px 4px; border-radius: 4px; min-width: 60px;
}
.call-presentation-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.call-presentation-counter { font-weight: 700; color: var(--text-light); min-width: 54px; text-align: center; }
.call-presentation-view {
  background: #111; border-radius: var(--radius-sm); border: 2px solid var(--border);
  min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 10px;
}
.call-presentation-view img { max-width: 100%; max-height: 60vh; display: block; border-radius: 4px; }
.call-presentation-view .hint { color: #ccc; text-align: center; margin: 0; }
.call-ctrl-off { background: var(--red-soft) !important; color: var(--red-dark) !important; }
.call-ctrl-active { background: var(--blue-soft) !important; color: var(--blue-dark) !important; }
@media (max-width: 560px) {
  .call-video-wrap-local { width: 36%; right: 8px; bottom: 8px; }
  .call-ctrl-btn { padding: 14px 16px; min-height: 44px; }
  .call-board-tools .btn, .call-board-toolbar .btn { min-width: 40px; min-height: 40px; padding: 8px 10px; }
  .call-board-tool input[type="range"] { width: 70px; }
  .board-select { padding: 10px 8px; }
}
/* Чат/доска/презентация на мобильных — выезжающая снизу панель поверх видео,
   а не блок в общем скролле страницы (иначе приходится долго скроллить мимо
   видео и кнопок, чтобы добраться до доски) */
@media (max-width: 560px) {
  .call-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: 30%; z-index: 40;
    margin-top: 0; border-radius: 16px 16px 0 0; overflow-y: auto;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.3);
  }
}

/* --- Адаптивность --- */
@media (min-width: 600px) {
  .options { grid-template-columns: 1fr 1fr; }
  .match-columns { grid-template-columns: 1fr 1fr; }
  .lesson-node:nth-child(8n+2), .lesson-node:nth-child(8n+4) { margin-left: 74px; }
  .lesson-node:nth-child(8n+3) { margin-left: 110px; }
  .lesson-node:nth-child(8n+6), .lesson-node:nth-child(8n+8) { margin-left: -74px; }
  .lesson-node:nth-child(8n+7) { margin-left: -110px; }
  .question .chinese { font-size: 4rem; }
}
@media (min-width: 768px) {
  .app { padding: 0 24px; }
}
/* --- Десктоп: больше воздуха и чуть крупнее базовый текст, раз есть место --- */
@media (min-width: 900px) {
  .app { max-width: 880px; }
  html:not(.text-size-sm):not(.text-size-lg):not(.text-size-xl) { font-size: 17px; }
  .header { padding: 22px 4px; }
}
@media (min-width: 1200px) {
  .app { max-width: 960px; }
}

/* --- Нижняя навигация (мобильные устройства) в духе Duolingo:
   на телефоне переносим основные разделы вниз экрана, под большой палец,
   а из шапки на мобильном оставляем только лого и бейджи. Скрывается при
   скролле вниз и появляется обратно при скролле вверх. --- */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px -10px rgba(0,0,0,0.25);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  transition: transform 0.25s var(--ease);
}
.bottom-nav.nav-hidden { transform: translateY(100%); }
.bottom-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; background: none; border: none; color: var(--text-light); cursor: pointer;
  padding: 7px 4px 5px; border-radius: 12px; font-family: inherit;
}
.bottom-nav-btn .bnav-icon { font-size: 1.4rem; line-height: 1; }
.bottom-nav-btn .bnav-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.01em; }
.bottom-nav-btn.active { color: var(--jade); }
.bottom-nav-btn { position: relative; }
/* --- Группы --- */
#screen-groups h2 { margin-bottom: 14px; }
.groups-mode-tabs { margin-bottom: 14px; }
/* на телефоне .admin-tabs — сетка на 5 вкладок редактора; у групп их 2 и 4 */
@media (max-width: 600px) {
  .groups-mode-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-detail-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2px; }
  .group-detail-tabs .admin-tab-btn { font-size: 0.78rem; white-space: normal; text-align: center; }
}
.groups-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.groups-inline-form .modal-input { flex: 1; min-width: 160px; }
.group-card { display: block; width: 100%; text-align: left; }
.group-card-link { cursor: pointer; border: 2px solid var(--border); font: inherit; color: inherit; }
.group-card-link:hover { border-color: var(--blue); }
.group-card-invite { border: 2px solid var(--gold); }
.group-section-title { margin: 16px 0 8px; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); }
.group-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.group-row:last-child { border-bottom: none; }
.group-row-main { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.group-member-row .group-person { flex: 1; min-width: 200px; }
.group-person { display: flex; align-items: center; gap: 10px; }
.group-person-text { display: flex; flex-direction: column; line-height: 1.25; }
.group-person-handle { font-size: 0.8rem; color: var(--text-light); }
.group-note { background: var(--canvas); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 6px 0; }
.group-note-text { white-space: pre-wrap; }
.group-note-meta { font-size: 0.78rem; color: var(--text-light); margin-bottom: 2px; }
.group-note-inline { font-size: 0.85rem; color: var(--text-light); }
.group-card-footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.group-code-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--border); }
.group-code { font-size: 1.3rem; letter-spacing: 0.12em; font-family: ui-monospace, Consolas, monospace; }
.group-name-input { font-weight: 800; font-size: 1.05rem; }
.group-unit-toggle { cursor: pointer; }
.group-result { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; margin: 6px 0; }
.group-result summary, details.group-card summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.group-result .mistake-item { margin-top: 8px; }
.groups-homework-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: end; padding: 0; background: none !important; border: none; }
.groups-homework-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 0.85rem; }
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 900; white-space: nowrap; }
.status-ok { background: var(--green-soft); color: var(--green-dark); }
.status-warn { background: var(--gold-soft); color: var(--gold-dark); }
.status-bad { background: var(--red-soft); color: var(--red-dark); }
.status-wait { background: var(--blue-soft); color: var(--blue-dark); }
body.dark-theme .status-ok { color: var(--green-hover); }
body.dark-theme .status-warn { color: var(--gold); }
body.dark-theme .status-bad { color: var(--red-hover); }
body.dark-theme .status-wait { color: var(--blue); }
.link-btn { background: none; border: none; padding: 0 4px; color: var(--blue); cursor: pointer; font-weight: 700; font-size: 0.8rem; text-decoration: underline; }
.unit-access-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.unit-access-option input { margin-top: 4px; }
/* --- Редактор аватара (Personas) --- */
.modal.modal-wide { max-width: 760px; width: calc(100vw - 32px); }
.avatar-builder { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.avatar-builder-preview { display: flex; flex-direction: column; align-items: center; gap: 12px; position: sticky; top: 0; }
.avatar-builder-preview img, .avatar-mascot-preview { width: 180px; height: 180px; border-radius: 50%; border: 3px solid var(--border); background: var(--canvas); }
.avatar-mascot-preview { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.avatar-mascot-preview img { width: 100%; height: 100%; object-fit: contain; border: none; border-radius: 0; background: none; }
.avatar-part-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.avatar-part-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; min-width: 64px; }
.avatar-part-tab span { font-size: 1.3rem; line-height: 1; }
.avatar-part-tab small { font-size: 0.7rem; font-weight: 800; color: var(--text-light); }
.avatar-part-tab.active { border-color: var(--green); background: var(--green-soft); }
.avatar-part-tab.active small { color: var(--green-dark); }
body.dark-theme .avatar-part-tab.active small { color: var(--green-hover); }
.avatar-part-body { max-height: 44vh; overflow-y: auto; padding-right: 4px; }
.avatar-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
.avatar-option { aspect-ratio: 1; border: 2px solid var(--border); border-radius: 14px; background: var(--canvas); padding: 0; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.avatar-option img { width: 100%; height: 100%; display: block; transform-origin: 50% 45%; }
.avatar-option.active { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.avatar-option-none { display: flex; flex-direction: column; align-items: center; font-size: 1.3rem; }
.avatar-option-none small { font-size: 0.65rem; font-weight: 800; color: var(--text-light); }
.avatar-color-row { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-color-dot { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--border); cursor: pointer; padding: 0; }
.avatar-color-dot.active { box-shadow: 0 0 0 3px var(--green); }
@media (max-width: 640px) {
  .avatar-builder { grid-template-columns: 1fr; }
  .avatar-builder-preview { position: static; }
  .avatar-builder-preview img, .avatar-mascot-preview { width: 140px; height: 140px; }
  .avatar-part-body { max-height: 40vh; }
  .avatar-part-tabs { flex-wrap: nowrap; gap: 4px; }
  .avatar-part-tab { flex: 1; min-width: 0; padding: 6px 2px; }
  .avatar-part-tab small { font-size: 0.62rem; }
}
.chapter-block-locked .chapter-header { opacity: 0.6; filter: grayscale(0.6); }
.chapter-locked-note { text-align: center; color: var(--text-light); font-weight: 700; margin: 14px 0 28px; }

/* --- Верхнее меню разделов (ПК: значок + подпись) --- */
.top-nav { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.top-nav-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; border: 2px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 800; font-size: 0.78rem;
  cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease;
}
.top-nav-btn:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.top-nav-btn.active { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
body.dark-theme .top-nav-btn.active { color: var(--green-hover); }
.top-nav-btn .tnav-icon { font-size: 1rem; line-height: 1; }
.top-nav-btn.tnav-admin { margin-left: auto; }
.top-nav { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.tnav-more { position: relative; }
.tnav-more-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 120; min-width: 190px;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--surface); border: 2px solid var(--border); border-radius: 16px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35);
}
.tnav-more-menu.hidden { display: none; }
.top-nav-btn.tnav-menu-item { border-color: transparent; border-radius: 12px; padding: 9px 12px; font-size: 0.85rem; justify-content: flex-start; }
.top-nav-btn.tnav-menu-item:hover { border-color: var(--blue-soft); }
/* Подписи не влезают в строку (крупный шрифт, длинный язык, узкое окно) —
   кнопки только значками, название — во всплывающей подсказке (fitTopNav). */
.top-nav.tnav-compact > .top-nav-btn .tnav-label,
.top-nav.tnav-compact > .tnav-more > .top-nav-btn .tnav-label { display: none; }
.top-nav.tnav-compact .top-nav-btn:not(.tnav-menu-item) { padding: 6px 9px; }
.tnav-dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); }
.bottom-nav-btn .tnav-dot { top: 2px; right: calc(50% - 18px); }
.bottom-nav-btn:active { transform: scale(0.94); }

@media (max-width: 768px) {
  .bottom-nav { display: flex; }
  /* эти разделы на телефоне — в нижнем меню */
  .top-nav #btn-home, .top-nav #btn-vocabulary-nav, .top-nav #btn-courses-nav,
  .top-nav #btn-groups-nav, .top-nav #btn-settings-nav { display: none; }
  /* остальные — только значками, без подписей */
  .top-nav { flex-basis: auto; margin-left: auto; gap: 5px; }
  .top-nav-btn { padding: 6px 9px; }
  .top-nav-btn .tnav-label { display: none; }
  .top-nav-btn.tnav-menu-item .tnav-label { display: inline; }
  .tnav-more-menu { left: auto; right: 0; }
  /* Телефон: шапка строго в одну строку (лого, 🔥, 💎, ☰, ✏️) — раньше
     значки серии/опыта выталкивали меню на вторую строку «бутербродом». */
  .header { flex-wrap: nowrap; gap: 6px; }
  .header-actions { flex-wrap: nowrap; margin-left: auto; min-width: 0; }
  .top-nav { flex-shrink: 0; margin-left: 0; }
  .top-nav-btn.tnav-admin { margin-left: 0; }
  body { padding-bottom: 68px; }
  .fab-scroll-top { bottom: 78px; }
}

/* --- Мобильные экраны: раньше здесь не было ни одного
   max-width брейкпоинта, поэтому шапка (лого + бейджи +
   переключатель языка + иконки) не помещалась по ширине
   и либо вылезала за край, либо всё сжималось в кашу --- */
@media (max-width: 520px) {
  .app { padding: 0 14px; }
  .header { padding: 12px 2px; margin-bottom: 16px; row-gap: 8px; }
  .logo { font-size: 1.02rem; gap: 7px; }
  .logo #app-title-text { max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-actions { gap: 5px; }
  .streak-badge, .xp-badge { padding: 5px 9px; font-size: 0.78rem; }
  .lang-switch { margin-right: 2px; padding: 3px; }
  .lang-btn { min-width: 28px; padding: 5px 7px; font-size: 0.7rem; }
  .btn-icon { padding: 8px 10px; }
  .btn-small { padding: 8px 11px; font-size: 0.72rem; }
  .match-columns { gap: 10px; }
  .task-image img { max-width: 150px; max-height: 150px; }
}
@media (max-width: 520px) {
  /* когда видны 🔥/💎, название не помещается — остаётся значок-осьминог */
  .header:has(.streak-badge:not(.hidden-badge)) #app-title-text,
  .header:has(.xp-badge:not(.hidden-badge)) #app-title-text { display: none; }
  .header .streak-badge, .header .xp-badge { padding: 4px 8px; gap: 4px; }
}
@media (max-width: 360px) {
  .logo #app-title-text { display: none; }
  .streak-badge span:not(.flame), .xp-badge span:not(.xp-gem) { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   Плашка загрузки демо-контента (octolearn-demo-content-bundle.*.json)
   Раньше это был блокирующий на весь экран оверлей, который держал
   пользователя перед пустым белым фоном, пока грузился демо-бандл (это
   могло занимать заметное время на медленном интернете). Теперь вместо
   этого сразу открывается сам интерфейс приложения, а пока демо-контент
   грузится в фоне — в углу экрана крутится ненавязчивое уведомление
   (.demo-loader-badge). Эта же панель (#demo-content-loader) при этом
   никуда не делась: по клику на уведомление она открывается как обычное
   диалоговое окно (полупрозрачная подложка, а не сплошной фон) — там же
   остались "Повторить попытку"/"Продолжить без демо-уроков"/"Сообщить о
   проблеме", и добавлена кнопка "Вернуться к приложению", которая просто
   закрывает панель, не прерывая загрузку в фоне.
   ============================================================ */
#demo-content-loader {
  position: fixed; inset: 0; z-index: 10001;
  display: none; align-items: center; justify-content: center;
  background: rgba(15,14,10,0.55); backdrop-filter: blur(3px);
  padding: 20px;
}
#demo-content-loader.active { display: flex; animation: fadeIn 0.2s ease; }
.demo-loader-card {
  max-width: 380px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-lg); max-height: 85vh; overflow-y: auto;
  box-sizing: border-box; animation: pop 0.3s var(--ease-back);
}
.demo-loader-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 5px solid var(--green-soft, #ece0ff);
  border-top-color: var(--green, #9455ff);
  animation: demo-loader-spin 0.8s linear infinite;
}
@keyframes demo-loader-spin { to { transform: rotate(360deg); } }
.demo-loader-text { font-weight: 700; color: var(--text, #4b4b4b); font-size: 1.05rem; }
.demo-loader-subtext { font-size: 0.9rem; color: var(--text-muted, #777); }
.demo-loader-warning {
  display: none;
  flex-direction: column; align-items: center; gap: 10px;
  margin-top: 4px; padding: 14px; border-radius: 12px;
  background: var(--yellow-soft, #fff4d6); border: 2px solid var(--yellow, #ffc800);
  width: 100%; box-sizing: border-box;
}
.demo-loader-warning.visible { display: flex; }
.demo-loader-warning p { margin: 0; font-size: 0.9rem; }
.demo-loader-warning button {
  flex-shrink: 1; min-width: 0; max-width: 100%;
  white-space: normal; overflow-wrap: break-word; word-break: break-word;
}
.demo-loader-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
body.dark-theme .demo-loader-spinner { border-color: rgba(255,255,255,0.15); border-top-color: var(--green, #9455ff); }
body.dark-theme .demo-loader-warning { background: rgba(255,200,0,0.12); }

/* --- Плавающее уведомление в углу экрана: демо-уроки грузятся в фоне --- */
.demo-loader-badge {
  position: fixed; right: 16px; bottom: 20px; z-index: 9500;
  display: none; align-items: center; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px;
  padding: 10px 16px; box-shadow: var(--shadow-lg, 0 10px 30px -10px rgba(0,0,0,0.35));
  cursor: pointer; font-weight: 700; font-size: 0.85rem; color: var(--text);
  max-width: calc(100vw - 32px); box-sizing: border-box;
  animation: fadeIn 0.25s ease; transition: transform 0.15s ease;
}
.demo-loader-badge:active { transform: scale(0.96); }
.demo-loader-badge.visible { display: flex; }
.demo-loader-badge-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid var(--green-soft, #ece0ff); border-top-color: var(--green, #9455ff);
  animation: demo-loader-spin 0.8s linear infinite;
}
.demo-loader-badge.demo-loader-badge-error { border-color: var(--yellow, #ffc800); }
.demo-loader-badge.demo-loader-badge-error .demo-loader-badge-spinner { display: none; }
.demo-loader-badge-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) {
  .demo-loader-badge { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 12px; }
}


/* ══════════════════════════════════════════════════════
   ПРОПИСЬ — СТИЛИ
   Экран: панель настроек + живые листы A4. Лист всегда «бумажный»
   (белый, тёмный текст) в любой теме. Размеры листа и клеток — в px
   при 96 dpi (A4 = 794×1123), поэтому печать совпадает с превью.
   ══════════════════════════════════════════════════════ */
/* Пропись шире остальных экранов: на ПК рядом панель и лист. */
.app:has(#screen-worksheet.active) { max-width: 1280px; }
.ws-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 60px; }
.ws-panel {
  position: sticky; top: 96px; max-height: calc(100vh - 110px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 18px; display: flex; flex-direction: column; gap: 10px;
}
.ws-heading { font-size: 1.35rem; font-weight: 900; }
.ws-lead { color: var(--text-light); font-size: .86rem; font-weight: 600; margin-top: -6px; }
.ws-label { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-light); margin-top: 6px; }
.ws-text-input {
  width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font); font-weight: 700; font-size: .95rem; background: var(--canvas); color: var(--text); outline: none; transition: border-color .2s;
}
.ws-text-input:focus { border-color: var(--green); background: var(--surface); }
.ws-text-input::placeholder { color: var(--text-light); font-weight: 600; }
.ws-add-row { display: flex; gap: 8px; }
.ws-char-input { font-size: 1.25rem; }
.ws-add-btn { flex-shrink: 0; width: 52px; padding: 0 0 3px; font-size: 1.6rem; line-height: 1; }
.ws-hint { font-size: .76rem; color: var(--text-light); font-weight: 600; line-height: 1.4; margin-top: -4px; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-chips:empty { display: none; }
.ws-chip {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent; background: var(--green-soft); color: var(--green-dark);
  font-size: 1.15rem; font-weight: 800; font-family: var(--font); line-height: 1.4; animation: wsChipPop .25s var(--ease-back) both;
}
body.dark-theme .ws-chip { color: var(--green-hover); }
.ws-chip-word { background: var(--blue-soft); color: var(--blue-dark); }
.ws-chip-pen { margin-left: 6px; font-size: .8rem; opacity: .55; }
.ws-chip:hover .ws-chip-pen, .ws-chip[aria-expanded="true"] .ws-chip-pen { opacity: 1; }
.ws-chips-hint { flex-basis: 100%; margin: 2px 0 0; }
.ws-chip[aria-expanded="true"] { border-color: currentColor; }
@keyframes wsChipPop { 0%{transform:scale(.6);opacity:0} 70%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.ws-item-editor { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--canvas); display: grid; gap: 8px; }
.ws-item-editor[hidden] { display: none; }
.ws-ie-head { display: flex; align-items: center; gap: 8px; }
.ws-ie-hanzi { font-size: 1.7rem; font-weight: 900; line-height: 1; margin-right: auto; }
.ws-ie-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--border); background: var(--surface);
  font-size: .95rem; font-weight: 800; cursor: pointer; color: var(--text); line-height: 1;
}
.ws-ie-btn:hover:not(:disabled) { background: var(--blue-soft); border-color: var(--blue-soft); }
.ws-ie-btn:disabled { opacity: .35; cursor: default; }
.ws-ie-btn.ws-ie-del:hover { background: var(--red-soft); border-color: var(--red-soft); color: var(--red); }
.ws-ie-field { display: grid; gap: 3px; font-size: .72rem; font-weight: 800; color: var(--text-light); text-transform: uppercase; letter-spacing: .03em; }
.ws-ie-field input { padding: 8px 10px; font-size: .92rem; text-transform: none; letter-spacing: 0; }
.ws-opt-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.ws-opt-name { font-size: .86rem; font-weight: 800; }
.ws-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; margin-left: auto; background: var(--canvas); border: 1px solid var(--border); border-radius: 999px; padding: 3px; flex-shrink: 0; }
.ws-seg label { cursor: pointer; }
.ws-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ws-seg span { display: block; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: var(--text-light); white-space: nowrap; }
.ws-seg input:checked + span { background: var(--green); color: #fff; }
.ws-seg input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 1px; }
.ws-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .86rem; line-height: 1.35; padding: 4px 0; }
.ws-check input { accent-color: var(--green); width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.ws-check small { color: var(--text-light); font-weight: 600; }
.ws-more { border-top: 1px solid var(--border); padding-top: 8px; }
.ws-more summary { cursor: pointer; font-weight: 800; font-size: .9rem; color: var(--blue); padding: 4px 0; list-style-position: inside; }
.ws-more[open] { display: flex; flex-direction: column; gap: 10px; }
.ws-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ws-actions .btn { width: 100%; }
.ws-preview { min-width: 0; }
/* Телефон: лист ниже панели — плавающая кнопка «к листу». */
.ws-jump { display: none; }
@media (max-width: 980px) {
  .ws-jump:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 80;
    padding: 10px 16px 12px; border: none; border-radius: 999px; background: var(--green); color: #fff; font-weight: 800; font-size: .9rem; box-shadow: 0 4px 0 0 var(--green-dark), var(--shadow-lg); cursor: pointer; }
}
.ws-preview-head { display: flex; justify-content: space-between; align-items: center; min-height: 24px; margin-bottom: 8px; font-size: .84rem; font-weight: 800; color: var(--text-light); }
.ws-status { font-weight: 700; }
.ws-empty { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 48px 20px; text-align: center; color: var(--text-light); font-weight: 700; }
.ws-empty-sheet { font-size: 4rem; line-height: 1; opacity: .25; margin-bottom: 10px; font-family: var(--font-display); }
.ws-empty[hidden] { display: none; }
.ws-pages { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ws-page-frame { position: relative; box-shadow: var(--shadow-lg); border-radius: 4px; overflow: hidden; background: #fff; }
.ws-page-frame > .ws-page { transform-origin: top left; }
.ws-page-item { display: flex; flex-direction: column; gap: 6px; }
.ws-page-label { font-size: .76rem; font-weight: 800; color: var(--text-light); }

/* ── Сам лист (одинаково на экране и при печати) ── */
.ws-page {
  width: 794px; height: 1123px; padding: 38px 40px 30px; background: #fff; color: #222; color-scheme: light;
  display: flex; flex-direction: column; font-family: var(--font); overflow: hidden;
}
.ws-page-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid #ececec; }
.ws-page-title { font-size: 1.2rem; font-weight: 900; color: #333; }
.ws-page-name { display: flex; align-items: center; gap: 8px; color: #777; font-size: .78rem; font-weight: 700; text-align: right; line-height: 1.3; }
.ws-page-name img { width: 34px; height: 34px; }
.ws-page-top-compact { padding-bottom: 6px; margin-bottom: 10px; }
.ws-page-top-compact .ws-page-title { font-size: .9rem; color: #888; }
.ws-page-body { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--ws-cols, 1), minmax(0, 1fr)); column-gap: 26px; align-content: start; }
.ws-col { min-width: 0; }
.ws-page-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #eee; padding-top: 7px; margin-top: 8px; font-size: .7rem; color: #9a9a9a; font-weight: 700; }
.ws-page-foot b { color: #7a4fd0; }

.ws-block { margin-bottom: 22px; break-inside: avoid; }
.ws-block-title { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ws-cont-hanzi { font-size: 1.3rem !important; color: #999 !important; }
.ws-block-hanzi { font-size: 2.3rem; font-weight: 900; line-height: 1; color: #222; font-family: var(--font-display); }
.ws-block-pinyin { font-size: .95rem; color: #555; font-weight: 800; }
.ws-block-meaning { font-size: .8rem; color: #888; font-weight: 600; }
.ws-sub { margin-bottom: 6px; }
.ws-block-word .ws-sub { padding-left: 10px; border-left: 3px solid #f0f0f0; }
.ws-sub-head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin: 4px 0 2px; }
.ws-sub-hanzi { font-size: 1.3rem; font-weight: 900; line-height: 1; }
.ws-parts-line { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
.ws-parts-pic { width: 44px; height: 44px; position: relative; flex-shrink: 0; }
.ws-parts-pic .ws-glyph { position: absolute; inset: 0; width: 100%; height: 100%; }
.ws-parts-text { font-size: .84rem; color: #444; line-height: 1.5; font-weight: 600; }
.ws-part b { font-size: 1.12rem; font-weight: 900; }
.ws-part-tag { font-size: .6rem; color: #888; margin-left: 4px; border: 1px solid #ddd; border-radius: 4px; padding: 0 4px; vertical-align: 2px; }
.ws-stroke-row { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 7px; }
.ws-stroke-box { width: var(--ws-stroke); height: var(--ws-stroke); flex-shrink: 0; border: 1px solid #f0f0f0; border-radius: 4px; }
.ws-stroke-box svg { display: block; width: 100%; height: 100%; }
.ws-cells { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
/* «Вплотную»: клетки стоят сеткой без промежутков, соседние рамки
   совпадают (сдвиг на 1px), как в обычной тетради. */
.ws-cells.ws-dense { gap: 0; padding: 0 1px 1px 0; }
.ws-cells.ws-dense > .ws-unit-wrap { margin: 0 -1px -1px 0; }
.ws-presets { display: flex; flex-direction: column; gap: 6px; }
.ws-preset-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ws-preset { padding: 8px 4px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--canvas); color: var(--text); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.ws-preset:hover { border-color: var(--green); }
.ws-preset.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
body.dark-theme .ws-preset.active { color: var(--green-hover); }
.ws-num { display: inline-flex; align-items: stretch; margin-left: auto; border: 1px solid var(--border); border-radius: 999px; background: var(--canvas); overflow: hidden; }
.ws-num button { width: 34px; border: 0; background: none; color: var(--text); font: inherit; font-size: 1.1rem; font-weight: 900; cursor: pointer; }
.ws-num button:hover { background: var(--green-soft); }
.ws-num input { width: 48px; border: 0; background: none; color: var(--text); font: inherit; font-weight: 800; text-align: center; -moz-appearance: textfield; }
.ws-num input::-webkit-outer-spin-button, .ws-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ws-num input:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.ws-mode-hint { margin: -2px 0 2px; }
.ws-unit-wrap { display: flex; flex-direction: column; gap: 2px; }
.ws-unit-svg, .ws-py-svg { display: block; }
.ws-page.ws-size-s { --ws-stroke: 32px; }
.ws-page.ws-size-m { --ws-stroke: 38px; }
.ws-page.ws-size-l { --ws-stroke: 44px; }

/* ── Печать: только листы прописи, каждый на своём листе бумаги ──
   Листы копируются в #ws-print-root прямо в <body> (см. wsPreparePrint),
   а всё остальное приложение прячется display:none — раньше прятали
   visibility:hidden, место оставалось, и пропись уезжала на 3 листа. */
#ws-print-root { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body.ws-printing > *:not(#ws-print-root) { display: none !important; }
  body.ws-printing { background: #fff !important; }
  body.ws-printing #ws-print-root { display: block; }
  #ws-print-root .ws-page { width: 210mm; height: 296.5mm; page-break-after: always; break-after: page; }
  #ws-print-root .ws-page:last-child { page-break-after: auto; break-after: auto; }
  #ws-print-root, #ws-print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 980px) {
  .ws-layout { grid-template-columns: minmax(0, 1fr); }
  .ws-panel { position: static; max-height: none; overflow: visible; }
}
@media screen and (max-width: 600px) {
  .ws-panel { padding: 16px 14px; }
  .ws-pages { gap: 12px; }
}
/* END ПРОПИСЬ */

/* «Подтвердите почту» в Настройки → Аккаунт */
.email-verify-card {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  background-color: var(--surface-alt);
}
.email-verify-card .hint { margin: 6px 0; }
.email-verify-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.email-verify-row input { width: 9em; margin: 0; letter-spacing: 0.15em; }
/* Окно «Забыли пароль?» */
.forgot-form .modal-input { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; }
.forgot-form [hidden] { display: none; }
.forgot-form #forgot-code { letter-spacing: 0.15em; }
.forgot-form .btn-link { display: block; margin-top: 10px; }
/* «Безопасность и данные» */
.security-section { padding: 10px 0 14px; border-bottom: 1px solid var(--border); }
.security-section h4 { margin: 0 0 6px; }
.security-section .hint { margin: 4px 0 10px; }
.security-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.security-danger { margin-top: 14px; border: 1px solid var(--red-soft); border-radius: 12px; padding: 10px 12px; }
.security-danger summary { cursor: pointer; font-weight: 700; color: var(--red); }
.security-danger-item { margin-top: 12px; }
.security-danger-item .hint { margin: 6px 0 0; }
.tfa-qr { width: 200px; max-width: 100%; margin: 8px auto; }
.tfa-qr svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.tfa-key { word-break: break-all; font-size: 0.95em; }
.tfa-backup-list { columns: 2; column-gap: 24px; margin: 10px 0; padding-left: 1.6em; }
.tfa-backup-list li { margin: 2px 0; }
.tfa-backup-list code { font-size: 1.05em; letter-spacing: 0.05em; }
.tfa-saved { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-weight: 600; }