/* Дизайн-система Mini App "Дрессировка" — сдержанная, в духе зоомагазина/ветклиники:
   глубокий зелёный как основной цвет, тёплая охра для "в процессе", терракота как
   единственный третий акцент (вместо разномастных случайных цветов). Только layout +
   цвет/типографика, без брендинга (см. 06_TRAINING_MINIAPP.md). */

:root {
  --green-900: #163c2c;
  --green-700: #1a754f;
  --green-600: #23996c;
  --green-500: #2fa876;
  --green-100: #e5f2eb;
  --green-050: #f4f9f6;

  --amber: #cb9138;
  --amber-bg: #fdf2dc;
  --amber-line: #eddba9;

  --clay: #b56a44;
  --clay-bg: #f6ece5;
  --clay-line: #e6cfbf;

  --ink: #24392f;
  --ink-soft: #5c7368;
  --ink-faint: #83978e;
  --line: #e2ece5;
  --paper: #fffdf9;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;

  --input-line: #d7ddd8;
  --page-bg: #f8f6f1;

  /* Пастельные цвета для карточки питомца и "Сегодня" — сняты со скриншота
     референса. Фиксированные (не завязаны на тему), т.к. в референсе эти
     карточки светлые всегда, даже на тёмном фоне приложения. */
  --pastel-mint: #dce9d6;
  --pastel-peach: #ecd7c0;
  --pastel-lavender: #ded4ec;
  --pastel-sky: #d3e3ee;
  --pastel-rose: #ecd6da;
  --pastel-sand: #ece0c5;
  --pastel-ink: #223529;
  --pastel-ink-soft: #56685c;

  /* Тёмный фон-канва под пастельными карточками, как на скриншоте референса —
     фиксированный, не зависит от темы Telegram/системы (см. body ниже). Не новый
     цвет, а уже существующий --green-900 приложения (фирменный глубокий зелёный,
     см. шапку/градиенты) — так фон и акценты остаются одной палитрой. */
  --canvas-bg: #3b876f;
  /* Основная часть страницы теперь светлая (цвет овала в присланном bg-shape.svg,
     #EBFFEE) — зелёный остаётся только в шапке через #canvas-bg-layer ниже, поэтому
     канва-текст тёмный, как обычный --ink/--ink-soft, а не белый, как раньше на
     сплошном зелёном фоне. */
  --canvas-text: #24392f;
  --canvas-text-soft: #5c7368;
  --canvas-accent: #163c2c;
  --canvas-light: #ebffee;
}

/* Раньше здесь была тёмная тема Telegram (переопределение токенов под
   prefers-color-scheme/[data-theme="dark"]) — убрана: страница теперь везде
   фиксированно светлая (см. #canvas-bg-layer/CANVAS_LIGHT), а с переключением
   темы часть текста (например .tip-title, контент внутри .card) становилась
   светлой на светлом фоне. [data-theme="light"] ниже оставлен как единственный
   набор значений — совпадает с базовым :root, но пусть остаётся источником
   истины, если понадобится точечно поменять палитру. */
:root[data-theme="light"] {
  --green-900: #163c2c;
  --green-700: #1a754f;
  --green-600: #23996c;
  --green-500: #2fa876;
  --green-100: #e5f2eb;
  --green-050: #f4f9f6;

  --amber: #cb9138;
  --amber-bg: #fdf2dc;
  --amber-line: #eddba9;

  --clay: #b56a44;
  --clay-bg: #f6ece5;
  --clay-line: #e6cfbf;

  --ink: #24392f;
  --ink-soft: #5c7368;
  --ink-faint: #83978e;
  --line: #e2ece5;
  --paper: #fffdf9;

  --input-line: #d7ddd8;
  --page-bg: #f8f6f1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px 16px 118px;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Светлый фон страницы (цвет светлой части bg-shape.svg) — зелёная дуга рисуется
     отдельным слоем поверх (см. #canvas-bg-layer), с тем же светлым цветом дальше,
     так что шов между картинкой и обычным фоном не виден. */
  color: var(--ink);
  background: var(--canvas-light);
  /* manipulation = разрешить пан/скролл, но убрать двойной тап и pinch-zoom
     жесты браузера — иначе быстрый повторный тап по кнопке/карточке иногда
     распознаётся как zoom-жест вебвью. Дублирует maximum-scale в viewport
     (см. index.html), т.к. одного meta-тега недостаточно во всех вебвью. */
  touch-action: manipulation;
}

/* Декоративный слой (зелёный верх + скруглённый светлый овал,
   images/bg-shape-tall.png — высокая "плёнка" 445×2802, по вертикали идёт
   зелёный/светлый/зелёный) — position: fixed, поэтому сам по себе не двигается
   при скролле; JS в app.js (initBgParallax) сдвигает его через translate3d на
   долю scrollY (параллакс), а background-position-y — отдельно — проматывает
   картинку при входе в приложение (см. startBgEntrance): на старте видна только
   самая верхняя, сплошь зелёная часть, потом окно "проезжает" вниз, открывая
   изгиб и светлую часть. backface-visibility — вместе с translate3d в JS
   принудительно выносят слой на отдельный GPU-composited layer (на iOS
   2D-transform не всегда получает его сам по себе, из-за чего анимация не
   плавная). */
#canvas-bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Выше экрана с запасом (было фиксированные 640px) — иначе на старте входной
     анимации, когда окно смотрит в сплошь зелёную верхушку картинки, ниже слоя
     проглядывала светлая подложка страницы: экран выше 640px. Запас в 120px
     покрывает и смену высоты вьюпорта (адресная строка/safe area). В покое
     нижняя часть слоя всё равно светлая — тот же #EBFFEE, что и фон страницы,
     так что стыка не видно. */
  height: calc(100vh + 120px);
  background-image: url('images/bg-shape-tall.png?v=3');
  background-repeat: no-repeat;
  background-position: center 0px;
  background-size: 100% auto;
  z-index: -1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, background-position;
}

.screen { width: 100%; }
.screen[hidden] { display: none; }

/* Вход в основное приложение (#screen-main + #bottom-nav — выезд снизу) живёт
   не здесь, а в riseInFromBottom() в app.js: он идёт через Web Animations API
   (element.animate), потому что элемент в этот момент только что вышел из
   display:none, и WebKit в таком случае не проигрывает ни CSS-анимацию, ни
   transition, а сразу фиксирует конечное состояние. */

/* Плавное появление экрана/вкладки при переключении (см. revealWithFade/show/
   switchTab в app.js) — fade + сдвиг снизу вместо мгновенного hidden→visible. */
.fade-in { animation: fadeInUp .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Появление отдельных карточек программ по очереди (см. renderProgramList в
   app.js) — та же @keyframes-анимация, что и .fade-in выше, но короче и с
   небольшой задержкой на карточку (--stagger-delay, ставится инлайном), чтобы
   список "каскадом" появлялся сверху вниз, а не всей пачкой разом. */
.card-fade-in {
  animation: cardFadeIn .35s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: var(--stagger-delay, 0ms);
}
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Вкладки "Обзор"/"Здоровье"/"Кликер" начинаются сразу с h1 без карточки-шапки —
   без отступа их заголовок оказался бы тёмным текстом поверх зелёной части фона
   в самом верху экрана. "Программы" не нужен — там сверху уже светлая карточка
   питомца (.ph-header), сама перекрывающая зелёную часть. */
#tab-overview,
#tab-health,
#tab-clicker {
  padding-top: 70px;
}
#tab-overview h1,
#tab-health h1,
#tab-clicker h1 {
  margin-top: 0;
  /* Заголовок теперь заходит в зелёную часть фона (сдвинули страницу выше) —
     тёмный текст на тёмно-зелёном было не прочитать. */
  color: #EEFFEE;
}
/* Подзаголовок первой секции сразу под h1 тоже частично попадает на зелёный —
   тот же приём. */
