/* ============================================================
   Трекер калорий — Telegram Mini App
   Пастельная дизайн-система.
   Стилизует ИМЕННО те классы и id, которые реально генерирует
   фронтенд (index.html + js/*.js). Все комментарии — на русском.
   Mobile-first, максимальная ширина контента 480px.

   ВАЖНО про модификаторы: JS-файлы непоследовательны —
   page-scan.js использует btn-cta/btn-ghost/btn-block (один дефис),
   а page-diary.js / page-account.js — btn--cta/btn--ghost (два дефиса).
   Скелетон встречается как skeleton-block и как skeleton--block.
   Поэтому ниже все варианты определены вместе как алиасы.
   ============================================================ */

/* ---------- Дизайн-токены ----------
   Живут в css/tokens.css, который подключается ПЕРВЫМ.
   Здесь их объявлять нельзя: один источник правды. */

/* ---------- Базовый сброс ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Гасим «оттягивание»/перескролл всего документа (Telegram-вебвью). */
  overscroll-behavior: none;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-normal);
  font-size: var(--fs-body);
  /* Поддержка стабильной высоты вьюпорта Telegram */
  min-height: 100vh;
  min-height: var(--tg-viewport-stable-height, 100vh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Отключаем «оттягивание» страницы */
  overscroll-behavior-y: none;
}

/* Изображения по умолчанию адаптивны */
img {
  max-width: 100%;
  display: block;
}

/* Поля ввода наследуют шрифт */
input,
select,
button,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Убираем синюю подсветку тапов в мобильных браузерах */
button,
a,
.tab {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Кольцо фокуса ----------
   Владелец прислал скриншоты: после тапа по вкладке «Питание» вокруг неё
   оставался чёрный прямоугольник, у кнопки камеры — чёрное кольцо. Это
   стандартный outline браузера: кнопка после нажатия остаётся в фокусе.
   Для пальца и мыши кольцо — мусор, для клавиатуры — единственный способ
   понять, где ты. Поэтому:
     1) фокус не с клавиатуры — без кольца;
     2) фокус с клавиатуры — своё кольцо цвета действия вместо чёрного.
   Правила стоят в начале файла намеренно: у полей ввода ниже своя
   подсветка фокуса (граница + мягкая тень) и свой outline: none, и при
   равной специфичности они должны побеждать.
   Класс html.is-pointer ставит app.js по первому касанию/клику: часть
   вебвью Telegram считает фокус после тапа «видимым» (:focus-visible
   срабатывает), и без этой страховки кольцо просто сменило бы цвет
   с чёрного на зелёный. Страховка касается только кнопок и ссылок: поле
   ввода в фокусе после тапа показывать как раз нужно — туда пойдёт текст. */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

html.is-pointer button:focus,
html.is-pointer a:focus,
html.is-pointer summary:focus,
html.is-pointer [role="button"]:focus {
  outline: none;
}

/* ============================================================
   ОСНОВНОЙ КОНТЕЙНЕР И КАРКАС СТРАНИЦ
   ============================================================ */

/* #view — контейнер, который App очищает и наполняет при навигации.
   Нижний отступ учитывает высоту tabbar + ПРИПОДНЯТЫЙ круг «Сегодня»
   (он выступает над панелью на 24px), чтобы контент не прятался под ним. */
#view {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* Верхний отступ учитывает безопасную зону Telegram (вырез экрана + плавающие
     кнопки Close/«…» сверху) — иначе при открытии из поиска контент уезжает
     под элементы Telegram. Вне Telegram переменная не задана -> отступ 16px. */
  padding: calc(16px + var(--tg-safe-top, 0px)) 16px 16px;
  padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 44px);
}

/* Корневая обёртка каждой страницы (page page-scan / page-diary / page-account).
   Плавное появление при смене вкладки. */
.page {
  animation: fadeIn .28s ease;
}

.page-scan,
.page-diary,
.page-account {
  display: block;
}

/* Анимация плавного появления */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ТИПОГРАФИКА И ЗАГОЛОВКИ СТРАНИЦ
   ============================================================ */
/* Заголовки набраны сжатым гротеском. Он уже сам по себе читается как
   спортивная графика, а на узком экране даёт запас ширины: длинные русские
   слова помещаются в строку там, где обычный гротеск их переносил.
   Верхний регистр даём только h1 и h2 — это короткие названия разделов;
   h3 часто стоит в карточках рядом с обычным текстом, и капсом он бы
   выглядел криком. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: var(--lh-heading);
  letter-spacing: .01em;
}

h1, h2 {
  text-transform: uppercase;
  line-height: var(--lh-tight);
}

/* Шапка страницы (page-head) — у scan-страницы */
.page-head {
  margin-bottom: 18px;
}

/* Главный заголовок страницы: page-title (scan) и page__title (diary) */
/* Заголовок экрана набран сжатым шрифтом в верхнем регистре: это главный
   приём спортивного оформления — крупно, плотно, как на табло. Сжатый
   рисунок позволяет ставить длинные русские слова («ТРЕНИРОВКА») большим
   кеглем, не перенося строку на узком экране. */
.page-title,
.page__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: var(--s2);
}

/* Надзаголовок секции: мелкий верхний регистр с разрядкой. Отделяет блоки
   без лишних линий и рамок. */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted);
}

/* Крупное число: остаток калорий, вес, таймер, рабочий вес. Моноширинные
   цифры, чтобы значения не «прыгали» при пересчёте. */
.num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ============================================================
   ТЁМНЫЙ БЛОК (.hero)
   Плотный тёмный прямоугольник с белым заголовком и оранжевым
   акцентом — в обеих темах. Именно он задаёт спортивный характер
   и отделяет главное действие от остального экрана.
   Фоновое изображение подставляется переменной --hero-img;
   поверх него лежит затемнение, иначе белый текст не читается.
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--s5);
  border-radius: var(--radius-xl);
  background-color: var(--hero);
  color: var(--hero-text);
}

.hero--img {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .74) 100%),
    var(--hero-img, none);
  background-size: cover;
  background-position: center;
}

.hero .eyebrow,
.hero__meta {
  color: var(--hero-muted);
}

.hero__title {
  margin: var(--s2) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--hero-text);
}

.hero__meta {
  margin: var(--s2) 0 0;
  font-size: var(--fs-sm);
}

/* page__title в дневнике стоит над датабаром — даём чуть больше отступа */
.page__title {
  margin-bottom: 14px;
}

/* Подзаголовок страницы (page-subtitle) */
.page-subtitle {
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: var(--lh-normal);
}

/* ============================================================
   КАРТОЧКИ (.card)
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  margin-bottom: var(--s3);
}

/* Вложенный блок внутри карточки: без собственной границы и тени,
   отделяется только заливкой. Карточка в карточке с двойной тенью —
   главный источник визуального шума в прежней версии. */
.card .card,
.card-inner {
  background: var(--surface-2);
  border: none;
  box-shadow: none;
  border-radius: var(--radius);
}

/* ============================================================
   КНОПКИ
   .btn — базовая; модификаторы в обоих написаниях (одинарный/двойной дефис)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s4);
  border: none;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  /* Сжатый шрифт в верхнем регистре: кнопка читается как команда, а не как
     фраза. Кегль 20px жирным — это ещё и «крупный текст» по WCAG, поэтому
     белая подпись на ярком оранжевом проходит по контрасту. */
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-btn);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  cursor: pointer;
  user-select: none;
  transition: background .18s ease, transform .08s ease, opacity .18s ease,
    box-shadow .18s ease;
}

.btn:active {
  transform: scale(.98);
}

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Блочная кнопка на всю ширину с отступом сверху между кнопками */
.btn-block {
  width: 100%;
  display: flex;
}

/* Когда несколько btn-block идут подряд — разделяем их вертикально */
.btn-block + .btn-block {
  margin-top: 10px;
}

/* Основная кнопка действия (CTA): зелёная, белый текст.
   Алиасы btn-cta (page-scan) и btn--cta (page-diary, page-account). */
.btn-cta,
.btn--cta {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.btn-cta:active,
.btn--cta:active {
  background: var(--cta-press);
}

/* Призрачная (вторичная/контурная) кнопка.
   Алиасы btn-ghost (page-scan) и btn--ghost (page-diary, page-account). */
.btn-ghost,
.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

.btn-ghost:active,
.btn--ghost:active {
  background: var(--surface-2);
}

/* Опасная кнопка (на будущее / удаление) */
.btn-danger {
  background: var(--danger);
  color: var(--on-accent);
}

.btn-danger:active {
  filter: brightness(.94);
}

/* ============================================================
   НИЖНЯЯ НАВИГАЦИЯ (#tabbar)
   Слева направо: Добавки · Тренировка · СЕГОДНЯ · Питание · Профиль.
   Геометрия центральной вкладки — в блоке «ЦЕНТРАЛЬНАЯ ВКЛАДКА» ниже.
   ============================================================ */
#tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  /* Липкая панель: поверхность + волосяная граница сверху, без тени.
     Фон, граница и тень разом — запрещённая тройка из правила поверхностей;
     отделить панель от контента хватает границы. */
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: none;
  /* Учитываем безопасную нижнюю область устройства */
  padding-bottom: var(--safe-bottom);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--tabbar-height);
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease;
}

/* Значки сплошные: контурная линия на 24 пикселях выглядит бледной
   «палкой», а силуэт читается мгновенно даже боковым зрением. */
.tab-icon {
  width: 26px;
  height: 26px;
  transition: transform var(--dur-fast) var(--ease);
}

/* Прорези внутри силуэта (перемычка таблетки) красятся цветом панели,
   поэтому одинаково работают в светлой и тёмной теме. */
.tab-icon__cut {
  fill: var(--surface);
}

.tab-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Активная вкладка: цвет действия и более плотная подпись.
   Иконка не «подпрыгивает» и не меняет размер — прыжок при переключении
   вкладок читается как дефект отрисовки. */
.tab {
  position: relative;
}

.tab.active {
  color: var(--accent);
}

.tab.active .tab-label {
  font-weight: var(--fw-bold);
}

/* Оранжевая черта сверху у активной вкладки: цвет значка сам по себе на
   маленьком силуэте заметен слабо, а черта видна сразу.
   Центральную вкладку исключаем: её ::before — распорка на месте иконки,
   и превращать её в черту нельзя, иначе подпись «Сегодня» съедет вверх. */
.tab:not(.tab-home).active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 3px;
  margin-left: -15px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}

.tab:active .tab-icon {
  transform: scale(.92);
}

/* Экраны-задачи (тренировка, камера, оплата, онбординг) прячут навигацию:
   из активной тренировки нельзя выйти случайным тапом, а с камеры —
   потерять снятый кадр. */
body.is-task-screen #tabbar {
  display: none;
}

body.is-task-screen #view {
  padding-bottom: calc(var(--safe-bottom) + var(--s5));
}

/* ============================================================
   СТРАНИЦА «ОПРЕДЕЛЕНИЕ» (page-scan)
   ============================================================ */

/* --- Зона загрузки фото (dropzone) --- */
.scan-dropzone {
  text-align: center;
  padding: 28px 18px;
}

.scan-dropzone__icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 12px;
}

.scan-dropzone__hint {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.5;
}

/* --- Превью выбранного фото --- */
.scan-preview {
  padding: 0;
  overflow: hidden;
  background: var(--white);
}

.scan-preview__img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
}

.scan-preview__status {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  padding: 14px 16px;
}

/* --- Карточка результата распознавания --- */
.result-card {
  background: var(--white);
  text-align: center;
  padding: 18px;
  overflow: hidden;
}

.result-card__img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

/* Плитки Б/Ж/У */
.macros {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.macro__val {
  display: block;
  font-size: 17px;
  font-weight: 700;
}

/* Комментарий от ИИ */
.result-note {
  font-size: 14px;
  color: var(--muted);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 12px;
  text-align: left;
  line-height: 1.5;
}

/* --- Выбор приёма пищи (чипы) --- */
.meal-picker {
  margin-bottom: 16px;
}

.meal-picker__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
}

.meal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meal-chip {
  flex: 1 1 calc(50% - 4px);
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease,
    transform .08s ease;
}

.meal-chip:active {
  transform: scale(.97);
}

/* Выбранный чип (классы is-active добавляются/снимаются в JS) */
.meal-chip.is-active {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--on-accent);
}

/* --- Карточка ошибки сканирования --- */
.error-card {
  background: var(--white);
  text-align: center;
  padding: 24px 18px;
}

.error-card__icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 12px;
}

