/* ==========================================================================
   Токены — приведены в соответствие с DESIGN.md (дизайн-система moy-assistant).
   Акцент и шрифт — Nunito, лаймовый. Нейтральная палитра, пастельные тинты и
   радиусы — из дизайн-системы (адаптация Notion).
   ========================================================================== */

:root {
  /* Акцент — см. DESIGN.md §1.1 */
  --accent: #abf200;
  --accent-dark: #89c200;
  --accent-light: #dbfd8a;
  --on-accent: #374151;

  /* Нейтральная палитра (Notion) — см. DESIGN.md §1.2 */
  --canvas: #ffffff;
  --surface: #f6f5f4;
  --surface-soft: #fafaf9;
  --hairline: #e5e3df;
  --hairline-soft: #ede9e4;
  --hairline-strong: #c8c4be;
  --ink: #374151;
  --ink-deep: #000000;
  --charcoal: #37352f;
  --slate: #5d5b54;
  --steel: #787671;
  --stone: #a4a097;

  /* Пастельные тинты для карточек-заметок (совет, профиль) */
  --card-tint-peach: #ffe8d4;
  --card-tint-rose: #fde0ec;
  --card-tint-mint: #d9f3e1;
  --card-tint-lavender: #e6e0f5;
  --card-tint-sky: #dcecfa;
  --card-tint-yellow: #fef7d6;
  --card-tint-lavender-text: #391c57;

  /* Семантика */
  --danger: #e03131;
  --danger-light: #fdeceb;
  --warning: #dd5b00;
  --success: #1aae39;

  /* Радиусы по системе */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-full: 9999px;

  /* Совместимость со старыми именами, которыми пользуется весь остальной файл */
  --bg: var(--canvas);
  --text: var(--ink);
  --field: var(--surface);
  --border: var(--hairline);
  --muted: var(--steel);

  /* Светлый текст поверх тёмной подложки (онбординг, см. #onboarding-content
     ниже) — 2026-08-20, аудит доступности по просьбе пользователя. */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.72);

  /* --accent (#abf200) на белом даёт контраст всего 1.36:1 — далеко ниже
     нужных WCAG 4.5:1 для текста. Это нормально для заливок (кнопки,
     активные состояния — там читает не сам лаймовый цвет, а тёмный
     --on-accent поверх него) и для тонких акцентов вроде рамки на фокусе,
     но КАК ЦВЕТ ТЕКСТА (единственное такое место в приложении — ссылки
     "Забыли пароль?"/"Зарегистрироваться" на экране входа) он практически
     нечитаем при плохом зрении. --accent-text — тот же тон (тот же hue),
     но затемнён до контраста 5.02:1 — используется только там, где акцент
     является ЦВЕТОМ ТЕКСТА, а не заливкой/рамкой (2026-08-20). */
  --accent-text: #567a00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-weight: 700; }

/* Иконки — линейный набор "Straight" из SVG-спрайта в index.html.
   Наследуют текущий цвет текста, размер подстраивается под font-size
   родителя, поэтому кнопке достаточно просто поставить font-size. */
.icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.2em;
  flex: none;
}

button .icon, .photo-label .icon, .ai-fallback-btn .icon {
  vertical-align: -0.22em;
  margin-right: 2px;
}

.day-nav-arrow .icon {
  margin-right: 0;
  vertical-align: -0.15em;
}

#login-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
  text-align: center;
}

#login-screen h1 {
  margin: 0;
  font-size: 1.6rem;
  color: var(--text);
}

/* Приведено к токену text-input из design-system.md — см. тот же комментарий
   у .wizard-step input[type="number"] выше (2026-08-20). */
#login-screen input {
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-strong);
  background: none;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
}

/* Найдено при аудите дизайн-системы 2026-08-17: единственное поле в
   приложении без правила :focus — без него рамка на фокусе не становится
   акцентной (только браузерный outline по умолчанию), в отличие от всех
   остальных полей (см. design-system.md, "Поля ввода"). */
#login-screen input:focus {
  outline: none;
  border-color: var(--accent);
}

#login-screen button {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-xl);
  padding: 13px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

#login-error {
  color: var(--danger);
  font-size: 0.9rem;
  min-height: 1.2em;
}

/* Восстановление пароля показывает в этом же блоке не только ошибки, но и
   нейтральные статусы ("код отправлен") — красный тут вводил бы в
   заблуждение, как будто что-то пошло не так (2026-08-20). */
#login-error.login-info {
  color: var(--steel);
}

#login-mode-switch,
#login-forgot-link {
  font-size: 0.9rem;
  color: var(--steel);
}

#login-mode-switch a,
#login-forgot-link a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Заставка при загрузке, онбординг, визард "О себе" (2026-08-19) ----------
   Все три — полноэкранные flex-дети body (как #login-screen/#app), поэтому
   position:static, видимость управляется исключительно классом .hidden —
   ни один родитель не должен быть position:fixed, иначе поедет высота
   safe-area на iOS. */

#splash-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
}

#splash-wordmark {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--on-accent);
  letter-spacing: 0.02em;
}

#onboarding-screen {
  flex: 1;
  position: relative;
  display: flex;
  overflow: hidden;
}

#onboarding-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: background-image 0.15s ease-out;
}

/* Затемняющая подложка снизу — гарантирует читаемость текста поверх фона
   независимо от того, что именно на нём. Раньше (55,65,81, до 0.16
   максимум) была рассчитана на сгенерированные абстрактные фоны с ровным
   цветом; на настоящих фото (срез киви/огурца, с яркими и тёмными пятнами
   вперемешку — семечки, прожилки) этого было мало: СРЕДНИЙ контраст тёмного
   текста получался высоким, но в конкретных пятных под буквами — низким,
   отсюда жалоба "плохо виден текст" (2026-08-20). Проверено расчётом
   контраста (WCAG) по реальным пикселям обеих фото — тёмная подложка от
   55% и почти непрозрачная (0.82) к низу даёт от 8:1 даже в самом ярком
   пятне под текстом, с большим запасом сверх нужных 4.5:1. Раз подложка
   теперь тёмная — текст переключён на светлый (--on-dark), тёмный текст
   поверх тёмной подложки было бы новой контрастной проблемой того же рода. */
