@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&display=swap');

/* Congix English — приложение.
   Та же система, что на лендинге: тёплый тёмный фон, кремовый текст,
   лайм — единственный акцент, глина — только ошибка.
   Поверхности идут ступенями surface → surface-2 → surface-3, границы
   всегда сплошные (--line / --line-soft), без светящихся теней:
   в этой палитре свечение выдаёт «неоновый» характер, которого в макете нет. */
:root {
  --ink:#211E1B;
  --surface:#2A2724;
  --surface-2:#322E29;
  --surface-3:#3B3630;
  --line:#45403A;
  --line-soft:#383430;
  --cream:#EFE9DE;
  --cream-2:#E2DACB;
  --muted:#A79F92;
  --muted-2:#8E877C;
  --faint:#7E7669;
  --lime:#CBF24C;
  --lime-dim:#9DBB3C;
  --clay:#E07A54;
  --clay-dim:#B45C3E;

  --font-display:'Bricolage Grotesque','Instrument Sans',sans-serif;
  --font-sans:'Instrument Sans',system-ui,sans-serif;

  /* Прежние имена оставлены псевдонимами: разметка и скрипты их знают,
     переписывать 850 строк HTML ради переименования переменных незачем. */
  --asphalt:var(--surface-2);
  --bg:var(--surface); --s1:var(--surface-2); --s2:var(--surface-3); --s3:var(--line);
  --paper:var(--cream);
  --accent:var(--lime); --accent2:var(--lime-dim);
  --eng:var(--cream); --eng2:var(--cream);
  --uzb:var(--cream-2); --uzb2:var(--cream);
  --txt:var(--cream); --muted-txt:var(--muted);
  --on-accent:var(--ink);
  --todo:var(--cream);

  --success:var(--lime); --success-soft:var(--lime-dim);
  --danger:var(--clay); --danger-soft:var(--clay-dim);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  font-family:var(--font-sans);
  background:var(--surface); color:var(--cream);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ────────────────────────────────────────────────────────────────────
   ОБОЛОЧКА ПРИЛОЖЕНИЯ
   Слева постоянное меню, справа шапка с названием экрана и контент.
   На телефоне меню прячется: там навигация идёт кнопками внутри экранов,
   как и раньше, а колонка контента остаётся во всю ширину.
   ──────────────────────────────────────────────────────────────────── */
.shell { display:flex; min-height:100vh; }
.main { display:flex; flex-direction:column; flex:1; min-width:0; }
.content { flex:1; padding:20px 16px 40px; }
.app { width:100%; max-width:1120px; margin:0 auto; display:flex; flex-direction:column; gap:0; }

.side {
  display:none;
  position:sticky; top:0; align-self:flex-start;
  width:240px; flex-shrink:0; height:100vh;
  flex-direction:column;
  background:var(--ink); border-right:1px solid var(--line-soft);
  padding:20px 16px;
  transition:width .18s ease, padding .18s ease;
}

/* ── Свёрнутое меню ──────────────────────────────────────
   Остаются только иконки: раздел узнаётся по значку и подсказке,
   а контенту достаётся почти вся ширина окна. Состояние помнится
   между заходами — человек настроил один раз. */
.side-collapsed .side { width:68px; padding:20px 10px; }
.side-collapsed .side-head { flex-direction:column; gap:14px; padding:0; }
.side-collapsed .side-name,
.side-collapsed .sl-label,
.side-collapsed .side-group-title,
.side-collapsed .side-streak,
.side-collapsed .su-txt { display:none; }
.side-collapsed .side-link { justify-content:center; padding:11px 0; }
.side-collapsed .side-group { gap:4px; }
.side-collapsed .side-nav { gap:14px; }
/* Заголовки групп скрыты, поэтому границу между ними держит линия —
   иначе одиннадцать значков читаются одним нерасчленённым столбцом. */
.side-collapsed .side-group + .side-group { border-top:1px solid var(--line-soft); padding-top:14px; }
.side-collapsed .side-user { justify-content:center; padding:4px 0; }
.side-collapsed .side-foot { gap:8px; }
/* Иконки интерфейса: наследуют цвет текста и стоят на его базовой линии.
   Раньше здесь были эмодзи — их рисует система, и рядом с тонкими линиями
   макета они выглядели наклейками, разными на каждой платформе. */
.ic-svg { flex:none; vertical-align:-0.18em; }
.ic { display:inline-block; width:1em; height:1em; }
/* Потерянная жизнь в режиме Survival: тот же контур, приглушённый */
.ic-svg.ic-off { color:var(--line); }

.side-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 4px 0 8px; }
.side-logo {
  display:flex; align-items:center; gap:10px; min-width:0;
  background:transparent; border:none; padding:0; cursor:pointer;
  color:inherit; font:inherit; text-align:left;
}
.side-toggle {
  flex-shrink:0; cursor:pointer;
  background:transparent; color:var(--muted-2); border:none;
  width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s, color .15s;
}
.side-toggle:hover { background:var(--surface-2); color:var(--cream); }
.side-mark {
  width:28px; height:28px; flex-shrink:0; border-radius:9px;
  background:var(--lime); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:14px; font-weight:700;
}
.side-name { font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:-0.02em; }

.side-nav { display:flex; flex-direction:column; gap:24px; margin-top:32px; overflow-y:auto; }
.side-group { display:flex; flex-direction:column; gap:2px; }
.side-group-title {
  padding:0 12px 6px; font-size:11px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--faint);
}
.side-link {
  display:flex; align-items:center; gap:12px; width:100%;
  cursor:pointer; background:transparent; border:none;
  border-radius:12px; padding:10px 12px;
  font-family:var(--font-sans); font-size:14px; font-weight:400;
  color:var(--muted); text-align:left;
  transition:background-color .15s, color .15s;
}
.side-link svg { flex:none; }
.side-link:hover { color:var(--cream); }
.side-link.on { background:var(--surface-3); color:var(--cream); font-weight:500; }
.side-link.on svg { color:var(--lime); }

.side-foot { display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:16px; }

/* Переключатель языка. Три кнопки, а не выпадающий список: вариантов всего
   три, и выбранный виден без открывания. */
.lang-switch { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:4px; }
.lang-btn {
  cursor:pointer; background:transparent; border:none;
  padding:7px 0; border-radius:8px;
  font-family:var(--font-sans); font-size:12px; font-weight:500; letter-spacing:0.04em;
  color:var(--muted-2); transition:background-color .15s, color .15s;
}
.lang-btn:hover { color:var(--cream); }
.lang-btn.on { background:var(--lime); color:var(--ink); }
.side-collapsed .lang-switch { grid-template-columns:1fr; gap:2px; padding:3px; }
.side-collapsed .lang-btn { padding:6px 0; font-size:11px; }
.side-streak { border:1px solid var(--line); background:var(--surface-2); border-radius:16px; padding:14px 16px; }
.ss-top { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--lime); }
.ss-sub { margin-top:6px; font-size:12px; line-height:1.5; color:var(--muted-2); }
.side-user {
  display:flex; align-items:center; gap:12px; width:100%;
  cursor:pointer; background:transparent; border:none;
  padding:4px 8px; border-radius:12px; text-align:left;
  transition:background-color .15s;
}
.side-user:hover { background:var(--surface-2); }
.su-ava {
  width:32px; height:32px; flex-shrink:0; border-radius:50%;
  background:var(--surface-3); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:500;
}
.su-txt { min-width:0; display:flex; flex-direction:column; }
.su-name { font-size:13px; font-weight:500; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.su-meta { font-size:12px; color:var(--faint); }

.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--surface); border-bottom:1px solid var(--line-soft);
  padding:14px 16px;
}
.topbar-txt { min-width:0; }
.topbar-title { font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-0.02em; }
.topbar-meta { margin-top:2px; font-size:13px; color:var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-meta:empty { display:none; }
.topbar-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.top-pill {
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:12px; padding:8px 14px;
  font-size:13px; color:var(--muted);
}
.top-pill b { font-weight:500; color:var(--lime); }

/* Вход, загрузка и первый запуск идут без меню: навигации там ещё нет */
body.no-chrome .side, body.no-chrome .topbar { display:none; }
body.flush .content { padding:0; }
body.flush .app { max-width:none; }

@media (min-width: 1024px) {
  .side { display:flex; }
  .content { padding:32px; }
  .topbar { padding:16px 32px; }
  /* Логотип и чип аккаунта на главной дублировали бы меню и шапку */
  #s-home .home-top { display:none; }
}

.sec-lbl {
  font-size:11px; color:var(--faint); font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; margin-bottom:10px;
}
.screen { display:none; flex-direction:column; gap:16px; padding-bottom:30px; }
.screen.active { display:flex; }

/* LOGO */
.logo-row { display:flex; align-items:center; gap:12px; padding:8px 0; cursor:pointer; }
.logo-box {
  width:40px; height:40px; flex-shrink:0;
  background:var(--lime); color:var(--ink);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:20px; font-weight:700;
}
.logo-text .t1 {
  font-family:var(--font-display); font-size:20px; font-weight:600;
  letter-spacing:-0.02em; color:var(--cream);
}
.logo-text .t2 { font-size:12px; color:var(--muted-2); font-weight:400; margin-top:1px; }

/* LEVEL CARD */
/* Карточка уровня — плоская поверхность с рамкой, как тайлы бенто на лендинге.
   Крупная цифра уровня набрана лаймом: это главный показатель экрана. */
.level-card {
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:24px; padding:22px;
  position:relative;
}
.lc-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lc-label { font-size:11px; color:var(--faint); font-weight:500; letter-spacing:0.14em; text-transform:uppercase; }
.lc-level {
  font-family:var(--font-display); font-size:44px; font-weight:600;
  letter-spacing:-0.02em; color:var(--lime); line-height:1.05; margin-top:6px;
}
.lc-sub { font-size:13px; color:var(--muted); margin-top:2px; }
.lc-icon { line-height:0; color:var(--lime); }
.lc-bar-wrap { margin-top:18px; background:var(--line); border-radius:99px; height:8px; overflow:hidden; }
.lc-bar { height:100%; background:var(--lime); border-radius:99px; transition:width .6s ease; }
.lc-bar-label { display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:var(--muted-2); }

/* MINI STATS */
.mini-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.ms-box {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:14px 8px; text-align:center;
}
.ms-v { font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-0.02em; }
.ms-l { font-size:11px; color:var(--muted-2); font-weight:500; letter-spacing:0.08em; text-transform:uppercase; margin-top:4px; }
.ms-v.streak { color:var(--lime); }
.ms-v.known { color:var(--cream); }
.ms-v.daily { color:var(--cream); }

/* DAILY GOAL */
.daily-goal { background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:16px; }
.dg-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dg-title { font-size:14px; font-weight:500; color:var(--cream); }
.dg-count { font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--lime); }
.dg-bar-wrap { margin-top:10px; background:var(--line); border-radius:99px; height:6px; overflow:hidden; }
.dg-bar { height:100%; background:var(--lime-dim); border-radius:99px; transition:width .5s; width:0%; }
.dg-done { color:var(--lime) !important; }
.dg-done-bar { background:var(--lime) !important; }