.error-card__msg {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.5;
  /* Длинный текст (в т.ч. сырой ответ модели в режиме отладки) переносим
     и при необходимости прокручиваем, чтобы карточка не разрасталась. */
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Кнопки внутри карточки ошибки разделяем по вертикали */
.error-card .btn + .btn {
  margin-top: 10px;
}

/* --- Блок отладки: «сырой» ответ модели на экране результата (DEBUG_AI) --- */
.ai-debug {
  margin: 12px 0 4px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
}

.ai-debug__sum {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
}

.ai-debug__pre {
  margin: 0;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   СТРАНИЦА «МОЙ РАЦИОН» (page-diary)
   ============================================================ */

/* Контейнер контента дневника (скелетон / день / ошибка) */
.diary-content {
  display: block;
}

/* --- Переключатель даты (◀ дата ▶) --- */
.diary-datebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}

.diary-datebar__nav {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}

.diary-datebar__nav:active {
  transform: scale(.94);
  background: var(--accent);
}

.diary-datebar__label {
  flex: 1;
  text-align: center;
  line-height: 1.2;
  /* Это <button> (открывает календарь) — гасим «кнопочный» вид, чтобы выглядел
     как обычная подпись даты (не серая плашка). */
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.diary-datebar__date {
  display: block;
  font-weight: 700;
  font-size: 16px;
}

.diary-datebar__iso {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* --- Секция приёма пищи --- */
.diary-meal {
  padding: 14px 16px;
}

.diary-meal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.diary-meal__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 16px;
}

.diary-meal__icon {
  font-size: 18px;
  line-height: 1;
}

.diary-meal__kcal {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* Список записей внутри секции */
.diary-meal__list {
  list-style: none;
}

/* --- Одна запись дневника --- */
.diary-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.diary-entry:first-child {
  border-top: none;
}

.diary-entry__main {
  flex: 1;
  min-width: 0;
}

.diary-entry__name {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diary-entry__macros {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.diary-entry__kcal {
  font-weight: 700;
  white-space: nowrap;
  font-size: 14px;
}

/* Кнопка удаления записи ✕ (маленькая иконочная) */
.diary-entry__del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--danger);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}

.diary-entry__del:active {
  background: var(--danger-soft);
  transform: scale(.92);
}

.diary-entry__del:disabled {
  opacity: .5;
  cursor: default;
}

/* --- Карточка итога за день + прогресс цели --- */
.diary-total {
  background: var(--white);
  padding: 18px;
}

.diary-total__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.diary-total__caption {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.diary-total__value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
}

.diary-total__macros {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Подсказка «цель не задана» */
.diary-total__nogoal {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

/* Прогресс-бар цели */
.diary-progress {
  margin-top: 4px;
}

.diary-progress__track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}

.diary-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--cta);
  width: 0%;
  transition: width .5s ease, background .25s ease;
}

/* Превышение дневной нормы — красный */
.diary-progress__fill.is-over {
  background: var(--danger);
}

.diary-progress__labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text);
}

.diary-progress__hint {
  color: var(--muted);
}

/* Подсказка о превышении — красная */
.diary-progress__hint.is-over {
  color: var(--danger);
  font-weight: 600;
}

/* --- Пустое состояние всего дня --- */
.diary-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
}

.diary-empty__icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 12px;
}

.diary-empty__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.diary-empty__text {
  font-size: 14px;
  line-height: 1.5;
}

/* --- Карточка ошибки загрузки дневника --- */
.diary-error {
  background: var(--white);
  text-align: center;
  padding: 24px 18px;
}

.diary-error__icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 12px;
}

.diary-error__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.diary-error__text {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Кнопка «Повторить» в карточке ошибки — не на всю ширину */
.diary-error__retry {
  width: auto;
  min-width: 160px;
  margin: 0 auto;
}

/* ============================================================
   СТРАНИЦА «МОЙ АККАУНТ» (page-account)
   ============================================================ */

/* --- Шапка профиля --- */
.acc-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Аватар (картинка или заглушка-эмодзи) */
.acc-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent);
  box-shadow: var(--shadow);
  flex-shrink: 0;
}

/* Заглушка аватара (нет фото) — эмодзи по центру */
.acc-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--on-accent);
  background: var(--cta);
}

.acc-header__info {
  min-width: 0;
}

.acc-name {
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-username {
  font-size: 14px;
  color: var(--muted);
  margin-top: 2px;
}

/* --- Форма профиля --- */
.acc-form {
  display: block;
}

/* Сетка 2×2 для коротких полей (вес/рост/возраст/пол) */
.acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}

/* Поле формы: label.field оборачивает подпись и input */
.field {
  display: block;
  margin-bottom: 14px;
}

.field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Универсальный стиль для input и select */
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Поля времени и даты. iOS рисует их «родным» контролом со своей
   минимальной шириной: при width: 100% поле вылезало за край карточки, а
   пустое значение выглядело пустой полосой без подсказки. Снимаем родное
   оформление, держим ширину контейнера и рисуем значок часов справа — так
   пустое поле читается как выбор времени. Серый значка средней светлоты
   виден и на белом, и на тёмном. */
input[type="time"].field__input,
input[type="date"].field__input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  padding-right: 44px;
  line-height: 49px;
  text-align: left;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}

input[type="time"].field__input::-webkit-date-and-time-value,
input[type="date"].field__input::-webkit-date-and-time-value {
  text-align: left;
}

/* Родной значок Chrome/Android прозрачен, но кликабелен — лежит поверх
   нашего, и тап по часам по-прежнему открывает выбор времени. */
input[type="time"].field__input::-webkit-calendar-picker-indicator,
input[type="date"].field__input::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

.field__input:focus {
  border-color: var(--cta);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Стилизованная стрелка для select-полей */
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238A8A93' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 38px;
}

/* Подсказка под формой */
.acc-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.5;
}

/* Внутри формы кнопки идут одна под другой с отступом */
.acc-form .btn {
  margin-top: 10px;
}

/* Сам бар (ширина задаётся inline-стилем в JS) */
.hist-row__bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--cta);
  min-width: 2px;
  transition: width .5s ease, background .25s ease;
}

/* Бар, превышающий цель — красный */
.hist-row__bar--over {
  background: var(--danger);
}

/* Ошибка загрузки истории */
.acc-error {
  text-align: center;
  color: var(--text);
  padding: 16px 8px;
}

.acc-error__msg {
  font-size: 13px;
  color: var(--danger);
  margin: 8px 0 14px;
  line-height: 1.5;
}

/* Кнопка «Повторить» в ошибке истории — компактная */
.acc-error .btn {
  width: auto;
  min-width: 160px;
  margin: 0 auto;
}

/* ============================================================
   СКЕЛЕТОНЫ ЗАГРУЗКИ (shimmer)
   ============================================================ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--surface),
    transparent
  );
  animation: shimmer 1.3s infinite;
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

/* Полоса-строка скелетона */
.skeleton-line {
  height: 14px;
  margin-bottom: 10px;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

/* Узкая строка */
.skeleton-line.short {
  width: 50%;
}

/* Заголовочная строка (чуть выше и шире) */
.skeleton-line.skeleton-title {
  height: 18px;
  width: 60%;
}

/* Строка-итог дня */
.skeleton-line.skeleton-total {
  height: 22px;
  margin-bottom: 16px;
}

/* Контейнер скелетона дневника */
.diary-skeleton {
  display: block;
}

/* Крупный блок-скелетон. Алиасы: skeleton-block (diary) и skeleton--block (account) */
.skeleton-block,
.skeleton--block {
  height: 160px;
  margin-bottom: 16px;
  border-radius: var(--radius);
}

/* Скелетон-блок, который одновременно является секцией приёма пищи,
   получает мягкий внутренний вид карточки */
.diary-meal.skeleton-block {
  height: auto;
  padding: 16px;
}

/* ============================================================
   ГЛОБАЛЬНЫЙ ОВЕРЛЕЙ ЗАГРУЗКИ (#loading)
   Управляется классом .show (add/remove в app.js), НЕ атрибутом hidden.
   ============================================================ */
#loading {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* По умолчанию скрыт; перекрываем атрибут hidden из разметки */
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Видимое состояние (app.js добавляет класс show) */
#loading.show {
  display: flex;
  animation: fadeIn .2s ease;
}

/* Большой вращающийся спиннер */
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--surface);
  border-top-color: var(--cta);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Маленький встроенный спиннер (например, внутри кнопки) */
.spinner-sm {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--surface);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}

/* ============================================================
   ТОСТ-УВЕДОМЛЕНИЕ (#toast)
   По умолчанию скрыт/прозрачен; видим при классе .show (app.js).
   ============================================================ */
#toast {
  position: fixed;
  left: 50%;
  /* 32px над панелью: центральный круг «Сегодня» выступает на 24px, и тост
     на прежних 16px ложился прямо на него. */
  bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--s6));
  transform: translateX(-50%) translateY(20px);
  z-index: 1100;
  max-width: 90%;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

/* Видимое состояние тоста (app.js добавляет класс show) */
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   АДАПТАЦИЯ ПОД ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ============================================================ */
@media (max-width: 360px) {
  body { font-size: 15px; }

  .macros { gap: 6px; }

  .meal-chip {
    font-size: 13px;
    flex-basis: calc(50% - 4px);
  }

  .result-card__kcal-val { font-size: 34px; }
}

/* ============================================================
   ============================================================
   РАСШИРЕНИЕ: НОВЫЙ ФУНКЦИОНАЛ (тренировки, спортпит, ручное
   добавление, рекомендации, цель/БЖУ, уведомления, редактор скана).

   Всё ниже — ДОПОЛНЕНИЕ к стилям выше. Существующие правила НЕ менялись.
   Та же пастельная палитра: --bg / --card / --accent / --cta / --text /
   --muted / --danger; радиусы --radius / --radius-sm; тень --shadow;
   кнопки наследуют .btn (min-height 52px). Все комментарии — на русском.
   ============================================================
   ============================================================ */

/* ============================================================
   ОБЩЕЕ: ПЯТЬ вкладок в #tabbar, ЦЕНТРАЛЬНАЯ — «СЕГОДНЯ»
   ------------------------------------------------------------
   Слева направо: Добавки / Тренировка / СЕГОДНЯ / Питание / Профиль.
   Все пять вкладок делят ширину поровну (flex:1), поэтому подписи стоят
   на равном шаге и на одной линии. Центральная отличается только кругом
   с иконкой, приподнятым над панелью: это «домой», и его видно с любого
   экрана. Кнопки камеры в таббаре больше нет — снимок еды вызывается из
   «Питания» и «Сегодня», а единственный затвор живёт на экране камеры.
   ============================================================ */

/* Панель должна позволять центральному кругу выступать ВВЕРХ. */
#tabbar {
  overflow: visible;
  align-items: stretch;
  justify-content: space-between;
}

/* Вкладки: равная ширина, защита от распирания подписью. */
.tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 2px;
}

.tab-label {
  /* Подпись в одну строку, аккуратно усечённую при нехватке места. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- ЦЕНТРАЛЬНАЯ ВКЛАДКА «СЕГОДНЯ» ---
   Разметка: <button.tab.tab-home> <span.tab-home__disc> + <span.tab-label>.
   Вкладка устроена как соседние (иконка над подписью), но место иконки
   занимает прозрачная распорка той же высоты: так подпись встаёт ровно
   на линию подписей соседей. Сам круг вынесен абсолютным позиционированием
   и на раскладку не влияет. */
.tab-home {
  position: relative;
}

/* Распорка на месте иконки: высота совпадает с .tab-icon (26px). */
.tab-home::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* Круг 56px выступает над панелью на 24px (top: -24px), и его низ
   приходится примерно на низ иконок соседей: подпись под ним остаётся
   свободной и стоит в общей строке. Приподнятый плавающий элемент,
   поэтому допустимы белое кольцо-обводка (отделяет круг от контента, проплывающего под ним) и
   --shadow-2.
   Круг всегда залит оранжевым: это опорная точка всей панели и главная
   кнопка приложения. Активность показываем не цветом заливки, а лёгким
   увеличением и свечением — так центр не теряется среди серых значков. */
.tab-home__disc {
  position: absolute;
  left: 50%;
  top: -24px;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 5px var(--surface), var(--shadow-accent);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.tab-home__icon {
  display: block;
  width: 27px;
  height: 27px;
}

/* Активное состояние. Префикс #tabbar нужен, чтобы правило гарантированно
   перебивало базовые .tab.active при любом порядке каскада. */
#tabbar .tab-home.active .tab-home__disc {
  transform: scale(1.06);
}

/* Нажатие: круг чуть «утапливается», подпись не двигается. */
.tab-home:active .tab-home__disc {
  transform: scale(.94);
}

#tabbar .tab-home.active:active .tab-home__disc {
  transform: scale(.94);
}

.tab-home:active .tab-home__disc,
.tab-home.active:active .tab-home__disc {
  background: var(--accent-press);
}

/* Кольцо клавиатурного фокуса рисуем вокруг круга, а не вокруг всей
   высокой вкладки: иначе рамка режет круг пополам по краю панели. */
.tab-home:focus-visible {
  outline: none;
}

.tab-home:focus-visible .tab-home__disc {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

html.is-pointer .tab-home:focus .tab-home__disc {
  outline: none;
}

/* Узкие экраны: на 360px вкладка шириной 72px, и английское «Supplements»
   полужирным (активная вкладка) не помещалось и обрезалось многоточием.
   Кегль не уменьшаем — 11px уже нижняя ступень шкалы; вместо этого
   отдаём подписи всю ширину вкладки и снимаем разрядку. */
@media (max-width: 360px) {
  .tab {
    padding: 0;
  }

  .tab-label {
    letter-spacing: 0;
  }
}

/* ============================================================
   СТРАНИЦА «ТРЕНИРОВКИ» (page-workouts)
   ============================================================ */
.page-workouts {
  display: block;
}

/* Карточка-итог: подпись слева, крупное число справа. */
.wk-summary__card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  background: var(--white);
  padding: 16px 18px;
}

/* Кнопка «Добавить тренировку» (CTA) — отступ от «Оценить». */
.wk-add {
  margin-top: 10px;
}

/* Список строк тренировок (ul без маркеров). */
.wk-item-list {
  list-style: none;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px 14px;
  margin-bottom: 16px;
  animation: fadeIn .28s ease;
}

/* Скелетон-строка тренировки (отдельная плашка). */
.wk-item.skeleton-block {
  display: block;
  height: auto;
  padding: 16px;
  border-top: none;
}