#onboarding-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  gap: 20px;
  background: linear-gradient(
    180deg,
    rgba(18, 20, 26, 0) 25%,
    rgba(18, 20, 26, 0.55) 55%,
    rgba(18, 20, 26, 0.82) 100%
  );
}

#onboarding-text {
  text-align: center;
  padding-bottom: 8px;
}

#onboarding-wordmark {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--on-dark);
  margin-bottom: 6px;
}

#onboarding-subtitle {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--on-dark);
  line-height: 1.4;
}

#onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.onboarding-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
}

.onboarding-dot.active {
  background: var(--on-dark);
}

#onboarding-next-btn {
  width: 100%;
  background: var(--canvas);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-xl);
  padding: 15px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Визард "О себе" после регистрации ---------- */

#wizard-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#wizard-topbar {
  padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 0;
  min-height: 28px;
}

#wizard-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 24px;
}

#wizard-heading {
  font-size: 1.3rem;
  text-align: center;
  margin: 8px 0 24px;
  color: var(--text);
}

#wizard-subheading {
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  margin: -16px 0 20px;
}

/* Поле ввода приведено к токену text-input из design-system.md: rounded.md
   (8px, было --radius-lg/12px), высота 44px и паддинг spacing.sm/spacing.md
   (12px 16px) через box-sizing, а не «на глаз» — раньше здесь было отдельное,
   чуть более узкое и мелкое поле, чем в остальном приложении (жалоба
   пользователя 2026-08-20: «отступы как будто меньше и шрифт мельче»). */
.wizard-step input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-strong);
  background: none;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 16px;
}

.wizard-step input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
}

.wizard-option-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wizard-option {
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
}

.wizard-option.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.wizard-option-title {
  font-size: 0.98rem;
  font-weight: 700;
}

.wizard-option-desc {
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 3px;
  color: var(--muted);
}

.wizard-option.active .wizard-option-desc {
  color: var(--on-accent);
  opacity: 0.85;
}

#wizard-error {
  color: var(--danger);
  font-size: 0.88rem;
  min-height: 1.1em;
  text-align: center;
  margin-top: 8px;
}

#wizard-footer {
  padding: 4px 24px calc(16px + env(safe-area-inset-bottom, 0px));
}

#wizard-progress {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--hairline);
  overflow: hidden;
  margin-bottom: 8px;
}

#wizard-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.2s ease-out;
}

#wizard-step-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

#wizard-next-btn {
  width: 100%;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-xl);
  padding: 15px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Нижняя панель разделов (заменила шапку с текстовыми кнопками) ---------- */

/* Панель закреплена к низу окна (position: fixed) — всегда видна и не
   прокручивается вместе с контентом. Для контента в #app зарезервировано
   место снизу (#app padding-bottom), чтобы ничего не пряталось за ней. */
#app {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Когда нижняя панель скрыта (экран поиска/блюда/карточки), запас не нужен. */
#app:has(.bottom-nav.hidden) {
  padding-bottom: 0;
}

/* Вместо чёткой линии-обводки сверху — мягкая drop shadow на стыке панели
   и контента (X 0, Y -4, blur 8, spread 0, чёрный 3%), чтобы граница
   читалась мягко, без жёсткой линии. */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* Цветовая подложка F3F3F3 вместо чистого белого — по просьбе пользователя
     2026-08-20 (было var(--canvas)). */
  background: #f3f3f3;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.03);
  z-index: 30;
}

.bottom-nav.hidden {
  display: none;
}

.bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 6px 4px;
  font-family: inherit;
  color: var(--steel);
  cursor: pointer;
}

.bottom-nav-btn .icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0;
}

.bottom-nav-btn.active {
  color: var(--accent-dark);
}

/* Иконка #icon-plus сама по себе уже рисует и кружок, и плюс внутри (одной
   заливкой currentColor) — поэтому поверх неё не добавляем ещё один залитый
   акцентный фон (раньше так и было, получалось 3 кружка один в другом).
   Кнопка акцентного цвета, крупнее окружающих иконок и приподнята над
   панелью — читается как отдельная FAB-кнопка действия, а не как один из
   табов, поэтому не конфликтует с подсветкой активного раздела (та
   остаётся акцентной у .bottom-nav-btn.active). Под иконкой — белая
   круглая подложка (.bottom-nav-add-plate): без неё в приподнятой над
   панелью части кнопки (она прозрачная) при скролле было видно контент
   позади. */
.bottom-nav-add {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px 4px;
  color: var(--accent-dark);
  cursor: pointer;
  margin-top: -16px;
}