/* BUTTONS */
.big-btn {
  border:none; cursor:pointer;
  /* Кнопка всегда во всю ширину контейнера: в колонке экрана она была
     то широкой, то по содержимому — зависело от того, чем её обернули. */
  width:100%;
  border-radius:12px; padding:16px;
  font-family:var(--font-sans); font-size:15px; font-weight:500;
  color:var(--cream);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background-color .15s, border-color .15s, color .15s, transform .12s;
  text-align:center;
}
.big-btn:active { transform:scale(.97); }
/* Главная кнопка — лайм по асфальту, текст чернильный: 13.5:1.
   Заливка плоская, как на лендинге. */
.big-btn.primary { background:var(--lime); color:var(--ink); font-weight:500; }
.big-btn.primary:hover { background:var(--lime-dim); }
.big-btn.secondary { background:transparent; color:var(--cream); border:1px solid var(--line); }
.big-btn.secondary:hover { border-color:var(--muted-2); }
.big-btn.success { background:var(--lime); color:var(--ink); }
.big-btn.success:hover { background:var(--lime-dim); }
.big-btn:disabled { background:var(--line); color:var(--faint); cursor:default; transform:none; }

.action-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.action-card {
  cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:18px 16px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  transition:border-color .15s, transform .12s; text-align:left;
}
.action-card:hover { border-color:var(--muted-2); }
.action-card:active { transform:scale(.97); }
.action-card .ac-ico { line-height:0; color:var(--lime); }
.action-card .ac-title {
  font-family:var(--font-display); font-size:16px; font-weight:600;
  letter-spacing:-0.02em; color:var(--cream);
}
.action-card .ac-sub { font-size:12px; color:var(--muted); font-weight:400; line-height:1.45; }

.back-btn {
  cursor:pointer;
  background:transparent; color:var(--muted);
  border:1px solid var(--line); border-radius:12px; padding:9px 14px;
  font-family:var(--font-sans); font-weight:500; font-size:13px;
  transition:border-color .15s, color .15s, transform .12s;
  align-self:flex-start;
}
.back-btn:hover { color:var(--cream); border-color:var(--muted-2); }
.back-btn:active { transform:scale(.95); }

.topics-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.topic-card {
  cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:14px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  transition:border-color .15s, transform .12s;
  text-align:left; min-height:92px; position:relative;
}
.topic-card:hover { border-color:var(--muted-2); }
.topic-card:active { transform:scale(.97); }
/* Выбранное состояние — лаймовая рамка. Ни заливки, ни свечения:
   в макете отмеченный элемент отличается только контуром. */
.topic-card.selected { background:var(--surface-3); border-color:var(--lime); }
.topic-card .tc-ico { line-height:0; color:var(--muted); }
.topic-card .tc-name { font-size:14px; font-weight:500; color:var(--cream); }
.topic-card .tc-count { font-size:12px; color:var(--muted-2); }
.topic-card .tc-prog { position:absolute; right:12px; top:12px; font-size:11px; color:var(--lime); font-weight:500; }

.level-pills { display:flex; gap:6px; flex-wrap:wrap; }
.lvl-pill {
  cursor:pointer;
  background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:8px 16px;
  font-family:var(--font-sans); font-weight:500; font-size:13px;
  transition:background-color .15s, color .15s, border-color .15s, transform .12s;
}
.lvl-pill:hover { border-color:var(--muted-2); color:var(--cream); }
.lvl-pill.active { background:var(--lime); color:var(--ink); border-color:var(--lime); }
.lvl-pill:active { transform:scale(.95); }

.gm-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gm-card {
  cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:16px 12px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:border-color .15s, transform .12s;
  text-align:center; min-height:124px; justify-content:center;
}
.gm-card .gm-ico { line-height:0; color:var(--muted); }
.gm-card .gm-name {
  font-family:var(--font-display); font-size:14px; font-weight:600;
  letter-spacing:-0.02em; color:var(--cream);
}
.gm-card .gm-desc { font-size:12px; color:var(--muted-2); font-weight:400; line-height:1.4; }
.gm-card:hover { border-color:var(--muted-2); }
.gm-card:active { transform:scale(.97); }
.gm-card.selected { background:var(--surface-3); border-color:var(--lime); }
.gm-card.selected .gm-name { color:var(--lime); }
.gm-card.selected .gm-ico { color:var(--lime); }

.train-opt-box { background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:16px; }
.train-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tt-t1 { font-size:14px; font-weight:500; color:var(--cream); }
.tt-t2 { font-size:12px; color:var(--muted); font-weight:400; margin-top:2px; }
.toggle-sw {
  width:44px; height:26px; background:var(--line); border-radius:99px;
  position:relative; cursor:pointer; transition:background-color .2s; flex-shrink:0;
}
.toggle-sw::after {
  content:''; position:absolute; width:20px; height:20px;
  background:var(--muted); border-radius:50%; top:3px; left:3px; transition:all .2s;
}
.toggle-sw.on { background:var(--lime); }
/* Дорожка во включённом состоянии лаймовая, поэтому бегунок уходит
   в чернильный — светлый на светлом был бы неразличим. */
.toggle-sw.on::after { left:21px; background:var(--ink); }

.train-count-row { display:none; margin-top:14px; gap:8px; }
.train-count-row.show { display:grid; grid-template-columns:1fr 1fr 1fr; }
.tc-btn {
  cursor:pointer;
  background:var(--surface-3); border:1px solid var(--line); border-radius:12px;
  padding:11px 6px; color:var(--muted);
  font-family:var(--font-sans); font-weight:500; font-size:13px;
  transition:border-color .15s, color .15s, transform .12s;
}
.tc-btn:hover { border-color:var(--muted-2); color:var(--cream); }
.tc-btn.sel { color:var(--cream); border-color:var(--lime); }
.tc-btn:active { transform:scale(.95); }

.train-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.train-progress-wrap { flex:1; background:var(--line); border-radius:99px; height:6px; overflow:hidden; }
.train-progress-bar { height:100%; background:var(--lime); border-radius:99px; transition:width .3s; width:0%; }
.train-counter { font-size:13px; color:var(--muted); font-weight:500; white-space:nowrap; }

/* Карточка тренировки — кремовая: единственная светлая плоскость экрана,
   как кремовые блоки на лендинге. Слово на ней читается как на бумаге. */