/* Пустое состояние списка тренировок. */
.wk-empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 16px;
}

.wk-empty__icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 12px;
}

.wk-empty__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.wk-empty__text {
  font-size: 14px;
  line-height: 1.5;
}

/* Ошибка загрузки тренировок. */
.wk-error {
  background: var(--white);
  text-align: center;
  padding: 24px 18px;
}

.wk-error__icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 12px;
}

.wk-error__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.wk-error__text {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Кнопка «Повторить» — компактная, по центру. */
.wk-error__retry {
  width: auto;
  min-width: 160px;
  margin: 0 auto;
}

/* ============================================================
   РАЗДЕЛ «СПОРТПИТ» (sup-*) — карточкой на странице тренировок
   ============================================================ */
.sup-card {
  display: block;
}

.sup-card__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.sup-card__subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* --- Список добавок и его скелетон --- */
.sup-list {
  display: block;
  margin-bottom: 4px;
}

.sup-skeleton {
  display: block;
}

/* Список строк добавок (на фоне страницы, без своей карточки —
   находится уже внутри карточки .sup-card). */
.sup-item-list {
  list-style: none;
}

/* Одна строка добавки. */
.sup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.sup-item:first-child {
  border-top: none;
}

/* Скелетон-строка добавки (отдельная плашка). */
.sup-item.skeleton-block {
  display: block;
  height: auto;
  padding: 16px;
  border-top: none;
  background: var(--bg);
}

.sup-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.sup-item__name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sup-item__meta {
  font-size: 12px;
  color: var(--muted);
  flex-basis: 100%;
}

/* Бейдж «🔔 напоминание». */
.sup-item__badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--cta);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Кнопка удаления добавки ✕. */
.sup-item__del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--danger);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}

.sup-item__del:active {
  background: var(--danger-soft);
  transform: scale(.92);
}

.sup-item__del:disabled {
  opacity: .5;
  cursor: default;
}

/* Пустое состояние добавок. */
.sup-empty {
  text-align: center;
  color: var(--muted);
  padding: 22px 12px;
}

.sup-empty__icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 10px;
}

.sup-empty__text {
  font-size: 14px;
  line-height: 1.5;
}

/* Ошибка загрузки добавок. */
.sup-error {
  text-align: center;
  color: var(--text);
  padding: 18px 8px;
}

.sup-error__icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 10px;
}

.sup-error__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.sup-error__text {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.sup-error__retry {
  width: auto;
  min-width: 160px;
  margin: 0 auto;
}

/* --- Форма добавления добавки --- */
.sup-form {
  display: block;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sup-form__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Строка-чекбокс «Напоминать о приёме». */
.sup-form__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
  cursor: pointer;
  user-select: none;
}

/* Сам чекбокс — увеличенный, в акцентном цвете. */
.sup-form__checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--cta);
  cursor: pointer;
}

.sup-form__check-label {
  font-size: 14px;
  color: var(--text);
}

/* Кнопка «Добавить добавку» (CTA) — отступ сверху. */
.sup-add {
  margin-top: 4px;
}

/* ============================================================
   СТРАНИЦА «МОЙ РАЦИОН» — ДОПОЛНЕНИЯ
   ============================================================ */

/* --- Баланс «Съедено − Сожжено = Итого» (когда есть тренировки) --- */
.diary-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 13px;
}

/* Общая «таблетка» для каждой части баланса. */
.diary-balance__part {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  white-space: nowrap;
}

/* Съедено — нейтральный текст. */
.diary-balance__eaten {
  color: var(--text);
}

/* Сожжено — акцент тренировок (тёплый персиковый). */
.diary-balance__burned {
  color: var(--danger);
}

/* Итог (нетто) — зелёный акцент. */
.diary-balance__net {
  color: var(--cta);
  font-weight: 700;
}

/* Знаки операций (− и =) — приглушённые. */
.diary-balance__op {
  color: var(--muted);
  font-weight: 700;
}

/* Активная (нажатая) кнопка действия — подсвечена как выбранный режим. */
.diary-actions__btn.is-active {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--on-accent);
}

/* Контейнер разворачиваемой панели (ручной ввод / рекомендации). */
.diary-panel {
  display: block;
}

/* --- Панель ручного добавления --- */
.diary-manual {
  display: block;
  background: var(--white);
}

.diary-manual__form {
  display: block;
}

/* Б / Ж / У в одну строку (три колонки). */
.diary-manual__macros {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* В компактной сетке макросов сбрасываем нижний отступ полей. */
.diary-manual__macro {
  margin-bottom: 14px;
}

/* Блок селектора приёма пищи в форме. */
.diary-manual__meal {
  margin-bottom: 16px;
}

.diary-manual__meal .field__label {
  margin-bottom: 10px;
}

/* Кнопка «Добавить в рацион». */
.diary-manual__submit {
  margin-top: 4px;
}

/* Уточнение «(необязательно)» рядом с подписью поля. */
.field__hint {
  font-weight: 500;
  color: var(--muted);
}

/* --- Блок «Недавние» --- */
.recent {
  display: block;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.recent__meal .field__label {
  margin-bottom: 10px;
}

/* В карточке недавнего блюда название и макросы кладём в колонку,
   а имя+макросы занимают центральную часть. */
.recent__item .recent__name,
.recent__item .recent__macros {
  flex-basis: auto;
}

/* --- Панель рекомендаций «Что съесть?» --- */
.diary-recommend {
  display: block;
  background: var(--white);
}

.diary-recommend__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.diary-recommend__sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.diary-recommend__body {
  display: block;
}

/* Скелетон карточки рекомендации. */
.diary-recommend__skeleton {
  height: 96px;
  margin-bottom: 10px;
}

/* Селектор «Добавить как» над рекомендациями. */
.diary-recommend__meal {
  margin-bottom: 12px;
}

.diary-recommend__meal .field__label {
  margin-bottom: 10px;
}

/* Список карточек-рекомендаций. */
.diary-recommend__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Пустое состояние рекомендаций. */
.diary-recommend__empty {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
  line-height: 1.5;
}

/* Ошибка получения рекомендаций. */
.diary-recommend__error {
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
}

.diary-recommend__error-text {
  font-size: 13px;
  color: var(--danger);
  margin-bottom: 12px;
  line-height: 1.5;
}

.diary-recommend__retry {
  width: auto;
  min-width: 150px;
  margin: 0 auto;
}

/* Одна карточка-рекомендация. */
.diary-recommend-item {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  animation: fadeIn .28s ease;
}

.diary-recommend-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.diary-recommend-item__name {
  font-weight: 700;
  font-size: 15px;
}

.diary-recommend-item__kcal {
  font-weight: 700;
  font-size: 14px;
  color: var(--cta);
  white-space: nowrap;
}

.diary-recommend-item__macros {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.diary-recommend-item__reason {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Кнопка «Добавить в рацион» (CTA) в карточке рекомендации. */
.diary-recommend-item__add {
  min-height: 46px;
  font-size: 15px;
}

/* ============================================================
   СТРАНИЦА «МОЙ АККАУНТ» — ДОПОЛНЕНИЯ
   ============================================================ */

/* Поле цели питания — без особого оформления, выравниваем как обычное .field. */
.goal-field {
  display: block;
}

/* --- Блок целевых БЖУ --- */
.goal-macros {
  margin: 4px 0 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  animation: fadeIn .28s ease;
}

/* Скрытие через атрибут hidden (JS снимает/ставит его). */
.goal-macros[hidden] {
  display: none;
}

.goal-macros__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Три плитки БЖУ в ряд. */
.goal-macros__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* Одна плитка цели по макросу. */
.goal-macro {
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 12px 6px;
  border-top: 3px solid var(--accent);
}

/* Цветовые акценты по типу макроса (мягкие пастельные оттенки). */
.goal-macro--prot {
  border-top-color: var(--cta);
}

.goal-macro--fat {
  border-top-color: var(--danger);
}

.goal-macro--carb {
  border-top-color: var(--accent);
}

.goal-macro__value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.goal-macro__label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Сам чекбокс-тумблер — крупный, акцентный. */
.notif-toggle__input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--cta);
  cursor: pointer;
}

.notif-times[hidden] {
  display: none;
}

/* Одно поле времени (подпись + input[type=time]). */
.notif-time {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 calc(50% - 5px);
  min-width: 120px;
}

/* Поле времени наследует .field__input; чуть компактнее по высоте. */
.notif-time__input {
  min-height: 46px;
}

/* Ошибка загрузки настроек уведомлений. */
.notif-error {
  text-align: center;
  color: var(--text);
  padding: 12px 8px;
  font-size: 14px;
  line-height: 1.5;
}

.notif-error__msg {
  font-size: 13px;
  color: var(--danger);
  margin: 8px 0 14px;
  line-height: 1.5;
}

.notif-error .btn {
  width: auto;
  min-width: 160px;
  margin: 0 auto;
}

/* ============================================================
   СТРАНИЦА «ОПРЕДЕЛЕНИЕ» — РЕДАКТИРУЕМЫЙ РЕЗУЛЬТАТ
   ============================================================ */

/* Карточка результата в режиме редактирования (расширяет .result-card).
   Текст полей выравниваем по левому краю (форма), а не по центру. */
.scan-edit-card {
  text-align: left;
}

/* --- Бейдж уверенности ИИ --- */
.scan-edit-confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  /* База — нейтральная; модификаторами задаём цвет по уровню. */
  background: var(--surface-3);
  color: var(--muted);
}

.scan-edit-confidence__label {
  color: inherit;
  font-weight: 500;
}

.scan-edit-confidence__value {
  font-weight: 700;
}

/* Низкая уверенность — тёплый персиковый (тревожный, но мягкий). */
.scan-edit-confidence--low {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Средняя уверенность — нейтральный бежевый акцент. */
.scan-edit-confidence--medium {
  background: var(--surface-2);
  color: var(--text);
}

/* Высокая уверенность — зелёный акцент. */
.scan-edit-confidence--high {
  background: var(--accent-soft);
  color: var(--cta);
}

/* --- Форма редактирования результата --- */
.scan-edit-form {
  display: block;
}

/* Поле формы редактирования (наследует .field). */
.scan-edit-field {
  display: block;
  margin-bottom: 14px;
}

/* Семантические модификаторы полей (на будущее/для точечной правки).
   Сейчас визуально совпадают с базовым полем — оставляем как «якоря». */
.scan-edit-field--name,
.scan-edit-field--weight,
.scan-edit-field--calories {
  display: block;
}

/* Поле макроса внутри сетки Б/Ж/У — без собственного нижнего отступа. */
.scan-edit-field--macro {
  margin-bottom: 0;
}

/* Поле ввода в форме редактирования (наследует .field__input). */
.scan-edit-input {
  width: 100%;
}

/* Числовые поля — те же стили; модификатор как «якорь» для правок. */
.scan-edit-input--num {
  text-align: left;
}

/* Сетка Б / Ж / У — три колонки. */
.scan-edit-macros {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

/* Подсказка под полем веса (о пересчёте / ручном вводе). */
.scan-edit-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: -4px 0 14px;
}

/* ============================================================
   АДАПТАЦИЯ НОВЫХ БЛОКОВ ПОД ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ============================================================ */
@media (max-width: 360px) {
  /* Кнопки действий рациона на узком экране — в столбик. */
  .diary-actions {
    flex-direction: column;
  }

  /* Сетка макросов ручного ввода/скана и БЖУ — ужимаем разрывы. */
  .diary-manual__macros,
  .scan-edit-macros,
  .goal-macros__grid {
    gap: 6px;
  }

  /* Поля времени уведомлений — на всю ширину строки. */
  .notif-time {
    flex-basis: 100%;
  }
}

/* ============================================================
   ============================================================
   РАСШИРЕНИЕ 2: НОВАЯ НАВИГАЦИЯ И РАЗДЕЛЫ
   ------------------------------------------------------------
   Стили для новых страниц/компонентов после переезда настроек
   уведомлений по разделам и появления страницы «Добавки»:
     • базовый .chip (используется AI-чипами цели улучшения);
     • напоминания о тренировке (wk-rem-*);
     • страница «Добавки» (page-supplements), напоминания о приёме
       добавок (sup-rem-*) и AI-советы (sup-ai-*);
     • напоминания о еде на странице рациона (diary-notif-*);
     • вечерняя сводка в аккаунте (acc-summary-*).
   Та же пастельная палитра и токены, что и выше. Кнопки — .btn
   (min-height 52px). Все комментарии — на русском.
   ============================================================
   ============================================================ */

/* ============================================================
   БАЗОВЫЙ ЧИП (.chip) — переиспользуемый «таблеточный» элемент
   ------------------------------------------------------------
   Используется AI-чипами цели улучшения (sup-ai-chip наследует .chip).
   Совместим с уже существующим .meal-chip по духу, но компактнее
   и с авто-шириной по содержимому.
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease,
    transform .08s ease;
}

.chip:active {
  transform: scale(.96);
}

/* Выбранный чип (модификатор chip--active добавляется в JS).
   Не оранжевая заливка с белой подписью: белое на оранжевом при 14px
   даёт 3.4:1 и не проходит для мелкого текста. Выбор показываем
   оранжевой рамкой и подложкой, подпись — тёмным оранжевым. */
.chip--active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* ============================================================
   НАПОМИНАНИЯ О ТРЕНИРОВКЕ (wk-rem-*) — карточкой на page-workouts
   ============================================================ */

/* Карточка раздела (наследует .card). */
.wk-rem-card {
  display: block;
}

/* Скелетон-строка напоминания (отдельная плашка). */
.wk-rem-item.skeleton-block {
  display: block;
  height: auto;
  padding: 16px;
  border-top: none;
  background: var(--bg);
}

/* Текст «Пн, Ср, Пт · 18:00». */
.wk-rem-item__meta {
  font-weight: 600;
  color: var(--text);
}

/* --- Чипы выбора дней недели (Пн…Вс) --- */
.wk-rem-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Один чип дня недели: компактный квадратик-«таблетка». */
.wk-rem-day {
  flex: 1 1 calc(14.285% - 7px);
  min-width: 40px;
  min-height: 44px;
  padding: 0 6px;
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease,
    transform .08s ease;
}

.wk-rem-day:active {
  transform: scale(.95);
}

/* Активный (выбранный) день недели — акцентный. */
.wk-rem-day.is-active {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--on-accent);
}

/* ============================================================
   СТРАНИЦА «ДОБАВКИ» (page-supplements)
   ============================================================ */
.page-supplements {
  display: block;
}

/* Шапка вкладки «Добавки»: та же иерархия, что у «Сегодня» (.td-head) —
   крупный заголовок и приглушённая строка под ним. Добавки стали вкладкой
   первого уровня, и кнопка «Назад» над заголовком ушла вместе с ролью
   подэкрана «Профиля». */
.sup-head {
  margin-bottom: var(--s4);
}

.sup-head__title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
}