#tab-overview h1 + section .section-eyebrow,
#tab-health h1 + section .section-eyebrow,
#tab-clicker h1 + section .section-eyebrow,
#tab-overview h1 + section h2,
#tab-health h1 + section h2,
#tab-clicker h1 + section h2,
#tab-overview h1 + .clicker-lead,
#tab-clicker h1 + .clicker-lead {
  color: #EEFFEE;
}
/* Первая секция сразу под h1 — без стандартного margin-top: 26px, иначе под
   заголовком остаётся большой пустой зазор (сам h1 уже прижат к верху). */
#tab-overview h1 + section,
#tab-health h1 + section,
#tab-clicker h1 + section {
  margin-top: 10px;
}

h1 { font-size: 22px; margin: 8px 0 12px; color: var(--canvas-text); font-weight: 800; }
h2 { font-size: 23px; line-height: 1.15; margin: 4px 0 12px; color: var(--canvas-text); letter-spacing: -0.4px; font-weight: 800; }

label { display: block; margin: 12px 0 4px; font-size: 14px; color: var(--canvas-text-soft); }

input, select, button {
  font-size: 16px;
  padding: 11px;
  width: 100%;
  border-radius: var(--r-sm);
  border: 1px solid var(--input-line);
  margin-bottom: 8px;
  font-family: inherit;
}

input, select {
  background: var(--paper);
  color: var(--ink);
}

button {
  background: var(--tg-theme-button-color, var(--green-600));
  color: var(--tg-theme-button-text-color, #fff);
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: transform .08s ease, opacity .08s ease;
}

button:active { transform: scale(.98); opacity: .92; }

.checkbox-label { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.35; color: var(--ink); }
.checkbox-label input { width: auto; margin: 0; accent-color: var(--green-600); transform: scale(1.15); }

.goal-options { display: flex; flex-direction: column; gap: 12px; }

/* Онбординг идёт на сплошь зелёном фоне: декоративный слой проматывается до
   светлой части только при входе в приложение (см. startBgEntrance в app.js).
   Тёмный текст на зелёном давал контраст ~2.6:1 при норме 4.5:1, поэтому весь
   шаг кладём на светлую карточку — тогда текст читается штатно. */
#screen-onboarding {
  margin: 32px 0 24px;
  padding: 22px 18px 24px;
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(22, 60, 44, .16);
}
#screen-onboarding h1 { margin-top: 0; font-size: 25px; }
/* :not(.checkbox-label) — иначе это правило (с id, а значит более специфичное)
   перебило бы размер самих пунктов-чекбоксов, заданный в .checkbox-label выше. */
#screen-onboarding label:not(.checkbox-label) { font-size: 15px; font-weight: 600; color: var(--ink); }

.ob-intro { color: var(--canvas-text-soft); font-size: 15px; line-height: 1.5; }
.ob-step[hidden] { display: none; }
.ob-nav { display: flex; gap: 8px; margin-top: 24px; }
.ob-nav button { flex: 1; font-size: 16px; padding: 13px 11px; }
#ob-back { background: var(--green-100); color: var(--green-900); }

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 14px;
  margin-bottom: 10px;
  background: var(--paper);
}

.card.completed { opacity: 0.6; }

.card p { line-height: 1.45; }

/* Плавающая пилюля-меню в духе системного таб-бара iOS (Контакты/Звонки/Чаты/Настройки) —
   иконка сверху, подпись снизу, отдельно от потока страницы (position: fixed с
   отступами со всех сторон, а не приклеена к самому низу). Белая, полностью
   скруглённая по бокам (border-radius больше половины высоты — гарантированная
   форма капсулы независимо от точной высоты содержимого). */
#bottom-nav {
  z-index: 10;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(22, 60, 44, .22);
}
/* Без этого атрибут hidden не сработал бы: display:flex выше перебивает
   браузерное display:none для [hidden] (меню скрывается через show() в app.js —
   оно лежит снаружи .screen-контейнеров и не скрывается вместе с ними). */
#bottom-nav[hidden] { display: none; }
.nav-btn {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--ink-faint);
  border-radius: 999px;
  border: none;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  margin: 0;
  width: auto;
}
/* Подсветка активной вкладки садится точно на этот блок (иконка + подпись), а не на
   всю ширину .nav-btn (flex:1) — иначе при разной длине текста отступы вокруг подсветки
   получаются неровными (много воздуха по бокам, мало сверху/снизу). */
.nav-btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  max-width: 84px;
  padding: 7px 6px;
  border-radius: 999px;
  box-sizing: border-box;
}
.nav-btn-content span:last-child {
  font-size: 10.5px;
  white-space: nowrap;
}

.nav-btn-icon {
  height: 24px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
/* Высота фиксирована и одинакова у всех — ширина авто под пропорции конкретной
   картинки, иначе иконки с разным соотношением сторон визуально получаются разной
   высоты внутри одинакового квадратного бокса. */
.nav-btn-icon img {
  height: 100%;
  width: auto;
  display: block;
}

.nav-btn.active .nav-btn-content {
  color: var(--green-900);
  background: var(--pastel-mint);
}
.diary-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}
.diary-form input,
.diary-form button {
  height: 44px;
  padding: 0 12px;
  margin-bottom: 0;
  box-sizing: border-box;
}
.diary-form input { flex: 1; min-width: 0; }
.diary-form button { width: auto; white-space: nowrap; }

/* ---- Поиск по библиотеке программ (вкладка "Обзор" → "Основы и навыки") ---- */

.programs-search-wrap {
  position: relative;
  margin: 4px 0 14px;
}
.programs-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  display: flex;
  pointer-events: none;
}
.programs-search-icon svg { width: 18px; height: 18px; }
.programs-search-input {
  padding: 11px 40px 11px 40px;
  margin-bottom: 0;
  background: var(--paper);
}
/* Свой крестик очистки (см. ниже) вместо нативного — тот либо не показывается
   в Telegram WebView надёжно, либо выглядит по-разному на iOS/Android. */
.programs-search-input::-webkit-search-cancel-button { display: none; }
.programs-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.programs-search-clear svg { width: 15px; height: 15px; }
.programs-search-clear:active { background: var(--green-100); color: var(--ink); }

/* ---- Здоровье: напоминания (визит к ветеринару / вакцинация / лекарство) ---- */

.hp-secondary-btn {
  background: var(--green-100);
  color: var(--green-900);
  margin-bottom: 14px;
}

.hr-datetime-row { display: flex; gap: 8px; }
.hr-datetime-row input { margin-bottom: 0; }

.hr-hint { font-size: 12px; color: var(--ink-faint); line-height: 1.4; margin: 6px 0 12px; }

.hr-bell { margin-left: 4px; }

.hr-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.hr-row.completed { opacity: 0.55; }

.hr-row-main { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.hr-icon { font-size: 20px; flex-shrink: 0; }
.hr-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.hr-meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.hr-note { font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }

.hr-row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.hr-row-actions button {
  width: auto;
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--green-100);
  color: var(--green-900);
}
.hr-delete-btn { background: var(--clay-bg); color: var(--clay); }