.flashcard {
  background:var(--cream); color:var(--ink);
  border-radius:24px; padding:32px 24px;
  min-height:320px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center;
  position:relative; overflow:hidden;
  animation:slideUp .35s ease;
}
.fc-badge {
  font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--faint);
}
.fc-word {
  font-family:var(--font-display); font-size:40px; font-weight:600;
  line-height:1.05; letter-spacing:-0.02em; color:var(--ink);
}
.fc-phon { font-size:14px; color:#211E1B99; }
.fc-speak {
  cursor:pointer;
  background:transparent; border:1px solid #211E1B26; border-radius:99px;
  padding:9px 16px; font-size:13px; color:var(--ink);
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-sans); font-weight:500;
  transition:border-color .15s, transform .12s;
}
.fc-speak:hover { border-color:#211E1B59; }
.fc-speak:active { transform:scale(.95); }
.fc-divider { width:48px; height:1px; background:#211E1B26; }
.fc-translation {
  font-family:var(--font-display); font-size:26px; font-weight:600;
  letter-spacing:-0.02em; color:var(--ink);
  background:var(--cream-2); padding:8px 18px; border-radius:12px;
}
.fc-example { font-size:13px; color:#211E1B99; line-height:1.6; max-width:320px; }
.fc-example b { font-weight:600; color:var(--ink); }

.fc-nav { display:grid; grid-template-columns:auto 1fr auto; gap:10px; }
.fc-arrow {
  cursor:pointer;
  background:transparent; color:var(--cream);
  border:1px solid var(--line); border-radius:12px; padding:15px 20px;
  font-size:16px; font-weight:500;
  transition:border-color .15s, transform .12s;
}
.fc-arrow:hover { border-color:var(--muted-2); }
.fc-arrow:active { transform:scale(.95); }
.fc-arrow:disabled { opacity:.35; cursor:default; }

/* Перевернуть карточку — управление карточкой, а не главное действие экрана:
   лайм остаётся за кнопкой «перейти к тесту», иначе на экране два призыва. */
.fc-flip {
  cursor:pointer;
  background:transparent; color:var(--cream);
  border:1px solid var(--line); border-radius:12px; padding:15px;
  font-family:var(--font-sans); font-weight:500; font-size:14px;
  transition:border-color .15s, transform .12s;
}
.fc-flip:hover { border-color:var(--muted-2); }
.fc-flip:active { transform:scale(.97); }

.g-topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.g-pills { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.g-score-pill {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:99px; padding:7px 13px;
  font-size:13px; font-weight:500; color:var(--lime);
  display:flex; align-items:center; gap:6px;
}
.g-mode-pill {
  border:1px solid var(--line); border-radius:99px; padding:7px 12px;
  font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted);
}
.g-mode-pill.eng { background:var(--surface-2); color:var(--cream); }
.g-mode-pill.uzb { background:var(--surface-2); color:var(--cream-2); }

.g-timer-pill {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:99px; padding:7px 13px;
  font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--cream);
  display:flex; align-items:center; gap:6px;
}
/* Последние секунды — единственное место, где таймер краснеет */
.g-timer-pill.warn { color:var(--clay); border-color:var(--clay); animation:pulse .6s ease infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }

.g-lives-pill {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:99px; padding:7px 12px;
  font-size:13px; color:var(--clay);
  display:flex; align-items:center; gap:4px; letter-spacing:2px;
}

.stats-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.st-box { background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:14px 8px; text-align:center; }
.st-v { font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-0.02em; }
.st-l { font-size:11px; color:var(--muted-2); font-weight:500; letter-spacing:0.08em; text-transform:uppercase; margin-top:4px; }
.st-v.c { color:var(--lime); } .st-v.w { color:var(--clay); } .st-v.t { color:var(--cream); }

/* Карточка слова в игре. Направление перевода различается светлотой,
   а не оттенком: английский — кремовая сторона, узбекский — тёмная.
   Различие сохраняется и в чёрно-белом. */
.word-card {
  border-radius:24px; padding:28px 24px;
  min-height:140px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; position:relative; overflow:hidden;
  transition:background-color .3s; animation:slideUp .35s ease;
}
.word-card.eng-card { background:var(--cream); }
.word-card.uzb-card { background:var(--surface-3); border:1px solid var(--line); }
.wc-badge {
  font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
}
.word-card.eng-card .wc-badge { color:var(--faint); }
.word-card.uzb-card .wc-badge { color:var(--muted-2); }
.wc-word {
  font-family:var(--font-display); font-size:36px; font-weight:600;
  line-height:1.05; letter-spacing:-0.02em; word-break:break-word;
}
.word-card.eng-card .wc-word { color:var(--ink); }
.word-card.uzb-card .wc-word { color:var(--cream); }
.wc-hint { font-size:13px; }
.word-card.eng-card .wc-hint { color:#211E1B99; }
.word-card.uzb-card .wc-hint { color:var(--muted-2); }
.wc-speak-mini {
  cursor:pointer; background:transparent; border-radius:99px;
  padding:6px 12px; font-size:12px; font-weight:500;
}
.word-card.eng-card .wc-speak-mini { color:var(--ink); border:1px solid #211E1B26; }
.word-card.uzb-card .wc-speak-mini { color:var(--cream); border:1px solid var(--line); }

/* Поле ввода: рамка вместо цветной подложки. Направление перевода
   подсказывает флаг, подсветка фокуса — лаймовая, как в макете. */
.input-wrap { border-radius:12px; transition:border-color .2s; border:1px solid var(--line); background:var(--surface-2); }
.input-wrap.eng-in { border-color:var(--line); }
.input-wrap.uzb-in { border-color:var(--line); }
.input-wrap:focus-within { border-color:var(--lime); }
.input-inner { border-radius:12px; display:flex; align-items:center; gap:10px; padding:15px 16px; }
.in-flag { font-size:18px; flex-shrink:0; }
.in-field {
  flex:1; background:transparent; border:none; outline:none;
  font-family:var(--font-sans); font-weight:500; font-size:17px;
  caret-color:var(--lime); min-width:0; color:var(--cream);
}
.input-wrap.eng-in .in-field { color:var(--cream); }
.input-wrap.uzb-in .in-field { color:var(--cream); }
.input-wrap.eng-in .in-field::placeholder { color:var(--faint); }
.input-wrap.uzb-in .in-field::placeholder { color:var(--faint); }
.in-clear {
  border:none; cursor:pointer; border-radius:8px;
  padding:6px 10px; font-size:13px;
  transition:color .15s, transform .12s; background:transparent; flex-shrink:0;
}
.input-wrap.eng-in .in-clear { color:var(--muted-2); }
.input-wrap.uzb-in .in-clear { color:var(--muted-2); }
.in-clear:hover { color:var(--cream); }
.in-clear:active { transform:scale(.9); }

.mc-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mc-opt {
  cursor:pointer;
  background:var(--surface-3); border:1px solid var(--line); border-radius:12px;
  padding:16px 14px;
  font-family:var(--font-sans);
  font-weight:400; font-size:15px; color:var(--cream);
  transition:border-color .15s, transform .12s; min-height:60px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; word-break:break-word;
}
.mc-opt:hover { border-color:var(--muted-2); }
.mc-opt:active { transform:scale(.97); }
/* Обратная связь: верный ответ обводится лаймом, ошибка — глиной.
   Заливка не меняется, поэтому текст остаётся читаемым в обоих случаях. */
.mc-opt.correct { border-color:var(--lime); color:var(--cream); animation:popIn .3s; }
.mc-opt.wrong { border-color:var(--clay); color:var(--cream); animation:wag .3s; }
.mc-opt:disabled { cursor:default; }

.sb-target {
  background:var(--surface-2); border-radius:12px;
  padding:14px; min-height:80px;
  display:flex; flex-wrap:wrap; gap:6px;
  align-content:flex-start;
  border:1px dashed var(--line);
}
.sb-target.empty::before {
  content:"Bo'sh — so'zlarni tanlang";
  color:var(--faint); font-size:13px; align-self:center;
}
.sb-pool { display:flex; flex-wrap:wrap; gap:6px; min-height:60px; }
.sb-chip {
  cursor:pointer;
  background:var(--surface-3); border:1px solid var(--line); border-radius:10px;
  padding:9px 14px;
  font-family:var(--font-sans);
  font-weight:400; font-size:14px;
  color:var(--cream);
  transition:border-color .15s, transform .12s;
}
.sb-chip:hover { border-color:var(--muted-2); }
.sb-chip:active { transform:scale(.94); }
.sb-chip.target { border-color:var(--lime); color:var(--cream); }
.sb-chip.used { opacity:.25; cursor:default; pointer-events:none; }

.indicator {
  border-radius:12px; padding:14px 16px;
  display:flex; align-items:flex-start; gap:12px;
  min-height:60px; transition:border-color .25s, background-color .25s;
  border:1px solid var(--line); background:var(--surface-2);
}
.indicator.idle { background:var(--surface-2); border-color:var(--line); }
.indicator.loading { background:var(--surface-2); border-color:var(--muted-2); }
/* Результат ответа — единственная заливка цветом в интерфейсе.
   Текст на ней чернильный: и лайм, и глина светлее кремового. */
.indicator.ok { background:var(--lime); border-color:var(--lime); animation:popIn .3s ease; }
.indicator.fail { background:var(--clay); border-color:var(--clay); animation:wag .3s ease; }
@keyframes popIn { 0%{transform:scale(.96)} 60%{transform:scale(1.02)} 100%{transform:scale(1)} }
@keyframes wag { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.ind-ico { line-height:0; flex-shrink:0; margin-top:2px; }

.ind-title { font-size:14px; font-weight:500; color:var(--cream); }
.ind-msg { font-size:13px; color:var(--muted); margin-top:3px; line-height:1.5; }
.indicator.ok .ind-title, .indicator.fail .ind-title { color:var(--ink); }
.indicator.ok .ind-msg, .indicator.fail .ind-msg { color:#211E1Bb3; }

.btn-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn-row.single { grid-template-columns:1fr; }
.check-btn {
  border:none; cursor:pointer;
  border-radius:12px; padding:16px;
  font-family:var(--font-sans); font-size:15px; font-weight:500;
  color:var(--ink);
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--lime);
  transition:background-color .15s, transform .12s;
}
.check-btn:hover { background:var(--lime-dim); }
.check-btn:active { transform:scale(.97); }
.check-btn:disabled { background:var(--line); color:var(--faint); cursor:default; transform:none; }
.next-btn {
  cursor:pointer;
  border-radius:12px; padding:16px;
  font-family:var(--font-sans); font-size:15px; font-weight:500;
  color:var(--cream);
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:transparent;
  border:1px solid var(--line); transition:border-color .15s, transform .12s;
}
.next-btn:hover { border-color:var(--muted-2); }
.next-btn:active { transform:scale(.97); }
.word-counter { text-align:center; font-size:12px; color:var(--faint); letter-spacing:0.08em; }

.result-card {
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:24px; padding:32px 24px; text-align:center;
  position:relative; overflow:hidden;
  animation:slideUp .4s ease;
}
.rc-emoji { line-height:0; margin-bottom:14px; color:var(--lime); }
.rc-title {
  font-family:var(--font-display); font-size:26px; font-weight:600;
  letter-spacing:-0.02em; color:var(--cream);
}
.rc-sub { font-size:14px; color:var(--muted); margin-top:8px; }
.rc-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:22px; }
.rc-stat { background:var(--surface-3); border:1px solid var(--line); border-radius:12px; padding:14px 6px; }
.rc-sv { font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-0.02em; color:var(--cream); }
.rc-sv.ok { color:var(--lime); }
.rc-sv.bad { color:var(--clay); }
.rc-sl { font-size:11px; color:var(--muted-2); margin-top:4px; letter-spacing:0.08em; text-transform:uppercase; }
.rc-new { margin-top:16px; font-size:13px; color:var(--lime); font-weight:500; }

.stats-card { background:var(--surface-2); border:1px solid var(--line); border-radius:24px; padding:22px; }
.stats-card h3 {
  font-family:var(--font-display); font-size:18px; font-weight:600;
  letter-spacing:-0.02em; margin-bottom:16px; color:var(--cream);
}
.cefr-bars { display:flex; flex-direction:column; gap:10px; }
.cefr-row { display:flex; align-items:center; gap:12px; }
.cefr-label {
  width:32px; font-family:var(--font-display); font-size:13px; font-weight:600;
  color:var(--cream); flex-shrink:0;
}
.cefr-bar-bg { flex:1; background:var(--line); border-radius:99px; height:8px; overflow:hidden; position:relative; }
.cefr-bar-fg { height:100%; border-radius:99px; transition:width .6s; }
/* Ступени уровня различаются насыщенностью одного лайма, а не разными
   красками: шкала читается как одна величина, а не как шесть категорий. */
.cefr-bar-fg.A1 { background:var(--lime-dim); }
.cefr-bar-fg.A2 { background:var(--lime-dim); }
.cefr-bar-fg.B1 { background:var(--lime); }
.cefr-bar-fg.B2 { background:var(--lime); }
.cefr-bar-fg.C1 { background:var(--lime); }
.cefr-bar-fg.C2 { background:var(--lime); }
.cefr-count { font-size:12px; color:var(--muted-2); min-width:64px; text-align:right; }

.topic-stats-list { display:flex; flex-direction:column; gap:8px; }
.tsi-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; background:var(--surface-3); border:1px solid var(--line); border-radius:12px;
}
.tsi-name { font-size:14px; font-weight:400; }
.tsi-prog { font-size:13px; color:var(--lime); font-weight:500; }

/* ── LOADING / ERROR SCREENS ── */
.loading-screen, .error-screen { text-align:center; padding:48px 20px; }
.loading-screen .ls-icon, .error-screen .es-icon { line-height:0; margin-bottom:18px; color:var(--muted-2); }
.loading-screen .ls-title, .error-screen .es-title {
  font-family:var(--font-display);
  font-size:24px; font-weight:600; letter-spacing:-0.02em;
  margin-bottom:8px; color:var(--cream);
}
.loading-screen .ls-sub, .error-screen .es-sub {
  font-size:14px; color:var(--muted); margin-bottom:22px; line-height:1.6;
}
.error-screen .es-help {
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
  padding:16px; font-size:13px; line-height:1.6;
  color:var(--muted); margin-top:16px; text-align:left;
}
.error-screen .es-help b { color:var(--cream); }
.error-screen .es-help code {
  background:var(--surface-3); color:var(--lime);
  padding:2px 6px; border-radius:6px; font-size:12px;
}

.file-input-wrap { position:relative; display:inline-block; width:100%; }
.file-input-wrap input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }

.spinner {
  width:36px; height:36px;
  margin:0 auto 20px;
  border:2px solid var(--line);
  border-top-color:var(--lime);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

@keyframes slideUp {
  from { transform:translateY(10px); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}

/* ────────────────────────────────────────────────────────────────────
   AI USTOZ — чат с ИИ-репетитором
   ──────────────────────────────────────────────────────────────────── */

.action-card.tutor-card { border-color:var(--line); background:var(--surface-2); }
.action-card.tutor-card .ac-ico { filter:none; }

.tutor-head { display:flex; align-items:center; gap:12px; }
.tutor-ava {
  width:40px; height:40px; flex-shrink:0;
  background:var(--lime); color:var(--ink);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
}
.tutor-head-txt { flex:1; min-width:0; }
.tutor-name {
  font-family:var(--font-display); font-size:20px; font-weight:600;
  letter-spacing:-0.02em; color:var(--cream);
}
.tutor-sub { font-size:11px; color:var(--faint); font-weight:500; letter-spacing:0.14em; text-transform:uppercase; }
.tutor-clear {
  cursor:pointer; flex-shrink:0;
  background:transparent; color:var(--muted); border:1px solid var(--line);
  width:36px; height:36px; border-radius:10px; font-size:15px;
  transition:border-color .15s, color .15s, transform .12s;
}
.tutor-clear:hover { color:var(--cream); border-color:var(--muted-2); }
.tutor-clear:active { transform:scale(.92); }

.chat-log {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:24px; padding:12px;
  display:flex; flex-direction:column; gap:8px;
  min-height:320px; max-height:56vh; overflow-y:auto;
  scroll-behavior:smooth;
}
.chat-msg {
  border-radius:16px; padding:12px 16px;
  font-size:14px; line-height:1.6;
  max-width:88%; word-wrap:break-word; white-space:pre-wrap;
}
/* Реплики учащегося и ответы наставника различаются как в макете:
   свой текст — тёмная карточка с рамкой, ответ ИИ — кремовая плашка. */
.chat-msg.user {
  align-self:flex-end; background:var(--surface-3); border:1px solid var(--line);
  color:var(--cream); border-bottom-right-radius:6px;
}
.chat-msg.bot {
  align-self:flex-start; background:var(--cream); color:var(--ink);
  border-bottom-left-radius:6px;
}
.chat-msg.bot b, .chat-msg.bot strong { font-weight:600; color:var(--ink); }
.chat-msg.err {
  align-self:stretch; background:var(--surface-3);
  border-left:3px solid var(--clay); border-radius:0 12px 12px 0;
  color:var(--cream); font-size:13px;
}
.chat-msg .cm-hint { display:block; margin-top:6px; font-size:12px; color:#211E1B8c; }

.chat-typing { display:inline-flex; gap:4px; align-items:center; }
.chat-typing i {
  width:6px; height:6px; border-radius:50%; background:var(--lime);
  animation:chatDot 1s infinite ease-in-out; display:block;
}
.chat-typing i:nth-child(2) { animation-delay:.15s; }
.chat-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes chatDot { 0%,60%,100% { opacity:.25; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }

.chat-chips { display:flex; gap:8px; flex-wrap:wrap; }
.chat-chip {
  border:1px solid var(--line); cursor:pointer;
  background:var(--surface-2); color:var(--cream);
  padding:8px 16px; border-radius:99px;
  font-family:var(--font-sans); font-size:13px; font-weight:400;
  transition:border-color .15s, background-color .15s, color .15s, transform .12s;
}
.chat-chip:hover { border-color:var(--muted-2); }
.chat-chip:active { transform:scale(.95); }

.chat-input-row {
  display:flex; gap:8px; align-items:flex-end;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:20px; padding:8px;
}
.chat-input-row:focus-within { border-color:var(--lime); }
.chat-input {
  flex:1; min-width:0; resize:none; outline:none; border:none;
  background:transparent; color:var(--cream);
  border-radius:12px; padding:12px;
  font-family:var(--font-sans); font-size:14px; font-weight:400;
  max-height:120px; line-height:1.5;
}
.chat-input::placeholder { color:var(--faint); }
.chat-send {
  border:none; cursor:pointer; flex-shrink:0;
  width:42px; height:42px; border-radius:12px;
  background:var(--lime);
  color:var(--ink); font-size:16px; font-weight:600;
  transition:background-color .15s, transform .12s;
}
.chat-send:hover { background:var(--lime-dim); }
.chat-send:active { transform:scale(.93); }
.chat-send:disabled { background:var(--line); color:var(--faint); cursor:default; transform:none; }

/* ────────────────────────────────────────────────────────────────────
   AI MASHQ — сгенерированные урок и тест
   ──────────────────────────────────────────────────────────────────── */

.ai-topic-wrap { margin-top:4px; }
.ai-topic-input {
  width:100%; outline:none; border:1px solid var(--line);
  background:var(--surface-2); color:var(--cream);
  border-radius:12px; padding:14px 16px;
  font-family:var(--font-sans); font-size:14px; font-weight:400;
}
.ai-topic-input::placeholder { color:var(--faint); }
.ai-topic-input:focus { border-color:var(--lime); }

.ai-btn-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ai-note { font-size:12px; color:var(--faint); text-align:center; line-height:1.6; }

.chat-chip.on { background:var(--lime); color:var(--ink); border-color:var(--lime); font-weight:500; }

.ai-loading-box {
  background:var(--surface-2); border:1px solid var(--line); border-radius:24px;
  padding:40px 20px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; min-height:200px;
}
.ai-loading-txt { font-size:14px; color:var(--muted); }

/* Урок */
.lesson-card {
  background:var(--surface-2);
  border:1px solid var(--line); border-radius:24px; padding:22px;
}
.lesson-title {
  font-family:var(--font-display); font-size:22px; font-weight:600;
  letter-spacing:-0.02em; color:var(--cream); line-height:1.25;
}
.lesson-intro { font-size:14px; color:var(--muted); margin-top:10px; line-height:1.65; }

.lesson-point {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:16px; margin-bottom:10px;
}
.lp-rule {
  font-size:14px; line-height:1.6; color:var(--cream);
}
.lp-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:7px; margin-right:8px;
  background:var(--lime); color:var(--ink);
  font-family:var(--font-display); font-size:12px; font-weight:600;
}
.lp-ex { padding:12px 0 0; }
.lp-en { font-size:14px; font-weight:500; color:var(--lime); }
.lp-uz { font-size:13px; color:var(--muted); margin-top:3px; }
.lp-speak {
  border:none; cursor:pointer; background:transparent;
  color:var(--muted-2); font-size:14px; padding:4px 6px; margin-left:2px;
}
.lp-speak:hover { color:var(--cream); }
.lp-speak:active { transform:scale(.9); }

.lesson-summary {
  background:var(--surface-2); border-left:3px solid var(--lime);
  border-radius:0 12px 12px 0; padding:16px;
  font-size:14px; line-height:1.65; color:var(--cream);
}

/* Тест */
.ai-quiz-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ai-q-counter {
  background:var(--lime); color:var(--ink);
  padding:6px 14px; border-radius:99px;
  font-family:var(--font-display); font-size:13px; font-weight:600;
}
.ai-q-topic { font-size:11px; color:var(--faint); font-weight:500; text-transform:uppercase; letter-spacing:0.14em; text-align:right; }
.ai-q-card {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:24px; padding:24px 20px;
  font-size:17px; font-weight:400; line-height:1.55; color:var(--cream); text-align:center;
}

.ai-explain {
  background:var(--surface-2); border-left:3px solid var(--lime);
  border-radius:0 12px 12px 0; padding:16px;
  font-size:14px; line-height:1.65; color:var(--cream);
}
.ai-explain.wrong { border-left-color:var(--clay); }

/* Разбор ошибок на экране результата */
.ai-rev-item {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:16px; margin-bottom:10px;
}
.ai-rev-q { font-size:14px; font-weight:500; color:var(--cream); line-height:1.55; }
.ai-rev-line { font-size:13px; margin-top:8px; line-height:1.55; }
.ai-rev-bad { color:var(--clay); }
.ai-rev-good { color:var(--lime); }
.ai-rev-exp { font-size:13px; color:var(--muted); margin-top:8px; line-height:1.6; }
.ai-rev-btn {
  border:1px solid var(--line); cursor:pointer; margin-top:12px;
  background:transparent; color:var(--cream);
  padding:8px 14px; border-radius:10px;
  font-family:var(--font-sans); font-size:13px; font-weight:400;
  transition:border-color .15s, transform .12s;
}
.ai-rev-btn:hover { border-color:var(--muted-2); }
.ai-rev-btn:active { transform:scale(.96); }

/* ────────────────────────────────────────────────────────────────────
   KIRISH — вход и регистрация
   Экран выходит из колонки приложения на всю ширину окна: слева
   кремовая панель с обещанием продукта, справа — форма на асфальте.
   ──────────────────────────────────────────────────────────────────── */

#s-auth.active {
  display:grid; grid-template-columns:1fr;
  width:100%; min-height:100vh; gap:0; padding-bottom:0;
}

.auth-aside {
  display:none;
  background:var(--cream); color:var(--ink);
  padding:40px;
  flex-direction:column; justify-content:space-between; gap:40px;
}
.auth-aside-logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.auth-aside-mark {
  width:32px; height:32px; flex-shrink:0; border-radius:10px;
  background:var(--ink); color:var(--lime);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:16px; font-weight:700;
}
.auth-aside-name { font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-0.02em; }
.auth-aside h2 {
  font-family:var(--font-display); font-size:34px; font-weight:600;
  letter-spacing:-0.02em; line-height:1.1; max-width:22ch;
}
.auth-points { list-style:none; display:flex; flex-direction:column; gap:16px; margin-top:32px; }
.auth-point { display:flex; align-items:flex-start; gap:12px; }
.auth-point i {
  width:20px; height:20px; flex-shrink:0; margin-top:2px; border-radius:50%;
  background:var(--ink); color:var(--lime);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-style:normal; font-weight:600;
}
.auth-point span { font-size:14px; line-height:1.6; color:#211E1Bb3; max-width:34ch; }
.auth-aside-note { font-size:13px; color:#211E1B80; }

.auth-main { display:flex; flex-direction:column; min-height:100vh; }
.auth-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; }
.auth-back { font-size:13px; color:var(--muted); padding:4px 6px; text-decoration:none; }
.auth-back:hover { color:var(--cream); }
.auth-brand { display:flex; align-items:center; gap:10px; }

.auth-box {
  width:100%; max-width:384px; margin:0 auto;
  display:flex; flex-direction:column; gap:16px;
  padding:8px 24px 64px;
}
/* Форму центрируем по вертикали только когда окно достаточно высокое:
   на низком экране auto-поля отрезали бы верх формы за границей прокрутки. */
@media (min-height: 760px) {
  .auth-box { margin:auto; }
}
.auth-title {
  font-family:var(--font-display); font-size:30px; font-weight:600;
  letter-spacing:-0.02em; color:var(--cream); line-height:1.15;
}
.auth-sub { font-size:14px; color:var(--muted); line-height:1.6; margin-top:-8px; }

.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:4px; }
.auth-tab {
  border:none; cursor:pointer; background:transparent; color:var(--muted);
  padding:10px; border-radius:9px;
  font-family:var(--font-sans); font-size:13px; font-weight:400;
  transition:background-color .15s, color .15s;
}
.auth-tab:hover { color:var(--cream); }
.auth-tab.active { background:var(--lime); color:var(--ink); font-weight:500; }

.auth-fields { display:flex; flex-direction:column; gap:16px; }
.auth-field { display:flex; flex-direction:column; gap:8px; }
.auth-field label { font-size:13px; color:var(--muted); font-weight:500; }
.auth-field input {
  background:var(--surface-2); border:1px solid var(--line); outline:none;
  border-radius:12px; padding:13px 16px; color:var(--cream);
  font-family:var(--font-sans); font-size:14px; font-weight:400;
}
.auth-field input::placeholder { color:var(--faint); }
.auth-field input:focus { border-color:var(--lime); }

.auth-err {
  border-left:3px solid var(--clay);
  border-radius:0 12px 12px 0; padding:12px 14px;
  background:var(--surface-2);
  font-size:13px; color:var(--clay); line-height:1.55;
}

.auth-sep { display:flex; align-items:center; gap:12px; color:var(--faint); font-size:12px; }
.auth-sep::before, .auth-sep::after { content:''; flex:1; height:1px; background:var(--line); }

.auth-note { font-size:12px; color:var(--faint); text-align:center; line-height:1.6; }

@media (min-width: 1024px) {
  #s-auth.active { grid-template-columns:38% 1fr; }
  .auth-aside { display:flex; }
  .auth-topbar .auth-brand { visibility:hidden; }
  .auth-box { padding:8px 40px 80px; }
}

/* Профиль на главной */
.home-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* Чип аккаунта — две отдельные кнопки: круг ведёт в профиль,
   значок питания открывает окно выхода. */
.user-chip {
  border:1px solid var(--line); flex-shrink:0;
  background:var(--surface-2); color:var(--cream);
  display:flex; align-items:center; gap:4px;
  padding:4px 6px 4px 4px; border-radius:99px;
  max-width:200px;
}
.uc-open {
  border:none; cursor:pointer; background:transparent; color:inherit;
  display:flex; align-items:center; gap:8px; min-width:0;
  padding:2px 4px; border-radius:99px;
  font-family:var(--font-sans); font-size:13px; font-weight:400;
  transition:opacity .15s;
}
.uc-open:active { transform:scale(.96); }
.uc-open:hover { opacity:.85; }
.uc-ava {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--surface-3); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:12px;
}
.uc-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uc-out {
  border:none; cursor:pointer; flex-shrink:0;
  background:transparent; color:var(--muted-2);
  width:28px; height:28px; border-radius:50%; font-size:13px;
  transition:background-color .15s, color .15s, transform .12s;
}
.uc-out:hover { background:var(--surface-3); color:var(--clay); }
.uc-out:active { transform:scale(.9); }

/* Режимы чата: наставник и разговорный партнёр */
.tutor-modes { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:4px; }
.tutor-mode {
  border:none; cursor:pointer; background:transparent; color:var(--muted);
  padding:10px; border-radius:9px;
  font-family:var(--font-sans); font-size:13px; font-weight:400; transition:background-color .15s, color .15s;
}
.tutor-mode:hover { color:var(--cream); }
.tutor-mode.active { background:var(--lime); color:var(--ink); font-weight:500; }
.chat-scenarios { display:flex; gap:8px; flex-wrap:wrap; }

/* Блок исправления внутри реплики разговорного партнёра.
   Реплика бота кремовая, поэтому вставка тоже светлая — с лаймовой линией. */
.cm-fix {
  display:block; margin:-2px 0 8px; padding:8px 12px;
  background:var(--cream-2); border-left:3px solid var(--lime-dim);
  border-radius:0 10px 10px 0; font-weight:600; color:var(--ink);
}
.cm-why { display:block; margin:-2px 0 8px; font-size:13px; color:#211E1B99; line-height:1.55; }

/* ────────────────────────────────────────────────────────────────────
   SERIYA — огонь растёт вместе с серией и гаснет при пропуске
   ──────────────────────────────────────────────────────────────────── */

.streak-card {
  display:flex; align-items:center; gap:16px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:24px; padding:20px;
}
.streak-card.cold { opacity:.75; }
.sk-flame { line-height:0; color:var(--muted-2); transition:color .3s; }
.streak-card.lit .sk-flame { color:var(--lime); animation:flameBeat 2.4s ease-in-out infinite; }
@keyframes flameBeat { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.12) } }
.sk-body { flex:1; min-width:0; }
.sk-days { font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-0.02em; }
.sk-sub { font-size:13px; color:var(--muted); margin-top:2px; line-height:1.5; }
.sk-week { display:flex; gap:4px; margin-top:12px; }
.sk-day { flex:1; height:6px; border-radius:99px; background:var(--line); }
.sk-day.on { background:var(--lime-dim); }
.sk-day.today { background:var(--lime); }
.sk-best { text-align:center; flex-shrink:0; }
.sk-best span { display:block; font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-0.02em; }
.sk-best small { font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:0.08em; }

/* Задание дня */
.daily-card {
  width:100%; text-align:left; cursor:pointer;
  background:var(--surface-2);
  border:1px solid var(--line); border-radius:24px; padding:20px;
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--font-sans); color:var(--cream); transition:border-color .15s, transform .12s;
}
.daily-card:hover { border-color:var(--muted-2); }
.daily-card:active { transform:scale(.99); }
.daily-card.done { border-color:var(--lime); }
.dc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dc-tag { font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
.dc-state {
  font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; border:1px solid var(--line); color:var(--muted-2);
}
.daily-card.done .dc-state { border-color:var(--lime); color:var(--lime); }
.dc-title { font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-0.02em; }
.dc-sub { font-size:13px; color:var(--muted); line-height:1.55; }

.daily-head { text-align:center; padding:6px 0 2px; }
.dh-date { font-size:11px; color:var(--faint); font-weight:500; letter-spacing:0.14em; text-transform:uppercase; }
.dh-title { font-family:var(--font-display); font-size:28px; font-weight:600; letter-spacing:-0.02em; margin-top:6px; }
.dh-sub { font-size:13px; color:var(--muted); margin-top:4px; }
.daily-note { font-size:13px; color:var(--muted); text-align:center; line-height:1.6; padding:0 10px; }

/* ────────────────────────────────────────────────────────────────────
   XARITA — путь по уровням: каждый CEFR это «город» на дороге
   ──────────────────────────────────────────────────────────────────── */

.map-head { padding:4px 2px 2px; }
.mh-title { font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-0.02em; }
.mh-sub { font-size:13px; color:var(--muted); margin-top:6px; line-height:1.6; }

.map-path { position:relative; display:flex; flex-direction:column; gap:14px; padding-left:34px; }
/* Дорога, соединяющая города */
.map-path::before {
  content:''; position:absolute; left:15px; top:12px; bottom:12px;
  width:2px; background:var(--line);
}

.city {
  position:relative; width:100%; text-align:left; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
  padding:18px; font-family:var(--font-sans); color:var(--cream);
  transition:border-color .15s, transform .12s;
}
.city:hover { border-color:var(--muted-2); }
.city:active { transform:scale(.99); }
.city.locked { opacity:.5; cursor:default; }
.city.current { border-color:var(--lime); }
/* Точка города на дороге */
.city::before {
  content:''; position:absolute; left:-27px; top:24px;
  width:14px; height:14px; border-radius:50%;
  background:var(--line); border:3px solid var(--surface);
}
.city.done::before { background:var(--lime-dim); }
.city.current::before { background:var(--lime); }

.city-top { display:flex; align-items:center; gap:10px; }
.city-code { font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-0.02em; }
.city-name { font-size:13px; color:var(--muted); }
.city-state { margin-left:auto; line-height:0; color:var(--muted-2); }
.city-bar { height:6px; border-radius:99px; background:var(--line); margin-top:14px; overflow:hidden; }
.city-bar i { display:block; height:100%; background:var(--lime); border-radius:99px; transition:width .4s ease; }
.city-meta { display:flex; justify-content:space-between; font-size:12px; color:var(--muted-2); margin-top:10px; }

/* Произношение: микрофон рядом с озвучкой. Карточка кремовая,
   поэтому кнопки на ней — чернильные контуры. */
.fc-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.fc-mic {
  border:1px solid #211E1B26; cursor:pointer;
  background:transparent; color:var(--ink);
  padding:9px 16px; border-radius:99px;
  font-family:var(--font-sans); font-size:13px; font-weight:500; transition:border-color .15s, transform .12s;
}
.fc-mic:hover { border-color:#211E1B59; }
.fc-mic:active { transform:scale(.96); }
.fc-mic.listening { background:var(--ink); color:var(--lime); border-color:var(--ink); animation:micPulse 1.1s ease infinite; }
@keyframes micPulse { 0%,100%{ opacity:1 } 50%{ opacity:.65 } }

.pron-result {
  margin-top:4px; padding:12px 16px; border-radius:12px;
  font-size:13px; line-height:1.55; text-align:center;
  background:var(--cream-2); color:var(--ink);
}
.pron-result.ok { border-left:3px solid var(--lime-dim); border-radius:0 12px 12px 0; }
.pron-result.near { border-left:3px solid var(--muted); border-radius:0 12px 12px 0; }
.pron-result.bad { border-left:3px solid var(--clay); border-radius:0 12px 12px 0; }

/* Рейтинг задания дня */
.lb-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:2px; }
.lb-title { font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:-0.02em; }
.lb-sub { font-size:12px; color:var(--faint); }
.leaderboard { display:flex; flex-direction:column; gap:8px; }
.lb-row {
  display:flex; align-items:center; gap:12px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:11px 14px;
}
.lb-row.me { border-color:var(--lime); }
.lb-pos {
  width:26px; height:26px; flex-shrink:0; border-radius:8px;
  background:var(--surface-3); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:12px; font-weight:600;
}
.lb-row.top .lb-pos { background:var(--lime); color:var(--ink); }
.lb-name { flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-score { font-family:var(--font-display); font-size:15px; font-weight:600; }
.lb-empty { font-size:13px; color:var(--muted); text-align:center; padding:16px; line-height:1.6; }

/* ────────────────────────────────────────────────────────────────────
   ШИРОКИЙ ЭКРАН
   На телефоне всё остаётся колонкой. Начиная с планшета приложение
   занимает ширину, а не жмётся в узкую полосу по центру: главная
   раскладывается в две колонки, игровые экраны держат читаемую ширину
   строки — длинные строки текста читать тяжелее, чем короткие.
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {

  /* Главная: карточки идут сеткой.
     Две колонки, а не три: контент теперь делит ширину с меню, и третья
     колонка ломала строки — медиазапрос меряет окно, а не область контента. */
  #s-home.active {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    align-items:start;
  }
  #s-home .home-top,
  #s-home .level-card,
  #s-home .big-btn.primary { grid-column:1 / -1; }
  #s-home .action-grid { grid-column:1 / -1; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); }

  /* Экраны с чтением и вводом: ограничиваем длину строки */
  #s-game.active,
  #s-train.active,
  #s-result.active,
  #s-daily.active { max-width:720px; margin:0 auto; width:100%; }

  /* Чат: лог выше, поле ввода на всю ширину */
  #s-tutor.active { max-width:860px; margin:0 auto; width:100%; }
  .chat-log { max-height:62vh; min-height:420px; }

  /* Темы, режимы и уровни свободнее дышат */
  .topics-grid { grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
  .gm-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .mc-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }

  /* Карта и AI-упражнения: две колонки карточек */
  #s-map.active { max-width:820px; margin:0 auto; width:100%; }
  #s-ai.active { max-width:760px; margin:0 auto; width:100%; }
  #s-stats.active { max-width:900px; margin:0 auto; width:100%; }

  /* Кнопка «дальше» в тестах — по содержимому: на широком экране
     полоса во всю строку кричит громче самого вопроса. */
  #ai-quiz .big-btn, #read-quiz .big-btn, #daily-play .big-btn {
    width:auto; align-self:flex-start; padding-left:28px; padding-right:28px;
  }
}