.bottom-nav-add-plate {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* Была var(--canvas) (белая) — осталась заметным белым пятном после того,
     как сама панель стала серой (#f3f3f3, см. .bottom-nav выше). Красящий
     смысл подложки — не белый цвет сам по себе, а то, чтобы прикрыть
     скроллящийся контент позади приподнятой над панелью части кнопки
     (см. комментарий у .bottom-nav-add ниже) — для этого достаточно
     непрозрачного фона В ЦВЕТ ПАНЕЛИ, не обязательно белого (2026-08-20). */
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-nav-add .icon {
  width: 3.75em;
  height: 3.75em;
  margin-right: 0;
}

/* ---------- Питание ---------- */

#nutrition-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#nutrition-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Экраны «Поиск продукта», «Добавить блюдо» и «Карточка продукта» — та же
   схема, что у остальных разделов: экран — колонка, скролл внутри, чтобы
   длинное содержимое не растягивало страницу и не сдвигало закреплённую
   нижнюю панель. */
#nutrition-search-view,
#nutrition-ai-view,
#nutrition-result-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#nutrition-search-scroll,
#nutrition-ai-scroll,
#nutrition-result-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  /* Запас сверху под закреплённую стрелку "назад" (см. .global-back-btn) —
     эти три экрана всегда показывают её, т.к. на них нет нижней панели. */
  padding-top: 58px;
}

/* ---------- Переключатель "Продукты / Мои блюда / Частые / Недавние" ---------- */
/* Подчёркивание вместо обводки: выбранная вкладка подчёркнута акцентным
   цветом, невыбранная — серым (тем же оттенком hairline, что раньше был
   протяжённой линией под всем рядом — по просьбе убрали линию целиком,
   оставили подчёркивание только под словом каждой вкладки). Источник
   поиска — общая база продуктов / личные блюда / то, что уже когда-то
   заносилось в дневник (см. /api/food-items, /api/my-dishes,
   /api/frequent-foods, /api/recent-foods). ЧЕТЫРЕ вкладки на узких экранах
   не помещаются в ряд без переноса — контейнер скроллится горизонтально
   (.search-scope-tabs), а обёртка (.search-scope-tabs-wrap) рисует лёгкое
   затухание с правого края, когда есть что проскроллить, чтобы это было
   заметно даже без видимого скроллбара на мобильных — см.
   initSearchScopeScrollHint в app.js, который включает/выключает
   .has-overflow по факту переполнения и позиции скролла. */
.search-scope-tabs-wrap {
  position: relative;
  margin-bottom: 14px;
}

.search-scope-tabs {
  display: flex;
  gap: 19px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.search-scope-tabs::-webkit-scrollbar {
  display: none;
}

.search-scope-tabs-wrap.has-overflow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--canvas));
  pointer-events: none;
}

.search-scope-tab {
  flex: none;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0 2px 10px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--steel);
  cursor: pointer;
}

.search-scope-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.nutrition-totals {
  background: var(--canvas);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

.nutrition-totals .big {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
}

/* Виджет дневной нормы КБЖУ — дизайн взят из макета norma.pen: подложка с
   градиентом, кольца прогресса, размеры шрифтов/отступы как в макете.
   Показывается вместо старой простой плашки, когда норма известна.
   Две плашки идут в один горизонтальный ряд (не друг под другом): первая —
   калории — видна целиком, вторая — БЖУ — выглядывает краешком справа,
   намекая, что можно свайпнуть. Скролл со scroll-snap, чтобы свайп красиво
   доводил до полного показа второй плашки. */
.nutrition-totals--norma {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nutrition-totals--norma::-webkit-scrollbar {
  display: none;
}

.norma-card {
  flex: 0 0 calc(100% - 16px);
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #abf174, #f8f274);
  padding: 14px 12px;
}

.norma-card--calories {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 125px;
}

.norma-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 59px;
  flex: 0 0 auto;
  gap: 2px;
}

.norma-mini-label {
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}

.norma-mini-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}

.norma-ring-wrap {
  position: relative;
  flex: 0 0 auto;
}

.norma-ring-wrap--big {
  width: 125px;
  height: 125px;
}

.norma-ring-wrap--small {
  width: 90px;
  height: 90px;
}

.norma-ring-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.norma-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
}

.norma-ring-number {
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.norma-ring-number--over {
  color: #b3471c;
}

.norma-ring-caption {
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.15;
  margin-top: 4px;
}

.norma-card--macros {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.norma-macro-labels,
.norma-macro-rings {
  display: flex;
  justify-content: space-between;
}

.norma-macro-label {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}

.norma-macro {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.norma-macro-value {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
}

/* Похвала под кольцом нормы — калории попали в цель (лёгкий акцент), и
   отдельная, более сильная версия, если ещё и все БЖУ попали в цель
   (см. renderNutritionPraise в app.js). Тот же паттерн "текст + лёгкий
   цветовой акцент" переиспользуется для серии чек-листа ниже. */
.nutrition-praise,
.checklist-streak {
  margin: -4px 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--card-tint-mint);
  border-left: 3px solid var(--success);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.4;
}

.nutrition-praise--strong {
  background: var(--accent-light);
  border-left-color: var(--accent-dark);
  font-weight: 600;
}

/* Подсказка "сохрани как своё блюдо" (приоритет 3, см.
   nutrition-engine/priority3-ai-to-dish-nudge-plan.md) — тот же
   .nutrition-praise, только с парой кнопок ниже текста. */
#dish-nudge-card .nutrition-result-actions {
  margin-top: 10px;
}

#dish-nudge-save-btn {
  background: var(--accent);
  color: var(--on-accent);
}

#dish-nudge-dismiss-btn {
  background: var(--surface);
  color: var(--text);
}

.nutrition-form {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

/* Плашка-карточка вокруг кнопки "Сохранить" — по просьбе пользователя
   (2026-08-20) убрана везде в интерфейсе: любой .nutrition-form, который
   служит просто обёрткой вокруг кнопки сохранения (.profile-detail-save —
   единый класс у всех кнопок "Сохранить"/"Удалить аккаунт навсегда" на
   экранах-нырках профиля, см. index.html), перестаёт быть карточкой и
   становится просто контейнером без рамки/фона/отступов — сама кнопка от
   этого не меняется, у неё и так не было своей рамки (.nutrition-form
   button ниже). Селектор через :has() автоматически подхватывает все
   текущие и будущие места с этим паттерном, без ручной правки каждого. */
.nutrition-form:has(> .profile-detail-save) {
  background: none;
  border: none;
  padding: 0;
}

/* То же самое, но для карточки вокруг ГРУППЫ полей ввода — по просьбе
   пользователя убрана в разделе "О себе" (возраст/рост/вес), где раньше
   была общая рамка-плашка вокруг всех полей; сами поля свой вид не
   теряют (.nutrition-form input[...] ниже). */
.nutrition-form--plain {
  background: none;
  border: none;
  padding: 0;
}

.nutrition-form textarea {
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-strong);
  background: none;
  padding: 11px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  resize: vertical;
}