/* ---- Шапка вкладки "Программы" — профиль питомца + сводная статистика ---- */

.ph-header {
  margin: -16px -16px 16px;
  padding: 20px 16px 28px;
  background: linear-gradient(160deg, var(--green-700), var(--green-600));
  color: #fff;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.ph-pet {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ph-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.ph-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ph-avatar-plus {
  width: 18px;
  height: 18px;
  position: relative;
}

.ph-avatar-plus::before,
.ph-avatar-plus::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 2px;
}

.ph-avatar-plus::before {
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  transform: translateX(-50%);
}

.ph-avatar-plus::after {
  top: 50%;
  left: 0;
  height: 3px;
  width: 100%;
  transform: translateY(-50%);
}

/* Без наложенных значков камеры — только сам плюсик (пусто) или фото. Клик по
   аватару всегда открывает выбор файла независимо от состояния (см. app.js). */

/* ---- Модалка выбора кадра фото питомца ---------------------------------- */

.crop-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.crop-modal[hidden] {
  display: none;
}

.crop-modal-inner {
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 20px 16px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.crop-modal-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  align-self: flex-start;
}

.crop-stage {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #222;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.35);
}

.crop-stage:active {
  cursor: grabbing;
}

.crop-stage img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.crop-zoom {
  width: 100%;
}

.crop-modal-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.crop-btn {
  flex: 1;
  border: none;
  border-radius: var(--r-md);
  padding: 11px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: auto;
}

.crop-btn-secondary {
  background: var(--green-100);
  color: var(--green-900);
}

.crop-btn-primary {
  background: var(--green-600);
  color: #fff;
}

.ph-name { font-size: 18px; font-weight: 700; }
.ph-breed { font-size: 13px; opacity: 0.8; }

.ph-stats {
  display: flex;
  gap: 10px;
}

.ph-stat {
  position: relative;
  flex: 1;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  padding: 8px 6px;
  text-align: center;
}

.ph-stat .num { display: block; font-size: 16px; font-weight: 700; }
.ph-stat .label { display: block; font-size: 10px; opacity: 0.85; margin-top: 2px; }

/* Кубок/медаль — значком в верхнем левом углу пилюли, крупнее и слегка
   выступает за край (badge/стикер), а не мелкой иконкой рядом с текстом. */
.ph-stat-badge {
  position: absolute;
  top: -8px;
  left: -6px;
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(22, 60, 44, .35));
}

.home-section { margin: 26px 0 30px; }
.home-today { margin-top: 4px; }
.home-today .section-eyebrow, .home-today h2 { color: #000; }
.section-eyebrow { color: var(--canvas-text-soft); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.section-description { margin: -4px 0 18px; color: var(--canvas-text-soft); font-size: 14px; line-height: 1.42; }

.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}
.section-head-row h2 { margin: 0; }
.section-link-btn {
  width: auto;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--canvas-accent);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.section-link-arrow { font-size: 15px; line-height: 1; transition: transform .15s ease; }
.section-link-btn:active .section-link-arrow { transform: translateX(2px); }

/* ---- Медкарта питомца (вкладка "Здоровье") ---- */

.mc-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.mc-icon { flex-shrink: 0; font-size: 20px; line-height: 1.3; }
.mc-title { font-size: 16px; font-weight: 700; color: var(--green-900); }
.mc-facts { margin-top: 2px; font-size: 13px; color: var(--ink-soft); }

.mc-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.mc-label { font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; }
.mc-value { font-size: 14px; color: var(--ink); line-height: 1.4; }

.mc-history-title { font-size: 14px; font-weight: 700; color: var(--green-900); margin-bottom: 4px; }
.mc-history-empty { color: var(--ink-faint); font-size: 14px; }

/* Каждое обращение — отдельный блок с разделителем, а не сплошная простыня текста:
   при десятке+ записей (частые визиты/хронический пациент) без разделения дата и
   следующая запись сливались в одну строку, читать было невозможно. */
.mc-case { padding: 10px 0; border-top: 1px solid var(--line); }
.mc-case:first-child { border-top: none; padding-top: 4px; }
.mc-case-date { font-size: 12px; font-weight: 700; color: var(--clay); margin-bottom: 3px; }
.mc-case-body { font-size: 14px; color: var(--ink); line-height: 1.45; }
.mc-case-arrow { color: var(--ink-faint); }

/* ---- Избранное на главном экране: кнопка-раскрывашка + строки с крестиком ---- */

.favorites-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #FDF6EE;
  color: var(--ink);
  cursor: pointer;
}
.favorites-toggle-icon { flex-shrink: 0; font-size: 17px; color: #e0607a; }
.favorites-toggle-title { flex: 1; text-align: left; font-size: 15px; font-weight: 700; color: var(--green-900); }
.favorites-toggle-count { margin-left: 4px; color: var(--ink-faint); font-weight: 600; }
.favorites-toggle-chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  transition: transform .15s ease;
}
.favorites-toggle-chevron svg { width: 15px; height: 15px; }
.favorites-toggle.open .favorites-toggle-chevron { transform: rotate(180deg); color: var(--green-600); }

#favorites-list { margin-top: 10px; }
/* .roadmap { display: flex } перебивает браузерный [hidden] (та же ловушка, что и
   у .roadmap-track выше) — без явного display: none свёрнутый список всё равно
   показывал бы карточки уроков. */
#favorites-list[hidden] { display: none; }