@media (min-width: 1024px) {
  /* Экраны, до которых можно дойти по меню слева, в кнопке «назад»
     не нуждаются. У вложенных (режим, тренировка, игра, итог) пункта
     меню нет — там кнопка остаётся единственным путём назад. */
  #s-topics .back-btn, #s-stats .back-btn, #s-words .back-btn,
  #s-write .back-btn, #s-read .back-btn, #s-profile .back-btn,
  #s-map .back-btn, #s-ai .back-btn, #s-tutor .back-btn,
  #s-daily .back-btn { display:none; }

  /* Название раздела уже стоит в шапке — во второй раз его показывать
     незачем. Остаётся строка с уровнем и кнопка очистки диалога. */
  .tutor-ava, .tutor-name { display:none; }
  .tutor-head { gap:0; }
  .tutor-sub { flex:1; }
}

/* ────────────────────────────────────────────────────────────────────
   PROFIL и окно выхода
   ──────────────────────────────────────────────────────────────────── */

.profile-card {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:24px; padding:32px 24px; text-align:center;
}
.pf-ava {
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  background:var(--lime); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:26px; font-weight:600;
}
.pf-name { font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-0.02em; }
.pf-mail { font-size:13px; color:var(--muted); margin-top:4px; }
.pf-kind {
  display:inline-block; margin-top:14px;
  border:1px solid var(--line); color:var(--muted-2);
  padding:5px 14px; border-radius:99px;
  font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
}
.pf-kind.online { border-color:var(--lime); color:var(--lime); }

