/* ══════════════════════════════════════════════════════════════
   МЕТАНОЙЯ · main.css · Этап 1 (фундамент)
   Палитра и типографика — раздел 4 контекстного файла
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Палитра бренда */
  --navy:       #1A3A52;
  --terracotta: #C97064;
  --gold:       #D4A574;
  /* Приглушённый синий из её брендбука: глубина, надёжность, структура.
     Им помечено то, что просит подумать, а не порадоваться. */
  --blue:       #4A6FA5;
  --cream:      #FAF8F5;
  --gray:       #3C4658;
  --success:    #7BC67A;
  --error:      #D46A6A;
  --info:       #7AAED4;
  --warning:    #D4974A;

  /* Типографика */
  --font-head: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* Геометрия (раздел 4.7) */
  --radius-card: 12px;
  --radius-modal: 16px;
  --radius-nav: 24px;
  --pad: 16px;
  --header-h: 56px;
  --nav-h: 64px;
  --max-w: 480px;

  /* Анимации (раздел 4.8) */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Видимый фокус только для клавиатуры (не мешает касанию/мыши) — доступность на планшетах/ПК */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
[data-theme="dark"] :focus-visible { outline-color: #E6C79A; }
/* поля ввода уже подсвечивают рамку — не дублируем внешний контур */
.field input:focus-visible, .field select:focus-visible,
.sheet__input input:focus-visible, .cv-input input:focus-visible,
.cv-search input:focus-visible, .ask-input input:focus-visible,
.addk__input:focus-visible { outline: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--navy);
  min-height: 100vh;
  /* На широких экранах — рамка приложения по центру */
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 520px) {
  body {
    background: linear-gradient(135deg, #1A3A52 0%, #2c4f6b 55%, #D4A574 130%);
  }
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: scale(0.97); transition: transform 100ms; }

/* ══════════ SPLASH ══════════ */
.splash {
  position: fixed; inset: 0; z-index: 100;
  background: var(--cream);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px;
  transition: opacity 400ms var(--ease);
}
.splash--hide { opacity: 0; pointer-events: none; }
.splash__wings { animation: wings 2.2s var(--ease) infinite; transform-origin: 60px 40px; }
@keyframes wings {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(-4px); opacity: .75; }
}
.splash__title {
  font-family: var(--font-head);
  font-weight: 900; font-size: 28px; letter-spacing: 4px;
}
.splash__subtitle { font-size: 13px; color: var(--gray); max-width: 260px; }

.spinner {
  width: 28px; height: 28px; margin-top: 16px;
  border: 3px solid rgba(212, 165, 116, .3);
  border-top-color: var(--terracotta);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════ ШАПКА ══════════ */
.header {
  position: fixed; top: 0; z-index: 20;
  width: 100%; max-width: var(--max-w);
  height: var(--header-h);
  background: rgba(250, 248, 245, .92);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  border-bottom: 1px solid rgba(212, 165, 116, .25);
}
.header__left { display: flex; align-items: center; gap: 8px; }
.header__name {
  font-family: var(--font-head);
  font-weight: 700; font-size: 16px; letter-spacing: 2.5px;
}
.header__right { display: flex; align-items: center; gap: 12px; }
.header__bell { position: relative; color: var(--navy); display: flex; }
.header__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--terracotta); color: var(--cream);
  font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

.badge {
  background: #E23B3B; color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.badge--bell { position: absolute; top: -4px; right: -6px; }
.badge--nav  { position: absolute; top: 6px; right: calc(50% - 22px); }

/* ══════════ ЭКРАНЫ ══════════ */
.screens {
  width: 100%; max-width: var(--max-w);
  min-height: 100vh;
  background: var(--cream);
  padding: calc(var(--header-h) + 12px) var(--pad) calc(var(--nav-h) + 24px);
}
.screen { display: none; animation: screenIn 220ms var(--ease); }
.screen--active { display: block; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.screen-title {
  font-family: var(--font-head);
  font-size: 22px; font-weight: 700;
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-head);
  font-size: 17px; font-weight: 600;
  margin: 24px 0 12px;
}

/* ══════════ КАРТОЧКИ ══════════ */
.card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(26, 58, 82, .06);
}
.card--gold {
  background: linear-gradient(160deg, #FFFDF9, #FAF3E8);
  border: 1px solid var(--gold);
  border-radius: var(--radius-modal);
}

/* ══════════ STORIES ══════════ */
.stories {
  display: flex; gap: 12px;
  overflow-x: auto; padding: 4px 16px 12px 0;
  scrollbar-width: none;
}
.stories::-webkit-scrollbar { display: none; }
.story { flex: 0 0 auto; width: 68px; text-align: center; }
.story__ring {
  width: 64px; height: 64px; border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 210deg, #C97064, #E6A15C, #E6C079, #7AAED4, #C97064);
  margin: 0 auto;
}
.story__ring--seen { background: rgba(90, 101, 119, .3); }
.story__avatar {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.story__name {
  font-size: 10px; color: var(--gray);
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.story__badge { font-size: 9px; color: var(--terracotta); font-weight: 600; }

/* ══════════ ВИДЖЕТ «СЕГОДНЯ» ══════════ */
.today__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.today__eyebrow { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--navy); }
.today__streak { font-size: 13px; font-weight: 600; color: var(--navy); }
.today__streak b { font-weight: 800; }
.today__pills { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tpill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; }
.tpill--xp { background: rgba(201,112,100,.14); color: var(--terracotta); }
.tpill--rank { background: rgba(123,198,122,.16); color: #4f8f4e; }
.today__call { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, rgba(26,58,82,.06), rgba(122,174,212,.12));
  border: 1px solid rgba(26,58,82,.1); transition: transform .12s var(--ease); }
.today__call:active { transform: scale(.99); }
.today__call-ic { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--terracotta), #a8564b); color: #fff; }
.today__call-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.today__call-label { font-size: 11.5px; color: var(--gray); }
.today__call-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.today__call-go { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--terracotta);
  padding: 6px 12px; border-radius: 999px; background: rgba(201,112,100,.12); }
.today__verse { width: 100%; animation: pulse-gold 2s var(--ease) infinite; }
/* Карточка «Стих дня» с мини-превью картинки (полный размер — по нажатию) */
.today__verse-card {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px; border-radius: 16px;
  background: linear-gradient(135deg, var(--terracotta), #b85f54);
  box-shadow: 0 6px 18px rgba(201,112,100,.32);
  animation: pulse-gold 2.4s var(--ease) infinite;
}
.today__verse-card:active { transform: translateY(1px); }
.today__verse-thumb {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 12px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.7); box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.today__verse-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.today__verse-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.today__verse-eyebrow { display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.85); }
.today__verse-eyebrow [data-icon] { color: #ffe6b0; }
.today__verse-teaser { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today__verse-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,.9); }
.today__verse-cta [data-icon] { color: #fff; }
.today__verse-go { flex: 0 0 auto; color: #fff; font-size: 22px; font-weight: 700; opacity: .85; padding-right: 4px; }
[data-theme="dark"] .today__eyebrow, [data-theme="dark"] .today__streak,
[data-theme="dark"] .today__call-title { color: #E7EDF3; }
[data-theme="dark"] .today__call { background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(122,174,212,.1)); border-color: rgba(255,255,255,.1); }
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 165, 116, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 165, 116, 0); }
}

/* ══════════ КНОПКИ ══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-card);
  font-size: 14px; font-weight: 600;
  transition: opacity 150ms;
}
.btn--primary { background: var(--terracotta); color: var(--cream); box-shadow: 0 4px 14px rgba(201,112,100,.28); }
/* Все кнопки полностью окрашены (терракота), без пустой рамки */
.btn--outline { background: var(--terracotta); color: #fff; width: 100%; box-shadow: 0 4px 14px rgba(201,112,100,.28); }
.btn--outline:active { transform: translateY(1px); }
.btn--outline-gold { background: linear-gradient(135deg, #D4A574, var(--terracotta)); color: #fff; box-shadow: 0 4px 14px rgba(201,112,100,.28); }

/* ══════════ ЛЕНТА ══════════ */
.feed-card__type { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin-bottom: 8px; }
.feed-card__title { font-family: var(--font-head); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.feed-card__text { font-size: 14px; line-height: 1.55; color: var(--navy); }
.feed-card__meta { font-size: 12px; color: var(--gray); margin-top: 6px; }
.feed-card__cover {
  height: 150px; border-radius: 8px; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--navy), #2c5570);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.feed-card__actions {
  display: flex; gap: 20px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid rgba(90, 101, 119, .12);
  font-size: 13px; color: var(--gray);
}
.feed-card__actions button { color: var(--gray); font-size: 13px; display: flex; gap: 5px; }
.feed-card--quote {
  background: linear-gradient(150deg,#FFF6E9,#FBEBD6);
  border: 2px solid var(--gold);
  box-shadow: 0 10px 26px rgba(201,112,100,.18);
  position: relative; overflow: hidden;
}
.feed-card--quote::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(var(--gold), var(--terracotta));
}
.feed-card__quote-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--terracotta); color: #fff; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.feed-card__quote-badge [data-icon] { color: #fff; }
.feed-card__quote-img {
  border-radius: 14px; overflow: hidden; margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(26,58,82,.15); aspect-ratio: 16/8;
}
.feed-card__quote-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-card--quote .feed-card__label { color: var(--terracotta); }
.feed-card--quote .feed-card__title {
  font-style: italic; font-size: 18px; line-height: 1.6; font-weight: 600; color: var(--navy);
}
.quote-ref { color: var(--terracotta); font-weight: 700; font-size: 13px; margin-top: 8px; }
[data-theme="dark"] .feed-card--quote {
  background: linear-gradient(150deg,#2a2118,#241c14);
  border-color: var(--gold);
}
[data-theme="dark"] .feed-card--quote .feed-card__title { color: #f4ead6; }
.progress {
  height: 6px; background: rgba(90, 101, 119, .15);
  border-radius: 3px; overflow: hidden; margin: 10px 0 4px;
}
.progress__fill { height: 100%; background: var(--terracotta); border-radius: 3px; }

/* ══════════ ПОИСК ══════════ */
.search-bar {
  position: sticky; top: calc(var(--header-h) + 4px); z-index: 10;
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid rgba(90, 101, 119, .2);
  border-radius: var(--radius-card);
  padding: 12px 14px; margin-bottom: 14px;
  color: var(--gray);
}
.search-bar input {
  flex: 1; border: none; outline: none;
  font-family: inherit; font-size: 14px;
  background: transparent; color: var(--navy);
}
.tabs-row { display: flex; gap: 8px; margin-bottom: 12px; }
.tab-chip {
  padding: 8px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 500;
  color: var(--gray); background: rgba(90, 101, 119, .08);
}
.tab-chip--active { background: var(--terracotta); color: var(--cream); }
.filter-row {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto;
  padding: 7px 14px; border-radius: 18px;
  font-size: 13px;
  border: 1.5px solid rgba(26, 58, 82, .35); color: var(--navy);
}
.filter-chip--active { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }

.empty-state { text-align: center; padding: 48px 24px; color: var(--gray); font-size: 14px; }
.empty-state__icon { font-size: 40px; margin-bottom: 12px; }

/* ══════════ ЧАТЫ ══════════ */
.chat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px;
  border-radius: var(--radius-card);
  width: 100%; text-align: left;
}
.chat-item--pinned { background: rgba(201, 112, 100, .06); }
.chat-item__avatar {
  flex: 0 0 48px; width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--terracotta));
  color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.chat-item__body { flex: 1; min-width: 0; }
.chat-item__name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.chat-item__peda { font-size: 10px; color: var(--terracotta); font-weight: 600; }
.chat-item__last {
  font-size: 13px; color: var(--gray);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.chat-item__side { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chat-item__time { font-size: 11px; color: var(--gray); }
.chat-item__unread {
  background: var(--info); color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 6px;
}

/* ══════════ УРОКИ ══════════ */
.block-title {
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700;
  margin: 20px 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.block-title small { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--gray); }
.lesson-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 14px; margin-bottom: 10px;
  width: 100%; text-align: left;
  box-shadow: 0 1px 4px rgba(26, 58, 82, .05);
}
.lesson-item--locked { opacity: .55; background: #F1EFEA; }
.lesson-item__num {
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(26, 58, 82, .08);
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.lesson-item--done .lesson-item__num { background: var(--success); color: #fff; }
.lesson-item--open .lesson-item__num { background: var(--terracotta); color: #fff; }
.lesson-item__body { flex: 1; }
.lesson-item__title { font-weight: 600; font-size: 14px; }
.lesson-item__meta { font-size: 12px; color: var(--gray); margin-top: 2px; }
.lesson-item__lock { font-size: 18px; }

/* ══════════ ПРОФИЛЬ ══════════ */
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.profile-head__avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--terracotta); color: var(--cream);
  font-size: 26px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.profile-head__name { font-family: var(--font-head); font-size: 20px; font-weight: 700; }
.profile-head__meta { font-size: 13px; color: var(--gray); margin-top: 2px; }

.child-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 14px; margin-bottom: 10px;
  width: 100%; text-align: left;
  box-shadow: 0 1px 4px rgba(26, 58, 82, .05);
}
.child-card__avatar { font-size: 32px; }
.child-card__name { font-weight: 600; font-size: 14px; }
.child-card__rank { font-size: 12px; color: var(--gray); margin-top: 2px; }
.child-card__xp { margin-left: auto; text-align: right; font-size: 12px; color: var(--terracotta); font-weight: 600; }

.menu-list { background: #fff; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 1px 4px rgba(26,58,82,.05); }
.menu-item {
  display: block; width: 100%; text-align: left;
  padding: 15px 16px; font-size: 14px;
  border-bottom: 1px solid rgba(90, 101, 119, .1);
}
.menu-item:last-child { border-bottom: none; }
.menu-item--muted { color: var(--gray); }

/* ══════════ НИЖНЯЯ НАВИГАЦИЯ ══════════ */
.nav {
  position: fixed; bottom: 0; z-index: 20;
  width: 100%; max-width: var(--max-w);
  height: var(--nav-h);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-nav) var(--radius-nav) 0 0;
  box-shadow: 0 -2px 12px rgba(26, 58, 82, .08);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav__tab {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  font-size: 10px; font-weight: 500;
  color: rgba(26, 58, 82, .6);
  position: relative;
  transition: color 220ms var(--ease);
}
.nav__tab--active { color: var(--terracotta); }
.nav__tab--active svg { stroke-width: 2.2; }

/* ══════════ ТОСТ ══════════ */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: var(--cream);
  padding: 10px 18px; border-radius: 20px;
  font-size: 13px; z-index: 50;
  opacity: 0; pointer-events: none;
  transition: all 220ms var(--ease);
  max-width: 90%; text-align: center;
}
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ══════════ SVG-ИКОНКИ (без эмодзи) ══════════ */
.ic { vertical-align: -4px; flex: 0 0 auto; }
.ic-terra { color: var(--terracotta); }
.ic-gold { color: var(--gold); }

.story__avatar { color: var(--navy); }
.story__badge { display: flex; align-items: center; justify-content: center; gap: 3px; }
.story__badge .ic { vertical-align: -1px; }

.today__streak, .today__call-timer { display: inline-flex; align-items: center; gap: 5px; }

.feed-card__cover--img { position: relative; padding: 0; background: none; overflow: hidden; }
.feed-card__cover--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-card__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--cream);
  background: rgba(26, 58, 82, .45);
  border-radius: 50%; padding: 10px;
  backdrop-filter: blur(2px);
}
.feed-card__actions button { align-items: center; }

.chat-item__avatar { color: var(--cream); }

.lesson-item__lock { color: var(--gray); display: flex; }

.child-card__avatar { width: 46px; height: 46px; }
.child-card__avatar img {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 2px solid rgba(212, 165, 116, .5);
}
.child-card__xp { display: inline-flex; align-items: center; gap: 4px; color: var(--terracotta); }

.menu-item { display: flex; align-items: center; gap: 12px; }
.menu-item .ic { color: var(--navy); opacity: .75; }
.menu-item--muted .ic { color: var(--gray); }

.btn .ic { margin-right: 2px; }
.empty-state__icon { color: rgba(90, 101, 119, .5); }

/* ══════════ ОНБОРДИНГ ══════════ */
.onb {
  position: fixed; inset: 0; z-index: 90;
  background: var(--cream);
  display: flex; flex-direction: column;
}
.onb[hidden], .auth[hidden] { display: none; }
.onb__skip {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  font-size: 13px; color: var(--gray); font-weight: 500;
}
.onb__track {
  flex: 1; display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.onb__track::-webkit-scrollbar { display: none; }
.onb__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 32px;
  gap: 16px;
}
.onb__slide h2 {
  font-family: var(--font-head); font-size: 26px; font-weight: 700;
  max-width: 300px;
}
.onb__slide p { color: var(--gray); font-size: 15px; line-height: 1.6; max-width: 300px; }
.onb__icon {
  width: 110px; height: 110px; border-radius: 50%;
  background: linear-gradient(160deg, rgba(212,165,116,.18), rgba(201,112,100,.12));
  border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
}
.onb__start { margin-top: 10px; padding: 14px 44px; }
.onb__dots { display: flex; justify-content: center; gap: 8px; padding: 26px 0 40px; }
.onb__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(26, 58, 82, .18);
  transition: all 220ms var(--ease);
}
.onb__dot--on { background: var(--terracotta); width: 22px; border-radius: 4px; }

/* ══════════ ВХОД / РЕГИСТРАЦИЯ ══════════ */
.auth {
  position: fixed; inset: 0; z-index: 85;
  background: var(--cream);
  overflow-y: auto;
  display: flex; justify-content: center;
}
.auth__box { width: 100%; max-width: 400px; padding: 44px 24px 40px; }
.auth__logo { text-align: center; margin-bottom: 22px; }
.auth__title {
  font-family: var(--font-head); font-weight: 900;
  font-size: 22px; letter-spacing: 4px; margin-top: 6px;
}
.auth__tabs {
  display: flex; background: rgba(26, 58, 82, .07);
  border-radius: var(--radius-card); padding: 4px; margin-bottom: 20px;
}
.auth__tab {
  flex: 1; padding: 10px; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--gray);
  transition: all 200ms var(--ease);
}
.auth__tab--on { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(26,58,82,.1); }

.auth__form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.field span { font-size: 12px; font-weight: 600; color: var(--navy); }
.field span small { font-weight: 400; color: var(--gray); }
.field input, .field select {
  font-family: inherit; font-size: 14px; color: var(--navy);
  background: #fff;
  border: 1.5px solid rgba(26, 58, 82, .18);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 150ms;
  width: 100%;
  -webkit-appearance: none; appearance: none;
}
.field input:focus, .field select:focus { border-color: var(--terracotta); }
.field input.field--error { border-color: var(--error); }
.field-row { display: flex; gap: 12px; }
.field--narrow { flex: 0 0 96px; }

.auth__submit { width: 100%; padding: 14px; margin-top: 4px; }
.auth__forgot { font-size: 13px; color: var(--gray); align-self: center; }
.auth__divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--gray); font-size: 12px;
}
.auth__divider i { flex: 1; height: 1px; background: rgba(90, 101, 119, .2); }
.auth__divider em { font-style: normal; }
.auth__oauth { width: 100%; border-color: rgba(26, 58, 82, .25); color: var(--navy); }
.auth__child {
  border: 1.5px dashed var(--gold);
  border-radius: var(--radius-card);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.auth__child-title {
  font-size: 12px; font-weight: 700; color: var(--navy);
  display: flex; align-items: center; gap: 6px;
}
.auth__child-title .ic { color: var(--gold); }
.auth__guest {
  display: block; margin: 22px auto 0;
  font-size: 13px; color: var(--terracotta); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

.auth__form[hidden] { display: none; }


/* ══════════ РЕАЛЬНЫЙ БРЕНД ══════════ */
.splash__video {
  width: 210px; height: 210px;
  border-radius: 28px;
  object-fit: cover;
  background: var(--cream);
}
.header__logo { object-fit: contain; }
.story__avatar img {
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
}
.chat-item__avatar img {
  width: 48px; height: 48px;
  border-radius: 50%; object-fit: cover; display: block;
}

/* ══════════ ПРОСМОТР STORIES ══════════ */
.sv {
  position: fixed; inset: 0; z-index: 95;
  background: #10222f;
  display: flex; flex-direction: column;
}
.sv[hidden] { display: none; }
.sv__bars {
  display: flex; gap: 5px;
  padding: 10px 12px 6px;
}
.sv__bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(250,248,245,.3); overflow: hidden; }
.sv__bar i { display: block; height: 100%; width: 0; background: var(--cream); border-radius: 2px; }
.sv__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; color: var(--cream);
  position: relative; z-index: 2;
}
.sv__who { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.sv__who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.sv__who .ic { color: var(--gold); }
.sv__close { color: var(--cream); display: flex; padding: 6px; }
.sv__content {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px 14px 0 0; margin: 4px 6px 0;
}
.sv__content img { width: 100%; height: 100%; object-fit: cover; }
.sv-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 36px; gap: 14px;
}
.sv-text--overlay { background: linear-gradient(transparent 40%, rgba(16,34,47,.82)); justify-content: flex-end; padding-bottom: 60px; }
.sv-text__title {
  font-family: var(--font-head); font-weight: 700;
  font-size: 26px; color: var(--cream); line-height: 1.3;
  text-wrap: balance;
}
.sv-text__sub { font-size: 14px; color: rgba(250,248,245,.85); max-width: 300px; line-height: 1.6; }
.sv-text__ref { color: var(--gold); font-weight: 600; font-size: 13px; letter-spacing: .06em; }
.sv--cream .sv-text__title { color: var(--navy); }
.sv--cream .sv-text__sub { color: var(--gray); }
.sv__zone { position: absolute; top: 90px; bottom: 0; width: 38%; z-index: 1; }
.sv__zone--prev { left: 0; }
.sv__zone--next { right: 0; width: 62%; }
.sv__bg-cream { position: absolute; inset: 0; background: linear-gradient(160deg, #FBF4E7, #F2E4CC); }
.sv__bg-navy  { position: absolute; inset: 0; background: linear-gradient(160deg, #1A3A52, #2c5570); }

/* ══════════ ШТОРКА КОММЕНТАРИЕВ ══════════ */
.sheet-wrap { position: fixed; inset: 0; z-index: 80; }
.sheet-wrap[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(16, 34, 47, .45); }
.sheet {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%; max-width: var(--max-w);
  max-height: 72vh;
  background: var(--cream);
  border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  display: flex; flex-direction: column;
  animation: sheetUp 260ms var(--ease);
}
@keyframes sheetUp { from { transform: translate(-50%, 40%); } to { transform: translate(-50%, 0); } }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(90,101,119,.3); margin: 10px auto 4px; }
.sheet__title { font-family: var(--font-head); font-weight: 700; font-size: 16px; text-align: center; padding: 6px 0 10px; }
.sheet__title span { color: var(--gray); font-family: var(--font-body); font-weight: 400; font-size: 13px; }
.sheet__list { flex: 1; overflow-y: auto; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.cmt { display: flex; gap: 10px; }
.cmt__avatar {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.cmt__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cmt__name { font-size: 12px; font-weight: 700; }
.cmt__name .ic { color: var(--terracotta); vertical-align: -2px; }
.cmt__text { font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.cmt__time { font-size: 11px; color: var(--gray); margin-top: 3px; }
.sheet__input {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(90,101,119,.15);
}
.sheet__input input {
  flex: 1; font-family: inherit; font-size: 14px;
  border: 1.5px solid rgba(26,58,82,.18); border-radius: 20px;
  padding: 10px 16px; outline: none; background: #fff; color: var(--navy);
}
.sheet__input input:focus { border-color: var(--terracotta); }
.sheet__input button {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--terracotta); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
}

/* лайк-активное состояние */
.feed-card__actions button.liked { color: var(--terracotta); font-weight: 700; }
.feed-card__actions button.liked .ic { fill: var(--terracotta); stroke: var(--terracotta); }

/* ══════════ ПОИСК: РЕЗУЛЬТАТЫ ══════════ */
.sr {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: var(--radius-card);
  padding: 12px 14px; margin-bottom: 10px;
  width: 100%; text-align: left;
  box-shadow: 0 1px 4px rgba(26,58,82,.05);
}
.sr__icon {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,165,116,.15); color: var(--navy);
}
.sr__icon--game { background: rgba(201,112,100,.13); }
.sr__icon--material { background: rgba(122,174,212,.15); }
.sr__title { font-weight: 600; font-size: 14px; }
.sr__meta { font-size: 12px; color: var(--gray); margin-top: 2px; }
.sr__lock { margin-left: auto; color: var(--gray); }

/* ══════════ ДЕТСКИЙ ПРОФИЛЬ ══════════ */
.child-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--gray);
  margin-bottom: 14px;
}
.child-head { text-align: center; margin-bottom: 8px; }
.child-head__avatar {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--gold);
}
.child-head__name { font-family: var(--font-head); font-size: 22px; font-weight: 700; margin-top: 10px; }
.child-head__rank { font-size: 13px; color: var(--gray); margin: 2px 0 12px; }
.xpbar {
  height: 10px; border-radius: 5px; overflow: hidden;
  background: rgba(90,101,119,.15);
  max-width: 260px; margin: 0 auto;
}
.xpbar__fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--terracotta)); border-radius: 5px; width: 73%; }
.xpbar__label { font-size: 12px; color: var(--gray); margin-top: 6px; }
.child-streak { font-size: 14px; font-weight: 600; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; }