.favorite-row { display: flex; align-items: stretch; gap: 8px; }
.favorite-row-main { flex: 1; min-width: 0; }
.favorite-row-delete {
  flex-shrink: 0;
  width: 36px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  padding: 0;
  margin: 0;
}
.favorite-row-delete svg { width: 16px; height: 16px; }
.favorite-row-delete:active { background: #fde8ec; color: #c33f5c; }

/* ---- Вертикальная карта обучения ---- */

.roadmap { display: flex; flex-direction: column; gap: 10px; }
/* Вся глава (шапка + раскрытые карточки уроков/статьи) — фиксированно светлая
   палитра с тёмным текстом независимо от темы приложения, та же логика, что и у
   пастельной шапки питомца выше: в тёмной теме Telegram эти токены иначе съезжали
   бы на тёмные, а карточки в референсе всегда светлые. */
.roadmap-course {
  --green-900: #163c2c;
  --green-600: #23996c;
  --green-100: #e5f2eb;
  --green-050: #f4f9f6;
  --amber: #cb9138;
  --amber-bg: #fdf2dc;
  --amber-line: #eddba9;
  --clay: #b56a44;
  --clay-bg: #f6ece5;
  --clay-line: #e6cfbf;
  --ink: #24392f;
  --ink-soft: #5c7368;
  --ink-faint: #83978e;
  --line: #e2ece5;
  --paper: #dce9d6;

  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  margin-bottom: 10px;
  /* Не hidden — иначе увеличенная картинка программы (.roadmap-course-icon img,
     см. ниже) обрезается по границе всей карточки. Углы шапки/дорожки скруглены
     явно через border-radius ниже вместо обрезки родителем. */
  overflow: visible;
}

.roadmap-course-head {
  display: flex;
  align-items: center;
  /* 12px, а не 16: на узком экране каждый пиксель идёт названию программы —
     при большем зазоре длинные названия ломались на лишние строки. */
  gap: 12px;
  width: 100%;
  min-height: 98px;
  margin: 0;
  padding: 14px;
  border: 0;
  /* Раньше углы скругляла обрезка родителем (.roadmap-course { overflow: hidden }) —
     теперь она снята (см. выше, ради вылезающей картинки), поэтому скругление ставим
     явно тут: все четыре угла, когда глава свёрнута и шапка — единственный контент. */
  border-radius: 16px;
  background: none;
  color: inherit;
  text-align: left;
  font-family: inherit;
  box-sizing: border-box;
}
/* Раскрыто — снизу идёт roadmap-track, поэтому низ шапки остаётся прямым. */
.roadmap-course.open .roadmap-course-head { border-radius: 16px 16px 0 0; }
.roadmap-course-info { flex: 1; min-width: 0; }
.roadmap-course-icon { width: 68px; height: 68px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--green-100); color: #fff; font-size: 34px; overflow: visible; }
/* Картинка (а не эмодзи) — иллюстрация рисуется прямо на фоне карточки, без
   собственной подложки под ней. Плашка растянута на всю высоту шапки и вытянута
   отрицательными margin'ами на её padding (16px) вверх, вниз и влево — так
   иллюстрация упирается прямо в границы блока, а не висит с отступом внутри.
   object-fit: contain, а не cover — иллюстрация должна помещаться целиком, а не
   обрезаться; object-position: left bottom сажает её в нижний левый угол. */
.roadmap-course-icon:has(img) {
  /* 104px, а не 148: на экране 375px широкая плашка оставляла названию всего
     ~70px, из-за чего оно ломалось на 5-7 строк, карточка вырастала до 258px, а
     растянутая по её высоте иллюстрация раздувала карточку ещё сильнее. */
  width: 96px;
  height: auto;
  align-self: stretch;
  margin: -14px 0 -14px -14px;
  background: none;
}
/* cover, а не contain: при узкой плашке вписывание целиком оставляло бы поля
   сверху/снизу. Заполняем плашку, лишнее по бокам обрезается — иллюстрации
   скомпонованы по центру, так что сюжет не страдает. */
.roadmap-course-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index: 1;
}
/* Обложка-сцена с собственным фоном (а не вырезанная фигура на прозрачном) —
   ей нужно скругление слева под угол самой карточки: плашка прижата к её краю,
   и без этого угол сцены торчал бы за скруглением. */
.roadmap-course-icon.is-photo img {
  border-radius: 16px 0 0 16px;
}
/* 18px, а не 20: длинные названия ("Отучение от кусания и прикусывания") при
   узкой колонке ломались на слишком много строк и растягивали карточку. */
.roadmap-course-name { color: var(--green-900); font-size: 18px; font-weight: 800; line-height: 1.22; }
.roadmap-course-progress { color: var(--ink-faint); font-size: 13px; margin-top: 4px; }
.roadmap-course-bar {
  margin-top: 10px;
  width: 100%;
  height: 9px;
  border-radius: 5px;
  background: var(--green-100);
  overflow: hidden;
}
.roadmap-course-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--green-600);
}

/* ---- Пастельная палитра для блоков программ — та же тёплая гамма, что и у
   карточки питомца/"Сегодня" (см. --pastel-* в :root), по кругу на весь список,
   ROADMAP_PASTEL_COUNT в app.js должен совпадать с числом вариантов ниже.
   Карточки фиксированно светлые и текст на них фиксированно тёмный, независимо
   от темы приложения — как в референсе. ---- */
.roadmap-course-head.pastel-0 { background: var(--pastel-mint); }
.roadmap-course-head.pastel-1 { background: var(--pastel-peach); }
.roadmap-course-head.pastel-2 { background: var(--pastel-lavender); }
.roadmap-course-head.pastel-3 { background: var(--pastel-sky); }
.roadmap-course-head.pastel-4 { background: var(--pastel-rose); }
.roadmap-course-head.pastel-5 { background: var(--pastel-sand); }

/* Карточка с собственной иллюстрацией-обложкой — свой фирменный фон вместо
   пастельного из ротации выше. Дополнительного отступа у текста здесь нет:
   на узком экране он отнимал место у названия (см. gap в .roadmap-course-head). */