.pf-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.pf-box { background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:18px; text-align:center; }
.pf-v { font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-0.02em; }
.pf-l { font-size:12px; color:var(--muted-2); margin-top:4px; }
.pf-note { font-size:13px; color:var(--muted); text-align:center; line-height:1.6; padding:0 8px; }

.big-btn.danger { background:transparent; color:var(--clay); border:1px solid var(--clay); }
.big-btn.danger:hover { background:var(--clay); color:var(--ink); }

/* Модальное окно */
.modal-back {
  display:none; position:fixed; inset:0; z-index:200;
  background:#211E1Bcc; backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:20px;
}
.modal-back.open { display:flex; }
.modal {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:24px; padding:28px 24px;
  width:100%; max-width:400px; text-align:center;
  animation:modalIn .18s ease;
}
@keyframes modalIn { from { opacity:0; transform:translateY(10px) scale(.98) } to { opacity:1; transform:none } }
.modal-ico { line-height:0; color:var(--clay); }
.modal-title { font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-0.02em; margin-top:12px; }
.modal-text { font-size:14px; color:var(--muted); margin-top:10px; line-height:1.6; }
.modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }
.modal-actions .big-btn { margin:0; }

/* ────────────────────────────────────────────────────────────────────
   ОТСТУПЫ ВНУТРИ СОСТАВНЫХ ЭКРАНОВ
   .screen раздаёт gap только прямым детям, а эти блоки — обёртки,
   поэтому их содержимое слипалось: счётчик лежал на карточке слова.
   ──────────────────────────────────────────────────────────────────── */