.nutrition-form input[type="text"],
.nutrition-form input[type="number"],
.nutrition-form input[type="password"] {
  border-radius: var(--radius-xl);
  border: 1px solid var(--hairline-strong);
  background: none;
  padding: 11px 16px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
}

.nutrition-form input[type="text"]:focus,
.nutrition-form input[type="number"]:focus,
.nutrition-form input[type="password"]:focus,
.nutrition-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

#workout-type-other.hidden {
  display: none;
}

/* Кнопка "+ Добавить продукт" — раньше лежала в своей карточке-плашке
   (.nutrition-form), как и обычные формы ниже на этом экране, но для
   одной кнопки без полей это была лишняя рамка, отъедавшая место. Здесь
   те же цвета/форма, что и у .nutrition-form button, но без карточки
   вокруг — кнопка на всю ширину сама по себе. */
.nutrition-add-btn {
  width: 100%;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-xl);
  padding: 12px 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
}

.nutrition-form button {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-xl);
  padding: 12px 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.photo-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 9px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
}

.photo-label input {
  display: none;
}

#nutrition-photo-name {
  font-size: 0.8rem;
  color: var(--muted);
}

.food-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.food-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.food-search-input-icon {
  position: absolute;
  left: 16px;
  color: var(--muted);
  pointer-events: none;
}

/* Раньше строка поиска лежала внутри карточки-плашки (.nutrition-form),
   которая давала инпуту рамку/фон/радиус через .nutrition-form
   input[type="text"] — плашку убрали, чтобы освободить место, поэтому
   инпут теперь описывает свой вид сам, здесь же и покрупнее. */
.food-search-input-wrap #food-search-input {
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--hairline-strong);
  background: none;
  padding: 14px 16px 14px 42px;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--text);
}

.food-search-input-wrap #food-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

#food-search-photo-status {
  font-size: 0.8rem;
  color: var(--muted);
  min-height: 1.1em;
  margin-bottom: 6px;
}

.food-search-photo-label {
  flex: none;
  padding: 14px 17px;
  font-size: 1.25rem;
  margin: 0;
  border: none;
}

.hidden-file-input {
  display: none;
}

.photo-sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.photo-sheet-scrim.hidden {
  display: none;
}

.photo-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--canvas);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 10px 16px 20px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
  animation: photo-sheet-up 0.18s ease-out;
}

@keyframes photo-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.photo-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--surface);
  margin: 0 auto 14px;
}

.photo-sheet-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--surface);
  padding: 16px 4px;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}

/* Вариант с описанием под значением (сейчас — только "Уровень активности",
   см. renderActivitySheetOptions в app.js) — та же двухстрочная карточка,
   что и .wizard-option в визарде "О себе" (.wizard-option-title/-desc), но
   внутри плоского нижнего листа вместо отдельных рамок-плиток. */
.photo-sheet-option--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.photo-sheet-option-title {
  font-size: 1rem;
  font-weight: 600;
}

.photo-sheet-option-desc {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
}

.photo-sheet-icon {
  font-size: 1.3rem;
}

.photo-sheet-cancel {
  width: 100%;
  margin-top: 10px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius-xl);
  padding: 14px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}

.photo-sheet-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 4px 6px;
}

.workout-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.workout-type-field {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  padding: 12px 16px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  text-align: left;
}

.workout-type-caret {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--steel);
}

.workout-form {
  gap: 8px;
  padding: 12px 12px;
  border: none;
}

.workout-form .nutrition-result-actions {
  margin-top: 2px;
}

/* «Записи за день» — под карточкой тренировки, во всю ширину (как было),
   без обводки у самих записей (в .pen-макете у Frame 5 / «Инфо» нет ни
   заливки, ни обводки — просто текст). Ограничено #workout-entries, чтобы
   не задеть список блюд на странице питания с тем же классом .nutrition-entry. */
#workout-entries-heading {
  margin-top: 0;
  font-size: 0.94rem;
  padding: 0 10px;
  box-sizing: border-box;
}

#workout-entries {
  padding: 0 10px;
  box-sizing: border-box;
}

#workout-entries .nutrition-entry {
  border: none;
  padding: 8px 0;
  background: transparent;
}

#workout-entries .nutrition-entry-food {
  font-size: 0.875rem;
}

#workout-entries .nutrition-entry-macros {
  font-size: 0.75rem;
}

.workout-type-field.active {
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

/* Исправление specificity-бага: общее правило .nutrition-form button (0,1,1)
   перебивало собственные нейтральные стили .workout-type-field и .goal-option
   (0,1,0), из-за чего кнопка выбора тренировки и все цифры «Усилия» всегда
   заливались акцентным цветом, даже когда не выбраны. */
.workout-form .workout-type-field:not(.active) {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  padding: 12px 16px;
  font-weight: normal;
}

.workout-type-field {
  font-size: 0.94rem;
}

.workout-form .goal-option:not(.active) {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  color: var(--steel);
}

/* Размер/начертание шрифта в .pen-макете для полей и шкал: значения
   заметно мельче и не жирные там, где раньше стояли общие стили форм. */
#workout-duration {
  font-size: 0.94rem;
}

.sleep-quality-row .goal-option {
  font-size: 1rem;
  font-weight: normal;
}

.workout-sheet-options .photo-sheet-option,
.select-sheet-options .photo-sheet-option {
  padding: 14px 4px;
}

.workout-sheet-options .photo-sheet-option.active,
.select-sheet-options .photo-sheet-option.active {
  color: var(--accent-text);
}

/* Поле-"селект" (2026-08-20) — та же роль, что у .workout-type-field
   (открывает нижний лист с вариантами вместо рамки-плитки .goal-options
   сразу на экране), переиспользуется на "Цели" (основная/дополнительные)
   и "Уровень активности" в профиле. Не завязано на .workout-form, поэтому
   отдельный класс, а не переиспользование .workout-type-field. */