.sup-head__sub {
  margin: var(--s1) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Пейволл во вкладке без подписки: экран должен помещаться целиком, без
   прокрутки, — кнопка покупки не должна уезжать под таббар. Поэтому
   поджимаем вертикальные отступы карточки до сетки токенов. */
.page-supplements--locked .paywall-card {
  margin-bottom: 0;
  padding: var(--s5) var(--s4);
}

.page-supplements--locked .paywall-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s2);
}

.page-supplements--locked .paywall-desc {
  margin-bottom: var(--s3);
}

/* Низкие экраны (360×640 и ниже): карточка выходила за экран на ~60px, и
   кнопка «Оформить подписку» уходила под приподнятый круг «Сегодня».
   Пояснение карточки почти дословно повторяет подпись под заголовком
   вкладки, поэтому здесь его убираем, а иконку уменьшаем — так пейволл
   снова помещается без прокрутки. */
@media (max-height: 700px) {
  .page-supplements--locked .paywall-desc {
    display: none;
  }

  .page-supplements--locked .paywall-title {
    margin-bottom: var(--s3);
  }

  .page-supplements--locked .paywall-icon {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   AI-СОВЕТЫ ПО ДОБАВКАМ (sup-ai-*) — карточкой
   ============================================================ */
.sup-ai-card {
  display: block;
}

.sup-ai-card__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.sup-ai-card__subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Ряд чипов целей улучшения (Сон / Восстановление / …). */
.sup-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* Чип цели улучшения наследует .chip; добавляем эмодзи + подпись. */
.sup-ai-chip {
  /* База берётся из .chip; гарантируем выравнивание эмодзи и подписи. */
  gap: 6px;
}

.sup-ai-chip__label {
  font-size: 14px;
}

/* Активный чип цели (модификатор добавляется в JS вместе с .chip--active). */
.sup-ai-chip--active {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--on-accent);
}

/* Поле свободного ввода цели улучшения. */
.sup-ai-field {
  margin-bottom: 0;
}

/* Кнопка «Получить совет» — отступ от поля как у остальных форм: при 4px
   она прилипала к полю и читалась его частью. */
.sup-ai-btn {
  margin-top: var(--s4);
}

/* Контейнер результата AI-совета (наполняется JS-ом). */
.sup-ai-box {
  display: block;
}

/* Внутренняя обёртка с рекомендациями. */
.sup-ai-box__inner {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 12px;
  animation: fadeIn .28s ease;
}

.sup-ai-box__heading {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Подпись цели над списком советов. */
.sup-ai-box__goal {
  font-size: 13px;
  font-weight: 600;
  color: var(--cta);
  margin-bottom: 10px;
}

/* Пустой результат AI-совета. */
.sup-ai-box__empty {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  padding: 8px 4px 4px;
  line-height: 1.5;
}

/* Состояние загрузки (скелетоны внутри). */
.sup-ai-box__loading {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 12px;
}

/* Ошибка AI-совета. */
.sup-ai-box__error {
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
  margin-top: 12px;
}

.sup-ai-box__error-text {
  font-size: 13px;
  color: var(--danger);
  margin-bottom: 12px;
  line-height: 1.5;
}

.sup-ai-box__retry {
  width: auto;
  min-width: 150px;
  margin: 0 auto;
}

/* Список карточек-советов. */
.sup-ai-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Одна карточка-совет. */
.sup-ai-suggest {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: var(--shadow-1);
}

.sup-ai-suggest__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.sup-ai-suggest__name {
  font-weight: 700;
  font-size: 15px;
}

.sup-ai-suggest__dosage {
  font-size: 13px;
  font-weight: 600;
  color: var(--cta);
  white-space: nowrap;
}

.sup-ai-suggest__note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Кнопка «Заполнить форму» — компактная вторичная. */
.sup-ai-suggest__use {
  min-height: 40px;
  font-size: 14px;
}

/* Обязательный дисклеймер по спортпиту (тёплый персиковый фон). */
.sup-ai-disclaimer {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--danger);
  background: var(--danger-soft);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}

/* ============================================================
   НАПОМИНАНИЯ О ЕДЕ (diary-notif-*) — карточкой на page-diary
   ============================================================ */
.diary-notif {
  display: block;
}

/* Карточка раздела (наследует .card). */
.diary-notif-card {
  display: block;
}

.diary-notif-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Скелетон карточки напоминаний о еде. */
.diary-notif-skeleton {
  height: 96px;
  margin-bottom: 0;
}

.diary-notif-times[hidden] {
  display: none;
}

/* Одно поле времени (подпись + input[type=time]). */
.diary-notif-time {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 calc(33.333% - 7px);
  min-width: 90px;
}

/* Поле времени наследует .field__input; чуть компактнее по высоте. */
.diary-notif-time__input {
  min-height: 46px;
}

/* Ошибка загрузки настроек напоминаний о еде. */
.diary-notif-error {
  text-align: center;
  color: var(--text);
  padding: 12px 8px;
}

.diary-notif-error__text {
  font-size: 14px;
  line-height: 1.5;
}

.diary-notif-error__msg {
  font-size: 13px;
  color: var(--danger);
  margin: 8px 0 14px;
  line-height: 1.5;
}

/* Кнопка «Повторить» в ошибке — компактная по центру. */
.diary-notif-retry {
  width: auto;
  min-width: 160px;
  margin: 0 auto;
}

/* ============================================================
   АДАПТАЦИЯ НОВЫХ РАЗДЕЛОВ ПОД ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ============================================================ */
@media (max-width: 360px) {
  /* Сетки форм напоминаний — ужимаем разрывы. */
  .wk-rem-form__grid,
  .sup-rem-form__grid {
    gap: 8px;
  }

  /* Поля времени напоминаний о еде — на всю ширину строки. */
  .diary-notif-time {
    flex-basis: 100%;
  }

  /* Чипы дней недели — по два-три в ряд при нехватке места. */
  .wk-rem-day {
    flex-basis: calc(25% - 6px);
  }
}

/* ============================================================
   ============================================================
   ЭТАП 1: ПОДПИСКА — ЕДИНЫЙ PAYWALL, ЭКРАН ПОДПИСКИ, СЧЁТЧИК
   СКАНОВ, КАРТОЧКА ПОДПИСКИ В АККАУНТЕ.

   Всё ниже — ДОПОЛНЕНИЕ к стилям выше; существующие правила НЕ
   менялись. Та же пастельная палитра (--bg / --card / --accent /
   --cta / --text / --muted / --danger), радиусы (--radius /
   --radius-sm), тень (--shadow). Кнопки наследуют .btn
   (min-height 52px). Контроль доступа — на бэкенде; здесь только
   визуальная подача. Все комментарии — на русском.
   ============================================================
   ============================================================ */

/* ============================================================
   ЕДИНЫЙ PAYWALL (App.paywall) — заглушка заблокированной фичи.
   Рендерится в #view (на всю страницу) или в панель (диалог
   рекомендаций рациона). Карточка-превью ценности + мягкая, но
   заметная плашка-замок + CTA «Оформить подписку».
   ============================================================ */

/* Корневая обёртка paywall. Плавное появление. */
.paywall {
  display: block;
  animation: fadeIn .28s ease;
}

/* Блок-превью фичи — тёмный .hero с фото (см. App.paywall): крупная
   иконка, заголовок, описание, буллеты. Все цвета — «геройские»: белый
   текст, приглушённый белый, оранжевый акцент. */
.paywall-card {
  text-align: center;
  margin-bottom: var(--s3);
}

/* Крупная иконка фичи в кружке на тёмном. */
.paywall-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s3);
  border-radius: var(--radius-pill);
  background: var(--hero-2);
  color: var(--accent);
}

/* Цена и пробный период прямо на заглушке: прежде человек видел «нужна
   подписка» и уходил, не зная ни стоимости, ни что первые дни бесплатны. */
.paywall-price {
  margin: var(--s4) 0 var(--s3);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--hero-text);
  text-align: center;
}

.paywall-title {
  margin-bottom: var(--s2);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--hero-text);
}

.paywall-desc {
  font-size: var(--fs-body);
  color: var(--hero-muted);
  line-height: var(--lh-normal);
  margin-bottom: var(--s4);
}

/* Список буллетов ценности — выровнен по левому краю внутри карточки. */
.paywall-bullets {
  list-style: none;
  text-align: left;
  max-width: 320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Один буллет: галочка + текст. */
.paywall-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Маркер-галочка в оранжевом кружке на тёмном. */
.paywall-bullet-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  line-height: 1;
}

.paywall-bullet-text {
  font-size: var(--fs-sm);
  color: var(--hero-text);
  line-height: var(--lh-normal);
}

/* Плашка-замок «🔒 Недоступно — нужна подписка»: мягкий персиковый фон,
   заметная, но не агрессивная. */
/* .paywall-lock больше не рендерится: красная плашка «Недоступно» стояла
   прямо над кнопкой покупки и работала против неё. */
.paywall-lock {
  display: none;
}

.paywall-lock-icon {
  font-size: 16px;
  line-height: 1;
}

.paywall-lock-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
}

/* CTA «Оформить подписку» — наследует .btn .btn-cta .btn-block (52px). */
.paywall-cta {
  margin-top: 0;
}

/* ============================================================
   ЭКРАН «ПОДПИСКА» (page-subscription, классы sub-*)
   ============================================================ */

.sub-page {
  display: block;
}

/* Шапка: кнопка «Назад», заголовок, подзаголовок. */
.sub-head {
  margin-bottom: 18px;
}

/* Кнопка «← Назад» — компактная текстовая, тактильная зона ≥44px. */
.sub-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 8px;
  padding: 0 12px 0 4px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .08s ease;
}

.sub-back:active {
  background: var(--surface-2);
  color: var(--text);
  transform: scale(.98);
}

/* Стрелка «←» внутри кнопки «Назад». */
.sub-back__arrow {
  font-size: 18px;
  line-height: 1;
}

/* Заголовок «💎 Подписка» (наследует .page-title). */
.sub-title {
  margin-bottom: 8px;
}

/* Подзаголовок (наследует .page-subtitle). */
.sub-subtitle {
  margin-bottom: 0;
}

/* --- Карточка текущего статуса подписки --- */
.sub-status {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Премиум-статус: зелёная акцентная подложка слева. */
.sub-status--premium {
  background: var(--white);
  border-left: 4px solid var(--cta);
}

/* Бесплатный статус: нейтральная карточка. */
.sub-status--free {
  background: var(--white);
  border-left: 4px solid var(--accent);
}

/* Иконка статуса (✅ / 🔓) в кружке. */
.sub-status__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  font-size: 26px;
  line-height: 1;
}

.sub-status__body {
  min-width: 0;
}

.sub-status__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

/* Строка «до <дата>» / «Навсегда» / пояснение для free. */
.sub-status__until {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* У премиум-статуса срок действия подсвечиваем акцентом. */
.sub-status--premium .sub-status__until {
  color: var(--cta);
  font-weight: 600;
}

/* --- Карточка «Что входит в подписку» --- */
.sub-benefits {
  display: block;
}

/* Заголовок секции (общий для преимуществ и тарифов). */
.sub-section-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
}

.sub-benefits__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Один пункт преимуществ: галочка + текст. */
.sub-benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Галочка в зелёном кружке. */
.sub-benefit__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--cta);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.sub-benefit__text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
}

/* --- Тарифы --- */
.sub-tariffs {
  display: block;
}

/* Пустое состояние тарифов (не загрузились) — карточка с кнопкой «Повторить». */
.sub-tariffs__empty {
  background: var(--white);
  text-align: center;
  padding: 22px 16px;
}

.sub-tariffs__empty p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.sub-tariffs__empty .btn {
  width: auto;
  min-width: 160px;
  margin: 0 auto;
}

/* Карточка одного тарифа. */
.sub-tariff {
  background: var(--white);
}

/* Шапка тарифа: иконка | название+примечание | цена. */
.sub-tariff__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Иконка тарифа (📅 / 🗓️ / ♾️) в кружке-подложке. */
.sub-tariff__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  font-size: 22px;
  line-height: 1;
}