#daily-play, #daily-done,
#ai-setup, #ai-quiz, #ai-lesson, #ai-result, #ai-error, #ai-loading {
  display:flex; flex-direction:column; gap:14px;
}

/* Шапка задания дня отделена от игровой части */
.daily-head { padding:10px 0 4px; }

/* Строка «1 / 10 — 0 ball» — это подпись к карточке, а не её часть */
.ai-quiz-top { padding:0 2px; }

/* Кнопка «назад» не должна прижиматься к заголовку */
.back-btn { align-self:flex-start; margin-bottom:2px; }

/* Кнопка «назад» — исключение: она по содержимому, а не во всю строку */
.back-btn { width:auto; }

/* Итоговый экран: рейтинг и подпись под ним не должны липнуть к кнопке */
#daily-done .daily-note { margin-bottom:2px; }
.leaderboard { margin-top:2px; }

/* ────────────────────────────────────────────────────────────────────
   O'QISH — текст с заданиями
   ──────────────────────────────────────────────────────────────────── */

#read-setup, #read-text, #read-quiz, #read-done, #read-error, #read-loading {
  display:flex; flex-direction:column; gap:14px;
}

.read-card {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:24px; padding:24px;
}
.read-title { font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-0.02em; line-height:1.25; }
.read-meta {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; font-size:11px; color:var(--faint);
  font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
}
.read-speak {
  border:1px solid var(--line); cursor:pointer;
  background:transparent; color:var(--cream);
  padding:7px 14px; border-radius:99px;
  font-family:var(--font-sans); font-size:12px; font-weight:400;
  text-transform:none; letter-spacing:0;
  transition:border-color .15s, background-color .15s, color .15s, transform .12s;
}
.read-speak:hover { border-color:var(--muted-2); }
.read-speak:active { transform:scale(.96); }
.read-speak.on { background:var(--lime); color:var(--ink); border-color:var(--lime); }