.select-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  text-align: left;
  margin-bottom: 16px;
}

.select-field span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-field-caret {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--steel);
}

.select-field.active {
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

.workout-type-other {
  width: 100%;
  margin-top: 8px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--hairline-strong);
  background: none;
  padding: 12px 16px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  box-sizing: border-box;
}

.workout-type-other.hidden {
  display: none;
}

#nutrition-estimate-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-xl);
  padding: 12px 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

#nutrition-status,
#nutrition-result-status {
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 1.2em;
}

.nutrition-result {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

/* Карточка продукта (экран подтверждения после поиска/ИИ/вручную) — без
   плашки-рамки вокруг, освободившееся место отдано под более крупные
   подписи и поля ввода. Формы "Добавить продукт в базу" и "Импорт списка"
   на экране поиска используют ту же базовую .nutrition-result и плашку
   намеренно сохраняют — там несколько полей подряд, рамка помогает не
   потерять, где заканчивается форма. */
.nutrition-result--flat {
  background: none;
  border: none;
  padding: 0;
  gap: 12px;
  margin-bottom: 0;
}

/* Специфичность повышена (.nutrition-result.nutrition-result--flat, а не
   просто .nutrition-result--flat) специально, чтобы гарантированно
   перебивать базовые .nutrition-result label/input ниже — раньше оба
   селектора были одного уровня специфичности, и из-за порядка в файле
   базовые правила побеждали, а увеличенный шрифт по факту не применялся. */
.nutrition-result.nutrition-result--flat label {
  font-size: 0.95rem;
}

/* НАЙДЕНО И ИСПРАВЛЕНО 2026-08-17: раньше поля здесь были совсем "без
   плашки" (без фона и рамки, только текст с тонкой перегородкой между
   полями строки) — пользователи жаловались, что непонятно, что это вообще
   можно редактировать (например, в карточке после "Оценить с помощью
   ИИ" — поля выглядели как обычный текст, а не как поля ввода). Теперь
   поля — обычные плашки с рамкой и фоном, ровно тем же стилем, что уже
   везде в приложении (.nutrition-form input, базовый .nutrition-result
   input у формы "Добавить продукт в базу") — единообразно с остальными
   экранами добавления/редактирования, как и попросили. Акцентную заливку
   (как у веса в .nutrition-result--picked ниже) сюда специально не
   добавляем — здесь ВСЕ поля одинаково редактируемы, акцент имеет смысл
   только там, где редактируемо только одно поле среди прочих.
   Перегородка между полями строки (.nutrition-result-row--divided) больше
   не нужна — у каждого поля теперь своя рамка, разделитель посередине
   вместе с ней выглядел бы избыточно, см. override ниже. */
.nutrition-result.nutrition-result--flat input {
  border: 1px solid var(--hairline-strong);
  background: none;
  border-radius: var(--radius-xl);
  padding: 9px 12px;
  font-size: 1.05rem;
}

.nutrition-result.nutrition-result--flat input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Перегородка-разделитель между полями строки была нужна, когда поля были
   плоским текстом без своей рамки — теперь у каждого поля своя плашка (см.
   выше), вертикальная линия между ними вместе с этим смотрелась бы как
   двойное разделение. В .nutrition-result--picked ниже разделитель убран
   ровно по той же причине (там поля-плашки были всегда). */
.nutrition-result.nutrition-result--flat .nutrition-result-row--divided label:not(:last-child) {
  border-right: none;
  padding-right: 0;
}

/* Имя блюда — без подписи "Блюдо" и без плашки, сразу крупным текстом.
   Специфичность селектора повышена (как и у .nutrition-result--flat выше)
   специально, чтобы гарантированно перебить общее правило для инпутов
   карточки (.nutrition-result.nutrition-result--flat input) — иначе его
   "border: none" стирает нижнюю черту у имени блюда. */
.nutrition-result.nutrition-result--flat input.nutrition-result-name {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--hairline);
  background: none;
  padding: 4px 0 10px;
  margin-bottom: 2px;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}

.nutrition-result.nutrition-result--flat input.nutrition-result-name:focus {
  outline: none;
  border-color: var(--accent);
}

/* Один и тот же порядок блоков для всех трёх сценариев (имя — вес —
   калории+жиры — углеводы+белки — кнопки — пояснение), кроме карточки
   продукта из базы (.nutrition-result--picked ниже), где кнопки нужны
   сразу после веса — там мы просто переставляем .nutrition-result-actions
   через order, без дублирования разметки. */
.nutrition-result.nutrition-result--flat .nutrition-result-name {
  order: 10;
}

.nutrition-result.nutrition-result--flat .nutrition-result-weight {
  order: 20;
}

.nutrition-result.nutrition-result--flat .nutrition-result-row {
  order: 30;
}

.nutrition-result.nutrition-result--flat .nutrition-result-actions {
  order: 50;
}

.nutrition-result.nutrition-result--flat #nutrition-result-status {
  order: 60;
}

/* Калории+жиры и углеводы+белки — в строку по 2, а не друг под другом: так
   карточка продукта умещается на экране целиком даже с открытой
   клавиатурой. Между полями строки — лёгкая серая перегородка посередине
   вместо рамки вокруг каждого поля. */
.nutrition-result-row {
  display: flex;
  gap: 14px;
}

.nutrition-result-row label {
  flex: 1;
  min-width: 0;
}

.nutrition-result-row--divided label:not(:last-child) {
  border-right: 1px solid var(--hairline);
  padding-right: 14px;
}

.nutrition-result label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