.roadmap-course-head[class*="pastel-"]:has(.roadmap-course-icon img) { background: #FDF6EE; }

.roadmap-course-head[class*="pastel-"] { border-radius: 16px; color: var(--pastel-ink); }
.roadmap-course-head[class*="pastel-"] .roadmap-course-name { color: var(--pastel-ink); }
.roadmap-course-head[class*="pastel-"] .roadmap-course-progress { color: var(--pastel-ink-soft); }
.roadmap-course-head[class*="pastel-"] .roadmap-course-icon { background: rgba(255, 255, 255, .55); color: var(--pastel-ink); }
/* Повторяем отсутствие подложки явно — иначе это (более специфичное) правило
   вернуло бы полупрозрачный белый фон под иллюстрацию на пастельных карточках. */
.roadmap-course-head[class*="pastel-"] .roadmap-course-icon:has(img) { background: none; }
.roadmap-course-head[class*="pastel-"] .roadmap-course-bar { background: rgba(34, 53, 41, .22); }
.roadmap-course-head[class*="pastel-"] .roadmap-course-bar-fill { background: var(--pastel-ink); }
.roadmap-course-head[class*="pastel-"] .roadmap-course-chevron { color: var(--pastel-ink-soft); }
.roadmap-course.open .roadmap-course-head[class*="pastel-"] { border-bottom-color: rgba(34, 53, 41, .14); }
.roadmap-course-head[class*="pastel-"] .roadmap-goal-toggle { background: rgba(255, 255, 255, .55); color: var(--pastel-ink); }
.roadmap-course-head[class*="pastel-"] .roadmap-goal-toggle.active { background: var(--green-600); color: #fff; }
.roadmap-course-chevron {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  transition: transform .15s ease;
}

.roadmap-course-chevron svg {
  width: 16px;
  height: 16px;
}
.roadmap-course.open .roadmap-course-chevron { transform: rotate(180deg); color: var(--green-600); }

.roadmap-goal-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-900);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.roadmap-goal-toggle.active { background: var(--green-600); color: #fff; }

/* Сердечко-маркер у избранного урока внутри развёрнутой главы — только индикация,
   переключение избранного для конкретного дня живёт на экране самого урока (#lf-favorite). */
.roadmap-lesson-fav {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #e0607a;
  font-size: 15px;
  line-height: 1;
}

.roadmap-goal-menu-wrap { position: relative; flex-shrink: 0; }

.roadmap-goal-menu {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* В цвет с карточкой — без своего фона, как у шеврона рядом, чтобы не торчать
     отдельным кружком на пастельной подложке. */
  background: transparent;
  color: var(--ink-faint);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.roadmap-course-head[class*="pastel-"] .roadmap-goal-menu { color: var(--pastel-ink-soft); }

.roadmap-goal-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 2;
  min-width: 130px;
  padding: 4px;
  border-radius: var(--r-md);
  /* В цвет с фирменным зелёным фоном приложения (--canvas-bg, фиксированный, не
     зависит от темы), а не со светлой карточкой под ним. */
  background: var(--canvas-bg);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 28px rgba(22, 60, 44, .28);
}
.roadmap-goal-dropdown[hidden] { display: none; }
.roadmap-goal-dropdown-item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: #ffd7cc;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.roadmap-goal-dropdown-item:active { background: rgba(255, 255, 255, .14); }

.roadmap-course.open .roadmap-course-head { border-bottom: 1px solid var(--line); }

.roadmap-course .roadmap-track { padding: 14px 12px; }

.roadmap-track { position: relative; display: flex; flex-direction: column; gap: 10px; padding-bottom: 2px; }
.roadmap-track[hidden] { display: none; }
.roadmap-track::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  /* Ровные штрихи фиксированной длины через градиент — border-left: dashed у браузеров
     сам подбирает длину штриха под высоту линии и на длинных линиях выглядит неровно.
     Цвет — полупрозрачный тёмно-зелёный, а не --line: тот (#e2ece5) отличался от
     мятного фона главы (#dce9d6) меньше чем на 4%, и пунктира попросту не было видно. */
  background: repeating-linear-gradient(
    to bottom,
    rgba(22, 60, 44, .4) 0,
    rgba(22, 60, 44, .4) 5px,
    transparent 5px,
    transparent 11px
  );
}
.roadmap-item { position: relative; z-index: 1; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; text-align: left; font-family: inherit; }
/* Кружок статуса: белый на мятном фоне главы + заметная обводка. Раньше и фон
   (--paper), и рамка (--line) почти совпадали с фоном под ними, поэтому значки
   сливались, а обводки было не видно. */
.roadmap-dot {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(22, 60, 44, .28);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  font-size: 21px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(22, 60, 44, .08);
}
.roadmap-dot svg { width: 18px; height: 18px; }
/* Карточка урока — белая, чтобы отделяться от мятной подложки главы (раньше она
   заливалась тем же --paper, что и фон под ней, и читалась только по тени). */
.roadmap-card {
  position: relative;
  display: block;
  min-height: 88px;
  padding: 14px 15px;
  border: 1px solid rgba(22, 60, 44, .08);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 60, 44, .07);
  transition: transform .12s ease, box-shadow .12s ease;
}
.roadmap-type { display: block; color: var(--ink-faint); font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.roadmap-title { display: block; color: var(--green-900); font-size: 17px; font-weight: 800; line-height: 1.18; }
.roadmap-caption { display: block; color: var(--ink-faint); font-size: 12px; margin-top: 7px; }
/* Врезка-статья перед уроками главы (см. renderProgramList / openArticle в app.js).
   Намеренно НЕ янтарная: янтарь на этом экране занят маркером «текущий урок»
   (.roadmap-lesson.current ниже), а статья теперь есть у каждой программы — две
   янтарные карточки в каждой главе убили бы главный навигационный сигнал списка.
   Терракота (--clay) — третий акцент системы, в списке дней больше нигде не занят. */
.roadmap-article { cursor: pointer; }
.roadmap-article .roadmap-dot {
  color: var(--clay);
  background: #fff;
  border-color: rgba(181, 106, 68, .45);
  box-shadow: none;
}
.roadmap-article .roadmap-dot svg { width: 17px; height: 17px; }
/* Без белой заливки и тени: статья — не урок и не должна спорить за внимание с
   уроками (тот же принцип, что был у прежнего блока-вопроса). */
.roadmap-article .roadmap-card {
  min-height: 0;
  padding: 12px 14px 12px 13px;
  background: rgba(255, 255, 255, .58);
  border-color: rgba(181, 106, 68, .22);
  border-left: 3px solid var(--clay);
  box-shadow: none;
}
.roadmap-article .roadmap-type { color: var(--clay); }
/* Кегль меньше, чем у урока (17px) — врезка читается как шапка главы, а не как
   ещё один урок в очереди. */
.roadmap-article .roadmap-title { font-size: 15px; font-weight: 700; }
.roadmap-article .roadmap-lead {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.38;
}
.roadmap-article .roadmap-caption { margin-top: 8px; color: var(--clay); font-weight: 700; }
.roadmap-article:active .roadmap-card { transform: scale(.985); }
.roadmap-lesson { cursor: pointer; }
/* Текущий урок — самый заметный: цветное кольцо вокруг кружка выделяет место,
   на котором пользователь остановился, даже при беглом взгляде на список. */
.roadmap-lesson.current .roadmap-dot {
  color: #fff;
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(203, 145, 56, .22);
}
.roadmap-lesson.current .roadmap-card {
  background: var(--amber-bg);
  border-color: var(--amber-line);
  box-shadow: 0 6px 18px rgba(203, 145, 56, .18);
}
.roadmap-lesson.completed .roadmap-dot { color: #fff; background: var(--green-600); border-color: var(--green-600); }
/* Пройденный урок — заметно тише текущего: приглушённый фон и без тени, чтобы
   список читался как «сделанное позади, актуальное впереди». */
.roadmap-lesson.completed .roadmap-card {
  background: var(--green-050);
  border-color: rgba(22, 60, 44, .1);
  box-shadow: none;
}
.roadmap-lesson.completed .roadmap-title { color: var(--ink-soft); }
.roadmap-lesson.locked .roadmap-dot { color: var(--ink-faint); background: rgba(255, 255, 255, .7); box-shadow: none; }
.roadmap-lesson.locked .roadmap-card { opacity: .72; box-shadow: none; }
.roadmap-lesson.locked .roadmap-caption { color: var(--amber); font-weight: 700; }
.roadmap-lesson:active .roadmap-card { transform: scale(.985); box-shadow: 0 2px 8px rgba(22, 60, 44, .1); }

/* Урок, найденный поиском по программам (см. programs-search в app.js) — отдельный
   акцент (терракота), чтобы не путать со "текущим" уроком (янтарный .current выше). */
.roadmap-lesson.search-match .roadmap-dot {
  color: #fff;
  background: var(--clay);
  border-color: var(--clay);
  box-shadow: 0 0 0 4px rgba(181, 106, 68, .22);
}
.roadmap-lesson.search-match .roadmap-card {
  background: var(--clay-bg);
  border-color: var(--clay-line);
  box-shadow: 0 6px 18px rgba(181, 106, 68, .18);
}
.search-hl {
  background: var(--amber-bg);
  color: var(--amber);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: inherit;
}

/* ---- Кликер — тёплый акцент вместо генерик-фиолетового, тот же принцип, что и
   "текущий урок" на карте обучения (охра), просто ярче и объёмнее — это девайс, а не
   карточка. ---- */

.clicker-lead { line-height: 1.45; margin: 0 0 20px; color: var(--canvas-text-soft); }

/* Иллюстрация кликера-брелока (капля + жёлтая кнопка + ушко с петлёй) — сама кнопка,
   без отдельной круглой рамки/тени вокруг: раньше был "3D"-эмбоссинг под эмодзи 🔊,
   теперь сама картинка достаточно объёмная (собственный градиент и drop-shadow). */
.clicker-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px auto;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--ink-soft);
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease;
}

.clicker-pad:active,
.clicker-pad.pressed { transform: scale(.94); }

.clicker-icon-svg { width: 158px; height: auto; display: block; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .2)); }
.clicker-label { font-size: 15px; font-weight: 700; }

.clicker-warning {
  margin-top: 10px;
  color: var(--ink);
  background: var(--amber-bg);
  border-color: var(--amber-line);
  line-height: 1.4;
}

/* Компактная версия — встраивается внутрь шага "Обучение" в уроке, рядом с таймером. */
.clicker-widget.compact .clicker-pad { margin: 0 auto 12px; }
.clicker-widget.compact .clicker-pad:active,
.clicker-widget.compact .clicker-pad.pressed { transform: scale(.92); }
.clicker-widget.compact .clicker-icon-svg { width: 68px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .16)); }
.clicker-widget.compact .clicker-warning { margin-top: 6px; font-size: 12px; }