/* Текст читают долго — интервал крупнее, чем в остальном интерфейсе */
.read-body {
  margin-top:18px; font-size:16px; line-height:1.85; color:var(--cream);
  white-space:pre-wrap;
}
.read-body .gl { border-bottom:1px dotted var(--muted-2); cursor:help; }

.read-gloss { display:flex; flex-direction:column; gap:8px; }
.gloss-row {
  display:flex; align-items:center; gap:12px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:11px 14px;
}
.gloss-en { font-weight:500; font-size:14px; }
.gloss-uz { color:var(--muted); font-size:13px; flex:1; }
.gloss-say {
  border:none; cursor:pointer; background:transparent;
  color:var(--muted-2); font-size:14px; padding:2px 6px;
}
.gloss-say:hover { color:var(--cream); }

/* Прогресс до следующего уровня — на месте бывшего «прогноза IELTS» */
.next-goal { text-align:center; padding:8px 0 4px; }
.ng-level { font-family:var(--font-display); font-size:44px; font-weight:600; letter-spacing:-0.02em; line-height:1; color:var(--lime); }
.ng-sub { font-size:13px; color:var(--muted); margin-top:8px; }
.ng-bar { height:6px; border-radius:99px; background:var(--line); margin:16px 0 10px; overflow:hidden; }
.ng-bar i { display:block; height:100%; background:var(--lime); border-radius:99px; transition:width .4s ease; }
.ng-hint { font-size:12px; color:var(--faint); }

/* ────────────────────────────────────────────────────────────────────
   YOZISH — письмо с разбором
   ──────────────────────────────────────────────────────────────────── */

#write-setup, #write-result, #write-error, #write-loading {
  display:flex; flex-direction:column; gap:14px;
}

.write-task {
  background:var(--surface-2); border-left:3px solid var(--lime);
  border-radius:0 12px 12px 0; padding:16px;
  font-size:14px; line-height:1.65;
}
.write-area {
  width:100%; resize:vertical; outline:none;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:16px;
  color:var(--cream); font-family:var(--font-sans);
  font-size:15px; line-height:1.75; min-height:180px;
}
.write-area:focus { border-color:var(--lime); }
.write-area::placeholder { color:var(--faint); }
.write-meter { display:flex; justify-content:space-between; font-size:12px; color:var(--muted-2); padding:0 4px; }

.score-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.score-box { background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:16px 6px; text-align:center; }
.sc-v { font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-0.02em; color:var(--lime); }
.sc-l { font-size:11px; color:var(--muted-2); margin-top:4px; }