.sub-tariff__info {
  flex: 1;
  min-width: 0;
}

/* Название тарифа + (опционально) бейдж в одну строку. */
.sub-tariff__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* Бейдж «Выгодно» / «Навсегда» — таблетка-акцент. */
.sub-tariff__badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--cta);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
  letter-spacing: .2px;
}

/* Примечание под названием тарифа. */
.sub-tariff__note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Цена «499 ₽» — крупная, справа в шапке. */
.sub-tariff__price {
  display: inline-block;
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

/* Единственная кнопка карточки — «Выбрать» (наследует .btn .btn--cta, 52px).
   Ведёт на отдельную страницу оплаты, оплата запускается уже там. */
.sub-tariff__pay {
  margin-top: 0;
}

/* --- Оплата через Tribute --- */
.sub-tribute {
  margin-bottom: 16px;
}

/* Кнопка «Оплатить через Tribute» — вторичная (наследует .btn .btn--ghost). */
.sub-tribute__btn {
  margin-top: 0;
}

/* Подсказка под кнопкой Tribute. */
.sub-tribute__hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  line-height: 1.5;
}

/* Подвал страницы подписки. */
.sub-foot {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
  line-height: 1.5;
}

/* ============================================================
   СЧЁТЧИК СКАНИРОВАНИЙ (page-scan, scan-counter*)
   Показывается под кнопкой загрузки фото на стартовом экране скана.
   ============================================================ */

.scan-counter {
  font-size: 13px;
  text-align: center;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

/* Премиум: безлимит — мягкий зелёный акцент. */
.scan-counter--premium {
  color: var(--cta);
  font-weight: 600;
  background: var(--accent-soft);
}

/* Бесплатно: остаток сканирований — нейтральный приглушённый. */
.scan-counter--free {
  color: var(--muted);
  background: var(--bg);
}

/* Лимит исчерпан — предупреждающий персиковый. */
.scan-counter--empty {
  color: var(--danger);
  font-weight: 600;
  background: var(--danger-soft);
}

/* Заблокированная (платная) кнопка для free-пользователя: приглушаем,
   но оставляем кликабельной — тап ведёт к paywall/подписке. */
.diary-actions__btn.is-locked {
  opacity: .85;
  border-style: dashed;
}

/* Заглушка-подписка в области панели рекомендаций (запасной вариант,
   если единый App.paywall недоступен). */
.diary-recommend--locked {
  text-align: center;
}

/* Кнопка «Оформить подписку» в заглушке (наследует .btn .btn--cta .btn-block). */
.diary-recommend__subscribe {
  margin-top: 6px;
}

/* ============================================================
   АККАУНТ: КАРТОЧКА-КНОПКА «💎 Подписка» (acc-sub-card*)
   Ведёт на экран подписки, показывает краткий статус.
   ============================================================ */

/* Карточка-кнопка (наследует .card): на всю ширину, контент в строку. */
.acc-sub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  min-height: 64px;
  border: none;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
}

.acc-sub-card:active {
  transform: scale(.99);
}

/* Премиум: подсвечиваем зелёной полосой слева. */
.acc-sub-card--premium {
  border-left: 4px solid var(--cta);
}

.acc-sub-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* Краткий статус под заголовком (активна до <дата> / Вечная / Бесплатный). */
.acc-sub-card__status {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* У премиум-карточки статус подсвечиваем акцентом. */
.acc-sub-card--premium .acc-sub-card__status {
  color: var(--cta);
  font-weight: 600;
}

/* ============================================================
   АДАПТАЦИЯ РАЗДЕЛОВ ПОДПИСКИ ПОД ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ============================================================ */
@media (max-width: 360px) {
  /* Иконку фичи в paywall слегка ужимаем. */
  .paywall-icon {
    width: 66px;
    height: 66px;
    font-size: 34px;
  }

  .paywall-title { font-size: 19px; }

  /* Цена тарифа не должна налезать на название — уменьшаем кегль. */
  .sub-tariff__price { font-size: 20px; }

  /* Иконку статуса/тарифа чуть уменьшаем. */
  .sub-status__icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}

/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА (page-account) — сегмент RU / EN
   ============================================================ */
.acc-lang__switch {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 4px;
}

.acc-lang__btn {
  flex: 1 1 0;
  min-height: 44px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.acc-lang__btn:active {
  transform: scale(.98);
}

/* Активный язык — заметная «пилюля» в зелёном CTA-цвете. */
.acc-lang__btn--active {
  background: var(--cta);
  color: var(--on-accent);
  box-shadow: var(--shadow-1);
}

/* ============================================================
   ============================================================
   ЭТАП 2: ГОЛОСОВОЙ ВВОД ЕДЫ (page-scan, классы scan-voice-*)
   ------------------------------------------------------------
   Премиум-фича на экране «Определение». Отдельный от фото поток:
     • вторичная кнопка «🎤 Записать голосом» под фото-кнопкой;
     • экран записи: пульсирующий индикатор + таймер + Стоп/Отмена;
     • фолбэк «запись недоступна» и экран ошибки голоса;
     • экран результата: распознанный текст (мелким), чипы приёма
       пищи (.meal-chip), список РЕДАКТИРУЕМЫХ блюд (название + ккал
       + Б/Ж/У) с кнопкой удаления ✕.

   Всё ниже — ДОПОЛНЕНИЕ к стилям выше; существующие правила НЕ
   менялись. Та же пастельная палитра (--bg / --card / --accent /
   --cta / --text / --muted / --danger), радиусы (--radius /
   --radius-sm), тень (--shadow). Кнопки наследуют .btn
   (min-height 52px). Контроль доступа — на бэкенде; здесь только
   визуальная подача. Все комментарии — на русском.
   ============================================================
   ============================================================ */

/* --- Кнопка «🎤 Записать голосом» (вторичная, под фото-кнопкой) --- */
/* Наследует .btn .btn-ghost .btn-block; отделяем от фото-кнопки сверху.
   (.btn-block + .btn-block уже даёт 10px, дублируем на случай иной верстки.) */
.scan-voice-btn {
  margin-top: 10px;
}

/* ============================================================
   ЭКРАН ЗАПИСИ (scan-voice-rec*)
   Заметный пульсирующий индикатор с микрофоном, статус и таймер.
   ============================================================ */

/* Карточка экрана записи (наследует .card): центрируем содержимое. */
.scan-voice-rec {
  background: var(--white);
  text-align: center;
  padding: 28px 18px;
}

/* Индикатор записи: кружок-подложка с пульсацией и иконкой микрофона. */
.scan-voice-rec__indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
  border-radius: 50%;
  /* Мягкая персиковая подложка — «горит» во время записи. */
  background: var(--danger-soft);
}

/* Пульсирующее кольцо вокруг микрофона (расходящаяся волна). */
.scan-voice-rec__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--danger-soft);
  /* Бесконечная пульсация — визуальный признак активной записи. */
  animation: scanVoicePulse 1.6s ease-out infinite;
}

/* Иконка микрофона поверх пульсации. */
.scan-voice-rec__mic {
  position: relative;
  z-index: 1;
  font-size: 40px;
  line-height: 1;
}

/* Анимация пульсации: кольцо разрастается и гаснет. */
@keyframes scanVoicePulse {
  0% {
    transform: scale(.65);
    opacity: .8;
  }
  70% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

/* Статус «Идёт запись…» — приглушённый. */
.scan-voice-rec__status {
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
  margin-bottom: 8px;
}

/* Таймер длительности записи (M:SS) — крупный, моноширинный. */
.scan-voice-rec__timer {
  font-size: 34px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Кнопки экрана записи (наследуют .btn .btn-*).
   «■ Стоп» — CTA; «Отмена» — вторичная. Якоря для точечных правок. */
.scan-voice-stop {
  margin-top: 0;
}

.scan-voice-cancel {
  margin-top: 10px;
}

/* ============================================================
   ФОЛБЭК «ЗАПИСЬ НЕДОСТУПНА» (scan-voice-unavailable*)
   ============================================================ */
.scan-voice-unavailable {
  background: var(--white);
  text-align: center;
  padding: 26px 18px;
}

.scan-voice-unavailable__icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 12px;
}

.scan-voice-unavailable__msg {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 18px;
}

/* Кнопка «Назад» в фолбэке (наследует .btn .btn-cta .btn-block). */
.scan-voice-back {
  margin-top: 0;
}

/* ============================================================
   ЭКРАН ОШИБКИ ГОЛОСА (scan-voice-error)
   Наследует .error-card; модификатор — «якорь» для точечных правок.
   ============================================================ */
.scan-voice-error {
  display: block;
}

/* ============================================================
   ПУСТОЙ РЕЗУЛЬТАТ — НИЧЕГО НЕ РАСПОЗНАНО (scan-voice-empty*)
   ============================================================ */
.scan-voice-empty {
  background: var(--white);
  text-align: center;
  padding: 26px 18px;
}

.scan-voice-empty__msg {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 18px;
}

/* ============================================================
   ЭКРАН РЕЗУЛЬТАТА ГОЛОСА (scan-voice-card*)
   Транскрипт + чипы приёма пищи (.meal-chip) + список блюд.
   ============================================================ */

/* Карточка результата голоса (наследует .card): текст по левому краю. */
.scan-voice-card {
  background: var(--white);
  text-align: left;
}

/* --- Распознанный текст (transcript) — мелкий, приглушённый --- */
.scan-voice-transcript {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  word-break: break-word;
}

/* Подпись «Распознано:» перед текстом — чуть плотнее. */
.scan-voice-transcript__label {
  font-weight: 700;
  color: var(--text);
}

/* --- Список редактируемых строк блюд --- */
.scan-voice-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

/* Одна строка блюда: название + кнопка ✕, ниже — компактные числа. */
.scan-voice-item {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  animation: fadeIn .24s ease;
}

/* Шапка строки: поле названия + кнопка удаления в одну линию. */
.scan-voice-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* Кнопка удаления строки ✕ (иконочная, как .diary-entry__del). */
.scan-voice-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--danger);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}

.scan-voice-item__remove:active {
  background: var(--danger-soft);
  transform: scale(.92);
}

/* Сетка компактных числовых полей: Ккал | Б | Ж | У (четыре колонки). */
.scan-voice-item__nums {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 8px;
}

/* Одно числовое поле: подпись над компактным input. */
.scan-voice-num {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.scan-voice-num__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* --- Поля ввода голосового результата (наследуют .field__input) --- */
.scan-voice-input {
  width: 100%;
}

/* Поле названия блюда — на всю ширину шапки строки. */
.scan-voice-input--name {
  flex: 1;
  min-width: 0;
}

/* Компактные числовые поля (ккал/Б/Ж/У) — ниже и плотнее обычного .field__input. */
.scan-voice-input--num {
  min-height: 46px;
  padding: 0 10px;
  text-align: left;
}

/* ============================================================
   АДАПТАЦИЯ ГОЛОСОВОГО ВВОДА ПОД ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ============================================================ */
@media (max-width: 360px) {
  /* Числовые поля блюда — ужимаем разрывы и кегль подписей/инпутов. */
  .scan-voice-item__nums {
    gap: 6px;
  }

  .scan-voice-num__label {
    font-size: 10px;
  }

  .scan-voice-input--num {
    padding: 0 8px;
  }

  /* Индикатор записи и таймер слегка уменьшаем. */
  .scan-voice-rec__indicator {
    width: 82px;
    height: 82px;
  }

  .scan-voice-rec__mic {
    font-size: 34px;
  }

  .scan-voice-rec__timer {
    font-size: 30px;
  }
}

/* ============================================================
   ЖИВАЯ КАМЕРА НА ГЛАВНОМ ЭКРАНЕ СКАНЕРА (scan-cam-*)
   Главный экран камеры сразу показывает живой поток
   (getUserMedia, facingMode "environment"). Спуск затвора — только круглая
   кнопка под видоискателем (#scan-shutter): кнопки камеры в таббаре больше
   нет, и второй затвор не нужен (экран камеры — задача без таббара).
   Под видео: подсказка, счётчик сканирований (#scan-counter-slot),
   кнопка «Записать голосом» и вторичная ссылка «Загрузить из галереи».
   Если камера недоступна/запрещена — рендерится прежняя .scan-dropzone (фолбэк).

   Контракт классов (использует page-scan.js):
     .scan-cam-card     — карточка-обёртка живого экрана камеры;
     .scan-cam-window   — окно с видео (aspect-ratio ~4:3, скруглённое, тень);
     .scan-cam-video    — сам <video> (object-fit: cover, заполняет окно);
     .scan-cam-badge    — мелкий бейдж-индикатор «LIVE» в углу окна (опц.);
     .scan-cam-hint     — приглушённая подсказка под видео;
     .scan-cam-actions  — обёртка кнопки голоса + ссылки галереи под видео;
     .scan-cam-gallery  — вторичная ссылка-кнопка «Загрузить из галереи».
   ============================================================ */

/* Карточка живого экрана камеры (наследует .card). Внутренние отступы для
   подсказки/кнопок задаём здесь, само видео-окно идёт «в край» по ширине. */
.scan-cam-card {
  background: var(--white);
  /* Меньше внутренних отступов + лёгкий вынос за края -> видео-окно ШИРЕ. */
  padding: 8px;
  margin-left: -6px;
  margin-right: -6px;
  text-align: center;
}

/* Окно с видеопотоком: соотношение ~4:3, скруглённые углы, мягкая тень.
   На время инициализации камеры показываем нейтральную пастельную подложку. */
.scan-cam-window {
  position: relative;
  width: 100%;
  /* Портретное окно ПОВЫШЕ — заполняет свободное место под камерой.
     max-height страхует от вылезания за экран на низких устройствах. */
  aspect-ratio: 3 / 4;
  /* Ограничиваем высоту, чтобы кнопки под камерой влезали без прокрутки. */
  max-height: 42vh;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  /* Тонкая рамка в тон акценту — аккуратно очерчивает окно. */
  border: 1.5px solid var(--accent);
}

/* Запасной aspect-ratio для старых вебвью без поддержки свойства:
   padding-hack даёт пропорцию 3/4 = 75% (видео позиционируется абсолютно). */
@supports not (aspect-ratio: 3 / 4) {
  .scan-cam-window {
    height: 0;
    padding-bottom: 133.33%;
  }
}

/* Сам видеопоток: заполняет окно целиком, кадрируется по центру. */
.scan-cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--card);
}