/* НАЙДЕНО И ИСПРАВЛЕНО 2026-08-17 (продолжение): вес порции в карточке "из
   базы" раньше был единственным полем с акцентной (лаймовой) заливкой —
   логика была "подсветить акцентом, что именно тут можно поправить", но
   на практике это читалось нелогично: в ЭТОЙ карточке редактируемое поле
   было зелёным, а в карточке ручного/ИИ-ввода (где редактируемы вообще
   все поля) — обычным серым, без всякой связи между собой. Пользователь
   прямо попросила развести по системе везде одинаково: редактируемое —
   рамка "ярко-серая" (var(--hairline-strong)), нередактируемое — рамка
   "бледно-серая" (var(--hairline)), никакой заливки фона нигде. Акцентный
   цвет остаётся только за тем, что уже описано в разделе "Область
   применения акцента" (кнопка действия, выбранный вариант в группе) — не
   за самим фактом "поле редактируемо". Вес здесь теперь выглядит ровно
   так же, как остальные редактируемые поля везде в приложении. */
.nutrition-result.nutrition-result--flat.nutrition-result--picked .nutrition-result-weight input {
  border: 1px solid var(--hairline-strong);
  background: none;
  border-radius: var(--radius-lg);
  padding: 10px 14px !important;
}

.nutrition-result.nutrition-result--flat.nutrition-result--picked .nutrition-result-weight input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Карточка продукта, выбранного из базы (поиск) — как в FatSecret: у
   продукта уже известна плотность КБЖУ на грамм, поэтому редактируется
   только вес. Имя и калории/жиры/углеводы/белки — нередактируемый
   результат расчёта, оформлены как плашки-показатели с "бледно-серой"
   рамкой (var(--hairline), без заливки фона) — той же системой, что и
   весь остальной дизайн полей, только светлее, чтобы визуально отступать
   на второй план по сравнению с редактируемым весом (соответствующие
   инпуты помечены атрибутом readonly в JS — см. setNutritionResultPickedMode).
   Специфичность у всех правил здесь — полная цепочка классов карточки,
   чтобы гарантированно перебить базовые .nutrition-result(--flat) правила
   выше независимо от порядка в файле. */
.nutrition-result.nutrition-result--flat.nutrition-result--picked input.nutrition-result-name {
  border-bottom: none;
  padding-bottom: 4px;
  cursor: default;
}

.nutrition-result.nutrition-result--flat.nutrition-result--picked .nutrition-result-actions {
  order: 25;
}

.nutrition-result.nutrition-result--flat.nutrition-result--picked .nutrition-result-row {
  gap: 10px;
}

.nutrition-result.nutrition-result--flat.nutrition-result--picked .nutrition-result-row label {
  border: 1px solid var(--hairline);
  background: none;
  border-radius: var(--radius-lg);
  padding: 9px 7px;
  text-align: center;
}

.nutrition-result.nutrition-result--flat.nutrition-result--picked .nutrition-result-row input {
  background: none;
  border: none;
  padding: 0;
  text-align: center;
  pointer-events: none;
  color: var(--text);
}

.nutrition-result--picked .nutrition-result-row input::-webkit-inner-spin-button,
.nutrition-result--picked .nutrition-result-row input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nutrition-result input,
.nutrition-result textarea {
  border: 1px solid var(--hairline-strong);
  background: none;
  padding: 9px 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  resize: vertical;
}

.nutrition-result input {
  border-radius: var(--radius-xl);
}

.nutrition-result textarea {
  border-radius: var(--radius-md);
}

.nutrition-result-actions {
  display: flex;
  gap: 8px;
}

.nutrition-result-actions button {
  flex: 1;
  border-radius: var(--radius-xl);
  border: none;
  padding: 11px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

#nutrition-save-btn {
  background: var(--accent);
  color: var(--on-accent);
}

#nutrition-cancel-btn {
  background: var(--surface);
  color: var(--text);
}

/* Кнопки карточки продукта — компактнее, чем общее правило выше (которое
   разделяют формы "Добавить продукт в базу"/"Импорт списка"): текст
   покороче ("Добавить" вместо "Добавить в дневник"), поэтому и сама
   кнопка не должна выглядеть настолько массивной. */
#nutrition-result-view .nutrition-result-actions button {
  padding: 9px 11px;
  font-size: 0.92rem;
}

.nutrition-heading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 8px 0;
  color: var(--text);
}

/* Без плашки (фона/обводки) — список продуктов и в дневнике, и в базе
   продуктов (оба используют этот же класс) читается как простой список,
   без карточек вокруг каждой записи. Освободившееся место отдано под сам
   текст: он крупнее, поэтому на экране помещается больше записей. */
.nutrition-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 10px 0;
  font-size: 1rem;
}

.nutrition-entry-info {
  display: flex;
  flex-direction: column;
}

.nutrition-entry-food {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.nutrition-entry-macros {
  color: var(--muted);
  font-size: 0.88rem;
}

.nutrition-entry-delete {
  background: var(--danger-light);
  border: none;
  color: var(--danger);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* ---------- Стрелка "назад" на экранах без нижней панели ---------- */
/* Раньше здесь были две текстовые кнопки "Назад к сегодня" (.back-btn /
   .back-btn-inline) внизу экранов поиска и ИИ-оценки — убраны по просьбе:
   кнопка внизу не всегда видна и занимает много места. Вместо них один
   общий компактный элемент #global-back-btn (см. index.html), закреплённый
   сверху слева, который showView() в app.js показывает на любом экране без
   доступа к нижней панели (условие то же самое, что скрывает саму панель —
   см. #app:has(.bottom-nav.hidden) ниже). */
.global-back-btn {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 10px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--canvas);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}

.global-back-btn.hidden {
  display: none;
}

.global-back-btn .icon {
  width: 20px;
  height: 20px;
}

/* ---------- Итоги ---------- */

#itogi-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#itogi-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* ОБНОВЛЕНО 2026-08-16: были кнопки-пилюли с фоном и видимым нативным
   скроллбаром снизу — по просьбе пользователя переделаны в навбар-
   подчёркивание, той же схемой, что .search-scope-tabs-wrap/.search-
   scope-tab выше (скроллбар спрятан, вместо него — лёгкое затухание с
   правого края, когда есть что проскроллить). В отличие от того
   переключателя, здесь подчёркивание ТОЛЬКО у выбранной вкладки — у
   невыбранных нет вообще никакого (там снизу border-bottom: 3px solid
   transparent — держит место, чтобы не было сдвига по высоте при
   переключении, но визуально ничего не видно). */
.itogi-tabs-wrap {
  position: relative;
  margin-bottom: 16px;
}

.itogi-tabs {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.itogi-tabs::-webkit-scrollbar {
  display: none;
}

.itogi-tabs-wrap.has-overflow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--canvas));
  pointer-events: none;
}