.write-comment {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:18px; font-size:14px; line-height:1.65;
}
.write-level { font-size:13px; color:var(--muted); text-align:center; }
/* Исправленный текст — кремовая плашка: его читают целиком, как готовый ответ */
.write-fixed {
  background:var(--cream); color:var(--ink);
  border-radius:16px; padding:18px;
  font-size:15px; line-height:1.75; white-space:pre-wrap;
}

.note-item {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; margin-bottom:8px;
}
.note-wrong { color:var(--clay); font-size:14px; text-decoration:line-through; }
.note-right { color:var(--lime); font-size:14px; font-weight:500; margin-top:6px; }
.note-why { color:var(--muted); font-size:13px; margin-top:8px; line-height:1.55; }

/* Аудирование: текст закрыт, остаётся только звук */
.read-actions { display:flex; gap:8px; flex-wrap:wrap; }
.read-hidden {
  margin-top:18px; padding:24px 20px; border-radius:16px;
  background:var(--surface-3); border:1px dashed var(--line);
  font-size:14px; line-height:1.65; color:var(--muted); text-align:center;
}
.read-reveal {
  display:block; margin:14px auto 0; cursor:pointer;
  background:transparent; color:var(--cream); border:1px solid var(--line);
  padding:9px 18px; border-radius:99px;
  font-family:var(--font-sans); font-size:13px; font-weight:400;
  transition:border-color .15s, transform .12s;
}
.read-reveal:hover { border-color:var(--muted-2); }
.read-reveal:active { transform:scale(.96); }

/* Экран добавления слов */
#words-setup, #words-done, #words-error, #words-loading {
  display:flex; flex-direction:column; gap:14px;
}
.words-summary {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px;
  font-size:13px; color:var(--muted); line-height:1.65; text-align:center;
}

/* Завершить сессию досрочно — рядом с «назад» в шапке игры */
.finish-btn {
  border:1px solid var(--line); cursor:pointer;
  background:transparent; color:var(--muted);
  padding:9px 14px; border-radius:12px; white-space:nowrap;
  font-family:var(--font-sans); font-size:13px; font-weight:400;
  transition:border-color .15s, color .15s, transform .12s;
}
.finish-btn:active { transform:scale(.96); }
.finish-btn:hover { border-color:var(--muted-2); color:var(--cream); }

/* Часы сессии: сколько времени идёт занятие */
.g-clock-pill {
  display:flex; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--line);
  padding:7px 12px; border-radius:99px;
  font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--muted);
}

/* ── Kurs: dastur, bloklar va dars sahifasi ──────────────────────────
   Уроки лежали в data/lessons и не показывались нигде — этот экран их и
   открывает. Палитра и радиусы те же, что у остальных карточек. */

.course-tabs { display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; }
.course-tab {
  padding:8px 18px; border-radius:99px; cursor:pointer;
  background:transparent; color:var(--muted);
  border:1px solid var(--line); font-size:14px; font-weight:500;
  transition:background-color .15s, color .15s, border-color .15s;
}
.course-tab:hover { color:var(--cream); border-color:var(--muted-2); }
.course-tab.active { background:var(--lime); color:var(--ink); border-color:var(--lime); }

.course-head {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:20px; padding:20px; margin-bottom:18px;
}
.ch-title { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--cream); }
.ch-desc { font-size:14px; color:var(--muted); margin-top:4px; }
.ch-bar { height:6px; background:var(--line); border-radius:3px; margin-top:14px; overflow:hidden; }
.ch-bar i { display:block; height:100%; background:var(--lime); border-radius:3px; transition:width .3s; }
.ch-count { font-size:12px; color:var(--muted-2); margin-top:7px; }

.course-block { margin-bottom:16px; }
.cb-head { padding:0 4px 10px; }
.cb-title { font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--cream); }
.cb-sub { font-size:13px; color:var(--muted-2); margin-top:2px; }
.cb-lessons {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:18px; overflow:hidden;
}

.course-lesson-row {
  display:flex; align-items:center; gap:14px; width:100%;
  padding:14px 16px; cursor:pointer; text-align:left;
  background:transparent; border:none; border-bottom:1px solid var(--line-soft);
  transition:background-color .12s;
}
.course-lesson-row:last-child { border-bottom:none; }
.course-lesson-row:hover { background:var(--surface-3); }
.cl-num {
  flex:none; width:34px; height:34px; border-radius:10px;
  background:var(--surface-3); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600;
}
.course-lesson-row.done .cl-num { background:var(--lime); color:var(--ink); }
.cl-text { flex:1; min-width:0; }
.cl-can { display:block; font-size:14.5px; color:var(--cream); font-weight:500; }
.cl-gram { display:block; font-size:12.5px; color:var(--muted-2); margin-top:2px; }
.cl-mark { flex:none; color:var(--lime); font-size:16px; }

/* ── Sahifa: mavzu tushuntirilishi ───────────────────────────────── */
.lesson-head { margin:16px 0 22px; }
.lh-level {
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);
}
.lh-title {
  font-family:var(--font-display); font-size:26px; font-weight:600;
  letter-spacing:-0.02em; color:var(--cream); margin:6px 0 12px;
}
.lh-can { font-size:15px; color:var(--cream); margin-bottom:8px; }
.lh-can b { color:var(--lime); font-weight:500; }
.lh-why {
  font-size:14px; color:var(--muted); line-height:1.65;
  border-left:3px solid var(--lime); padding-left:14px;
}

.lesson-section { margin-bottom:26px; }
.ls-title {
  font-family:var(--font-display); font-size:19px; font-weight:600;
  color:var(--cream); margin-bottom:6px;
}
.ls-note { font-size:13px; color:var(--muted-2); margin-bottom:14px; }

.rule-point { display:flex; gap:12px; margin-bottom:18px; }
.rp-num {
  flex:none; width:26px; height:26px; border-radius:8px;
  background:var(--lime); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.rp-body { flex:1; min-width:0; }
.rp-text { font-size:15px; color:var(--cream); line-height:1.65; margin-bottom:10px; }
.rp-ex {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:11px 14px; margin-bottom:7px;
}
.rp-en { display:block; font-size:15px; color:var(--lime); font-weight:500; }
.rp-uz { display:block; font-size:13.5px; color:var(--muted); margin-top:3px; }

.rule-table-wrap { overflow-x:auto; border-radius:14px; border:1px solid var(--line); }
.rule-table { width:100%; border-collapse:collapse; min-width:340px; }
.rule-table th {
  background:var(--surface-3); color:var(--muted-2);
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  text-align:left; padding:11px 14px; white-space:nowrap;
}
.rule-table td {
  padding:11px 14px; font-size:14px; color:var(--cream);
  border-top:1px solid var(--line-soft);
}

.err-card {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; margin-bottom:10px;
}
.err-line { font-size:14.5px; margin-bottom:5px; }
.err-line.wrong { color:var(--clay); text-decoration:line-through; }
.err-line.right { color:var(--lime); }
.err-tag { display:inline-block; width:16px; text-decoration:none; }
.err-why { font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.6; }

.lesson-words {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
}
.lw-row { padding:12px 16px; border-bottom:1px solid var(--line-soft); }
.lw-row:last-child { border-bottom:none; }
.lw-main { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.lw-en { font-size:15.5px; font-weight:500; color:var(--cream); }
.lw-ipa { font-size:12.5px; color:var(--faint); }
.lw-uz { font-size:14px; color:var(--lime); margin-top:2px; }
.lw-ex { font-size:13px; color:var(--muted-2); margin-top:4px; font-style:italic; }

.lesson-actions { display:flex; flex-direction:column; gap:10px; margin:26px 0 40px; }
.course-empty {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:20px; padding:40px 20px; text-align:center; color:var(--muted);
}

/* ── Dars ichidagi mashqlar va sxema ─────────────────────────────── */
.lesson-visual {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:18px; margin:0 0 20px;
}
.lesson-visual svg { width:100%; height:auto; display:block; }
.lesson-visual figcaption {
  font-size:13px; color:var(--muted-2); margin-top:10px; text-align:center;
}
.ex-list { display:flex; flex-direction:column; gap:10px; }
.ex-card {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px;
}
.ex-q { font-size:15px; color:var(--cream); margin-bottom:10px; }
.ex-q b { color:var(--lime); }
.ex-opts { display:flex; flex-wrap:wrap; gap:8px; }
.ex-opt {
  padding:9px 15px; border-radius:10px; cursor:pointer;
  background:var(--surface-3); color:var(--cream);
  border:1px solid var(--line); font-size:14px; font-family:var(--font-sans);
  transition:background-color .15s, border-color .15s, color .15s;
}
.ex-opt:hover:not(:disabled) { border-color:var(--muted-2); }
.ex-opt:disabled { cursor:default; }
.ex-opt.right { background:var(--lime); color:var(--ink); border-color:var(--lime); }
.ex-opt.wrong { background:transparent; color:var(--clay); border-color:var(--clay); }
.ex-why {
  font-size:13.5px; color:var(--muted); margin-top:10px;
  padding-top:10px; border-top:1px solid var(--line-soft); line-height:1.6;
}