@keyframes scan-cam-pulse {
  0% {
    box-shadow: var(--shadow-1);
  }
  70% {
    box-shadow: 0 0 0 7px var(--accent-soft);
  }
  100% {
    box-shadow: var(--shadow-1);
  }
}

/* Приглушённая подсказка под видео: «Наведите на блюдо и нажмите 📷…». */
.scan-cam-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 14px;
}

/* Обёртка действий под видео: кнопка голоса + ссылка «Загрузить из галереи».
   Счётчик (#scan-counter-slot) рендерится отдельным блоком над/под действиями. */
.scan-cam-actions {
  margin-top: 14px;
}

/* Кнопка «🎤 Записать голосом» под камерой наследует .btn .btn-ghost .btn-block
   (min-height 52px). Если она первая в блоке действий — убираем двойной отступ. */
.scan-cam-actions .scan-voice-btn {
  margin-top: 0;
}

/* Вторичная ссылка-кнопка «Загрузить из галереи»: ненавязчивая, текстовая.
   Открывает скрытый input#scan-file (камера/галерея системного выбора). */
.scan-cam-gallery {
  display: inline-block;
  width: auto;
  min-height: 0;
  margin-top: 12px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.scan-cam-gallery:active {
  color: var(--text);
  transform: none;
}

/* На узких экранах слегка ужимаем внутренние отступы карточки камеры. */
@media (max-width: 360px) {
  .scan-cam-card {
    padding: 8px;
  }

  .scan-cam-hint {
    font-size: 12px;
  }
}

/* =====================================================================
 *  ПРЕМИУМ: ТРЕКИНГ ВЕСА (wt-*) и АДАПТИВНЫЕ КАЛОРИИ (adapt-*) — Этап 3
 *  Пастельная палитра, аккуратный SVG-график, кнопки наследуют .btn (52px).
 * ===================================================================== */

/* ---- Карточка «Вес» ---- */
.wt-card {
  display: block;
}

/* Когда вместо содержимого карточки показан paywall — убираем фон/паддинг
   карточки, чтобы блок paywall выглядел самостоятельно. */
.wt-card.wt-gate {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Поле ввода веса. Базовый вид берёт из .field__input (52px, рамка, фокус);
   здесь — лёгкий акцент именно для замера веса. */
.wt-input {
  font-weight: 600;
  letter-spacing: .2px;
}

/* ---- Обёртка графика ---- */
.wt-chart-wrap {
  margin-top: 18px;
}

/* Сводка над графиком: текущий вес и изменение. */
.wt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.wt-stat {
  flex: 1 1 auto;
  min-width: 120px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}

.wt-stat__value {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.wt-stat__value.wt-change--up {
  color: var(--danger);
}

.wt-stat__value.wt-change--down {
  color: var(--cta);
}

.wt-stat__label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

/* ---- SVG-график динамики веса ---- */
.wt-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 6px;
}

/* Сетка графика — тонкие приглушённые линии. */
.wt-grid-line {
  stroke: var(--accent);
  stroke-width: 1;
  opacity: .5;
  stroke-dasharray: 3 4;
}

/* Подписи осей (вес/даты). */
.wt-axis-label {
  fill: var(--muted);
  font-size: 9px;
  font-family: Inter, system-ui, sans-serif;
}

/* Линия замеров — приглушённая, тонкая. */
.wt-line-logs {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .85;
}

/* Точки замеров. */
.wt-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 1;
}

/* Линия тренда — выделенная, цвет CTA (зелёный). */
.wt-line-trend {
  fill: none;
  stroke: var(--cta);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Легенда под графиком. */
.wt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
}

.wt-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.wt-legend__swatch {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 999px;
}

.wt-legend__swatch--logs {
  background: var(--accent);
}

.wt-legend__swatch--trend {
  background: var(--cta);
}

/* Пустое состояние графика. */
.wt-empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.wt-empty__icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 10px;
}

.wt-empty__text {
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Карточка «Адаптивные калории» ---- */
.adapt-card {
  display: block;
}

.adapt-card[hidden] {
  display: none;
}

.adapt-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 10px;
}

/* Строка «Фактическое поддержание ≈ N ккал». */
.adapt-maint {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 12px;
}

.adapt-recalc-btn {
  margin-top: 16px;
}

/* Блок результата пересчёта. */
.adapt-result {
  margin-top: 16px;
}

.adapt-result[hidden] {
  display: none;
}

.adapt-expl {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 12px;
}

.adapt-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adapt-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

/* Выделенная строка «Новая цель». */
.adapt-stat--accent {
  background: var(--accent-soft);
}

.adapt-stat__label {
  font-size: 14px;
  color: var(--muted);
}

.adapt-stat__value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.adapt-stat--accent .adapt-stat__value {
  color: var(--cta);
}

/* Заметка (мало данных). */
.adapt-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.adapt-note--warn {
  color: var(--text);
  background: var(--danger-soft);
}

/* ============================================================
   ШАБЛОНЫ ПИТАНИЯ (Этап 4, ПРЕМИУМ) — префикс классов tpl-.
   Стилизует ровно те классы, что генерирует page-diary.js:
   панель премиум-действий (.tpl-actions), форму сохранения дня
   как шаблона (.tpl-save), список шаблонов карточками (.tpl-list,
   .tpl-card-list, .tpl-card) и запасной paywall (.tpl-locked).
   Палитра пастельная, согласована с блоком .diary-recommend / .recent.
   ============================================================ */

/* ============================================================
   ЭТАП 5 — AI-ФУНКЦИИ (пастельная палитра)
   Недельный AI-отчёт (rep-*), AI-планировщик меню (plan-*),
   улучшенные умные предложения «Что съесть?» (suggest-*).
   Кнопки — min-height 52px. Не ломает существующие стили.
   ============================================================ */

/* ------------------------------------------------------------
   1) НЕДЕЛЬНЫЙ AI-ОТЧЁТ (page-account.js, префикс rep-)
   Карточка отчёта: подсказка, кнопка генерации, тело (summary,
   буллеты-инсайты, выделенный фокус недели, плитки ключевых цифр).
   ------------------------------------------------------------ */

/* Подсказка над кнопкой генерации. */
.rep-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Кнопка «Сформировать/Обновить отчёт» (CTA, единый размер 52px). */
.rep-gen-btn {
  min-height: 52px;
}

/* Тело отчёта — контейнер под результат/загрузку/ошибку. */
.rep-body {
  margin-top: 16px;
}

.rep-body:empty {
  margin-top: 0;
}

/* ---- Состояние загрузки отчёта ---- */
.rep-loading {
  text-align: center;
}

.rep-loading__text {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

/* ---- Состояние ошибки отчёта ---- */
.rep-error {
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
}

.rep-error p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

.rep-error__msg {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 12px;
}

/* ---- Пустое состояние отчёта (мало данных) ---- */
.rep-empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.rep-empty__icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 10px;
}

.rep-empty__text {
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Сводка недели (крупный вводный абзац) ---- */
.rep-summary {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}

/* ---- Список выводов (буллеты) ---- */
.rep-insights-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 8px;
}

.rep-insights {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rep-insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.rep-insight__mark {
  flex-shrink: 0;
  color: var(--cta);
  font-weight: 800;
  line-height: 1.5;
}

.rep-insight__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* ---- Главный фокус недели (выделенный совет) ---- */
.rep-focus {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--accent-soft);
  border: 1.5px solid var(--cta);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.rep-focus__icon {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
}

.rep-focus__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rep-focus__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cta-press);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.rep-focus__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

/* ---- Ключевые цифры (плитки статистики) ---- */
.rep-stats-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 8px;
}

.rep-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.rep-stat {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  text-align: center;
}

.rep-stat__value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.rep-stat__label {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* Смысловая подсветка значений плиток. */
.rep-stat--good .rep-stat__value {
  color: var(--cta);
}

.rep-stat--down .rep-stat__value {
  color: var(--cta);
}

.rep-stat--up .rep-stat__value {
  color: var(--danger);
}

/* ------------------------------------------------------------
   2) AI-ПЛАНИРОВЩИК МЕНЮ (page-diary.js, префикс plan-)
   Кнопка действия, paywall-заглушка, панель (охват + предпочтения),
   карточки дней с блюдами по приёмам (КБЖУ + «Заменить»),
   список покупок, кнопка повторной генерации, ошибка.
   ------------------------------------------------------------ */

/* Кнопка «🍴 AI-план меню» в панели действий. Базовый вид берёт из
   .diary-actions__btn; здесь лишь единый минимальный размер. */
.plan-actions__btn {
  min-height: 52px;
}

/* ---- Заглушка-фолбэк (если App.paywall недоступен) ---- */
.plan-locked {
  text-align: center;
  background: var(--white);
}

.plan-locked__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.plan-locked__sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.plan-locked__subscribe {
  margin-top: 4px;
  min-height: 52px;
}

/* ---- Панель планировщика ---- */
.plan-panel {
  display: block;
  background: var(--white);
}

.plan-panel__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.plan-panel__sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Блок управления: охват + предпочтения + кнопка. */
.plan-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

/* Чипы выбора охвата (День/Неделя) — на базе .meal-chips/.meal-chip. */
.plan-scope {
  margin-bottom: 2px;
}

.plan-scope__chip {
  /* Наследует .meal-chip (48% ширины, 44px, рамка, is-active). */
}

/* Поле предпочтений. */
.plan-prefs {
  margin: 0;
}

.plan-prefs__input {
  width: 100%;
}

/* Кнопка «Сгенерировать» (CTA, полная ширина, 52px). */
.plan-generate {
  min-height: 52px;
  margin-top: 4px;
}

/* Область результата плана. */
.plan-body {
  margin-top: 16px;
}

.plan-body:empty {
  margin-top: 0;
}

/* Подсказка/пустое состояние области результата. */
.plan-hint,
.plan-empty {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
}

/* Скелетон загрузки плана. */
.plan-skeleton {
  height: 96px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

/* Контейнер карточек дней. */
.plan-days {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Карточка одного дня плана. */
.plan-day {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  animation: fadeIn .28s ease;
}

.plan-day__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
}

/* Блок одного приёма пищи внутри дня. */
.plan-meal {
  margin-bottom: 12px;
}

.plan-meal:last-child {
  margin-bottom: 0;
}

.plan-meal__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.plan-meal__icon {
  font-size: 16px;
  line-height: 1;
}

.plan-meal__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Список блюд приёма пищи. */
.plan-meal__dishes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Одно блюдо: слева название+КБЖУ, справа кнопка «Заменить». */
.plan-dish {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.plan-dish__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-dish__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.plan-dish__macros {
  font-size: 12px;
  color: var(--muted);
}

/* Кнопка «🔄 Заменить» — компактная, мягкий акцент. */
.plan-dish__swap {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}

.plan-dish__swap:active {
  transform: scale(.96);
  background: var(--accent);
}

.plan-dish__swap:disabled {
  opacity: .6;
  cursor: default;
}

/* ---- Список покупок ---- */
.plan-shopping {
  margin-top: 14px;
  background: var(--white);
}

.plan-shopping__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.plan-shopping__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-shopping__item {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.plan-shopping__item::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--cta);
  font-weight: 800;
}

/* Кнопка «🔁 Сгенерировать заново». */
.plan-regenerate {
  margin-top: 14px;
  min-height: 52px;
}

/* ---- Состояние ошибки планировщика ---- */
.plan-error {
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
}

.plan-error__text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 12px;
}

.plan-error__retry {
  min-height: 52px;
}

/* ------------------------------------------------------------
   3) УЛУЧШЕННЫЕ УМНЫЕ ПРЕДЛОЖЕНИЯ «Что съесть?»
   (page-diary.js, префикс suggest-)
   Панель наследует .diary-recommend (заголовок/подзаголовок/тело
   и карточки результата — diary-recommend-item). Здесь — только
   надстройка управления: чипы приёма, поле ввода, кнопки.
   ------------------------------------------------------------ */

/* Панель «Что съесть?» = .diary-recommend + suggest-panel. */
.suggest-panel {
  display: block;
}

/* Блок управления над областью результатов. */
.suggest-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

/* Чипы выбора приёма пищи («Весь день» + приёмы) — на базе .meal-chips. */
.suggest-chips {
  margin-bottom: 2px;
}

/* Поле свободного ввода «Чего хочется?». */
.suggest-free {
  margin: 0;
}

.suggest-free__input {
  width: 100%;
}

/* Кнопки действий: «Подобрать» (CTA) + «🍬 Вкусняшки» (ghost). */
.suggest-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.suggest-btn {
  flex: 1 1 calc(50% - 5px);
  min-height: 52px;
  font-size: 15px;
}

.suggest-btn--go {
  /* Наследует .btn--cta (зелёный). */
}

.suggest-btn--snacks {
  /* Наследует .btn--ghost. */
  white-space: nowrap;
}

/* Область результатов «Что съесть?». Карточки вариантов рисуются
   через существующие .diary-recommend-item (название, КБЖУ, reason,
   кнопка «Добавить в рацион»). */
.suggest-body {
  display: block;
}

/* Стартовая подсказка в области результатов. */
.suggest-hint {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
}

/* Вводная подсказка (когда данных ещё нет). */
.cyc-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 14px;
}