.lf-clicker-wrap {
  margin-bottom: 16px;
  padding: 14px 12px;
  border-radius: var(--r-md);
  background: var(--green-050);
}
.lf-clicker-wrap h3 {
  margin: 0 0 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.clicker-rules { margin: 10px 0 0; padding-left: 20px; }
.clicker-rules li { margin: 0 0 10px; line-height: 1.42; color: var(--ink-soft); }

/* ---- "Сегодня" — компактная карточка "продолжить", без текста упражнения ---- */

.today-card {
  border-radius: var(--r-lg);
  padding: 14px;
  color: #fff;
}

.today-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.today-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: #fff;
}
.today-icon svg { width: 20px; height: 20px; }
.today-card.locked { opacity: .92; }

.today-program { font-size: 11px; opacity: 0.85; }
.today-title { font-size: 15px; font-weight: 600; margin-top: 2px; }
/* Текст занимает всё, что осталось между обложкой и кнопкой, и не выдавливает их. */
.today-text { flex: 1; min-width: 0; }

/* ---- Сетка карточек программ ("Основы") — цвета задаются в app.js (PROGRAM_STYLE),
   тут только форма карточки. ---- */

.programs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.program-card {
  border-radius: var(--r-lg);
  padding: 14px 12px;
  color: #fff;
  cursor: pointer;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.program-card .pc-icon { font-size: 26px; }
.program-card .pc-title { font-size: 14px; font-weight: 600; margin-top: 10px; line-height: 1.25; }
.program-card .pc-progress { font-size: 11px; opacity: 0.85; margin-top: 4px; }

/* ---- Визард урока (цель → инструкции → обучение → фидбек) ---- */

#screen-lesson { padding-top: 4px; }

.lf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.lf-icon-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  padding: 0;
  margin: 0;
}

.lf-spacer { visibility: hidden; }
.lf-icon-btn.active { color: #e0607a; border-color: #f3c6d1; }

.lf-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-900);
}

.lf-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.lf-progress[hidden] { display: none; }

/* Полоски прогресса тоже на зелёном фоне: заливка белая, а не --green-600,
   иначе заполненная часть сливалась бы с фоном. */
.lf-progress-seg {
  flex: 1;
  height: 5px;
  border-radius: 5px;
  background: rgba(11, 51, 36, .28);
  position: relative;
  overflow: hidden;
}

.lf-progress-seg::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--fill, 0%);
  background: #fff;
  border-radius: 5px;
  transition: width .2s ease;
}

/* Переключатель "Инструкции/Обучение" лежит прямо на зелёном фоне шапки урока,
   поэтому оформлен как сегмент-контрол на цветной подложке: раньше обе вкладки
   были светлыми плашками, отличавшимися лишь оттенком, а текст неактивной —
   бледно-серым, и понять, какая выбрана, было почти невозможно. */
.lf-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 999px;
  /* Тёмная подложка, а не полупрозрачная лёгкая: на зелёном фоне белый текст
     невыбранной вкладки на светлой подложке читался плохо. */
  background: rgba(11, 51, 36, .55);
}
.lf-tabs[hidden] { display: none; }

.lf-tab {
  flex: 1;
  margin: 0;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  color: #fff;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}

/* Активная — сплошная белая «таблетка» с тёмно-зелёным текстом: контраст с
   неактивной однозначный, видно с одного взгляда. */
.lf-tab.active {
  background: #fff;
  color: var(--green-900);
  box-shadow: 0 2px 8px rgba(11, 51, 36, .22);
}

.lf-image-placeholder {
  height: 150px;
  border-radius: var(--r-lg);
  border: 1.5px dashed var(--line);
  background: var(--green-050);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  margin-bottom: 18px;
  padding: 16px;
}

.lf-image-placeholder.tall { height: 220px; }

.lf-image-photo {
  /* 3:2 — реальные пропорции референс-фото (1536x1024 → 800x533), так фото влезает
     целиком без обрезки сверху/снизу, а не по фиксированной высоте, как у плейсхолдера. */
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--green-050);
}
.lf-image-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.lf-goal-icon {
  width: 76px;
  height: 76px;
  margin: 4px auto 16px;
  border-radius: 50%;
  background: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}

.lf-goal-icon-media {
  overflow: hidden;
}

.lf-goal-icon-media img,
.lf-goal-icon-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lf-goal-title { text-align: center; font-size: 19px; margin: 0 0 10px; }
.lf-goal-text { text-align: center; color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }

.lf-breed-note {
  background: var(--clay-bg);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 18px;
}

.lf-prep-label {
  display: flex;
  align-items: center;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.lf-prep-list {
  margin: 0 0 14px;
  padding: 10px 10px 10px 26px;
  background: var(--green-050);
  border-radius: var(--r-sm);
}
.lf-prep-list li { font-size: 14px; line-height: 1.5; margin-bottom: 6px; color: var(--ink-soft); }
.lf-prep-list li:last-child { margin-bottom: 0; }

.lf-step-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  margin: 0 0 20px;
}

.lf-nav-row { display: flex; gap: 8px; }
.lf-nav-row .lf-primary-btn { flex: 2; margin: 0; }
.lf-secondary-btn {
  flex: 1;
  margin: 0;
  background: var(--green-050);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

/* Шаги упражнения — карточками с номером-кружком вместо простого нумерованного
   списка: во время тренировки взгляд бросают на экран мельком, и шаг нужно
   находить мгновенно. counter-reset/counter-increment — нумерация без <ol>-маркера,
   который нельзя стилизовать под кружок. */
.lf-training-steps {
  counter-reset: lf-step;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lf-training-steps li {
  counter-increment: lf-step;
  position: relative;
  padding: 13px 14px 13px 46px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.lf-training-steps li::before {
  content: counter(lf-step);
  position: absolute;
  top: 12px;
  left: 12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-600);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.lf-timer-wrap {
  margin-bottom: 18px;
  padding: 14px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--green-700), var(--green-600));
  color: #fff;
}
.lf-timer-wrap h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, .75);
}
.lf-timer-note {
  margin: -4px 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .85);
}
/* Кнопки и цифры таймера на зелёной подложке — светлые: базовые стили .timer-btn
   наследуют синюю кнопку Telegram (--tg-theme-button-color), которая выбивалась
   из палитры приложения. */