.itogi-tab {
  flex: none;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0 2px 10px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--steel);
  cursor: pointer;
}

.itogi-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.itogi-updated-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

#itogi-updated-label {
  font-size: 0.8rem;
  color: var(--muted);
}

#itogi-refresh-btn {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-xl);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.itogi-heading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 8px 0;
  color: var(--text);
}

.itogi-card {
  background: var(--canvas);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.itogi-card-main {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.itogi-card-sub {
  font-size: 0.9rem;
  color: var(--muted);
}

.itogi-discipline {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

.progress-bar {
  background: var(--surface);
  border-radius: var(--radius-full);
  height: 8px;
  overflow: hidden;
  margin-top: 6px;
}

.progress-bar-fill {
  background: var(--accent);
  height: 100%;
  border-radius: var(--radius-full);
}

.itogi-empty {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 8px 0;
}

.itogi-advice-card {
  background: var(--card-tint-lavender);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.itogi-advice-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--card-tint-lavender-text);
  margin-bottom: 6px;
}

.itogi-advice-text {
  font-size: 0.95rem;
  color: var(--charcoal);
}

.itogi-advice-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.95rem;
  color: var(--charcoal);
}

.itogi-advice-list li {
  margin-bottom: 8px;
}

.itogi-advice-list li:last-child {
  margin-bottom: 0;
}

.itogi-advice-empty {
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Чек-лист (вес, сон, шаги, тренировки) ---------- */

#checklist-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#checklist-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.checklist-card {
  background: var(--canvas);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 12px 10px;
  margin-bottom: 12px;
}

.checklist-card-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Карточки чек-листа по .pen-макету: поле ввода всегда видно и занимает
   всю ширину (значение видно напрямую, отдельной строки "занесено" нет),
   подзаголовки для вложенных шкал, цифры шкал подсвечиваются акцентным. */
.checklist-card-edit input {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-xl);
  border: 1px solid var(--hairline-strong);
  background: none;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text);
}

.checklist-card-edit input:focus {
  outline: none;
  border-color: var(--accent);
}

.checklist-card-sublabel {
  margin-top: 10px;
  margin-bottom: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.sleep-quality-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* Кружки шкалы растягиваются на всю ширину строки (с учётом отступов) —
   каждый занимает равную долю через flex:1, aspect-ratio держит их круглыми
   независимо от итоговой ширины. Специфичность через .sleep-quality-row
   гарантированно перебивает и .goal-option, и .nutrition-form button. */
.sleep-quality-row .goal-option {
  flex: 1;
  width: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#workout-status {
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 1.2em;
}

#workout-edit-cancel-btn {
  background: var(--surface);
  color: var(--text);
}

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

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.cal-month-label {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.cal-caret-icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--steel);
}

.cal-week-strip {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 16px;
  /* Цветовая подложка F3F3F3 под полоской дней — по просьбе пользователя
     2026-08-20 (было прозрачно, полоска стояла прямо на фоне страницы). */
  background: #f3f3f3;
  border-radius: var(--radius-lg);
  padding: 6px 4px;
  /* Разрешаем браузеру вертикальный скролл страницы через этот блок, но не
     мешаем нашей собственной обработке горизонтального свайпа по неделе. */
  touch-action: pan-y;
}

.cal-week-days {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 2px;
}

/* Стрелочки убраны — освободившееся место отдали под сами даты: цифры и
   подписи дней недели стали крупнее (см. .cal-dow/.cal-dom ниже), плюс
   немного больше воздуха вокруг каждой даты. */
.cal-day-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: none;
  border: none;
  border-radius: var(--radius-lg);
  padding: 10px 2px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.cal-day-pill .cal-dow {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--steel);
  text-transform: uppercase;
}

.cal-day-pill .cal-dom {
  margin-top: -2px;
  font-size: 1.05rem;
  font-weight: 700;
}

.cal-day-pill.today .cal-dow,
.cal-day-pill.today .cal-dom {
  color: var(--accent-dark);
}

.cal-day-pill.selected {
  background: var(--accent);
}

.cal-day-pill.selected .cal-dow,
.cal-day-pill.selected .cal-dom {
  color: var(--on-accent);
}

/* Точка под датой — есть ли в этот день хоть одна запись (питание или
   что-то из чек-листа). Место под неё зарезервировано всегда (просто
   прозрачная), чтобы у дней без записей высота пилюли не "прыгала". */
.cal-day-pill .cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
}

.cal-day-pill.has-activity .cal-dot {
  background: var(--accent-dark);
}

.cal-day-pill.selected.has-activity .cal-dot {
  background: var(--on-accent);
}