.cyc-body {
  margin-top: 4px;
}

/* ---- Форма ввода данных цикла ---- */
.cyc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cyc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cyc-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Поле ввода наследует базовый .field; тут лишь единый размер. */
.cyc-input {
  min-height: 48px;
}

.cyc-save {
  min-height: 52px;
  margin-top: 2px;
}

/* Кнопка «Отмена» под формой редактирования. */
.cyc-cancel {
  min-height: 44px;
}

/* Дисклеймер (не мед. рекомендация) — мягкий мелкий текст. */
.cyc-disclaimer {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
}

/* ---- Плашка текущей фазы ---- */
.cyc-phase {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
  /* Базовый (нейтральный) тон — переопределяется модификаторами фаз. */
  background: var(--surface-2);
  border: 1.5px solid var(--data-cycle);
}

.cyc-phase__icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}

.cyc-phase__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cyc-phase__name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.cyc-phase__day {
  font-size: 13px;
  color: var(--muted);
}

/* Оттенки по фазам (деликатные пастельные тона). */
.cyc-phase--menstrual {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.cyc-phase--follicular {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.cyc-phase--ovulation {
  background: var(--warning-soft);
  border-color: var(--warning);
}

.cyc-phase--luteal {
  background: var(--surface-2);
  border-color: var(--data-neutral);
}

/* ---- Прогнозы (следующая менструация, овуляция, фертильное окно) ---- */
.cyc-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.cyc-fact {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.cyc-fact__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.cyc-fact__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.cyc-fact__label {
  font-size: 12px;
  color: var(--muted);
}

.cyc-fact__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* ---- Советы под фазу (питание / тренировки / самочувствие) ---- */
.cyc-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.cyc-tips__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 2px;
}

.cyc-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
}

.cyc-tip__icon {
  font-size: 18px;
  line-height: 1.3;
  flex-shrink: 0;
}

.cyc-tip__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cyc-tip__title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cta-press);
}

.cyc-tip__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}

/* ---- Заметка пользователя ---- */
.cyc-note {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin-bottom: 14px;
}

.cyc-note__label {
  font-weight: 700;
  color: var(--muted);
}

/* ---- Действия (обновить данные / сбросить) ---- */
.cyc-actions {
  display: flex;
  gap: 10px;
}

.cyc-actions .btn {
  flex: 1;
  min-height: 46px;
}

/* Кнопка сброса — предупреждающий оттенок. */
.cyc-reset {
  color: var(--danger);
}

/* ---- Ошибка загрузки статуса цикла ---- */
.cyc-error {
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
}

.cyc-error p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

.cyc-error__msg {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 12px;
}

/* ============================================================
   BLOCK 4 — обновлённый UX рациона + сканера
   (мини-календарь, плавающая «+», нижний лист, умная ручная
   форма, быстрое добавление «Вчера», бейдж количества).
   Все правила ДОБАВЛЕНЫ в конец файла и не меняют существующие.
   Единый спокойный стиль: пастель, скругления, мягкие тени,
   меньше визуального шума, больше воздуха.
   ============================================================ */

/* ---------- 1) Мини-календарь (попап под баром датой) ---------- */

/* Обёртка бара даты — якорь для абсолютного попапа календаря. */
.diary-datebar-wrap {
  position: relative;
}

/* Контейнер попапа: позиционируется под баром датой, по центру. */
.diary-datebar__cal {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
}

/* Карточка календаря — компактный dropdown, не на весь экран. */
.cal-pop {
  width: 100%;
  max-width: 320px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  animation: fadeIn .2s ease;
}

/* Шапка календаря: стрелки ‹ › + заголовок «Месяц ГОД». */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

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

/* Стрелки навигации по месяцам. */
.cal-nav {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease, opacity .15s ease;
}

.cal-nav:active {
  transform: scale(.92);
  background: var(--accent);
}

.cal-nav:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

/* Сетка: 7 колонок (дни недели + числа). */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* Приглушённые подписи дней недели. */
.cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding-bottom: 4px;
}

/* Ячейка дня — тап-таргет, скруглённая. */
.cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}

button.cal-cell:active {
  transform: scale(.92);
  background: var(--bg);
}

/* Сегодня — обведённая акцентом. */
.cal-cell--today {
  box-shadow: inset 0 0 0 1.5px var(--cta);
  font-weight: 700;
}

/* Выбранный день — залит CTA, белый текст (перебивает --today). */
.cal-cell--selected {
  background: var(--cta);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: none;
}

button.cal-cell--selected:active {
  background: var(--cta-press);
}

/* Будущие/недоступные дни — приглушены, не интерактивны. */
.cal-cell--disabled {
  color: var(--muted);
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* Пустые ведущие ячейки — невидимый спейсер. */
.cal-cell--empty {
  background: transparent;
  pointer-events: none;
}

/* ---------- 2) Плавающая кнопка «+» (FAB) ---------- */

.diary-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 16px);
  z-index: 60;
  width: 62px;
  height: 62px;
  border: none;
  border-radius: 50%;
  background: var(--cta);
  color: var(--on-accent);
  font-size: 33px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-2);
  transition: background .18s ease, transform .1s ease, box-shadow .18s ease;
}

.diary-fab:active {
  transform: scale(.94);
  background: var(--cta-press);
}

/* ---------- 3) Нижний лист выбора действия ---------- */

/* Контейнер на весь экран, поверх всего (включая FAB). */
.diary-sheet {
  position: fixed;
  inset: 0;
  /* Выше нижней навигации (#tabbar z-index:900, вместе с приподнятым кругом
     «Сегодня») и тоста (1100), иначе таббар перекрывает низ листа и «съедает»
     кнопки в самом низу. */
  z-index: 1200;
}

/* Затемняющая подложка. */
.diary-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity .22s ease;
  /* Тап/перетаскивание по фону не должны прокручивать страницу под листом. */
  touch-action: none;
}

.diary-sheet--open .diary-sheet__backdrop {
  opacity: 1;
}

/* Панель, приезжающая снизу. */
.diary-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-2);
  padding: 8px 16px calc(var(--safe-bottom) + 20px);
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.22, .61, .36, 1);
  /* Высокое содержимое (лист настроек) прокручивается ВНУТРИ панели, а не тянет
     фон под листом. Прокрутка идёт по самой панели. */
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.diary-sheet--open .diary-sheet__panel {
  transform: translateY(0);
}

/* Полоска-хват сверху панели. */
.diary-sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  margin: 6px auto 14px;
}

/* Группа пунктов + приглушённый заголовок группы. */
.diary-sheet__group + .diary-sheet__group {
  margin-top: 16px;
}

.diary-sheet__group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 4px 8px;
}

/* Пункт-строка: иконка + подпись. */
.diary-sheet__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}

.diary-sheet__item + .diary-sheet__item {
  margin-top: 8px;
}

.diary-sheet__item:active {
  transform: scale(.99);
  background: var(--card);
}

.diary-sheet__item-icon {
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  font-size: 22px;
  line-height: 1;
}

.diary-sheet__item-label {
  flex: 1;
}

/* Замок у платных пунктов справа. */
.diary-sheet__item-lock {
  flex-shrink: 0;
  font-size: 14px;
  opacity: .8;
}

/* Заблокированный (free) пункт — приглушённый вид. */
.diary-sheet__item--locked {
  color: var(--muted);
}

.diary-sheet__item--locked .diary-sheet__item-icon {
  opacity: .6;
}

/* ---------- 4) Умная ручная форма: количество + единица ---------- */

/* Ряд: количество и единица бок о бок. */
.manual-qty-row {
  display: flex;
  gap: 10px;
}

/* Поле количества шире, единица — компактнее. */
.manual-qty-field {
  flex: 1 1 auto;
}

.manual-unit-field {
  flex: 0 0 40%;
}

/* .manual-qty и .manual-unit наследуют вид от .field__input;
   select единицы — от select.field__input (стрелка/паддинг). */

/* Кнопка «Рассчитать КБЖУ» — вторичная/ghost, на всю ширину.
   Наследует .btn .btn--ghost .btn-block; тут лишь мягкий отступ. */
.manual-calc {
  margin-top: 4px;
}

/* Подсказка-статус под кнопкой расчёта. */
.manual-calc-hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
}

/* ---------- 5) Быстрое добавление из «Вчера» ---------- */

.yday {
  margin-top: 16px;
}

.yday__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 2px 10px;
}

.yday__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Строка-карточка блюда из вчерашнего дня. */
.yday__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--white);
}

/* Тап-зона: название + макросы. */
.yday__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  padding: 0;
  color: inherit;
}

.yday__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yday__macros {
  font-size: 12px;
  color: var(--muted);
}

/* Круглая кнопка «+» для быстрого добавления. */
.yday__add {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--cta);
  color: var(--on-accent);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .08s ease;
}

.yday__add:active {
  transform: scale(.9);
  background: var(--cta-press);
}

/* Пустое состояние блока «Вчера». */
.yday__empty {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 14px 8px;
}

/* ---------- 6) Бейдж количества у записи рациона ---------- */

.diary-entry__qty,
.scan-voice-item__qty {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   #6) АККОРДЕОН аккаунта (.acc-fold) — сворачиваемые карточки.
   Добавляется к существующему .card; шапка-кнопка + тело.
   Тело скрыто атрибутом [hidden]; открытое состояние — .acc-fold--open.
   ============================================================ */

/* Карточка-аккордеон: .card + .acc-fold. Убираем внутренний padding
   у самой карточки, чтобы шапка/тело сами управляли отступами. */
.acc-fold {
  padding: 0;
  overflow: hidden;
}

/* Шапка — во всю ширину, тап-таргет, без «кнопочного» вида. */
.acc-fold__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 16px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background .15s ease;
}

.acc-fold__head:active {
  background: var(--surface-2);
}

/* Заголовок — как у карточек (.acc-title). */
.acc-fold__title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

/* Шеврон — приглушённый, плавно вращается при раскрытии. */
.acc-fold__chevron {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  transition: transform .2s ease;
}

.acc-fold--open .acc-fold__chevron {
  transform: rotate(180deg);
}

/* Тело — контент под шапкой; когда показано, без лишних верхних отступов. */
.acc-fold__body {
  padding: 0 16px 16px;
}

/* ============================================================
   #1) Контейнер календаря на странице тренировок (wk-).
   Зеркалит .diary-datebar-wrap / .diary-datebar__cal, чтобы общий
   попап .cal-pop корректно позиционировался под баром даты.
   ============================================================ */

/* Обёртка бара даты тренировок — якорь для абсолютного попапа. */
.wk-datebar-wrap {
  position: relative;
}

/* Контейнер попапа: под баром даты, по центру. */
.wk-datebar__cal {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
}

/* ============================================================
   ЭТАП UX: настройки аккаунта, тумблеры, вес, календарь истории,
   время приёмов пищи, кастомный скроллбар.
   (Дописано в конце; существующие правила не изменялись.)
   ============================================================ */

/* ---------- 1) Плавающая кнопка настроек (шестерёнка) ---------- */
/* ---------- 2) Группы в листе настроек ---------- */
/* ---------- 3) Кнопка-тумблер (активировать / деактивировать) ---------- */
/* OFF — зелёный CTA-вид; ON — приглушённый (уже активно, тап = выключить). */
.tgl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--cta);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, transform .08s ease, color .18s ease;
}

.tgl-btn:active {
  transform: scale(.99);
  background: var(--cta-press);
}

/* Включённое состояние — приглушённый вид. */
.tgl-btn--on {
  background: var(--accent);
  color: var(--text);
}

.tgl-btn--on:active {
  background: var(--card);
}

/* ---------- 4) Блок веса (всегда открыт, только график) ---------- */
.wt-open {
  display: block;
  margin-top: 8px;
}

/* ---------- 5) Календарь истории (цель достигнута / нет) ---------- */
.hist-cal {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

.hist-cal__head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.hist-cal__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

.hist-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* Приглушённые подписи дней недели. */
.hist-cal__dow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding-bottom: 4px;
}

/* Ячейка дня — скруглённая, число по центру. */
.hist-cal__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

/* Цель достигнута — зелёная заливка, белый текст. */
.hist-cal__cell--met {
  background: var(--cta);
  color: var(--on-accent);
}

/* Залогировано, но цель не достигнута — приглушённый серый. */
.hist-cal__cell--miss {
  background: var(--accent);
  color: var(--text);
}

/* Нет данных / ведущий спейсер — прозрачная. */
.hist-cal__cell--empty {
  background: transparent;
  color: transparent;
}

/* Легенда: цветные плашки + подписи. */
.hist-cal__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
}

.hist-cal__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hist-cal__legend span::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
}

.hist-cal__legend .hist-cal__cell--met::before,
.hist-cal__legend span.met::before {
  background: var(--cta);
}