.lf-timer-wrap .timer-display { color: #fff; font-size: 26px; }
.lf-timer-wrap .timer.running .timer-display { color: #ffe08a; }
.lf-timer-wrap .timer.done .timer-display { color: #bdf5d5; }
.lf-timer-wrap .timer-btn {
  background: #fff;
  color: var(--green-900);
  font-weight: 700;
}
.lf-timer-wrap .timer-reset {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.lf-success-note {
  position: relative;
  background: var(--green-050);
  border: 1px solid var(--green-100);
  border-left: 4px solid var(--green-600);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--green-900);
  margin-bottom: 18px;
}

.lf-question-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 12px;
  background: var(--paper);
}
.lf-question-card p { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); }

.lf-toggle-row { display: flex; gap: 8px; }
.lf-toggle-btn {
  flex: 1;
  margin: 0;
  background: var(--green-050);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.lf-toggle-btn.active { background: var(--green-600); color: #fff; border-color: var(--green-600); }

.lf-mistakes-hint {
  background: var(--clay-bg);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
}
.lf-mistakes-hint strong { display: block; margin-bottom: 6px; color: var(--ink); }
.lf-mistakes-hint ul { margin: 0; padding-left: 18px; }
.lf-mistakes-hint li { line-height: 1.45; margin-bottom: 5px; color: var(--ink-soft); }
.lf-mistakes-hint li:last-child { margin-bottom: 0; }

.lf-primary-btn {
  background: var(--green-600);
  color: #fff;
  font-weight: 700;
  border-radius: var(--r-md);
  padding: 13px;
}

.lf-primary-btn:disabled { opacity: .5; }

/* ---- Таймер подхода ---- */

.timer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.timer-btn {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  white-space: nowrap;
}

.timer-display {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.timer.running .timer-display { color: var(--clay); }
.timer.done .timer-display { color: var(--green-600); }

.timer-reset {
  width: auto;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--green-100);
  color: var(--green-900);
}

/* Таймер на пастельной карточке «Сегодня» — тёмный текст поверх светлого фона. */
.today-timer {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.5);
}
.today-timer .timer-btn { background: #fff; color: var(--pastel-ink); }
.today-timer .timer-display { color: var(--pastel-ink); }
.today-timer.running .timer-display { color: #b5573c; }
.today-timer.done .timer-display { color: var(--green-700); }
.today-timer .timer-reset { background: rgba(255, 255, 255, 0.7); color: var(--pastel-ink); }

/* ---- Подход под породную группу ---- */

.breed-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.breed-icon { font-size: 20px; }

.breed-card p { margin: 6px 0; line-height: 1.45; font-size: 14px; color: var(--ink-soft); }

.breed-plan {
  background: var(--green-100);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-900);
}
.breed-plan-src { font-weight: 400; opacity: 0.7; font-size: 12px; }

.breed-row { font-size: 13px; line-height: 1.45; margin-top: 10px; color: var(--ink); }
.breed-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.breed-risk { border-left: 3px solid var(--clay); padding-left: 10px; }

.breed-caveat { font-size: 12px; color: var(--ink-faint); margin-top: 12px; line-height: 1.4; }

/* ---- Советы — список статей ---- */

/* Раньше строки лежали прямо на фоне страницы — на границе зелёной/светлой
   части это выглядело как голый текст, а не блок. Оборачиваем список в
   карточку (тот же приём, что у #favorites-list/#my-programs-list). */
#tips-list {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 14px;
  box-shadow: 0 6px 18px rgba(22, 60, 44, .08);
}

.tip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.tip-row:last-child { border-bottom: none; }

.tip-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* Картинка крупнее эмодзи-версии: иллюстрация на 40px читается как пятно. Без
   подложки и скругления — PNG уже на прозрачном фоне и со своей формой, квадрат
   за ним только спорил с ней. Вписываем целиком (contain), а не обрезаем: у части
   картинок при обрезке уходит морда. Эмодзи-вариант .tip-icon плашку сохраняет —
   без неё символ на пустом месте выглядит потерянным. */
.tip-icon-img {
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.tip-icon-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tip-title { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); }

/* ---- Плашка входа в каталог статей (обзор) ---- */

/* Терракота — тот же код цвета, что у врезки-статьи внутри главы
   (.roadmap-article): статьи узнаются по нему во всём приложении. */
.articles-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--clay-line);
  border-radius: var(--r-lg);
  background: var(--clay-bg);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.articles-entry:active { transform: scale(.99); }

.articles-entry-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--clay);
}
.articles-entry-icon svg { width: 21px; height: 21px; }

.articles-entry-body { min-width: 0; flex: 1; }
.articles-entry-title {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--green-900);
}
.articles-entry-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.articles-entry-arrow { color: var(--clay); font-size: 17px; font-weight: 700; flex-shrink: 0; }

/* ---- Каталог статей: список на отдельном экране (см. loadArticles) ---- */

/* Белая карточка под всем списком. Без неё строки лежали прямо на #canvas-bg-layer,
   и на зелёной части фоновой картинки тёмный текст пропадал — а фон ещё и едет
   параллаксом при скролле, так что подобрать цвет текста под него нельзя. */
.articles-card {
  padding: 4px 14px 6px;
  border: 1px solid rgba(22, 60, 44, .08);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 60, 44, .07);
}
.articles-hint {
  margin: 12px 2px 10px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

/* Переключатель "Все / Избранное". Подчёркивание, а не заливка-пилюля: карточка
   каталога и так белая на фоновой картинке, второй заливной элемент внутри неё
   спорил бы за внимание со строками статей. */
.articles-tabs {
  display: flex;
  gap: 18px;
  margin: 2px 2px 0;
  border-bottom: 1px solid var(--line);
}
.articles-tab {
  /* width/border-radius сбрасываем явно: глобальное `input, select, button`
     растягивает любую кнопку на всю ширину, из-за чего подчёркивание активной
     вкладки уезжало через пол-экрана вместо ширины слова. */
  width: auto;
  padding: 12px 2px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.articles-tab.active {
  color: var(--clay);
  border-bottom-color: var(--clay);
}
.articles-tab-count { font-variant-numeric: tabular-nums; }

.articles-empty {
  margin: 18px 2px 20px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

/* Отметка избранного в строке каталога. Прижата вправо, поэтому body должен
   растягиваться — иначе сердечко прилипает к заголовку. */
.article-row-fav {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--clay);
  font-size: 15px;
}

/* Строка крупнее .tip-row: у статьи есть обложка программы, и по ней раздел
   узнаётся быстрее, чем по заголовку — миниатюра тут несёт навигацию, а не декор. */
.article-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.article-row:last-child { border-bottom: 0; }
.article-row:active { transform: scale(.99); }

.article-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Обложка вписывается целиком: миниатюра квадратная, а исходники разного
   соотношения — обрезка по краям съедала бы у части из них собаку. */
.article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.article-thumb-icon { font-size: 24px; }

.article-row-body { min-width: 0; }
.article-row-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.article-row-meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--clay);
}

#tip-detail-body p {
  white-space: pre-line;
  line-height: 1.5;
  margin-bottom: 12px;
  color: var(--ink);
}

/* ---- Экран-читалка: подробная статья (текст — program_articles.py на сервере) ---- */

.art-hero {
  margin: -16px -16px 0;
  padding-bottom: 28px;
  background: linear-gradient(160deg, var(--green-700), var(--green-600));
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  position: relative;
}

.art-hero-bar {
  display: flex;
  justify-content: space-between;
  padding: 16px;
}

/* Фото вместо градиента — картинка целиком, без обрезки (см. openArticle в app.js).
   Кнопки — на обычном отступе сверху (как везде в приложении), а не подогнаны под
   текст конкретной картинки — это ломается на любом другом фото. Читаемость кнопок
   на ЛЮБОМ фото обеспечивает постоянная затемняющая плашка сверху (::before), а не
   позиция кнопок. */