.badges { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.badges::-webkit-scrollbar { display: none; }
.badge-card {
  flex: 0 0 92px; text-align: center;
  background: #fff; border-radius: var(--radius-card);
  padding: 12px 8px; box-shadow: 0 1px 4px rgba(26,58,82,.05);
}
.badge-card__icon {
  width: 46px; height: 46px; margin: 0 auto 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(212,165,116,.25), rgba(201,112,100,.18));
  color: var(--navy);
}
.badge-card--locked { opacity: .45; }
.badge-card--locked .badge-card__icon { background: rgba(90,101,119,.12); color: var(--gray); }
.badge-card__name { font-size: 10.5px; font-weight: 600; line-height: 1.3; }

.temple { display: flex; gap: 14px; align-items: flex-start; }
.temple__icon {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 14px;
  background: linear-gradient(150deg, #E6A15C, #C97064); color: #fff;
  box-shadow: 0 4px 12px rgba(201,112,100,.28);
  display: flex; align-items: center; justify-content: center;
}
.temple__img {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(150deg, #F0E4CF, #E8D4BC);
  box-shadow: 0 4px 12px rgba(201,112,100,.2);
  display: flex; align-items: center; justify-content: center;
}
.temple__img img { width: 100%; height: 100%; object-fit: cover; }
.temple__body { flex: 1; }
.temple__stage { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.temple__note { font-size: 12px; color: var(--gray); margin-top: 6px; }

.blockp { margin-bottom: 14px; }
.blockp:last-child { margin-bottom: 0; }
.blockp span { font-size: 13px; font-weight: 600; }
.blockp em { font-style: normal; font-size: 12px; color: var(--gray); }
.blockp .progress { margin: 6px 0 3px; }

/* ══════════ PIN ══════════ */
.pinm {
  position: fixed; inset: 0; z-index: 96;
  background: rgba(16,34,47,.5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pinm[hidden] { display: none; }
.pinm__box {
  background: var(--cream); border-radius: var(--radius-modal);
  padding: 26px 24px; width: 100%; max-width: 320px; text-align: center;
}
.pinm__title { font-family: var(--font-head); font-size: 19px; font-weight: 700; }
.pinm__hint { font-size: 12px; color: var(--gray); margin: 6px 0 16px; }
.pinm__dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; }
.pinm__dots i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--navy); transition: background 120ms;
}
.pinm__dots i.on { background: var(--navy); }
.pinm__dots.shake { animation: pinshake 300ms; }
@keyframes pinshake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.pinm__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pinm__pad button {
  height: 52px; border-radius: 12px; background: #fff;
  font-size: 19px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(26,58,82,.08);
}
.pinm__cancel { margin-top: 16px; font-size: 13px; color: var(--gray); }


/* ══════════ ЭКРАН ПЕРЕПИСКИ ══════════ */
[data-screen="chatview"] { display: none; }
[data-screen="chatview"].screen--active {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--header-h) - 12px);
  padding-bottom: 8px;
}
.cv-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(212,165,116,.3);
}
.cv-head__back { display: flex; color: var(--navy); padding: 4px; }
.cv-head__avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--gold), var(--terracotta));
  color: var(--cream); display: flex; align-items: center; justify-content: center; }