.hist-cal__legend .hist-cal__cell--miss::before,
.hist-cal__legend span.miss::before {
  background: var(--accent);
}

/* ---------- 6) Список времени приёмов пищи (дневник) ---------- */
.mr-times {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Строка: поле времени + удаление. */
.mr-time-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mr-time-row input {
  flex: 1 1 auto;
}

/* Маленькая кнопка удаления ✕. */
.mr-time-del {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: var(--bg);
  color: var(--danger);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}

.mr-time-del:active {
  transform: scale(.92);
  background: var(--accent);
}

/* Ряд добавления: поле времени + кнопка «+». */
.mr-time-add {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.mr-time-add input {
  flex: 1 1 auto;
}

/* ---------- 7) Скроллбар ----------
   Тонкий и нейтральный: оранжевый зарезервирован за действием, а не за
   ползунком. В Chrome/WebView2 свойство scrollbar-color сильнее правил
   ::-webkit-scrollbar ниже, поэтому цвет задаём именно здесь. */
#view,
body,
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Место под ползунок резервируем ВСЕГДА. В Telegram Desktop скроллбар
   классический и занимает ширину: при смене раздела #view на миг пустеет,
   прокрутки нет — ползунок исчезает, окно становится шире на ~10px, нижняя
   панель растягивается и все подписи «дёргаются» вправо, а через долю
   секунды возвращаются. На телефонах скроллбар накладной, и правило
   ничего не меняет. */
html {
  scrollbar-gutter: stable;
}

#view::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;
}

#view::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
}

#view::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 8px;
}

#view::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Компактная шапка аккаунта: меньше аватар и подписи (модификатор .acc-header--compact). */
.acc-header--compact {
  gap: 12px;
  /* margin-bottom НЕ переопределяем — используем стандартный отступ карточки
     (.card margin-bottom:16px), чтобы промежуток был такой же, как между
     остальными блоками (подписка/параметры и т.д.). */
}
.acc-header--compact .acc-avatar {
  width: 44px;
  height: 44px;
  box-shadow: none;
}
.acc-header--compact .acc-avatar--empty {
  font-size: 22px;
}
.acc-header--compact .acc-name {
  font-size: 16px;
}
.acc-header--compact .acc-username {
  font-size: 12.5px;
  margin-top: 0;
}

/* Навигация по месяцам в календаре истории (‹ / ›) — как в мини-календаре. */
.hist-cal__head {
  justify-content: space-between;
}
.hist-cal__nav {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hist-cal__nav:disabled {
  opacity: .35;
  cursor: default;
}

/* ============================================================
   ОНБОРДИНГ-ВИЗАРД (onb-*)
   Полноэкранный пошаговый мастер. Пастельная палитра и токены (:root):
   фон --bg, карточки --card, CTA --cta, поля как .field.
   ============================================================ */

/* Полноэкранный контейнер: колонка, центрируем содержимое по вертикали. */
.onb-wizard {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px
    calc(var(--safe-bottom) + 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: fadeIn .28s ease;
}

/* Один шаг мастера: колонка, растягивается на всю доступную высоту,
   содержимое центрируем, а onb-actions прижимаем книзу. */
.onb-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  animation: fadeIn .24s ease;
}

/* Заголовок шага. */
.onb-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  margin: 0;
}

/* Подзаголовок/описание под заголовком (необязательный). */
.onb-subtitle {
  font-size: 15px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  margin: -8px 0 0;
}

/* Поле шага: подпись + input, как .field. */
.onb-field {
  display: block;
  margin: 0;
}

/* Ввод внутри шага — как .field__input. */
.onb-field__input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Стрелка для select внутри шага (как select.field__input). */
select.onb-field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238A8A93' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 38px;
}

/* Выбор пола: две большие кнопки бок о бок. */
.onb-choices {
  display: flex;
  gap: 12px;
}

/* Одна кнопка пола: большая, карточкой, наследует вид .field__input. */
.onb-choice {
  flex: 1;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color .18s ease, background .18s ease,
    box-shadow .18s ease, transform .08s ease;
}

.onb-choice:active {
  transform: scale(.98);
}

/* Выбранная кнопка пола — зелёная рамка/подсветка (--cta). */
.onb-choice--on {
  border-color: var(--cta);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Ряд действий (обычно одна CTA + при необходимости «Назад»). */
.onb-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* Основная CTA «Далее» — как .btn .btn--cta .btn-block (52px, зелёная). */
.onb-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: none;
  border-radius: 14px;
  background: var(--cta);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--shadow-2);
  transition: background .18s ease, transform .08s ease, opacity .18s ease;
}

.onb-next:active {
  transform: scale(.98);
  background: var(--cta-press);
}

.onb-next:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Приглушённая ссылка «Пропустить». */
.onb-skip {
  align-self: center;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.onb-skip:active {
  opacity: .7;
}

/* Индикатор шагов — ряд точек по центру. */
.onb-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}

.onb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}

/* Активная точка — зелёная и чуть крупнее. */
.onb-dot--active {
  background: var(--cta);
  opacity: 1;
  transform: scale(1.15);
}

/* Пройденный шаг — заполненная точка (--cta), без увеличения. */
.onb-dot--done {
  background: var(--cta);
  opacity: 1;
}

/* Кнопка «Назад» в мастере — приглушённая, вторичная. */
.onb-back {
  align-self: center;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.onb-back:active {
  opacity: .7;
}

/* Финальный тумблер «Вечерняя сводка в 21:00» — карточка-переключатель. */
.onb-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.onb-toggle--on {
  border-color: var(--cta);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.onb-toggle__emoji {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.onb-toggle__text {
  flex: 1;
  min-width: 0;
}
.onb-toggle__title {
  display: block;
  font-weight: 700;
  font-size: 15px;
}
.onb-toggle__hint {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.onb-toggle__mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 14px;
  font-weight: 800;
}
.onb-toggle--on .onb-toggle__mark {
  border-color: var(--cta);
  background: var(--cta);
  color: var(--on-accent);
}

/* ============================================================
   КАМЕРА: отложенное включение и затвор (scan-cam-*)
   ============================================================ */

/* Плейсхолдер + большая CTA «Включить камеру».
   Заглушка выглядит как окно камеры, пока getUserMedia не запрошен. */
.scan-cam-enable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 240px;
  padding: 28px 20px;
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: border-color .18s ease, background .18s ease, transform .08s ease;
}

.scan-cam-enable:active {
  transform: scale(.99);
  background: var(--card);
}

/* «Кнопка»-CTA внутри плейсхолдера (визуально как .btn--cta, но inline). */
.scan-cam-enable__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border: none;
  border-radius: 14px;
  background: var(--cta);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 16px;
  box-shadow: var(--shadow-2);
}

/* Затвор — одна круглая кнопка на экране камеры (#scan-shutter, стили —
   в css/scan.css). Кнопки камеры в нижней панели больше нет: вторым
   затвором она быть не может. */

/* Маленькая подпись с целевой датой съёмки (под окном камеры). */
.scan-cam-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
}

/* ============================================================
   ПОДПИСКА: выделенный план + бейджи/экономия (sub-*)
   Дополняет существующие .sub-* рядом с .card / .sub-tariffs.
   ============================================================ */

/* Выделенная («лучшая») карточка тарифа: подсвеченная рамка/свечение --cta. */
.sub-card--best {
  position: relative;
  border: 2px solid var(--accent);
  box-shadow: none;
}

/* Пробный период + «истёкшая» подписка (экран подписки). */
.sub-status__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sub-status--expired {
  border: 1.5px solid var(--danger);
}
.sub-trial {
  margin-top: 12px;
}

/* Экономика годового тарифа под названием: «≈ 333 ₽/мес» + «экономия N%». */
.sub-tariff__econ {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* Приведённая к месяцу цена годового тарифа. */
.sub-tariff__permonth {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* «Экономия N%» — акцентная зелёная плашка. */
.sub-tariff__save {
  display: inline-block;
  padding: 2px var(--s2);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-press);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* Опасная кнопка (удаление данных): контурная, красная. Наследует .btn .btn-block. */
.btn--danger {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid var(--danger);
  box-shadow: none;
}
.btn--danger:active {
  background: var(--danger-soft);
}

/* Пояснение над кнопкой удаления данных в листе настроек. */
.acc-danger-hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* Шапка дневника: заголовок + счётчик серии («стрик») в одну строку. */
.diary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.diary-head .page__title {
  margin-bottom: 0;
}

/* Счётчик серии дней подряд. Тёплый эмодзи-огонёк несёт цвет; фон — из палитры. */
.diary-streak {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
/* «Остывающий» вид, если сегодня ещё нет записей (серия под угрозой). */
.diary-streak--cold {
  opacity: .6;
  filter: grayscale(.35);
}

/* Строка записи дневника теперь тапабельна — открывает редактирование. */
.diary-entry {
  cursor: pointer;
}
.diary-entry:active {
  background: var(--surface-2);
}
/* Кнопка удаления не должна наследовать «палец» строки. */
.diary-entry__del {
  cursor: pointer;
}

/* Сетка зон тела: авто-заполнение, чтобы влезало и на узких экранах. */
.rec-zones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.rec-zone.is-active {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--on-accent);
}

/* --- Результат совета --- */
.rec-answer { margin-top: 14px; }

.rec-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.rec-badge--ok { background: var(--success-soft); color: var(--success); }
.rec-badge--warn { background: var(--warning-soft); color: var(--warning); }

.rec-cause {
  margin: 10px 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.rec-block { margin-top: 12px; }

.rec-block__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.rec-block ul {
  margin: 0;
  padding-left: 18px;
}

.rec-block li,
.rec-block p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin: 2px 0;
}

/* «Красные флаги» — визуально отделены: это про безопасность. */
.rec-block--flags {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--danger);
  background: var(--danger-soft);
}
.rec-block--flags .rec-block__title { color: var(--danger); }

.rec-disclaimer {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
}

.rec-error {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--danger);
}

@media (max-width: 360px) {
}

/* Кнопки под карточкой AI-совета по добавке: «Заполнить форму» + «Купить». */
.sup-ai-suggest__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.sup-ai-suggest__actions .btn {
  flex: 1 1 0;
  min-height: 42px;
  font-size: 14px;
  padding: 0 10px;
}

/* «Купить» — ссылка, но выглядит как кнопка (наследует .btn .btn-ghost). */
.sup-ai-suggest__buy {
  text-decoration: none;
  white-space: nowrap;
}

/* Обязательная оговорка про БАД — тише основного дисклеймера. */
.sup-ai-disclaimer--bad {
  opacity: .85;
}

@media (max-width: 360px) {
  .sup-ai-suggest__actions { flex-direction: column; }
}

/* ============================================================
   ПОИСК БЛЮД В БАЗЕ ПРОДУКТОВ (подсказки под полем названия)
   ============================================================ */
.fsearch {
  margin: -4px 0 12px;
}

.fsearch__skeleton {
  height: 38px;
  border-radius: 10px;
}

.fsearch__list {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  max-height: 260px;
  overflow-y: auto;
}

.fsearch__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.fsearch__item:first-child { border-top: none; }
.fsearch__item:active { background: var(--surface-2); }

.fsearch__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.fsearch__brand {
  font-weight: 500;
  color: var(--muted);
}

/* Продукт из «Моих продуктов» — точнее базы, поэтому отмечен. */
.fsearch__mine {
  display: inline-block;
  margin-left: var(--s1);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  vertical-align: 1px;
}

.fsearch__macros {
  font-size: 12px;
  color: var(--muted);
}

.fsearch__hint {
  margin: 6px 2px 0;
  font-size: 11px;
  color: var(--muted);
}

/* Заметка AI-тренера над подсказками блюд (тренировочный день). */
.diary-recommend__note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}

/* =====================================================================
 *  ЭКРАН СОГЛАСИЙ (page-consent.js)
 *
 *  Первый экран, который человек видит при запуске. Он не должен выглядеть
 *  как договор мелким шрифтом: крупный заголовок, четыре понятные строки с
 *  галочками и одна кнопка. Сами документы открываются отдельной ссылкой.
 * ===================================================================== */
.page-consent {
  padding: var(--s5) var(--gutter) var(--s6);
}

.cns-head h1 {
  margin: var(--s1) 0 var(--s3);
  font: var(--fw-bold) var(--fs-h1) / var(--lh-tight) var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
}

.cns-lead {
  margin: 0 0 var(--s5);
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

.cns-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.cns-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.cns-row--on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.cns-check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--on-accent);
  cursor: pointer;
}

.cns-row--on .cns-check {
  border-color: var(--accent);
  background: var(--accent);
}

.cns-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.cns-row__title {
  color: var(--text);
  font: var(--fw-semibold) var(--fs-body) / var(--lh-normal) var(--font-body);
}

.cns-req {
  color: var(--accent-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  white-space: nowrap;
}

.cns-row__hint {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.cns-doc {
  align-self: flex-start;
  min-height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent-text);
  font: var(--fw-medium) var(--fs-sm) / 1 var(--font-body);
  text-decoration: underline;
  cursor: pointer;
}

.cns-error {
  margin: var(--s3) 0 0;
  color: var(--danger);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.cns-actions {
  margin-top: var(--s5);
}

.cns-meta {
  margin: var(--s3) 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: center;
}

/* Атрибуция базы продуктов (лицензия ODbL требует указывать источник). */
.fsearch__credit {
  margin: var(--s1) 0 0;
  color: var(--muted);
  font-size: var(--fs-2xs);
}