.art-hero.art-hero-photo {
  padding-bottom: 0;
  overflow: hidden;
}
.art-hero-photo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  z-index: 1;
  pointer-events: none;
}
.art-hero-photo .art-hero-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.art-hero-photo .art-icon-btn {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
.art-hero-photo .art-hero-icon { padding: 0; }

/* Обложка программы как hero — НЕ полноэкранным фото: PROGRAM_STYLE[].image это
   иконки 240-420px (в шапке главы рендерятся шириной 104px), растянутые на всю
   ширину экрана они мылят. Показываем их крупной иллюстрацией по центру поверх
   фирменного градиента программы. Полный bleed (.art-hero-photo выше) — только для
   собственных фото статьи на 700px. */
/* Потолки подобраны под нативный размер файлов (вырезанные обложки — около 256px по
   большей стороне): крупнее уже пошло бы растягивание выше исходного разрешения. */
.art-hero-cover .art-hero-icon { padding: 10px 0 4px; }
.art-hero-cover .art-hero-icon img {
  width: auto;
  max-width: 240px;
  max-height: 196px;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18));
}

.art-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.art-icon-btn.active { color: #ff8a8a; }

.art-hero-icon {
  display: block;
  text-align: center;
  font-size: 56px;
  line-height: 1;
  padding: 10px 0 4px;
}

.art-hero-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.art-body { padding-top: 20px; }

.art-body h1 {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 14px;
}

.art-intro {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

#art-sections h2 {
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--green-900);
}

#art-sections p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 22px;
}

.art-footer { padding: 4px 0 8px; }

/* Скелет и состояние ошибки, пока грузится текст статьи (см. openArticle в app.js). */
.art-skeleton span {
  display: block;
  height: 13px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--green-050), var(--green-100), var(--green-050));
  background-size: 200% 100%;
  animation: art-skeleton-shimmer 1.2s linear infinite;
}
.art-skeleton span:nth-child(2) { width: 92%; }
.art-skeleton span:nth-child(3) { width: 74%; }
@keyframes art-skeleton-shimmer { to { background-position: -200% 0; } }
.art-error { color: var(--clay); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }

/* ---- Плавающий кликер в упражнении — маленький перетаскиваемый кружок ---- */

.floating-clicker {
  position: fixed;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--green-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  z-index: 500;
  touch-action: none;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.floating-clicker .clicker-icon-svg { width: 34px; height: auto; filter: none; }
.floating-clicker-img { width: 34px; height: auto; display: block; }
.floating-clicker[hidden] { display: none; }
.floating-clicker.pressed { transform: scale(0.9); }
.floating-clicker.dragging {
  transform: scale(1.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Одноразовая подсказка "зажмите, чтобы передвинуть" — потомок самой кнопки, поэтому
   двигается вместе с ней без отдельной логики позиционирования. right:0 держит её в
   границах экрана независимо от того, у какого края кнопка (по умолчанию — справа). */
.floating-clicker-hint {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
  width: max-content;
  max-width: 150px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--green-900);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.floating-clicker-hint::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 14px;
  border: 5px solid transparent;
  border-top-color: var(--green-900);
}
.floating-clicker-hint[hidden] { display: none; }

/* ==========================================================================
   РЕДИЗАЙН (этап 1): тёплая светлая карточка питомца вместо сплошного зелёного
   баннера, объёмные цветные плашки-статистики, карточки программ горизонтальной
   лентой (градиент+иконка — фото ещё не для всех программ, см. обсуждение).
   ========================================================================== */

.ph-header {
  margin: 0 0 20px;
  padding: 20px;
  background: var(--pastel-mint) url('images/ph-header-bg.jpg?v=1') center / cover no-repeat;
  color: var(--pastel-ink);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(22, 60, 44, .18);
}

.ph-pet { margin-bottom: 18px; }

.ph-avatar {
  width: 84px;
  height: 84px;
  background: rgba(255, 255, 255, .6);
  color: var(--pastel-ink);
  font-size: 32px;
  box-shadow: 0 0 0 3px #fff;
}

.ph-name { color: var(--pastel-ink); font-size: 20px; }
.ph-breed { color: var(--pastel-ink-soft); opacity: 1; font-size: 14px; }
.ph-age {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--pastel-ink);
  font-size: 12px;
  font-weight: 600;
}
.ph-age[hidden] { display: none; }

.ph-stats { gap: 6px; }
.ph-stat {
  background: #BBCCBF;
  border-radius: var(--r-md);
  padding: 8px 6px;
}
.ph-stat .num { color: var(--pastel-ink); }
.ph-stat .label { color: var(--pastel-ink-soft); opacity: 1; }
.ph-stat:nth-child(2) .num { color: #c47a2e; }
.ph-stat:nth-child(3) .num { color: #b5573c; }

/* ---- "Сегодня" — пастельный персик со скриншота референса, крупнее радиус
   и объёмнее тень, кнопки-пилюли; текст фиксированно тёмный (карточка светлая
   независимо от темы приложения). ---- */

/* Компактный вид: всё в одну строку, без блока кнопок снизу — карточка целиком
   кликабельна и открывает урок (см. loadToday в app.js), а справа только
   кнопка-галочка «выполнено». */
.today-card {
  border-radius: 16px;
  padding: 10px 12px;
  background: #FDF6EE;
  color: var(--pastel-ink);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
  cursor: pointer;
  transition: transform .12s ease;
}
.today-card:active { transform: scale(.99); }
.today-icon { width: 46px; height: 46px; border-radius: 13px; color: #fff; }
/* Обложка программы вместо эмодзи — картинка заполняет плашку целиком. */
.today-icon-cover { background: none; overflow: hidden; padding: 0; }
.today-icon-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.today-program { color: var(--pastel-ink-soft); }
.today-title { color: var(--pastel-ink); }
.today-locked-note { margin-top: 2px; font-size: 11px; color: var(--pastel-ink-soft); }

.today-chevron {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--pastel-ink-soft);
}

.today-open {
  flex-shrink: 0;
  width: auto;
  margin: 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--green-600);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* Что приготовить к уроку — строкой под названием, без подложки: это подсказка
   «взять с собой», она не должна спорить по весу с породной заметкой ниже. */
.today-prep {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pastel-ink-soft);
}

/* Породная заметка под строкой — светлая подложка поверх пастельной карточки. */
.today-breed-note {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .55);
  color: var(--pastel-ink);
  font-size: 12px;
  line-height: 1.4;
}

/* Несколько начатых-но-незавершённых уроков сразу — лента карточек со scroll-snap
   (см. loadToday в app.js). Нативный свайп пальцем вместо самодельных touch-
   обработчиков: надёжнее в Telegram WebView и не спорит с жестом "назад". */
.today-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  margin: 0 -16px;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.today-carousel-slide .today-card { margin-left: 16px; margin-right: 16px; }
.today-carousel::-webkit-scrollbar { display: none; }
.today-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.today-carousel-tail { flex: 0 0 4px; }
.today-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.today-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background .15s ease, transform .15s ease;
}
.today-carousel-dot.active { background: var(--green-600); transform: scale(1.3); }

/* ---- Оверлей серии (Duolingo-style) — на весь экран после урока, раз в день ---- */

.streak-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--green-900), var(--green-700) 60%, var(--green-600));
  opacity: 0;
  transition: opacity .22s ease;
}
.streak-modal[hidden] { display: none; }
.streak-modal.show { opacity: 1; }

.streak-modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transform: scale(.85);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.streak-modal.show .streak-modal-inner { transform: scale(1); }

.streak-modal-flame {
  width: 132px;
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .35));
  animation: streak-flame-bounce 1.1s ease-in-out infinite;
}
@keyframes streak-flame-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.05); }
}

.streak-modal-count {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.streak-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}
.streak-modal-sub {
  margin: 8px 0 28px;
  max-width: 280px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .78);
}
.streak-modal-btn {
  width: auto;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--amber);
  color: #fff;
  font-size: 15px;
}