.cv-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cv-head__name { font-weight: 700; font-size: 15px; }
.cv-head__status { font-size: 11.5px; color: var(--success); }
.cv-pinned {
  display: flex; align-items: center; gap: 8px;
  background: rgba(212,165,116,.12);
  border-left: 3px solid var(--gold);
  font-size: 12px; padding: 8px 12px; margin-top: 8px;
  border-radius: 0 8px 8px 0; color: var(--navy);
}
.cv-pinned[hidden] { display: none; }
.cv-pinned .ic { color: var(--gold); flex: 0 0 auto; }
.cv-msgs { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 4px 18px; overflow-y: auto; }
.msg { max-width: 78%; display: flex; flex-direction: column; }
.msg--mine { align-self: flex-end; align-items: flex-end; }
.msg--their { align-self: flex-start; align-items: flex-start; }
.msg__bubble {
  padding: 10px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.5;
}
.msg--their .msg__bubble { background: #fff; color: var(--navy); border-bottom-left-radius: 6px; box-shadow: 0 2px 6px rgba(26,58,82,.08); }
.msg--mine .msg__bubble { background: linear-gradient(160deg, #d0796d, var(--terracotta)); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 3px 8px rgba(201,112,100,.28); }
.msg__sticker { width: 120px; height: 120px; border-radius: 18px; object-fit: cover;
  box-shadow: 0 6px 16px rgba(26,58,82,.2); background: #fff; padding: 3px; animation: stickerIn 300ms var(--ease); }
@keyframes stickerIn { 0% { transform: scale(.4); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.msg__meta { font-size: 10.5px; color: var(--gray); margin: 3px 4px 8px; display: flex; gap: 4px; align-items: center; }
.msg__meta .ic { color: var(--terracotta); }
.msg__name { font-size: 11.5px; font-weight: 700; margin: 6px 4px 2px; }
.cv-stickers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: #fff; border-radius: var(--radius-card);
  padding: 12px; margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(26,58,82,.1);
}
.cv-stickers[hidden] { display: none; }
.cv-stickers button { padding: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 6px rgba(26,58,82,.12); transition: transform 120ms; }
.cv-stickers button:active { transform: scale(.92); }
.cv-stickers img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.cv-input { display: flex; gap: 6px; align-items: center; padding-top: 10px; margin-top: 2px;
  border-top: 1px solid rgba(26,58,82,.08); }
.cv-input__btn { color: var(--terracotta); display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: rgba(201,112,100,.1); transition: background 140ms; }
.cv-input__btn:active { background: rgba(201,112,100,.22); }
.cv-input input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14px;
  border: 1.5px solid rgba(26,58,82,.14); border-radius: 22px;
  padding: 11px 16px; outline: none; background: #fff; color: var(--navy);
}
.cv-input input:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(201,112,100,.12); }
.cv-input__send {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  background: var(--terracotta); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.cv-readonly {
  font-size: 12px; color: var(--gray); text-align: center;
  background: rgba(90,101,119,.08); border-radius: 10px; padding: 10px 14px;
}
.cv-readonly[hidden] { display: none; }

/* ══════════ УВЕДОМЛЕНИЯ ══════════ */
.notif {
  position: fixed; inset: 0; z-index: 70;
  background: var(--cream);
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--max-w); margin: 0 auto;
}
.notif[hidden] { display: none; }
.notif__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid rgba(212,165,116,.3);
}
.notif__head b { font-family: var(--font-head); font-size: 18px; flex: 1; }
.notif__head button { color: var(--navy); display: flex; }
#notifReadAll { font-size: 12px; color: var(--terracotta); font-weight: 600; }
.notif__list { flex: 1; overflow-y: auto; padding: 10px 16px 30px; }
.nf {
  display: flex; gap: 12px; padding: 12px;
  border-radius: var(--radius-card); margin-bottom: 8px;
  background: #fff; box-shadow: 0 1px 3px rgba(26,58,82,.05);
}
.nf--new { background: linear-gradient(160deg, #FFFDF9, #FAF3E8); border: 1px solid rgba(212,165,116,.4); }
.nf__icon {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(212,165,116,.16); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.nf__title { font-size: 13.5px; font-weight: 600; }
.nf__text { font-size: 12.5px; color: var(--gray); margin-top: 2px; }
.nf__time { font-size: 11px; color: var(--gray); margin-top: 4px; }

/* ══════════ PULL-TO-REFRESH ══════════ */
.ptr { height: 0; overflow: hidden; display: flex; justify-content: center; transition: height 200ms var(--ease); }
.ptr .spinner { margin: 8px 0; width: 22px; height: 22px; border-width: 2.5px; }
.ptr--show { height: 44px; }

.feed-end { text-align: center; font-size: 12.5px; color: var(--gray); padding: 8px 0 20px; }


/* ══════════ ДЕЙСТВИЯ С СООБЩЕНИЕМ ══════════ */
.ma { position: fixed; inset: 0; z-index: 85; }
.ma[hidden] { display: none; }
.ma__backdrop { position: absolute; inset: 0; background: rgba(16,34,47,.35); }
.ma__panel {
  position: absolute; left: 50%; bottom: 90px;
  transform: translateX(-50%);
  width: calc(100% - 40px); max-width: 400px;
  background: #fff; border-radius: var(--radius-modal);
  box-shadow: 0 10px 40px rgba(16,34,47,.3);
  padding: 12px; animation: sheetUp 220ms var(--ease);
}
.ma__reactions { display: flex; justify-content: space-around; margin-bottom: 10px; }
.ma__reactions button { width: 46px; height: 46px; padding: 5px; border-radius: 50%; transition: transform 120ms; }
.ma__reactions button:hover { transform: scale(1.15); }
.ma__reactions img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ma__row { display: flex; gap: 8px; border-top: 1px solid rgba(90,101,119,.12); padding-top: 10px; }
.ma__row button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--navy);
  padding: 9px; border-radius: 10px; background: rgba(26,58,82,.05);
}
.ma__row #maDelete { color: var(--error); background: rgba(212,106,106,.1); }
.ma__row button[hidden] { display: none; }

.msg__reacts { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.msg--mine .msg__reacts { justify-content: flex-end; }
.msg__react {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid rgba(212,165,116,.5);
  border-radius: 12px; padding: 2px 8px 2px 3px;
  font-size: 11px; font-weight: 700; color: var(--navy);
  box-shadow: 0 1px 3px rgba(26,58,82,.08);
}
.msg__react img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.msg__react--mine { background: rgba(212,165,116,.2); }

.cv-reply {
  display: flex; align-items: center; gap: 10px;
  background: rgba(212,165,116,.13); border-left: 3px solid var(--terracotta);
  border-radius: 0 10px 10px 0; padding: 8px 12px; margin-bottom: 8px;
  font-size: 12.5px;
}
.cv-reply b { color: var(--terracotta); }
.cv-reply button { margin-left: auto; color: var(--gray); display: flex; }
.msg__quote {
  border-left: 2.5px solid rgba(250,248,245,.6);
  padding: 2px 8px; margin-bottom: 5px;
  font-size: 12px; opacity: .85;
}
.msg--their .msg__quote { border-color: var(--gold); color: var(--gray); }

/* ══════════ ЭКРАН УРОКА ══════════ */
.lesson-cover { height: 180px; border-radius: var(--radius-modal); overflow: hidden; }
.lesson-steps { display: flex; gap: 10px; margin: 16px 0 6px; position: relative; counter-reset: lstep; }
.lesson-steps::before { content: ''; position: absolute; top: 15px; left: 22%; right: 22%; height: 2px;
  background: rgba(90,101,119,.2); z-index: 0; }
.lstep {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--gray); font-weight: 600; position: relative; z-index: 1;
  counter-increment: lstep;
}
.lstep i {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(90,101,119,.3); background: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.lstep i::after { content: counter(lstep); font-size: 13px; font-weight: 700; color: var(--gray); font-style: normal; }
.lstep.done { color: var(--success); }
.lstep.done i { border-color: var(--success); background: var(--success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E");
  background-size: 17px; background-position: center; background-repeat: no-repeat; }
.lstep.done i::after { content: ''; }
.video-stub {
  position: relative; min-height: 168px; border-radius: var(--radius-card); overflow: hidden;
  background-size: cover; background-position: center; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
  margin-bottom: 4px; box-shadow: 0 4px 14px rgba(26,58,82,.15);
}
.video-stub__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--terracotta); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.video-stub__cap { position: relative; padding: 14px 16px; color: #fff; }
.video-stub__cap b { font-size: 15px; }
.video-stub__cap span { display: block; font-size: 12px; opacity: .85; margin-top: 2px; line-height: 1.4; }
.lesson-text p { font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
.lesson-text p:last-of-type { margin-bottom: 0; }
.q { margin-bottom: 18px; }
.q__text { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.q__opt {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; padding: 10px 12px; margin-bottom: 6px;
  background: rgba(26,58,82,.04); border-radius: 10px;
  border: 1.5px solid transparent; cursor: pointer;
}
.q__opt input { accent-color: #C97064; width: 17px; height: 17px; }
.q__opt.right { border-color: var(--success); background: rgba(123,198,122,.12); }
.q__opt.wrong { border-color: var(--error); background: rgba(212,106,106,.1); }
.test-result {
  margin-top: 14px; padding: 12px; border-radius: 10px;
  text-align: center; font-weight: 700; font-size: 14px;
}
.test-result.pass { background: rgba(123,198,122,.15); color: #3d7a3c; }
.test-result.fail { background: rgba(212,106,106,.12); color: #a54848; }
.test-result[hidden] { display: none; }
.lesson-done { width: 100%; margin-top: 20px; padding: 15px; }
.lesson-done:disabled { opacity: .45; }

/* доп. блоки динамического урока */
.lesson-intro p { font-style: italic; color: var(--navy); }
.lesson-golden { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-top: 4px;
  background: linear-gradient(135deg, rgba(212,165,116,.16), rgba(201,112,100,.12));
  border-radius: 14px; font-weight: 700; font-size: 14px; color: var(--navy); line-height: 1.5; }
.lesson-golden .ic { color: var(--gold); flex: 0 0 auto; }
.lesson-questions .lq { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; padding: 8px 0;
  border-bottom: 1px solid rgba(26,58,82,.07); }
.lesson-questions .lq:last-child { border-bottom: none; }
.lesson-questions .lq__n { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--terracotta); color: #fff; font-weight: 700; font-size: 12px;
  display: grid; place-items: center; }
.lesson-prayer { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: rgba(122,174,212,.1); border-radius: 14px; }
.lesson-prayer .ic { color: var(--blue); flex: 0 0 auto; margin-top: 2px; }
.lesson-prayer p { font-size: 14px; line-height: 1.6; font-style: italic; color: var(--navy); margin: 0; }
[data-theme="dark"] .lesson-golden { color: #E7EDF3; }
[data-theme="dark"] .lesson-prayer p, [data-theme="dark"] .lesson-intro p { color: #E7EDF3; }

/* проверка знаний (экзамен блока) */
.exam-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; padding: 16px 18px;
  border-radius: 16px; background: linear-gradient(135deg, var(--navy), #26506E); color: #fff; }
.exam-head__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(212,165,116,.25); color: var(--gold); flex: 0 0 auto; }
.exam-head__title { font-family: var(--font-head, 'Playfair Display', serif); font-size: 20px; font-weight: 700; }
.exam-head__sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }

/* игра «Дилемма» */
.dil-situation__t { font-weight: 700; font-size: 15px; color: var(--terracotta); margin-bottom: 6px; }
.dil-situation p { font-size: 14px; line-height: 1.6; }
.dil-opts { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; }
.dil-opt { text-align: left; padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.45;
  background: var(--card, #fff); border: 1.5px solid rgba(26,58,82,.12); color: var(--navy); cursor: pointer;
  box-shadow: 0 2px 6px rgba(26,58,82,.05);
  transition: transform .12s var(--ease), border-color .12s var(--ease); }
.dil-opt:active { transform: scale(.98); }
.dil-opt--good { border-color: var(--success); background: rgba(123,198,122,.12); }
.dil-opt--bad { border-color: var(--terracotta); background: rgba(201,112,100,.1); }
.dil-feedback { margin-top: 14px; padding: 16px; border-radius: 14px; }
.dil-feedback--good { background: rgba(123,198,122,.12); }
.dil-feedback--soft { background: rgba(122,174,212,.12); }
.dil-feedback__row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--navy); }
.dil-feedback__row .ic { flex: 0 0 auto; color: var(--terracotta); margin-top: 1px; }
.dil-verse { margin-top: 12px; font-size: 13px; font-style: italic; color: var(--gray); line-height: 1.5; }
.dil-verse em { color: var(--terracotta); font-style: normal; font-weight: 600; }

/* игра «Библейский детектив» */
.det-clues { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.det-clue { padding: 14px 16px; border-radius: var(--radius-card); background: #fff; color: var(--navy); font-size: 14px; line-height: 1.5;
  box-shadow: 0 1px 4px rgba(26,58,82,.05); border-left: 3px solid var(--gold); }
.det-clue__n { display: block; font-size: 11px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.det-opts { display: flex; flex-direction: column; gap: 10px; }
.det-opt { text-align: left; padding: 14px 16px; border-radius: 14px; font-size: 14px; background: var(--card, #fff);
  border: 1.5px solid rgba(26,58,82,.12); color: var(--navy); cursor: pointer; box-shadow: 0 2px 6px rgba(26,58,82,.05);
  transition: transform .12s var(--ease); }
.det-opt:active { transform: scale(.98); }
.det-opt:active { transform: scale(.98); }
.det-opt--right { border-color: var(--success); background: rgba(123,198,122,.14); }
.det-opt--wrong { border-color: var(--error); background: rgba(212,106,106,.1); }
.det-reveal { margin-top: 14px; padding: 16px; border-radius: 14px; }
.det-reveal--ok { background: rgba(123,198,122,.12); }
.det-reveal--no { background: rgba(212,165,116,.14); }
.det-reveal__t { font-weight: 700; font-size: 15px; margin-bottom: 6px; color: var(--navy); }
.det-reveal p { font-size: 14px; line-height: 1.55; }

/* семейный алтарь (девоционалы) */
.dev-head { margin: 4px 0 16px; }
.dev-head__day { font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; }
.dev-head__title { font-family: var(--font-head, 'Playfair Display', serif); font-size: 24px; font-weight: 700; color: var(--navy); margin-top: 4px; line-height: 1.2; }
.dev-nav { display: flex; gap: 10px; margin-top: 20px; }
.dev-nav .btn { flex: 1; }
[data-theme="dark"] .dil-opt, [data-theme="dark"] .det-opt { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: #E7EDF3; }
[data-theme="dark"] .dev-head__title { color: #E7EDF3; }

/* семейный квиз */
.fam-turn { text-align: center; padding: 16px; border-radius: 16px; margin-bottom: 14px; color: #fff; }
.fam-turn--p1 { background: linear-gradient(135deg, var(--navy), #26506E); }
.fam-turn--p2 { background: linear-gradient(135deg, var(--terracotta), #a8564b); }
.fam-turn__who { font-family: var(--font-head, 'Playfair Display', serif); font-size: 20px; font-weight: 700; }
.fam-turn__score { font-size: 13px; opacity: .9; margin-top: 4px; }
.fam-turn__round { font-size: 12px; opacity: .75; margin-top: 2px; }
.fam-opt { display: block; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 10px; border-radius: 14px;
  background: #fff; border: 1.5px solid rgba(26,58,82,.12); color: var(--navy); font-size: 14px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(26,58,82,.05);
  transition: transform .12s var(--ease), border-color .12s var(--ease); }
.fam-opt:active { transform: scale(.98); }
.fam-opt--right { border-color: var(--success); background: rgba(123,198,122,.14); }
.fam-opt--wrong { border-color: var(--error); background: rgba(212,106,106,.1); }

/* ежедневный вызов */
.ch-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, var(--gold), #c79760); color: #fff; }
.ch-head__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.22); flex: 0 0 auto; }
.ch-head__title { font-family: var(--font-head, 'Playfair Display', serif); font-size: 20px; font-weight: 700; }
.ch-head__sub { font-size: 12.5px; opacity: .9; margin-top: 2px; }
.ch-task { display: flex; gap: 12px; align-items: flex-start; }
.ch-task .ic { color: var(--terracotta); flex: 0 0 auto; margin-top: 2px; }
.ch-task p { font-size: 14.5px; line-height: 1.55; margin: 0; }

/* толкование */
.int-q { font-weight: 700; font-size: 15px; margin: 16px 2px 12px; color: var(--navy); }
.int-opts { display: flex; flex-direction: column; gap: 10px; }

/* квест Ковчег Завета */
.q2-chapter { font-family: var(--font-head, 'Playfair Display', serif); font-size: 20px; font-weight: 700; color: var(--terracotta); margin: 4px 0 10px; }
.q2-scene p { font-size: 14.5px; line-height: 1.6; }
.q2-question { font-weight: 700; font-size: 15px; margin: 16px 2px 12px; color: var(--navy); }
[data-theme="dark"] .fam-opt { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: #E7EDF3; }
[data-theme="dark"] .int-q, [data-theme="dark"] .q2-question { color: #E7EDF3; }


/* ══════════ TELEGRAM-ФУНКЦИИ ЧАТА ══════════ */
.chats-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.chats-head .screen-title { margin-bottom: 0; }
#newChatBtn { position: relative; color: var(--terracotta); display: flex; padding: 6px; }
.chats-head__plus { position: absolute; right: 1px; bottom: 3px; background: var(--cream); border-radius: 50%; }

.cv-input__voice { background: rgba(26,58,82,.1); color: var(--navy); }
.cv-input__send[hidden] { display: none; }

.cv-record {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: var(--radius-card);
  padding: 12px 14px; margin-bottom: 8px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(26,58,82,.12);
}
.cv-record[hidden] { display: none; }
.cv-record__dot { width: 10px; height: 10px; border-radius: 50%; background: #E23B3B; animation: recblink 1s infinite; }
@keyframes recblink { 50% { opacity: .25; } }
.cv-record__hint { color: var(--gray); font-weight: 400; font-size: 12px; flex: 1; }
#cvRecCancel { color: var(--error); font-weight: 600; font-size: 13px; }
#cvRecTime { font-variant-numeric: tabular-nums; }

.msg__voice {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 16px; min-width: 190px;
}
.msg--their .msg__voice { background: #fff; box-shadow: 0 1px 3px rgba(26,58,82,.07); border-bottom-left-radius: 5px; }
.msg--mine .msg__voice { background: var(--terracotta); color: var(--cream); border-bottom-right-radius: 5px; }
.msg__voice-play { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center; }
.msg--mine .msg__voice-play { background: rgba(250,248,245,.25); color: var(--cream); }
.msg--their .msg__voice-play { background: rgba(201,112,100,.15); color: var(--terracotta); }
.msg__wave { display: flex; align-items: center; gap: 2px; height: 22px; flex: 1; }
.msg__wave i { width: 3px; border-radius: 2px; background: currentColor; opacity: .75; }
.msg__voice-dur { font-size: 11.5px; font-variant-numeric: tabular-nums; }

.msg__photo { max-width: 220px; border-radius: 14px; display: block; }
.msg__file {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px;
}
.msg--mine .msg__file { background: var(--terracotta); color: var(--cream); }
.msg--their .msg__file { background: #fff; }
.msg__file-icon { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(250,248,245,.25); }
.msg--their .msg__file-icon { background: rgba(212,165,116,.2); color: var(--navy); }
.msg__file-name { font-size: 13px; font-weight: 600; word-break: break-all; }
.msg__file-size { font-size: 11px; opacity: .8; }

.asheet { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.asheet__item {
  display: flex; align-items: center; gap: 14px;
  width: calc(100% - 32px); margin: 0 16px 8px;
  background: #fff; border: 1px solid rgba(26,58,82,.1);
  border-radius: var(--radius-card);
  padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--navy);
  text-align: left;
}
.asheet__item .ic { color: var(--terracotta); }
.asheet__item small { margin-left: auto; color: var(--gray); font-weight: 400; font-size: 11px; }
.asheet__item--dim { opacity: .6; }
.asheet__note { font-size: 11.5px; color: var(--gray); padding: 6px 20px 4px; text-align: center; line-height: 1.5; }

.dm-item {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 32px); margin: 0 16px 8px;
  background: #fff; border-radius: var(--radius-card);
  padding: 12px 14px; text-align: left;
  box-shadow: 0 1px 3px rgba(26,58,82,.06);
}
.dm-item__avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  background: var(--gold); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.dm-item__name { font-weight: 600; font-size: 14px; }
.dm-item__meta { font-size: 11.5px; color: var(--gray); }

.ucard { text-align: center; }
.ucard__avatar { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--gold); color: #fff; font-size: 30px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ucard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ucard__name { font-family: var(--font-head); font-size: 20px; font-weight: 700; }
.ucard__meta { font-size: 13px; color: var(--gray); margin: 4px 0 16px; }

/* ══════════ АДАПТАЦИЯ И ПОЛИРОВКА (все устройства) ══════════ */
img, video { max-width: 100%; }

/* шапка с учётом чёлки iPhone */
.header { padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); }
.screens { padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 12px); }

/* ЧАТ: фиксированная раскладка — поле ввода всегда у низа, ровно над клавиатурой */
body.in-chat .header { display: none; }
[data-screen="chatview"].screen--active {
  position: fixed; inset: 0 auto 0 50%; z-index: 40;
  width: 100%; max-width: var(--max-w);
  transform: translateX(-50%);
  height: var(--vvh, 100dvh);
  min-height: 0;
  background: var(--cream);
  padding: calc(8px + env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.cv-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cv-head, .cv-input, .cv-record, .cv-readonly, .cv-pinned { flex: 0 0 auto; }

/* стикеры: компактно, как в Telegram */
.msg__sticker { width: 96px; height: 96px; }
.cv-stickers {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px; padding: 10px;
  max-height: 224px; overflow-y: auto;
  margin-bottom: 8px;
}
.cv-stickers button { padding: 2px; }

/* переносы и обрезания */
.msg__bubble, .feed-card__title, .feed-card__text, .chat-item__name { overflow-wrap: break-word; word-break: break-word; }
.chat-item__body { min-width: 0; }
.sr > div { min-width: 0; }
.sr__title, .sr__meta { overflow-wrap: break-word; }

/* маленькие экраны (iPhone SE, узкие Android) */
@media (max-width: 379px) {
  :root { --pad: 12px; }
  .today__row { flex-wrap: wrap; gap: 6px; }
  .field-row { flex-direction: column; gap: 14px; }
  .field--narrow { flex: 1; }
  .card { padding: 18px; }
}

/* планшет и десктоп: рамка приложения по центру */
@media (min-width: 520px) {
  .header, .nav { left: 50%; transform: translateX(-50%); }
  .screens { box-shadow: 0 0 60px rgba(16, 34, 47, .25); }
}

.sheet__list, .notif__list { overscroll-behavior: contain; }


/* ══════════ РАСПИСАНИЕ СОЗВОНОВ ══════════ */
.ev { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.ev__icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(201,112,100,.12); color: var(--terracotta);
  display: flex; align-items: center; justify-content: center; }
.ev__body { flex: 1; min-width: 0; }
.ev__title { font-weight: 700; font-size: 14px; }
.ev__meta { font-size: 12px; color: var(--gray); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.ev__btn { padding: 9px 14px; font-size: 12.5px; flex: 0 0 auto; width: auto; }

/* экзамены в каталоге */
.lesson-item--exam { border: 1.5px dashed var(--gold); background: rgba(212,165,116,.07); }
.lesson-item--exam .lesson-item__num { background: rgba(212,165,116,.25); font-family: var(--font-head); }

/* поиск по сообщениям */
.cv-head__search { margin-left: auto; color: var(--gray); display: flex; padding: 6px; }
.cv-search { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; }
.cv-search[hidden] { display: none; }
.cv-search input {
  flex: 1; font-family: inherit; font-size: 13.5px;
  border: 1.5px solid rgba(26,58,82,.18); border-radius: 10px;
  padding: 9px 13px; outline: none; background: #fff; color: var(--navy);
}
.cv-search input:focus { border-color: var(--terracotta); }
#cvSearchCount { font-size: 11.5px; color: var(--gray); white-space: nowrap; }

/* ══════════ ТЁПЛАЯ МАГИЯ ══════════ */
.fx-canvas {
  position: fixed; inset: 0; z-index: 110;
  pointer-events: none; opacity: 0;
  transition: opacity 200ms;
}
.fx-canvas--on { opacity: 1; }

.splash__fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.splash > * { position: relative; z-index: 1; }
.splash__fx { z-index: 0; }

/* дыхание логотипа сплэша */
.splash__video, .splash__logo svg {
  animation: breathe 3.4s var(--ease) infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(212,165,116,0)); }
  50%      { transform: scale(1.035); filter: drop-shadow(0 8px 26px rgba(212,165,116,.35)); }
}

/* модалка награды */
.reward {
  position: fixed; inset: 0; z-index: 105;
  background: rgba(16,34,47,.55);
  backdrop-filter: blur(3px);
  display: flex; flex-direction: column; overflow-y: auto; padding: 24px;
  opacity: 0; transition: opacity 260ms var(--ease);
}
.reward--on { opacity: 1; }
.reward__box {
  position: relative;
  margin: auto;
  background: linear-gradient(165deg, #FFFDF9, #F7EEDD);
  border: 1px solid var(--gold);
  border-radius: 24px;
  padding: 34px 28px 26px;
  width: 100%; max-width: 320px;
  text-align: center;
  transform: scale(.7) translateY(20px);
  transition: transform 340ms cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
.reward--on .reward__box { transform: scale(1) translateY(0); }
.reward__halo {
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,165,116,.35), transparent 65%);
  animation: haloPulse 2.6s var(--ease) infinite;
}
@keyframes haloPulse { 50% { transform: translateX(-50%) scale(1.15); opacity: .7; } }
.reward__badge {
  position: relative;
  width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 50%;
  background: linear-gradient(160deg, var(--gold), var(--terracotta));
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(201,112,100,.4);
  animation: badgePop 700ms cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badgePop {
  0% { transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.reward__title { position: relative; font-family: var(--font-head); font-size: 21px; font-weight: 700; }
.reward__sub { position: relative; font-size: 13.5px; color: var(--gray); margin-top: 6px; line-height: 1.5; }
.reward__xp {
  position: relative; display: inline-block; margin-top: 12px;
  font-weight: 700; font-size: 14px; color: var(--terracotta);
  background: rgba(201,112,100,.12); padding: 5px 16px; border-radius: 20px;
}
.reward__ok { position: relative; width: 100%; margin-top: 20px; padding: 13px; }

/* живой огонёк streak (раздел 4.8) */
.today__streak .ic-terra { animation: flicker 1.4s ease-in-out infinite; transform-origin: center bottom; }
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  50%      { transform: scale(1.12) rotate(2deg); opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .splash__video, .splash__logo svg, .today__streak .ic-terra,
  .reward__halo, .reward__badge { animation: none !important; }
}


/* ══════════ КАРТОЧКА ИГРЫ В ПРОФИЛЕ ══════════ */
.games-tile {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: linear-gradient(160deg, #fff, #FBF4E9);
  border: 1px solid var(--gold);
  border-radius: var(--radius-card);
  padding: 14px 16px; margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(26,58,82,.06);
}
.games-tile__icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(160deg, var(--gold), var(--terracotta)); color: var(--cream);
  display: flex; align-items: center; justify-content: center; }
.games-tile__icon--img { overflow: hidden; background: linear-gradient(150deg,#F0E4CF,#E8D4BC); }
.games-tile__icon--img img { width: 100%; height: 100%; object-fit: cover; }
.games-tile__name { font-weight: 700; font-size: 15px; }
.games-tile__desc { font-size: 12px; color: var(--gray); margin-top: 2px; }
.games-tile__play { margin-left: auto; color: var(--terracotta); }

/* ══════════ ИГРА «СОБЕРИ СТИХ» ══════════ */
.verse-head { margin-bottom: 4px; }
.verse-head__title { font-family: var(--font-head); font-size: 22px; font-weight: 700; }
.verse-head__meta { font-size: 13px; color: var(--gray); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.verse-ref { font-size: 12px; color: var(--gold); font-weight: 700; letter-spacing: .04em; margin: 14px 0 8px; }
.verse-target {
  min-height: 96px;
  background: linear-gradient(160deg, #fff, #FBF6EE);
  border: 1.5px dashed var(--gold);
  border-radius: var(--radius-card);
  padding: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
}
.verse-target:empty::before { content: 'Нажимай слова снизу по порядку'; color: var(--gray); font-size: 13px; }
.verse-bank { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.word {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 10px 15px; border-radius: 12px;
  background: #fff; color: var(--navy);
  border: 1.5px solid rgba(26,58,82,.16);
  box-shadow: 0 1px 3px rgba(26,58,82,.08);
  cursor: pointer; transition: transform 120ms var(--ease), background 150ms;
  animation: wordIn 300ms var(--ease) both;
}
@keyframes wordIn { from { opacity: 0; transform: scale(.8); } }
.word:active { transform: scale(.94); }
.word--placed { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }
.word--right { background: var(--success); color: #fff; border-color: var(--success); animation: rightPulse 400ms; }
.word--wrong { background: rgba(212,106,106,.15); border-color: var(--error); animation: pinshake 300ms; }
@keyframes rightPulse { 50% { transform: scale(1.12); } }
.verse-actions { display: flex; gap: 10px; margin-top: 4px; }
.verse-actions .btn { flex: 1; }
.verse-levels { display: flex; gap: 8px; margin-top: 20px; }
.verse-level {
  flex: 1; padding: 10px; border-radius: 12px; font-size: 13px; font-weight: 600;
  border: 1.5px solid rgba(26,58,82,.16); color: var(--navy); background: #fff;
}
.verse-level--on { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }


/* ══════════ МОЙ ХРАМ (растущий SVG) ══════════ */
/* Красивый визуальный храм: акварельные иллюстрации этапов + свечение */
.temple-hero {
  position: relative; border-radius: var(--radius-modal); overflow: hidden;
  aspect-ratio: 5/4; margin-bottom: 16px;
  background: linear-gradient(180deg, #EAF1F6 0%, #FBF6EE 100%);
  box-shadow: 0 12px 30px rgba(26,58,82,.18);
}
.temple-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity 900ms var(--ease), transform 1200ms var(--ease);
}
.temple-hero__img--on { opacity: 1; transform: scale(1); }
.temple-hero__glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255,224,150,.55), rgba(255,224,150,0) 60%);
  transition: opacity 900ms;
}
.temple-hero--complete .temple-hero__glow { opacity: 1; animation: templeRadiate 3.4s var(--ease) infinite; }
@keyframes templeRadiate { 50% { opacity: .55; } }
.temple-hero__badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(26,58,82,.82); color: #fff; backdrop-filter: blur(4px);
  font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: 999px;
}
.temple-hero__badge [data-icon] { color: #ffe0a0; }
.temple-hero--complete .temple-hero__badge { background: rgba(201,112,100,.9); }
.temple-progress__label { font-weight: 700; font-size: 14px; margin-bottom: 8px; }

/* Продолжение: украшение храма после 100% */
.temple-next { margin-top: 24px; padding-top: 20px; border-top: 2px dashed rgba(212,165,116,.5); animation: fadeIn 500ms var(--ease); }
.temple-next__hero { position: relative; border-radius: var(--radius-modal); overflow: hidden; box-shadow: 0 10px 26px rgba(201,112,100,.24); }
.temple-next__hero img { width: 100%; display: block; }
.temple-next__crown { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: linear-gradient(160deg,#E6C079,#C97064); box-shadow: 0 6px 16px rgba(201,112,100,.4); }
.temple-next__title { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--navy); margin: 14px 0 4px; }
.temple-decor { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tdecor { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 1.5px solid rgba(212,165,116,.45); border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 3px 10px rgba(26,58,82,.06); transition: transform 120ms; }
.tdecor:active { transform: scale(.98); }
.tdecor__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(160deg,#D4A574,#C97064); }
.tdecor__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tdecor__name { font-weight: 700; font-size: 14px; color: var(--navy); }
.tdecor__note { font-size: 12px; color: var(--gray); }
.tdecor__xp { flex: 0 0 auto; font-weight: 800; font-size: 13px; color: var(--terracotta); }
.tdecor--done { background: linear-gradient(135deg,#F3FBF3,#eaf6ea); border-color: rgba(123,198,122,.6); }
.tdecor--done .tdecor__ic { background: linear-gradient(160deg,#8ccf8a,#5fae5f); }
.tdecor--done .tdecor__xp { color: #4a9e4a; }
.temple-next__note { margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg,#FFF6E9,#FBEBD6); border: 1.5px solid var(--gold);
  font-size: 13.5px; line-height: 1.55; color: var(--navy); font-style: italic; text-align: center; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .tdecor { background: #232a33; border-color: rgba(212,165,116,.3); }
[data-theme="dark"] .tdecor__name { color: #E7EDF3; }
[data-theme="dark"] .temple-next__title { color: #E7EDF3; }
[data-theme="dark"] .temple-next__note { background: linear-gradient(135deg,#2a2118,#241c14); color: #f4ead6; }
@media (prefers-reduced-motion: reduce) {
  .temple-hero__img { transition: opacity 300ms; transform: none; }
  .temple-hero--complete .temple-hero__glow { animation: none; }
}


/* ══════════ ПУТЕШЕСТВИЕ ВЕРЫ ══════════ */
.journey-wrap {
  background: linear-gradient(180deg, #EAF1F6, #FBF6EE);
  border-radius: var(--radius-modal);
  padding: 8px; overflow: hidden;
}
.journey-svg { width: 100%; height: auto; display: block; }
#jPathDone { transition: stroke-dashoffset 1.6s var(--ease); }
.j-stop-dot { transition: all 300ms var(--ease); }
.j-stop-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--navy); }
.j-stop-label--locked { fill: var(--gray); opacity: .6; }
#jAvatar { transition: transform 1.6s cubic-bezier(.4,0,.2,1); }
.j-stop-ring { animation: jpulse 2s var(--ease) infinite; transform-origin: center; }
@keyframes jpulse { 50% { opacity: .3; r: 20; } }
@media (prefers-reduced-motion: reduce) {
  #jPathDone, #jAvatar { transition: none; }
  .j-stop-ring { animation: none; }
}


/* ══════════ РАНГИ РОСТА ══════════ */
.ranks { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.ranks::-webkit-scrollbar { display: none; }
.rank {
  flex: 0 0 84px; text-align: center;
  background: #fff; border-radius: var(--radius-card);
  padding: 12px 6px; box-shadow: 0 1px 4px rgba(26,58,82,.05);
  position: relative;
}
.rank--done { background: linear-gradient(160deg, #fff, #FBF4E9); }
.rank--current { border: 2px solid var(--gold); box-shadow: 0 4px 14px rgba(212,165,116,.3); }
.rank--future { opacity: .5; }
.rank__icon {
  width: 44px; height: 44px; margin: 0 auto 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(212,165,116,.22), rgba(201,112,100,.14)); color: var(--navy);
}
.rank--current .rank__icon { background: linear-gradient(160deg, var(--gold), var(--terracotta)); color: var(--cream); animation: rankGlow 2.4s var(--ease) infinite; }
.rank--future .rank__icon { background: rgba(90,101,119,.1); color: var(--gray); }
@keyframes rankGlow { 50% { box-shadow: 0 0 0 5px rgba(212,165,116,.2); } }
.rank__name { font-size: 10.5px; font-weight: 700; line-height: 1.25; }
.rank__xp { font-size: 9px; color: var(--gray); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .rank--current .rank__icon { animation: none; } }


/* ══════════ КНИГА МЕТАНОЙЯ ══════════ */
.book-cover {
  text-align: center; padding: 34px 24px 30px;
  background: linear-gradient(165deg, #FBF4E7, #F2E4CC);
  border: 1px solid var(--gold); border-radius: var(--radius-modal);
  box-shadow: inset 0 0 40px rgba(212,165,116,.15);
}
.book-cover img { margin-bottom: 12px; }
.book-cover__title { font-family: var(--font-head); font-weight: 900; font-size: 30px; letter-spacing: 5px; }
.book-cover__sub { font-family: var(--font-head); font-style: italic; font-size: 15px; color: var(--gray); margin-top: 8px; }
.book-cover__author { font-size: 13px; color: var(--terracotta); font-weight: 600; margin-top: 18px; letter-spacing: .04em; }

.toc-block { font-family: var(--font-head); font-size: 15px; font-weight: 700; margin: 18px 0 8px; color: var(--navy); }
.toc-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: #fff; border-radius: var(--radius-card);
  padding: 13px 15px; margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(26,58,82,.05);
}
.toc-item--locked { opacity: .5; }
.toc-item__num { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(212,165,116,.2); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 13px; }
.toc-item__t { flex: 1; font-weight: 600; font-size: 14px; }
.toc-item__read { font-size: 11px; color: var(--success); font-weight: 600; }

/* читалка */
[data-screen="reader"].screen--active {
  display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h));
}
.reader-bar {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(212,165,116,.3);
  position: sticky; top: 0;
}
.reader-bar__title { flex: 1; font-weight: 700; font-size: 14px; }
.reader-bar__back, .cv-head__back { color: var(--navy); display: flex; }
.reader-bar__size { font-weight: 700; color: var(--terracotta); font-size: 15px; }
.reader {
  --reader-fs: 16px;
  font-size: var(--reader-fs); line-height: 1.75;
  padding: 20px 4px 40px; color: var(--navy);
}
.reader h2 { font-family: var(--font-head); font-size: calc(var(--reader-fs) + 8px); font-weight: 700; margin: 8px 0 16px; text-wrap: balance; }
.reader-cover { margin: 0 0 20px; border-radius: 14px; overflow: hidden; aspect-ratio: 3/2; box-shadow: 0 8px 22px -12px rgba(26,58,82,.4); border: 4px solid #fff; background: var(--cream); }
.reader-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reader-listen { width: 100%; margin: 0 0 22px; }
[data-theme="dark"] .reader-cover { border-color: #22333f; box-shadow: 0 8px 22px -12px rgba(0,0,0,.5); }
.reader p { margin-bottom: 16px; }
.reader .drop::first-letter { font-family: var(--font-head); font-size: 3.2em; float: left; line-height: .82; padding: 4px 10px 0 0; color: var(--terracotta); }
.reader .scripture {
  background: linear-gradient(160deg, #FBF4E7, #F6EBD8);
  border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
  padding: 14px 18px; margin: 20px 0;
  font-family: var(--font-head); font-style: italic;
  font-size: calc(var(--reader-fs) + 1px); line-height: 1.6;
}
.reader .scripture cite { display: block; font-style: normal; font-family: var(--font-body); font-size: 13px; color: var(--gold); font-weight: 700; margin-top: 8px; }


/* ══════════ ХАБ ИГР ══════════ */
.ghub-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.ghub-tab { flex: 1; padding: 9px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  color: var(--gray); background: rgba(90,101,119,.08); }
.ghub-tab--on { background: var(--terracotta); color: var(--cream); }
.ghub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gcard {
  background: linear-gradient(160deg, #fff, #FBF4E9); border-radius: var(--radius-card);
  padding: 16px 14px; text-align: center;
  box-shadow: 0 2px 8px rgba(201,112,100,.1); border: 1px solid rgba(212,165,116,.25);
  position: relative;
}
.gcard--locked { opacity: .92; }
.gcard__icon { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #E6A15C, #C97064); color: #fff;
  box-shadow: 0 4px 12px rgba(201,112,100,.28); }
.gcard__img { width: 100%; height: 84px; margin: 0 auto 10px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #F0E4CF, #E8D4BC); box-shadow: 0 4px 12px rgba(201,112,100,.2); }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; }
.gcard__img--fallback { color: #fff; background: linear-gradient(150deg, #E6A15C, #C97064); }
/* каждая карточка — свой тёплый оттенок, чтобы было живо */
#ghub .gcard:nth-child(3n+2) .gcard__icon { background: linear-gradient(150deg, #E6C079, #D4A574); }
#ghub .gcard:nth-child(3n) .gcard__icon { background: linear-gradient(150deg, #7AAED4, #4d7ea3); }
.gcard--locked .gcard__icon { background: linear-gradient(150deg, #E6C79A, #D9A88F); }
.gcard--locked .gcard__name { color: var(--navy); }
.gcard__name { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.gcard__meta { font-size: 11px; color: var(--gray); margin-top: 3px; }
.gcard__lock { position: absolute; top: 10px; right: 10px; color: var(--gray); }
/* Экраны игр: мягкое тёплое свечение снизу, чтобы пустое место не читалось как «недоделано» */
[data-screen="quiz"].screen--active, [data-screen="who"].screen--active,
[data-screen="chrono"].screen--active, [data-screen="dilemma"].screen--active,
[data-screen="detective"].screen--active, [data-screen="family"].screen--active,
[data-screen="challenge"].screen--active, [data-screen="interpret"].screen--active,
[data-screen="quest2"].screen--active, [data-screen="verse"].screen--active,
[data-screen="devotional"].screen--active {
  min-height: calc(100dvh - var(--header-h, 60px));
  background: radial-gradient(130% 55% at 50% 118%, rgba(212,165,116,.12), transparent 68%);
}
.gcard--play { cursor: pointer; transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.gcard--play:active { transform: scale(.97); }
.gcard--play::after { content: 'Играть ▸'; display: block; margin-top: 10px; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--terracotta); border-radius: 10px; padding: 8px 0; box-shadow: 0 3px 8px rgba(201,112,100,.28); }
.gcard--locked::after { content: 'Открыть'; display: block; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--navy);
  background: rgba(212,165,116,.25); border-radius: 10px; padding: 8px 0; }

/* ══════════ МЕМОРИ ══════════ */
.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.mcard {
  aspect-ratio: 3/4; border-radius: 12px; cursor: pointer;
  position: relative; transform-style: preserve-3d;
  transition: transform 400ms var(--ease);
}
.mcard--flip { transform: rotateY(180deg); }
.mcard__face {
  position: absolute; inset: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; font-size: 28px;
}
.mcard__back { background: linear-gradient(160deg, var(--terracotta), #a85850); color: var(--cream); }
.mcard__front { background: #fff; border: 1.5px solid var(--gold); transform: rotateY(180deg); }
.mcard__front--img { padding: 0; overflow: hidden; }
.mcard__front--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; display: block; }
.mcard--done { opacity: .5; }
.mcard--done .mcard__front--img { box-shadow: inset 0 0 0 3px var(--gold); }

/* ══════════ ВИКТОРИНА ══════════ */
.quiz-timer { height: 6px; border-radius: 3px; background: rgba(90,101,119,.15); overflow: hidden; margin: 14px 0 20px; }
.quiz-timer__bar { height: 100%; background: linear-gradient(90deg, var(--gold), var(--terracotta)); width: 100%; transition: width 100ms linear; }
.quiz-q { font-family: var(--font-head); font-size: 19px; font-weight: 700; margin-bottom: 18px; text-wrap: balance; }
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.qopt { padding: 14px 16px; border-radius: 14px; font-size: 14px; font-weight: 600;
  background: #fff; border: 1.5px solid rgba(26,58,82,.12); text-align: left;
  box-shadow: 0 2px 6px rgba(26,58,82,.05); transition: transform .12s var(--ease); }
.qopt:active { transform: scale(.98); }
.qopt--right { background: rgba(123,198,122,.15); border-color: var(--success); }
.qopt--wrong { background: rgba(212,106,106,.12); border-color: var(--error); }

/* ══════════════════════════════════════════════════════════════
   ЭТАП 5 · Рейтинг недели · Метанойя+ · Настройки · Тёмная тема
   ══════════════════════════════════════════════════════════════ */

/* ── Рейтинг недели ── */
.rating-head { text-align: center; padding: 6px 0 14px; }
.rating-head__title { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--navy); }
.rating-head__meta { font-size: 12.5px; color: var(--gray); margin-top: 4px; }
.rating-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 8px 0 18px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; }
.pod__ava { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 20px; color: #fff; overflow: hidden;
  box-shadow: 0 4px 14px rgba(26,58,82,.18); border: 3px solid #fff; }
.pod__ava img { width: 100%; height: 100%; object-fit: cover; }
.pod__name { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.pod__xp { font-size: 11.5px; color: var(--gray); }
.pod__stand { width: 100%; border-radius: 12px 12px 0 0; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-family: var(--font-head); font-size: 22px; }
.pod--1 .pod__stand { height: 66px; background: linear-gradient(180deg,#E6C079,#D4A574); }
.pod--2 .pod__stand { height: 50px; background: linear-gradient(180deg,#B9C4CE,#9AA8B5); }
.pod--3 .pod__stand { height: 40px; background: linear-gradient(180deg,#D9A283,#C97064); }
.pod--1 .pod__ava { width: 62px; height: 62px; border-color: var(--gold); }
.rating-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--radius-card);
  padding: 10px 14px; box-shadow: 0 1px 4px rgba(26,58,82,.05); }
.lb-row--me { border: 1.5px solid var(--gold); background: linear-gradient(100deg,#fff,#FBF4E9); }
.lb-row__pos { width: 24px; text-align: center; font-weight: 800; color: var(--gray); font-size: 15px; }
.lb-row__ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-family: var(--font-head); overflow: hidden; flex: 0 0 auto; }
.lb-row__ava img { width: 100%; height: 100%; object-fit: cover; }
.lb-row__body { flex: 1; min-width: 0; }
.lb-row__name { font-weight: 700; font-size: 14px; color: var(--navy); }
.lb-row__rank { font-size: 12px; color: var(--gray); }
.lb-row__xp { font-weight: 800; color: var(--terracotta); font-size: 14px; }
.lb-row__xp small { font-weight: 600; color: var(--gray); font-size: 11px; }
.rating-note { margin: 16px 2px 4px; font-size: 12.5px; color: var(--gray); line-height: 1.5; text-align: center; }

/* ── Метанойя+ подписка ── */
.sub-hero { text-align: center; padding: 14px 0 6px; }
.sub-hero__crown { width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 22px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg,#E6C079,#D4A574 60%,#C97064); box-shadow: 0 8px 22px rgba(212,165,116,.4); }
.sub-hero__title { font-family: var(--font-head); font-size: 27px; font-weight: 800; color: var(--navy); }
.sub-hero__sub { font-size: 13.5px; color: var(--gray); margin: 6px auto 0; max-width: 30ch; line-height: 1.45; }
.sub-active { margin: 12px 0; padding: 12px 14px; border-radius: var(--radius-card); text-align: center;
  background: rgba(123,198,122,.14); border: 1px solid var(--success); color: #2f7a3a; font-weight: 700; font-size: 13.5px; }
.sub-benefits { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 4px; background: #fff;
  border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 1px 4px rgba(26,58,82,.05); }
.sub-benefit { display: flex; align-items: center; gap: 12px; padding: 12px 15px; font-size: 13.5px; color: var(--navy); }
.sub-benefit + .sub-benefit { border-top: 1px solid rgba(26,58,82,.06); }
.sub-benefit__ic { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center;
  color: var(--success); background: rgba(123,198,122,.15); }
.sub-plans { display: flex; flex-direction: column; gap: 10px; }
.sub-plan { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid rgba(26,58,82,.12);
  border-radius: var(--radius-card); padding: 14px 15px; text-align: left; position: relative; }
.sub-plan--on { border-color: var(--gold); background: linear-gradient(100deg,#fff,#FBF4E9); box-shadow: 0 4px 14px rgba(212,165,116,.18); }
.sub-plan__radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(26,58,82,.25); flex: 0 0 auto; display: grid; place-items: center; }
.sub-plan--on .sub-plan__radio { border-color: var(--gold); background: var(--gold); color: #fff; }
.sub-plan__body { flex: 1; }
.sub-plan__name { font-weight: 700; font-size: 15px; color: var(--navy); }
.sub-plan__desc { font-size: 12px; color: var(--gray); margin-top: 2px; }
.sub-plan__price { text-align: right; }
.sub-plan__amt { font-weight: 800; font-size: 16px; color: var(--navy); font-family: var(--font-head); }
.sub-plan__per { font-size: 11px; color: var(--gray); }
.sub-plan__tag { position: absolute; top: -9px; right: 14px; background: var(--terracotta); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.sub-cta { margin: 18px 0 8px; width: 100%; }
.sub-note { text-align: center; font-size: 12px; color: var(--gray); line-height: 1.5; }

/* ── Настройки + переключатели ── */
.set-card { background: #fff; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 1px 4px rgba(26,58,82,.05); margin-bottom: 6px; }
.set-row { display: flex; align-items: center; gap: 13px; padding: 13px 15px; }
.set-row + .set-row { border-top: 1px solid rgba(26,58,82,.06); }
.set-row__ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center;
  color: var(--navy); background: rgba(26,58,82,.06); }
.set-row__body { flex: 1; min-width: 0; }
.set-row__name { font-weight: 600; font-size: 14px; color: var(--navy); }
.set-row__desc { font-size: 11.5px; color: var(--gray); margin-top: 1px; }
.switch { width: 46px; height: 27px; border-radius: 20px; background: rgba(26,58,82,.18); position: relative;
  flex: 0 0 auto; transition: background .22s var(--ease); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .22s var(--ease); }
.switch--on { background: var(--success); }
.switch--on::after { transform: translateX(19px); }
.set-about { text-align: center; font-size: 12px; color: var(--gray); line-height: 1.6; margin: 20px 0 8px; }
.menu-item--plus { color: var(--terracotta); font-weight: 600; }
.menu-item__tag { margin-left: auto; background: rgba(212,165,116,.2); color: #b07d3d; font-size: 10.5px;
  font-weight: 700; padding: 2px 9px; border-radius: 20px; }

/* ══ ТЁМНАЯ ТЕМА ══ */
/* Внимание: в тёмной теме --cream это цвет ФОНА, а не текста. Красить
   текст через var(--cream) здесь нельзя, он сольётся с подложкой:
   для светлого текста берём #E7EDF3. */
[data-theme="dark"] { --cream: #0e1b25; --gray: #9fb0bd; }
[data-theme="dark"] body { background: #0e1b25; color: #E7EDF3; }
[data-theme="dark"] .header { background: #14232f; border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .header__title, [data-theme="dark"] .screen-title,
[data-theme="dark"] .section-title, [data-theme="dark"] .profile-head__name,
[data-theme="dark"] .rating-head__title, [data-theme="dark"] .sub-hero__title { color: #F2F6FA; }
[data-theme="dark"] .nav { background: rgba(20,35,47,.96); border-top: 1px solid rgba(255,255,255,.06); }
[data-theme="dark"] .nav__tab { color: #8397A8; }
[data-theme="dark"] .nav__tab--active { color: var(--gold); }
[data-theme="dark"] .card,
[data-theme="dark"] .games-tile,
[data-theme="dark"] .menu-list,
[data-theme="dark"] .set-card,
[data-theme="dark"] .sub-benefits,
[data-theme="dark"] .sub-plan,
[data-theme="dark"] .lb-row,
[data-theme="dark"] .feed-card,
[data-theme="dark"] .chat-item,
[data-theme="dark"] .child-card,
[data-theme="dark"] .lesson-card,
[data-theme="dark"] .story__avatar,
[data-theme="dark"] .qopt,
[data-theme="dark"] .mcard__front,
[data-theme="dark"] .msg--their .msg__bubble,
[data-theme="dark"] .msg--their .msg__voice,
[data-theme="dark"] .msg--their .msg__file,
[data-theme="dark"] .search-box,
[data-theme="dark"] input,
[data-theme="dark"] textarea { background: #1b2c3a; color: #E7EDF3; border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .card, [data-theme="dark"] .games-tile, [data-theme="dark"] .lb-row,
[data-theme="dark"] .feed-card, [data-theme="dark"] .set-card { box-shadow: 0 1px 4px rgba(0,0,0,.3); }
[data-theme="dark"] .menu-item { color: #E7EDF3; border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .menu-item--plus { color: var(--gold); }
[data-theme="dark"] .games-tile__name, [data-theme="dark"] .set-row__name, [data-theme="dark"] .lb-row__name,
[data-theme="dark"] .sub-plan__name, [data-theme="dark"] .sub-plan__amt, [data-theme="dark"] .pod__name,
[data-theme="dark"] .sub-benefit { color: #EAF0F5; }
[data-theme="dark"] .set-row__ic { background: rgba(255,255,255,.08); color: #C7D4DF; }
[data-theme="dark"] .lb-row--me { background: linear-gradient(100deg,#22333f,#2b3a30); }
[data-theme="dark"] .sub-plan--on { background: linear-gradient(100deg,#22333f,#2e3a2a); }

/* тёмная тема: доработка ранее непокрытых компонентов (аудит) */
[data-theme="dark"] .lesson-item { background: #1b2c3a; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
[data-theme="dark"] .lesson-item--locked { background: #16242f; }
[data-theme="dark"] .lesson-item__title { color: #EAF0F5; }
[data-theme="dark"] .lesson-item__num { background: rgba(255,255,255,.1); color: #EAF0F5; }
[data-theme="dark"] .gcard { background: linear-gradient(160deg,#1f2f3d,#1a2733); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .gcard__name { color: #EAF0F5; }
[data-theme="dark"] .rank { background: #1b2c3a; }
[data-theme="dark"] .rank--on { background: linear-gradient(150deg,#3a2b28,#2b3a30); }
[data-theme="dark"] .rank__name { color: #EAF0F5; }
[data-theme="dark"] .toc-item { background: #1b2c3a; }
[data-theme="dark"] .toc-item__t { color: #EAF0F5; }
/* Заголовок главы и кружок с номером в книге: в тёмной теме были навы на навы. */
[data-theme="dark"] .toc-block { color: #F2F6FA; }
[data-theme="dark"] .toc-item__num { background: rgba(212,165,116,.22); color: #e6c79a; }
[data-theme="dark"] .reader { color: #E7EDF3; }
[data-theme="dark"] .reader .scripture { background: linear-gradient(150deg,#22333f,#2a2620); color: #EAF0F5; }
[data-theme="dark"] .blockp span { color: #EAF0F5; }
[data-theme="dark"] .switch { background: rgba(255,255,255,.16); }
[data-theme="dark"] .set-about, [data-theme="dark"] .rating-note, [data-theme="dark"] .sub-note { color: #8397A8; }
[data-theme="dark"] #openBook { background: linear-gradient(160deg,#2a2440,#241d33) !important; border-color: rgba(155,122,212,.5) !important; }
[data-theme="dark"] .child-card__name { color: #E7EDF3; }
[data-theme="dark"] .child-card__rank { color: #9FB0C0; }

/* ── Сертификаты ── */
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cert-card { border-radius: var(--radius-card); padding: 16px 12px; text-align: center; position: relative;
  background: #fff; box-shadow: 0 1px 4px rgba(26,58,82,.06); border: 1.5px solid rgba(26,58,82,.08); }
.cert-card--earned { border-color: var(--gold); background: linear-gradient(160deg,#fff,#FBF4E9); cursor: pointer; }
.cert-card--year { grid-column: 1 / -1; }
.cert-card__ribbon { width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg,#E6C079,#D4A574); }
.cert-card--locked .cert-card__ribbon { background: rgba(26,58,82,.12); color: var(--gray); }
.cert-card__name { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--navy); line-height: 1.25; }
.cert-card__award { font-size: 11.5px; color: var(--gray); margin-top: 3px; }
.cert-card__state { margin-top: 8px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-block; }
.cert-card--earned .cert-card__state { background: rgba(212,165,116,.22); color: #b07d3d; }
.cert-card--locked .cert-card__state { background: rgba(26,58,82,.07); color: var(--gray); }

/* Просмотр сертификата */
.cert-view { position: fixed; inset: 0; z-index: 90; background: rgba(20,35,47,.9); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; }
.cert-view[hidden] { display: none; }
.cert-view__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top)); }
.cert-view__close { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
.cert-view__dl { display: flex; align-items: center; gap: 7px; background: var(--terracotta); color: #fff; font-weight: 700;
  font-size: 14px; padding: 10px 18px; border-radius: 24px; }
.cert-view__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 16px 24px; overflow: auto; }
.cert-view__stage svg { width: auto; max-width: min(460px, 92vw); height: auto; max-height: calc(100dvh - 96px); border-radius: 8px;
  box-shadow: 0 16px 50px rgba(0,0,0,.5); }
[data-theme="dark"] .cert-card { background: #1b2c3a; border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .cert-card--earned { background: linear-gradient(160deg,#22333f,#2d2a20); }
[data-theme="dark"] .cert-card__name { color: #EAF0F5; }

/* ── Ежедневный стих (ритуал дня) ── */
.dverse { position: fixed; inset: 0; z-index: 95; background: rgba(20,35,47,.55); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; overflow-y: auto; padding: 20px; }
.dverse[hidden] { display: none; }
.dverse__card { position: relative; margin: auto; width: 100%; max-width: 380px; border-radius: 22px; padding: 30px 24px 22px;
  background: radial-gradient(120% 90% at 50% 0%, #FBF4E9 0%, #fff 60%); box-shadow: 0 24px 60px rgba(0,0,0,.4);
  border: 1px solid rgba(212,165,116,.4); text-align: center; animation: dvIn .4s var(--ease); }
@keyframes dvIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.dverse__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(26,58,82,.06); color: var(--gray); display: grid; place-items: center; }
.dverse__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 14px; }
.dverse__text { font-family: var(--font-head); font-size: 21px; line-height: 1.4; color: var(--navy); font-style: italic; }
.dverse__ref { margin-top: 12px; font-weight: 700; color: var(--terracotta); font-size: 14px; }
.dverse__listen { display: inline-flex; align-items: center; gap: 7px; margin: 14px auto 0;
  padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--terracotta);
  background: rgba(201,112,100,.08); color: var(--terracotta); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform .12s var(--ease), background .15s var(--ease); }
.dverse__listen:active { transform: scale(.96); }
.dverse__listen--playing { background: var(--terracotta); color: #fff; }
.dverse__listen[hidden] { display: none; }
.dverse__note { margin: 16px 0 20px; font-size: 13.5px; color: var(--gray); line-height: 1.5; }
.dverse__claim { width: 100%; }
.dverse__claim:disabled { opacity: .55; }
.dverse__streak { margin-top: 12px; font-size: 12.5px; color: var(--gray); }
[data-theme="dark"] .dverse__card { background: radial-gradient(120% 90% at 50% 0%, #22333f 0%, #1b2c3a 60%); border-color: rgba(212,165,116,.3); }
[data-theme="dark"] .dverse__text { color: #EAF0F5; }
[data-theme="dark"] .dverse__close { background: rgba(255,255,255,.08); }

/* ── Превью заблокированной игры ── */
.gpv { position: fixed; inset: 0; z-index: 96; background: rgba(20,35,47,.6); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; overflow-y: auto; padding: 20px; }
.gpv[hidden] { display: none; }
.gpv__card { position: relative; margin: auto; width: 100%; max-width: 360px; border-radius: 22px; padding: 30px 24px 22px;
  background: radial-gradient(120% 80% at 50% 0%, #FBF4E9 0%, #fff 55%); box-shadow: 0 24px 60px rgba(0,0,0,.4);
  border: 1px solid rgba(212,165,116,.4); text-align: center; animation: dvIn .35s var(--ease); }
.gpv__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(26,58,82,.06); color: var(--gray); display: grid; place-items: center; }
.gpv__icon { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg,#E6C079,#D4A574 60%,#C97064); box-shadow: 0 8px 22px rgba(212,165,116,.4); }
.gpv__badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 11px; border-radius: 20px; margin-bottom: 8px; }
.gpv__badge--plus { background: rgba(212,165,116,.2); color: #b07d3d; }
.gpv__badge--soon { background: rgba(26,58,82,.08); color: var(--gray); }
.gpv__name { font-family: var(--font-head); font-size: 23px; font-weight: 800; color: var(--navy); }
.gpv__desc { font-size: 14px; color: var(--gray); line-height: 1.5; margin: 8px 0 14px; }
.gpv__list { list-style: none; text-align: left; margin: 0 auto 20px; max-width: 280px; display: flex; flex-direction: column; gap: 8px; }
.gpv__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--navy); }
.gpv__list li::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--gold); }
.gpv__cta { width: 100%; }
.gpv__cta:disabled { opacity: .55; }
.gpv__note { margin-top: 11px; font-size: 12px; color: var(--gray); line-height: 1.5; }
[data-theme="dark"] .gpv__card { background: radial-gradient(120% 80% at 50% 0%, #22333f 0%, #1b2c3a 55%); border-color: rgba(212,165,116,.3); }
[data-theme="dark"] .gpv__name, [data-theme="dark"] .gpv__list li { color: #EAF0F5; }
[data-theme="dark"] .gpv__close { background: rgba(255,255,255,.08); }

/* ── Кто это? ── */
.who-clues { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 14px; }
.who-clue { background: #fff; border-radius: var(--radius-card); padding: 14px 16px; font-size: 15px; color: var(--navy);
  box-shadow: 0 1px 4px rgba(26,58,82,.05); border-left: 3px solid var(--gold); animation: dvIn .3s var(--ease); }
.who-clue__n { font-size: 11px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 3px; }
.who-more { width: 100%; margin-bottom: 16px; }
.who-more:disabled { opacity: .5; }
.who-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.who-opt { padding: 15px 12px; border-radius: 14px; font-size: 14px; font-weight: 600; background: #fff;
  border: 1.5px solid rgba(26,58,82,.12); color: var(--navy); box-shadow: 0 2px 6px rgba(26,58,82,.05);
  transition: transform .12s var(--ease); }
.who-opt:active { transform: scale(.98); }
.who-opt--right { background: rgba(123,198,122,.16); border-color: var(--success); }
.who-opt--wrong { background: rgba(212,106,106,.12); border-color: var(--error); }
[data-theme="dark"] .who-clue, [data-theme="dark"] .who-opt, [data-theme="dark"] .det-clue { background: #1b2c3a; color: #E7EDF3; border-color: rgba(255,255,255,.09); }

/* ── Хронология ── */
.chrono-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; }
.chrono-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--radius-card);
  padding: 13px 14px; box-shadow: 0 1px 4px rgba(26,58,82,.06); border: 1.5px solid rgba(26,58,82,.08); }
.chrono-item--ok { border-color: var(--success); background: rgba(123,198,122,.1); }
.chrono-item--bad { border-color: var(--error); background: rgba(212,106,106,.08); }
.chrono-item__grip { color: var(--gray); flex: 0 0 auto; }
.chrono-item__body { flex: 1; min-width: 0; }
.chrono-item__title { font-weight: 700; font-size: 14px; color: var(--navy); }
.chrono-item__ord { font-size: 11.5px; color: var(--gray); margin-top: 1px; }
.chrono-item__moves { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.chrono-move { width: 30px; height: 24px; border-radius: 7px; background: rgba(26,58,82,.06); color: var(--navy);
  display: grid; place-items: center; }
.chrono-move:disabled { opacity: .3; }
.chrono-check { width: 100%; }
.chrono-result { margin-top: 12px; text-align: center; font-weight: 700; font-size: 14px; min-height: 20px; }
[data-theme="dark"] .chrono-item { background: #1b2c3a; border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .chrono-item__title { color: #E7EDF3; }
[data-theme="dark"] .chrono-move { background: rgba(255,255,255,.08); color: #E7EDF3; }

/* ── Родительский отчёт за неделю (УЛ2) ── */
.wreport { background: linear-gradient(160deg,#fff,#FBF4E9); border: 1px solid rgba(212,165,116,.4);
  border-radius: var(--radius-card); padding: 16px; box-shadow: 0 1px 4px rgba(26,58,82,.05); }
.wreport__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wreport__ava { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.wreport__ava img { width: 100%; height: 100%; object-fit: cover; }
.wreport__who { font-weight: 700; font-size: 14px; color: var(--navy); }
.wreport__range { font-size: 11.5px; color: var(--gray); }
.wreport__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.wstat { background: rgba(255,255,255,.7); border-radius: 10px; padding: 10px 6px; text-align: center; }
.wstat__num { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--terracotta); }
.wstat__num small { font-size: 12px; font-weight: 700; }
.wstat__lbl { font-size: 10.5px; color: var(--gray); margin-top: 2px; line-height: 1.2; }
.wstat__up { color: var(--success); } .wstat__down { color: var(--error); }
.wreport__dyn { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--navy);
  background: rgba(255,255,255,.7); border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.wreport__dyn b { color: var(--terracotta); }
.wreport__tips-t { font-size: 12px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.wtip { display: flex; gap: 10px; padding: 10px 0; font-size: 13px; color: var(--navy); line-height: 1.45; }
.wtip + .wtip { border-top: 1px solid rgba(26,58,82,.06); }
.wtip__ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  color: var(--gold); background: rgba(212,165,116,.16); }
.wreport__foot { margin-top: 12px; font-size: 11.5px; color: var(--gray); text-align: center; line-height: 1.45; }
[data-theme="dark"] .wreport { background: linear-gradient(160deg,#22333f,#2d2a20); border-color: rgba(212,165,116,.3); }
[data-theme="dark"] .wstat, [data-theme="dark"] .wreport__dyn { background: rgba(255,255,255,.06); }
[data-theme="dark"] .wreport__who, [data-theme="dark"] .wtip, [data-theme="dark"] .wreport__dyn { color: #E7EDF3; }

/* ── Семейный квест (УЛ3) ── */
.fq-head { text-align: center; padding: 6px 0 16px; }
.fq-head__badge { width: 66px; height: 66px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg,#9B7AD4,#C97064); box-shadow: 0 8px 22px rgba(155,122,212,.35); transition: transform .3s var(--ease); }
.fq-head__badge--done { background: linear-gradient(150deg,#E6C079,#D4A574); box-shadow: 0 8px 22px rgba(212,165,116,.45); }
.fq-head__title { font-family: var(--font-head); font-size: 23px; font-weight: 800; color: var(--navy); }
.fq-head__sub { font-size: 13px; color: var(--gray); margin-top: 4px; }
.fq-bar { height: 8px; border-radius: 6px; background: rgba(26,58,82,.1); margin: 14px auto 6px; max-width: 240px; overflow: hidden; }
.fq-bar__fill { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg,#9B7AD4,#D4A574); transition: width .5s var(--ease); }
.fq-count { font-size: 12.5px; color: var(--gray); }
.fq-tasks { display: flex; flex-direction: column; gap: 10px; }
.fq-task { display: flex; align-items: center; gap: 13px; background: #fff; border-radius: var(--radius-card);
  padding: 14px 15px; box-shadow: 0 1px 4px rgba(26,58,82,.05); border: 1.5px solid rgba(26,58,82,.07); text-align: left; width: 100%; }
.fq-task--done { border-color: var(--success); background: rgba(123,198,122,.08); }
.fq-task__check { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(26,58,82,.2);
  display: grid; place-items: center; color: #fff; transition: all .2s var(--ease); }
.fq-task--done .fq-task__check { background: var(--success); border-color: var(--success); }
.fq-task__body { flex: 1; min-width: 0; }
.fq-task__day { font-size: 11px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .4px; }
.fq-task__text { font-size: 14px; color: var(--navy); line-height: 1.35; margin-top: 2px; }
.fq-task--done .fq-task__text { color: var(--gray); }
.fq-note { margin: 18px 2px 4px; font-size: 12.5px; color: var(--gray); line-height: 1.5; text-align: center; }
[data-theme="dark"] .fq-task { background: #1b2c3a; border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .fq-task--done { background: rgba(123,198,122,.1); }
[data-theme="dark"] .fq-task__text { color: #E7EDF3; }
[data-theme="dark"] .fq-head__title { color: #F2F6FA; }

/* ── Задать вопрос · тёплый помощник ── */
.ask-tile { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; margin: 4px 0 8px;
  background: linear-gradient(120deg,#F3ECFB,#FBF4E9); border: 1px solid rgba(155,122,212,.4);
  border-radius: var(--radius-card); padding: 14px 15px; box-shadow: 0 2px 10px rgba(155,122,212,.14); }
.ask-tile__ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg,#9B7AD4,#C97064); }
.ask-tile__body { flex: 1; min-width: 0; }
.ask-tile__name { font-weight: 700; font-size: 15px; color: var(--navy); }
.ask-tile__desc { font-size: 12px; color: var(--gray); margin-top: 2px; line-height: 1.35; }
.ask-tile__go { color: #9B7AD4; flex: 0 0 auto; }

[data-screen="ask"] { display: none; }
[data-screen="ask"].screen--active { display: flex; flex-direction: column;
  min-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top) - 24px); }
.ask-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(26,58,82,.08); margin-bottom: 12px; }
.ask-top__who { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #9B7AD4; }
.ask-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.ask-msg { max-width: 82%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; animation: dvIn .3s var(--ease); }
.ask-msg--bot { align-self: flex-start; background: #fff; color: var(--navy); border-bottom-left-radius: 5px; box-shadow: 0 1px 3px rgba(26,58,82,.07); }
.ask-msg--me { align-self: flex-end; background: linear-gradient(135deg,#C97064,#b55f54); color: #fff; border-bottom-right-radius: 5px; }
.ask-msg--care { border: 1px solid var(--gold); background: #FBF4E9; }
.ask-msg__ref { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--terracotta); }
.ask-suggest { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.ask-suggest::-webkit-scrollbar { display: none; }
.ask-chip { flex: 0 0 auto; padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--navy);
  background: #fff; border: 1.5px solid rgba(155,122,212,.35); white-space: nowrap; }
.ask-input { display: flex; gap: 8px; padding-top: 10px; padding-bottom: calc(4px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(26,58,82,.08); }
.ask-input input { flex: 1; border: 1.5px solid rgba(26,58,82,.14); border-radius: 22px; padding: 11px 16px;
  outline: none; background: #fff; color: var(--navy); font-family: inherit; font-size: 14px; }
.ask-input input:focus { border-color: #9B7AD4; }
.ask-send { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg,#9B7AD4,#C97064); }
[data-theme="dark"] .ask-tile { background: linear-gradient(120deg,#2a2440,#2d2a20); border-color: rgba(155,122,212,.4); }
[data-theme="dark"] .ask-tile__name { color: #EAF0F5; }
[data-theme="dark"] .ask-top, [data-theme="dark"] .ask-input { border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .ask-msg--bot { background: #1b2c3a; color: #E7EDF3; }
[data-theme="dark"] .ask-msg--care { background: #2d2a20; }
[data-theme="dark"] .ask-input input, [data-theme="dark"] .ask-chip { background: #1b2c3a; color: #E7EDF3; border-color: rgba(255,255,255,.12); }

/* ── Добавить ребёнка ── */
.addk { position: fixed; inset: 0; z-index: 96; background: rgba(20,35,47,.6); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; overflow-y: auto; padding: 20px; }
.addk[hidden] { display: none; }
.addk__card { position: relative; margin: auto; width: 100%; max-width: 360px; border-radius: 22px; padding: 26px 22px 22px;
  background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.4); animation: dvIn .35s var(--ease); }
.addk__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(26,58,82,.06); color: var(--gray); display: grid; place-items: center; }
.addk__title { font-family: var(--font-head); font-size: 21px; font-weight: 800; color: var(--navy); margin-bottom: 16px; text-align: center; }
.addk__lbl { display: block; font-size: 12px; font-weight: 700; color: var(--gray); margin: 12px 0 6px; }
.addk__input { width: 100%; border: 1.5px solid rgba(26,58,82,.14); border-radius: 12px; padding: 12px 14px;
  outline: none; background: #fff; color: var(--navy); font-family: inherit; font-size: 15px; }
.addk__input:focus { border-color: var(--gold); }
.addk__age { display: flex; align-items: center; gap: 14px; }
.addk__age > span:first-of-type, .addk__age #addkAge { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--navy); min-width: 28px; text-align: center; }
.addk__age-btn { width: 40px; height: 40px; border-radius: 12px; background: rgba(26,58,82,.06); color: var(--navy); font-size: 22px; font-weight: 700; display: grid; place-items: center; }
.addk__age-note { font-size: 13px; color: var(--gray); }
.addk__avatars { display: flex; gap: 12px; }
.addk__ava { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 3px solid transparent; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 20px; }
.addk__ava img { width: 100%; height: 100%; object-fit: cover; }
.addk__ava--on { border-color: var(--gold); box-shadow: 0 2px 10px rgba(212,165,116,.35); }
.addk__save { width: 100%; margin-top: 20px; }
[data-theme="dark"] .addk__card { background: #1b2c3a; }
[data-theme="dark"] .addk__title { color: #F2F6FA; }
[data-theme="dark"] .addk__input, [data-theme="dark"] .addk__age-btn { background: #22333f; color: #E7EDF3; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .addk__age #addkAge { color: #E7EDF3; }
[data-theme="dark"] .addk__close { background: rgba(255,255,255,.08); }

/* ── Автономный режим (УЛ6) ── */
.offbar { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); z-index: 60;
  width: calc(100% - 32px); max-width: calc(var(--max-w) - 32px);
  display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 14px;
  background: linear-gradient(135deg,#1A3A52,#2c4f6b); color: #fff; font-size: 12.5px; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(16,34,47,.4); opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.offbar span[data-icon] { color: var(--gold); flex: 0 0 auto; }
.offbar[hidden] { display: none; }
.offbar--on { opacity: 1; transform: translateX(-50%) translateY(0); }
body.no-nav .offbar { bottom: calc(env(safe-area-inset-bottom) + 14px); }

/* ── Годовой альбом (УЛ7) ── */
.alb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.alb-dl { display: inline-flex; align-items: center; gap: 7px; background: var(--terracotta); color: #fff; font-weight: 700;
  font-size: 13.5px; padding: 9px 16px; border-radius: 22px; }
.alb-pages { display: flex; flex-direction: column; gap: 16px; }
.alb-page { border-radius: 16px; padding: 24px 20px; position: relative; overflow: hidden;
  box-shadow: 0 4px 16px rgba(26,58,82,.1); }
.alb-page--cover { background: linear-gradient(160deg,#1A3A52,#2c4f6b 70%,#C97064); color: #fff; text-align: center; padding: 40px 22px; }
.alb-cover__eyebrow { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.alb-cover__title { font-family: var(--font-head); font-size: 32px; font-weight: 800; margin: 12px 0; line-height: 1.15; }
.alb-cover__fam { font-size: 15px; opacity: .92; }
.alb-cover__year { margin-top: 18px; display: inline-block; padding: 6px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 20px; font-size: 13px; }
.alb-cover__dove { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: var(--gold); }
.alb-page--light { background: linear-gradient(160deg,#fff,#FBF4E9); }
.alb-page__t { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.alb-page__sub { font-size: 12.5px; color: var(--gray); margin-bottom: 16px; }
.alb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alb-stat { background: rgba(255,255,255,.7); border-radius: 12px; padding: 14px; text-align: center; }
.alb-stat__n { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--terracotta); }
.alb-stat__l { font-size: 12px; color: var(--gray); margin-top: 2px; }
.alb-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.alb-badge { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px; }
.alb-badge__ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg,#E6C079,#D4A574); }
.alb-badge__n { font-size: 10.5px; color: var(--navy); text-align: center; line-height: 1.2; }
.alb-quests { display: flex; flex-direction: column; gap: 8px; }
.alb-quest { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--navy); }
.alb-quest__ic { color: var(--success); flex: 0 0 auto; }
.alb-note { margin: 18px 2px 6px; font-size: 12px; color: var(--gray); text-align: center; line-height: 1.5; }
[data-theme="dark"] .alb-page--light { background: linear-gradient(160deg,#1b2c3a,#22333f); }
[data-theme="dark"] .alb-page__t, [data-theme="dark"] .alb-badge__n, [data-theme="dark"] .alb-quest { color: #E7EDF3; }
[data-theme="dark"] .alb-stat { background: rgba(255,255,255,.06); }

/* ── Мягкая монетизация: желания ребёнка (УЛ9) ── */
.gpv__wish { width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px; border-radius: 22px; font-weight: 700; font-size: 14px; color: #9B7AD4;
  background: rgba(155,122,212,.1); border: 1.5px solid rgba(155,122,212,.35); }
.gpv__wish[hidden] { display: none; }
.gpv__wish span[data-icon] { color: #C97064; }
.wishes { display: flex; flex-direction: column; gap: 10px; }
.wish { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg,#fff,#F3ECFB);
  border: 1px solid rgba(155,122,212,.35); border-radius: var(--radius-card); padding: 12px 14px; }
.wish__ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg,#9B7AD4,#C97064); }
.wish__body { flex: 1; min-width: 0; }
.wish__name { font-weight: 700; font-size: 14px; color: var(--navy); }
.wish__note { font-size: 12px; color: var(--gray); margin-top: 1px; }
.wish__cta { flex: 0 0 auto; padding: 8px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg,#D4A574,#C97064); }
[data-theme="dark"] .wish { background: linear-gradient(120deg,#1b2c3a,#2a2440); border-color: rgba(155,122,212,.4); }
[data-theme="dark"] .wish__name { color: #EAF0F5; }

/* ── Стать партнёром / Поддержать школу (правки Екатерины) ── */
.menu-item--partner { color: #3a7ca5; font-weight: 600; }
.menu-item--partner span[data-icon] { color: #3a7ca5; }
.donate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.donate-amt { padding: 18px 10px; border-radius: var(--radius-card); font-family: var(--font-head); font-weight: 800; font-size: 20px;
  color: var(--navy); background: linear-gradient(150deg,#fff,#FBF4E9); border: 1.5px solid rgba(212,165,116,.4); }
.donate-amt--on { border-color: var(--terracotta); background: linear-gradient(150deg,#fff,#FBEEEC); color: var(--terracotta); box-shadow: 0 4px 14px rgba(201,112,100,.2); }
.donate-amt small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--gray); margin-top: 2px; }
.donate-custom { margin-bottom: 4px; }
[data-theme="dark"] .donate-amt { background: linear-gradient(150deg,#1b2c3a,#22333f); color: #E7EDF3; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .donate-amt--on { border-color: var(--terracotta); color: var(--terracotta); }

/* ── Живые уроки: цветные плитки-номера по блокам (правка Екатерины #2) ── */
.lesson-item__num { border-radius: 13px; color: #fff; }
.lesson-item--locked.lesson-item--b1 .lesson-item__num { background: linear-gradient(150deg,#E7A98F,#C97064); opacity:.9; }
.lesson-item--locked.lesson-item--b2 .lesson-item__num { background: linear-gradient(150deg,#8FBEE0,#4d7ea3); opacity:.9; }
.lesson-item--locked.lesson-item--b3 .lesson-item__num { background: linear-gradient(150deg,#EBCE92,#D4A574); opacity:.9; }
.lesson-item--locked .lesson-item__num { color:#fff; }
.lesson-item--exam.lesson-item--locked .lesson-item__num { background: linear-gradient(150deg,#E6C079,#C97064) !important; opacity:1; }

/* ── Иллюстрации к урокам (правка Екатерины #2) ── */
.lesson-item__thumb { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 2px 8px rgba(26,58,82,.12); }
.lesson-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lesson-item__badge { position: absolute; left: 4px; top: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: rgba(26,58,82,.78); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lesson-item--locked.lesson-item--img .lesson-item__thumb img { filter: saturate(.9) brightness(.98); }
.lesson-item--locked.lesson-item--img { opacity: 1; }
.lesson-item--open.lesson-item--img .lesson-item__thumb { box-shadow: 0 0 0 2px var(--terracotta), 0 2px 8px rgba(201,112,100,.3); }

/* ── Картинка к стиху дня (правка Екатерины #7) ── */
.dverse__img { display: block; width: 100%; height: 130px; object-fit: cover; border-radius: 16px; margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(26,58,82,.18); }

/* ── Обложка книги с иллюстрацией (правка Екатерины #8) ── */
.book-cover--img { position: relative; border-radius: 18px; overflow: hidden; min-height: 340px;
  display: flex; align-items: flex-end; box-shadow: 0 10px 30px rgba(26,58,82,.28); }
.book-cover__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book-cover__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,35,47,.85) 0%, rgba(20,35,47,.35) 45%, rgba(20,35,47,0) 75%); }
.book-cover__inner { position: relative; padding: 22px 22px 24px; color: #fff; text-align: left; width: 100%; }
.book-cover__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.book-cover--img .book-cover__title { font-family: var(--font-head); font-size: 40px; font-weight: 800; letter-spacing: 2px; line-height: 1; color: #fff; }
.book-cover--img .book-cover__sub { font-size: 15px; opacity: .92; margin-top: 6px; color: #fff; }
.book-cover--img .book-cover__author { font-size: 13.5px; margin-top: 14px; color: var(--gold); font-style: italic; }

/* ── Магазин за баллы (идея Екатерины) ── */
.shop-head { text-align: center; padding: 8px 0 16px; }
.shop-head__label { font-size: 12.5px; color: var(--gray); }
.shop-head__xp { font-family: var(--font-head); font-weight: 800; font-size: 34px; color: var(--terracotta);
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0; }
.shop-head__xp span[data-icon] { color: var(--gold); }
.shop-head__note { font-size: 12.5px; color: var(--gray); max-width: 32ch; margin: 4px auto 0; line-height: 1.5; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shop-card { background: linear-gradient(160deg,#fff,#FBF4E9); border: 1px solid rgba(212,165,116,.3);
  border-radius: var(--radius-card); padding: 16px 12px; text-align: center; box-shadow: 0 2px 8px rgba(201,112,100,.08); }
.shop-card__ic { width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 16px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg,#E6A15C,#C97064); }
.shop-card__name { font-weight: 700; font-size: 13.5px; color: var(--navy); }
.shop-card__cost { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--terracotta); margin: 6px 0 10px; }
.shop-card__btn { width: 100%; padding: 9px; border-radius: 20px; font-weight: 700; font-size: 12.5px; color: #fff;
  background: linear-gradient(135deg,#D4A574,#C97064); }
.shop-card__btn:disabled { background: rgba(26,58,82,.12); color: var(--gray); }
.shop-card--locked { opacity: .75; }
[data-theme="dark"] .shop-card { background: linear-gradient(160deg,#1b2c3a,#22333f); border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .shop-card__name { color: #E7EDF3; }

/* ── Три в ряд: Дары Духа ── */
.m3-bar { height: 8px; border-radius: 6px; background: rgba(26,58,82,.1); overflow: hidden; margin: 0 0 12px; }
.m3-bar__fill { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg,#D4A574,#C97064); transition: width .3s var(--ease); }
.m3-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; touch-action: manipulation; }
.m3-cell { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; color: #fff;
  transition: transform .12s var(--ease), opacity .18s var(--ease); }
.m3-cell--on { outline: 3px solid var(--navy); outline-offset: -3px; transform: scale(.92); }
.m3-cell--clear { opacity: 0; transform: scale(.4); }
.m3-hint { margin: 14px 2px 0; font-size: 12.5px; color: var(--gray); text-align: center; line-height: 1.5; }
[data-theme="dark"] .m3-bar { background: rgba(255,255,255,.12); }
[data-theme="dark"] .m3-cell--on { outline-color: #fff; }

/* ── Давид и Голиаф ── */
.david-stage { margin-top: 4px; }
.david-goliath { position: relative; height: 190px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg,#cfe0ee 0%,#eef4d9 100%); display: grid; place-items: center; }
.david-goliath__fig { width: 96px; height: 96px; border-radius: 22px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(160deg,#5a6b7a,#3a4a58); box-shadow: 0 10px 24px rgba(26,58,82,.28);
  transition: transform .18s var(--ease); }
.david-goliath__fig--hit { transform: scale(.86) rotate(-6deg); background: linear-gradient(160deg,#C97064,#a8564b); }
.david-target { position: absolute; top: 26px; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--terracotta); display: grid; place-items: center; }
.david-target__zone { width: 10px; height: 10px; border-radius: 50%; background: var(--terracotta); }
.david-bar { position: relative; height: 26px; border-radius: 13px; margin: 16px 0 18px;
  background: rgba(26,58,82,.1); overflow: hidden; }
.david-bar__zone { position: absolute; top: 0; bottom: 0; border-radius: 8px;
  background: linear-gradient(90deg,#D4A574,#e0b980); box-shadow: inset 0 0 0 1px rgba(212,165,116,.6); }
.david-bar__marker { position: absolute; top: -3px; bottom: -3px; width: 5px; margin-left: -2px;
  border-radius: 3px; background: var(--navy); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.david-fire { width: 100%; }
.david-hint { margin: 14px 2px 0; font-size: 12.5px; color: var(--gray); text-align: center; line-height: 1.5; }
[data-theme="dark"] .david-goliath { background: linear-gradient(180deg,#25313d 0%,#2c3a30 100%); }
[data-theme="dark"] .david-bar { background: rgba(255,255,255,.12); }
[data-theme="dark"] .david-bar__marker { background: #fff; }

/* ── Исход: собери манну ── */
.exodus-bar { height: 8px; border-radius: 6px; background: rgba(26,58,82,.1); overflow: hidden; margin: 0 0 12px; }
.exodus-bar__fill { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg,#D4A574,#7AAED4); transition: width .25s var(--ease); }
.exodus-field { position: relative; height: 340px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg,#f3ead6 0%,#e7dcc2 100%); touch-action: manipulation; }
.exodus-start { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; padding: 24px; }
.exodus-start__ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin: 0 auto;
  color: #fff; background: linear-gradient(160deg,#D4A574,#C97064); box-shadow: 0 10px 24px rgba(201,112,100,.3); }
.exodus-start__t { font-size: 13px; color: var(--navy); line-height: 1.55; max-width: 260px; }
.exodus-item { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; border: none; cursor: pointer;
  transition: transform .12s var(--ease), opacity .18s var(--ease); animation: exodusPop .18s var(--ease); }
.exodus-item--manna { background: radial-gradient(circle at 40% 35%,#eecf94,#D4A574); box-shadow: 0 4px 12px rgba(212,165,116,.5); }
.exodus-item--stone { background: radial-gradient(circle at 40% 35%,#8a94a0,#5a6b7a); box-shadow: 0 4px 12px rgba(26,58,82,.35); }
.exodus-item--gone { opacity: 0; transform: scale(.3); }
.exodus-item:active { transform: scale(.86); }
@keyframes exodusPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.exodus-hint { margin: 14px 2px 0; font-size: 12.5px; color: var(--gray); text-align: center; line-height: 1.5; }
[data-theme="dark"] .exodus-bar { background: rgba(255,255,255,.12); }
[data-theme="dark"] .exodus-field { background: linear-gradient(180deg,#2a2620 0%,#221f1a 100%); }
[data-theme="dark"] .exodus-start__t { color: #E7EDF3; }

/* ── Ноев Ковчег ── */
.ark-flood { position: relative; height: 8px; border-radius: 6px; overflow: hidden; margin: 0 0 12px; background: rgba(122,174,212,.18); }
.ark-flood__water { width: 100%; height: 0%;
  background: linear-gradient(90deg,#7AAED4,#4d7fae); transition: height .9s linear; }
.ark-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; touch-action: manipulation; }
.ark-card { aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; color: #fff; border: none;
  background: var(--ac, #7AAED4); box-shadow: 0 4px 10px rgba(26,58,82,.14); cursor: pointer;
  transition: transform .14s var(--ease), opacity .3s var(--ease); }
.ark-card--img { padding: 0; overflow: hidden; background: #fff; border: 2px solid var(--ac, #7AAED4); }
.ark-card--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; display: block; }
.ark-card--on { outline: 3px solid var(--navy); outline-offset: -3px; transform: scale(.92); }
.ark-card--miss { animation: arkShake .4s var(--ease); }
.ark-card--done { opacity: 0; transform: scale(.4); pointer-events: none; }
@keyframes arkShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ark-hint { margin: 14px 2px 0; font-size: 12.5px; color: var(--gray); text-align: center; line-height: 1.5; }
[data-theme="dark"] .ark-flood { background: rgba(122,174,212,.2); }
[data-theme="dark"] .ark-card--on { outline-color: #fff; }

/* ══════════ ДОСТУПНОСТЬ (a11y-аудит) ══════════ */
/* Видимый фокус с клавиатуры на всех интерактивных элементах */
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; border-radius: 4px; }
[data-theme="dark"] :focus-visible { outline-color: var(--gold); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--terracotta); outline-offset: 1px; }

/* Тач-таргеты в шапке — не меньше 40px */
.header__bell { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.header__avatar { min-width: 40px; min-height: 40px; }

/* Неактивные табы нижней навигации — читаемее (контраст) */
.nav__tab { color: #5a6577; }

/* Золотой ТЕКСТ (мелкий) — темнее для читаемости; крупный золотой декор не трогаем */
.quote-ref, .verse-ref, .reader cite, .sv-text__ref, .det-clue__n, .dev-head__day,
.who-clue__n, .fq-task__day, .dverse__eyebrow, .alb-cover__eyebrow { color: #a9762f; }
[data-theme="dark"] .quote-ref, [data-theme="dark"] .verse-ref, [data-theme="dark"] .reader cite,
[data-theme="dark"] .sv-text__ref, [data-theme="dark"] .det-clue__n, [data-theme="dark"] .dev-head__day,
[data-theme="dark"] .who-clue__n, [data-theme="dark"] .fq-task__day, [data-theme="dark"] .dverse__eyebrow,
[data-theme="dark"] .alb-cover__eyebrow { color: #e0b878; }

/* Уважение prefers-reduced-motion для всех навязчивых анимаций */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .spinner { animation: none !important; opacity: .8; }
}

/* ══════════ ШЛИФОВКА ПО АУДИТУ (визуал + тач) ══════════ */
/* Тёмная тема: значки, цитата, кнопка стиха, золотая кнопка */
[data-theme="dark"] .badge-card { background: #1b2c3a; }
[data-theme="dark"] .badge-card__name { color: #EAF0F5; }
[data-theme="dark"] .feed-card--quote .feed-card__title { color: #f4ead6; }
[data-theme="dark"] .feed-card--quote .feed-card__label { color: #e0b878; }
[data-theme="dark"] .btn--outline-gold { color: #f0dcae; background: rgba(212,165,116,.14); }
[data-theme="dark"] .today__verse { color: #f0dcae; }
[data-theme="dark"] .lesson-text, [data-theme="dark"] .lesson-text p { color: #d9e2e9; }
[data-theme="dark"] .temple__note, [data-theme="dark"] .feed-card__meta,
[data-theme="dark"] .feed-card__text { color: #aebcc7; }

/* Тач-таргеты ≥40px без сдвига вёрстки */
.child-back { min-height: 40px; padding: 8px 6px 8px 0; margin: -6px 0 8px 0; }
.feed-card__actions button { padding: 8px 6px; margin: -4px 0; min-height: 38px; }
.ghub-tab { min-height: 40px; }
.ev__btn { min-height: 40px; }
.header__bell, .header__avatar { touch-action: manipulation; }

/* Карточки игр: «Играть» на одной базовой линии, без «сироты» XP */
.gcard { display: flex; flex-direction: column; }
.gcard__name { margin-top: 2px; }
.gcard__meta { text-wrap: balance; }
.gcard--play::after { margin-top: auto; padding-top: 8px; }

/* Книга: «Читать» — акцентный терракотовый (было зелёное) */
.toc-item__read { color: var(--terracotta); }

/* Читалка: длинный заголовок в одну строку */
.reader-head__title, #readerTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Чаты: тёплая подсказка вместо пустоты снизу */
.chats-hint { margin: 22px 8px 0; padding: 18px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 8px; color: var(--gray); }
.chats-hint .ic { color: var(--blue); opacity: .7; }
.chats-hint p { font-size: 13px; line-height: 1.55; max-width: 32ch; margin: 0; }

/* ══════════ КНОПКИ «ГОЛОС ЕКАТЕРИНЫ» ══════════ */
.lesson-voice, .onb__greet {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px 0 4px; padding: 10px 16px; border-radius: 999px;
  background: linear-gradient(135deg, var(--terracotta), #b85f54); color: #fff;
  font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(201,112,100,.28);
  transition: transform .12s var(--ease);
}
.lesson-voice { width: 100%; justify-content: center; }
.lesson-voice:active, .onb__greet:active { transform: scale(.97); }
.lesson-voice__ic, .lesson-voice [data-icon], .onb__greet [data-icon] { color: #fff; }
.lesson-voice--playing { animation: voicePulse 1s var(--ease) infinite; }
@keyframes voicePulse { 50% { box-shadow: 0 4px 20px rgba(201,112,100,.55); } }
.reward__voice {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px auto 10px;
  padding: 8px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(201,112,100,.14); color: var(--terracotta);
}
.reward__voice [data-icon] { color: var(--terracotta); }
.cert-view__voice {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(212,165,116,.9); color: var(--navy);
}
.cert-view__voice [data-icon] { color: var(--navy); }

/* «Пригласить семью» — тёплый акцент (маркетинг/виральность) */
.menu-item--invite { color: var(--terracotta); font-weight: 600; }
.menu-item--invite [data-icon] { color: var(--terracotta); }
.menu-item--invite .menu-item__tag { background: rgba(201,112,100,.16); color: var(--terracotta); }
/* В тёмной теме золото на тёмном читается плохо, берём светлое золото. */
[data-theme="dark"] .menu-item__tag { background: rgba(212,165,116,.16); color: #e0bb85; }
[data-theme="dark"] .menu-item--invite { color: #e79b90; }
[data-theme="dark"] .menu-item--invite [data-icon] { color: #e79b90; }

/* ══════════ О ШКОЛЕ (миссия/маркетинг) ══════════ */
.about-hero { position: relative; border-radius: var(--radius-modal); overflow: hidden; aspect-ratio: 16/10;
  margin-bottom: 16px; box-shadow: 0 10px 26px rgba(26,58,82,.18); }
.about-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,58,82,.86), rgba(26,58,82,.25) 60%, rgba(26,58,82,.15)); }
.about-hero__inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; color: #fff; }
.about-hero__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #ffe0a0; }
.about-hero__title { font-family: var(--font-head); font-size: 30px; font-weight: 800; margin: 4px 0 2px; letter-spacing: .04em; }
.about-hero__sub { font-family: var(--font-head); font-style: italic; font-size: 14px; opacity: .92; }
.about-mission { display: flex; gap: 14px; align-items: flex-start; }
.about-mission__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(160deg, var(--gold), var(--terracotta)); box-shadow: 0 6px 16px rgba(201,112,100,.3); }
.about-mission p { font-size: 14.5px; line-height: 1.6; color: var(--navy); margin: 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.about-item { background: #fff; border: 1px solid rgba(212,165,116,.3); border-radius: 16px; padding: 14px;
  box-shadow: 0 2px 8px rgba(26,58,82,.05); }
.about-item__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 8px;
  color: #fff; background: linear-gradient(160deg, #E6A15C, #C97064); }
.about-item:nth-child(2n) .about-item__ic { background: linear-gradient(160deg, #E6C079, #D4A574); }
.about-item:nth-child(3n) .about-item__ic { background: linear-gradient(160deg, #7AAED4, #4d7ea3); }
.about-item__t { font-weight: 700; font-size: 14px; color: var(--navy); margin-bottom: 3px; }
.about-item__d { font-size: 12px; line-height: 1.45; color: var(--gray); }
.about-founder { display: flex; gap: 14px; align-items: center; margin-top: 16px;
  background: linear-gradient(135deg, #FFF6E9, #FBEBD6); border: 1.5px solid var(--gold); }
.about-founder__img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(26,58,82,.15); }
.about-founder__name { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--navy); }
.about-founder__role { font-size: 12px; color: var(--terracotta); font-weight: 600; margin-bottom: 5px; }
.about-founder__body p { font-size: 13px; line-height: 1.5; font-style: italic; color: var(--navy); margin: 0; }
[data-theme="dark"] .about-mission p, [data-theme="dark"] .about-item__t { color: #E7EDF3; }
[data-theme="dark"] .about-item { background: #232a33; border-color: rgba(212,165,116,.25); }
[data-theme="dark"] .about-founder { background: linear-gradient(135deg,#2a2118,#241c14); }
[data-theme="dark"] .about-founder__name, [data-theme="dark"] .about-founder__body p { color: #f4ead6; }

/* ══════════ ТАКТИЛЬНОСТЬ И МЯГКОЕ ПОЯВЛЕНИЕ (премиум-ощущение) ══════════ */
.chat-item, .lesson-item, .toc-item, .temple, .story, .menu-item, .set-card .switch-row {
  transition: transform .13s var(--ease), box-shadow .13s var(--ease), background-color .13s var(--ease);
}
.chat-item:active, .lesson-item:active, .toc-item:active, .temple:active, .menu-item:active {
  transform: scale(.985);
}
.story:active { transform: scale(.94); }
.feed-card, .gcard { will-change: transform; }
/* деликатное появление карточек ленты и игр — снизу вверх, со сдвигом по индексу */
@keyframes cardRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#feed > .feed-card { animation: cardRise .42s var(--ease) both; }
#feed > .feed-card:nth-child(2) { animation-delay: .05s; }
#feed > .feed-card:nth-child(3) { animation-delay: .1s; }
#feed > .feed-card:nth-child(4) { animation-delay: .15s; }
#feed > .feed-card:nth-child(n+5) { animation-delay: .18s; }
#ghub > .gcard { animation: cardRise .4s var(--ease) both; }
#ghub > .gcard:nth-child(2n) { animation-delay: .06s; }
#ghub > .gcard:nth-child(2n+1) { animation-delay: .03s; }
@media (prefers-reduced-motion: reduce) {
  #feed > .feed-card, #ghub > .gcard { animation: none; }
  .chat-item:active, .lesson-item:active, .toc-item:active, .temple:active, .menu-item:active, .story:active { transform: none; }
}

/* Уведомления кликабельны — ведут на нужный экран */
.nf { width: 100%; text-align: left; cursor: pointer; transition: transform .12s var(--ease), background-color .12s var(--ease); }
.nf:active { transform: scale(.99); }
.nf:hover { background: rgba(212,165,116,.06); }

/* ══════════════════════════════════════════════════════════════
   ПРАВКИ ЕКАТЕРИНЫ (сентябрь 2026)
   ══════════════════════════════════════════════════════════════ */

/* Заголовки жирные и без засечек, как просила Екатерина.
   Засечки остаются только там, где это книжная подача. */
.screen-title, .section-title, .feed-card__title, .block-title,
.today__eyebrow, .today__call-title, .lesson-item__title { font-weight: 700; letter-spacing: -.2px; }
.book-cover__title, .reader h2, .scripture, .quote-ref { font-family: var(--font-serif); }

/* Мелкий текст перестал быть блёклым */
.feed-card__meta, .lesson-item__meta, .chat-item__last,
.temple__note, .games-tile__desc, .gcard__meta { color: var(--gray); font-weight: 500; }

/* Активный раздел в нижнем меню видно сразу: подложка, вес, точка */
.nav__tab { position: relative; }
.nav__tab--active { color: var(--terracotta); font-weight: 700; }
.nav__tab--active span:last-child { font-weight: 700; }
.nav__tab--active::before {
  content: ''; position: absolute; inset: 2px 6px auto; height: 34px;
  border-radius: 12px; background: rgba(201,112,100,.13); z-index: -1;
}
.nav__tab--active::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px;
  margin-left: -2.5px; border-radius: 50%; background: var(--terracotta);
}
[data-theme="dark"] .nav__tab--active { color: var(--gold); }
[data-theme="dark"] .nav__tab--active::before { background: rgba(212,165,116,.16); }
[data-theme="dark"] .nav__tab--active::after { background: var(--gold); }

/* Блок «Сегодня»: следующий урок вместо созвона */
.today__next-ic { overflow: hidden; padding: 0; }
.today__next-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Карточка урока в списке: номер, картинка, отметки */
.lesson-item__thumb { position: relative; }
.lesson-item__veil {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(26,58,82,.55); backdrop-filter: saturate(.4);
}
.lesson-item__ok {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--success);
}
.lesson-item__meta--done { color: var(--success); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.lesson-item--done { border-color: rgba(123,198,122,.5); }
.lesson-item--locked { opacity: .72; }
.progress--thin { height: 5px; margin-top: 6px; }

/* Иллюстрации по ходу текста урока */
.lesson-pic { margin: 14px 0; }
.lesson-pic img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-card); display: block;
}
.lesson-pic figcaption { font-size: 12px; color: var(--gray); margin-top: 6px; text-align: center; }
.lesson-read { width: 100%; margin-top: 14px; }

/* Итог урока: сколько собрано и чего не хватает */
.lesson-final { margin: 20px 0 8px; }
.lesson-final__ok {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 18px; border-radius: var(--radius-card);
  background: linear-gradient(160deg, #F3FAF2, #E6F4E5); color: var(--navy);
}
.lesson-final__ok b { font-size: 17px; }
.lesson-final__ok span { font-size: 13px; color: var(--gray); }
.lesson-final__wait { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-card); background: #fff; border: 1px solid rgba(26,58,82,.1); }
.lesson-final__wait span { font-size: 13px; color: var(--gray); }
[data-theme="dark"] .lesson-final__wait { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .lesson-final__ok { background: linear-gradient(160deg, rgba(123,198,122,.18), rgba(123,198,122,.08)); color: #EAF3EA; }

/* ── Интерактивные задания ── */
.task-card { padding: 16px; }
.task__head { display: grid; gap: 4px; margin-bottom: 14px; }
.task__kind { font-weight: 700; font-size: 16px; color: var(--navy); }
.task__hint { font-size: 13px; color: var(--gray); }
[data-theme="dark"] .task__kind { color: #EAF0F5; }
.task__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.task__col { display: grid; gap: 8px; align-content: start; }
.task__pool { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.task__pool--grid { display: grid; grid-template-columns: 1fr 1fr; }
.task__slots { display: grid; gap: 8px; }
.tcard {
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(26,58,82,.16);
  background: #fff; color: var(--navy); transition: transform .16s var(--ease), border-color .16s, background .16s;
}
.tcard:active { transform: scale(.97); }
.tcard--wide { width: 100%; }
.tcard--big { padding: 16px 12px; text-align: center; font-size: 14px; font-weight: 600; }
.tcard--syl { font-size: 18px; font-weight: 700; padding: 12px 16px; letter-spacing: 1px; }
.tcard--sel { border-color: var(--gold); background: rgba(212,165,116,.14); }
.tcard--ok { border-color: var(--success); background: rgba(123,198,122,.16); color: #2E6B2E; }
.tcard--miss { border-color: var(--error); background: rgba(212,106,106,.12); animation: tshake .4s; }
@keyframes tshake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
[data-theme="dark"] .tcard { background: rgba(255,255,255,.06); color: #EAF0F5; border-color: rgba(255,255,255,.14); }
.tslot { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: rgba(123,198,122,.14); font-size: 13px; }
.tslot__n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.task__verse { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--navy); }
.task__verse cite { display: block; margin-top: 8px; font-size: 12px; font-style: normal; color: var(--gray); }
[data-theme="dark"] .task__verse { color: #EAF0F5; }
.task__blank { display: inline-block; min-width: 90px; padding: 0 8px; border-bottom: 2px dashed var(--gold); text-align: center; }
.task__blank--ok { border-bottom-color: var(--success); color: #2E6B2E; font-weight: 700; }
.task__built { min-height: 46px; display: grid; place-items: center; font-size: 24px; font-weight: 700; letter-spacing: 2px; color: var(--navy); border-radius: 10px; background: rgba(26,58,82,.05); }
[data-theme="dark"] .task__built { color: #EAF0F5; background: rgba(255,255,255,.07); }
.task__reset { margin-top: 10px; font: inherit; font-size: 12px; color: var(--gray); background: none; border: none; cursor: pointer; text-decoration: underline; }
/* Кроссворд: подсказка сверху, строка ответа снизу. Точки в подсказке поля
   показывают длину слова — это клетки бумажной тетради. */
.task__words { display: grid; gap: 12px; }
.tword { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(26,58,82,.04); }
.tword__q { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--navy); }
.tword__n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.tword__in {
  font: inherit; font-size: 17px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid rgba(26,58,82,.18); background: #fff; color: var(--navy);
  transition: border-color .16s, background .16s;
}
.tword__in::placeholder { letter-spacing: 6px; color: rgba(26,58,82,.28); font-weight: 400; }
.tword--ok .tword__in { border-color: var(--success); background: rgba(123,198,122,.16); color: #2E6B2E; }
.tword--miss .tword__in { border-color: var(--error); background: rgba(212,106,106,.1); }
[data-theme="dark"] .tword { background: rgba(255,255,255,.05); }
[data-theme="dark"] .tword__q { color: #EAF0F5; }
[data-theme="dark"] .tword__in { background: rgba(255,255,255,.07); color: #EAF0F5; border-color: rgba(255,255,255,.16); }
[data-theme="dark"] .tword__in::placeholder { color: rgba(255,255,255,.3); }
.task--done .task__words { opacity: .65; pointer-events: none; }

.task__res { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.task__res.pass { background: rgba(123,198,122,.18); color: #2E6B2E; }
.task__res.fail { background: rgba(212,106,106,.14); color: #9B3B3B; }
.task--done .task__pool, .task--done .task__cols { opacity: .65; pointer-events: none; }

/* ── Мой друг: питомец ── */
.pet-hero {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 3 / 2; background: linear-gradient(160deg, #FDF6EC, #F2E4D0);
  display: grid; place-items: center;
}
.pet-hero__img { width: 100%; height: 100%; object-fit: cover; }
.pet-hero__glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 90%, rgba(212,165,116,.35), transparent 65%); pointer-events: none; }
.pet-hero__mood {
  position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.92); font-size: 12px; font-weight: 700; color: var(--navy);
}
.pet-hero__name {
  position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(26,58,82,.86); color: #fff; font: inherit; font-size: 15px; font-weight: 700;
}
.pet-stats { display: grid; gap: 10px; margin-top: 16px; }
.pet-stat { display: grid; gap: 5px; }
.pet-stat__lbl { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--navy); }
[data-theme="dark"] .pet-stat__lbl { color: #EAF0F5; }
.progress__fill--joy { background: linear-gradient(90deg, #E08FA0, #C97064); }
.progress__fill--grow { background: linear-gradient(90deg, #9BD49B, #6FB86F); }
.pet-seeds {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  background: rgba(212,165,116,.14); font-size: 14px; color: var(--navy);
}
[data-theme="dark"] .pet-seeds { color: #EAF0F5; }
.pet-seeds__hint { width: 100%; font-size: 12px; color: var(--gray); }
.pet-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.pet-act {
  display: grid; gap: 4px; justify-items: center; padding: 14px 8px; cursor: pointer;
  border-radius: 14px; border: 1.5px solid rgba(26,58,82,.12); background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--navy);
  transition: transform .16s var(--ease);
}
.pet-act:active { transform: scale(.96); }
.pet-act em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--gray); }
[data-theme="dark"] .pet-act { background: rgba(255,255,255,.06); color: #EAF0F5; border-color: rgba(255,255,255,.13); }
.pdiary { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(26,58,82,.07); font-size: 13px; color: var(--navy); }
.pdiary__d { flex: 0 0 42px; color: var(--gray); font-size: 12px; }
.pdiary--empty { color: var(--gray); border: none; }
[data-theme="dark"] .pdiary { color: #EAF0F5; border-color: rgba(255,255,255,.08); }

/* ── Согласия при регистрации ── */
.auth__consent { display: grid; gap: 10px; margin: 4px 0 14px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--gray); cursor: pointer; }
.consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--terracotta); }
.consent__link { font: inherit; color: var(--terracotta); background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; }

/* ── Документы: политика и соглашение ── */
.doc__part { margin-bottom: 12px; }
.doc__part h2 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.doc__part p { font-size: 14px; line-height: 1.65; color: var(--gray); }
[data-theme="dark"] .doc__part h2 { color: #EAF0F5; }
.doc__foot { margin: 18px 0 40px; text-align: center; font-size: 12px; color: var(--gray); }

/* Стикер без картинки не оставляет пустую дырку */
.stk--noimg { background: rgba(212,165,116,.18); border-radius: 10px; }

/* Безопасность в меню сообщения */
.ma__row--safe { border-top: 1px solid rgba(26,58,82,.08); margin-top: 4px; padding-top: 4px; }
.ma__row--safe button { color: var(--error); }

/* Конец игры: продолжение и усложнение */
.gend { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.gend[hidden] { display: none; }
.gend__backdrop { position: absolute; inset: 0; background: rgba(20,35,47,.62); backdrop-filter: blur(3px); }
.gend__card {
  position: relative; width: 100%; max-width: 340px; display: grid; gap: 10px; justify-items: center;
  padding: 26px 20px 20px; border-radius: 20px; background: var(--cream); text-align: center;
  box-shadow: 0 18px 50px rgba(20,35,47,.3); animation: gendIn .28s var(--ease);
}
@keyframes gendIn { from { transform: translateY(14px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
.gend__ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--gold), var(--terracotta)); }
.gend__title { font-size: 20px; font-weight: 700; color: var(--navy); }
.gend__sub { font-size: 14px; color: var(--gray); line-height: 1.5; }
.gend__score { font-size: 14px; font-weight: 700; color: var(--terracotta); }
.gend__lvl { font-size: 12px; color: var(--gray); }
.gend__again, .gend__other { width: 100%; margin-top: 4px; }
.gend__close { font: inherit; font-size: 13px; color: var(--gray); background: none; border: none; cursor: pointer; padding: 6px; }
[data-theme="dark"] .gend__card { background: #16242F; }
[data-theme="dark"] .gend__title { color: #EAF0F5; }

/* Прикреплённое домашнее задание */
.hw-file { margin-top: 8px; font-size: 13px; color: var(--gray); }

/* Видеокружочек в переписке */
.msg__circle { position: relative; width: 168px; height: 168px; border-radius: 50%;
  overflow: hidden; background: var(--navy); cursor: pointer;
  box-shadow: 0 2px 10px rgba(26,58,82,.18); }
.msg__circle-v { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg__circle-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
  border-radius: 50%; background: rgba(250,248,245,.9); color: var(--terracotta);
  display: flex; align-items: center; justify-content: center; }
.msg__circle-dur { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-size: 12px; color: var(--cream); text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* Не отмеченное обязательное согласие */
.consent--bad { color: var(--terracotta); }
.consent--bad input { outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 4px; }

/* Сноска под рейтингом */
.lb-note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--gray); text-align: center; }

/* Подпись под значком: за что он даётся */
.badge-card__how { margin-top: 4px; font-size: 10px; line-height: 1.35; color: var(--gray); }
.badge-card--locked .badge-card__how { opacity: .85; }

/* Примечание под списком детей */
.children__note { margin: 6px 0 10px; font-size: 12px; line-height: 1.45; color: var(--gray); }

/* Пустой список детей */
.children__empty { padding: 14px 16px; border-radius: 14px; background: rgba(201,112,100,.07);
  font-size: 13px; line-height: 1.5; color: var(--gray); }

/* ── Школа внутри Телеграма ──
   Телеграм сам сообщает высоту своего окна: она меньше высоты экрана и
   меняется, когда открывается клавиатура. Берём её вместо 100vh, иначе
   низ приложения уезжает под край окна. */
html.в-телеграме body { min-height: var(--tg-height, 100vh); }
html.в-телеграме .app { min-height: var(--tg-height, 100vh); }
html.в-телеграме .cv { height: var(--tg-height, var(--vvh, 100dvh)); }
/* В Телеграме своя системная стрелка «назад», наша шапка ей не мешает,
   но верхний отступ нужен поменьше: сверху уже есть панель мессенджера. */
html.в-телеграме .hd { padding-top: 6px; }


/* Ребёнок, который сейчас занимается: карточку видно сразу. */
.child-card--now { border-color: var(--terracotta); box-shadow: 0 0 0 2px rgba(201, 112, 100, .18); }

/* Подпись с версией внизу «О приложении». */
.about-ver { margin-top: 18px; text-align: center; font-size: 12px; line-height: 1.7; color: var(--muted, #5A6577); }
.about-ver a { color: inherit; text-decoration: underline; }

/* Оговорка под домашним заданием: пока сервера нет, файл никуда не уходит. */
.hw-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--gray); }

/* Строка про неподтверждённую почту: заметная, но не тревожная. Школа
   работает и без подтверждения, поэтому цвет тёплый, а не красный. */
.mail-note { border-left: 3px solid var(--gold); }
.mail-note p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.mail-note .btn { width: 100%; }
[data-theme="dark"] .mail-note p { color: #E7EDF3; }

/* Выбор оформления: три варианта в ряд, светлая, тёмная и как в системе */
.theme-picks { display: flex; gap: 8px; padding: 0 15px 14px; }
.theme-pick { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px; border: 1px solid rgba(26,58,82,.14); border-radius: 12px;
  background: transparent; color: var(--navy); font: 600 12px/1.2 inherit; cursor: pointer; }
.theme-pick--on { border-color: var(--terracotta); background: rgba(201,112,100,.10); color: var(--terracotta); }
[data-theme="dark"] .theme-pick { color: #E7EDF3; border-color: rgba(231,237,243,.18); }
[data-theme="dark"] .theme-pick--on { color: var(--terracotta); border-color: var(--terracotta); }

/* ── Иллюстрированная читалка урока (материал Екатерины) ───────────── */
.lesson-epigraph {
  font-family: var(--font-serif); font-style: italic; color: var(--terracotta);
  font-size: 15px; line-height: 1.5; margin: 2px 2px 10px; text-align: center;
}
.lesson-pager { margin: 0 0 16px; }
/* Высота трека идёт за открытой страницей, её ставит wirePager. Раньше трек
   тянулся по самой высокой странице, и под коротким текстом оставалось пустое
   белое поле в полэкрана. */
.lp-track {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; transition: height .22s ease;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0;
  border-radius: var(--radius-card);
}
@media (prefers-reduced-motion: reduce) { .lp-track { transition: none; } }
.lp-track::-webkit-scrollbar { display: none; }
.lp-slide {
  flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: 0;
  background: #fff; border-radius: var(--radius-card);
  box-shadow: 0 1px 4px rgba(26, 58, 82, .06); overflow: hidden;
}
.lp-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #efe9e0; }
.lp-text {
  display: block; padding: 16px 18px; font-size: 15px; line-height: 1.7; color: var(--gray);
}
.lp-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.lp-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(26, 58, 82, .16);
  background: #fff; color: var(--navy); font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.lp-btn:active { transform: scale(.94); }
.lp-btn:disabled { opacity: .32; cursor: default; pointer-events: none; }
.lp-dots { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: 60%; }
.lp-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(26, 58, 82, .22); transition: transform .2s var(--ease), background .2s var(--ease);
}
.lp-dot.on { background: var(--terracotta); transform: scale(1.35); }
.lp-count { text-align: center; margin-top: 8px; font-size: 13px; color: var(--gray); opacity: .7; }

[data-theme="dark"] .lp-slide { background: rgba(255, 255, 255, .05); box-shadow: none; }
[data-theme="dark"] .lp-text { color: #d9e2e9; }
[data-theme="dark"] .lp-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #E7EDF3; }
[data-theme="dark"] .lp-dot { background: rgba(255, 255, 255, .28); }
[data-theme="dark"] .lp-dot.on { background: var(--gold); }
[data-theme="dark"] .lesson-epigraph { color: #E6B9A6; }

/* ══════ Рабочая тетрадь Екатерины ══════
   Сердце урока, размышление о трёх ситуациях, творческая миссия.
   Оформление спокойное: это места, где ребёнок думает и говорит со
   взрослым, а не жмёт кнопки, поэтому никаких ярких заливок. */

.wb-heart { border-left: 3px solid var(--gold); }
.wb-heart__t { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; margin-bottom: 6px; }
.wb-heart p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--navy); }
.wb-heart__note { margin-top: 10px !important; font-size: 13px !important; color: #5A6577 !important; }

.wb-dumay__lead { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #5A6577; }
.wb-sit + .wb-sit { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(26,58,82,.08); }
.wb-sit__n { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; }
.wb-sit__t { font-weight: 600; margin: 4px 0 8px; color: var(--navy); line-height: 1.45; }
.wb-sit__q { font-size: 14px; line-height: 1.5; color: #3C4658; padding-left: 14px;
  position: relative; }
.wb-sit__q::before { content: '·'; position: absolute; left: 4px; color: var(--gold); font-weight: 700; }
.wb-sit__q + .wb-sit__q { margin-top: 5px; }
.wb-sit__q--good::before { content: '✓'; font-size: 11px; color: #4C9A6A; }

.wb-missiya__name { font-family: 'Playfair Display', Georgia, serif; font-size: 19px;
  color: var(--navy); margin-bottom: 8px; }
.wb-missiya__mat { font-size: 13px; line-height: 1.5; color: #5A6577; margin-bottom: 12px; }
.wb-missiya__steps { margin: 0 0 12px; padding-left: 20px; }
.wb-missiya__steps li { margin-bottom: 7px; line-height: 1.5; color: var(--navy); }
.wb-missiya__end { font-size: 14px; line-height: 1.5; color: #3C4658;
  border-top: 1px solid rgba(26,58,82,.08); padding-top: 10px; }
.wb-missiya__end i { color: var(--terracotta); }
.wb-missiya__age { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: #5A6577; }
[data-theme="dark"] .wb-missiya__age { color: #C3D0DA; }

/* Несколько заданий подряд: между ними видно границу и номер */
.task-step + .task-step { margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(26,58,82,.10); }
.task-step__n { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; margin-bottom: 8px; }

[data-theme="dark"] .wb-heart p,
[data-theme="dark"] .wb-sit__t,
[data-theme="dark"] .wb-missiya__name,
[data-theme="dark"] .wb-missiya__steps li { color: #E7EDF3; }
[data-theme="dark"] .wb-sit__q,
[data-theme="dark"] .wb-missiya__end { color: #C3D0DA; }
[data-theme="dark"] .wb-sit + .wb-sit,
[data-theme="dark"] .task-step + .task-step,
[data-theme="dark"] .wb-missiya__end { border-color: rgba(231,237,243,.14); }

/* ── Картинка внутри игры ──
   Её замечание: в играх «просто серо и тексты». Полоса под шапкой держит
   тему хода и не съедает поле: на телефоне игре нужна высота. */
.game-art { margin: 0 0 14px; border-radius: 14px; overflow: hidden; background: rgba(26,58,82,.05); }
.game-art img { display: block; width: 100%; height: 132px; object-fit: cover; }
.game-art figcaption { padding: 8px 12px; font-size: 12px; color: var(--gray); }
@media (max-height: 700px) { .game-art img { height: 96px; } }
[data-theme="dark"] .game-art { background: rgba(255,255,255,.06); }
[data-theme="dark"] .game-art figcaption { color: #C3D0DA; }

/* ── Помощники школы: Милана, Еммануил, Эван ──
   Реплика героя стоит в потоке урока и читается как подсказка рядом,
   а не как очередная карточка с содержанием. */
.pomosh {
  display: flex; gap: 12px; align-items: center; margin: 16px 0;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(212,165,116,.16), rgba(212,165,116,.05));
  border-left: 3px solid var(--gold);
}
.pomosh--середина { background: linear-gradient(135deg, rgba(201,112,100,.14), rgba(201,112,100,.04)); border-left-color: var(--terracotta); }
.pomosh--конец { background: linear-gradient(135deg, rgba(74,111,165,.14), rgba(74,111,165,.04)); border-left-color: var(--blue); }
.pomosh__face { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px rgba(26,58,82,.18); }
.pomosh__body { min-width: 0; }
.pomosh__name { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--terracotta); }
.pomosh__say { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--navy); }
[data-theme="dark"] .pomosh__say { color: #E7EDF3; }

/* Знакомство с героями: один раз, на первом уроке */
.znak { padding: 0; overflow: hidden; }
.znak__photo { display: block; width: 100%; height: auto; }
.znak__list { display: grid; gap: 12px; padding: 16px 16px 0; }
.znak__name { font-size: 15px; font-weight: 700; color: var(--terracotta); }
.znak__who { font-size: 13px; line-height: 1.45; color: #3C4658; }
.znak__call { margin: 16px; padding: 12px; border-radius: 10px; text-align: center;
  background: rgba(26,58,82,.06); font-size: 14px; font-weight: 700; color: var(--navy); }
[data-theme="dark"] .znak__who { color: #C3D0DA; }
[data-theme="dark"] .znak__call { background: rgba(255,255,255,.07); color: #E7EDF3; }

/* «О школе»: страницы школы в сети — только для взрослых */
.about-links { display: grid; gap: 2px; padding: 14px 16px; }
.about-links__note { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--gray); }
.about-link { display: flex; align-items: center; gap: 12px; padding: 11px 0;
  text-decoration: none; color: inherit; }
.about-link + .about-link { border-top: 1px solid rgba(26,58,82,.08); }
.about-link__ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: rgba(212,165,116,.18); color: var(--terracotta); }
.about-link__t { font-size: 15px; font-weight: 600; color: var(--navy); }
.about-link__t i { display: block; margin-top: 1px; font-size: 13px; font-style: normal;
  font-weight: 400; color: var(--gray); }
[data-theme="dark"] .about-link__t { color: #E7EDF3; }
[data-theme="dark"] .about-link__t i, [data-theme="dark"] .about-links__note { color: #C3D0DA; }
[data-theme="dark"] .about-link + .about-link { border-top-color: rgba(231,237,243,.14); }

/* «О школе»: что значит само слово и для кого школа */
.about-word { margin-top: 12px; border-left: 3px solid var(--blue); }
.about-word__t { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; }
.about-word__t + p { margin: 6px 0 0; }
.about-word p { font-size: 14px; line-height: 1.55; color: var(--navy); }
.about-word p + .about-word__t { margin-top: 14px; display: block; }
[data-theme="dark"] .about-word p { color: #E7EDF3; }

/* История поиска: последние запросы под строкой */
.search-hist { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.search-hist__t { font-size: 12px; color: var(--gray); }
.search-hist__q, .search-hist__clr {
  font: inherit; font-size: 13px; cursor: pointer; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(26,58,82,.16); background: #fff; color: var(--navy);
}
.search-hist__clr { border-style: dashed; color: var(--gray); }
[data-theme="dark"] .search-hist__q, [data-theme="dark"] .search-hist__clr {
  background: rgba(255,255,255,.06); color: #E7EDF3; border-color: rgba(255,255,255,.14); }

/* Повторение прошлого урока в начале следующего */
.povtor { margin-top: 14px; border-left: 3px solid var(--gold); }
.povtor__t { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; margin-bottom: 10px; }
.povtor__row { display: grid; gap: 8px; }
.povtor__w { font-size: 14px; font-weight: 700; color: var(--navy); }
.povtor__w i { display: block; margin-top: 1px; font-size: 13px; font-style: normal;
  font-weight: 400; color: #3C4658; }
[data-theme="dark"] .povtor__w { color: #E7EDF3; }
[data-theme="dark"] .povtor__w i { color: #C3D0DA; }

/* Словарь урока «Наши открытия» и вопросы «Вспомни» */
.slovar { padding: 4px 16px; }
.slovar__row { padding: 14px 0; }
.slovar__row + .slovar__row { border-top: 1px solid rgba(26,58,82,.08); }
.slovar__w { font-size: 16px; font-weight: 700; color: var(--navy); }
.slovar__s { margin-top: 2px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; }
.slovar__t { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: #3C4658; }
.vspomni { margin-top: 12px; border-left: 3px solid var(--blue); }
.vspomni__t { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; margin-bottom: 8px; }
.vspomni__list { margin: 0; padding-left: 20px; display: grid; gap: 6px;
  font-size: 14px; line-height: 1.45; color: var(--navy); }
[data-theme="dark"] .slovar__w,
[data-theme="dark"] .vspomni__list { color: #E7EDF3; }
[data-theme="dark"] .slovar__t { color: #C3D0DA; }
[data-theme="dark"] .slovar__row + .slovar__row { border-top-color: rgba(231,237,243,.14); }

/* ── Финал тетради: четыре фонаря на одной дороге ──
   На бумаге это разворот с золотой тропой. На телефоне дорога идёт сверху
   вниз: фонари столбиком, между ними тонкая золотая нить. */
.tf { margin-top: 4px; padding: 18px 16px; }
.tf__head { text-align: center; }
.tf__sub { font-family: var(--font-serif); font-size: 20px; color: var(--navy); }
.tf__lead { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #3C4658; }
.tf__age { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #5A6577; }

.tf__road { position: relative; margin: 20px 0 4px; display: grid; gap: 16px; }
.tf__road::before {
  content: ''; position: absolute; left: 13px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--gold), rgba(212,165,116,.25)); border-radius: 2px;
}
.tf-lamp { position: relative; padding-left: 38px; }
.tf-lamp__top { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.tf-lamp__n {
  position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; box-shadow: 0 0 0 4px rgba(212,165,116,.18);
}
.tf-lamp__mark { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; }
.tf-lamp__t { margin: 2px 0 8px; font-size: 15px; font-weight: 700; color: var(--navy); }

.tf-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(26,58,82,.08); }
.tf-block__t { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; }
.tf-block__s { margin: 2px 0 8px; font-size: 15px; font-weight: 700; color: var(--navy); }

.tf-in {
  font: inherit; font-size: 14px; line-height: 1.5; width: 100%; resize: vertical;
  padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(26,58,82,.16);
  background: #fff; color: var(--navy);
}
.tf-in::placeholder { color: rgba(26,58,82,.42); }
.tf-in:focus { outline: none; border-color: var(--gold); }

.tf-done { margin-top: 22px; padding: 16px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(212,165,116,.16), rgba(212,165,116,.05)); }
.tf-done__t { font-family: var(--font-serif); font-size: 19px; color: var(--navy); }
.tf-done__s { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; margin-top: 2px; }
.tf-done__idea { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #3C4658; }
.tf-done .tf-block:first-of-type { border-top-color: rgba(26,58,82,.12); }
.tf-done__end { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #5A6577; }
.tf-sign { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px;
  padding-top: 10px; border-top: 1px dashed rgba(26,58,82,.22);
  font-size: 13px; font-weight: 600; color: var(--navy); }
.tf-next { margin-top: 14px; text-align: center; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--terracotta); font-weight: 700; }

[data-theme="dark"] .tf__sub,
[data-theme="dark"] .tf-lamp__t,
[data-theme="dark"] .tf-block__s,
[data-theme="dark"] .tf-done__t,
[data-theme="dark"] .tf-sign { color: #E7EDF3; }
[data-theme="dark"] .tf__lead,
[data-theme="dark"] .tf__age,
[data-theme="dark"] .tf-done__idea,
[data-theme="dark"] .tf-done__end { color: #C3D0DA; }
[data-theme="dark"] .tf-in { background: rgba(255,255,255,.07); color: #E7EDF3;
  border-color: rgba(255,255,255,.16); }
[data-theme="dark"] .tf-in::placeholder { color: rgba(231,237,243,.45); }
[data-theme="dark"] .tf-block { border-top-color: rgba(231,237,243,.14); }
[data-theme="dark"] .tf-sign { border-top-color: rgba(231,237,243,.26); }

/* ══════ Узкий телефон: шапка ══════
   На 320 px название упиралось прямо в лупу: между ними не было зазора,
   и «МЕТАНОЙЯ» читалось вместе со значком. Даём левой части право
   сжиматься, правой запрещаем, и держим зазор в любом случае. */
.header__left { min-width: 0; flex: 1 1 auto; }
.header__right { flex: 0 0 auto; margin-left: 12px; }
.header__name { white-space: nowrap; overflow: hidden; text-overflow: clip; }

@media (max-width: 359px) {
  .header__name { font-size: 14px; letter-spacing: 1.4px; }
  .header__logo { width: 30px; height: 30px; }
  .header__right { gap: 8px; margin-left: 8px; }
}

/* ══════ Узкий телефон: карточка «открыт урок» ══════
   На 320 px длинное название урока обрезалось посреди слова:
   «Поклонен…волхвов». Разрешаем переносить слово по слогам, а сам
   «Перейти» на самых узких экранах уводим под текст, чтобы он не
   отъедал ширину у заголовка. */
.today__call-title { overflow-wrap: anywhere; hyphens: auto; }

@media (max-width: 359px) {
  .today__call { flex-wrap: wrap; row-gap: 10px; }
  .today__call-body { flex: 1 1 100%; order: 2; }
  .today__call-ic { order: 1; }
  .today__call-go { order: 3; flex: 1 1 100%; text-align: center; }
}

/* ══════ Обложка книги на узком телефоне ══════
   «МЕТАНОЙЯ» набрана в 40 пикселей с разрядкой, и на 320 px последняя
   буква уезжала за край обложки, а подзаголовок срезало. Размер теперь
   считается от ширины самой обложки, поэтому название целиком видно на
   любом телефоне и не мельчит на большом. */
.book-cover--img .book-cover__title {
  font-size: clamp(26px, 9.2vw, 40px);
  letter-spacing: clamp(1px, .5vw, 2px);
  overflow-wrap: anywhere;
}
.book-cover--img .book-cover__eyebrow { overflow-wrap: anywhere; }
/* Текст лежит поверх акварели, и у маяка небо светлое: золотая строка на
   нём пропадала. Затемнение снизу усилено, а у самих строк своя мягкая
   тень, чтобы читалось на любой обложке, какую бы картинку ни поставили. */
.book-cover__scrim { background: linear-gradient(to top,
  rgba(20,35,47,.92) 0%, rgba(20,35,47,.62) 38%, rgba(20,35,47,.18) 62%, rgba(20,35,47,0) 82%); }
.book-cover--img .book-cover__eyebrow,
.book-cover--img .book-cover__title,
.book-cover--img .book-cover__sub,
.book-cover--img .book-cover__author { text-shadow: 0 1px 6px rgba(12,22,30,.55); }

@media (max-width: 359px) {
  .book-cover__inner { padding: 18px 16px 20px; }
  .book-cover--img { min-height: 300px; }
}