:root{
  --bg:#f5f6fb;
  --surface:#ffffff;
  --text:#1a1b25;
  --text-muted:#6b7080;
  --primary:#4f46e5;
  --primary-dark:#4338ca;
  --accent:#0d002e;
  --green:#16a34a;
  --blue:#2563eb;
  --teal:#0d9488;
  --red:#dc2626;
  --amber:#d97706;
  --border:#e6e7ef;
  --radius:16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
#app{
  display:flex;
  align-items:stretch;
  width:100%;
  min-height:100vh;
}

/* ---------- боковая панель (сайт для компьютера) ---------- */
.sidebar{
  flex:0 0 250px;
  width:250px;
  box-sizing:border-box;
  background:var(--accent);
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:28px 16px 18px;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar-brand{
  padding:0 10px;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-logo{
  width:70%;
  height:auto;
  display:block;
}
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sidebar-item{
  display:flex;
  align-items:center;
  gap:12px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.72);
  font-size:15px;
  font-weight:600;
  padding:12px 12px;
  border-radius:12px;
  text-align:left;
}
.sidebar-item:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidebar-item.active{background:rgba(255,255,255,.16); color:#fff;}
.sidebar-user{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:14px 12px;
  margin-bottom:-6px;
  border:none;
  border-top:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#fff;
  border-radius:12px;
  text-align:left;
}
.sidebar-user:hover{background:rgba(255,255,255,.08);}
.sidebar-user.active{background:rgba(255,255,255,.16);}
.sidebar-user-name{
  font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.main-area{
  flex:1;
  min-width:0;
  height:100vh;
  overflow-y:auto;
}
.main-inner{
  max-width:960px;
  margin:0 auto;
  padding:26px 40px 60px;
  display:flex;
  flex-direction:column;
}
/* ---------- экран "Лексика" — на всю ширину, без читательской колонки,
 * чтобы плитки наборов начинались у самой боковой панели и заканчивались
 * у правого края сайта ---------- */
.main-inner-wide{
  max-width:none;
  width:100%;
  padding-left:0;
  padding-right:300px;
}

/* ---------- экран входа / регистрации ---------- */
.auth-page{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
}
.auth-page-inner{width:100%; max-width:400px;}
.auth-brand{
  display:flex;
  justify-content:center;
  margin-bottom:18px;
}
.brand-logo-auth{
  width:150px;
  height:auto;
}
.auth-card{
  width:100%;
  background:var(--surface);
  border-radius:20px;
  box-shadow:0 8px 30px rgba(15,17,30,.09);
  overflow:hidden;
}

/* ---------- список наборов сеткой, разбитый на разделы ---------- */
.lexicon-section{
  margin-bottom:24px;
}
.lexicon-section-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:15px;
  color:var(--text);
  padding:0 2px;
  margin-bottom:12px;
}
.sets-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width:1000px){
  .sets-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:620px){
  .sets-grid{ grid-template-columns:1fr; }
}

/* ---------- пара небольших групп бок о бок (например "Числа" и "Быт и
 * одежда") — см. pairWithNext в LEXICON_GROUPS / renderLexiconGroupsHtml ---------- */
.lexicon-row{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.lexicon-section-half{
  flex:1;
  min-width:0;
}
.sets-grid-half{
  /* число колонок подстраивается под количество тем в группе (2 или 3),
     чтобы группа с 3 темами по ширине занимала столько же места, сколько
     и группа с 2 темами, а не расползалась шире — см. sets-grid-cols-N,
     которые проставляет renderLexiconGroupsHtml */
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.sets-grid-half.sets-grid-cols-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
@media (max-width:760px){
  .lexicon-row{ flex-direction:column; gap:0; }
}

/* ---------- экран "Лексика" — новый дизайн (шапка + поиск + карточки) ---------- */
.lexicon-topbar{
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:16px 16px 4px;
}
.lexicon-heading{
  flex:1;
  min-width:220px;
}
.lexicon-heading h1{
  font-size:24px;
  margin:0 0 6px;
  font-weight:800;
  color:var(--accent);
}
.lexicon-subtitle{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--text-muted);
  max-width:480px;
}

/* ---------- выпадающий список уровней ("Уровень A1" / A2 / B1 / "Мои
 * наборы") прямо под подзаголовком "Лексика" — раскрывается поверх
 * остальной вёрстки (position:absolute), а не раздвигает её ---------- */
.lexicon-level-select{
  position:relative;
  margin-top:12px;
  max-width:240px;
}
.lexicon-level-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:10px;
  padding:9px 12px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
}
.lexicon-level-toggle:active{transform:scale(.98);}
.lexicon-level-chevron{display:flex; color:var(--text-muted); transition:transform .2s ease;}
.lexicon-level-chevron.open{transform:rotate(180deg);}
.lexicon-level-panel-wrap{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:30;
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.lexicon-level-panel-wrap.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.lexicon-level-panel{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.lexicon-level-option{
  text-align:left;
  border:none;
  background:transparent;
  padding:9px 10px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
}
.lexicon-level-option:hover{background:var(--bg);}
.lexicon-level-option.active{background:var(--primary); color:#fff;}

.lexicon-vitals-wrap{
  flex-shrink:0;
  width:100%;
  max-width:340px;
}
.lexicon-vitals-wrap .learn-vitals-card{
  width:100%;
}
.lexicon-search{
  position:relative;
  display:flex;
  align-items:center;
}
.lexicon-search svg{
  position:absolute;
  left:14px;
  color:var(--text-muted);
  pointer-events:none;
}
.lexicon-search input{
  width:100%;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:12px;
  padding:12px 14px 12px 40px;
  font-size:15px;
  color:var(--text);
  box-sizing:border-box;
}
.lexicon-search input:focus{border-color:var(--primary);}
.lexicon-categories-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:4px;
}
.lexicon-categories-title{
  margin:0;
  font-size:19px;
  font-weight:700;
}

button{
  font-family:inherit;
  cursor:pointer;
}
input,textarea{
  font-family:inherit;
}

/* ---------- header ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 16px 10px;
  background:var(--bg);
}
.topbar h1{
  font-size:19px;
  margin:0;
  flex:1;
  font-weight:700;
  color:var(--accent);
}
/* ---------- шапка страницы урока — кнопка "назад" прижата к левому краю
 * белой области (тот же приём "притяжки" к синей панели, что и у
 * --lesson-list-pull / --practice-header-pull выше: см. пояснение у
 * .lesson-list). Здесь у .topbar убираем его собственный левый паддинг
 * (16px), чтобы формула считала так же, как для .lesson-list (0 паддинга
 * сверх .main-inner) — и кнопка "назад" вставала в тот же ~14px зазор от
 * синей панели, что и остальные "прижатые" заголовки, не заходя на неё. */
.lesson-page-topbar{
  padding-left:0;
  --lesson-page-topbar-pull: calc(26px + max(0px, (100vw - 1210px) / 2));
  width:calc(100% + var(--lesson-page-topbar-pull));
  margin-left:calc(-1 * var(--lesson-page-topbar-pull));
}

/* ---------- панель аккаунта ---------- */
.account-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 16px 8px;
  font-size:13px;
  color:var(--text-muted);
}
.account-name{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
  color:var(--text);
}
.link-btn{
  border:none;
  background:none;
  color:var(--primary);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  padding:4px 0;
}
.sync-badge{
  font-size:12px;
  color:var(--text-muted);
  min-width:0;
  white-space:nowrap;
}
.sync-badge.error{ color:var(--red); }
.sync-badge.saved{ color:var(--green); }
.icon-btn{
  border:none;
  background:var(--surface);
  border-radius:12px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  color:var(--text);
  flex-shrink:0;
}
.icon-btn:active{transform:scale(.94);}

/* ---------- иконки пунктов навигации (используются в .sidebar-item) ---------- */
.bn-icon{font-size:20px; line-height:1; display:flex; align-items:center;}
.bn-icon svg{width:20px; height:20px; display:block;}

/* ---------- круглая миниатюра аватара (в духе Instagram) ---------- */
.avatar-thumb{
  border-radius:50%;
  overflow:hidden;
  display:inline-flex;
  flex-shrink:0;
}
.avatar-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- профиль ---------- */
.profile-avatar-big{
  width:110px; height:110px;
  overflow:hidden;
  background:var(--surface); border-radius:50%;
  margin:8px auto 12px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.profile-avatar-big img{width:100%; height:100%; object-fit:cover; display:block;}
.profile-name{text-align:center; font-weight:700; font-size:19px;}
.avatar-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:14px; margin-top:14px;
}
.avatar-option{
  aspect-ratio:1;
  border:3px solid transparent;
  padding:3px;
  background:transparent;
  border-radius:50%;
  overflow:hidden;
}
.avatar-option img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
.avatar-option.selected{border-color:var(--primary);}
.avatar-option:active{transform:scale(.94);}
.back-btn{
  border:1.5px solid var(--accent);
  border-radius:20px;
  background:transparent;
  font-size:15px;
  color:var(--accent);
  font-weight:600;
  padding:6px 14px 6px 10px;
  min-height:36px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:4px;
}
.back-btn:active{
  background:var(--accent);
  color:#fff;
}
.back-btn:active .back-arrow::before{
  border-color:#fff;
}
.back-arrow{
  position:relative;
  width:8px;
  height:8px;
  flex-shrink:0;
}
.back-arrow::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border-left:2.5px solid var(--accent);
  border-bottom:2.5px solid var(--accent);
  transform:translate(-50%,-50%) rotate(45deg);
}

/* ---------- "жизни" итогового теста раздела (см. PRACTICE_TEST_LIVES/
 * practiceLivesHtml в app.js) — ряд из 3 сердец в шапке экрана задания,
 * между кнопкой "Прервать" и счётчиком "N/M"; потраченная жизнь — серый
 * контур вместо закрашенного красного сердца. У обычных кружков (лимита
 * жизней нет) этого блока в разметке вообще нет. ---------- */
.practice-lives{
  display:flex;
  align-items:center;
  gap:3px;
  margin-left:auto;
}
.practice-life{
  display:flex;
}
.practice-life svg{
  width:18px;
  height:18px;
}

/* ---------- content ---------- */
.content{
  flex:1;
  padding:4px 16px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ---------- buttons ---------- */
.btn{
  border:none;
  border-radius:14px;
  padding:14px 18px;
  font-size:16px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:active{background:var(--primary-dark);}
.btn-secondary{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.06);}
.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary);}
.btn-danger{background:transparent;color:var(--red);}
.btn-logout{background:var(--surface);color:var(--red);border:1.5px solid var(--red);}
.btn-logout:active{background:#fdeceb;}
.btn-block{width:100%;}
.btn-row{display:flex;gap:10px;}
.btn-row .btn{flex:1;}

/* ---------- set card list (плитка набора в разделе "Лексика") ---------- */
.set-card{
  position:relative;
  background:var(--surface);
  border-radius:var(--radius);
  padding:14.5px 12px;
  margin:0 2.5px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  gap:12px;
}
.set-card.completed{
  box-shadow:0 0 0 1.5px var(--green) inset, 0 1px 3px rgba(0,0,0,.06);
}
/* заглушка/картинка набора — сама плитка визуально крупнее (62x62), чем
 * место, которое она занимает в строке (52px по вертикали, как раньше):
 * отрицательные вертикальные отступы дают ей "вылезти" за пределы своей
 * ячейки flex-строки на 5px сверху и снизу, не увеличивая при этом высоту
 * всей карточки набора (.set-card) — высоту карточки по-прежнему задаёт
 * текстовый блок .set-card-body, который чуть выше 52px. */
.set-card-thumb{
  flex-shrink:0;
  width:62px;
  height:62px;
  margin:-5px 0;
  border-radius:12px;
  background:var(--bg);
  overflow:hidden;
}
.set-card-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.set-card-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.set-card-toprow{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.set-card h3{
  margin:0;
  font-size:15px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.set-card-meta-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.set-card-count{
  flex-shrink:0;
  color:var(--text-muted);
  font-size:12px;
}
.set-card-pct{
  flex-shrink:0;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
}
.set-card-chevron{
  flex-shrink:0;
  color:var(--text-muted);
  display:flex;
}
.set-card-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.progress-bar{
  height:8px;
  background:var(--border);
  border-radius:999px;
  overflow:hidden;
}
.progress-bar > div{
  height:100%;
  background:var(--green);
  border-radius:999px;
  transition:width .3s ease;
}

/* ---------- результаты теста: "лучший" / "последний" ---------- */
.results-row{
  display:flex;
  gap:8px;
}
.result-box{
  flex:1;
  min-width:0;
  border-radius:12px;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  background:var(--bg);
  border:1.5px solid var(--border);
}
.result-label{
  font-size:11px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:600;
}
.result-grade{
  font-size:20px;
  font-weight:800;
  line-height:1.1;
}
.result-pct{
  font-size:11px;
  color:var(--text-muted);
}
.result-empty .result-grade{color:var(--text-muted);}
.result-box.grade-a{background:#e7f8ee;border-color:var(--green);}
.result-box.grade-a .result-grade{color:var(--green);}
.result-box.grade-b{background:#eef0fe;border-color:var(--primary);}
.result-box.grade-b .result-grade{color:var(--primary);}
.result-box.grade-c{background:#fff7e6;border-color:var(--amber);}
.result-box.grade-c .result-grade{color:var(--amber);}
.result-box.grade-df{background:#fdeceb;border-color:var(--red);}
.result-box.grade-df .result-grade{color:var(--red);}

.empty-state{
  text-align:center;
  color:var(--text-muted);
  padding:48px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.empty-state .emoji{font-size:40px;}

/* ---------- set detail actions grid ---------- */
.action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.action-tile{
  background:var(--surface);
  border:none;
  border-radius:14px;
  padding:18px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  font-weight:600;
  font-size:14px;
  color:var(--text);
}
.action-tile .emoji{font-size:24px;}
.action-tile-icon{width:26px; height:26px; display:flex;}
.action-tile-icon img{width:100%; height:100%; display:block; object-fit:contain;}
.action-tile:active{background:#f0f0f8;}

/* ---------- шапка экрана "Изучение" + карточки справа (серия/подсказки) ---------- */
.learn-content{ padding-top:10px; }
.learn-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:24px;
}
/* --lesson-list-pull определён здесь (а не прямо на .lesson-list), чтобы тем
 * же значением можно было сдвинуть влево и шапку (.learn-header) — оба тянут
 * зазор от синей боковой панели к одному и тому же ~14px (см. пояснение
 * формулы у .lesson-list ниже). "- 50px" в конце — доп. сдвиг вправо на 50px
 * относительно этого базового зазора (по просьбе, после исходного сдвига). */
.learn-main-col{
  min-width:0;
  --lesson-list-pull: calc(42px + max(0px, (100vw - 1210px) / 2) - 50px);
}
/* Правая колонка "прилипает" к верху видимой области: при прокрутке длинного
 * списка уроков карточки кошелька/серии/подсказок остаются на месте, а не
 * уезжают за границу экрана. align-self:start обязателен — иначе элемент
 * сетки растягивается на всю высоту строки (по высоте списка уроков), и
 * прилипание не срабатывает: прилипать просто нечему, блок и так во всю
 * строку. Прокручиваемый контейнер здесь — .main-area (height:100vh;
 * overflow-y:auto), поэтому top отсчитывается от её верхнего края и
 * совпадает с padding-top у .main-inner. */
.learn-side-col{
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:36px;
  align-self:start;
}

/* Карточка "монеты / опыт / streak" — самая верхняя в правой колонке. */
.learn-vitals-card{
  display:flex;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:14px 8px;
}
.learn-vitals-item{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.learn-vitals-icon{
  width:22px;
  height:22px;
  flex-shrink:0;
  display:flex;
}
.learn-vitals-icon img{ width:100%; height:100%; display:block; object-fit:contain; }
.learn-vitals-value{
  font-size:17px;
  font-weight:800;
  color:var(--text);
}
.learn-vitals-divider{
  width:1px;
  align-self:stretch;
  background:var(--border);
}
.learn-header{
  margin:6px 0 18px;
  width:calc(100% + var(--lesson-list-pull));
  margin-left:calc(-1 * var(--lesson-list-pull));
}
.learn-title{
  margin:0 0 6px;
  font-size:28px;
  font-weight:800;
  color:var(--accent);
}
.learn-subtitle{
  margin:0;
  font-size:14px;
  color:var(--text-muted);
}

.learn-stats-card{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:16px 18px;
}
.learn-stats-label{
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:4px;
}
.learn-stats-value{
  font-size:22px;
  font-weight:800;
  color:var(--primary);
}
.learn-stats-divider{
  width:1px;
  align-self:stretch;
  background:var(--border);
}
.learn-stats-progress{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.learn-stats-ring{
  position:relative;
  width:56px;
  height:56px;
  flex-shrink:0;
}
.learn-stats-ring-pct{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  color:var(--text);
}
.learn-stats-progress-label{
  font-size:12px;
  color:var(--text-muted);
}
.learn-stats-progress-value{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
}

.learn-tips-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:16px 18px;
  margin-top:75px;
}
.learn-tips-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:var(--amber);
}
.learn-tips-title{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.learn-tips-text{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-muted);
  min-height:58px;
}
.learn-tips-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.learn-tips-btn{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-muted);
}
.learn-tips-btn:active{background:var(--bg);}
.learn-tips-dots{
  display:flex;
  align-items:center;
  gap:6px;
}
.learn-tips-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  border:none;
  padding:0;
  background:var(--border);
}
.learn-tips-dot.active{ background:var(--primary); }
@media (max-width:760px){
  .learn-grid{ display:block; }
  .learn-side-col{
    flex-direction:row;
    align-items:flex-start;
    margin-top:16px;
    position:static;
  }
  .learn-side-col > *{ flex:1; min-width:0; }
  .learn-stats-card{ flex-direction:column; align-items:flex-start; }
  .learn-stats-divider{ display:none; }
}

/* В низком окне (меньше ~560px по высоте) правая колонка «Изучения» уже не
 * помещается целиком в видимую область, и прилипание спрятало бы нижнюю
 * карточку под краем экрана без возможности до неё доскроллить. Поэтому там
 * колонка снова прокручивается вместе со страницей, как раньше. */
@media (max-height:560px){
  .learn-side-col, .practice-side-col{ position:static; }
  .practice-level-sticky{ position:static; }
}

/* ---------- экран "Практика" — заголовок ---------- */
/* Тот же сдвиг влево к синей боковой панели, что и у заголовка "Изучение"
 * (см. --lesson-list-pull выше) — но здесь пуллится только сам заголовок,
 * карта уровней (.practice-path) не двигается и остаётся отцентрованной. */
.practice-content{
  padding-top:10px;
  --practice-header-pull: calc(42px + max(0px, (100vw - 1210px) / 2) - 50px);
}
/* Та же сетка "основная колонка / карточки справа", что и на "Изучение"
 * (.learn-grid) — слева карта уровней, справа кошелёк/опыт/streak и подсказки. */
.practice-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:24px;
}
.practice-main-col{ min-width:0; }
/* То же прилипание, что и у .learn-side-col (см. пояснение там): карта
 * уровней очень длинная, и без этого кошелёк с подсказками уезжали вверх
 * за границу экрана уже на первых секундах прокрутки. */
.practice-side-col{
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:36px;
  align-self:start;
}
/* На "Изучение" у .learn-tips-card есть свой margin-top:75px (отдельная
 * просьба сдвинуть именно ту карточку ниже, под карточкой "Серия уроков") —
 * здесь между карточками только "кошелёк" и "Подсказки", без карточки серии
 * уроков посередине, поэтому этот лишний отступ убираем и оставляем обычный
 * gap колонки. */
.practice-tips-card{ margin-top:0; }
.practice-header{
  margin:6px 0 0;
  width:calc(100% + var(--practice-header-pull));
  margin-left:calc(-1 * var(--practice-header-pull));
}
/* Выбор уровня (A1 / A2 / B1) остаётся на виду при прокрутке карты — как и
 * карточки справа (см. .practice-side-col). Сдвиг влево тот же, что у шапки,
 * поэтому до прокрутки кнопка стоит ровно там же, где стояла внутри шапки, а
 * margin-top:12px повторяет прежний отступ от подзаголовка.
 * Обёртка растянута на всю ширину колонки, но сама по себе прозрачная и
 * "сквозная" для мыши (pointer-events:none) — иначе её невидимая правая часть
 * накрывала бы кружки уровней и съедала клики по ним; кликабельна только сама
 * кнопка. z-index:20 держит её над всплывающим окошком уровня (у того 10). */
.practice-level-sticky{
  position:sticky;
  top:36px;
  z-index:20;
  width:calc(100% + var(--practice-header-pull));
  margin-left:calc(-1 * var(--practice-header-pull));
  margin-top:12px;
  margin-bottom:18px;
  pointer-events:none;
}
.practice-level-sticky > .lexicon-level-select{
  margin-top:0;
  pointer-events:auto;
}
.practice-title{
  margin:0 0 6px;
  font-size:28px;
  font-weight:800;
  color:var(--accent);
}
.practice-subtitle{
  margin:0;
  font-size:13px;
  color:var(--text-muted);
  opacity:.7;
}
@media (max-width:760px){
  .practice-grid{ display:block; }
  .practice-level-sticky{ position:static; }
  .practice-side-col{
    flex-direction:row;
    align-items:flex-start;
    margin-top:16px;
    position:static;
  }
  .practice-side-col > *{ flex:1; min-width:0; }
}

/* ---------- экран "Практика" — карта уровней в духе Duolingo ---------- */
/* Пока витрина без реальной логики прохождения (см. renderPracticePath) —
 * зигзагом расположенные кружки-уровни, отцентрованные в .content.
 * width:100% обязателен: .content — flex-контейнер (column), а у флекс-элемента
 * с авто-отступами по горизонтали (margin:auto) и шириной auto браузер вместо
 * растягивания на всю ширину включает "сжатие по контенту" (stretch отключается
 * авто-отступами по кросс-оси) — тогда вся карта и её зигзаг-сдвиги ломаются. */
.practice-path{
  position:relative;
  width:100%;
  max-width:460px;
  margin:40px auto 0;
  padding-bottom:40px;
}
.pp-node-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  height:132px;
}
.pp-node{
  width:88px;height:88px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  border:none;padding:0;cursor:pointer;font-family:inherit;
  transition:transform .12s ease;
}
.pp-node:hover{transform:translateY(-2px);}
.pp-node:active{transform:translateY(1px);}
.pp-node-open{transform:translateY(1px);}
.pp-node svg{width:40px;height:40px;}
.pp-star{
  background:var(--primary);
  box-shadow:0 7px 0 var(--primary-dark), 0 12px 22px rgba(79,70,229,.35);
}
.pp-locked{
  width:74px;height:74px;
  background:var(--border);
  box-shadow:0 6px 0 #d3d5e2;
}
.pp-locked svg{width:32px;height:32px;color:#aeb1c4;}
.pp-chest{
  background:var(--amber);
  box-shadow:0 7px 0 #b45f04, 0 12px 22px rgba(217,119,6,.3);
}
.pp-trophy{
  width:98px;height:98px;
  background:var(--green);
  box-shadow:0 7px 0 #116234, 0 12px 22px rgba(22,163,74,.3);
}
.pp-trophy svg{width:44px;height:44px;}
.pp-label{
  position:absolute;top:-34px;left:50%;transform:translateX(-50%);
  background:var(--surface);
  border:1.5px solid var(--primary);
  color:var(--primary);
  font-size:12px;font-weight:800;letter-spacing:.04em;
  padding:5px 12px;border-radius:10px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  white-space:nowrap;
}
.pp-label::after{
  content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:5px solid var(--primary);
}
.pp-o1{margin-left:0;}
.pp-o2{margin-left:-84px;}
.pp-o3{margin-left:84px;}
.pp-o4{margin-left:-52px;}
.pp-o5{margin-left:0;}
@media (max-width:520px){
  .pp-o2{margin-left:-56px;}
  .pp-o3{margin-left:56px;}
  .pp-o4{margin-left:-34px;}
}

/* Разделитель между первой и второй пятёркой уровней карты "Практика" —
 * серая полупрозрачная полоса по центру, с отступами сверху/снизу, чтобы
 * визуально отделить один "раздел" уровней от другого. */
.pp-divider{
  width:220px;
  max-width:70%;
  height:5px;
  border-radius:5px;
  background:rgba(100,102,128,.18);
  margin:14px auto 30px;
}

/* ---------- окошко уровня карты "Практика" (раскрывается по клику) ---------- */
/* Окошко — абсолютно позиционированный оверлей внутри .pp-node-wrap (который
 * уже position:relative), поэтому оно ложится поверх интерфейса и не сдвигает
 * ни сам кружок, ни уровни ниже — .pp-node-wrap не меняет высоту при открытии.
 * Если окошко перекроет собой кружок следующего уровня — это ожидаемо. */
.pp-popover-row{
  position:absolute;
  top:100%;
  left:0;right:0;
  margin-top:-24px;
  display:flex;
  justify-content:center;
  z-index:10;
}
.pp-popover{
  width:280px;
  background:var(--accent);
  color:#fff;
  border-radius:18px;
  padding:22px 18px 18px;
  text-align:center;
  box-shadow:0 12px 28px rgba(13,0,46,.35);
}
/* три деления прогресса уровня — каждое соответствует одному из трёх
 * проходов, нужных, чтобы полностью закрыть уровень (см. advancePracticeNode
 * / PRACTICE_PASSES_REQUIRED в app.js). */
.pp-progress{
  display:flex;
  gap:6px;
  margin-bottom:14px;
}
.pp-progress-seg{
  flex:1;
  height:7px;
  border-radius:5px;
  background:rgba(255,255,255,.16);
}
.pp-progress-seg.filled{
  background:#fff;
}
.pp-popover-title{
  font-size:15px;
  font-weight:800;
  margin-bottom:4px;
}
.pp-popover-subtitle{
  font-size:12px;
  color:rgba(255,255,255,.65);
  margin-bottom:16px;
}
.pp-popover-btn{
  display:block;
  width:100%;
  background:#fff;
  color:var(--accent);
  border:none;
  border-radius:12px;
  padding:12px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  font-family:inherit;
  cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.15);
}
.pp-popover-btn:hover{background:#f0f0f5;}
.pp-popover-btn:active{transform:translateY(1px); box-shadow:0 2px 0 rgba(0,0,0,.15);}
/* уровень пройден все PRACTICE_PASSES_REQUIRED раз — кнопка остаётся
 * кликабельной (зелёная, подписана "Повторить"), просто повторное
 * прохождение уже не двигает деления прогресса и не даёт монет — только
 * небольшой опыт (см. PRACTICE_REPLAY_XP/awardPracticeReplay). */
.pp-popover-btn.done{
  background:var(--green);
  color:#fff;
  box-shadow:0 3px 0 #116234;
}
.pp-popover-btn.done:hover{background:#1a9c58;}
.pp-popover-btn.done:active{transform:translateY(1px); box-shadow:0 2px 0 #116234;}

/* ---------- список уроков ("Изучение") — широкие кнопки ---------- */
/* .main-inner центрируется (max-width:960px, margin:0 auto) внутри свободного
 * места справа от сайдбара (250px), поэтому при широком окне слева от него
 * появляется дополнительное авто-поле — просто отрицательный margin здесь дал
 * бы разный зазор на разных экранах. Формула ниже вычитает именно это авто-
 * поле (100vw - 250px сайдбар - 960px .main-inner, пополам, не меньше 0),
 * поэтому итоговый зазor слева от синей панели всегда ~14px (как между
 * самими уроками), независимо от ширины окна; ширина увеличена на ту же
 * величину, чтобы правый край остался на месте, как у остальных экранов. */
.lesson-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:calc(100% + var(--lesson-list-pull));
  margin-left:calc(-1 * var(--lesson-list-pull));
  margin-top:50px;
}
.lesson-item{
  width:100%;
}
.lesson-tile{
  display:flex;
  align-items:stretch;
  width:100%;
  box-sizing:border-box;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;
  transition:border-radius .28s ease;
}
.lesson-item.open .lesson-tile{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom-color:transparent;
  box-shadow:none;
}
.lesson-tile-main{
  flex:1;
  min-width:0;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 10px;
  background:transparent;
  color:var(--text);
  border:none;
  padding:22px 26px;
  font-size:16px;
  font-weight:700;
  text-align:left;
}
.lesson-tile-main:active{opacity:.85;}
.lesson-tile-badge{
  flex-shrink:0;
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-left:-8px;
  border-radius:50%;
  font-size:14px;
  font-weight:700;
  background:#e0e7ff;
  color:#4f46e5;
}
.lesson-item:nth-child(1) .lesson-tile-badge{background:#e0e7ff; color:#4f46e5;}
.lesson-item:nth-child(2) .lesson-tile-badge{background:#ffedd5; color:#c2410c;}
.lesson-item:nth-child(3) .lesson-tile-badge{background:#fce7f3; color:#be185d;}
.lesson-item:nth-child(4) .lesson-tile-badge{background:#ede9fe; color:#6d28d9;}
.lesson-item:nth-child(5) .lesson-tile-badge{background:#dcfce7; color:#15803d;}
.lesson-item:nth-child(6) .lesson-tile-badge{background:#dbeafe; color:#1d4ed8;}
.lesson-item:nth-child(7) .lesson-tile-badge{background:#ffedd5; color:#c2410c;}
.lesson-item:nth-child(8) .lesson-tile-badge{background:#fce7f3; color:#be185d;}
.lesson-item:nth-child(9) .lesson-tile-badge{background:#ede9fe; color:#6d28d9;}
.lesson-item:nth-child(10) .lesson-tile-badge{background:#dcfce7; color:#15803d;}
.lesson-item:nth-child(11) .lesson-tile-badge{background:#dbeafe; color:#1d4ed8;}
.lesson-item:nth-child(12) .lesson-tile-badge{background:#ffedd5; color:#c2410c;}
.lesson-tile-num{flex-shrink:0;}
.lesson-tile-title{
  font-weight:500;
  color:var(--text-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.lesson-arrow-btn{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  background:transparent;
  border:none;
  color:var(--text-muted);
}
.lesson-arrow-btn svg{transition:transform .2s ease;}
.lesson-arrow-btn.open svg{transform:rotate(180deg);}
.lesson-arrow-btn:active{opacity:.7;}

/* ---------- раскрывающееся окошко с содержанием урока ---------- */
/* grid-rows 0fr -> 1fr — плавная анимация высоты под произвольный контент,
 * без резкого появления/исчезновения и без белого промежутка под кнопкой */
.lesson-panel-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;
}
.lesson-item.open .lesson-panel-wrap{
  grid-template-rows:1fr;
}
.lesson-panel-inner{
  overflow:hidden;
  min-height:0;
}
.lesson-panel{
  background:#e6f2ff;
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
  padding:20px 24px;
  color:var(--text);
}
.lesson-panel-top{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.lesson-panel-image{
  width:160px;
  height:160px;
  flex-shrink:0;
  border-radius:12px;
  background:#fff;
  border:1px dashed var(--border);
}
img.lesson-panel-image{
  display:block;
  object-fit:cover;
  border:none;
  background:none;
}
.lesson-panel-top-text{
  flex:1;
  min-width:0;
}
.lesson-panel-title{
  font-weight:700;
  font-size:19px;
  margin-bottom:6px;
}
.lesson-panel-checklist-label{
  font-weight:600;
  color:var(--text-muted);
  margin:14px 0 6px;
}
.lesson-panel-checklist{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lesson-panel-checklist li{
  padding-left:26px;
  position:relative;
  line-height:1.4;
}
.lesson-panel-checklist li::before{
  content:'✓';
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-size:12px;
  line-height:18px;
  text-align:center;
}
@media (max-width:600px){
  .lesson-panel-top{flex-direction:column;}
  .lesson-panel-image{width:100%; height:140px;}
}
.lesson-panel-subtitle{
  font-weight:600;
  color:var(--text-muted);
  margin-bottom:6px;
}
.lesson-panel-list{
  margin:0;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.lesson-panel-sublist{
  margin:4px 0 0;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.lesson-panel-text{
  margin:0 0 10px;
  line-height:1.5;
}
.lesson-panel-text:last-child{
  margin-bottom:0;
}
.lesson-panel-empty{
  color:var(--text-muted);
}
.lesson-panel-forward{
  margin-top:16px;
  margin-left:auto;
  padding:8px 16px;
  font-size:14px;
}

/* ---------- содержимое страницы урока (разделы) ---------- */
.lesson-page-card{
  background:#e6f2ff;
  border-radius:14px;
  color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  max-width:720px;
  overflow:hidden;
}
.lesson-page-card-header{
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:11px 24px;
}
.lesson-page-card-body{
  padding:20px 24px;
}
.lesson-page-card-title{
  font-weight:700;
  font-size:17px;
  margin-bottom:10px;
}
.lesson-page-card-text{
  margin:0 0 12px;
  line-height:1.5;
}
.lesson-page-card-lead{
  margin:0 0 6px;
  font-weight:600;
  color:var(--text-muted);
}
.lesson-page-card-list{
  margin:0;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:6px;
  line-height:1.5;
}
.lesson-page-card-outro{
  margin-top:12px;
}
.lesson-dialogue{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 16px;
}
.lesson-dialogue p{
  margin:0;
  line-height:1.5;
}
.lesson-dialogue-speaker{
  font-weight:700;
}
.lesson-vocab-title{
  font-weight:700;
  color:var(--text);
  margin:0 0 8px;
}
.lesson-vocab-columns{
  display:flex;
  gap:8px 28px;
}
.lesson-main-card .lesson-vocab-columns{
  margin-top:12px;
}
.lesson-vocab-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  line-height:1.5;
}
.lesson-vocab-word{
  font-weight:700;
}
.lesson-main-card .lesson-vocab-row{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  border-radius:8px;
  padding:5px 10px;
}
.lesson-main-card .lesson-vocab-speak{
  flex-shrink:0;
  width:14px;
  height:14px;
  display:flex;
  border:none;
  background:none;
  padding:0;
  margin:0;
  cursor:pointer;
  opacity:.75;
  transition:opacity .15s;
}
.lesson-main-card .lesson-vocab-speak img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.lesson-main-card .lesson-vocab-speak:hover,
.lesson-main-card .lesson-vocab-speak:active{
  opacity:1;
}
.lesson-main-card .lesson-vocab-word{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:14px;
  border-bottom:none;
}
.lesson-main-card .lesson-vocab-translation{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:14px;
  color:var(--text);
}
.lesson-vocab-group{
  margin-bottom:14px;
}
.lesson-vocab-group:last-child{
  margin-bottom:0;
}
.lesson-vocab-group-title{
  font-weight:700;
  font-size:14px;
  color:var(--text-muted);
  margin:0 0 6px;
}
/* Необязательная картинка внизу окошка "Словарь" (data.ruVocabImage) —
 * закрепляет выученные слова визуально, в том же окошке, что и сам
 * словарь, без отдельной карточки. */
.lesson-vocab-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  margin-top:14px;
}
.lesson-vocab-image-shrink30{
  width:70%;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- кликабельные слова + карточка слова (раздел "Изучение") ---------- */
.clickable-word{
  cursor:pointer;
  border-bottom:1.5px dotted var(--primary);
  border-radius:2px;
  transition:background-color .15s;
}
.clickable-word:hover,
.clickable-word:active{
  background-color:rgba(79,70,229,.1);
}
.word-popover{
  position:fixed;
  z-index:1000;
  background:var(--surface);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(13,0,46,.25);
  padding:14px 16px;
  min-width:150px;
  max-width:260px;
  text-align:center;
}
.word-popover-word{
  font-weight:700;
  font-size:17px;
  color:var(--text);
}
.word-popover-ipa{
  font-size:13px;
  color:var(--text-muted);
  margin-top:2px;
}
.word-popover-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.word-popover-translation{
  font-size:15px;
  color:var(--text);
  text-align:left;
}
.word-popover-speak{
  flex-shrink:0;
  border:none;
  background:var(--primary);
  color:#fff;
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.word-popover-speak img{
  width:16px;
  height:16px;
  display:block;
  filter:brightness(0) invert(1);
}
.word-popover-speak:active{
  background:var(--primary-dark);
  transform:scale(.94);
}
.word-popover-add{
  display:block;
  width:100%;
  margin-top:10px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--primary);
  font-size:13px;
  font-weight:700;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
}
.word-popover-add:active{transform:scale(.97);}
.word-popover-add.added{
  color:var(--green);
  background:rgba(22,163,74,.08);
  border-color:rgba(22,163,74,.25);
  cursor:default;
}

/* ---------- две маленькие квадратные кнопки-инструменты в правом верхнем
 * углу сайта (справочник форм глаголов / личный словарь) — см.
 * renderTopTools/renderTtModal. Кнопки фиксированы относительно окна, а не
 * страницы, и не зависят от того, какой экран сейчас открыт. ---------- */
.top-tools{
  position:fixed;
  top:20px;
  right:28px;
  display:flex;
  gap:10px;
  z-index:60;
}
.top-tools-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(13,0,46,.1);
}
.top-tools-btn:hover{background:#f0f0f7;}
.top-tools-btn:active{transform:scale(.94);}
.top-tools-btn.active{background:var(--primary); border-color:var(--primary); color:#fff;}

/* ---------- маленькое окошко поверх страницы, которое открывают кнопки
 * .top-tools-btn (не отдельная страница) — тёмная подложка + центрированная
 * карточка со списком. ---------- */
.tt-overlay{
  position:fixed;
  inset:0;
  background:rgba(13,0,46,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:210;
}
.tt-window{
  background:var(--surface);
  width:100%;
  max-width:380px;
  max-height:min(70vh, 560px);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(13,0,46,.3);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.tt-window-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.tt-window-title{
  font-size:17px;
  font-weight:800;
  color:var(--accent);
}
.tt-window-close{
  border:none;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  border-radius:8px;
}
.tt-window-close:hover{background:var(--bg); color:var(--text);}
.tt-window-body{
  padding:14px 16px 16px;
  overflow-y:auto;
}
.tt-empty{
  color:var(--text-muted);
  font-size:14px;
  line-height:1.5;
  text-align:center;
  padding:20px 6px;
}
.tt-vocab-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tt-vocab-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
}
.tt-vocab-main{min-width:0;}
.tt-vocab-word-row{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.tt-vocab-word{
  font-weight:700;
  font-size:15px;
  color:var(--text);
}
.tt-vocab-ipa{
  font-size:12px;
  color:var(--text-muted);
}
.tt-vocab-translation{
  font-size:13px;
  color:var(--text-muted);
  margin-top:1px;
}
.tt-vocab-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.tt-vocab-speak{
  border:none;
  background:var(--primary);
  color:#fff;
  width:28px;
  height:28px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tt-vocab-speak img{width:14px; height:14px; display:block; filter:brightness(0) invert(1);}
.tt-vocab-speak:active{transform:scale(.94);}
.tt-vocab-remove{
  border:none;
  background:transparent;
  color:var(--text-muted);
  width:28px;
  height:28px;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tt-vocab-remove:hover{background:var(--bg); color:var(--red);}

/* ---------- окошко "Грамматика" на странице урока (темы + блоки) ---------- */
.grammar-topic{
  margin-top:22px;
}
.grammar-topic:first-of-type{
  margin-top:12px;
}
.grammar-topic + .grammar-topic{
  padding-top:18px;
  border-top:1px solid rgba(13,0,46,.12);
}
.grammar-topic-heading{
  font-weight:700;
  font-size:16px;
  margin-bottom:8px;
}
.grammar-subheading{
  font-weight:700;
  margin:14px 0 6px;
}
.grammar-highlight{
  font-weight:700;
  font-size:17px;
  letter-spacing:.03em;
  margin:10px 0;
}
.grammar-forms{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:8px 0 14px;
  padding-left:12px;
  border-left:3px solid var(--accent);
}
.grammar-forms-row{
  display:flex;
  gap:8px;
  line-height:1.5;
}
.grammar-forms-left{
  font-weight:600;
  min-width:96px;
}
.grammar-examples{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:8px 0 14px;
  padding:10px 14px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  border-radius:10px;
}
.grammar-example{
  line-height:1.5;
}
.grammar-example-en{
  font-weight:600;
}
.grammar-example-ru{
  color:var(--text-muted);
}
.grammar-example-line{
  font-weight:600;
  margin:8px 0 12px;
  padding:8px 14px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  border-radius:10px;
  line-height:1.5;
}
.grammar-bullets{
  margin:8px 0 14px;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1.5;
}
.grammar-bullets-framed{
  margin:8px 0 14px;
  padding:10px 14px 10px 34px;
  gap:6px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  border-radius:10px;
}
.grammar-highlight-suffix{
  color:var(--primary);
  font-weight:700;
}
.grammar-table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0 14px;
  font-size:15px;
}
.grammar-table-half{
  width:50%;
}
.grammar-table th,
.grammar-table td{
  text-align:left;
  padding:8px 12px;
  border-bottom:1px solid rgba(13,0,46,.12);
}
.grammar-table th{
  color:var(--text-muted);
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.grammar-table td:first-child,
.grammar-table th:first-child{
  padding-left:0;
  font-weight:600;
}
.grammar-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  margin:6px auto 8px;
}
.grammar-image-half{
  width:50%;
}
.grammar-image-sixty{
  width:60%;
}
.grammar-image-left{
  margin-left:0;
  margin-right:auto;
}
.grammar-image-columns{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin:6px 0 8px;
}
.grammar-image-column{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.grammar-image-col-item{
  width:100%;
  margin:0;
}
.grammar-rw{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:8px 0 14px;
  font-size:15px;
}
.grammar-rw-line{
  /* не flex: внутри строки много отдельных inline-элементов
     (кликабельные слова) — flex-контейнер сделал бы из каждого свой
     flex-item и сломал бы innerText/копирование текста переносами
     строк между каждым словом. Вместо flex — "висячий" отступ под
     значок ✗/✓ через position:relative/absolute. */
  position:relative;
  padding-left:22px;
}
.grammar-rw-mark{
  position:absolute;
  left:0;
  top:0;
  font-weight:700;
}
.grammar-rw-wrong{
  color:var(--text-muted);
  text-decoration:line-through;
}
.grammar-rw-wrong .grammar-rw-mark{
  color:var(--red);
}
.grammar-rw-right .grammar-rw-mark{
  color:var(--green);
}

/* ---------- страница урока: основной блок + боковые окошки практики ----------
   Грид на 2 колонки (текст / боковая колонка 280px) с ЯВНЫМИ строками —
   каждое окошко явно указывает, в какой колонке и строке оно стоит,
   вместо одной большой колонки-флекса высотой во всю страницу (как было
   раньше). Строка 1: [Урок/Введение/Текст урока] | [Практика]. Строка 2:
   [Словарь] | [доп. лексика — LESSON_GRAMMAR_LEXICON] — по просьбе
   пользователя окошки доп. лексики должны быть строго справа от раздела
   "Словарь" во всех уроках, а не съезжать вниз в зависимости от того,
   насколько длинными получились окошки выше. Грамматика — внутри ТОГО ЖЕ
   контейнера строки 2, что и Словарь (.lesson-page-row2-main — теперь
   флекс-столбик, а не отдельная строка грида), сразу под ним, той же
   ширины — так расстояние между Словарём и Грамматикой не зависит от
   высоты окошка доп. лексики справа (если бы Грамматика была в отдельной
   строке грида, высота этой строки равнялась бы высоте более высокого
   из двух окошек ряда выше, и под Словарём мог образоваться большой
   пустой отступ). Высота каждой строки — по высоте её собственного
   содержимого (обычный auto-грид). */
.lesson-page-layout{
  display:grid;
  grid-template-columns:minmax(480px, 1fr) 280px;
  gap:24px;
  align-items:start;
}
.lesson-page-row1-main{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.lesson-page-row1-side{
  grid-column:2;
  grid-row:1;
}
.lesson-page-row2-main{
  grid-column:1;
  grid-row:2;
  /* Словарь и Грамматика — в одном флекс-столбике (а не в двух отдельных
   * строках грида, как раньше), чтобы Грамматика всегда стояла вплотную
   * под Словарём, независимо от высоты окошка доп. лексики (.lesson-page-
   * row2-side) справа: раньше высота ОБЩЕЙ строки грида равнялась высоте
   * более высокого из двух окошек, и если доп. лексика оказывалась выше
   * Словаря, под Словарём образовывался большой пустой отступ перед
   * Грамматикой в следующей строке. */
  display:flex;
  flex-direction:column;
  gap:20px;
}
.lesson-page-row2-side{
  grid-column:2;
  grid-row:2;
}
.lesson-side-group{
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media (max-width:760px){
  .lesson-page-layout{ display:block; }
  .lesson-page-row1-main{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .lesson-page-row1-side{
    margin-top:24px;
  }
  .lesson-page-row2-main{
    margin-top:12px;
  }
  .lesson-page-row2-side{
    margin-top:24px;
  }
  /* На узких экранах 130px под иконку в углу отнимают слишком много места
   * у текста — уменьшаем саму иконку и соразмерно уменьшаем отступ под
   * описанием урока, чтобы текст не превращался в узкую "лесенку". */
  .lesson-main-card-corner-icon{
    width:88px;
    height:64px;
  }
  .lesson-main-card-title,
  .lesson-main-card-desc{
    padding-right:100px;
  }
}
.lesson-practice-card .results-row{
  margin-bottom:12px;
}
/* Окошки заданий урока (практика: лексика/грамматика) — по просьбе
 * пользователя объединены в одно большое белое окошко (в одном стиле с
 * .lesson-main-card), а каждое отдельное задание внутри него остаётся
 * своим отдельным окошком (светло-серая подложка), просто без
 * собственной внешней тени — кнопка "Пройти тест" остаётся синей. */
.lesson-practice-card{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.lesson-practice-item{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.lesson-practice-item .lesson-page-card-header{
  background:none;
  color:var(--accent);
  padding:14px 16px 2px;
}
.lesson-practice-item .lesson-page-card-body{
  padding:12px 16px 16px;
}
/* Окошки доп. лексики (LESSON_GRAMMAR_LEXICON) в боковой колонке — по
 * просьбе пользователя перекрашены в белый цвет, как окошки практики
 * (.lesson-practice-card), вместо исходного светло-голубого фона со
 * сплошной синей плашкой-заголовком, который используют другие окошки
 * страницы урока (Словарь, Грамматика и т.п.). */
.lesson-grammar-lexicon-group .lesson-page-card{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.lesson-grammar-lexicon-group .lesson-page-card-header{
  background:none;
  color:var(--accent);
  padding:14px 16px 2px;
}
.lesson-grammar-lexicon-group .lesson-page-card-body{
  padding:12px 16px 16px;
}

/* ---------- страница урока: новый дизайн левой колонки — первое окошко
 * (пока пустое, без плашки-заголовка в старом стиле; сюда позже добавим
 * название урока и т.п.). Левым боком растянуто до синей панели тем же
 * приёмом "притяжки", что и .lesson-page-topbar/.learn-header/.lesson-list
 * (см. пояснение у .lesson-list) — то же значение 42px, т.к. здесь та же
 * вложенность (.main-inner 40px + .content 16px = 56px, минус те же ~14px
 * зазора). Правый край НЕ трогаем (ширина/margin-left только слева) —
 * он остаётся на месте, рядом с окошками практики в правой колонке. */
.lesson-main-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:20px;
  min-height:140px;
  --lesson-main-card-pull: calc(42px + max(0px, (100vw - 1210px) / 2));
  width:calc(100% + var(--lesson-main-card-pull));
  margin-left:calc(-1 * var(--lesson-main-card-pull));
}
/* Декоративная иконка в правом верхнем углу первого окошка (Урок N /
 * название / описание / цели) — абсолютно позиционирована относительно
 * .lesson-main-card, не влияет на поток остального содержимого. */
.lesson-main-card-corner-icon{
  position:absolute;
  top:16px;
  right:16px;
  /* Фиксированная "рамка" под иконку (а не просто width) — иначе у более
   * "вытянутых по вертикали" картинок (например, лексика/семья) итоговая
   * высота при том же width оказывается больше, и низ иконки залезает на
   * голубое окошко с целями урока ниже (плавающая .lesson-main-card-goals
   * начинается на одной и той же высоте во всех уроках). Ограничение и по
   * ширине, и по высоте гарантирует, что иконка любой картинки урока
   * остаётся в этой рамке и не заходит на другие элементы. */
  width:130px;
  height:96px;
  pointer-events:none;
}
.lesson-main-card-corner-icon img{ width:100%; height:100%; display:block; object-fit:contain; object-position:top right; }
/* Шрифты этого окошка — по спецификации пользователя, значения ниже
 * заданы построчно (Inter — единственный шрифт, используемый именно
 * здесь; остальной сайт на системном стеке шрифтов, см. body выше).
 * УРОК N: Inter 600–700 12px | Название урока: Inter 700 32px |
 * Подзаголовок: Inter 400 13px | "К концу урока...": Inter 700 14px |
 * Цифры 1,2,3...: Inter 600–700 11px | Текст пунктов: Inter 400 12px. */
.lesson-main-card-label{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.lesson-main-card-title{
  margin-top:6px;
  /* Как и у описания ниже — место под декоративную иконку в углу, иначе у
   * более длинных названий урока текст заходит прямо под картинку. */
  padding-right:150px;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:32px;
  font-weight:700;
  color:var(--accent);
}
.lesson-main-card-desc{
  margin-top:10px;
  /* Место под декоративную иконку в углу (.lesson-main-card-corner-icon,
   * 130px + отступ) — без этого у более длинных описаний вторая строка
   * заходит прямо под картинку и текст там становится нечитаемым. */
  padding-right:150px;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:13px;
  font-weight:400;
  line-height:1.5;
  color:var(--text);
  opacity:.6;
}
/* Голубое окошко с целями урока — ширина 100% и вложенность в
 * .lesson-main-card (у которого padding:20px) держат его строго внутри
 * границ белого окошка, никакого "растягивания" наружу здесь нет. */
.lesson-main-card-goals{
  margin-top:16px;
  width:100%;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  border-radius:12px;
  padding:16px 18px;
}
.lesson-main-card-goals-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--blue);
  margin-bottom:8px;
}
.lesson-main-card-goals-icon{
  width:18px;
  height:18px;
  flex-shrink:0;
  display:flex;
}
.lesson-main-card-goals-icon img{ width:100%; height:100%; display:block; object-fit:contain; }
.lesson-main-card-goals-list{
  margin:0;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lesson-main-card-goals-list li{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:1.5;
  color:var(--text);
}
.lesson-main-card-goals-list li::marker{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:11px;
}
.lesson-main-card-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--accent);
}
.lesson-main-card-section-icon{
  width:56px;
  height:56px;
  flex-shrink:0;
  display:flex;
  margin-left:-12px;
}
.lesson-main-card-section-icon img{ width:100%; height:100%; display:block; object-fit:contain; }
.lesson-main-card-intro-text{
  margin:10px 0 0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  color:var(--text);
}
.lesson-main-card-intro-text + .lesson-main-card-intro-text{
  margin-top:10px;
}
.lesson-main-card-dialogue{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.lesson-main-card-dialogue-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.lesson-main-card-dialogue-avatar{
  width:24px;
  height:24px;
  flex-shrink:0;
  border-radius:50%;
  overflow:hidden;
  display:flex;
}
.lesson-main-card-dialogue-avatar img{ width:100%; height:100%; display:block; object-fit:cover; }
.lesson-main-card-dialogue p{
  margin:0;
  padding-top:4px;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  color:var(--text);
}
.lesson-main-card-dialogue-speaker{
  font-weight:600;
  font-size:16px;
}
.lesson-main-card-dialogue .clickable-word{
  border-bottom:none;
}
.grammar-topic .clickable-word{
  border-bottom:none;
}

/* ---------- card list rows ---------- */
.card-row{
  background:var(--surface);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.card-row .word{font-weight:600;font-size:15px;}
.card-row .translation{color:var(--text-muted);font-size:13px;}
.card-row .row-actions{display:flex;gap:6px;}
.row-actions button{
  border:none;background:transparent;font-size:16px;color:var(--text-muted);padding:4px;
}

/* ---------- flashcard study ---------- */
.study-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.study-progress{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text-muted);
}
.study-progress .progress-bar{flex:1;}
.flashcard-zone{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
  min-height:280px;
}
.flashcard{
  width:100%;
  max-width:360px;
  height:260px;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.4,.2,.2,1);
}
.flashcard.flipped{transform:rotateY(180deg);}
.flashcard-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  background:var(--surface);
  border-radius:22px;
  box-shadow:0 4px 18px rgba(0,0,0,.09);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  gap:10px;
}
.flashcard-face .label{
  position:absolute;
  top:16px;
  left:18px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-muted);
  font-weight:700;
}
.flashcard-face .main-text{font-size:28px;font-weight:700;}
.flashcard-face .example{font-size:14px;color:var(--text-muted);font-style:italic;margin-top:4px;}
.flashcard-back{transform:rotateY(180deg);}
.flip-hint{
  text-align:center;
  color:var(--text-muted);
  font-size:13px;
}
.study-controls{
  display:flex;
  gap:12px;
}
.study-controls .btn{flex:1;padding:16px;}
.btn-know{background:#e7f8ee;color:var(--green);}
.btn-dont{background:#fdeceb;color:var(--red);}

.session-summary{
  background:var(--surface);
  border-radius:var(--radius);
  padding:24px;
  text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.session-summary .big-emoji{font-size:44px;}
.session-summary .score{font-size:32px;font-weight:800;}

/* ---------- tests ---------- */
.test-question{
  background:var(--surface);
  border-radius:var(--radius);
  padding:26px 20px;
  text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.test-question .hint{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.test-question-ru{font-size:16px;color:var(--text-muted);margin-top:10px;}
.test-question .prompt{font-size:26px;font-weight:700;margin-top:8px;}
.test-question-note{font-size:13px;color:var(--text-muted);margin-top:10px;}
.test-picture-wrap{max-width:320px;margin:10px auto 0;}
.test-picture{display:block;width:100%;margin:0;border-radius:14px;}
.test-picture-caption{text-align:center;font-size:12px;color:var(--text-muted);opacity:0.55;margin-top:6px;}
.options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.option-btn{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
  font-size:16px;
  text-align:left;
  color:var(--text);
}
.option-btn:active{background:#f0f0f8;}
.option-btn.correct{background:#e7f8ee;border-color:var(--green);color:var(--green);}
.option-btn.incorrect{background:#fdeceb;border-color:var(--red);color:var(--red);}
.option-btn[disabled]{opacity:.7;}

/* ---------- тест "собери предложение из слов" ---------- */
.word-order-built{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  /* высота с запасом под уже вставленную плитку слова (40px) + отступы —
     чтобы при появлении первой плитки строка не "подрастала" и не сдвигала
     вниз весь интерфейс под ней */
  min-height:66px;
  margin-top:14px;
  padding:12px 14px;
  background:var(--surface);
  border:1.5px dashed var(--border);
  border-radius:14px;
}
.word-order-built.correct{border-style:solid;border-color:var(--green);background:#e7f8ee;}
.word-order-built.incorrect{border-style:solid;border-color:var(--red);background:#fdeceb;}
.word-order-placeholder{color:var(--text-muted);font-size:14px;}
.word-order-sentence{font-size:17px;font-weight:600;color:var(--green);}
.word-order-correct-answer{
  font-size:14px;
  color:var(--text-muted);
  text-align:center;
  margin-top:8px;
}
.word-order-pool{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.word-tile{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  font-size:16px;
  color:var(--text);
}
.word-tile:active{background:#f0f0f8;}
.word-tile.placed{
  background:#eef0ff;
  border-color:var(--primary);
  color:var(--primary-dark);
}
.word-tile[disabled]{opacity:.7;}
.word-tile-taken{
  background:transparent;
  border-style:dashed;
  border-color:var(--border);
  color:transparent;
  user-select:none;
}

.type-input{
  width:100%;
  padding:16px;
  font-size:18px;
  border-radius:14px;
  border:1.5px solid var(--border);
  background:var(--surface);
  outline:none;
}
.type-input:focus{border-color:var(--primary);}
.type-input.correct{border-color:var(--green);background:#e7f8ee;}
.type-input.incorrect{border-color:var(--red);background:#fdeceb;}
.feedback-text{font-size:14px;text-align:center;min-height:20px;}
.feedback-text.correct{color:var(--green);}
.feedback-text.incorrect{color:var(--red);}

.match-grid{
  display:flex;
  gap:10px;
}
.match-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.match-item{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:14px 10px;
  text-align:center;
  font-size:14px;
  font-weight:600;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.match-item.selected{border-color:var(--primary);background:#eef0fe;}
.match-item.matched{border-color:var(--green);background:#e7f8ee;color:var(--green);opacity:.6;}
.match-item.wrong{border-color:var(--red);background:#fdeceb;}

/* ---------- forms ---------- */
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field label{font-size:13px;font-weight:600;color:var(--text-muted);}
.field input,.field textarea{
  padding:13px 14px;
  border-radius:12px;
  border:1.5px solid var(--border);
  background:var(--surface);
  font-size:16px;
  outline:none;
}
.field input:focus,.field textarea:focus{border-color:var(--primary);}
.field textarea{resize:vertical;min-height:60px;}

/* ---------- misc ---------- */
.section-title{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-muted);
  margin:6px 0 -2px;
}
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}
.badge-new{background:#eef0fe;color:var(--primary);}
.badge-learned{background:#e7f8ee;color:var(--green);}
.badge-tag{background:var(--bg);color:var(--text-muted);font-weight:600;}

/* ---------- баннер "Слова на повторении" на экране "Лексика" ---------- */
.mistakes-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  background:#fef3e2;
  border-radius:var(--radius);
  padding:14px 18px;
  margin-bottom:16px;
}
.mistakes-banner-text{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--text);
}
.mistakes-banner-icon{width:24px; height:24px; flex-shrink:0; display:flex;}
.mistakes-banner-icon img{width:100%; height:100%; display:block; object-fit:contain;}
.mistakes-banner-count{font-weight:700;}
.mistakes-banner .btn{padding:10px 18px;font-size:14px;flex-shrink:0;}
.toast{
  position:fixed;
  bottom:calc(20px + var(--safe-bottom));
  left:50%;
  transform:translateX(-50%);
  background:#1a1b25;
  color:#fff;
  padding:12px 20px;
  border-radius:12px;
  font-size:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  z-index:100;
  animation:toast-in .2s ease;
}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:flex-end;
  z-index:200;
}
.modal-sheet{
  background:var(--surface);
  width:100%;
  border-radius:22px 22px 0 0;
  padding:20px 20px calc(20px + var(--safe-bottom));
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:85vh;
  overflow-y:auto;
}
.modal-sheet h3{margin:0;font-size:18px;}

/* ---------- "Исследования и статьи" ---------- */
.articles-intro{
  margin:0;
  color:var(--text-muted);
  line-height:1.5;
}
.articles-toolbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:stretch;
}
.articles-search{
  position:relative;
  flex:1;
  min-width:220px;
  display:flex;
  align-items:center;
}
.articles-search svg{
  position:absolute;
  left:14px;
  color:var(--text-muted);
  pointer-events:none;
}
.articles-search input{
  width:100%;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:12px;
  padding:12px 14px 12px 40px;
  font-size:15px;
  color:var(--text);
  box-sizing:border-box;
}
.articles-search input:focus{border-color:var(--primary);}
.articles-filter{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:12px;
  padding:0 14px;
  color:var(--text-muted);
}
.articles-filter select{
  border:none;
  background:transparent;
  padding:12px 4px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.articles-filter select:focus{outline:none;}

/* макет: список слева (фикс. ширина) + деталь статьи справа (гибкая),
   как и .lesson-page-layout — ниже 760px схлопывается в одну колонку, и
   тогда список/деталь показываются по очереди в зависимости от выбора
   (см. .has-selection) */
.articles-layout{
  display:grid;
  grid-template-columns:minmax(260px, 360px) 1fr;
  gap:20px;
  align-items:start;
}
.articles-list-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.articles-empty{
  color:var(--text-muted);
  padding:20px;
  text-align:center;
}
.articles-card{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  border:1.5px solid transparent;
  text-align:left;
  align-items:center;
}
.articles-card.active{
  background:#eef0ff;
  border-color:var(--primary);
}
.articles-card-thumb{
  width:60px;
  height:60px;
  border-radius:10px;
  background:var(--bg);
  border:1px dashed var(--border);
  flex-shrink:0;
}
.articles-card-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.articles-card-title{
  font-weight:700;
  font-size:14.5px;
  line-height:1.3;
}
.articles-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12.5px;
}
.articles-card-category{font-weight:600;}
.articles-card-time{
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--text-muted);
  white-space:nowrap;
}

.articles-detail{
  background:var(--surface);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.articles-detail-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:280px;
  color:var(--text-muted);
  text-align:center;
}
.articles-detail-empty-emoji{font-size:36px;}
.articles-detail-back{padding:0 0 14px;}
.articles-detail-head{
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:flex-start;
}
.articles-detail-title-wrap{flex:1; min-width:0;}
.articles-detail-title{
  font-size:22px;
  font-weight:800;
  margin:0 0 10px;
  line-height:1.25;
}
.articles-detail-meta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:14px;
  color:var(--text-muted);
}
.articles-detail-meta-item{
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:600;
}
.articles-detail-image{
  width:200px;
  height:200px;
  border-radius:14px;
  background:var(--bg);
  border:1px dashed var(--border);
  flex-shrink:0;
}
.articles-detail-section{margin-top:20px;}
.articles-detail-section h3{
  font-size:15px;
  font-weight:700;
  margin:0 0 8px;
}
.articles-detail-section p{
  margin:0;
  line-height:1.6;
}
.articles-detail-list{
  margin:0;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  line-height:1.5;
}
.articles-detail-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}
.articles-detail-actions .btn{width:auto;}
.articles-save-btn.active{
  background:#eef0ff;
  color:var(--primary);
}

@media (max-width:760px){
  .articles-layout{display:block;}
  .articles-layout:not(.has-selection) .articles-detail-col{display:none;}
  .articles-layout.has-selection .articles-list-col{display:none;}
  .articles-detail-head{flex-direction:column-reverse;}
  .articles-detail-image{width:100%; height:180px;}
}