.cal-year-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.cal-year-nav button {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.cal-month-btn {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-full);
  padding: 14px 4px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.cal-month-btn.active {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- Действия над записью (редактировать / удалить) ---------- */

.nutrition-entry-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.nutrition-entry-edit {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.ai-fallback-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-align: left;
  cursor: pointer;
  padding: 6px 2px 14px;
}

.food-item-add {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* ---------- Профиль (цели) ---------- */

#profile-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#profile-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* ---------- Профиль — вкладки, строки-списки ----------
   Добавлено 2026-08-17 при переработке экрана профиля по референсу
   пользователя (см. комментарий у #profile-view в index.html); аватарные
   кружки и отдельная шапка с именем/email, которые здесь были изначально,
   убраны 2026-08-19/2026-08-20 по просьбе пользователя — email теперь
   просто первая строка списка "Личные данные". Строки списка
   (.profile-list-row) сознательно БЕЗ карточки/фона/разделителей — как в
   референсе: просто подпись слева, значение и стрелка справа, отступ
   между строками. Ничего не заливается фоном — тот же принцип "рамка/
   заливка — только когда это реально нужно", что и у полей ввода (см.
   design-system.md, "Поля ввода"), просто применённый здесь не к полю, а
   к списку. */
.profile-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 13px 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-list-label {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  /* Не сжимается и не переносится — переносится только длинное значение
     справа (см. .profile-list-value ниже), как у "Цели по уходу" с
     несколькими выбранными пунктами. */
  flex-shrink: 0;
  white-space: nowrap;
}

.profile-list-value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  min-width: 0;
  justify-content: flex-end;
  text-align: right;
}

.profile-list-value-text {
  min-width: 0;
}

.profile-list-chevron {
  width: 15px;
  height: 15px;
  color: var(--stone);
}

/* "Тарифный план"/Email — не настоящая навигация (см. комментарий в
   index.html), но должны выглядеть как обычная строка списка — разницы в
   оформлении нет, только в поведении по тапу. */
.profile-list-row--static {
  cursor: default;
}

.profile-list-row--danger .profile-list-label,
.profile-list-row--danger .profile-list-value,
.profile-list-row--danger .profile-list-chevron {
  color: var(--danger);
}

.profile-tab-panel {
  margin-top: 4px;
}

.profile-tariff-row {
  margin-top: 4px;
}

.profile-premium-banner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-full);
  padding: 13px 20px;
  margin: 10px 0 4px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.profile-premium-banner .icon {
  width: 18px;
  height: 18px;
}

.profile-notice {
  min-height: 1.2em;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ---------- Профиль — экраны-нырки (биометрия/цель/активность/уход/
   помощь/удаление аккаунта) — та же схема "колонка + скролл внутри", что
   и у остальных вложенных экранов без нижней панели (см. комментарий у
   #nutrition-search-view выше), с тем же запасом сверху под закреплённую
   стрелку "назад". ---------- */
#profile-biometrics-view,
#profile-nutrition-goal-view,
#profile-activity-view,
#profile-targets-view,
#profile-help-view,
#profile-delete-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.profile-detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-top: 58px;
}

.profile-detail-save {
  width: 100%;
}

.profile-save-status {
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 1.2em;
}

.nutrition-form button.profile-detail-save--danger {
  background: var(--danger);
  color: #fff;
}

/* .profile-note.profile-note--danger (не просто .profile-note--danger) —
   специфичность на уровень выше базового .profile-note (он объявлен ниже
   по файлу и иначе перебивал бы фон/цвет здесь, т.к. у обоих правил был бы
   одинаковый вес и побеждал бы более поздний по порядку в файле). */
.profile-note.profile-note--danger {
  background: var(--danger-light);
  color: var(--charcoal);
}

.goal-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.goal-option {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--steel);
  cursor: pointer;
}

.goal-option.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Увеличено с 0.85rem (13.6px) до 0.95rem (~15.2px) и добавлен отступ снизу
   — жалоба пользователя 2026-08-20: подписи над полями визарда выглядели
   мельче и без зазора от самого поля. Класс общий для всего приложения
   (визард, профиль и т.д.), поэтому эффект виден везде, не только в
   онбординге — это и есть цель («тексты в приложении и в онбординге должны
   быть одного размера»). */
.form-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}

/* Только для визарда "О себе": там подписи — простые блоки без общего
   flex-gap контейнера (в отличие от .nutrition-form, где отступ уже даёт
   gap: 10px и добавлять сюда margin не нужно, иначе зазор задвоится) — без
   этого правила подпись стояла вплотную к полю. Жалоба 2026-08-20. */
.wizard-step .form-label {
  margin-bottom: 8px;
}

.profile-note {
  background: var(--card-tint-lavender);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--charcoal);
  margin-bottom: 16px;
}

#goals-status {
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 1.2em;
}

/* ---------- Состояния кнопок (design.md §4.1) ---------- */

/* Active: лёгкое затемнение на момент тапа — тактильная обратная связь
   на мобильных (наводки :hover намеренно не проектируем). */
button:not(:disabled):active {
  filter: brightness(0.94);
}

/* Disabled: кнопки выключаются из JS на время сетевых запросов —
   приглушённое состояние убирает путаницу «нажал, а ничего не происходит». */
button:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* ---------- Конструктор "Моих блюд" из ингредиентов ----------
   См. nutrition-engine/recipe-constructor-plan.md — сознательно почти без
   новых классов: список ингредиентов и итоги переиспользуют .nutrition-entry
   и .nutrition-totals, выбор "вручную/из ингредиентов" — .ai-fallback-btn.
   Единственный по-настоящему новый визуальный элемент — редактируемый вес
   ингредиента прямо внутри строки списка, стили ниже. */
#my-dish-add-choice {
  margin-bottom: 8px;
}

.dish-constructor-grams-input {
  width: 56px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: none;
}

.dish-constructor-grams-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---- Лоадеры при смене дня (см. loadNutritionDay/loadChecklistDay) ----
   Пока ответ от сервера летит и данных для даты ещё нет в кэше, вместо
   пустого экрана показываем небольшой индикатор. Это решает ощущение
   "данные появляются с задержкой" — теперь сразу видно, что идёт загрузка. */
.day-loading {
  padding: 18px 0;
  color: var(--muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.day-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--hairline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: day-loading-spin 0.8s linear infinite;
  flex-shrink: 0;
}

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

.hidden { display: none !important; }