/* ============================================================
   NutriBot — Design System 2.0
   LIGHT theme primary (warm white), dark via prefers-color-scheme.
   Ported from nutribot/web/static/mockup/mockup.css — owner-approved.
   ============================================================ */

/* ── Design tokens (LIGHT — primary) ───────────────────────── */
:root {
  /* Backgrounds */
  --bg:          #FAFAF8;
  --bg-card:     #FFFFFF;
  --bg-muted:    #F4F4F2;

  /* Text */
  --text-primary:   #111110;
  --text-secondary: #6B6B6B;
  --text-muted:     #9CA3AF;

  /* Brand / data colors */
  --green:          #16A34A;   /* calories primary */
  --green-light:    #DCFCE7;
  --green-ring:     #22C55E;
  --protein:        #E0476B;   /* coral — matches ring/meal usage, warmer than berry */
  --protein-light:  #FEE2E2;
  --fat:            #D97706;   /* amber */
  --fat-light:      #FEF3C7;
  --carb:           #0284C7;   /* sky */
  --carb-light:     #E0F2FE;

  /* UI chrome */
  --border:         #E5E7EB;
  --border-strong:  #D1D5DB;
  --radius-card:    16px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --nav-h:          72px;
  --safe-bottom:    env(safe-area-inset-bottom, 0px);

  /* Shadows */
  --shadow-card:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-fab:     0 4px 16px rgba(22,163,74,.40);
  --shadow-nav:     0 -1px 0 var(--border);

  /* Page horizontal padding — unified across all pages */
  --page-pad: 12px;

  /* Transitions */
  --t-fast: 150ms ease-out;
  --t-mid:  250ms ease-out;
  --t-slow: 350ms cubic-bezier(.32,.72,0,1);

  /* Aliases for legacy templates */
  --accent:          var(--green-ring);
  --accent-dim:      rgba(34,197,94,.15);
  --accent-muted:    rgba(34,197,94,.08);
  --surface:         var(--bg-card);
  --card:            var(--bg-card);
  --card-hover:      var(--bg-muted);
  --danger:          #F85149;
  --danger-dim:      rgba(248,81,73,.12);
  /* Ожидание: очередь недосланных записей. На светлом фоне #F59E0B не читается —
     берём тот же тон на ступень темнее. */
  --amber:           #B45309;
  --amber-dim:       rgba(245,158,11,.13);
  --amber-line:      rgba(245,158,11,.34);
  /* Home-state chip color for the gym+home hybrid schedule widget (spec 2026-08-16) */
  --blue:            #3B82F6;
  --blue-dim:        rgba(59,130,246,.15);
  --color-protein:   var(--protein);
  --color-fat:       var(--fat);
  --color-carb:      var(--carb);
  /* Плёнка нажатия для строк-контейнеров — см. секцию «Отклик на касание» */
  --press-tint:      rgba(0,0,0,.07);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Glow overlay — used on login/welcome screens */
  --glow: radial-gradient(ellipse 120% 55% at 50% -8%, rgba(34,197,94,.12), transparent 60%);
}

/* ── DARK mode overrides ──────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:          #0D1117;
  --bg-card:     #1C2128;
  --bg-muted:    #161B22;

  --text-primary:   #F0F6FC;
  --text-secondary: #8B949E;
  --text-muted:     #6E7681;

  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);

  --shadow-card:   0 1px 3px rgba(0,0,0,.4), 0 0 0 1px var(--border);
  --shadow-nav:    0 -1px 0 var(--border), 0 -8px 24px rgba(0,0,0,.3);

  --accent-dim:    rgba(34,197,94,.12);
  --accent-muted:  rgba(34,197,94,.06);
  --danger-dim:    rgba(248,81,73,.12);
  --amber:         #F59E0B;
  --amber-dim:     rgba(245,158,11,.13);
  --amber-line:    rgba(245,158,11,.28);
  --blue-dim:      rgba(59,130,246,.18);

  /* Macro badge backgrounds — muted tint on dark surfaces */
  --protein-light: rgba(224,71,107,.18);
  --fat-light:     rgba(217,119,6,.18);
  --carb-light:    rgba(2,132,199,.18);

  --press-tint: rgba(255,255,255,.08);

  --surface:  #161B22;
  --card:     #1C2128;
  --card-hover: #21262D;
  --glow: radial-gradient(ellipse 120% 55% at 50% -8%, rgba(34,197,94,.16), transparent 60%);
}

/* ── Reset / base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* a11y: visible keyboard focus ring (WCAG 2.4.7). :focus-visible fires only for
   keyboard/programmatic focus, so mouse clicks stay ring-free. Inputs with their
   own focus styling (box-shadow/border) keep it via higher specificity. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* iOS Safari keeps :focus-visible on a tapped <summary>; в карточке с
   overflow:hidden от кольца остаётся только нижняя грань — паразитная зелёная
   линия под шапкой (avg 19.08). Гасим точечно у этой карточки, чтобы не
   отнимать клавиатурный фокус у остальных <summary> (iPad с клавиатурой тоже
   hover:none). */
@media (hover: none) {
  .wlog2-head:focus-visible { outline: none; }
}

html {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Страница обязана закрасить собой весь вьюпорт. Раньше короткую страницу
   докрашивал холст — но в установленном приложении холст теперь цвета таббара
   (им же iOS красит полосу ниже вьюпорта, см. base.html), и хвост короткой
   страницы стал бы светлее остальной. Проценты, а не единицы вьюпорта: на iOS
   те врут (см. .app-frame), а 100% берётся от html и врать не умеет. */
html { height: 100%; }

body {
  background: var(--bg);
  min-height: 100%;
}

a { color: var(--green); text-decoration: none; }
@media (hover: hover) {
  a:hover { opacity: 0.85; }
}

button { cursor: pointer; font-family: var(--font); background: none; border: none; }
canvas { display: block; max-width: 100%; }

/* ══════════════════════════════════════════════════════════
   ОТКЛИК НА КАСАНИЕ
   Палец жмёт — экран отвечает в том же кадре. Без этого приложение
   читается как сайт. База для всего, что тапабельно; компонентные
   :active ниже по файлу специфичнее и оставляют себе свою настройку.
   ══════════════════════════════════════════════════════════ */

/* Свойство наследуемое, поэтому хватает одного объявления на корне.
   Иначе iOS Safari кладёт поверх нашего отклика свой синий прямоугольник —
   и с задержкой, отчего нажатие выглядит чужим. */
html { -webkit-tap-highlight-color: transparent; }

/* Приглушение — для всего, что нажимают. Метки в списке: только те, что
   работают как кнопка; label вокруг текстового поля сюда не входит, иначе
   поле гасло бы при попытке в него попасть. */
a:active,
button:active,
summary:active,
[role="button"]:active,
.seg-label:active,
.inv-label:active,
.import-file-label-btn:active,
.nb-onb-consent:active,
.nb-login-consent:active {
  opacity: .62;
}

/* Строки-контейнеры со своими кнопками внутри: подсветка фона, а не прозрачность.
   :active достаётся и предкам — приглушение на тап по кнопке внутри гасило бы
   всю строку целиком. Накладываем градиентом поверх собственного фона: подмена
   background-color на --bg-muted в тёмной теме даёт разницу в 6 единиц и на
   телефоне не читается, а box-shadow затёр бы тень карточки. */
.water-card:active,
.wp-ex-row:active {
  background-image: linear-gradient(var(--press-tint), var(--press-tint));
}

/* Мгновенно — значит без въезда: базовый transition в 150ms успевает
   прочитаться как задержка ответа. Правило действует, только пока палец
   на элементе; отпускание возвращается плавно, уже через базовый transition.
   !important — потому что базовый transition компонента почти всегда
   специфичнее этого селектора (.bottom-nav a против a:active), а отклик на
   касание не то место, где компонент вправе выиграть.
   Классы — тап-цели, которые не <a>/<button>/<summary>. */
a:active,
button:active,
summary:active,
[role="button"]:active,
.water-card:active,
.wp-ex-row:active,
.seg-label:active,
.inv-label:active,
.import-file-label-btn:active {
  transition: none !important;
}

/* Нижняя навигация: серый текст приглушением почти не меняется — берём фон.
   Через .bottom-nav a, а не .nav-btn: «+» — это button, ему фон перекрыл бы градиент. */
.bottom-nav a:active { background: var(--accent-muted); }

/* ── Inline SVG icons (replaced emoji) ─────────────────────── */
.ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.inline-ic { color: var(--text-muted); vertical-align: -3px; }

/* ── htmx swap fade ─────────────────────────────────────── */
.htmx-swapping { opacity: 0; transition: opacity .15s ease; }
.htmx-settling  { opacity: 1; transition: opacity .15s ease; }

/* ── Смена экрана ───────────────────────────────────────────
   Переход только сглаживает: содержимое уже на месте и ничего не ждёт —
   анимация идёт поверх случившегося. Доли секунды, чистое проявление,
   без сдвигов и масштабов: экран, который каждый раз «выезжает», через
   неделю начинает казаться медленным. Нижняя навигация не участвует —
   она остаётся на месте, и это как раз читается как приложение.
   Само объявление — в правиле main.container ниже (секция Main layout),
   чтобы у элемента остался один блок стилей. */
@keyframes nb-page-in { from { opacity: 0; } }

/* Фрагмент, который подменил htmx (лента дня, фильтры, тело программы).
   Класс вешает app.js уже ПОСЛЕ подмены. */
.nb-swap-in { animation: nb-page-in 150ms ease-out; }

/* Сдвиг между вкладками отменён 12.08 по просьбе владельца. Отдельно вредило
   то, что уходящий экран задерживал саму навигацию на 120 мс — на тяжёлом
   Спорте это читалось как подтормаживание. Осталось короткое проявление на
   приходе (nb-page-in в правиле main.container) и всё. */

/* Переходы между экранами делаем сами, а НЕ через @view-transition.
   Проверено дважды, с разницей в сутки и на разном коде:
   — 11.08: со `@view-transition { navigation: auto }` вторая подряд смена
     вкладки залипает, клик не доходит.
   — 12.08: перепроверено после того, как удалили свой JS-перехватчик кликов по
     таббару (он был главным подозреваемым). Симптом остался прежним и стал
     воспроизводиться начисто: 3 прогона из 3 в Chromium, всегда на втором
     переходе, всегда на чат (у него оболочка прибита к вьюпорту). В WebKit
     8 из 8 проходят — то есть дефект движко-зависимый, но это не оправдание.
   Для основного канала (ПВА) ненадёжная навигация дороже красивого перехода.
   Осталось короткое проявление на приходе (nb-page-in в main.container). */

/* Блоки дня приходят лесенкой — но ТОЛЬКО на запуске приложения с домашнего
   экрана ([data-nb-launch] ставит скрипт в <head> на первом документе сессии).
   На каждом переходе между вкладками это противоречило бы правилу выше: экран,
   который every time «собирается», через неделю читается как медленный.
   Пять секций первого экрана; ниже по списку задержка уже только мешает. */
@keyframes nb-stagger-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

[data-nb-launch] .container.flush .streak-strip,
[data-nb-launch] .container.flush .ring-section,
[data-nb-launch] .container.flush .macro-row,
[data-nb-launch] .container.flush .water-card,
[data-nb-launch] .container.flush .meals-section {
  animation: nb-stagger-in 380ms cubic-bezier(.22,.61,.36,1) both;
}
[data-nb-launch] .container.flush .streak-strip  { animation-delay: 30ms; }
[data-nb-launch] .container.flush .ring-section  { animation-delay: 90ms; }
[data-nb-launch] .container.flush .macro-row     { animation-delay: 150ms; }
[data-nb-launch] .container.flush .water-card    { animation-delay: 200ms; }
[data-nb-launch] .container.flush .meals-section { animation-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
  [data-nb-launch] .container.flush .streak-strip,
  [data-nb-launch] .container.flush .ring-section,
  [data-nb-launch] .container.flush .macro-row,
  [data-nb-launch] .container.flush .water-card,
  [data-nb-launch] .container.flush .meals-section { animation: none; }
}

/* Карточка распознавания на месте строки «Распознаю…»: подъезд синхронен
   переходу высоты контейнера в mountCard, иначе готовая карточка появляется
   раньше, чем шит успевает под неё вырасти. */
@keyframes nb-card-in { from { opacity: 0; transform: translateY(8px); } }
.nb-card-in { animation: nb-card-in 260ms cubic-bezier(.22,.61,.36,1) both; }

/* ── Shell + phone frame (desktop centers an app-frame; mobile = full-bleed) ── */
@media (min-width: 480px) and (display-mode: browser) {
  body {
    background: #E8E8E4;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 16px;
  }
}

/* Скроллится ДОКУМЕНТ, а не оболочка.
   Раньше высота была прибита к 100dvh, а прокрутка жила внутри main.container.
   Страница при этом не двигалась ни на пиксель — и браузер держал свою нижнюю
   панель развёрнутой во всю ширину с тенью: сворачивать её не на чем, страница
   «не листается». Отсюда та самая подложка снизу и в вебе, и в ПВА. Скроллим
   документ — панель ужимается в пилюлю сама, как на любом обычном сайте.
   Внутренняя прокрутка остаётся только в настольной рамке телефона
   (медиазапрос ниже), где рамка обязана быть фиксированной по высоте. */
/* Собственной высоты у оболочки НЕТ — намеренно. Все единицы вьюпорта (dvh,
   svh, lvh) в установленном приложении на iOS врут: WebKit #254868, «Incorrect
   height values when viewport-fit=cover is set for installed web apps» — они
   отдают высоту БЕЗ safe-area-inset. Замер с айфона avg: экран 912, инсет
   сверху 68, и все единицы дают ровно 912−68 = 844. Оболочка высотой 100dvh
   кончалась на 844, а таббар (sticky) вставал по её нижней кромке — те самые
   68 px фона под ним и были «подложкой». Восемь заходов чинили следствие.
   Теперь высоту задаёт содержимое, таббар прибит к настоящему вьюпорту
   (fixed), и полосе взяться неоткуда. Так же сделано в работающем PWA
   снабженца: ни одной viewport-единицы, fixed-меню, отступ через env(). */
.app-frame {
  position: relative;
  width: 100%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* Экран чата не листается вовсе: шапка и строка ввода стоят, ездит только
   лента. Ему нужна ровно высота экрана — и `fixed; inset: 0` даёт её без
   единиц: это вьюпорт по определению, каким бы его ни считал iOS. */
.app-frame--locked {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Установленное приложение (iOS standalone). Полосу экрана ниже вьюпорта iOS
   закрашивает фоном КОРНЕВОГО элемента, а его ставит скрипт в <head> — там же,
   где тема, до первой отрисовки. Отсюда красить холст нельзя: инлайновый стиль
   сильнее любого правила таблицы, и правило здесь молча проигрывало ему —
   в тёмной теме это и давало полоску другого цвета под таббаром. */
@media (display-mode: standalone) {
  /* Отступ снизу не резервируем: полоса «домой» ложится поверх нижних пикселей
     таббара, где иконок и так нет, а добавочные 34 px только поднимали иконки. */
  :root { --safe-bottom: 0px; }
}

@media (min-width: 480px) and (display-mode: browser) {
  .app-frame {
    width: 412px;
    min-height: 0;
    height: min(880px, calc(100dvh - 48px));
    border-radius: 40px;
    box-shadow: 0 0 0 10px #1a1a1a, 0 0 0 11px #2a2a2a, 0 24px 70px rgba(0,0,0,.42);
    overflow: hidden;
  }
  /* Чат на десктопе живёт внутри «корпуса», а не поверх окна: снимаем с него
     прибивку к вьюпорту, высоту даёт правило рамки выше. */
  .app-frame--locked { position: relative; inset: auto; }
  /* Таббар возвращается к нижней кромке корпуса: fixed увёл бы его на край окна. */
  .app-frame .bottom-nav { position: absolute; }
  /* В рамке прокрутка возвращается внутрь, а прибитые к экрану слои —
     к рамке: fixed увёл бы их на края окна браузера. Селектор через .app-frame
     не ради вложенности, а ради веса: одноклассовое правило проиграло бы
     собственному объявлению компонента ниже по файлу. */
  main.container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-frame .sheet-backdrop,
  .app-frame .bottom-sheet,
  .app-frame .about-sheet,
  .app-frame .nb-fan,
  .app-frame .nb-coach { position: absolute; }
  /* Прибитые к вьюпорту кнопки (крестик рецепта, шапка тренировки) — обратно
     в корпус: fixed увёл бы их на края окна браузера. */
  .app-frame .recipe-back { position: absolute; top: 12px; }
  .app-frame .dxh .dxh-top { position: absolute; top: 16px; }
}

/* ── Main layout ─────────────────────────────────────────────── */
main.container {
  flex: 1;
  width: 100%;
  /* clip, а не hidden: hidden по одной оси включает прокрутку по другой —
     контейнер снова стал бы скролл-контейнером, и панель браузера не свернулась бы. */
  overflow-x: clip;
  /* Таббар прибит к вьюпорту и места в потоке не занимает — высоту под него
     резервирует контейнер, иначе последняя карточка уезжает под меню. */
  /* +6px, не +16: на iPhone c Dynamic Island safe-area и так ~59px, лишняя
     константа съедала экран (фидбек avg 18.08) */
  padding: calc(env(safe-area-inset-top, 0px) + 6px) var(--page-pad)
           calc(var(--nav-h) + var(--safe-bottom) + 16px);
  animation: nb-page-in 170ms ease-out; /* смена экрана — см. секцию выше */
}
main.container::-webkit-scrollbar { display: none; }

/* App screens (today/progress/chat) self-pad their sections — flush the container */
main.container.flush {
  padding: env(safe-area-inset-top, 0px) 0 calc(var(--nav-h) + var(--safe-bottom) + 8px);
}

/* ── Запуск с домашнего экрана ──────────────────────────────
   iOS снимает свой стартовый экран раньше, чем webview успевает отрисовать
   первый кадр, и в стык видно белую вспышку. Фон страницы выставлен ещё до
   разбора CSS (скрипт в <head>), а мягкое проявление сшивает переход.
   Атрибут ставит тот же скрипт и только в установленном приложении при
   первом документе сессии: в браузере стартового экрана нет, а на переходах
   внутри приложения работает обычная смена экрана. */
@keyframes nb-launch-in { from { opacity: 0; } }

[data-nb-launch] .app-frame,
[data-nb-launch] .nb-login-page { animation: nb-launch-in 300ms ease-out both; }

/* На запуске проявляется весь shell — второй анимации содержимого не надо. */
[data-nb-launch] main.container { animation: none; }

/* ── Экран запуска: иконка, имя, полоса загрузки ─────────────
   Стартовая картинка iOS (apple-touch-startup-image) держится ровно до первого
   кадра и на Android её нет вовсе — а первый кадр приходит раньше, чем данные
   дня. Этот экран закрывает стык: пока приложение собирается, юзер видит не
   полупустой каркас, а знак и честную полосу. Снимает его app.js по загрузке
   страницы, но не раньше чем через ~0,9 с от старта — мигнувшая и сразу
   пропавшая заставка выглядит хуже, чем её отсутствие. */
.nb-splash { display: none; }

[data-nb-launch] .nb-splash {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 400;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  transition: opacity 300ms ease;
}

/* Подложка своя: в самой иконке фон прозрачный, и на тёмной теме лист повис бы
   в воздухе рядом с тенью от несуществующей плитки. */
.nb-splash-mark {
  width: 92px;
  height: 92px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  animation: nb-splash-mark 420ms cubic-bezier(.34,1.56,.64,1) both;
}

[data-theme="dark"] .nb-splash-mark {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

@keyframes nb-splash-mark {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}

.nb-splash-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--text-primary);
}

.nb-splash-bar {
  width: 128px;
  height: 3px;
  border-radius: 2px;
  background: var(--border-strong);
  overflow: hidden;
  margin-top: 6px;
}

/* Полоса неопределённая: сколько осталось, мы честно не знаем — показываем
   движение, а не выдуманный процент. */
.nb-splash-bar i {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 2px;
  background: var(--green);
  animation: nb-splash-run 1.05s cubic-bezier(.65,.05,.36,1) infinite;
}

@keyframes nb-splash-run {
  from { transform: translateX(-105%); }
  to   { transform: translateX(300%); }
}

.nb-splash--gone { opacity: 0; pointer-events: none; }

/* Предохранитель на самой заставке, не в JS. Раньше убрать её мог только
   app.js: он висит в конце <body> обычным скриптом, и если его загрузка
   зависала (сеть у нас медленная, а после деплоя адрес файла новый и в кэше его
   нет), то DOMContentLoaded не наступал, таймеры внутри initSplash никогда не
   заводились — и заставка оставалась на экране навсегда. Это и был «белый
   экран, который горит и висит» (12.08). Страница у нас серверная: под
   заставкой уже лежит готовый экран, поэтому показать его без JS — правильный
   исход, а не деградация. 6 секунд: заметно больше честного старта, чтобы не
   мигать зря, и заметно меньше терпения человека. */
[data-nb-launch] .nb-splash {
  /* forwards, а не both: с both «обратная» заливка применяла бы стартовый кадр
     все 6 секунд ожидания и держала opacity, ломая обычное скрытие через JS —
     заставка честно висела бы полный срок на каждом старте. */
  animation: nb-splash-deadline 260ms ease-out 6s forwards;
}

@keyframes nb-splash-deadline {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-nb-launch] .nb-splash { animation-duration: 1ms; }
}

@media (prefers-reduced-motion: reduce) {
  [data-nb-launch] .nb-splash { transition: none; }
  .nb-splash-mark { animation: none; }
  .nb-splash-bar i { animation: none; width: 100%; }
}

/* Для части людей движение на экране — вопрос самочувствия, а не вкуса.
   Экран, фрагмент и запуск появляются сразу; кольцо встаёт на новое значение
   без проезда (счётчик обрывает app.js — там же, где считает). */
@media (prefers-reduced-motion: reduce) {
  main.container,
  .nb-swap-in,
  .nb-card-in,
  [data-nb-launch] .app-frame,
  [data-nb-launch] .nb-login-page {
    animation: none;
  }
  .ring-fill { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   BOTTOM NAV
   ══════════════════════════════════════════════════════════ */
/* fixed, а не sticky: sticky прибивает элемент к нижней кромке ОБОЛОЧКИ, а её
   высота считалась сломанными единицами вьюпорта (см. .app-frame) — оболочка
   кончалась на 844 при экране 912, и под таббаром оставалась полоса фона.
   fixed считает низ от самого вьюпорта, единственной величины, которую iOS не
   искажает. Из потока таббар при этом выпадает — высоту под него резервируют
   отступом main.container, main.container.flush и main.container-chat. */
/* Клавиатура открыта (правка тренировки): fixed-таббар едет поверх полей — прячем */
body.kb-open .bottom-nav { display: none; }
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(250,250,248,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 0;
  z-index: 50;
  touch-action: manipulation;
}

[data-theme="dark"] .bottom-nav {
  background: rgba(22,27,34,.92);
}

/* Nav links (Сегодня, Прогресс, Чат, Профиль) */
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 6px 8px 6px;
  min-height: 44px;
  border-radius: 12px;
  transition: color var(--t-fast), background var(--t-fast);
  -webkit-touch-callout: none;
}

.bottom-nav a svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--t-fast);
}

.bottom-nav a.active {
  color: var(--green);
}

.bottom-nav a.active svg { stroke: var(--green); }

/* Активная вкладка коротко «клюёт» на новом экране: переход иначе читается
   только сменой цвета, а на телефоне этого почти не видно. Сам таббар при этом
   не двигается — правило «навигация остаётся на месте» в силе. */
@keyframes nb-tab-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.bottom-nav a.active svg { animation: nb-tab-pop 340ms cubic-bezier(.34,1.56,.64,1); }

@media (prefers-reduced-motion: reduce) {
  .bottom-nav a.active svg { animation: none; }
}
@media (hover: hover) {
  .bottom-nav a:hover {
    color: var(--text-secondary);
    background: var(--accent-muted);
  }
}

/* nav-fab: the «+» green pill, raised above nav */
.nav-fab {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 28px;
  background: linear-gradient(145deg, #22C55E, #16A34A);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-fab);
  transform: translateY(-8px);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  z-index: 51;
  flex-shrink: 0;
  padding: 0;
}
@media (hover: hover) {
  .nav-fab:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 20px rgba(22,163,74,.50);
  }
}

.nav-fab:active {
  transform: translateY(-6px) scale(.94);
  box-shadow: 0 2px 8px rgba(22,163,74,.35);
}

.nav-fab svg {
  width: 26px;
  height: 26px;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-fast);
}
.nav-fab--x svg { transform: rotate(45deg); }

/* ══════════════════════════════════════════════════════════
   П4: радиальный веер вокруг «+» (avg 19.08)
   ══════════════════════════════════════════════════════════ */
.nb-fan { position: fixed; inset: 0; z-index: 52; pointer-events: none; }
.nb-fan[hidden] { display: none; }
/* Скрим не накрывает таббар: вкладки остаются кликабельными при открытом веере */
.nb-fan-scrim {
  position: absolute;
  left: 0; right: 0; top: 0;
  bottom: calc(var(--nav-h) + var(--safe-bottom));
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: auto;
  /* Как у .sheet-backdrop: тянуть за затемнение — не листать страницу под ним */
  touch-action: none;
}
.nb-fan--open .nb-fan-scrim { opacity: 1; }
.nb-fan-btn {
  position: absolute;
  left: 50%;
  width: 65px; height: 65px;
  margin-left: -32.5px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(26px) scale(.5);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.nb-fan-btn span { font-size: 11px; font-weight: 800; color: var(--text-muted); line-height: 1; }
.nb-fan--open .nb-fan-btn { opacity: 1; transform: translateY(0) scale(1); }
/* Дуга: Фото — крупная по центру; Код/Текст — средний ряд; Трен./Вес — нижний */
.nb-fan-btn--photo {
  width: 82px; height: 82px;
  margin-left: -41px;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 52px);
  background: linear-gradient(145deg, #22C55E, #16A34A);
  border: none;
  color: #fff;
  box-shadow: var(--shadow-fab);
}
.nb-fan-btn--photo span { color: rgba(255,255,255,.92); font-size: 11.5px; }
/* Разнос дуги пересчитан под кнопки 65/82 px (avg 27.08: «увеличим процентов на
   20»): при прежних ±70/±128 соседние кружки начинали перекрываться. */
.nb-fan-btn--barcode { bottom: calc(var(--nav-h) + var(--safe-bottom) + 40px); margin-left: calc(-32.5px - 82px); transition-delay: .02s; }
.nb-fan-btn--food    { bottom: calc(var(--nav-h) + var(--safe-bottom) + 40px); margin-left: calc(-32.5px + 82px); transition-delay: .02s; }
.nb-fan-btn--workout { bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px);  margin-left: calc(-32.5px - 145px); transition-delay: .045s; }
.nb-fan-btn--weight  { bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px);  margin-left: calc(-32.5px + 145px); transition-delay: .045s; }
.nb-fan-btn:active { transform: scale(.94); }
/* На узких экранах (iPhone SE, 320–359 CSS px) крайние кнопки упирались в край.
   Ряды разводим ещё и по вертикали: иначе «Голос» и «Вес» касаются углами. */
@media (max-width: 359px) {
  /* Увеличенные кружки сюда не помещаются — на SE остаётся прежний размер. */
  .nb-fan-btn { width: 54px; height: 54px; margin-left: -27px; }
  .nb-fan-btn span { font-size: 9px; }
  .nb-fan-btn--photo { width: 68px; height: 68px; margin-left: -34px; }
  .nb-fan-btn--photo span { font-size: 9.5px; }
  .nb-fan-btn--barcode { margin-left: calc(-27px - 62px); }
  .nb-fan-btn--food    { margin-left: calc(-27px + 62px); }
  .nb-fan-btn--workout { margin-left: calc(-27px - 116px); bottom: calc(var(--nav-h) + var(--safe-bottom) + 2px); }
  .nb-fan-btn--weight  { margin-left: calc(-27px + 116px); bottom: calc(var(--nav-h) + var(--safe-bottom) + 2px); }
}

/* ══════════════════════════════════════════════════════════
   SHEET OVERLAY (backdrop)
   ══════════════════════════════════════════════════════════ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid);
  /* Тянуть за затемнение — не листать страницу под ним: документ теперь
     скроллится сам, и без этого день уезжал бы за открытым шитом. Тап
     (закрыть) жест не трогает. */
  touch-action: none;
}

.nb-overlay--visible {
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════════════════════════
   BOTTOM SHEET
   ══════════════════════════════════════════════════════════ */
.bottom-sheet {
  position: fixed;
  /* Шит всегда прибит к настоящему низу, а от клавиатуры (--kb, её меряет
     app.js по визуальному вьюпорту) отступает НИЖНИМ ПОЛЕМ. Раньше поднимался
     сам (bottom: --kb) — и на iOS между ним и клавиатурой оставалась полоса
     живой страницы: визуальный вьюпорт там не заканчивается на клавиатуре, под
     неё уходит ещё и плавающая панель «˄ ˅ ✓». Смотрелось так, будто шит
     оторвался и повис (avg 22.08). Полем этой щели быть не может в принципе:
     фон шита идёт до кромки экрана, содержимое стоит над клавиатурой. */
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(var(--kb, 0px) + var(--safe-bottom) + 32px);
  z-index: 100;
  transform: translateY(100%);
  /* visibility, а не только transform: в standalone iOS дорисовывает полосу
     ниже вьюпорта, и задвинутый за кромку шит торчит там белым скруглённым
     верхом. Задержка = длительности слайда, чтобы закрытие успело доехать. */
  visibility: hidden;
  transition: transform var(--t-slow), visibility 0s var(--t-slow);
  box-shadow: 0 -4px 32px rgba(0,0,0,.12);
  /* Видимая часть (всё, что выше клавиатуры) — не больше 86% экрана и не выше
     свободного места над клавиатурой; сама клавиатура прибавляется сверху,
     потому что её высота ушла в padding-bottom. */
  max-height: calc(min(86%, 100% - var(--kb, 0px) - 16px) + var(--kb, 0px));
  overflow-y: auto;
  /* Докрутил список действий до низа — дальше должен стоять шит, а не уезжать
     страница под ним (документ теперь скроллится сам). */
  overscroll-behavior: contain;
}

.bottom-sheet::-webkit-scrollbar { display: none; }

.nb-sheet--open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-slow), visibility 0s;
}

.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 0 auto 16px;
}

/* Sheet close button — retained for JS compatibility */
.nb-sheet-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  /* Карточка распознавания растягивает «РАСПОЗНАНО» на всю ширину шита, и её
     строка перехватывала тапы по крестику: elementFromPoint в центре кнопки
     возвращал .recog-eyebrow. Видно крестик было, попасть — только краем. */
  z-index: 2;
}

/* ── Тур «Как пользоваться» ─────────────────────────────── */
.nb-tour { position: fixed; inset: 0; z-index: 300; }
/* Затемнение — огромной тенью вокруг окна подсветки: одна коробка вместо
   четырёх шторок, и дырка всегда точно по элементу. */
/* Затемнение мягкое: под .80 экран превращался в чёрное поле и человек терял,
   на какой он вкладке (avg 28.08). Вместо силы тени цель выделяем ореолом и
   лёгким зелёным налётом — так видно, ЧТО подсвечено, и видно, ГДЕ ты. */
.nb-tour-mask {
  position: absolute; border-radius: 16px;
  background: rgba(34, 197, 94, .06);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .30),
              0 0 26px 6px rgba(34, 197, 94, .28),
              0 0 0 9999px rgba(4, 6, 10, .58);
  border: 2px solid var(--green-ring);
  transition: top .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1),
              width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
/* Подсказка стоит по сетке страницы: те же var(--page-pad) по бокам и тот же
   радиус, что у карточек под ней — иначе она читается как чужая наклейка. */
.nb-tour-tip {
  position: absolute; left: var(--page-pad); right: var(--page-pad);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 18px 18px 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  transition: top .3s cubic-bezier(.4,0,.2,1);
}
.nb-tour-n {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green); font-weight: 700;
}
.nb-tour-tip h4 { margin: 9px 0 7px; font-size: 18px; letter-spacing: -.2px; }
.nb-tour-tip p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.nb-tour-rail { display: flex; gap: 4px; margin-top: 16px; }
.nb-tour-rail i { flex: 1; height: 3px; border-radius: 3px; background: var(--border); }
.nb-tour-rail i.done { background: var(--green); }
.nb-tour-nav { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.nb-tour-nav button {
  border: 0; border-radius: 12px; padding: 11px 16px; font: inherit;
  font-weight: 650; font-size: 14px; cursor: pointer;
}
.nb-tour-next { background: var(--green); color: #06210F; margin-left: auto; }
.nb-tour-back { background: var(--bg-muted); color: var(--text-secondary); }
.nb-tour-skip { background: none; color: var(--text-muted); padding-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .nb-tour-mask, .nb-tour-tip { transition: none; }
}

/* ── Подтверждение удаления ─────────────────────────────── */
.nb-confirm-ic {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--danger-dim, rgba(248,81,73,.12)); color: #F85149;
  display: grid; place-items: center; margin-bottom: 12px;
}
.nb-confirm-note { margin: 5px 0 14px; color: var(--text-secondary); font-size: 13.5px; }
.nb-confirm-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 13px; padding: 11px 12px;
}
.nb-confirm-av {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: var(--accent-dim); color: var(--green);
}
.nb-confirm-name { display: block; font-weight: 650; font-size: 14.5px; }
.nb-confirm-meta { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.nb-confirm-acts { display: flex; flex-direction: column; gap: 8px; }
.nb-confirm-acts button {
  border: 0; border-radius: 13px; padding: 14px; font: inherit;
  font-weight: 700; font-size: 15px; cursor: pointer;
}
.nb-confirm-yes { background: #F85149; color: #fff; }
.nb-confirm-no { background: var(--bg-muted); color: var(--text-primary); }

/* Sheet title */
.sheet-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -.3px;
  color: var(--text-primary);
}

/* Sheet actions grid (new 2-col layout) */
.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.sheet-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border-radius: var(--radius-card);
  background: var(--bg-muted);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t-fast);
  -webkit-touch-callout: none;
}

.sheet-action-btn:active {
  transform: scale(.98);
  background: var(--bg-card);
  border-color: var(--green);
}
@media (hover: hover) {
  .sheet-action-btn:hover {
    transform: scale(.98);
    background: var(--bg-card);
    border-color: var(--green);
  }
}

/* Icon squares inside sheet buttons */
.sheet-action-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.icon-photo   { background: rgba(34,197,94,.12);  border: 1.5px solid #22C55E; color: #22C55E; }
.icon-barcode { background: rgba(6,182,212,.12);   border: 1.5px solid #06B6D4; color: #06B6D4; }
.icon-food    { background: rgba(59,130,246,.12);  border: 1.5px solid #3b82f6; color: #3b82f6; }
.icon-repeat  { background: rgba(167,139,250,.12); border: 1.5px solid #a78bfa; color: #a78bfa; }
.icon-workout { background: rgba(249,115,22,.12);  border: 1.5px solid #f97316; color: #f97316; }
.icon-weight  { background: rgba(245,158,11,.12);  border: 1.5px solid #f59e0b; color: #f59e0b; }

/* Voice recording indicator: pulsing red on the active mic/voice control */
.sheet-action-btn.recording .sheet-action-icon,
.chat-mic-btn.recording { animation: nb-rec-pulse 1s ease-in-out infinite; color: #EF4444; }
.sheet-action-btn.recording .sheet-action-icon { background: #EF4444; }
@keyframes nb-rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Result area */
.nb-result-area { margin-top: 8px; }

/* ── Draft card action buttons ─────────────────────────── */
.nb-card-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px 14px;
}

.nb-btn {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity .15s;
}
@media (hover: hover) {
  .nb-btn:hover { opacity: .85; }
}

.nb-btn--confirm,
.nb-btn--confirm-wo { background: var(--green); color: white; }

.nb-btn--edit {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}

/* Discard a chat draft card (meal/workout): small square × at the row's right */
.nb-btn--cancel-x {
  flex: 0 0 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--danger, #f85149);
  border: 1px solid rgba(248, 81, 73, 0.28);
}

.nb-misses {
  font-size: 12px;
  color: var(--text-muted);
  padding: 0 14px 6px;
}

/* Loading state */
.nb-loading {
  font-size: 14px;
  color: var(--text-muted);
  padding: 28px 14px;
  text-align: center;
}

/* Workout-saved result block (shown in FAB sheet after successful workout save) */
.nb-workout-saved {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  border: 1px solid var(--border);
}

.nb-workout-saved-ok {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.nb-workout-records {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: pre-wrap;
}

.nb-workout-equivalent {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   RECOGNITION CARD (inside the add-sheet)
   ══════════════════════════════════════════════════════════ */
.recog-card { display: flex; flex-direction: column; }

.recog-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
}
.recog-eyebrow--wo { color: var(--protein); }
/* Черновика больше нет: зелёный «Распознано» тут обещал бы запись, которой не будет */
.recog-eyebrow--stale { color: var(--text-muted); }

.recog-hero { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.recog-kcal {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.recog-unit { font-size: 15px; font-weight: 600; color: var(--text-muted); }

.recog-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 2px;
}
.recog-macro {
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.recog-dot { width: 8px; height: 8px; border-radius: 50%; }
.recog-dot.tone-protein { background: var(--protein); }
.recog-dot.tone-fat     { background: var(--fat); }
.recog-dot.tone-carb    { background: var(--carb); }
.recog-macro-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.recog-macro-lbl { font-size: 11px; color: var(--text-muted); font-weight: 500; }

.recog-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  border-top: 1px solid var(--border);
}
.recog-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--border);
}
.recog-item-name { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.35; }
/* Workout rows: name on its own line, set list wraps below (set strings are long) */
.recog-items--wo li { flex-direction: column; align-items: flex-start; gap: 2px; }
.recog-items--wo .recog-item-meta { white-space: normal; }
.recog-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.recog-card .nb-misses { padding: 10px 2px 0; }

.recog-est-tag {
  display: inline-block;
  margin-left: 5px;
  color: var(--fat);
  font-weight: 700;
  font-size: 13px;
}
.recog-est-note {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 2px 0;
  line-height: 1.4;
}
.nb-card-day {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 2px 0;
  line-height: 1.4;
}

/* ── Clarify question (low-confidence recognition) ─────────────────────────
   «Уточню: …» + tap chips under the totals. Same family as the card: bg-muted
   fill, --border ring, --radius-md corners — a quiet callout, not a new surface. */
.nb-clarify-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 2px;
}
.nb-clarify {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.nb-clarify--done { padding: 10px 14px; }
.nb-clarify-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.35;
}
.nb-clarify-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nb-clarify-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: opacity .15s, border-color .15s;
}
@media (hover: hover) {
  .nb-clarify-chip:hover:not(:disabled) { border-color: var(--green); }
}
.nb-clarify-chip:disabled { cursor: default; opacity: .55; }
.nb-clarify-chip--on {
  color: var(--green);
  background: var(--accent-dim);
  border-color: rgba(34,197,94,.4);
  opacity: 1;
}
.nb-clarify-chip--busy {
  position: relative;
  color: transparent;
}
.nb-clarify-chip--busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--text-secondary);
  animation: nb-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nb-clarify-chip--busy::after { animation: none; }
}
.nb-clarify-delta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}
.nb-clarify-input-row {
  display: flex;
  gap: 8px;
}
.nb-clarify-input {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.nb-clarify-input:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.nb-clarify-error {
  font-size: 12px;
  color: var(--danger, #f85149);
  margin: 8px 0 0;
  line-height: 1.4;
}

.recog-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 0 2px;
  background: var(--bg-card);
}
.recog-actions .nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 12px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
}
.recog-actions .nb-btn--confirm,
.recog-actions .nb-btn--confirm-wo { flex: 1.5; }
.recog-actions .nb-btn--edit { flex: 1; }

/* ══════════════════════════════════════════════════════════
   BARCODE SCANNER OVERLAY (camera chrome — always dark, over live video)
   ══════════════════════════════════════════════════════════ */
.barcode-overlay {
  position: fixed;
  inset: 0;
  /* Ввод кода цифрами живёт в самом низу оверлея — при открытой клавиатуре
     оверлей ужимается до неё, иначе поле и «Найти» оказываются под ней.
     Здесь, в отличие от шитов, поднимается именно весь оверлей: рамка сканера
     и подсказка позиционируются от него, и если оставить его во весь экран, а
     клавиатуру отработать полем, они наезжают на панель ввода кода. */
  bottom: var(--kb, 0px);
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
}
.barcode-overlay[hidden] { display: none; }

.barcode-video {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  background: #000;
}

.barcode-frame {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 160px;
  max-width: 78vw;
  pointer-events: none;
}
.barcode-frame b {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid var(--green-ring);
  border-radius: 6px;
}
.barcode-frame b:nth-child(1) { left: 0; top: 0; border-right: none; border-bottom: none; }
.barcode-frame b:nth-child(2) { right: 0; top: 0; border-left: none; border-bottom: none; }
.barcode-frame b:nth-child(3) { left: 0; bottom: 0; border-right: none; border-top: none; }
.barcode-frame b:nth-child(4) { right: 0; bottom: 0; border-left: none; border-top: none; }

.barcode-scanline {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green-ring), transparent);
  animation: nb-barcode-scan 1.6s ease-in-out infinite alternate;
}
@keyframes nb-barcode-scan {
  from { transform: translateY(-52px); }
  to   { transform: translateY(52px); }
}
@media (prefers-reduced-motion: reduce) {
  .barcode-scanline { animation: none; }
}

.barcode-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
}
.barcode-xbtn, .barcode-torch {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* display:flex above beats the [hidden] UA rule — restore it */
.barcode-torch[hidden] { display: none; }

.barcode-hint {
  position: absolute;
  left: 0; right: 0;
  top: calc(42% + 100px);
  text-align: center;
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  padding: 0 24px;
}

.barcode-alt {
  /* stays pinned to the bottom even when the video is hidden (camera denied) */
  margin-top: auto;
  background: var(--bg-card);
  /* 26 px воздуха снизу вместо 12: поле «Код товара» стояло вплотную к кромке
     экрана (avg 22.08). Клавиатуру отрабатывает сам оверлей — он ужимается. */
  padding: 12px 16px calc(var(--safe-bottom) + 26px);
  text-align: center;
}
.barcode-alt > button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--font);
}
.barcode-manual {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.barcode-manual input {
  flex: 1;
  min-width: 0;
  background: var(--bg-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 16px;
  color: var(--text-primary);
  font-family: var(--font);
}
.barcode-manual .btn-primary {
  flex: 0 0 auto;
  padding: 10px 16px;
}

/* ══════════════════════════════════════════════════════════
   BARCODE HIT CARD (reuses .recog-* skeleton, adds product identity row)
   ══════════════════════════════════════════════════════════ */
.nb-bc-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* clear the sheet's absolute ✕ button in the top-right corner */
  padding-right: 36px;
}
.nb-bc-code {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nb-bc-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 6px;
  line-height: 1.3;
}
.nb-bc-brand {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.nb-bc-grams-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.nb-bc-grams-row label {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 600;
  flex-shrink: 0;
}
.nb-bc-grams-inp {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 9px 12px;
}
.nb-bc-grams-inp input {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font);
  outline: none;
}
.nb-bc-grams-inp span { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.nb-bc-total {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 8px;
}
.nb-bc-total b { color: var(--text-primary); }
.nb-bc-attr {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 10px 0 0;
}

/* ══════════════════════════════════════════════════════════
   BARCODE MISS SCREEN (positive framing — "new product", not an error)
   ══════════════════════════════════════════════════════════ */
.nb-bc-miss { padding: 10px 4px 4px; text-align: center; }
.nb-bc-miss-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(6,182,212,.12);
  border: 1.5px solid #06B6D4;
  color: #06B6D4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.nb-bc-miss h3 { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.nb-bc-miss p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.5;
}
.nb-bc-miss-code {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.nb-bc-miss .nb-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   DAY PAGE — header (date + journal navigation)
   ══════════════════════════════════════════════════════════ */
/* ── Today header (greeting + date) ────────────────────── */
.today-header {
  /* 6px, не 16: под DI-safe-area верх и так просторный (фидбек avg 18.08) */
  padding: 6px var(--page-pad) 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.today-header-left { min-width: 0; flex: 1; }

/* Journal day navigation arrows (in the day header) */
.day-nav-arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 19px;
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover) {
  .day-nav-arrow:hover { background: var(--accent-muted); color: var(--green); }
}

.day-nav-arrow--off { color: var(--border-strong); }

.today-date {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .2px;
  text-transform: capitalize;
}

.today-greeting {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
  letter-spacing: -.3px;
}

/* ── Streak badge ──────────────────────────────────────── */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.streak-badge svg { color: #F59E0B; flex-shrink: 0; }

[data-theme="dark"] .streak-badge {
  background: rgba(245,158,11,.18);
  color: #FCD34D;
}

/* ══════════════════════════════════════════════════════════
   KCAL RING HERO  (mockup-aligned: .ring-section / .ring-main-*)
   ══════════════════════════════════════════════════════════ */
.ring-section {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

.ring-main-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

.ring-main-svg {
  transform: rotate(-90deg);
  display: block;
}

.ring-track      { fill: none; stroke: var(--border); stroke-width: 14; }
.ring-track-mini { fill: none; stroke: var(--border); stroke-width: 5; }

.ring-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}

.ring-fill-cal       { stroke: var(--green-ring); }
.ring-fill-cal.over  { stroke: var(--danger); }
.ring-fill-protein   { stroke: #E0476B; stroke-width: 5; }
.ring-fill-fat       { stroke: #F59E0B; stroke-width: 5; }
.ring-fill-carb      { stroke: #38BDF8; stroke-width: 5; }

.ring-main-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.ring-main-value {
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.ring-main-of { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.ring-main-remain { font-size: 11px; color: var(--green); font-weight: 600; }

/* ── Streak strip (Cal AI: weekday checkmarks) ─────────────── */
/* Подсказка про первый приём (вариант B инструкции, avg 27.08). Сидит над
   таббаром — там же, куда смотрит палец, и там же, где «+», про который речь.
   Без затемнения: это подсказка, а не модалка, экран под ней живой. */
.nb-coach {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 10px);
  width: min(100% - 24px, 388px);
  z-index: 88;  /* ниже веера (95) — раскрытый веер её перекрывает, и правильно */
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .34);
  padding: 16px 16px 14px;
  animation: nb-coach-in .28s ease-out;
}
@keyframes nb-coach-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.nb-coach-x {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
}
.nb-coach-title { font-size: 17px; font-weight: 800; color: var(--text-primary); padding-right: 26px; }
.nb-coach-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 6px 0 13px;
}
.nb-coach .nb-coach-go { width: 100%; }
.nb-coach-alt {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 6px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
}
/* Пульс на «+»: подсказка говорит «сфоткай», кнопка показывает — где. */
.nav-fab--coach::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--green);
  animation: nb-coach-pulse 1.7s ease-out infinite;
  pointer-events: none;
}
@keyframes nb-coach-pulse {
  0% { opacity: .8; transform: scale(.92); }
  70% { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* Карточка веса на главном — вход в статистику. Отступы/радиус/рамка как у
   .streak-strip: блоки дня идут flush, каждый отбивает себя сам. */
.nb-wcard {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 11px 12px 10px 14px;
  margin: 0 var(--page-pad) 10px;
  text-decoration: none;
  color: #38BDF8;  /* цвет линии по умолчанию — спокойный синий */
}
.nb-wcard--good { color: var(--green); }
.nb-wcard-top { display: flex; align-items: center; gap: 8px; }
/* Тело растягивается само — иначе спарклайну и кнопке пришлось бы делить
   свободное место двумя margin-left:auto, и спарклайн уезжал бы в середину. */
.nb-wcard-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nb-wcard-num {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.nb-wcard-num em { font-size: 13px; font-weight: 600; font-style: normal; color: var(--text-muted); margin-left: 3px; }
.nb-wcard-delta {
  font-size: 13px; font-weight: 600; color: currentColor;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-wcard-delta--muted { color: var(--text-secondary); font-weight: 500; }
.nb-wcard-spark { flex: none; }
.nb-wcard-pill {
  flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-dim); color: var(--green);
  border: 0; border-radius: 999px; padding: 8px 12px;
  font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.nb-wcard-pill--btn { cursor: pointer; }
.nb-wcard-stats, .nb-wcard-hint {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.nb-wcard-stats { display: flex; gap: 14px; color: var(--text-muted); }
.nb-wcard-stats b { color: var(--text-primary); font-weight: 750; font-variant-numeric: tabular-nums; }
.nb-wcard-hint { display: block; color: var(--text-secondary); line-height: 1.4; }

.streak-strip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin: 0 var(--page-pad) 4px;
}

.streak-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.streak-flame-big { color: #F59E0B; display: inline-flex; align-items: center; }
.streak-count { font-size: 17px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.streak-cap { font-size: 13px; color: var(--text-muted); font-weight: 500; }

/* Текстовые ссылки-действия ростом 21–26px: пальцем в них попадаешь через раз
   (Apple советует 44). Вертикальный padding расширяет зону нажатия, а равный
   ему отрицательный margin возвращает строку на прежнее место — иначе поехала
   бы вся раскладка карточек, где эти ссылки живут. */
.recovery-r5-all-link,
.recipes-seeall {
  padding-block: 11px;
  margin-block: -11px;
}

.streak-week { display: flex; justify-content: space-between; }

.streak-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.streak-day-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }

/* .streak-dot removed — replaced by .ringday ring-calendar (Kalo-batch F1).
   Future-day fading lives on the .streak-day.future container (ringday block);
   a per-label opacity here would stack multiplicatively and near-hide labels. */

/* ── Calorie hero (Cal AI: big number left + arc right) ─────── */
.ring-section { display: block; padding: 8px var(--page-pad) 4px; }

/* ── Kcal capsule (avg 18.08, макет D): число + шкала с точками приёмов ── */
.kcal-cap-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 16px 13px;
}
.kcal-cap-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kcal-cap-num {
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.kcal-cap-unit { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.kcal-cap-rem { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.kcal-cap-rem b { color: var(--green); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kcal-cap-rem.over b { color: var(--danger, #ef4444); }
.kcal-capsule {
  position: relative; height: 14px; border-radius: 999px;
  background: var(--bg-muted); border: 1px solid var(--border);
  margin-top: 13px;
}
.kcal-capsule-fill {
  position: absolute; top: 2px; bottom: 2px; left: 2px;
  min-width: 10px; max-width: calc(100% - 4px); border-radius: 999px;
  background: linear-gradient(90deg, #16a34a, #4ade80);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
}
.kcal-capsule-fill.over {
  background: linear-gradient(90deg, #d97706, #f59e0b);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}
.kcal-cap-mark {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  border-radius: 2px; background: var(--text-primary); opacity: 0.85;
}
.kcal-meal-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid rgba(255, 255, 255, 0.9);
}
.kcal-cap-legend {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 9px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.kcal-cap-goal { margin-left: auto; }

.kcal-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kcal-hero-left { display: flex; flex-direction: column; min-width: 0; }

.kcal-hero-num {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.kcal-hero-unit { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 4px; }

.kcal-hero-rem {
  font-size: 14px;
  color: var(--green);
  font-weight: 700;
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
}
.kcal-hero-rem.over { color: var(--danger); }

.kcal-hero-of { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.kcal-hero-ring { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.kcal-arc-svg { transform: rotate(-90deg); display: block; }
.kcal-arc-svg .ring-track { stroke-width: 8; }
.kcal-arc-svg .ring-fill { stroke-width: 8; }
.kcal-arc-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F59E0B;
}

/* ══════════════════════════════════════════════════════════
   MACRO MINI-RINGS  (mockup-aligned: .macro-row / .macro-item)
   ══════════════════════════════════════════════════════════ */
.macro-row {
  display: flex;
  gap: 10px;
  padding: 8px var(--page-pad) 4px;
}

.macro-item {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mini-ring-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
}

.mini-ring-svg {
  transform: rotate(-90deg);
  display: block;
}

.mini-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.macro-text { text-align: center; }

.macro-text .macro-name,
.macro-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.macro-status {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.macro-status.over { color: var(--fat); }

/* legacy */
.macro-goal {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   SECTION HEADER
   ══════════════════════════════════════════════════════════ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding: 0 2px;
}

.section-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
}

.section-count {
  font-size: 12px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   MEAL CARDS
   ══════════════════════════════════════════════════════════ */
.meals-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding: 0 var(--page-pad);
}

/* gap BETWEEN individual meal cards (they live inside .meal-cards) */
.meal-cards { display: flex; flex-direction: column; gap: 12px; }

/* ── V3 «Микробары» meal card — big kcal, macro micro-bars, bottom action row ── */
.meal-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.meal-card:active { transform: scale(.99); }
@media (hover: hover) {
  .meal-card:hover { background: var(--bg-muted); }
}

@media (hover: hover) {
  .meal-card.editing:hover { background: var(--bg-card); }
}

/* Top row: icon · name/time */
.mc-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.mc-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-muted);
  border-radius: 10px;
  color: var(--text-secondary);
}
.mc-title-col {
  flex: 1;
  min-width: 0;
}

.meal-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.meal-time-badge {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-light);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

[data-theme="dark"] .meal-time-badge {
  background: var(--accent-dim);
  color: var(--green-ring);
}

/* С2: photo circle / letter fallback in the collapsed meal card (avg 18.08) */
.mc-photo,
.mc-letter {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
}
.mc-photo {
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-muted);
}
.mc-letter {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
.mc-letter.ml--z { background: rgba(34, 197, 94, .14); color: var(--green); }
.mc-letter.ml--o { background: rgba(255, 159, 10, .14); color: #ff9f0a; }
.mc-letter.ml--u { background: rgba(56, 189, 248, .14); color: #38bdf8; }
.mc-letter.ml--p { background: rgba(167, 139, 250, .14); color: #a78bfa; }
.mc-meta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Nutrient grid: big kcal left | macro bars right */
.mc-nutrient-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 14px;
  background: var(--bg-muted);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 11px;
  align-items: center;
}

.mc-kcal-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-right: 1px solid var(--border-strong);
  padding-right: 14px;
}

/* keep .meal-kcal class for test assertions */
.meal-kcal {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mc-kcal-unit {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 3px;
}

/* Macro bars column */
.mc-macro-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mc-macro-row {
  display: grid;
  grid-template-columns: 14px 1fr 30px;
  align-items: center;
  gap: 7px;
}

.mc-mk {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.mc-mk-p { color: var(--protein); }
.mc-mk-f { color: var(--fat); }
.mc-mk-c { color: var(--carb); }

.mc-bar-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
[data-theme="light"] .mc-bar-track { background: rgba(0,0,0,.10); }

.mc-bar-fill {
  height: 100%;
  border-radius: 3px;
}
.mc-fill-p { background: var(--protein); }
.mc-fill-f { background: var(--fat); }
.mc-fill-c { background: var(--carb); }

.mc-macro-gram {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  text-align: right;
}

/* Action row: Сохранить · Редактировать · Удалить */
.mc-action-row {
  display: flex;
  gap: 7px;
  align-items: center;
}

.mc-btn {
  flex: 1;
  height: 36px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  letter-spacing: .01em;
  transition: opacity var(--t-fast);
  border: none;
  padding: 0 4px;
}
@media (hover: hover) {
  .mc-btn:hover { opacity: .82; }
}
.mc-btn:active { opacity: .82; }

.mc-btn svg { pointer-events: none; flex-shrink: 0; }

.mc-btn-save {
  background: var(--green);
  color: #fff;
}
.mc-btn-edit {
  background: var(--blue-neutral-bg, rgba(88,166,255,.12));
  color: var(--blue-neutral, #58A6FF);
  border: 1px solid rgba(88,166,255,.18) !important;
}
.mc-btn-del {
  background: var(--danger-bg, rgba(248,81,73,.12));
  color: var(--danger);
  border: 1px solid rgba(248,81,73,.18) !important;
}

/* Secondary nutrients (sugar/fiber): quiet chips with a colored dot —
   visible but clearly subordinate to the Б/Ж/У row (founder: «вторичный
   фокус, но симпатично»). Shared by the day meal card and the recog card. */
.nutri-extras {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 2px 0;
  margin-bottom: 6px;
}
.nutri-extra-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(127, 127, 127, 0.1);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.nutri-extra-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nutri-extra-chip--sugar::before { background: #e879a9; }
.nutri-extra-chip--fiber::before { background: #4ade80; }

/* Save-ack line under the action row: hidden when empty so it adds no height */
.mc-save-ack {
  display: none;
  font-size: 11px;
  color: var(--green);
  text-align: center;
  margin-top: 4px;
}
.mc-save-ack:not(:empty) { display: block; }

/* ── Journal: inline confirmed-meal edit form ───────────────────── */
/* .meal-edit-toggle is now .mc-btn-edit — keep .meal-edit-toggle class for JS */
.meal-del { /* kept as class on mc-btn-del for htmx */ }
.meal-save { /* kept as class on mc-btn-save for htmx */ }

.meal-edit {
  display: none;
  width: 100%;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.meal-card.editing .meal-edit { display: block; }

.meal-edit-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
/* Название переносится, а не режется троеточием: «Индейка с гречкой и жаре…»
   не давало понять, что записано (avg 18.08). */
.meal-edit-iname {
  flex: 1; min-width: 0;
  font-size: 14px; color: var(--text-primary);
  line-height: 1.35; overflow-wrap: break-word;
}
.meal-edit-row.row-removed .meal-edit-iname { text-decoration: line-through; color: var(--text-muted); }
.meal-edit-grams {
  width: 66px; padding: 7px 8px; text-align: right;
  font-size: 16px; color: var(--text-primary);
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.meal-edit-row.row-removed .meal-edit-grams { opacity: .4; }
.meal-edit-unit { font-size: 13px; color: var(--text-muted); }
.meal-edit-remove {
  width: 32px; height: 32px; min-width: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 21px; line-height: 1; padding: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
@media (hover: hover) {
  .meal-edit-remove:hover { color: var(--danger); background: var(--danger-dim); }
}

.meal-edit-row.row-removed .meal-edit-remove { color: var(--green); }

.meal-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.meal-edit-cancel, .meal-edit-save {
  padding: 9px 18px; border: none; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; min-height: 40px; cursor: pointer;
}
.meal-edit-cancel { color: var(--text-secondary); background: var(--bg-muted); }
.meal-edit-save { color: #fff; background: var(--green); }

/* ── Meal card accordion: compact header + expandable body ──────── */

/* Reset the padding on the card itself — header/body carry their own */
.meal-card {
  padding: 0;
  cursor: default;
  overflow: hidden;
}
/* Remove the hover lift from the card itself (header handles it) */
.meal-card:active { transform: none; }
@media (hover: hover) {
  .meal-card:hover { background: var(--bg-card); }
}

@media (hover: hover) {
  .meal-card.editing:hover { background: var(--bg-card); }
}

/* Compact header row: tap target for expand/collapse */
.mc-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-card);
  transition: background var(--t-fast);
}
@media (hover: hover) {
  .mc-header:hover { background: var(--bg-muted); }
}

.mc-header:active { background: var(--bg-muted); }
.meal-card.expanded .mc-header {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  border-bottom: 1px solid var(--border);
}

/* Kcal in compact (header) view — green, right-aligned */
.mc-kcal-compact {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Chevron icon — rotates when expanded */
.mc-chevron {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.meal-card.expanded .mc-chevron { transform: rotate(90deg); }

/* Expandable body — hidden by default via HTML [hidden] attr.
   We must not set display here because that would override [hidden]'s
   implicit display:none; use :not([hidden]) to apply flex only when visible. */
.mc-body[hidden] { display: none; }
.mc-body:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
}

/* Items list inside expanded body */
.mc-items-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.mc-item-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
/* Переносим, не режем: в списке позиций человек должен видеть блюдо целиком. */
.mc-item-name {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  line-height: 1.35;
  overflow-wrap: break-word;
}
.mc-item-grams {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mc-item-kcal {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Kcal in expanded body (big number) */
.mc-kcal-full {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Nutrient grid inside expanded body — reuses existing .mc-nutrient-grid styles */
.mc-body .mc-nutrient-grid { margin-bottom: 0; }

/* ── Нет связи: полоска состояния и карточки очереди ───────────
   Разметку полоски отдаёт сервер скрытой, карточки очереди целиком рисует
   app.js: сервер о недосланных записях не знает. */
.offline-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Экран дня — flush: горизонтальных отступов у контейнера нет, каждый блок
     отбивает себя сам (--page-pad, как streak-strip). Без этого плашка
     распахивалась во всю ширину и выпадала из стилистики карточек. */
  margin: 0 var(--page-pad) 12px;
  padding: 10px 14px;
  border-radius: var(--radius-card);
  border: 1px solid var(--amber-line);
  background: var(--amber-dim);
  color: var(--amber);
  font-size: 12.5px;
  font-weight: 600;
}
/* display: flex перебивает [hidden] браузера — гасим явно, иначе скрытая
   полоска видна на каждой странице дня. */
.offline-strip[hidden] { display: none; }
.offline-strip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.offline-strip-count {
  margin-left: auto;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  background: rgba(245,158,11,.20);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.offline-strip-count[hidden] { display: none; }
/* «Обновить»: показываем, когда сеть вернулась, а цифры на экране из кэша.
   margin-left: auto прижимает кнопку вправо, когда счётчика очереди нет. */
.offline-strip-refresh {
  margin-left: auto;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.offline-strip-refresh[hidden] { display: none; }
.offline-strip-refresh:active { transform: scale(.97); }
@media (hover: hover) {
  .offline-strip-refresh:hover { background: rgba(245,158,11,.16); }
}
.offline-strip--stuck {
  border-color: rgba(248,81,73,.30);
  background: var(--danger-dim);
  color: var(--danger);
}
.offline-strip--stuck .offline-strip-count { background: rgba(248,81,73,.20); }

/* Карточка записи из очереди: та же форма, что у обычного приёма, но цветом
   рамки и иконки честно говорит о состоянии. */
.meal-card--queued { border-color: var(--amber-line); }
.meal-card--ready  { border-color: rgba(34,197,94,.35); }
.meal-card--failed { border-color: rgba(248,81,73,.32); }

.meal-card--queued .mc-icon { background: var(--amber-dim); color: var(--amber); }
.meal-card--ready  .mc-icon { background: var(--accent-dim); color: var(--green); }
.meal-card--failed .mc-icon { background: var(--danger-dim); color: var(--danger); }
[data-theme="dark"] .meal-card--ready .mc-icon { color: var(--green-ring); }

/* Раскрывать тут нечего — курсор-палец врал бы. Кроме готового фото: оно
   открывает черновик на подтверждение. */
.mc-qhead { cursor: default; }
.meal-card--ready .mc-qhead { cursor: pointer; }
@media (hover: hover) {
  .mc-qhead:hover { background: transparent; }
  .meal-card--ready .mc-qhead:hover { background: var(--bg-muted); }
}
.mc-qchevron { margin-left: auto; }

.mc-wait-badge, .mc-ready-badge, .mc-fail-badge {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}
.mc-wait-badge  { color: var(--amber);  background: var(--amber-dim); }
.mc-ready-badge { color: var(--green);  background: var(--green-light); }
.mc-fail-badge  { color: var(--danger); background: var(--danger-dim); }
[data-theme="dark"] .mc-ready-badge { background: var(--accent-dim); color: var(--green-ring); }

.mc-queued-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}
.mc-queued-body .mc-nutrient-grid { margin-bottom: 0; }
/* Прочерк вместо калорий: цифр до ответа сервера не существует. Вес легче
   цифрового: тире в 800 читается как разделительная полоса, а не как прочерк. */
.mc-kcal-dash { color: var(--text-muted); font-weight: 500; }
.mc-queued-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.mc-queued-note--fail { color: var(--danger); font-weight: 500; }

.mc-queued-actions { display: flex; gap: 8px; }
.mc-qbtn {
  flex: 1;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 14px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.mc-qbtn--retry { border-color: transparent; background: var(--green); color: #fff; }
.mc-qbtn:active { transform: scale(.98); }
@media (hover: hover) {
  .mc-qbtn:hover { background: var(--bg-muted); }
  .mc-qbtn--retry:hover { background: var(--green-ring); }
}

/* Streak milestone celebration toast — green gradient, fixed at top */
.nb-streak-milestone-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  right: 12px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff;
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  z-index: 310;
  opacity: 0;
  transform: translateY(-110%);
  transition: opacity var(--t-mid), transform var(--t-mid);
  pointer-events: none;
}
.nb-streak-milestone-toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.nb-streak-milestone-toast__icon {
  flex-shrink: 0;
  color: #fff;
}
.nb-streak-milestone-toast__title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}
.nb-streak-milestone-toast__sub {
  font-size: 12.5px;
  opacity: .9;
  margin-top: 2px;
}

/* Draft card (JS-rendered in sheet/chat) — block layout, not the day-card flex row */
.meal-card.nb-draft-card {
  display: block;
  padding: 0;
  overflow: hidden;
}

.meal-card.nb-draft-card header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
}

.meal-card.nb-draft-card .meal-kcal { flex: 1; font-size: 15px; }

.meal-items {
  list-style: none;
  padding: 8px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
}

.meal-items li {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Today bottom content (Баланс дня + Спорт сегодня) ──────── */
.today-extra { padding: 0 var(--page-pad); margin-top: 18px; }

.balance-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

.balance-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-muted);
}

.balance-seg { height: 100%; }
.balance-seg.seg-p { background: var(--protein); }
.balance-seg.seg-f { background: var(--fat); }
.balance-seg.seg-c { background: var(--carb); }

.balance-legend { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.balance-legend span {
  font-size: 12px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.balance-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.balance-legend .dot-p { background: var(--protein); }
.balance-legend .dot-f { background: var(--fat); }
.balance-legend .dot-c { background: var(--carb); }

.balance-tip {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.balance-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 6px 0; }

.sugar-line {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sugar-value { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.sugar-note { color: var(--text-muted); font-weight: 400; }
.sugar-caption { font-size: 11px; color: var(--text-muted); }

.sport-today-card,
.sport-today-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  text-decoration: none;
  margin-bottom: 10px;
}

.sport-today-icon {
  font-size: 24px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  border-radius: 12px;
  flex-shrink: 0;
}
.sport-today-icon.muted { opacity: .6; }
.sport-today-body { flex: 1; min-width: 0; }
.sport-today-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.sport-today-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sport-today-icon svg { color: var(--text-secondary); }

.meal-emoji svg { color: var(--text-secondary); }
.balance-tip .tip-ic { color: var(--fat); margin-right: 5px; vertical-align: -3px; }
.balance-tip .tip-ic.ok { color: var(--green); }

/* ── Skeleton shimmer ──────────────────────────────────── */
.skeleton-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

[data-theme="dark"] .skeleton-card::after {
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  background-size: 200% 100%;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.sk-line { height: 12px; border-radius: 6px; background: var(--border-strong); margin-bottom: 8px; }
.sk-wide   { width: 70%; }
.sk-narrow { width: 45%; }

/* Заглушки панелей «Спорта» на время загрузки фрагмента. Размеры повторяют
   настоящие блоки, иначе подмена дёргает раскладку и вкладка прыгает под
   пальцем. Радиус у карточек журнала свой (20px), а не общий --radius-card. */
.sk-wcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 16px 20px;
}
.sk-wcard {
  aspect-ratio: 1 / 1.12;
  border-radius: 20px;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card::after { animation: none; }
}

/* ── Empty state ─────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
}

.empty-state p { font-size: 15px; line-height: 1.5; }

/* Пустой экран из одной серой строки посреди пустоты читается как поломка,
   а не как «здесь пока ничего». Иконка даёт глазу якорь, кнопка — понятный
   следующий шаг вместо поисков нужного места в интерфейсе. */
.empty-state-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--bg-muted); color: var(--text-muted); margin-bottom: 14px;
}
.empty-state-cta {
  margin-top: 18px; padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: none;
  color: var(--text-primary); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: opacity var(--t-fast);
}
@media (hover: hover) { .empty-state-cta:hover { opacity: 0.85; } }

/* ══════════════════════════════════════════════════════════
   CHIPS
   ══════════════════════════════════════════════════════════ */
.chip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.chip-green { background: var(--green-light); color: var(--green); }

.chip-btn {
  white-space: nowrap;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-card);
  transition: all var(--t-fast);
  cursor: pointer;
}

.chip-btn:active {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════
   WEEK PAGE
   ══════════════════════════════════════════════════════════ */
.week-header {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
  letter-spacing: -.02em;
}

.week-chart-wrap {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 16px;
}

.stat-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.stat-chip {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 14px 10px;
  text-align: center;
}

.stat-chip-val {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.stat-chip-lbl {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   PROFILE PAGE
   ══════════════════════════════════════════════════════════ */
.profile-header {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: -.02em;
}

/* ── Section title (shared across profile sections) ───────── */
.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin: 22px 2px 10px;
}

/* ── Hero: goal + identity ─────────────────────────────────── */
.profile-hero {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 18px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--green-ring), var(--green));
  box-shadow: 0 4px 12px rgba(22,163,74,.30);
}

.profile-hero-info { min-width: 0; }

.profile-hero-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
}

.profile-hero-goal {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  line-height: 1.15;
  margin: 2px 0 8px;
}

.profile-hero-meta { display: flex; flex-wrap: wrap; gap: 6px; }

.profile-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-muted);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.profile-hero-chip .chip-ic { color: var(--green); }

/* ── Daily norms — kcal hero + macro ring cards ───────────── */
.norm-hero-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}

.norm-hero-ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.norm-hero-ring .kcal-arc-svg .ring-track { stroke-width: 7; }
.norm-hero-ring .kcal-arc-svg .ring-fill  { stroke-width: 7; }

.norm-hero-text { display: flex; flex-direction: column; }
.norm-hero-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.norm-hero-lbl { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 5px; }

/* Macro balance — donut showing diet composition (БЖУ split) */
.macro-balance-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 18px 20px;
  margin-bottom: 14px;
}

.macro-donut { position: relative; flex-shrink: 0; }
.macro-donut svg { display: block; }
.macro-donut-track { fill: none; stroke: var(--bg-muted); stroke-width: 14; }
.macro-seg { fill: none; stroke-width: 14; }
.macro-seg--protein { stroke: var(--protein); }
.macro-seg--fat     { stroke: var(--fat); }
.macro-seg--carb    { stroke: var(--carb); }

.macro-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.macro-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.macro-legend-row { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.macro-legend-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.macro-dot--protein { background: var(--protein); }
.macro-dot--fat     { background: var(--fat); }
.macro-dot--carb    { background: var(--carb); }
.macro-legend-label { color: var(--text-secondary); flex: 1; }
/* nowrap: на трёхзначных «290 г» строка ломалась и «г» уезжала под число. */
.macro-legend-val   { font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.macro-legend-pct {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}

/* ── Parameters — stat cards ──────────────────────────────── */
.param-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.param-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.param-card-ic {
  color: var(--text-muted);
  display: flex;
  margin-bottom: 4px;
}

.param-card-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
}

.param-card-lbl {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.profile-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 10px 2px 0;
  line-height: 1.5;
}

/* ── Память — header row + facts ──────────────────────────── */
.facts-head-row { display: flex; align-items: center; gap: 8px; }
.facts-head-row .section-title { margin-bottom: 4px; margin-top: 10px; }

.facts-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-light);
  border-radius: 10px;
  padding: 1px 8px;
  min-width: 20px;
  text-align: center;
}
[data-theme="dark"] .facts-count { background: var(--accent-dim); color: var(--green-ring); }

.facts-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 2px 12px;
}

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

.fact-item {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fact-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--green);
  background: var(--green-light);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* category accents */
.fact-cat--allergy     { color: var(--protein); background: var(--protein-light); }
.fact-cat--restriction { color: var(--fat);     background: var(--fat-light); }
.fact-cat--preference  { color: var(--carb);    background: var(--carb-light); }

[data-theme="dark"] .fact-cat              { background: var(--accent-dim); color: var(--green-ring); }
[data-theme="dark"] .fact-cat--allergy     { background: rgba(224,71,107,.18); color: #F472A0; }
[data-theme="dark"] .fact-cat--restriction { background: rgba(217,119,6,.18);  color: #FBBF24; }
[data-theme="dark"] .fact-cat--preference  { background: rgba(2,132,199,.18);  color: #56B8F0; }

.fact-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.4;
}

.facts-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 28px 16px;
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
}

.facts-empty-ic {
  display: inline-flex;
  color: var(--text-muted);
  opacity: .6;
  margin-bottom: 8px;
}

/* ── Settings card + theme toggle ──────────────────────── */
.settings-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 4px 16px;
  margin-bottom: 14px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.settings-label { font-size: 15px; color: var(--text-primary); font-weight: 500; }

.theme-toggle {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--border-strong);
  position: relative;
  transition: background var(--t-fast);
  flex-shrink: 0;
}

.theme-toggle[aria-checked="true"] { background: var(--green); }

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--t-fast);
}

.theme-toggle[aria-checked="true"] .theme-toggle-knob { transform: translateX(20px); }

/* ── Settings: profile header row (title + gear button) ─── */
.profile-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.profile-header-row .profile-header { margin-bottom: 0; }
/* колокольчик встаёт между заголовком и шестерёнкой */
.nb-bell--profile { margin-left: auto; margin-right: 10px; }
.profile-header-row { gap: 0; }

.profile-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
@media (hover: hover) {
  .profile-settings-btn:hover {
    color: var(--text-secondary);
    background: var(--bg-muted);
    opacity: 1;
  }
}

/* ── Settings: editable form fields ─────────────────────── */
.settings-form {
  padding: 12px 0 4px;
}

/* ── Profile card head (avg 18.08, макет A): avatar + name + since ── */
.sp-head { display: flex; align-items: center; gap: 12px; }
.sp-ava {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #4ade80);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 800; color: #08110b;
}
.sp-ava .ic { color: rgba(8, 17, 11, 0.8); }
.sp-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-name {
  width: 100%; background: none; border: none; padding: 0;
  font: inherit; font-size: 18px; font-weight: 800; color: var(--text-primary);
}
.sp-name::placeholder { color: var(--text-muted); font-weight: 600; }
.sp-name:focus { outline: none; }
.sp-since { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.sp-stats { display: flex; gap: 8px; margin: 14px 0 4px; }
.sp-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 4px 8px; cursor: text;
}
.sp-stat input {
  width: 100%; background: none; border: none; padding: 0; text-align: center;
  font: inherit; font-size: 17px; font-weight: 800; color: var(--text-primary);
  -moz-appearance: textfield;
}
.sp-stat input::-webkit-outer-spin-button,
.sp-stat input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sp-stat input:focus { outline: none; color: var(--green); }
.sp-stat span {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.goal-tile {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-muted); border: 1.5px solid var(--border);
  border-radius: 13px; padding: 10px 11px;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.goal-tile svg { flex-shrink: 0; }
.goal-tile.active {
  border-color: var(--green);
  background: var(--accent-dim);
  color: var(--text-primary);
}
.goal-tile.active svg { color: var(--green); }

/* ── «О приложении» — bottom-sheet (avg 18.08) ── */
.about-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bg-card); border: 1px solid var(--border-strong); border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.45);
}
.about-sheet-grab { width: 38px; height: 4px; border-radius: 3px; background: var(--border-strong); margin: 2px auto 12px; }
.about-sheet-head { display: flex; align-items: center; gap: 12px; }
.about-sheet-logo {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px;
  background: rgba(34, 197, 94, 0.12); color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.about-sheet-name { font-size: 17px; font-weight: 800; color: var(--text-primary); margin-bottom: 3px; }
.about-sheet-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin: 10px 0 0; }
.about-sheet .settings-divider { margin-top: 12px; }
.about-sheet-close {
  display: block; width: 100%; margin-top: 10px; padding: 12px;
  border: none; border-radius: 12px;
  background: var(--bg-muted); color: var(--text-primary);
  font: inherit; font-weight: 700; cursor: pointer;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.settings-field:last-of-type { border-bottom: none; }

.settings-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.settings-field--third {
  padding: 0;
  border-bottom: none;
}

.settings-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.settings-input {
  width: 100%;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font);
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}

.settings-input:focus {
  border-color: var(--green-ring);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

[data-theme="dark"] .settings-input {
  background-color: var(--bg-muted);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.settings-save-btn {
  display: block;
  width: 100%;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 14px;
  cursor: pointer;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) {
  .settings-save-btn:hover { opacity: .88; }
}

.settings-save-btn:active { transform: scale(.97); }
.settings-save-btn:disabled { opacity: .55; cursor: default; }

.settings-save-status {
  font-size: 13px;
  font-weight: 500;
  min-height: 18px;
  margin-top: 6px;
  text-align: center;
}
.settings-save-status--ok  { color: var(--green); }
.settings-save-status--err { color: var(--danger); }

.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.settings-label-sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
}

/* ── Settings: account card (link email / logout) ───────── */
.settings-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 10px 0 4px; }
.settings-hint { font-size: 13px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.4; }
.settings-hint--warn { color: var(--amber, #F59E0B); }
.settings-value { font-size: 15px; color: var(--text-secondary); }
.settings-danger { color: var(--danger); }
.settings-link { color: var(--text-primary); font-size: 15px; font-weight: 500; text-decoration: none; }
.settings-danger, .settings-link {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.nb-link-email { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; margin-bottom: 10px; }
.nb-link-email[hidden] { display: none; } /* display:flex would beat the UA [hidden] rule */

.settings-lang-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-muted);
  border-radius: 20px;
  padding: 4px 12px;
  border: 1px solid var(--border);
}

/* ── Account deletion: settings link + confirmation screen ─ */
.settings-delete-link {
  color: var(--danger);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.del-warn {
  background: var(--danger-dim);
  border: 1px solid rgba(248,81,73,.35);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.del-warn-title { font-size: 15.5px; font-weight: 700; color: var(--danger); margin: 0 0 6px; }
.del-warn-text { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0; }

.del-what-label { font-size: 14px; color: var(--text-secondary); margin: 0 0 10px; }
.del-what {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.del-what li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-primary);
}
.del-what li::before { content: "—"; position: absolute; left: 0; color: var(--text-muted); }

.del-btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
  padding: 14px;
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.del-btn:active { transform: scale(.98); }
.del-btn--ghost {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  margin-bottom: 20px;
}
.del-btn--kill { background: var(--danger); color: #fff; margin-top: 16px; }
.del-btn--kill:disabled { background: var(--danger-dim); color: var(--text-muted); cursor: default; }
.del-btn--calm { background: var(--green); color: #fff; margin-top: 10px; }

@media (hover: hover) {
  .settings-delete-link:hover { opacity: .8; }
  .del-btn--ghost:hover { background: var(--bg-muted); }
  .del-btn--kill:enabled:hover { opacity: .9; }
  .del-btn--calm:hover { opacity: .9; }
}

.del-label { display: block; font-size: 13.5px; color: var(--text-secondary); margin-bottom: 6px; }
/* Фокус — красный, а не зелёный, как у остальных полей: зелёная рамка над
   кнопкой «Удалить навсегда» читается как «всё в порядке, жми». */
.del-input { letter-spacing: .04em; }
.del-input:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-dim); }
.del-err { font-size: 13px; color: var(--danger); margin: 8px 0 0; }
.del-err[hidden] { display: none; }

.del-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 44px 8px 0;
}
.del-done[hidden] { display: none; }
.del-done-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  color: var(--text-secondary);
}
.del-done-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; }
.del-done-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 32ch;
}

/* ── Segment control (settings: goal / activity) ─────────── */
/* Shares .seg-btn with the progress segment-switch,
   but .seg-control has no side margin — it lives inside a .settings-field */
.seg-control {
  display: flex;
  background: var(--bg-muted);
  border-radius: 10px;
  padding: 3px;
  margin-top: 4px;
}

/* Goal has 4 options ("Рекомпозиция" is long) — wrap to 2×2 so they fit on narrow screens */
.seg-control[data-seg="goal"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

/* ══════════════════════════════════════════════════════════
   LOGIN PAGE — variant A «Living ring»
   ══════════════════════════════════════════════════════════ */
.nb-login-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  background-image: var(--glow);
  font-family: var(--font);
  color: var(--text-primary);
}

.nb-login-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 28px 0;
  text-align: center;
}

.nb-login-ringwrap {
  position: relative;
  width: 190px;
  height: 190px;
  flex-shrink: 0;
}

.nb-login-leaf {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}

.nb-login-ring-anim {
  animation: nb-login-spin 40s linear infinite;
  transform-origin: 50% 50%;
  display: block;
}

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

@media (prefers-reduced-motion: reduce) {
  .nb-login-ring-anim { animation: none; }
}

.nb-login-name {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 22px;
}

.nb-login-tag {
  font-size: 16px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.nb-login-feats {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 30px;
  align-items: flex-start;
  width: 100%;
  max-width: 280px;
}

.nb-login-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--text-secondary);
  text-align: left;
}

.nb-login-feat-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,.12);
  color: var(--green);
}

.nb-login-foot {
  padding: 14px 24px calc(env(safe-area-inset-bottom, 0px) + 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nb-login-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border-radius: 16px;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  box-shadow: 0 8px 24px rgba(22,163,74,.35);
  text-decoration: none;
  transition: opacity .15s, transform .12s;
}
@media (hover: hover) {
  .nb-login-cta:hover { opacity: .9; color: #fff; }
}

.nb-login-cta:active { transform: scale(.97); }

.nb-login-dev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: 16px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1.5px solid var(--border);
  background: none;
  transition: opacity .15s;
}
@media (hover: hover) {
  .nb-login-dev:hover { opacity: .8; }
}

.nb-login-email { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.nb-login-email[hidden] { display: none; } /* display:flex would beat the UA [hidden] rule */

.nb-login-input {
  width: 100%; padding: 13px 14px; border-radius: 12px; font-size: 16px;
  font-family: inherit; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary);
}

.nb-login-consent {
  display: flex; gap: 8px; align-items: flex-start; text-align: left;
  font-size: 13px; color: var(--text-secondary);
}
/* Чекбокс по умолчанию ~13px — это самый первый обязательный тап в продукте,
   и промахнуться по нему нельзя. Увеличиваем сам квадратик, а не только зону. */
.nb-login-consent input[type="checkbox"] { margin-top: 1px; flex-shrink: 0;
  accent-color: var(--green); width: 20px; height: 20px; }
.nb-login-consent a { color: inherit; text-decoration: underline; }
.nb-login-legal { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--text-secondary); }
.nb-login-legal a { color: inherit; text-decoration: underline; }

.nb-login-err { color: var(--danger); font-size: 13px; margin: 0; text-align: center; }

.nb-login-sent { font-size: 13px; color: var(--text-secondary); margin: 0; text-align: center; }

.nb-login-alt { text-align: center; font-size: 14px; color: var(--text-secondary); background: none; border: 0; padding: 6px; }

/* Installed app has no browser chrome to return to — the Telegram link would strand the user outside. */
@media (display-mode: standalone) {
  .nb-login-tg-out { display: none; }
}

/* Keep old .login-page/.login-btn classes as no-op stubs for any cached pages */
.login-page { display: none; }

/* ══════════════════════════════════════════════════════════
   УСТАНОВКА ПРИЛОЖЕНИЯ — баннер в дневнике, строка настроек,
   кнопка на логине. Все три ждут решения install.js.
   ══════════════════════════════════════════════════════════ */
/* Собственный display:flex бьёт UA-правило [hidden] — узел остался бы на экране. */
.nb-install[hidden] { display: none; }

.install-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid rgba(34,197,94,.30);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 13px 14px;
  margin: 0 var(--page-pad) 10px;
}

.install-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background: rgba(34,197,94,.12);
  border: 1.5px solid var(--green-ring);
  color: var(--green-ring);
}

.install-banner-body { flex: 1; min-width: 0; }
.install-banner-title { display: block; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.install-banner-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 2px 0 0;
}
.install-banner-actions { display: flex; gap: 8px; margin-top: 11px; }

.install-btn {
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  flex-shrink: 0;
  -webkit-touch-callout: none;
  transition: opacity var(--t-fast);
}
.install-btn:active { opacity: .75; }

/* Подпись в две строки упиралась в кнопку — .settings-row сам по себе без gap. */
.settings-card.nb-install .settings-row { gap: 14px; }

.install-btn--ghost {
  background: none;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}

.nb-login-install {
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 16px;
}

.install-btn--login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  color: var(--green-ring);
  border: 1px solid rgba(34,197,94,.35);
  font-size: 14px;
  padding: 10px 20px;
}

@media (hover: hover) {
  .install-btn:hover { opacity: .85; }
}

/* ══════════════════════════════════════════════════════════
   NO PROFILE PAGE
   ══════════════════════════════════════════════════════════ */
.no-profile-wrap {
  text-align: center;
  padding: 40px 24px;
}

.no-profile-wrap h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.no-profile-wrap p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Utility ─────────────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* ══════════════════════════════════════════════════════════
   SPORT PAGE
   ══════════════════════════════════════════════════════════ */
.sport-header {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: -.02em;
}

.sport-section {
  margin-bottom: 20px;
}

.sport-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.sport-empty p {
  font-size: 15px;
  line-height: 1.6;
}

.sport-empty code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--green);
}

/* Day accordions */
.day-accordion {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  overflow: hidden;
}

.day-accordion-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--t-fast);
}
@media (hover: hover) {
  .day-accordion-summary:hover { background: var(--bg-muted); }
}

.day-accordion-summary::-webkit-details-marker { display: none; }

.day-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 80px;
}

.day-focus {
  font-size: 13px;
  color: var(--green);
  flex: 1;
}

.day-accordion-body {
  padding: 6px 14px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exercise-row { padding: 4px 0; }

.exercise-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.exercise-sets {
  font-size: 13px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.exercise-why {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Workout list cards */
.workouts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workout-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 12px 14px;
}

.workout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.workout-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.workout-tonnage {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-light);
  border-radius: 99px;
  padding: 2px 10px;
}

[data-theme="dark"] .workout-tonnage {
  background: var(--accent-dim);
  color: var(--green-ring);
}

.workout-exercises {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Charts */
.chart-wrap {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 14px;
}

.chart-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 16px;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.chart-box {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.chart-box-md { height: 160px; }
.chart-box-sm { height: 100px; }
.chart-box-lg { height: 168px; }  /* avg 19.08: график веса был слишком высоким */

/* Average-per-period mini stats (Прогресс · Питание) */
.avg-stats { display: flex; gap: 8px; margin-bottom: 14px; }
.avg-stat {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 10px 4px;
  text-align: center;
}
.avg-stat-val {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.avg-stat-val.avg-p { color: var(--protein); }
.avg-stat-val.avg-f { color: var(--fat); }
.avg-stat-val.avg-c { color: var(--carb); }
.avg-stat-lbl {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.chart-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Sport catalog link */
.sport-catalog-link {
  margin-top: 8px;
  text-align: center;
}

.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover) {
  .btn-secondary:hover {
    background: var(--accent-muted);
    color: var(--green);
  }
}

/* Prominent catalog link card (Спорт → справочник) */
.catalog-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin: 4px 0 0;
  text-decoration: none;
  transition: background var(--t-fast), transform .1s;
}
@media (hover: hover) {
  .catalog-card:hover { background: var(--bg-muted); }
}

.catalog-card:active { transform: scale(.99); }
.catalog-card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-light);
  color: var(--green);
}
[data-theme="dark"] .catalog-card-icon { background: var(--accent-dim); color: var(--green-ring); }
.catalog-card-body { flex: 1; min-width: 0; }
.catalog-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.catalog-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.catalog-card-chevron { color: var(--text-muted); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   WORKOUT LOG  (Мои тренировки in Спорт pane)
   ══════════════════════════════════════════════════════════ */
.workout-log { display: flex; flex-direction: column; gap: 10px; }

/* Т1+Т3 (avg 18.08): «Мои тренировки» — muscle photo + gradient strip + set capsules */
.wlog2 {
  position: relative;
  overflow: hidden;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.wlog2-grad {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  opacity: .9;
  pointer-events: none;
}
.wlog2-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}
.wlog2-head::-webkit-details-marker { display: none; }
.wlog2-photo {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 11px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-card);
  filter: grayscale(1) brightness(.85);
}
[data-theme="light"] .wlog2-photo { filter: grayscale(1); }
.wlog2-photo--ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  filter: none;
}
.wlog2-titlecol { flex: 1; min-width: 0; }
.wlog2-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wlog2-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.wlog2-ton {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, .4);
  border-radius: 99px;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}
.wlog2[open] .wlog-chevron { transform: rotate(180deg); }
.wlog2-body { padding: 0 12px 12px; display: grid; gap: 7px; }
.wlog2-ex {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wlog2-exname { flex: 1; min-width: 0; font-size: 13px; color: var(--text-secondary); }
.wlog2-cap {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wlog2-exnote { font-size: 12px; color: var(--text-muted); margin-top: -3px; }

.wlog-item {
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  background: var(--bg-muted);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
[data-theme="dark"] .wlog-item { background: var(--surface); }

/* Q7: tappable workout item — <details> reset + cursor */
.wlog-item--tap { cursor: pointer; }
.wlog-item--tap[open] { padding-bottom: 4px; }
.wlog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
/* Q7: summary inside details — remove default marker, flex like a row */
.wlog-header--tap {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  cursor: pointer;
}
.wlog-header--tap::-webkit-details-marker { display: none; }
.wlog-summary-exnames {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wlog-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--t-fast);
}
.wlog-item--tap[open] .wlog-chevron { transform: rotate(180deg); }
.wlog-detail {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.wlog-show-all {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--green);
  /* 8px/2px давали кнопку в 26px — для пальца мало. */
  padding: 14px 0 12px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
}
.wlog-date { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.wlog-tonnage {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-light);
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
[data-theme="dark"] .wlog-tonnage { background: var(--accent-dim); color: var(--green-ring); }
.wlog-ex { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.wlog-note { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-style: italic; }

.wlog-edit-form {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.wlog-edit-exercise {
  margin-bottom: 10px;
}
.wlog-edit-ex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.wlog-edit-ex-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.wlog-edit-remove-ex {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.wlog-edit-sets { display: flex; flex-direction: column; gap: 4px; }
.wlog-edit-set-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 6px;
  align-items: center;
}
.wlog-edit-reps, .wlog-edit-weight {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input, var(--bg-muted));
  color: var(--text-primary);
  font-size: 13px;
  padding: 5px 8px;
  width: 100%;
  min-width: 0;
}
.wlog-edit-unit { font-size: 12px; color: var(--text-secondary); }
.wlog-edit-remove-set {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.wlog-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.wlog-edit-cancel-btn {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
}
.wlog-edit-save-btn { flex: 2; }

/* Profile page: Мои тренировки card */
.profile-workout-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin: 12px 0;
  text-decoration: none;
  transition: background var(--t-fast), transform .1s;
}
@media (hover: hover) {
  .profile-workout-card:hover { background: var(--bg-muted); }
}

.profile-workout-card:active { transform: scale(.99); }
.profile-workout-card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-light);
  color: var(--green);
}
[data-theme="dark"] .profile-workout-card-icon { background: var(--accent-dim); color: var(--green-ring); }
.profile-workout-card-body { flex: 1; min-width: 0; }
.profile-workout-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.profile-workout-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.profile-workout-card-chevron { color: var(--text-muted); flex-shrink: 0; }

/* Profile tabs segment switch — slight top margin after param-grid.
   Profile page uses a non-flush container (padding: var(--page-pad)),
   so the segment-switch's default side margin would double-inset it.
   Zero out the horizontal margin and pane padding to match card width. */
.profile-tabs { margin-top: 20px; }
.profile-tabs.segment-switch { margin-left: 0; margin-right: 0; }
#profile-seg ~ .seg-pane { padding-left: 0; padding-right: 0; }

/* Diary-day list (Записи + Тренировки tabs) */
.diary-day-list { list-style: none; margin: 0; padding: 0; }
.diary-day-row { border-bottom: 1px solid var(--border); }
.diary-day-row:last-child { border-bottom: none; }
.diary-day-row--extra { display: none; }
.diary-day-link {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0; text-decoration: none; color: inherit;
}
.diary-day-label { font-size: 15px; font-weight: 500; color: var(--text-primary); flex: 1; }
.diary-day-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
/* Workout rows: the date must never wrap; long titles ellipsize instead */
.diary-day-label--date { flex: 0 0 auto; white-space: nowrap; }
.diary-day-meta--ellipsis { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.diary-day-chevron { color: var(--text-muted); flex-shrink: 0; }
/* Profile → Тренировки: two-line rows (title over date · counts), wlog2-like */
.pwo-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwo-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pwo-meta { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .diary-day-link:hover .diary-day-label { color: var(--green-ring); }
  .diary-day-link--wo:hover .pwo-title { color: var(--green-ring); }
}

/* Non-clickable workout row — same layout as diary-day-link but no hover affordance */
.workout-day-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0;
}

/* Profile tab empty state */
.profile-tab-empty {
  padding: 32px 0 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.profile-tab-empty a { color: var(--green-ring); }

/* ══════════════════════════════════════════════════════════
   EXERCISE CATALOG
   ══════════════════════════════════════════════════════════ */
.catalog-header { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.catalog-header .sport-header { margin-bottom: 0; }
.catalog-back {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  margin-left: -8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
@media (hover: hover) {
  .catalog-back:hover { color: var(--green); background: var(--accent-muted); }
}

/* ── Exercise catalog filter (2.0 redesign) ─────────────── */
.exercises-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

/* Search + filter-button row */
.ex-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font);
  outline: none;
  transition: border-color var(--t-fast);
}

.search-input:focus { border-color: var(--green-ring); outline: none; }

/* "Фильтры" button */
.ex-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 44px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  position: relative;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
@media (hover: hover) {
  .ex-filter-btn:hover { border-color: var(--green-ring); color: var(--green); }
}

.ex-filter-btn:active { background: var(--accent-muted); }

.ex-filter-btn-label { line-height: 1; }

/* Active-filter count badge — hidden by default, shown via .ex-filter-badge--visible */
.ex-filter-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}

.ex-filter-badge--visible {
  display: flex;
}

/* Active filter chips row (below search) */
.ex-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0; /* collapses when empty */
}

.ex-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 12px;
  background: var(--accent-dim);
  border: 1px solid var(--green);
  border-radius: 20px;
  color: var(--green);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--t-fast);
}
@media (hover: hover) {
  .ex-active-chip:hover { background: var(--accent-muted); }
}

/* ── Filter bottom sheet ─────────────────────────────────── */
.ex-filter-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid);
}

.ex-filter-backdrop--visible {
  opacity: 1;
  pointer-events: all;
}

/* While the filter sheet is open, hide the bottom-nav — on iOS the nav (inside the
   -webkit-overflow-scrolling app-frame) paints over the sheet footer, hiding "Применить". */
body.ex-filter-open .bottom-nav { visibility: hidden; }

.ex-filter-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(var(--safe-bottom) + 24px);
  z-index: 210;
  transform: translateY(100%);
  visibility: hidden; /* см. .bottom-sheet: закрытый шит торчит в standalone-полосе */
  transition: transform var(--t-slow), visibility 0s var(--t-slow);
  box-shadow: 0 -4px 40px rgba(0,0,0,.15);
  max-height: 82vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ex-filter-sheet::-webkit-scrollbar { display: none; }

.ex-filter-sheet--open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-slow), visibility 0s;
}

/* Sheet body */
.ex-filter-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
  padding-bottom: 16px;
}

/* Chip group */
.ex-chip-group-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

[data-theme="dark"] .ex-chip-group-label { color: var(--text-secondary); }

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

.ex-chip {
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
@media (hover: hover) {
  .ex-chip:hover {
    border-color: var(--green-ring);
    color: var(--green);
  }
}

.ex-chip--active {
  background: var(--accent-dim);
  border-color: var(--green);
  color: var(--green);
  font-weight: 600;
}

/* Sheet footer */
.ex-filter-sheet-footer {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}

.ex-filter-footer-btn {
  flex: 1;
  padding: 13px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--t-fast), opacity var(--t-fast);
  border: none;
}

.ex-filter-footer-btn--ghost {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
@media (hover: hover) {
  .ex-filter-footer-btn--ghost:hover { background: var(--bg); }
}

.ex-filter-footer-btn--primary {
  background: var(--green);
  color: #fff;
}
@media (hover: hover) {
  .ex-filter-footer-btn--primary:hover { opacity: .88; }
}

.ex-filter-footer-btn--primary:active { opacity: .80; }

.exercises-count {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.exercises-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.exercise-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .exercise-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    transform: translateY(-2px);
  }
}

.exercise-card:active {
  transform: scale(.97);
  box-shadow: var(--shadow-card);
}

.exercise-card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-muted);
  position: relative;
}

.exercise-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-mid);
}
@media (hover: hover) {
  .exercise-card:hover .exercise-card-photo img {
    transform: scale(1.04);
  }
}

.exercise-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
}

.exercise-photo-placeholder svg {
  width: 36px; height: 36px;
  stroke: var(--border-strong);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exercise-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.exercise-card-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* muscle hint — small labeled pill */
.exercise-card-muscle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #15803D; /* green-700: 4.55:1 on white — WCAG AA at 10px bold */
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 2px;
}
.exercise-card-muscle::before {
  content: "";
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #15803D;
  flex-shrink: 0;
}
[data-theme="dark"] .exercise-card-muscle {
  color: var(--green-ring);
}
[data-theme="dark"] .exercise-card-muscle::before {
  background: var(--green-ring);
}
@media (hover: hover) {
  :root[data-theme="dark"] .exercise-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 0 1px var(--border-strong);
  }
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.page-btn {
  padding: 8px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--green);
  border: 1px solid var(--border-strong);
  transition: background var(--t-fast);
}
@media (hover: hover) {
  .page-btn:hover { background: var(--accent-muted); }
}

.page-info {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
   EXERCISE GROUP GRID (DDX drill-down entry screen)
   ══════════════════════════════════════════════════════════ */

.ex-group-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}

.ex-group-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--text-primary);
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .ex-group-card:hover {
    border-color: var(--green-ring);
    box-shadow: 0 4px 14px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
    transform: translateY(-1px);
  }
}

.ex-group-card:active {
  transform: scale(.97);
}

.ex-group-card-icon {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  border-radius: var(--radius-md);
}

/* Anatomical group silhouette: muted body + the group's muscles highlighted */
.gi { display: block; }
.gi-base { fill: #C7C3BB; }
.gi-on   { fill: var(--green); }
[data-theme="dark"] .gi-base { fill: #48535F; }
[data-theme="dark"] .gi-on   { fill: var(--green-ring); }

.ex-group-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ex-group-card-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ex-group-card-count {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.ex-group-card-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* ── Subcategory chips row (group screen, always visible above list) ── */

.ex-subcat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ex-subcat-chip {
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
@media (hover: hover) {
  .ex-subcat-chip:hover {
    border-color: var(--green-ring);
    color: var(--green);
  }
}

.ex-subcat-chip--active {
  background: var(--accent-dim);
  border-color: var(--green);
  color: var(--green);
  font-weight: 600;
}

/* R3-B2: exercises picker banner */
.exercises-pick-banner {
  background: var(--surface-2, #f3f4f6);
  color: var(--text-muted, #6b7280);
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  margin: 0.5rem 1rem 0;
}

/* ══════════════════════════════════════════════════════════
   EXERCISE DETAIL PAGE — DDX-inspired redesign
   ══════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────── */
.ex-detail {
  /* Резерв под таббар делает main.container — свой отступ здесь складывался бы
     с ним и давал больше сотни пустых пикселей под последней карточкой. */
}

/* ── Back link ───────────────────────────────────────────── */
.ex-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 14px;
  transition: color var(--t-fast);
}
@media (hover: hover) {
  .ex-back-link:hover { color: var(--green); }
}

/* ── Media hero ──────────────────────────────────────────── */
.ex-hero {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-card);
  /* Right-edge fade to signal more images are scrollable */
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}

.ex-hero--single {
  display: block;
}

.ex-hero-img {
  flex-shrink: 0;
  width: 80%;
  max-height: 340px;
  border-radius: var(--radius-card);
  object-fit: cover;
  scroll-snap-align: start;
  background: var(--bg-muted);
}

.ex-hero--single .ex-hero-img {
  width: 100%;
  max-height: 280px;
}

/* Placeholder when no photos */
.ex-hero-placeholder {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-card);
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.ex-hero-ph-icon {
  color: var(--text-muted);
  opacity: .5;
}

/* ── Title + badges ──────────────────────────────────────── */
.ex-header {
  margin-bottom: 18px;
}

.ex-title {
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.025em;
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.ex-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ex-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  letter-spacing: .03em;
}

.ex-badge .ic { flex-shrink: 0; }

.ex-badge--equip {
  background: var(--green-light);
  color: var(--green);
}
[data-theme="dark"] .ex-badge--equip {
  background: var(--accent-dim);
  color: var(--green-ring);
}

.ex-badge--level {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}

.ex-badge--loc {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}

[data-theme="dark"] .ex-badge--level,
[data-theme="dark"] .ex-badge--loc {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: var(--text-secondary);
}

/* ── Muscle map (unchanged visual logic, just spacing) ────── */
.muscle-map-wrap {
  --muscle-fill:     #E7E4DE;
  --muscle-stroke:   #CDC9C2;
  --zone-primary:    #DC2626;
  --zone-secondary:  #E25C92;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 14px;
}

[data-theme="dark"] .muscle-map-wrap {
  --muscle-fill:    #48535F;
  --muscle-stroke:  #5C6670;
  --zone-primary:   #EF4444;
  --zone-secondary: #F6A6C1;
}

.muscle-map-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.muscle-map {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.muscle-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.figure-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.body-svg { width: 100%; max-width: 150px; height: auto; display: block; }
/* Exercise detail: larger muscle map (size=220 → ~110px each SVG, allow more) */
.muscle-map-wrap .body-svg { max-width: 220px; }

.body-base {
  fill: var(--muscle-fill);
  stroke: var(--muscle-stroke);
  stroke-width: 0.18;
  stroke-linejoin: round;
}

.muscle-zone {
  fill: var(--muscle-fill);
  stroke: var(--muscle-stroke);
  stroke-width: 0.14;
  stroke-linejoin: round;
  transition: fill .25s ease;
}

.zone-primary {
  fill: var(--zone-primary);
  stroke: var(--zone-primary);
  stroke-width: 0.22;
  filter: drop-shadow(0 0 0.5px var(--zone-primary));
}

.zone-secondary {
  fill: var(--zone-secondary);
  stroke: var(--zone-secondary);
  stroke-width: 0.18;
}

/* render_body() output classes — mm-base muted, mm-hi uses inline fill */
.mm-body { display: flex; gap: 12px; justify-content: center; }
.mm-svg  { height: auto; display: block; }
.mm-base {
  fill: var(--muscle-fill);
  stroke: var(--muscle-stroke);
  stroke-width: 0.14;
  stroke-linejoin: round;
}
.mm-hi {
  /* fill set inline by render_body(); stroke inherits fill for crisp edge */
  stroke-width: 0.22;
  stroke: inherit;
  stroke-linejoin: round;
}

/* Dark-mode base fill for render_body() SVG (--mm-base is the CSS var used by the
   SVG fill attribute; --muscle-fill covers the old .mm-base class path) */
[data-theme="dark"] {
  --mm-base: #48535F;
}

/* ── Recovery widget v3 (inside .chart-card.recovery-widget) ─── */

/* All-fresh state */
.recovery-fresh-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0 4px;
}

.recovery-fresh-msg {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

/* Centered silhouettes */
.recovery-silhouettes {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.recovery-silhouettes .mm-body {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* v3 group list */
.recovery-v3-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recovery-v3-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  list-style: none;   /* override pico ul li { list-style: square } */
}

.recovery-v3-item:last-child { border-bottom: none; }

.recovery-v3-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Fix gi-base / gi-on coloring in recovery context */
.recovery-v3-icon .gi-base { fill: var(--muscle-fill, #E7E4DE); }
.recovery-v3-icon .gi-on  { fill: var(--zone-primary, #ef4444); }

.recovery-v3-body {
  flex: 1;
  min-width: 0;
}

.recovery-v3-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.recovery-v3-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.recovery-v3-pct {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.recovery-v3-pct.pct-low  { color: #EF4444; }
.recovery-v3-pct.pct-mid  { color: #F59E0B; }
.recovery-v3-pct.pct-ok   { color: #22C55E; }

.recovery-v3-bar-wrap {
  height: 5px;
  border-radius: 3px;
  background: var(--track-bg, #E5E7EB);
  overflow: hidden;
  margin-bottom: 3px;
}

.recovery-v3-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.recovery-v3-eta {
  font-size: 11px;
  color: var(--text-muted);
}

/* Detail expandable */
.recovery-detail {
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

.recovery-detail-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}

.recovery-detail-toggle::-webkit-details-marker { display: none; }

.recovery-detail-toggle::before {
  content: "▸";
  font-size: 10px;
  transition: transform var(--t-fast);
  flex-shrink: 0;
}

.recovery-detail[open] .recovery-detail-toggle::before {
  transform: rotate(90deg);
}

.recovery-detail-body {
  padding-bottom: 4px;
}

.recovery-v3-list--full {
  margin-top: 8px;
}

/* Legacy selectors kept for back-compat (bot-facing templates may use them) */
.recovery-body { display: flex; flex-direction: column; gap: 12px; }
.recovery-list  { list-style: none; margin: 0; padding: 0; }
.recovery-item  { padding: 6px 0; border-bottom: 1px solid var(--border); }
.recovery-item:last-child { border-bottom: none; }
.recovery-group { font-size: 14px; font-weight: 500; }
.recovery-freshness { font-size: 14px; font-weight: 600; }
.recovery-eta { font-size: 12px; color: var(--text-muted); }
.recovery-more summary { font-size: 13px; color: var(--text-muted); cursor: pointer; }

/* ── Recovery widget round 5 S redesign (recovery-r5-*) ───────── */
.recovery-r5-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.recovery-r5-overall {
  display: flex;
  align-items: center;
  gap: 5px;
}

.recovery-r5-ring {
  display: block;
  /* rotate so arc starts at top */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.recovery-r5-pct {
  font-size: 13px;
  font-weight: 700;
  min-width: 30px;
  text-align: right;
}

/* Two-column body layout */
.recovery-r5-body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.recovery-r5-silhouettes-link {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  /* Ensure silhouettes fit 375px two-column: ~45% of card width */
  max-width: 46%;
}

.recovery-r5-silhouettes {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.recovery-r5-right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.recovery-r5-all-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #6366F1);
  text-decoration: none;
}
@media (hover: hover) {
  .recovery-r5-all-link:hover { opacity: 0.8; }
}

.recovery-r5-fresh-msg {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* Mini group list in widget */
.recovery-r5-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.recovery-r5-item {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.recovery-r5-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recovery-r5-name {
  flex: 1 1 0;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge pill — shared between widget and full list */
.recovery-r5-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  letter-spacing: 0.01em;
}

.recovery-r5-badge.badge-neutral {
  background: rgba(255,255,255,0.08);
  color: var(--text-muted, #888);
}

.recovery-r5-badge.badge-pink {
  background: rgba(244,114,182,0.18);
  color: #F472B6;
}

.recovery-r5-badge.badge-red {
  background: rgba(239,68,68,0.18);
  color: #EF4444;
}

/* ── /sport/recovery full-screen list ─────────────────────────── */
.recovery-r5-page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.recovery-r5-back-link {
  display: flex;
  align-items: center;
  color: var(--text-muted, #888);
  text-decoration: none;
  flex-shrink: 0;
}
@media (hover: hover) {
  .recovery-r5-back-link:hover { color: var(--text-primary); }
}

.recovery-r5-full-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--page-pad) 24px;
}

.recovery-r5-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

/* Square tile (left) */
.recovery-r5-tile {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .recovery-r5-tile { background: rgba(255, 255, 255, 0.06); }

.recovery-r5-tile--pink {
  background: rgba(244,114,182,0.14);
}

.recovery-r5-tile--red {
  background: rgba(239,68,68,0.14);
}

/* Tile silhouettes: the page-level base fill is tuned for big card silhouettes
   and vanishes on the small dark tiles — give tiles their own readable body
   color (competitor look: dark tile, grey body, near-white fresh muscles). */
.recovery-r5-tile .mm-base { fill: #b9c0cb; stroke: rgba(0, 0, 0, 0.15); }
[data-theme="dark"] .recovery-r5-tile .mm-base { fill: #4a5262; stroke: rgba(0, 0, 0, 0.35); }
:root { --mm-tile-fresh: #8f98a5; }
[data-theme="dark"] { --mm-tile-fresh: #dfe4ea; }

/* Middle: name + status */
.recovery-r5-row-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recovery-r5-row-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recovery-r5-row-status {
  font-size: 12px;
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.muscle-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 8px;
}

.legend-primary, .legend-secondary {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-primary::before, .legend-secondary::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 4px;
}
.legend-primary::before   { background: var(--zone-primary); }
.legend-secondary::before { background: var(--zone-secondary); }

/* ── Muscle chips (replace plain details text) ───────────── */
.muscle-chips-wrap {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.muscle-chip-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.muscle-chip-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.muscle-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.muscle-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  line-height: 1.3;
}

/* Primary chips — translucent red per mockup (dark default) */
.muscle-chip--primary {
  background: rgba(239,68,68,.18);
  border: 1px solid rgba(239,68,68,.55);
  color: #d9d9de;
  font-weight: 500;
}

/* Secondary chips — translucent pink per mockup */
.muscle-chip--secondary {
  background: rgba(226,92,146,.16);
  border: 1px solid rgba(226,92,146,.5);
  color: #d9d9de;
  font-weight: 500;
}

/* Light theme overrides */
:root:not([data-theme="dark"]) .muscle-chip--primary {
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.45);
  color: #3f3f46;
}
:root:not([data-theme="dark"]) .muscle-chip--secondary {
  background: rgba(226,92,146,.10);
  border-color: rgba(226,92,146,.4);
  color: #3f3f46;
}


/* ── Section card (TC-style neutral grey block, replaces colored fills) ── */
.ex-sec-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px;
  margin-bottom: 14px;
}

/* ── Цветные зоны техники/ошибок/безопасности (avg 18.08, макет H) ── */
.ex-zone {
  position: relative; overflow: hidden;
  border-radius: var(--radius-card);
  padding: 14px;
  margin-bottom: 14px;
}
.ex-zone--tech {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.04));
  border: 1px solid rgba(34, 197, 94, 0.28);
}
.ex-zone--mist {
  background: linear-gradient(160deg, rgba(255, 159, 10, 0.12), rgba(255, 159, 10, 0.03));
  border: 1px solid rgba(255, 159, 10, 0.28);
}
.ex-zone--safe {
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.11), rgba(45, 212, 191, 0.03));
  border: 1px solid rgba(45, 212, 191, 0.28);
}
.ex-zone-wm {
  position: absolute; right: 8px; top: -16px;
  font-size: 92px; font-weight: 800; line-height: 1;
  opacity: 0.08; pointer-events: none; user-select: none;
}
.ex-zone--tech .ex-zone-wm { color: var(--green); }
.ex-zone--mist .ex-zone-wm { color: #ff9f0a; }
.ex-zone-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 6px;
}
.ex-zone--tech .ex-zone-label { color: var(--green); }
.ex-zone--mist .ex-zone-label { color: #ff9f0a; }
.ex-zone--safe .ex-zone-label { color: #2dd4bf; }
.ex-zone-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.ex-zone-step { display: flex; gap: 10px; padding: 7px 0; }
.ex-zone-n {
  flex-shrink: 0; width: 17px; margin-top: 1px;
  color: var(--green); font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ex-zone-n--x { color: #ff9f0a; display: inline-flex; align-items: center; }
.ex-zone-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.ex-zone-text--solo { position: relative; margin-top: 2px; }
/* Р1 (avg 18.08): рекомендация — фиолетовая зона, эффект — синяя с барами */
.ex-zone--rec {
  background: linear-gradient(160deg, rgba(167, 139, 250, 0.14), rgba(167, 139, 250, 0.04));
  border: 1px solid rgba(167, 139, 250, 0.28);
}
.ex-zone--rec .ex-zone-label { color: #a78bfa; }
.ex-zone-wm--bolt { top: -6px; right: -2px; color: #a78bfa; }
.ex-zone--rec .ex-rec-grid { position: relative; }
.ex-zone--fx {
  background: linear-gradient(160deg, rgba(56, 189, 248, 0.13), rgba(56, 189, 248, 0.04));
  border: 1px solid rgba(56, 189, 248, 0.28);
}
.ex-zone--fx .ex-zone-label { color: #38BDF8; }
.ex-fx-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.ex-fx-name { flex-shrink: 0; width: 92px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.ex-fx-cap { flex: 1; height: 9px; border-radius: 999px; background: var(--bg-muted); border: 1px solid var(--border); position: relative; }
.ex-fx-cap i {
  position: absolute; top: 1.5px; bottom: 1.5px; left: 1.5px;
  border-radius: 999px; max-width: calc(100% - 3px);
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
}
.ex-fx-val { flex-shrink: 0; min-width: 36px; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── Общая рекомендация — grey card, purple only on icon+label ── */
.ex-rec {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ex-rec-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(139,124,247,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #8b7cf7;
}
.ex-rec-label {
  font-size: 12px;
  font-weight: 700;
  color: #8b7cf7;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.ex-rec-grid {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.ex-rec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ex-rec-val {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.ex-rec-name {
  font-size: 12px;
  color: var(--text-muted);
}
.ex-rec-sep {
  width: 1px;
  height: 26px;
  background: var(--border);
  align-self: center;
  flex-shrink: 0;
}

/* ── Эффект упражнения — effect rings ─────────────────── */
.ex-rings {
  display: flex;
  justify-content: space-around;
}
.ex-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.ex-ring svg {
  transform: rotate(-90deg);
  overflow: visible;
}
.ex-ring-track {
  fill: none;
  stroke: #26262a;
}
:root:not([data-theme="dark"]) .ex-ring-track {
  stroke: #e8e8e3;
}
.ex-ring-arc {
  fill: none;
  stroke: #30d158;
  stroke-linecap: round;
}
.ex-ring-txt {
  text-align: center;
  min-width: 0;
  max-width: 100%;
}
.ex-ring-pct {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.ex-ring-name {
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Technique steps D3 — green check icons ──────────── */
.ex-steps-d3 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ex-step-d3 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ex-step-d3-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(48,209,88,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ex-step-d3-text {
  font-size: 14px;
  line-height: 1.5;
  color: #d5d5da;
  margin: 0;
  flex: 1;
}
:root:not([data-theme="dark"]) .ex-step-d3-text {
  color: #3a3a41;
}

/* ── Mistakes caution header + D3 dont icons ─────────── */
.ex-caution-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.ex-caution-title {
  font-size: 12px;
  font-weight: 700;
  color: #ff9f0a;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ex-mistakes-d3 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ex-mistake-d3 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ex-mistake-d3-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,159,10,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ex-mistake-d3-text {
  font-size: 14px;
  line-height: 1.5;
  color: #d5d5da;
  margin: 0;
  flex: 1;
}
:root:not([data-theme="dark"]) .ex-mistake-d3-text {
  color: #3a3a41;
}

/* ── Safety — teal shield, grey card (no tinted bg) ─── */
.ex-safety-new {
  display: flex;
  gap: 12px;
}
.ex-safety-new-icon {
  flex-shrink: 0;
  color: #37c9b0;
  margin-top: 2px;
}
.ex-safety-new-head {
  font-size: 12px;
  font-weight: 700;
  color: #37c9b0;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.ex-safety-new-text {
  font-size: 14px;
  line-height: 1.5;
  color: #d5d5da;
  margin: 0;
}
:root:not([data-theme="dark"]) .ex-safety-new-text {
  color: #3a3a41;
}

/* ── Related exercises row ───────────────────────────── */
.ex-rel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  text-decoration: none;
  color: inherit;
}
.ex-rel-row + .ex-rel-row {
  border-top: 1px solid var(--border);
}
.ex-rel-thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Фото нет (кардио — их там нет в принципе): белая плашка на тёмной теме
   читалась как дыра в списке. */
.ex-rel-thumb--empty {
  background: var(--bg-muted);
}
.ex-rel-thumb--empty img {
  display: none;
}
:root:not([data-theme="dark"]) .ex-rel-thumb {
  border: 1px solid #ececec;
}
.ex-rel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ex-rel-name {
  font-size: 14.5px;
  font-weight: 600;
  flex: 1;
  line-height: 1.35;
  color: var(--text-primary);
}
.ex-rel-chev {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* sec-label for new sections (same as muscle-map-title style) */
.ex-sec-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════
   CHAT PAGE
   ══════════════════════════════════════════════════════════ */
/* Chat: full-height flex column inside the app frame.
   Экран чата — единственный, который не листается: шапка и строка ввода стоят,
   ездит только лента сообщений. Поэтому отступ под статус-бар приходится
   держать здесь руками — общий padding контейнера тут обнулён, и без этой
   строки в установленном приложении шапка уезжала под часы. */
main.container-chat {
  /* Снизу — место под прибитый таббар: строка ввода последняя в колонке и без
     этого отступа уходит прямо под меню. */
  padding: env(safe-area-inset-top, 0px) 0 calc(var(--nav-h) + var(--safe-bottom));
  /* Высоту даёт .app-frame--locked; здесь только заполнить её остаток над
     таббаром. min-height: 0 обязателен — иначе флекс-элемент не ужмётся ниже
     своего содержимого, и лента из полусотни сообщений растянет экран. */
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-avatar {
  width: 40px; height: 40px;
  border-radius: 20px;
  background: linear-gradient(145deg, #34D399, #16A34A);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(22,163,74,.32);
}

.chat-header-text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-header-text h1 { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--text-primary); }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.online-label { font-size: 12px; color: var(--green); font-weight: 500; }

/* Dark: #16A34A on #0D1117 = ~3.8:1; use green-ring for AA compliance */
[data-theme="dark"] .online-dot { background: var(--green-ring); }
[data-theme="dark"] .online-label { color: var(--green-ring); }

.chat-messages {
  flex: 1;
  min-height: 0;   /* иначе флекс-элемент не ужмётся ниже своего содержимого и не начнёт скроллиться */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--page-pad);
}
.chat-messages::-webkit-scrollbar { display: none; }

.nb-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

/* Разметка внутри ответа ассистента (renderMarkdown в app.js).
   Абзацы и пункты стоят отдельными строками — ответ читается как ответ, а не
   как один длинный кусок текста. Первому блоку отступ сверху не нужен: его уже
   задаёт padding пузыря. */
.nb-md-p, .nb-md-h, .nb-md-list { margin-top: 9px; }
.nb-bubble > :first-child,
.nb-chat-reply > :first-child { margin-top: 0; }
.nb-md-h { font-weight: 700; }
.nb-md-list { padding-left: 20px; }
.nb-md-list li { margin-top: 4px; }
.nb-md-list li::marker { color: var(--text-muted); }
.nb-bubble code, .nb-chat-reply code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--bg-muted);
  border-radius: 5px;
  padding: 1px 5px;
}
[data-theme="dark"] .nb-bubble code,
[data-theme="dark"] .nb-chat-reply code { background: rgba(255,255,255,.08); }

/* Card-bearing bubbles (meal/workout/photo drafts): full width, no letter-breaking */
.nb-bubble--card {
  max-width: 100%;
  width: 100%;
  word-break: normal;
}

.nb-bubble--user {
  align-self: flex-end;
  background: var(--green-light);
  color: var(--text-primary);
  border-bottom-right-radius: 4px;
}

[data-theme="dark"] .nb-bubble--user {
  background: rgba(34,197,94,0.22);
  border: 1px solid rgba(34,197,94,.30);
  color: var(--text-primary);
}

/* Voice message bubble (макет 5A): play + waveform + duration, transcript below */
.nb-voice{min-width:216px}
.nb-voice-row{display:flex;align-items:center;gap:9px}
.nb-voice-play{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--green);border:0;color:#08110b;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nb-voice-play svg{display:block}
.nb-voice-play .ic-pause{display:none}
.nb-voice.playing .ic-play{display:none}
.nb-voice.playing .ic-pause{display:block}
.nb-voice-wave{flex:1;display:flex;align-items:center;gap:2px;height:26px;min-width:110px}
.nb-voice-wave i{flex:1;min-width:2px;max-width:3px;border-radius:2px;background:rgba(34,197,94,.38)}
.nb-voice-wave i.played{background:var(--green)}
.nb-voice-dur{flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.nb-voice-tr{margin-top:7px;padding-top:6px;border-top:1px solid rgba(34,197,94,.25);font-size:13.5px;line-height:1.45;color:var(--text-secondary)}
/* Голосовое уже в чате, расшифровка ещё едет (avg 19.08) */
.nb-voice--pending .nb-voice-tr{color:var(--text-muted);font-style:italic;animation:nb-voice-pulse 1.4s ease-in-out infinite}
.nb-voice--failed .nb-voice-tr{color:#FCA5A5;font-style:italic}
@keyframes nb-voice-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.nb-voice--pending .nb-voice-tr{animation:none}}

.nb-bubble--bot {
  align-self: flex-start;
  background: var(--bg-card);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border);
}

/* Typing indicator dots */
.nb-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}

.nb-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: nb-dot 1.2s infinite ease-in-out;
}

.nb-typing span:nth-child(2) { animation-delay: .2s; }
.nb-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes nb-dot {
  0%, 80%, 100% { transform: scale(.7); opacity: .5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Quick-reply chips */
.quick-chips {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  flex-shrink: 0;
  /* Right-edge fade mask — indicates horizontal scroll */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}
.quick-chips::-webkit-scrollbar { display: none; }

/* Chat input row */
.chat-input-row {
  display: flex;
  align-items: flex-end;        /* buttons hug the bottom as the textarea grows */
  gap: 8px;
  /* Высоту таббара не резервируем: он sticky и стоит в потоке ПОД чатом,
     а не поверх строки ввода. */
  padding: 10px var(--page-pad);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}

.chat-attach-btn {
  width: 42px; height: 42px;
  border-radius: 21px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-muted);
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  min-height: 42px;
  max-height: 124px;          /* ~5 lines, then scrolls — Telegram-style */
  border: 1.5px solid var(--border-strong);
  border-radius: 21px;
  padding: 8px 16px;
  font-size: 16px;            /* >= 16px stops iOS focus auto-zoom */
  line-height: 1.4;
  font-family: var(--font);
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  resize: none;              /* JS auto-grows height; no manual drag handle */
  overflow-y: auto;
  transition: border-color var(--t-fast);
}
.chat-input:focus { border-color: var(--green-ring); }

.chat-send-btn {
  width: 42px; height: 42px;
  border-radius: 21px;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: opacity .15s;
}
@media (hover: hover) {
  .chat-send-btn:hover { opacity: .9; }
}
.chat-send-btn:active { opacity: .9; }

.chat-send-btn svg { color: #fff; }

.chat-mic-btn {
  width: 42px; height: 42px;
  border-radius: 21px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-muted);
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.chat-mic-btn:active { color: var(--green); background: var(--green-light); }
[data-theme="dark"] .chat-mic-btn:active { background: var(--accent-dim); }
.chat-mic-btn[hidden], .chat-send-btn[hidden] { display: none; }

/* Inline meal/workout card in chat */
.nb-bubble--bot .meal-card,
.nb-bubble--bot .workout-card { width: 100%; }

/* NL-delete confirm card (chat) */
.nb-delete-card {
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-radius: 12px;
  background: var(--surface);
}
.nb-delete-line { font-size: 14px; margin-bottom: 10px; }
.nb-delete-name { font-weight: 600; color: var(--text); }
.nb-delete-meta { color: var(--text-muted); }
.nb-delete-actions { display: flex; gap: 8px; }
.nb-delete-confirm,
.nb-delete-cancel {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
}
.nb-delete-confirm { background: var(--danger); color: #fff; border-color: var(--danger); }
.nb-delete-confirm:disabled,
.nb-delete-cancel:disabled { opacity: .5; cursor: default; }
.nb-delete-cancel { background: transparent; color: var(--text-secondary); }

/* ══════════════════════════════════════════════════════════
   PROGRESS SCREEN — segment switch, period, charts, accordion
   ══════════════════════════════════════════════════════════ */

.progress-header {
  padding: 16px var(--page-pad) 4px;
}

/* К2 (avg 18.08): компактный колокольчик уведомлений в верхней строке экрана */
.nb-bell {
  position: relative;
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--text-secondary);
}
.nb-bell:active { background: var(--bg-card); }
.nb-bell-dot {
  position: absolute;
  top: 4px; right: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid var(--bg);
}
.progress-header--bell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.nb-bell--chat { margin-left: auto; }
.recipes-h1-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 16px;
}
.recipes-h1-row .recipes-h1 { margin: 0; }

/* Уведомления — экран /notifications */
.ntf-card {
  margin: 8px var(--page-pad) 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px;
}
.ntf-list { display: grid; gap: 4px; }
.ntf-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
}
.ntf-row + .ntf-row { border-top: 1px solid var(--border); }
.ntf-ic {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.ntf-ic--green { background: rgba(34, 197, 94, .13); }
.ntf-ic--blue { background: rgba(56, 189, 248, .13); }
.ntf-ic--violet { background: rgba(167, 139, 250, .13); }
.ntf-ic--amber { background: rgba(255, 159, 10, .13); }
.ntf-body { flex: 1; min-width: 0; }
.ntf-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.ntf-text { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }

.progress-header h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text-primary);
}

/* «Прогресс | Профиль» (avg 03.09, запасной макет реструктуризации): заголовок
   раздела один — «Прогресс», под ним две пилюли-вкладки; активная — заливка
   без рамки. Прежний вариант (активный заголовок крупный + зелёная черта)
   читался как два слоя, наложенных друг на друга. Нарочно НЕ segment-switch:
   капсульный тумблер остаётся внутриэкранным («Питание · Спорт»). */
.pr-title { flex: 1; min-width: 0; margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.3px; color: var(--text-primary); }
.pr-htabs { display: flex; gap: 8px; padding: 0 0 12px; }
.container.flush .pr-htabs { padding-left: var(--page-pad); padding-right: var(--page-pad); }
.pr-htab {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.pr-htab--on { background: var(--bg-muted); border-color: transparent; color: var(--text-primary); }

/* Top stat cards (weight · streak) */
.stat-cards { display: flex; gap: 10px; padding: 4px var(--page-pad) 14px; }
.stat-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
}
.stat-card-icon { color: var(--text-muted); margin-bottom: 8px; line-height: 1; }
.stat-card-icon.flame { color: #F59E0B; }
.stat-card-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-card-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.stat-card-lbl { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
/* Weight delta direction colors (progress screen) */
.delta-down { color: var(--green); font-weight: 600; }
.delta-up   { color: var(--danger); font-weight: 600; }

/* Segment switch (Питание · Спорт) */
.segment-switch {
  display: flex;
  background: var(--bg-muted);
  border-radius: 10px;
  padding: 3px;
  margin: 0 var(--page-pad) 16px;
}

.seg-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--t-fast);
}

.seg-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Pane visibility */
.seg-pane { display: none; padding: 0 var(--page-pad); }
.seg-pane.active { display: block; }
/* stat-cards inside a pane already get 16px from .seg-pane — don't double-inset */
.seg-pane .stat-cards { padding-left: 0; padding-right: 0; }

/* Period toggle — segment-track (matches Питание · Спорт) */
.period-row {
  display: flex;
  background: var(--bg-muted);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 14px;
}

.period-btn {
  flex: 1;
  /* 7px давали кнопку в 30px — для пальца мало; 10px поднимают до 36. */
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border: none;
  transition: all var(--t-fast);
}

.period-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Progress pane: chart-card sits inside .seg-pane (already has padding 0 16px),
   so override margin to avoid double horizontal margin */
.seg-pane .chart-card {
  margin: 0 0 12px;
}

/* ── «Неделя в норме» (SSR circles) ─────────────────────────────────────── */
.wir-count { color: var(--green); font-weight: 700; }

/* СП3 (avg 18.08): вес-герой + кольцо недели + горизонтальные нутриенты */
.weight-hero {
  background: linear-gradient(160deg, rgba(56, 189, 248, .10), rgba(56, 189, 248, .02)), var(--bg-card);
  border-color: rgba(56, 189, 248, .28);
}
.wh-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 10px;
}
.wh-num {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.wh-unit { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.wh-delta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.wir-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.wir-ring { flex-shrink: 0; }
.wir-ring-num {
  font-size: 13px;
  font-weight: 800;
  fill: var(--text-primary);
}
.wir-hero-title { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.wir-hero-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.nuh-rows { display: grid; gap: 9px; }
.nuh-row { display: flex; align-items: center; gap: 8px; }
.nuh-letter {
  width: 18px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.nuh-letter--protein { color: #f472b6; }
.nuh-letter--fat { color: #fb923c; }
.nuh-letter--carb { color: #38bdf8; }
.nuh-letter--sugar { color: #ff9f0a; }
.nuh-letter--fiber { color: #2dd4bf; }
.nuh-track {
  flex: 1;
  height: 10px;
  border-radius: 99px;
  background: var(--bg-muted);
  overflow: hidden;
}
.nuh-fill { display: block; height: 100%; border-radius: 99px; }
.nuh-fill--protein { background: linear-gradient(90deg, #db2777, #f472b6); }
.nuh-fill--fat { background: linear-gradient(90deg, #d97706, #fb923c); }
.nuh-fill--carb { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.nuh-fill--sugar { background: linear-gradient(90deg, #b45309, #ff9f0a); }
.nuh-fill--fiber { background: linear-gradient(90deg, #0d9488, #2dd4bf); }
.nuh-val {
  min-width: 74px;
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nuh-val--bad { color: var(--amber, #f59e0b); }
.nuh-hint {
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Компактная шапка Прогресса (A1, avg 19.08): неделя + серия одной карточкой */
.wir-head { padding: 12px 13px; }
.wir-hero--sm { margin-bottom: 0; gap: 11px; }
.wir-hero--sm .wir-hero-title { font-size: 14.5px; }
.wir-hero--sm .wir-hero-sub { font-size: 12px; }
.wir-hero-txt { flex: 1; min-width: 0; }
.wir-streak {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.32);
  color: #FBBF24;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.wir-streak .ic { color: #FBBF24; }
.wir-circles--sm { padding: 10px 0 0; }
.wir-circles--sm .wir-dot { width: 24px; height: 24px; }
.wir-circles--sm .wir-dot--empty,
.wir-circles--sm .wir-dot--future { border-width: 1.5px; }
.wir-circles--sm .wir-label { font-size: 9.5px; }

.wir-circles {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 8px 0 4px;
}
.wir-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}
.wir-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wir-dot--ok    { background: #22C55E; }
.wir-dot--over  { background: rgba(245,158,11,.95); }
.wir-dot--empty { background: transparent; border: 2px solid var(--border-strong); }
.wir-dot--future { background: transparent; border: 2px dashed var(--border-strong); }
.wir-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

/* ── «Путь к цели» (SSR SVG) ────────────────────────────────────────────── */
.gp-eta { color: var(--green); font-weight: 700; }
.gp-svg-wrap { margin: 6px 0 2px; }
.gp-footer {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}
.gp-footer strong { color: var(--text-primary); font-weight: 700; }

/* Accordion (program days) */
.accordion-item {
  border-top: 1px solid var(--border);
}

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

.accordion-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  gap: 8px;
}

.acc-chevron {
  flex-shrink: 0;
  transition: transform var(--t-fast);
  color: var(--text-muted);
}

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

.accordion-body {
  display: none;
  padding-bottom: 12px;
}

.accordion-body.open { display: block; }

.exercise-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.exercise-row:last-child { border-bottom: none; }

/* Drag-and-drop reorder handle + SortableJS states */
.ex-drag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 6px;
  color: var(--green); /* founder pick V3: green bars */
  opacity: 0.8;
  cursor: grab;
  touch-action: none; /* SortableJS owns the touch gesture */
}
.ex-drag:active { cursor: grabbing; }
/* Q11: exercise name text brighter — was inheriting text-primary but with low contrast in dark */
.exercise-row > span:not([class]) { flex: 1; min-width: 0; color: var(--text-primary); font-weight: 500; }
.sortable-ghost { opacity: 0.4; }
/* Grabbed row (founder pick): lifted shadow + green dashed frame + slight tilt,
   animated pick-up so the grab reads as motion, not a style flip */
.sortable-chosen {
  background: rgba(127, 127, 127, 0.08);
  border: 1px dashed var(--green);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transform: rotate(-0.6deg) scale(1.01);
  animation: nb-grab-pop 0.18s ease-out;
}
.sortable-chosen .ex-drag { opacity: 1; }

@keyframes nb-grab-pop {
  from { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sortable-chosen { animation: none; }
}

.ex-sets {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  margin-left: 8px;
}
/* Q10: cardio entry badge — duration in muted text, no sets×reps */
.ex-sets--cardio {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 12px;
}

.program-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

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

.program-name-row .program-name {
  margin-bottom: 0;
  flex: 1;
  margin-bottom: 8px;
}

.program-entry-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  flex-shrink: 0;
  padding: 4px;
  margin-bottom: 4px;
}
@media (hover: hover) {
  .program-entry-nav-link:hover {
    color: var(--accent-color, var(--text-primary));
  }
}

/* Legend for strength chart */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-label {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Empty state in chart card */
.empty-state-text {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  padding: 12px 0;
}

/* ══════════════════════════════════════════════════════════
   TOAST  (rendered by app.js: .nb-toast + .nb-toast--visible)
   Slides in from the TOP; auto-dismissed by JS after 2.5 s.
   ══════════════════════════════════════════════════════════ */
.nb-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-110%);
  background: #111110;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--t-mid), transform var(--t-mid);
  z-index: 300;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  max-width: calc(100vw - 40px);
}

.nb-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.nb-toast--error { background: var(--danger); }
.nb-toast--error svg { display: none; }

.nb-toast-link {
  color: #86efac;
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
}
@media (hover: hover) {
  .nb-toast-link:hover { color: #bbf7d0; opacity: 1; }
}

[data-theme="dark"] .nb-toast { background: #2a2a2a; }

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Recipes ─────────────────────────────────────────────── */
.recipes-entry{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:14px;text-decoration:none;color:inherit}
.recipes-entry-icon{width:42px;height:42px;border-radius:12px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;color:var(--green)}
.recipes-entry-title{font-weight:700;color:var(--text-primary)}
.recipes-entry-meta{font-size:13px;color:var(--text-secondary)}
/* К2а: green-tinted card, photo stack overlapping to the right */
.recipes-entry--promo{background:linear-gradient(160deg,rgba(34,197,94,.10),rgba(34,197,94,.02)),var(--bg-card);border-color:rgba(34,197,94,.25)}
.recipes-entry--promo .recipes-entry-body{flex:1;min-width:0}
.recipes-entry-stack{flex-shrink:0;display:flex}
.recipes-entry-stack img{width:46px;height:46px;border-radius:13px;object-fit:cover;border:2px solid var(--bg-card);margin-left:-14px}
.recipes-entry-stack img:first-child{margin-left:0}

/* Предложение перенести историю: крестик поверх карточки, чтобы отказ был
   на месте, а не «закрыть можно только зайдя в настройки». */
#nb-import-offer { position: relative; }
#nb-import-offer .recipes-entry { padding-right: 46px; }
.nb-offer-x {
  position: absolute;
  /* По центру справа — там же, где у соседней карточки шеврон. В углу крестик
     висел сам по себе: строка внутри отцентрована, а он прижат к верху. */
  top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
}

/* ── Feedback (day page): entry card + sheet ─────────────── */
.feedback-entry{width:100%;text-align:left;font:inherit;cursor:pointer}
.feedback-entry-chevron{margin-left:auto;flex-shrink:0;color:var(--text-secondary)}
.fb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.fb-field{position:relative;margin-bottom:8px}
.fb-field .fb-textarea{display:block;min-height:110px;padding-right:48px;resize:none}
.fb-mic{position:absolute;right:8px;bottom:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--accent-dim);color:var(--green);cursor:pointer}
#feedback-submit:disabled{opacity:.55;cursor:default}

.recipes-home{padding:16px var(--page-pad) 96px}
.recipes-h1{font-size:26px;font-weight:800;margin:8px 0 16px;color:var(--text-primary)}
.recipes-section{margin-bottom:22px}
.recipes-h2{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--text-secondary);margin:0 0 10px}
.recipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.recipe-card{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);border:1px solid var(--border);text-decoration:none;color:inherit}
.recipe-card-img{position:relative;height:104px;background:linear-gradient(135deg,#9cc79f,#5fae74);background-size:cover;background-position:center}
.recipe-card.locked .recipe-card-img{filter:grayscale(.35) brightness(.92)}
.recipe-card-pro{position:absolute;top:8px;left:8px;background:#111;color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:20px}
.recipe-card-fav{position:absolute;top:6px;right:6px;border:none;background:rgba(0,0,0,.35);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.recipe-card-fav.on{color:var(--protein)}
.recipe-card-body{padding:9px 10px}
.recipe-card-title{font-weight:700;font-size:14px;line-height:1.2;color:var(--text-primary)}
.recipe-card-kcal{margin-top:4px;color:var(--green);font-weight:800;font-size:13px}

/* Резерв под таббар — на main.container (см. .ex-detail), свой не нужен. */
/* Крестик прибит к вьюпорту (скроллится документ — absolute уезжал вместе со
   страницей и пропадал при листании), плюс отступ от чёлки: в PWA top:12px
   ставил его под статусбар. */
.recipe-back{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 12px);left:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;z-index:40}
/* Настольная рамка возвращает крестик в absolute — правило в общем блоке
   (min-width: 480px) в секции Main layout. */
.recipe-hero{height:200px;background:linear-gradient(135deg,#9cc79f,#5fae74);background-size:cover;background-position:center}
.recipe-body{padding:var(--page-pad)}
.recipe-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.recipe-title{font-size:22px;font-weight:800;color:var(--text-primary);margin:0}
.recipe-fav{border:none;background:transparent;color:var(--text-muted);cursor:pointer}
.recipe-fav.on{color:var(--protein)}
.recipe-meta{color:var(--text-secondary);font-size:14px;margin-top:8px}
.recipe-macros{color:var(--text-muted);font-size:13px;margin-top:4px;font-weight:600}
.recipe-macros .rm-p{color:var(--protein)}
.recipe-macros .rm-f{color:var(--fat)}
.recipe-macros .rm-c{color:var(--carb)}
[data-theme="dark"] .recipe-macros .rm-p{color:#fb7185}
[data-theme="dark"] .recipe-macros .rm-f{color:#fbbf24}
[data-theme="dark"] .recipe-macros .rm-c{color:#38bdf8}
.recipe-desc{color:var(--text-secondary);line-height:1.5;margin:12px 0}
/* ── Immersive detail (avg 18.08, макет A) ── */
.recipe-hero--imm{position:relative;height:250px}
/* Тёмный градиент в обеих темах: он даёт контраст белому титулу над фото,
   а не сшивает фото с фоном страницы. */
.recipe-hero-fade{position:absolute;inset:auto 0 0;height:72%;background:linear-gradient(transparent,rgba(0,0,0,.45) 45%,rgba(0,0,0,.78));pointer-events:none}
.recipe-fav-wrap{position:absolute;top:12px;right:12px;z-index:2}
.recipe-fav-wrap .recipe-fav{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff}
.recipe-fav-wrap .recipe-fav.on{color:#F472B6}
.recipe-hero-overlay{position:absolute;left:14px;right:14px;bottom:12px}
.recipe-title--over{color:#fff;font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.recipe-hero-chips{display:flex;flex-wrap:wrap;gap:6px}
.rh-chip{font-size:11.5px;font-weight:800;border-radius:8px;padding:4px 8px;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff}
.rh-chip--p{color:#F9A8D4}
.rh-chip--f{color:#FDBA74}
.rh-chip--c{color:#7DD3FC}
.recipe-act-main{flex:1.4}
.recipe-card-block{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:13px 14px;margin-top:12px}
.recipe-block-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 6px}
.ing-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ing-row:last-child{border-bottom:none}
.ing-cb{position:absolute;width:1px;height:1px;opacity:0}
.ing-bx{flex-shrink:0;width:19px;height:19px;border-radius:6px;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:transparent;transition:background var(--t-fast),border-color var(--t-fast)}
.ing-cb:checked ~ .ing-bx{background:var(--green);border-color:var(--green);color:#fff}
.ing-name{font-size:14px;color:var(--text-primary)}
/* checked = в тарелке (обычный вид); СНЯТОЕ гаснет и зачёркивается —
   исключается из записи приёма (avg 18.08) */
.ing-cb:not(:checked) ~ .ing-name{color:var(--text-muted);text-decoration:line-through}
.ing-cb:not(:checked) ~ .ing-g{opacity:.45}
.ing-g{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--text-muted);white-space:nowrap;flex-shrink:0}
/* Cook-mode steps (макет Ш3+Ш1): tap toggles done, time/temp inline chips */
.rs-label{display:flex;align-items:center;gap:8px}
.rs-time,.rs-count{display:inline-flex;align-items:center;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:800;letter-spacing:0;text-transform:none;white-space:nowrap}
.rs-time{background:rgba(255,159,10,.1);border:1px solid rgba(255,159,10,.32);color:#ff9f0a}
.rs-count{margin-left:auto;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.32);color:var(--green)}
.rs-hint{margin:-2px 0 10px;font-size:12px;color:var(--text-secondary)}

/* Г1 (avg 18.08): полноэкранный режим «Готовить» */
.cook-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: var(--green);
  color: #08110b;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
}
.cook-start:active { transform: scale(.98); }
body.cm-open { overflow: hidden; }
.cook-mode {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--page-pad) calc(env(safe-area-inset-bottom, 0px) + 16px);
}
/* display:flex выше перебивает дефолт hidden → невидимый оверлей ловил бы тапы */
.cook-mode[hidden] { display: none; }
.cm-main[hidden], .cm-foot[hidden], .cm-praise[hidden] { display: none; }
.cm-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cm-close {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-secondary);
  cursor: pointer;
}
.cm-prog {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--bg-muted);
  overflow: hidden;
}
.cm-prog i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--green);
  transition: width .25s ease;
}
.cm-count {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cm-main { flex: 1; padding: 18px 2px 8px; overflow-y: auto; }
/* Все шаги одним экраном: активный подсвечен, сделанные гаснут (avg 19.08) */
.cm-steps { display: flex; flex-direction: column; gap: 10px; }
.cm-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: opacity .18s, background .18s, border-color .18s;
}
.cm-step-n {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 800;
  background: var(--bg-muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.cm-step-t { font-size: 15.5px; line-height: 1.45; color: var(--text-secondary); padding-top: 2px; }
.cm-step .rs-chip { font-size: 14px; }
.cm-step--active {
  background: var(--bg-muted);
  border-color: var(--green-ring);
}
.cm-step--active .cm-step-t { color: var(--text-primary); font-weight: 600; }
.cm-step--active .cm-step-n { background: var(--green); color: #08110b; border-color: transparent; }
.cm-step--done { opacity: .4; }
.cm-step--done .cm-step-t { text-decoration: line-through; }
.cm-foot { padding-top: 10px; }
.cm-done {
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: var(--green);
  color: #08110b;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.cm-done:active { transform: scale(.98); }
.cm-praise {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
}
.cm-emoji { font-size: 46px; margin-bottom: 10px; }
.cm-praise-h {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}
.cm-praise-s {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-secondary);
  max-width: 300px;
}
.cm-praise .cm-add { margin-top: 18px; width: 100%; max-width: 320px; }
.cm-just-close {
  margin-top: 10px;
  border: none;
  background: none;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
}
.rstep{display:flex;gap:12px;padding:9px 0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.rstep+.rstep{border-top:1px solid var(--border)}
.rstep-n{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(34,197,94,.08);border:1.5px solid rgba(34,197,94,.4);color:var(--green);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,box-shadow .2s}
.rstep-n svg{display:none}
.rstep-t{margin:3px 0 0;font-size:14px;color:var(--text-secondary);line-height:1.5;transition:opacity .2s}
.rstep.done .rstep-n{background:linear-gradient(135deg,#16a34a,#4ade80);border-color:transparent;color:#08110b;box-shadow:0 0 10px rgba(34,197,94,.35)}
.rstep.done .rstep-n span{display:none}
.rstep.done .rstep-n svg{display:block}
.rstep.done .rstep-t{opacity:.42}
.rs-chip{display:inline-block;font-style:normal;font-size:12.5px;font-weight:700;line-height:1.25;padding:0 6px;border-radius:7px;background:rgba(255,159,10,.12);border:1px solid rgba(255,159,10,.3);color:#ff9f0a;white-space:nowrap}
.rs-chip--t{background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.3);color:#2dd4bf}
.recipe-h2{font-size:15px;font-weight:800;color:var(--text-primary);margin:16px 0 8px}
.recipe-h2-note{font-size:12px;font-weight:500;color:var(--text-muted)}
.recipe-ing{margin:0;padding-left:18px;color:var(--text-primary);line-height:1.9}
.recipe-steps{margin:0;padding-left:18px;color:var(--text-primary);line-height:1.6}
.recipe-steps li{margin-bottom:8px}

.recipe-gate{position:relative;margin-top:8px;min-height:180px}
.recipe-gate-veil{position:absolute;inset:-8px 0 0;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--bg) 60%)}
.recipe-gate-cta{position:relative;text-align:center;padding-top:40px}
.recipe-gate-lock{color:var(--text-muted)}
.recipe-gate-h{font-weight:800;font-size:15px;color:var(--text-primary);margin:6px 0 2px}
.recipe-gate-s{color:var(--text-muted);font-size:12px;margin-bottom:12px}
.recipe-gate-btn{display:inline-block;background:#F59E0B;color:#fff;font-weight:800;padding:12px 22px;border-radius:12px;text-decoration:none;box-shadow:0 4px 14px rgba(245,158,11,.35)}

[data-theme="dark"] .recipe-gate-veil{background:linear-gradient(to bottom,rgba(22,27,34,0),var(--bg) 60%)}
[data-theme="dark"] .recipe-card-pro{background:#000}

/* ── Recipes 2.0: search, rails, filters, badge, CTA ─────────── */
.recipes-search{position:relative;margin:0 0 18px}
.recipes-search input{width:100%;box-sizing:border-box;padding:12px 14px 12px 42px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:16px;-webkit-appearance:none;appearance:none}
.recipes-search input::placeholder{color:var(--text-muted)}
.recipes-search input:focus{outline:none;border-color:var(--green)}
.recipes-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);display:flex;pointer-events:none}

.recipes-section-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px}
.recipes-section-head .recipes-h2{margin:0}
.recipes-seeall{font-size:13px;font-weight:700;color:var(--green);text-decoration:none;white-space:nowrap}

.recipe-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--page-pad);margin:0 calc(-1 * var(--page-pad));padding:2px var(--page-pad) 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.recipe-rail::-webkit-scrollbar{display:none}
.recipe-rail .recipe-card{flex:0 0 auto;width:150px;scroll-snap-align:start}

.recipe-card-badge{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;padding:3px 8px 3px 7px;border-radius:20px;display:flex;align-items:center;gap:5px}
.recipe-card-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--protein)}

.recipes-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.filter-chip{font-size:13px;font-weight:600;padding:7px 13px;border-radius:20px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);text-decoration:none;white-space:nowrap}
.filter-chip.on{background:var(--green);border-color:var(--green);color:#fff}

.recipes-empty{text-align:center;color:var(--text-muted);padding:48px 16px;font-size:15px;line-height:1.5}

.recipes-cta{margin:24px 0 8px;padding:22px 18px;border-radius:18px;text-align:center;background:linear-gradient(135deg,#FFF7ED,#FFEDD5);border:1px solid #FED7AA}
.recipes-cta-h{font-size:18px;font-weight:800;color:#7C2D12;margin:0 0 4px;line-height:1.3}
.recipes-cta-s{font-size:13px;color:#9A3412;margin:0 0 16px;line-height:1.4}
.recipes-cta-btn{display:inline-flex;align-items:center;gap:8px;background:#F59E0B;color:#fff;font-weight:800;font-size:15px;padding:14px 26px;border-radius:14px;text-decoration:none;box-shadow:0 4px 14px rgba(245,158,11,.35)}
[data-theme="dark"] .recipes-cta{background:linear-gradient(135deg,#2a1f12,#34250f);border-color:#7c4a13}
[data-theme="dark"] .recipes-cta-h{color:#fed7aa}
[data-theme="dark"] .recipes-cta-s{color:#fdba74}

.recipe-list{padding:16px var(--page-pad) 24px}
.recipe-list-head{display:flex;align-items:center;gap:10px;margin:4px 0 16px}
.recipe-list-back{color:var(--text-primary);display:flex}
.recipe-list-title{font-size:22px;font-weight:800;color:var(--text-primary)}

/* ── Progression picker (#4) ─────────────────────────────────── */
.prog-select{max-width:55%;font-size:16px;font-weight:700;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:6px 28px 6px 10px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:16px}
.prog-stats{display:flex;gap:10px;margin:12px 0 6px}
.prog-stat{flex:1;background:var(--bg-subtle,rgba(0,0,0,.03));border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.prog-stat-label{display:block;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--text-muted);text-transform:uppercase}
.prog-stat-val{display:block;margin-top:3px;font-size:18px;font-weight:800;color:var(--text-primary)}
.prog-hint{margin-top:8px;font-size:11px;color:var(--text-muted);text-align:center}
[data-theme="dark"] .prog-stat{background:rgba(255,255,255,.04)}

/* ── Import card (#5) ────────────────────────────────────────── */
/* Живёт внутри .settings-card, у которой уже есть боковые 16px. Свои боковые
   отступы складывались с ними — блок стоял уже соседей по настройкам. */
.import-card { padding: 12px 0 14px; }
.import-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px;
  display: flex; align-items: center; gap: 7px; }
.import-title-ic { color: var(--green); flex-shrink: 0; }
.import-file-ic { margin-right: 6px; color: var(--text-secondary); flex-shrink: 0; }
.import-card-desc { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.4; }
.import-file-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Hide the native file input visually — triggered via label */
.import-file-input-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
/* Styled "choose file" label-button */
.import-file-label-btn { flex-shrink: 0; display: inline-flex; align-items: center;
  background: var(--bg-muted); border: 1px solid var(--border); color: var(--text-primary);
  font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); padding: 8px 14px;
  cursor: pointer; white-space: nowrap; user-select: none; }
@media (hover: hover) {
  .import-file-label-btn:hover { background: var(--bg-subtle, rgba(0,0,0,.06)); }
}

/* Filename + check icon shown after selection */
.import-file-name { flex: 1; min-width: 0; font-size: 12px; color: var(--green);
  display: flex; align-items: center; gap: 4px; }
/* Truncate long filenames with an ellipsis instead of breaking mid-word */
.import-file-name #import-file-text { min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.import-check-icon { flex-shrink: 0; color: var(--green); }
.import-file-btn { flex-shrink: 0; background: var(--green); color: #fff; font-size: 13px;
  font-weight: 700; border-radius: var(--radius-sm); padding: 8px 18px; white-space: nowrap; }
.import-file-btn:disabled { opacity: .4; cursor: default; }
/* Loading indicator: hidden until htmx adds .htmx-request during the LLM call */
.import-indicator { display: none; font-size: 13px; color: var(--text-secondary);
  margin: 10px 0 0; }
.import-indicator.htmx-request { display: block; }
.import-result { font-size: 13px; margin: 10px 0 0; padding: 8px 12px;
  border-radius: var(--radius-sm); }
.import-result--ok { background: var(--green-light); color: #166534; }
.import-result--err { background: #FEE2E2; color: #991B1B; }
/* Neutral "processing in background" notice — neither success nor failure */
.import-result--wait { background: #FEF3C7; color: #92400E; }
[data-theme="dark"] .import-result--ok { background: rgba(22,163,74,.15); color: #86efac; }
[data-theme="dark"] .import-result--wait { background: rgba(245,158,11,.12); color: #fcd34d; }

.import-fmt-hint { font-size: 11px; color: var(--text-muted); margin: 8px 0 0; }

/* ── Chat-export "how to" accordion (Task 6 — neural-import) ─────────
   Shared partial (_import_howto.html) included on settings.html and
   onboarding.html. <details>/<summary> gives free collapse (no JS);
   the ChatGPT/Claude tabs are two hidden radios + the CSS below. */
.import-howto {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  margin: 12px 0;
  overflow: hidden;
}
.import-howto-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.import-howto-summary::-webkit-details-marker { display: none; }
.import-howto-summary-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
}
.import-howto-summary-text { flex: 1; min-width: 0; }
.import-howto-summary-text b { display: block; font-size: 13.5px; font-weight: 650; color: var(--text-primary); line-height: 1.3; }
.import-howto-summary-text span { font-size: 11.5px; color: var(--text-muted); }
.import-howto-chev { color: var(--text-muted); font-size: 12px; transition: transform .2s ease; flex-shrink: 0; }
.import-howto[open] .import-howto-chev { transform: rotate(180deg); }

.import-howto-body { padding: 0 14px 14px; }

/* Visually-hidden radios drive the tab toggle via sibling selectors below */
.import-howto-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.import-howto-tabs { display: flex; gap: 8px; margin: 2px 0 12px; }
.import-howto-tab {
  flex: 1;
  text-align: center;
  padding: 9px 8px;
  border-radius: 10px;
  cursor: pointer;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: .15s;
  user-select: none;
}
#import-howto-gpt:checked ~ .import-howto-tabs .import-howto-tab[for="import-howto-gpt"],
#import-howto-claude:checked ~ .import-howto-tabs .import-howto-tab[for="import-howto-claude"] {
  color: var(--text-primary);
  background: var(--accent-dim);
  border-color: rgba(34,197,94,.5);
}

.import-howto-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.import-howto-steps-claude { display: none; }
#import-howto-claude:checked ~ .import-howto-steps-gpt { display: none; }
#import-howto-claude:checked ~ .import-howto-steps-claude { display: flex; }

.import-howto-steps li {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 12px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}
.import-howto-num {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--accent-dim);
  color: var(--green);
  border: 1px solid rgba(34,197,94,.3);
}

.import-howto-privacy {
  background: var(--accent-muted);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.import-howto-privacy b { color: var(--green); font-weight: 600; }

/* ══════════════════════════════════════════════════════════
   ONBOARDING WIZARD
   ══════════════════════════════════════════════════════════ */

/* Outer container: full-height centered column, no bottom nav */
/* ══════════════════════════════════════════════════════════
   ONBOARDING — new card-option style
   ══════════════════════════════════════════════════════════ */
.nb-onboarding {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* ── Step header ────────────────────────────────────────── */
.nb-onb-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 6px;
  flex-shrink: 0;
}

.nb-onb-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--font);
  transition: opacity var(--t-fast);
}
@media (hover: hover) {
  .nb-onb-back:hover { opacity: .8; }
}

.nb-onb-segs {
  display: flex;
  gap: 5px;
  flex: 1;
}

.nb-onb-segs i {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background .25s;
}

.nb-onb-segs i.done {
  background: var(--green-ring);
}

.nb-onb-skip {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 0;
}

/* ── Step body layout ───────────────────────────────────── */
.nb-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: nb-fadein 220ms ease-out;
  overflow-y: auto;
}

.nb-step[hidden] { display: none; }

@keyframes nb-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nb-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nb-step-nav {
  padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 26px);
  flex-shrink: 0;
}

/* ── Step text ──────────────────────────────────────────── */
.nb-onb-stepno {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 14px 24px 0;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nb-onb-q {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.22;
  padding: 6px 24px 4px;
  color: var(--text-primary);
}

.nb-onb-sub {
  font-size: 14.5px;
  color: var(--text-secondary);
  padding: 0 24px;
  line-height: 1.5;
  margin-bottom: 2px;
}

.nb-onb-sublabel {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 22px 24px 0;
}

/* ── Eyebrow / title for plan/guide ───────────────────────*/
.nb-onb-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 26px 24px 0;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nb-onb-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.25;
  color: var(--text-primary);
  padding: 6px 24px 0;
}

.nb-onb-footnote {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 12px 24px 0;
}

/* ── Welcome ring (step 0) ──────────────────────────────── */
.nb-onb-welcome-ring {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.nb-onb-welcome-leaf {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}

.nb-onb-welcome-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 28px 0;
  text-align: center;
}

.nb-onb-welcome-name {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 22px;
}

.nb-onb-welcome-tag {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.5;
}

.nb-onb-welcome-feats {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 24px;
  align-items: flex-start;
  width: 100%;
  max-width: 280px;
}

.nb-onb-welcome-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--text-secondary);
  text-align: left;
}

.nb-onb-welcome-feat-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,.12);
  color: var(--green);
}

/* ── Consent (step 0) ───────────────────────────────────── */
.nb-onb-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 0 4px;
  margin-bottom: 12px;
  cursor: pointer;
}

.nb-onb-consent-cb-wrap {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all var(--t-fast);
}

.nb-onb-consent.on .nb-onb-consent-cb-wrap {
  background: var(--green-ring);
  border-color: var(--green-ring);
  color: #fff;
}

.nb-onb-consent p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  text-align: left;
  margin: 0;
}

.nb-onb-consent a {
  color: var(--green);
  text-decoration: none;
}

/* hidden checkbox backing the consent toggle */
.nb-onb-consent-cb {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ── Card options (goal / sex / neat) ───────────────────── */
.nb-onb-optlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 0;
}

.nb-onb-optlist--tight {
  gap: 8px;
}

.nb-onb-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--text-primary);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.nb-onb-opt--slim {
  padding: 11px 16px;
}

.nb-onb-opt-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}

.nb-onb-opt-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.nb-onb-opt-title {
  font-size: 16px;
  font-weight: 700;
  display: block;
  color: var(--text-primary);
}

.nb-onb-opt-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 1px;
  line-height: 1.35;
  display: block;
}

.nb-onb-opt-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all var(--t-fast);
}

/* selected state */
.nb-onb-opt.active {
  border-color: var(--green-ring);
  background: rgba(34,197,94,.06);
}

.nb-onb-opt.active .nb-onb-opt-icon {
  background: rgba(34,197,94,.14);
  color: var(--green);
}

.nb-onb-opt.active .nb-onb-opt-radio {
  border-color: var(--green-ring);
  /* checkmark painted here so every option gets it, not only ones with an inline svg */
  background: var(--green-ring) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
  color: #fff;
}

/* ── Numeric field with steppers ────────────────────────── */
.nb-onb-numwrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 0;
}

.nb-onb-numfield {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color var(--t-fast);
}

.nb-onb-numfield.focus,
.nb-onb-numfield:focus-within {
  border-color: var(--green-ring);
}

.nb-onb-numfield-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.nb-onb-numfield-val {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  /* allow editing inline */
  border: none;
  background: none;
  width: 80px;
  min-width: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield;
}

.nb-onb-numfield-val::-webkit-inner-spin-button,
.nb-onb-numfield-val::-webkit-outer-spin-button { -webkit-appearance: none; }

/* modern engines: input hugs its value so the unit sits right next to it */
@supports (field-sizing: content) {
  .nb-onb-numfield-val {
    field-sizing: content;
    width: auto;
    min-width: 2ch;
    max-width: 150px;
  }
}

.nb-onb-numfield-val::placeholder { color: var(--text-muted); font-weight: 600; }

.nb-onb-numfield-unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
  flex-shrink: 0;
}

.nb-onb-stepper {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.nb-onb-stepper button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 600;
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity var(--t-fast);
}
@media (hover: hover) {
  .nb-onb-stepper button:hover { opacity: .8; }
}

/* inline field error */
.nb-onb-field-error {
  font-size: 13px;
  color: var(--danger);
  margin-top: 8px;
  line-height: 1.4;
  padding: 0 24px;
}
.nb-onb-field-error[hidden] { display: none; }

/* ── Intensity buttons (training step) ──────────────────── */
.nb-onb-int-row {
  display: flex;
  gap: 8px;
  padding: 10px 20px 0;
}

.nb-onb-intbtn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 14px;
  text-align: center;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.nb-onb-intbtn-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 2px;
}

.nb-onb-intbtn.active {
  border-color: var(--green-ring);
  background: rgba(34,197,94,.06);
}

/* ── Sport chips ────────────────────────────────────────── */
.nb-onb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 18px 20px 0;
}

.nb-onb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.nb-onb-chip svg {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color var(--t-fast);
}

.nb-onb-chip.active {
  border-color: var(--green-ring);
  background: rgba(34,197,94,.08);
}

.nb-onb-chip.active svg {
  color: var(--green);
}

/* ── Allergy free-text (restrictions step) ─────────────── */
.nb-onb-allergy-wrap {
  padding: 14px 20px 0;
}

.nb-onb-allergy-input {
  width: 100%;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  outline: none;
  transition: border-color var(--t-fast);
}

.nb-onb-allergy-input:focus {
  border-color: var(--green-ring);
}

.nb-onb-allergy-input::placeholder {
  color: var(--text-muted);
}

/* ── Navigation buttons ────────────────────────────────── */
.nb-onb-btn-next,
.nb-onb-btn-go,
.nb-guide-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border-radius: 16px;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  box-shadow: 0 8px 24px rgba(22,163,74,.35);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity var(--t-fast);
}

.nb-onb-btn-next:disabled {
  opacity: .4;
  cursor: default;
  box-shadow: none;
}
@media (hover: hover) {
  .nb-onb-btn-next:not(:disabled):hover,
  .nb-onb-btn-go:hover,
  .nb-guide-go:hover { opacity: .9; }
}

/* ghost secondary button (import skip) */
.nb-onb-btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: 16px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  margin-top: 10px;
}

/* ── Loader ──────────────────────────────────────────────── */
#nb-loader {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  animation: nb-fadein 220ms ease-out;
}

#nb-loader[hidden] { display: none; }

.nb-loader-ring {
  display: block;
  animation: nb-spin 1.2s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .nb-loader-ring { animation: none; }
}

.nb-loader-title {
  font-size: 22px;
  font-weight: 700;
  margin-top: 28px;
  text-align: center;
  color: var(--text-primary);
}

.nb-loader-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 8px;
  text-align: center;
  line-height: 1.5;
}

/* ── Plan reveal (step 9) ───────────────────────────────── */
.nb-plan-hero {
  margin: 18px 20px 0;
  border-radius: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 24px 20px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.nb-plan-glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 120%;
  background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(34,197,94,.14), transparent 70%);
  pointer-events: none;
}

.nb-plan-bigring {
  position: relative;
  width: 196px;
  height: 196px;
  margin: 4px auto 0;
}

/* Кольцо прочерчивается на показе экрана — класс вешает app.js, когда шаг уже
   виден: populateReveal отрабатывает ДО advance(), и без этого вся анимация
   проигрывалась бы в скрытой секции. */
.nb-plan-ready #nb-plan-ring-arc {
  transition: stroke-dashoffset 1.25s cubic-bezier(.22,.61,.36,1);
  stroke-dashoffset: 0;
}

.nb-plan-bigring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nb-plan-kcal-num {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nb-plan-kcal-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
}

.nb-plan-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}

.nb-plan-pm {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 12px 8px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* Плитки выезжают по очереди — задержки ниже, в .nb-plan-ready */
  opacity: 0;
}

.nb-plan-pm b {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.nb-plan-pm-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Полоска = доля макроса в калориях дня (Б·4, Ж·9, У·4), а не абстрактная шкала. */
.nb-plan-pm-bar {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin-top: 8px;
  overflow: hidden;
}

.nb-plan-pm-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
}

.nb-plan-strip {
  margin: 12px 20px 0;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 12px 14px;
  text-align: left;
  opacity: 0;
}

.nb-plan-strip[hidden] { display: none; }

.nb-plan-strip p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--text-secondary);
}

.nb-plan-strip b { color: var(--text-primary); font-weight: 700; }

.nb-plan-strip-ic {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-plan-strip-ic--flame { background: rgba(217,119,6,.14); color: #D97706; }
.nb-plan-strip-ic--goal  { background: rgba(34,197,94,.14); color: var(--green); }

/* Появление после того, как экран показан: кольцо → плитки → полосы. */
/* Конечный кадр обязателен: базовая opacity:0 иначе становится to-состоянием
   при fill-mode both, и плитки гаснут ровно там, где должны появиться. */
@keyframes nb-plan-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.nb-plan-ready .nb-plan-pm {
  animation: nb-plan-rise .42s cubic-bezier(.22,.61,.36,1) both;
}
.nb-plan-ready .nb-plan-pm:nth-child(1) { animation-delay: .45s; }
.nb-plan-ready .nb-plan-pm:nth-child(2) { animation-delay: .55s; }
.nb-plan-ready .nb-plan-pm:nth-child(3) { animation-delay: .65s; }

.nb-plan-ready .nb-plan-pm-bar i {
  transition: width .7s cubic-bezier(.22,.61,.36,1) .8s;
}

.nb-plan-ready .nb-plan-strip {
  animation: nb-plan-rise .42s cubic-bezier(.22,.61,.36,1) both;
}
.nb-plan-ready #nb-plan-delta-strip { animation-delay: .8s; }
.nb-plan-ready #nb-plan-eta { animation-delay: .92s; }

@media (prefers-reduced-motion: reduce) {
  .nb-plan-ready #nb-plan-ring-arc,
  .nb-plan-ready .nb-plan-pm-bar i { transition: none; }
  .nb-plan-ready .nb-plan-pm,
  .nb-plan-ready .nb-plan-strip { animation: none; opacity: 1; }
}

.nb-plan-floor-notice {
  margin: 10px 20px 0;
  padding: 10px 12px;
  background: var(--fat-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #92400E;
  line-height: 1.4;
}
.nb-plan-floor-notice[hidden] { display: none; }

/* ── Import step ────────────────────────────────────────── */
#nb-import {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: nb-fadein 220ms ease-out;
}
#nb-import[hidden] { display: none; }

.nb-import-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 6px;
}

.nb-import-card {
  margin: 20px 20px 0;
  border-radius: 20px;
  border: 1.5px dashed var(--border-strong);
  background: var(--bg-card);
  padding: 26px 20px;
  text-align: center;
}

.nb-import-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin: 0 auto;
  background: rgba(34,197,94,.12);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-import-title {
  font-size: 16.5px;
  font-weight: 700;
  margin-top: 14px;
  color: var(--text-primary);
}

.nb-import-sub {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 6px;
}

.nb-import-formats {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.nb-import-msg {
  font-size: 14px;
  color: var(--green);
  text-align: center;
  margin: 14px 20px 0;
  font-weight: 600;
  line-height: 1.5;
}

.nb-import-msg[hidden] { display: none; }

.nb-import-foot {
  padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 26px);
  margin-top: auto;
}

/* ── Guide (2×2 cards) ──────────────────────────────────── */
.nb-guide {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: nb-fadein 220ms ease-out;
}
.nb-guide[hidden] { display: none; }

.nb-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 20px 20px 0;
  flex: 1;
  align-content: start;
}

.nb-guide-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 14px;
}

.nb-guide-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(34,197,94,.12);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-guide-card-title {
  font-size: 14.5px;
  font-weight: 700;
  margin-top: 10px;
  color: var(--text-primary);
}

.nb-guide-card-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 3px;
}

/* «Как пользоваться» в профиле: строка-аккордеон с той же памяткой, что
   раньше показывали один раз в конце анкеты. */
/* Без своих боковых отступов: на профиле их уже даёт main.container, и вместе
   выходило 24px против 12px у соседних блоков — строка стояла уже остальных. */
.howto-block { margin: 14px 0 0; }
.howto-row { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.howto-chev {
  margin-left: auto;
  font-size: 20px;
  color: var(--text-muted);
  transition: transform var(--t-fast);
}
.howto-row--open .howto-chev { transform: rotate(90deg); }
/* Сетка памятки авторская, из анкеты — здесь ей нужны свои отступы */
.howto-grid { padding: 10px 0 0; }

/* ── Dark overrides ─────────────────────────────────────── */
[data-theme="dark"] .nb-plan-floor-notice {
  background: rgba(217,119,6,.18);
  color: #fbbf24;
}
[data-theme="dark"] .nb-onb-opt.active {
  background: rgba(34,197,94,.10);
}
[data-theme="dark"] .nb-onb-chip.active {
  background: rgba(34,197,94,.12);
}
[data-theme="dark"] .nb-onb-intbtn.active {
  background: rgba(34,197,94,.10);
}
[data-theme="dark"] .nb-onb-back {
  border-color: var(--border-strong);
}
[data-theme="dark"] .nb-onb-numfield-val {
  color: var(--text-primary);
}
[data-theme="dark"] .import-result--err { background: rgba(239,68,68,.12); color: #fca5a5; }

/* ── Personal food library (/foods) ───────────────────────── */
.foods-page { padding: 16px 16px 100px; }
.foods-tabs { margin-bottom: 16px; }
.food-cards { display: flex; flex-direction: column; gap: 12px; }
.food-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 10px 12px;
}
/* Gradient tile with SVG icon — replaces emoji */
.food-card-tile {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
/* Снимок блюда в той же плитке: градиент под фото не нужен, а обрезка по
   короткой стороне не даёт вытянутым кадрам ломать ряд. */
.food-card-tile--photo { background: var(--bg-muted); object-fit: cover; }
.food-card-body { flex: 1; min-width: 0; }
.food-card-name { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.food-card-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.food-card-gram { color: var(--text-secondary); font-size: 12px; }
.food-card-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.food-card-kcal { font-size: 13px; font-weight: 700; color: var(--green); }
.food-card-actions {
  display: flex; align-items: center; gap: 6px;
}
.food-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  border-radius: 999px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; transition: opacity var(--t-fast);
}
@media (hover: hover) {
  .food-btn:hover { opacity: .85; }
}

.food-btn--log { background: var(--green); color: #fff; }
.food-btn--del {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  padding: 4px 8px; border-radius: var(--radius-sm);
}
@media (hover: hover) {
  .food-btn--del:hover { color: #EF4444; border-color: #EF4444; }
}
.food-btn--del:active { color: #EF4444; border-color: #EF4444; }

.food-log-ack { font-size: 12px; color: var(--green); min-height: 16px; }

/* «К рецептам» link button in empty favorites state */
.btn-link-recipes {
  display: inline-block; margin-top: 12px; padding: 8px 20px;
  background: var(--green); color: #fff; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
@media (hover: hover) {
  .btn-link-recipes:hover { opacity: .85; }
}

/* Sheet — Мои блюда icon */
.icon-myfoods { background: rgba(224,71,107,.12); border: 1.5px solid #E0476B; color: #E0476B; }

/* Meal card — save to library button (in bot/chat sheet context only; day-card uses .mc-btn-save) */
.meal-save:not(.mc-btn) {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; padding: 0; border-radius: var(--radius-sm);
  transition: color var(--t-fast);
}
@media (hover: hover) {
  .meal-save:not(.mc-btn):hover { color: var(--green); }
}

/* Recipe detail action buttons */
.recipe-actions {
  display: flex; gap: 10px; margin: 12px 0 16px; flex-wrap: wrap;
}
/* Два места под подтверждения («записал», «сохранил») держали 18px каждое,
   даже когда пусты, — между кнопками и «Приготовлением» зияла дыра в 44px.
   :empty схлопывает их, а место под текст оставляем на момент появления,
   чтобы строка не прыгала. */
.recipe-ack { font-size: 13px; color: var(--green); margin-bottom: 4px; min-height: 18px; }
.recipe-ack:empty { min-height: 0; margin-bottom: 0; }

/* Inline ack spans (htmx fragments) */
.ack-ok { color: var(--green); font-size: 13px; }
.ack-err { color: #EF4444; font-size: 13px; }

[data-theme="dark"] .food-card { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .food-btn--del { border-color: var(--border); }

/* ── Inline prompt (replaces native prompt(), broken in Telegram WebView) ──── */
.nb-prompt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .45);
}
.nb-prompt-box {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.nb-prompt-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.nb-prompt-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}
.nb-prompt-input:focus {
  border-color: var(--green-ring);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.nb-prompt-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.nb-prompt-btn {
  flex: 1;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.nb-prompt-cancel {
  background: var(--surface);
  color: var(--text-secondary);
}
.nb-prompt-ok {
  background: var(--accent);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════
   PROGRAM PAGE (/program)
   ══════════════════════════════════════════════════════════ */

.program-page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 10px;
}

/* Meta card (days/week, goal, header_note) */
.program-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.program-meta-label {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.program-meta-val {
  font-weight: 600;
  color: var(--text-primary);
}

.program-header-note {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.45;
}

.program-note-ic {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Days card wrapping the accordion fragment */
/* ── Program regen / edit response notice cards ─────────────── */
.program-error-notice,
.program-stale-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 8px 0;
}
.program-error-notice::before,
.program-stale-notice::before {
  content: "⏳";
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}
.program-error-notice {
  background: color-mix(in srgb, var(--bg-card) 90%, var(--amber, #F59E0B) 10%);
  border-color: color-mix(in srgb, var(--border) 60%, var(--amber, #F59E0B) 40%);
  flex-wrap: wrap;
}
/* Retry button inside a failure notice drops to its own full-width row */
/* Loading spinner for regen button */
@keyframes spin-regen {
  to { transform: rotate(360deg); }
}
.regen-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-regen 0.7s linear infinite;
  vertical-align: middle;
}

/* Per-exercise edit affordance (⋯ button, unlocked only) */
.ex-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover) {
  .ex-edit-btn:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
  }
}

/* Bottom action buttons */
/* Inline coach-edit panel (toggled by «Попросить тренера») */
.program-coach-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-bottom: 16px;
}

.program-coach-panel .sheet-title {
  font-size: 16px;
  margin-bottom: 12px;
}

.program-coach-panel .sheet-field { margin-bottom: 12px; }

.sheet-label,
.program-edit-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.sheet-textarea,
.program-edit-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  resize: vertical;
}

.sheet-textarea:focus,
.program-edit-input:focus {
  outline: none;
  border-color: var(--green-ring);
}

/* Manual per-exercise edit sheet */
.program-edit-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.program-edit-action {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
}

.program-edit-action--danger { color: var(--danger); }

.program-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Base style for any .btn-primary — keeps buttons visible without a companion class.
   width:100% intentionally omitted here; compound selectors below add it where needed. */
.btn-primary {
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Пустую отправку кнопка и раньше молча игнорировала — теперь это видно глазами,
   а не выясняется тапом (шит еды, avg 27.08). */
#nb-food-submit:disabled {
  background: var(--bg-muted);
  color: var(--text-muted);
  box-shadow: none;
  cursor: default;
}

.btn-primary.sheet-submit-btn,
.btn-primary.program-edit-submit,
.btn-primary.wp-finish-submit,
.btn-primary.wp-input-submit,
.btn-primary.wp-xs-cardio-btn,
.btn-primary.wp-cele-btn {
  width: 100%;
  margin-top: 4px;
}

.program-inline-error {
  color: var(--danger);
  font-size: 13px;
  margin: 8px 0 0;
  min-height: 0;
}
.program-inline-error:empty { margin: 0; }

.regen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-left: 2px;
}

.regen-badge--empty {
  background: var(--text-muted);
}

/* Empty state on /program */
.program-empty-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 32px 20px;
  text-align: center;
  margin-top: 8px;
}

.program-empty-icon {
  color: var(--text-muted);
  margin-bottom: 12px;
}

.program-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.program-empty-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
}

.program-build-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Q9: green primary button — color+bg were missing, causing dark-on-dark in dark mode */
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.program-build-cta:active { opacity: 0.85; }

/* Empty-state fragment inside _program_body.html */
.program-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.program-build-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── /progress entry-point card ────────────────────────────────────────────── */

.program-entry-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.program-entry-card {
  position: relative;
  transition: box-shadow var(--t-fast);
}
@media (hover: hover) {
  .program-entry-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  }
}

.program-entry-card--empty {
  padding: 16px 14px;
}

/* Compact program card on /sport */
.program-entry-card--compact {
  padding: 12px 14px 8px;
}

.program-compact-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.program-day-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.program-day-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary); /* Q8: override a{color:green} — each row is clean text, not a link blob */
  border-radius: 8px;
  transition: background var(--t-fast);
}
@media (hover: hover) {
  .program-day-link:hover { background: var(--bg-muted); }
}

.program-day-link:active { background: var(--bg-muted); opacity: 0.8; }

.program-day-link:first-child {
  border-top: none;
}

.program-day-link-name {
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 44px;
}

.program-day-link-focus {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-day-link svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.program-entry-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

/* «Что доесть до нормы» — one-tap AI suggestion on the day screen */
.suggest-block { margin: 14px var(--page-pad) 4px; }
.suggest-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px; border: none; border-radius: 14px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
}
.suggest-btn:active { opacity: 0.85; }
.suggest-btn:disabled { opacity: 0.6; cursor: default; }
.suggest-result {
  margin-top: 10px; padding: 14px 16px; border-radius: 14px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border);
  font-size: 14px; line-height: 1.5; white-space: pre-wrap;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.10);
}

/* Water tracking card on the day screen */
.water-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  padding: 10px 14px 12px;
  margin: 10px var(--page-pad) 6px;
}
/* Row 1: icon · label · amount · + button — all in one flex row */
.water-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* legacy .water-row kept for back-compat (bot templates) */
.water-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.water-icon { display: inline-flex; flex-shrink: 0; }
.water-label { font-size: 14px; font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
.water-amount { font-size: 13px; font-weight: 500; color: var(--text-secondary, #6b7280); margin-left: auto; }
.water-add-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: #38BDF8;
  padding: 0;
  margin-left: 6px;
}
.water-add-btn:active { opacity: 0.85; }
/* Row 2: full-width progress bar (legacy — the day screen now shows cups) */
.water-bar-row { margin-top: 8px; }
.water-bar { height: 6px; border-radius: 3px; background: var(--track-bg, #E5E7EB); overflow: hidden; }
.water-bar-fill { height: 100%; background: linear-gradient(90deg, #7DD3FC, #38BDF8); transition: width 0.3s ease; }
/* Cup row (avg 18.08, макет B): каждый стакан — доля нормы, тап = +250 мл */
.water-cups-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.water-cups { display: flex; gap: 6px; flex: 1; }
.water-cup {
  width: 28px; height: 38px; padding: 0;
  border: 2px solid rgba(56, 189, 248, 0.45);
  border-radius: 4px 4px 9px 9px;
  background: transparent;
  position: relative; overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-fast, 0.15s);
}
.water-cup::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.55), rgba(56, 189, 248, 0.9));
  transition: height 0.25s ease;
}
.water-cup.full { border-color: rgba(56, 189, 248, 0.8); }
.water-cup.full::after { height: 72%; }
button.water-cup:active { border-color: #38BDF8; }
.water-more {
  flex-shrink: 0;
  min-width: 40px; height: 30px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer; padding: 0 10px;
  line-height: 1;
}
.water-more:active,
.water-more[aria-expanded="true"] { color: #38BDF8; border-color: rgba(56, 189, 248, 0.5); }
.water-hint { margin-top: 7px; font-size: 11px; color: var(--text-muted); }
/* В2 (avg 18.08): инфо слева, три круглые кнопки-объёма справа */
.water-v2 { display: flex; align-items: center; gap: 12px; }
.water-v2-info { flex: 1; min-width: 0; }
.water-num { font-size: 17px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.water-v2-btns { display: flex; gap: 7px; flex-shrink: 0; }
.water-vol-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(56, 189, 248, 0.08);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  color: #38BDF8; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 9.5px; font-weight: 800; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.water-vol-btn:active { background: rgba(56, 189, 248, 0.2); }

/* ── Macro tiles (avg 18.08, макет Б3) ── */
.macro-row--tiles { display: flex; gap: 8px; padding: 0 var(--page-pad); margin: 10px 0 6px; }
.macro-tile {
  flex: 1; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 11px 11px 10px;
}
.macro-tile-num { font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.macro-tile-num em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.macro-tile-bar {
  height: 6px; border-radius: 999px; background: var(--bg-muted);
  border: 1px solid var(--border); margin: 8px 0 7px; position: relative;
}
.macro-tile-bar i { position: absolute; top: 1px; bottom: 1px; left: 1px; border-radius: 999px; max-width: calc(100% - 2px); }
.mt-p .macro-tile-bar i { background: linear-gradient(90deg, #db2777, #f472b6); box-shadow: 0 0 8px rgba(244, 114, 182, 0.45); }
.mt-f .macro-tile-bar i { background: linear-gradient(90deg, #d97706, #fb923c); box-shadow: 0 0 8px rgba(251, 146, 60, 0.45); }
.mt-c .macro-tile-bar i { background: linear-gradient(90deg, #0284c7, #38bdf8); box-shadow: 0 0 8px rgba(56, 189, 248, 0.45); }
.macro-tile-lbl { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-p .macro-tile-lbl { color: var(--protein, #F472B6); }
.mt-f .macro-tile-lbl { color: #FB923C; }
.mt-c .macro-tile-lbl { color: #38BDF8; }
.macro-tile-lbl--over { color: var(--danger, #ef4444) !important; }

/* ── Balance glow bar + pills (avg 18.08, макет БД1) ── */
.balance-bar--glow { height: 16px; gap: 2px; border-radius: 999px; }
.balance-bar--glow .seg-p { box-shadow: 0 0 10px rgba(244, 114, 182, 0.4); background: linear-gradient(90deg, #db2777, #f472b6); }
.balance-bar--glow .seg-f { box-shadow: 0 0 10px rgba(251, 146, 60, 0.4); background: linear-gradient(90deg, #d97706, #fb923c); }
.balance-bar--glow .seg-c { box-shadow: 0 0 10px rgba(56, 189, 248, 0.4); background: linear-gradient(90deg, #0284c7, #38bdf8); }
.balance-pills { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.balance-pill { border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; }
.balance-pill--p { background: rgba(244, 114, 182, 0.12); color: #F472B6; }
.balance-pill--f { background: rgba(251, 146, 60, 0.12); color: #FB923C; }
.balance-pill--c { background: rgba(56, 189, 248, 0.12); color: #38BDF8; }
.balance-card .balance-tip {
  display: flex; gap: 9px; align-items: flex-start;
  background: rgba(34, 197, 94, 0.07); border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 11px; padding: 9px 11px; margin-top: 11px;
}

/* ── Meal card capsule (avg 18.08, макет П2) ── */
.mc-cap { margin-top: 4px; }
.mc-cap-top { display: flex; align-items: baseline; gap: 8px; }
.mc-cap-num { font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.mc-cap-sub { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.mc-cap-bar {
  height: 10px; border-radius: 999px; background: var(--bg-muted);
  border: 1px solid var(--border); margin-top: 9px; position: relative;
}
.mc-cap-bar i {
  position: absolute; top: 1.5px; bottom: 1.5px; left: 1.5px;
  border-radius: 999px; min-width: 8px; max-width: calc(100% - 3px);
  background: linear-gradient(90deg, #16a34a, #4ade80);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
}
.mc-cap-chips { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.mc-chip { border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; }
.mc-chip--p { background: rgba(244, 114, 182, 0.12); color: #F472B6; }
.mc-chip--f { background: rgba(251, 146, 60, 0.12); color: #FB923C; }
.mc-chip--c { background: rgba(56, 189, 248, 0.12); color: #38BDF8; }

/* ── Profile daily norms — one card (avg 18.08, макет Н1) ── */
.norms-one {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 15px 16px 12px; margin-bottom: 14px;
}
.norms-one-top { display: flex; align-items: center; gap: 14px; }
.norms-one-main { flex: 1; min-width: 0; }
.norms-one-num { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.norms-one-lbl { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.norms-one-donut { position: relative; flex-shrink: 0; width: 64px; height: 64px; }
.norms-seg { fill: none; stroke-width: 8; }
.norms-seg--p { stroke: #F472B6; }
.norms-seg--f { stroke: #FB923C; }
.norms-seg--c { stroke: #38BDF8; }
.norms-one-flame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--flame, #FB923C); }
.norms-one-div { border-top: 1px solid var(--border); margin: 12px 0 4px; }
.norms-mrow { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.norms-mk { flex-shrink: 0; width: 18px; font-size: 12.5px; font-weight: 800; }
.norms-mk--p { color: #F472B6; }
.norms-mk--f { color: #FB923C; }
.norms-mk--c { color: #38BDF8; }
.norms-mcap { flex: 1; height: 10px; border-radius: 999px; background: var(--bg-muted); border: 1px solid var(--border); position: relative; }
.norms-mcap i { position: absolute; top: 1.5px; bottom: 1.5px; left: 1.5px; border-radius: 999px; max-width: calc(100% - 3px); }
.norms-mfill--p { background: linear-gradient(90deg, #db2777, #f472b6); box-shadow: 0 0 8px rgba(244, 114, 182, 0.4); }
.norms-mfill--f { background: linear-gradient(90deg, #d97706, #fb923c); box-shadow: 0 0 8px rgba(251, 146, 60, 0.4); }
.norms-mfill--c { background: linear-gradient(90deg, #0284c7, #38bdf8); box-shadow: 0 0 8px rgba(56, 189, 248, 0.4); }
.norms-mval { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--text-secondary); min-width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.water-chips {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.water-chips[hidden] {
  display: none;
}
.water-chip {
  flex: 1;
  min-width: 60px;
  padding: 6px 8px;
  border: 1px solid #38BDF8;
  border-radius: 8px;
  background: transparent;
  color: #38BDF8;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background var(--t-fast);
}
.water-chip:active { background: rgba(56, 189, 248, 0.15); }

/* Target-change confirm button (calorie norm — primary green, not danger-red) */
.nb-target-confirm { background: var(--green); border-color: var(--green); }

/* Полоска записи по референсу Telegram (скрин avg 19.08): капсула + крупная
   круглая кнопка отправки отдельно справа. */
.nb-rec-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + var(--safe-bottom) + 6px); z-index: 1200;
  display: flex; align-items: center; gap: 10px;
}
.nb-rec-pill {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
.nb-rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #EF4444; flex: none;
  animation: nb-rec-pulse 1s ease-in-out infinite; }
.nb-rec-timer { font-size: 15px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* Живая волна во время записи (avg 19.08) */
.nb-rec-wave {
  flex: 1; min-width: 0; height: 26px;
  display: flex; align-items: center; gap: 2px;
  overflow: hidden;
}
.nb-rec-wave i {
  flex: 1; min-width: 2px; max-width: 3px;
  height: 10%;
  border-radius: 2px;
  background: var(--green);
  opacity: .8;
  transition: height .07s linear;
}
.nb-rec-cancel {
  margin-left: auto; flex-shrink: 0;
  padding: 4px 2px; font-size: 15px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--green); border: none;
}
/* Крупный круг отправки — вне капсулы, как в Telegram */
.nb-rec-done {
  width: 54px; height: 54px; border-radius: 50%; background: var(--green); color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.45); flex-shrink: 0;
}
.nb-rec-done:active { transform: scale(.94); }

/* Sport-profile onboarding form (program.html) — segmented pills, clean inputs */
#sport-onboarding-form { text-align: left; margin-top: 8px; }
.sport-fieldset { border: none; margin: 0 0 16px; padding: 0; }
.sport-legend { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; padding: 0; }
.sport-opt { font-weight: 400; opacity: 0.7; }
.seg-group, .inv-group { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-input, .inv-input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-label, .inv-label {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary);
  font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
}
.seg-label:has(.seg-input:checked),
.inv-label:has(.inv-input:checked) { background: var(--green); border-color: var(--green); color: #fff; }

/* Gym-days counter + day-of-week schedule widget (place=both) */
.sport-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin: 8px 0 0; }
.sport-link {
  display: inline-block; margin-top: 8px; padding: 0; border: none; background: none;
  font-size: 12px; font-weight: 600; color: var(--green); cursor: pointer;
}
.sport-link--muted { color: var(--text-muted); font-weight: 500; }
.sport-readonly { opacity: .5; pointer-events: none; }
.seg-label--gym  { background: var(--green); border-color: var(--green); color: #fff; }
.seg-label--home { background: var(--blue); border-color: var(--blue); color: #fff; }
.sport-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; margin-top: 4px;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary);
  font-size: 16px; font-family: inherit; resize: none;
}
.sport-textarea::placeholder { color: var(--text-secondary); }

/* Program type cards (split_pref) — 2×2 grid */
.split-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.split-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg-card); cursor: pointer; user-select: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.split-card.active {
  border-color: var(--green);
  background: var(--accent-dim);
}
.split-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.split-card-sub   { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.split-card.active .split-card-title { color: var(--green); }

/* Clarify sheet (Task 5) — skippable Q&A before program generation.
   Reuses the pr-more-sheet "instant" sheet idiom (no slide, fixed position)
   already established by the dots menu and text-edit sheets on this page.
   Base .bottom-sheet always sets visibility:hidden (meant for the sliding
   .nb-sheet--open sheets) and .pr-more-sheet never overrides it back — an
   existing gap that leaves #pr-more-sheet/#pr-text-edit-sheet invisible even
   once un-hidden (flagged separately, out of scope here). Not repeating it. */
#clarify-sheet { visibility: visible; }
#clarify-sheet .sheet-title { margin-bottom: 4px; }
.clarify-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 16px; }
#clarify-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid);
}
#clarify-backdrop.nb-overlay--visible { opacity: 1; pointer-events: all; }
.clarify-skip-btn {
  display: block; width: 100%; margin-top: 8px;
  padding: 10px 20px; border: none; background: none;
  color: var(--text-secondary); font-size: 14px; font-weight: 600;
  text-align: center; cursor: pointer;
}

/* ── sport.html page ─────────────────────────────────────────── */
/* Chart-cards and sport-specific elements are direct children of the flush container
   (no wrapper pane), so we add horizontal margin here to match the 16px content gutter
   used by stat-cards, progress-header, and seg-pane on the same pages. */
.container.flush > .chart-card { margin: 0 var(--page-pad) 12px; }
/* program page: non-chart-card elements need the same horizontal gutter */
.container.flush > .program-page-header,
.container.flush > .program-empty-card,
.container.flush > .program-coach-panel { margin-left: var(--page-pad); margin-right: var(--page-pad); }
/* wave 5 program redesign — new classes need the same gutter */
/* Экран дня программы тоже во flush-контейнере (active="sport"), где боковых
   полей нет. Отрицательный отступ героя, рассчитанный на обычный контейнер,
   выносил его на 12px за оба края, а карточки статов и список упражнений
   упирались в кромку — при том что кнопка снизу уже была отбита на 12px. */
.container.flush > .pd-hero { margin-left: 0; margin-right: 0; }
.container.flush > .pd-stats,
.container.flush > .pd-ex-list {
  margin-left: var(--page-pad);
  margin-right: var(--page-pad);
}

.container.flush > .pr-page-header,
.container.flush > .pr-hero,
.container.flush > .pr-facts,
.container.flush > .pr-days-rail,
.container.flush > .pr-today-badge,
.container.flush > .pr-cta-btn,
.container.flush > .pr-more-sheet,
.container.flush > .program-coach-panel { margin-left: var(--page-pad); margin-right: var(--page-pad); }
.program-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.program-cta-btn:active { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════════════
   PROGRAM PAGE REDESIGN (wave 5)
   ══════════════════════════════════════════════════════════════════════ */

/* Header row */
.pr-page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 10px;
}
.pr-back-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--text-secondary); background: none; border: none;
  flex-shrink: 0; padding: 0; cursor: pointer;
  transition: background var(--t-fast);
}
@media (hover: hover) {
  .pr-back-btn:hover { background: var(--bg-muted); }
}

.pr-page-title {
  font-size: 18px; font-weight: 700;
  color: var(--text-primary); margin: 0; flex: 1;
}
.pr-more-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--text-secondary); background: var(--bg-muted);
  border: 1px solid var(--border); flex-shrink: 0; cursor: pointer;
  transition: background var(--t-fast);
}
@media (hover: hover) {
  .pr-more-btn:hover { background: var(--bg-card); }
}

/* Hero collage card */
.pr-hero {
  position: relative; margin: 4px 0 0;
  border-radius: 20px; overflow: hidden;
  height: 154px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; color: #fff;
}
.pr-hero-collage {
  position: absolute; inset: 0;
  display: flex; overflow: hidden;
}
.pr-hero-collage img {
  flex: 1; min-width: 0; height: 100%;
  object-fit: cover; opacity: .30; filter: saturate(.4);
}
.pr-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.60) 0%, rgba(0,0,0,.08) 60%);
}
.pr-hero-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 11.5px; font-weight: 800;
  background: rgba(255,255,255,.90); color: #111;
  border-radius: 999px; padding: 4px 11px;
}
.pr-hero-body { position: relative; }
.pr-hero-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.pr-hero-sub { font-size: 12.5px; opacity: .85; margin-top: 3px; }

/* Facts 2×2 grid */
/* Цель профиля сменилась после сборки программы — предупреждение под hero.
   Тон и рамка как у .program-error-notice (amber на bg-card), геометрия как у
   соседей по экрану (radius 14, без отрицательных полей). */
.pr-goal-stale {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 90%, var(--amber, #F59E0B) 10%);
  border: 1px solid color-mix(in srgb, var(--border) 60%, var(--amber, #F59E0B) 40%);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.pr-facts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-top: 12px;
}
.pr-fact {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.pr-fact-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}
.pr-fact-label.c-blue   { color: #3b82f6; }
.pr-fact-label.c-green  { color: var(--green-ring, #22C55E); }
.pr-fact-label.c-amber  { color: #f59e0b; }
.pr-fact-label.c-violet { color: #a78bfa; }
.pr-fact-val {
  font-size: 20px; font-weight: 800;
  letter-spacing: -.01em; color: var(--text-primary);
  line-height: 1.1;
}
.pr-fact-val--sm { font-size: 15px; }
.pr-fact-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }

/* Days carousel */
.pr-days-rail {
  display: flex; gap: 10px;
  padding: 14px 0 4px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pr-days-rail::-webkit-scrollbar { display: none; }
.pr-dayc {
  position: relative; flex: 0 0 128px; height: 148px;
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 11px; color: #fff; text-decoration: none;
  cursor: pointer; transition: transform 0.15s;
}
.pr-dayc:active { transform: scale(.97); }
.pr-dayc img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .30; filter: saturate(.4);
}
.pr-dayc-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62), transparent 60%);
}
.pr-dayc-body { position: relative; }
.pr-dayc-num {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; opacity: .8;
}
.pr-dayc-name {
  font-size: 13px; font-weight: 800; line-height: 1.2;
  margin-top: 2px;
}
.pr-dayc-count { font-size: 11px; opacity: .75; margin-top: 2px; }

/* Day-location badge — gym/home/cardio pill, shared by the day-cards rail
   and the day-detail header (spec 2026-08-16 gym+home hybrid, Task 6). */
.day-loc-badge {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; border-radius: 999px; padding: 3px 9px;
}
.pr-dayc .day-loc-badge {
  position: absolute; top: 11px; right: 11px; z-index: 1;
}
.day-loc-badge--gym    { background: var(--accent-dim); color: var(--accent); }
.day-loc-badge--home   { background: var(--blue-dim);   color: var(--blue); }
.day-loc-badge--cardio { background: var(--amber-dim);  color: var(--amber); }

/* "Today by plan" badge */
.pr-today-badge {
  display: flex; align-items: center; gap: 7px;
  margin: 4px 0 0;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.pr-today-badge[hidden] { display: none; }
.pr-today-badge svg { color: var(--green, #22C55E); flex-shrink: 0; }

/* CTA button */
.pr-cta-btn {
  display: flex; align-items: center; justify-content: center;
  margin: 14px 0 0; height: 54px; border-radius: 16px;
  font-size: 16.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  box-shadow: 0 8px 24px rgba(22,163,74,.30);
  text-decoration: none; border: none; cursor: pointer;
  transition: opacity var(--t-fast);
}
.pr-cta-btn:active { opacity: 0.85; }

/* Dots menu bottom-sheet items — fixed so it overlays regardless of scroll */
.pr-more-sheet {
  position: fixed !important;
  transform: translateY(0) !important; /* override bottom-sheet default off-screen */
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 20px);
}
/* Backdrop for the dots sheet — fixed overlay */
#pr-more-backdrop {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid);
}
#pr-more-backdrop.nb-overlay--visible {
  opacity: 1; pointer-events: all;
}
.pr-sheet-items { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.pr-sheet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 4px; font-size: 15.5px; font-weight: 600;
  color: var(--text-primary); background: none; border: none;
  border-radius: var(--radius-md); cursor: pointer; text-align: left;
  transition: background var(--t-fast);
}
@media (hover: hover) {
  .pr-sheet-item:hover { background: var(--bg-muted); }
}
.pr-sheet-item:active { background: var(--bg-muted); }

.pr-sheet-item:disabled { opacity: .45; cursor: not-allowed; }
.pr-sheet-ic {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-muted); color: var(--text-secondary);
  flex-shrink: 0;
}

/* ── Program Day screen (/program/day/{n}) ───────────────────────────── */
.pd-hero {
  position: relative; height: 170px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px; color: #fff;
  /* negative margin to bleed to page edges */
  margin: 0 calc(-1 * var(--page-pad, 16px));
}
.pd-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .32; filter: saturate(.4);
}
.pd-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,17,23,.90) 0%, rgba(0,0,0,.14) 55%);
}
.pd-hero-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.pd-back-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.38); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.pd-hero-body { position: relative; }
.pd-hero-label {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; opacity: .8;
}
.pd-hero-title {
  font-size: 24px; font-weight: 800;
  letter-spacing: -.02em; margin-top: 3px; line-height: 1.2;
}

/* Stats triple */
.pd-stats {
  display: flex; gap: 10px; margin: 14px 0 0;
}
.pd-stat {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 11px 12px;
}
.pd-stat-val {
  font-size: 18px; font-weight: 800;
  letter-spacing: -.01em; color: var(--text-primary);
}
.pd-stat-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  margin-top: 2px;
}

/* Exercise list */
.pd-ex-list {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.pd-ex-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  color: var(--text-primary); text-decoration: none;
  transition: background var(--t-fast);
}
.pd-ex-row + .pd-ex-row { border-top: 1px solid var(--border); }
@media (hover: hover) {
  .pd-ex-row--link:hover { background: var(--bg-muted); }
}

.pd-ex-row--link:active { background: var(--bg-muted); opacity: .8; }
.pd-ex-thumb {
  width: 46px; height: 46px; border-radius: 12px;
  overflow: hidden; flex-shrink: 0;
  background: var(--bg-muted);
}
.pd-ex-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.pd-ex-thumb--fallback { background: var(--bg-muted); }
.pd-ex-thumb-fallback {
  width: 100%; height: 100%;
  background: var(--bg-muted);
}
.pd-ex-info { flex: 1; min-width: 0; }
.pd-ex-name {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-ex-plan {
  font-size: 12.5px; color: var(--text-muted); margin-top: 1px;
}
.pd-ex-chev {
  color: var(--text-muted); flex-shrink: 0;
}

/* Day CTA extra top margin */
.pd-cta-btn { margin-top: 16px; margin-bottom: 24px; }

/* ── workout player (/workout/live) ─────────────────────────────────── */
/* Снизу ничего не резервируем — это делает main.container (см. .ex-detail). */
.wp-page { padding-top: 10px; }
/* Плеер живёт в main.container.flush — без боковых полей. Для выбора дня и
   списка упражнений это значило, что заголовок, «Завершить» и карточки
   упирались в кромку экрана, тогда как весь остальной интерфейс держит
   отступ. Экран самого упражнения исключён намеренно: его шапка спозиционирована
   отдельно, а ряды подходов обязаны идти во всю ширину — иначе сломается
   свайп, который уводит ряд влево. */
.wp-page:not(.wp-page--exercise) {
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
.wp-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.wp-back { color: var(--text-secondary); display: flex; padding: 4px; }
.wp-elapsed { display: flex; align-items: center; gap: 6px; margin-left: auto;
  color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: 15px; }
.wp-elapsed[hidden] { display: none; }
.wp-finish { border: 1px solid var(--border-strong); background: none; color: var(--text-primary);
  border-radius: var(--radius-md); padding: 8px 14px; font-size: 14px; font-weight: 600; }
.wp-title { font-size: 22px; font-weight: 700; margin: 8px 0 16px; }

/* Exercise-screen header mode: TC-style ← title ⋯ in a single row.
   The h1#wp-title is a DOM sibling of .wp-header; we pull it into the header
   row visually via absolute positioning on the page container. */
.wp-page--exercise {
  position: relative; /* positioning context for absolute title */
}
.wp-page--exercise .wp-header {
  height: 52px;
  margin-bottom: 0;
  /* back arrow on left, ex-menu button on right; title overlaid between them */
}
/* Title: overlaid on the header row, centered between the two 48px buttons.
   top: 10px = .wp-page padding-top, so it aligns with the header. */
.wp-page--exercise > .wp-title {
  position: absolute;
  top: 10px;
  left: 48px;
  right: 48px;
  height: 52px;
  line-height: 52px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  pointer-events: none;
  z-index: 2;
}

.wp-day-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.wp-day-card { position: relative; text-align: left; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-card); }
/* Кнопка лежит вне .wp-day-list, поэтому колоночный flex её не растягивает —
   без width она сжималась по тексту и стояла уже карточек дней. */
.wp-day-card--empty { border-style: dashed; background: none; box-shadow: none;
  margin-top: 10px; width: 100%; }
.wp-day-name { font-weight: 700; font-size: 16px; color: var(--text-primary); }
.wp-day-focus { color: var(--text-secondary); font-size: 14px; }
.wp-day-meta { color: var(--text-muted); font-size: 13px; }
.wp-day-badge { position: absolute; top: 12px; right: 12px; background: var(--accent-dim);
  color: var(--accent); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.wp-empty-hint { color: var(--text-secondary); font-size: 14px; margin: 4px 0 12px; }

.wp-ex-name { font-weight: 600; font-size: 16px; }
.wp-menu-btn { background: none; border: none; color: var(--text-muted); padding: 4px; display: flex; }
.wp-restore { background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 4px 10px; font-size: 13px; color: var(--text-secondary); }

.wp-set-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.wp-num { width: 76px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg); color: var(--text-primary);
  font-size: 16px; text-align: center; }

.wp-superset { border: 1.5px solid var(--carb); border-radius: var(--radius-card);
  padding: 8px; margin-bottom: 10px; }
.wp-superset-label { color: var(--carb); font-size: 13px; font-weight: 700; padding: 2px 6px 8px; }

/* ── Muscle groups card (TC-style carded block at top of list) ────────── */
.wp-groups-card { background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 10px 14px 8px;
  box-shadow: var(--shadow-card); margin-bottom: 12px; }
.wp-groups-label { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5; }
.wp-groups-name { color: var(--accent); font-weight: 600; }
.wp-groups-sep { color: var(--text-muted); }

/* ── Muscle strip (tiles row inside the groups card) ──────────────────── */
.wp-strip { display: flex; gap: 8px; align-items: center; padding: 2px 0 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wp-strip::-webkit-scrollbar { display: none; }
.wp-strip-item { flex: none; }
/* Tile containers in the strip need zone-var scope */
.wp-strip-item .mm-body,
.wp-strip-item .mm-body * {
  --zone-primary: #DC2626; --zone-secondary: #E25C92;
}
[data-theme="dark"] .wp-strip-item .mm-body,
[data-theme="dark"] .wp-strip-item .mm-body * {
  --zone-primary: #EF4444; --zone-secondary: #F6A6C1;
}

/* ── Exercise row (TC list layout) ───────────────────────────────────── */
.wp-ex-row { display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 12px 12px; margin-bottom: 8px;
  box-shadow: var(--shadow-card); cursor: pointer; }
.wp-ex-row--skipped { opacity: .55; display: flex; align-items: center; gap: 10px;
  padding: 12px 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); margin-bottom: 8px; }
/* Tile: 64×64 container — grown from 44px for TC photo parity */
.wp-ex-tile { width: 64px; height: 64px; flex: none; display: flex;
  align-items: center; justify-content: center;
  border-radius: 14px; overflow: hidden; background: var(--bg-muted);
  text-decoration: none; color: var(--text-muted); }
.wp-ex-tile--fallback { background: var(--bg-muted); }
/* Photo tile: white bg so exercise photos (white-bg JPEGs) blend on dark */
.wp-ex-tile--photo { background: #fff; border: 1px solid var(--border-strong); }
.wp-ex-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zone vars scoped to tiles so render_body paths pick up the right colors */
.wp-ex-tile .mm-body,
.wp-ex-tile .mm-body * {
  --zone-primary: #DC2626; --zone-secondary: #E25C92;
}
[data-theme="dark"] .wp-ex-tile .mm-body,
[data-theme="dark"] .wp-ex-tile .mm-body * {
  --zone-primary: #EF4444; --zone-secondary: #F6A6C1;
}
/* Middle: name + meta */
.wp-ex-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wp-ex-meta { font-size: 13px; color: var(--text-muted); }
.wp-ex-meta--live { color: var(--accent); font-weight: 600; }
/* Right: ring + ⋯ button */
.wp-ex-right { display: flex; align-items: center; gap: 4px; flex: none; }
/* Progress ring */
.wp-ring { display: block; }
.wp-ring--full circle { stroke: var(--accent); }

.wp-add-btn { width: 100%; border: 1px dashed var(--border-strong); background: none;
  color: var(--text-secondary); border-radius: var(--radius-card); padding: 13px;
  font-size: 15px; margin-top: 2px; }

.wp-rest { position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px); z-index: 80;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: 0 6px 24px rgba(0,0,0,.16);
  padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.wp-rest[hidden] { display: none; }
/* Same display-beats-hidden trap as .wp-rest — [hidden] overrides above. */
.wp-continue-banner[hidden] { display: none; }
.wp-rest-info { display: flex; flex-direction: column; }
.wp-rest-label { font-size: 12px; color: var(--text-muted); }
.wp-rest-time { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wp-rest-track { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-muted); overflow: hidden; }
.wp-rest-fill { height: 100%; background: var(--accent); border-radius: 3px;
  transition: width 400ms linear; }
.wp-rest-skip { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 14px; }

.wp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity var(--t-mid); }
.wp-backdrop--visible { opacity: 1; pointer-events: all; }
.wp-sheet { position: fixed; bottom: var(--kb, 0px); left: 0; right: 0; z-index: 210;
  background: var(--bg-card); border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(var(--safe-bottom) + 28px);
  transform: translateY(100%);
  visibility: hidden; /* см. .bottom-sheet: закрытый шит торчит в standalone-полосе */
  transition: transform var(--t-slow), visibility 0s var(--t-slow);
  max-height: 86vh; overflow-y: auto; }
.wp-sheet--open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-slow), visibility 0s;
}
.wp-sheet--tall { max-height: 92vh; }

.wp-continue-banner { display: flex; align-items: center; gap: 10px;
  background: var(--accent-dim); color: var(--accent); font-weight: 600;
  border-radius: var(--radius-card); padding: 13px 16px; margin-bottom: 12px;
  text-decoration: none; font-size: 15px; }

.wp-menu-item { display: block; width: 100%; text-align: left; background: none;
  border: none; border-bottom: 1px solid var(--border); padding: 14px 4px;
  font-size: 16px; color: var(--text-primary); }
.wp-menu-item:last-child { border-bottom: none; }
.wp-menu-item--danger { color: var(--danger); }
.wp-input-form { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.wp-text-input { padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg); color: var(--text-primary); font-size: 16px; }
.wp-catalog-link { color: var(--accent); font-size: 14px; text-align: center; }
.wp-rpe-hint { color: var(--text-muted); font-size: 13px; margin: -4px 0 10px; }
.wp-rpe-option { display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 13px 4px; font-size: 16px; color: var(--text-primary); }
.wp-rpe-option--active { background: var(--accent-muted); border-radius: var(--radius-sm); }
.wp-rpe-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.wp-rpe-num { font-weight: 700; width: 24px; font-variant-numeric: tabular-nums; }
.wp-rpe-label { color: var(--text-secondary); }

.wp-cele-body { display: flex; justify-content: center; margin: 8px 0 4px;
  /* render_body paths reference the zone vars, which are scoped to
     .muscle-map-wrap elsewhere — redeclare for the celebration sheet */
  --zone-primary: #DC2626; --zone-secondary: #E25C92; }
[data-theme="dark"] .wp-cele-body { --zone-primary: #EF4444; --zone-secondary: #F6A6C1; }
.wp-cele-first { text-align: center; color: var(--text-secondary); font-size: 13px;
  margin: 2px 0 10px; }
.wp-cele-title { font-size: 21px; font-weight: 700; text-align: center; margin: 6px 0 2px; }
.wp-cele-stats { text-align: center; color: var(--text-secondary); font-size: 14px; margin-bottom: 14px; }
.wp-pr { background: var(--accent-dim); border-radius: var(--radius-card);
  padding: 14px 16px; margin-bottom: 10px; text-align: center; }
.wp-pr-name { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 2px; }
.wp-pr-val { font-size: 19px; font-weight: 800; color: var(--accent); overflow-wrap: break-word; }
.wp-pr-delta { font-size: 14px; font-weight: 700; margin-left: 4px; }
.wp-pr-pop { animation: wpPop 500ms cubic-bezier(.32,.72,0,1) both; }
@keyframes wpPop { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wp-pr-pop { animation: none; } }
.wp-cele-eq { text-align: center; color: var(--text-secondary); font-size: 14px; margin: 4px 0; }
.wp-cele-streak { text-align: center; color: var(--text-muted); font-size: 13px; margin: 2px 0 12px; }
.wp-cele-btn { display: block; text-align: center; margin-top: 12px; }
.wp-cele-done { display: block; text-align: center; color: var(--text-secondary);
  font-size: 14px; margin-top: 12px; text-decoration: none; }
.wp-finish-cancel { width: 100%; background: none; border: none; color: var(--danger);
  font-size: 14px; padding: 12px; margin-top: 4px; }
.wp-finish-submit, .wp-finish-back { width: 100%; margin-top: 10px; }
#wp-finish-summary .wp-sum-row { display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
#wp-finish-summary .wp-sum-total { padding: 10px 0 0; color: var(--text-secondary); font-size: 14px; }

/* ── Per-exercise screen (R4-T1: TC-style hero, header, stats, rows) ─── */

/* Hero: два фото рядом. Высота идёт от их собственной пропорции (снимки
   справочника — 3:2), поэтому карточка не выше картинок: при фиксированной
   высоте и object-fit: contain сверху и снизу оставались широкие пустые
   поля, а на белом фоне они в тёмной теме читались как засвеченный блок. */
.wp-xs-hero-card { margin: 6px 14px 4px; border-radius: 16px;
  overflow: hidden; background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center; }
.wp-xs-hero-link { display: flex; width: 100%; text-decoration: none;
  gap: 7px; padding: 0; }
.wp-xs-hero-img { flex: 1; width: 50%; aspect-ratio: 3 / 2; height: auto;
  object-fit: cover; background: var(--bg-muted); display: block; }

/* Silhouette card header — centered muscle illustration (slug-less fallback) */
.wp-xs-tile-card { display: flex; justify-content: center; align-items: center;
  margin-bottom: 20px; }
.wp-xs-tile-inner { display: flex; justify-content: center; align-items: center;
  width: 96px; height: 96px; border-radius: 16px;
  background: var(--bg-muted); overflow: hidden; text-decoration: none;
  /* render_body fills reference the zone vars — redeclare for this scope
     (same trap as .wp-cele-body / .wp-ex-tile) */
  --zone-primary: #DC2626; --zone-secondary: #E25C92; }
[data-theme="dark"] .wp-xs-tile-inner { --zone-primary: #EF4444; --zone-secondary: #F6A6C1; }
.wp-xs-tile-inner .mm-body { width: 80px; height: 80px; }
.wp-xs-tile-inner svg { width: 80px; height: 80px; }

/* Stats row: icons + rest indicator on right */
.wp-xs-stats-row { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px; padding: 6px 14px; }
.wp-xs-stats { font-size: 13px; color: var(--text-secondary); flex: 1;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums; }
/* Rest indicator button */
.wp-xs-rest-btn { background: none; border: none; display: flex; align-items: center;
  gap: 5px; color: var(--text-secondary); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  font-variant-numeric: tabular-nums; padding: 4px 0; }
/* Note pencil button in stats row — 44px tap target, grey icon */
.wp-xs-note-btn { background: none; border: none; display: flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; cursor: pointer;
  color: var(--text-secondary); padding: 0; flex: none; line-height: 0; }
/* Note text line under stats row, above set rows (B2) — single line, ellipsis */
.wp-xs-note-under { display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-secondary); padding: 0 2px 10px;
  cursor: pointer; overflow: hidden; }
.wp-xs-note-under-icon { flex: none; line-height: 0; color: var(--text-muted); }
.wp-xs-note-under-text { overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; }

.wp-xs-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }

/* Swipe-to-delete container */
.wp-xs-set-wrap { display: flex; flex-direction: column; position: relative; overflow: hidden; }

/* Row base — TC grid: [num col][centered cluster][check col].
   minmax(0, 1fr), а не 1fr: у 1fr автоминимум равен min-content, и середина
   (два числа по 31px с подписями) распирала сетку шире экрана — кружок галочки
   уезжал за правый край и обрезался (поймано на айфоне 12.08; замер: строка
   422px при экране 393). Числа при этом ужимаются сами — см. clamp ниже. */
.wp-xs-set-row { display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center; min-height: 64px; padding: 6px 12px 0;
  position: relative; z-index: 1;
  /* page bg: rows sit flush on the screen (approved mockup), must stay opaque
     so the swipe-delete pill stays hidden until the row slides */
  background: var(--bg); will-change: transform; }

/* Delete button (swipe reveal) — TC style: dark red rounded pill with trash icon */
.wp-xs-delete { position: absolute; top: 10px; bottom: 4px; right: 12px;
  width: 92px; border-radius: 14px;
  background: #3b1622; color: #ff5c7a;
  border: none; font-size: 15px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 6px; white-space: nowrap;
  z-index: 0; visibility: hidden; }
.wp-xs-delete svg { stroke: #ff5c7a; }
.wp-xs-set-wrap--open .wp-xs-delete { visibility: visible; }
/* Swipe offset matches delete button reveal — done/extra wrap rows slide left */
.wp-xs-set-wrap--open .wp-xs-set-row { transform: translateX(-104px); }

/* Num circle — sits in the left 56px column */
.wp-xs-num { width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 15px; font-weight: 600;
  flex: none; margin-left: 6px; }
.wp-xs-num--done { background: #232326; color: #fff; }
.wp-xs-num--pending { background: none; border: 2px solid var(--border-strong);
  color: var(--text-muted); }

/* Middle cluster — centered flex container holding val/lbl/×/val/lbl */
.wp-xs-vals { display: flex; align-items: baseline; justify-content: center;
  gap: 8px; font-variant-numeric: tabular-nums; min-width: 0; }

/* Big value — reps / weight number. Размер по ширине экрана: на 375–420 полный
   31px не оставлял места галочке справа. */
.wp-xs-val { font-size: clamp(25px, 6.6vw, 31px); font-weight: 700; color: var(--text-primary);
  line-height: 1; letter-spacing: -0.01em; }

/* Inline number input styled exactly like .wp-xs-val so done and pending rows align */
.wp-xs-inp { font-size: clamp(25px, 6.6vw, 31px); font-weight: 700; color: var(--text-primary);
  line-height: 1; letter-spacing: -0.01em; width: 4ch; min-width: 0;
  background: transparent; border: none; border-radius: 0; outline: none;
  padding: 0; text-align: right; -moz-appearance: textfield;
  font-family: inherit; }
.wp-xs-inp::-webkit-inner-spin-button,
.wp-xs-inp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wp-xs-inp:focus { border-bottom: 2px solid var(--accent); }
.wp-xs-inp::placeholder { color: var(--text-muted); }

/* Small label — «повт» / «кг» */
.wp-xs-lbl { font-size: 13px; color: var(--text-muted); font-weight: 400; }

/* Separator × — slightly larger, centered vertically with align-self */
.wp-xs-sep { font-size: 17px; color: var(--text-muted); font-weight: 400;
  align-self: center; padding: 0 4px; }

/* Check circle — right 56px column, pushed to end */
.wp-xs-check { width: 44px; height: 44px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; flex: none; cursor: pointer;
  border: 2px solid transparent; background: none; justify-self: end; }
/* Done sets: filled green */
.wp-xs-check--done { background: #30d158; border-color: #30d158; color: #fff; }
/* Last done set: outlined green (check must stay visible on light bg too) */
.wp-xs-check--last { background: transparent; border: 2px solid #30d158;
  color: var(--text-primary); }
/* Active pending row (first): dark bg, lighter stroke */
.wp-xs-check--active { background: #2a2a2e; border-color: #2a2a2e; color: #8e8e93; }
/* Future pending rows: muted ring */
.wp-xs-check--future { background: transparent; border-color: var(--border-strong);
  color: var(--text-muted); }

/* Done row modifier classes */
.wp-xs-set-row--done { opacity: 1; }
.wp-xs-set-row--last { opacity: 1; }

/* Active row — full opacity, primary text */
.wp-xs-set-row--active { opacity: 1; }
.wp-xs-set-row--active .wp-xs-num--pending { border-color: var(--text-primary);
  color: var(--text-primary); }
.wp-xs-set-row--active .wp-xs-inp { color: var(--text-primary); }
.wp-xs-set-row--active .wp-xs-lbl { color: var(--text-secondary); }
.wp-xs-set-row--active .wp-xs-sep { color: var(--text-secondary); }

/* Future rows — dimmed per mockup */
.wp-xs-set-row--future { opacity: 0.38; }

/* RPE flame badge — TC style: pill with connector tick */
.wp-xs-flame-wrap { margin: 0 0 2px 28px; display: flex; flex-direction: column;
  align-items: flex-start; }
.wp-xs-flame-tick { width: 2px; height: 7px; background: #3a3a3e;
  margin-left: 12px; border-radius: 1px; }
.wp-xs-flame { display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer; border: none; font-family: inherit; }
/* Green: rpe 5–7 */
.wp-xs-flame--green { background: rgba(48,209,88,.13); color: #30d158; }
.wp-xs-flame--green svg { stroke: #30d158; fill: rgba(48,209,88,.35); }
/* Orange: rpe 8–10 */
.wp-xs-flame--orange { background: rgba(255,159,10,.14); color: #ff9f0a; }
.wp-xs-flame--orange svg { stroke: #ff9f0a; fill: rgba(255,159,10,.35); }
/* No RPE */
.wp-xs-flame--none { background: #1b1b1e; color: #6e6e73; }
.wp-xs-flame--none svg { stroke: #6e6e73; fill: none; }
.wp-xs-flame-icon { display: flex; align-items: center; }
.wp-xs-flame-val { font-weight: 700; }

/* Bottom button pair — TC style */
/* Поля по бокам — как у героя выше: без них пара кнопок упиралась в кромку. */
.wp-xs-btns { display: flex; gap: 10px; padding: 14px 14px 18px; }
/* Gradient "add set" pill */
.wp-btn-gradient { height: 52px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(100deg,#35d05e 0%,#c9ee3b 52%,#35d05e 100%);
  color: #0a0a0a; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; }
.wp-xs-btn-add { flex: 1.2; }
/* Dark "complete all" pill */
.wp-btn-dark-green { height: 52px; border-radius: 999px; border: none; cursor: pointer;
  background: #1c1c1e; color: #30d158; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; }
[data-theme="light"] .wp-btn-dark-green { background: #e8e8ed; color: #1da84d; }
.wp-xs-btn-all { flex: 1; }

/* Cardio variants */
.wp-xs-cardio-done { font-size: 16px; color: var(--accent); padding: 12px 0; }
.wp-xs-cardio-btn { flex: 1; }

/* prefers-reduced-motion: swipe still works, just no transition */
@media (prefers-reduced-motion: reduce) {
  .wp-xs-set-row { transition: none !important; }
}

/* R3-B2: settings sheet rows */
.wp-settings-list { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.wp-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-primary, #111);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
}
.wp-settings-row:active { background: var(--surface-2, #f3f4f6); }
.wp-settings-row--active { font-weight: 600; }
.wp-settings-row--active .ic { color: var(--accent, #3b82f6); }

/* R5-T2: note sheet form (note row moved to B2 pencil in stats row; see .wp-xs-note-btn/.wp-xs-note-under) */
.wp-note-form { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.wp-note-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border, rgba(255,255,255,.15));
  background: var(--surface-alt, #2c2c2e);
  color: var(--text-primary, #fff);
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
[data-theme="light"] .wp-note-textarea { background: #f2f2f7; color: #111; }
.wp-note-save { width: 100%; }
.wp-note-clear { width: 100%; }
/* display-beats-hidden guard: btn-secondary has display:flex which overrides hidden */
.wp-note-clear[hidden] { display: none; }

/* R3-B2: header menu button (⋯) */
.wp-header-menu {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-primary, #111);
  display: flex;
  align-items: center;
}
/* display-beats-hidden guard: both wp-header-menu buttons use the hidden attr */
.wp-header-menu[hidden] { display: none; }
/* Exercise ⋯ button: push to the right side of the header flex row */
#wp-ex-menu-btn { margin-left: auto; }

/* ── Workout card grid (wave 4) ─────────────────────────────────────────── */
.wcard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 16px 20px;
}

.wcard {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 1.12;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wcard:active { opacity: .88; transform: scale(.98); }

/* Muscle-map silhouette fills the old photo's slot. Zone vars are pinned
   (not left to the page theme) — the card's own background is always a
   fixed dark gradient regardless of light/dark theme, so the silhouette
   must read against THAT, not against --bg-card. max-width/max-height (not
   a fixed size) because crop_for_zones() swings the SVG's aspect ratio a
   lot — "lower"/"upper" crops are much wider per unit height than the
   full-body crop — this scales each figure to fit the slot either way. */
.wcard .wc-mm,
.wcard .wc-mm * {
  --muscle-fill: rgba(255,255,255,.16);
  --muscle-stroke: rgba(255,255,255,.24);
  --zone-primary: #fff;
}
.wcard .wc-mm {
  /* The band above the text stack (date · title · one-line names · pills ≈ 92px
     incl. card padding): one figure scaled to the band — never behind the text,
     never under a floating pill (design review 03.09). */
  position: absolute; left: 0; right: 0; top: 0; bottom: 92px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 10px 2px;
}
.wcard .wc-mm .mm-svg {
  width: auto; height: 100%;
  max-width: 72%;
}
.wcard .wc-mm .mm-hi { filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.wcard .wc-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.05) 55%);
}
.wcard .wc-date {
  display: block; margin-bottom: 2px;
  font-size: 11px; font-weight: 700; opacity: .8; letter-spacing: .01em;
}
.wcard .wc-body { position: relative; }
.wcard .wc-title { font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.wcard .wc-sub {
  font-size: 11.5px; opacity: .85; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wcard .wc-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wcard .wc-ton,
.wcard .wc-pr {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 800;
  border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.wcard .wc-ton { background: rgba(34,197,94,.25); border: 1px solid rgba(34,197,94,.6); }
.wcard .wc-pr { background: rgba(245,158,11,.35); border: 1px solid rgba(245,158,11,.7); }

/* gradient classes */
.grad-back      { background: linear-gradient(150deg, #2d1b69, #4c1d95); }
.grad-chest     { background: linear-gradient(150deg, #14335f, #1d4ed8); }
.grad-legs      { background: linear-gradient(150deg, #14532d, #15803d); }
.grad-full      { background: linear-gradient(150deg, #5f1420, #b91c1c); }
.grad-shoulders { background: linear-gradient(150deg, #7c2d12, #c2410c); }
.grad-arms      { background: linear-gradient(150deg, #164e63, #0e7490); }
.grad-core      { background: linear-gradient(150deg, #3b0764, #6d28d9); }
.grad-other     { background: linear-gradient(150deg, #1f2430, #2b3242); }

/* ── Workout detail screen (wave 4) ─────────────────────────────────────── */
.dxh {
  position: relative; height: 200px;
  /* flex-end, не space-between: ряд кнопок теперь вне потока (fixed/absolute),
     и space-between поднимал бы дату с названием к верхней кромке. */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; color: #fff;
}
.dxh img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .38; filter: saturate(.45);
}
.dxh .wc-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,17,23,.92) 0%, rgba(0,0,0,.15) 55%);
}
/* Стрелка «назад» и меню прибиты к вьюпорту: absolute уезжал со страницей при
   листании длинной тренировки. pointer-events: none на ряде — чтобы пустая
   середина не перекрывала тапы по контенту под ней. */
.dxh .dxh-top {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 0; right: 0; padding: 0 16px;
  display: flex; justify-content: space-between;
  z-index: 40; pointer-events: none;
}
.dxh .dxh-top .cbtn { pointer-events: auto; }
/* Настольная рамка возвращает ряд в absolute — правило в общем блоке
   (min-width: 480px) в секции Main layout. */
.cbtn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dxh .dxh-b { position: relative; }
.dxh-date { font-size: 12px; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.dxh-title { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }

/* ── Workout edit screen (avg 18.08: отдельный экран вместо инлайн-полей) ── */
.wed-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  /* Compensate the flush container's safe-area top padding so the bar sits at the very top */
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
  margin: calc(-1 * env(safe-area-inset-top, 0px)) 0 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.wed-cancel { color: var(--text-muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.wed-title { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.wed-done {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--green); font-size: 14px; font-weight: 800;
}
.wed-done:disabled { opacity: 0.5; }
.wed-sub { padding: 10px 16px 0; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
#wed-form { padding: 4px 16px 16px; }
.wed-ex {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px; margin-top: 10px;
}
.wed-ex-head { display: flex; align-items: center; gap: 9px; }
.wed-ex-name {
  flex: 1; min-width: 0;
  background: none; border: none; padding: 2px 0;
  /* 16px minimum: anything smaller makes iOS Safari auto-zoom on focus (баг avg 18.08) */
  font: inherit; font-size: 16px; font-weight: 700; color: var(--text-primary);
}
.wed-ex-name:focus { outline: none; border-bottom: 1.5px solid var(--green); }
.wed-rm-ex, .wed-rm-set {
  flex-shrink: 0; width: 26px; height: 26px;
  border: none; border-radius: 8px; background: var(--bg-muted);
  color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.wed-set { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wed-sn { flex-shrink: 0; width: 18px; font-size: 12px; font-weight: 800; color: var(--text-muted); }
.wed-reps, .wed-w {
  width: 0; flex: 1;
  background: var(--bg-muted); border: 1px solid var(--border-strong);
  border-radius: 9px; padding: 8px; text-align: center;
  /* 16px minimum — iOS auto-zoom guard, как у .wed-ex-name */
  font: inherit; font-size: 16px; color: var(--text-primary);
}
.wed-u { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.wed-add-set {
  margin-top: 10px; border: none; background: none; padding: 0;
  color: var(--green); font-size: 13px; font-weight: 800; cursor: pointer;
}
.wed-add-ex {
  display: block; width: 100%; margin-top: 12px; padding: 12px;
  background: var(--bg-muted); border: 1px dashed var(--border-strong);
  border-radius: 13px; color: var(--text-primary);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.wed-err { margin: 12px 2px 0; font-size: 13px; color: #ef4444; }

.dxstats { display: flex; gap: 10px; padding: 14px 16px 0; }
.dxstats .s {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 12px;
}
.dxstats .sv { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary); }
.dxstats .sl { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: 1px; }

.dxe {
  margin: 10px 16px 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 12px 13px;
}
.dxe .dxe-top { display: flex; align-items: center; gap: 12px; }
.dxe .thumb {
  width: 46px; height: 46px; border-radius: 12px;
  object-fit: cover; flex: 0 0 auto; background: var(--bg-muted);
}
.dxe .thumb-fallback { background: var(--bg-muted); }
.dxe .dxe-thumb-link { display: block; flex: 0 0 auto; }
.dxe .dxe-info { flex: 1; min-width: 0; }
.dxe .dxe-name {
  font-size: 15px; font-weight: 700; line-height: 1.25;
  color: var(--text-primary); text-decoration: none; display: block;
}
@media (hover: hover) {
  .dxe .dxe-name:hover { text-decoration: underline; }
}

.dxe .dxe-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.dxe .dxe-right {
  margin-left: auto; font-size: 12.5px; font-weight: 800;
  color: var(--green); white-space: nowrap;
}

.dxe-sets { margin-top: 9px; }
.dxr { display: flex; align-items: center; gap: 11px; padding: 6px 2px; font-size: 14px; }
.dxr + .dxr { border-top: 1px solid var(--border); }
.dxr .num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-muted); border: 1px solid var(--border);
  font-size: 11px; font-weight: 800; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.dxr .val { font-weight: 800; }
.dxr .val span { color: var(--text-muted); font-weight: 600; font-size: 12.5px; }
.dxr .best-tag {
  margin-left: auto; font-size: 10.5px; font-weight: 800;
  color: #f59e0b; text-transform: uppercase; letter-spacing: .06em;
}

.dx-note {
  margin: 10px 16px 16px;
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg-muted); border-radius: 14px;
  padding: 11px 13px; font-size: 13.5px;
  color: var(--text-secondary); line-height: 1.45;
}
.dx-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--text-muted); }

/* Bottom menu sheet */
.dx-bottom-menu {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--bg-card); border-radius: 20px 20px 0 0;
  padding: 8px 16px max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0,0,0,.25);
}
.dx-bottom-menu-inner { display: flex; flex-direction: column; gap: 4px; }
.dx-menu-item {
  width: 100%; padding: 14px 12px; border-radius: 12px;
  font-size: 16px; font-weight: 600; text-align: left;
  background: none; border: none; cursor: pointer;
  color: var(--text-primary);
}
.dx-menu-item:active { background: var(--bg-muted); }
.dx-menu-item--danger { color: #f85149; }
.dx-menu-item--cancel { color: var(--text-muted); margin-top: 4px; }


/* ── Sport hub wave 7: tabs + hero ──────────────────────────────────────── */

/* Sport panes: flush padding (hero + card grid need full-bleed) */
.sport-pane-flush { padding: 0; }

/* Segment switch on /sport needs explicit side margin — container is flush (zero padding) */
.sport-segs { margin-left: var(--page-pad); margin-right: var(--page-pad); }

/* wcard-grid inside sport pane: already has 16px horizontal padding */
.sport-pane-flush .wcard-grid { padding-top: 4px; }

/* Строка статов под героем Обзора (B3): не карточка, поэтому без фона и рамки —
   отбивает себя только боковым отступом, как соседние блоки flush-панели */
.sport-heroline {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin: -2px var(--page-pad) 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.sport-heroline b {
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* chart-card blocks inside the flush pane (e.g. recovery widget) need explicit
   side margin — the container is padding:0 and these cards have no own margin */
.sport-pane-flush .chart-card { margin: 0 var(--page-pad) 12px; }

/* Hero «Дальше по плану» */
.sport-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 118px;
  margin: 4px 16px 10px;
  border-radius: 18px;
  overflow: hidden;
  padding: 13px;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sport-hero:active { opacity: .9; }
.sport-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .32; filter: saturate(.4);
}
.sport-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.08) 60%);
}
.sport-hero-body { position: relative; padding-right: 92px; }
.sport-hero-cap {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; opacity: .85;
}
.sport-hero-title { font-size: 17px; font-weight: 800; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sport-hero-sub { font-size: 12px; opacity: .85; }
.sport-hero-go {
  position: absolute; right: 12px; bottom: 12px;
  background: #22C55E; color: #fff;
  border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 800;
}
.sport-hero .day-loc-badge {
  position: absolute; top: 11px; right: 11px; z-index: 1;
}

/* Hero CTA when no program */
.sport-hero-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 16px 10px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sport-hero-cta:active { opacity: .85; }
.sport-hero-cta-icon { color: var(--accent); flex: 0 0 auto; }
.sport-hero-cta-title { font-size: 14.5px; font-weight: 700; }
.sport-hero-cta-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sport-hero-cta svg { margin-left: auto; color: var(--text-muted); flex: 0 0 auto; }

/* Proglink cards */
.sport-proglink {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 10px;
  padding: 13px 14px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sport-proglink:active { opacity: .85; }
.sport-proglink-icon { color: var(--accent); flex: 0 0 auto; }
.sport-proglink-title { font-size: 14.5px; font-weight: 700; }
.sport-proglink-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.sport-proglink-chev { margin-left: auto; color: var(--text-muted); flex: 0 0 auto; }

/* Continue banner inside pane */
.sport-pane-flush .wp-continue-banner { margin: 0 16px 12px; }

/* Journal start button */
.sport-journal-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 16px 20px;
  height: 52px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  box-shadow: 0 8px 24px rgba(22,163,74,.35);
  text-decoration: none;
}
.sport-journal-start-btn:active { opacity: .9; }

/* Stats redirect card */
.sport-stats-redirect { text-align: center; padding: 24px 16px; }
.sport-stats-redirect-text {
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.55; margin-bottom: 16px;
}
.sport-stats-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  text-decoration: none;
}
.sport-stats-btn:active { opacity: .9; }


/* ── W9: Sport Progress Cards ───────────────────────────────────────── */

/* Records card rows */
.sp-rec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  text-decoration: none;
  color: var(--text-primary);
}
.sp-rec-row:first-child { border-top: none; }
.sp-rec-row--nolink { cursor: default; }
.sp-rec-row:not(.sp-rec-row--nolink):active { opacity: .75; }
.sp-rec-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-rec-spark { flex: 0 0 70px; }
.sp-rec-val { font-weight: 800; white-space: nowrap; }
.sp-rec-delta { font-size: 11px; font-weight: 800; width: 42px; text-align: right; white-space: nowrap; }
.sp-rec-delta--green { color: #22C55E; }
.sp-rec-delta--muted { color: var(--text-muted); }
.sp-rec-delta--red { color: #F85149; }

/* Muscle volume horizontal bars */
.sp-hbars { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.sp-hbar { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; }
.sp-hbar-name { width: 64px; color: var(--text-secondary); font-size: 12px; }
.sp-hbar-track { flex: 1; height: 12px; border-radius: 6px; background: var(--bg-muted); overflow: hidden; }
.sp-hbar-track i { display: block; height: 100%; border-radius: 6px; }
.sp-hbar-val { width: 30px; text-align: right; color: var(--text-muted); font-size: 11px; }
.sp-hbar-delta { width: 34px; text-align: right; font-size: 10.5px; font-weight: 800; }
.sp-hbar-delta--green { color: #22C55E; }
.sp-hbar-delta--muted { color: var(--text-muted); }
.sp-hbar-delta--red { color: #F85149; }
.sp-lag-note {
  display: flex; gap: 7px; align-items: center;
  margin-top: 9px; font-size: 11px; font-weight: 600;
  color: var(--fat, #D97706);
}

/* Progression: «За период» stat card */
.prog-stat-val--period { color: var(--text-primary); }
.prog-stat-val--pos { color: #22C55E; }
.prog-stat-val--neg { color: #F85149; }

/* ── W9: Exercise detail «Твой прогресс» section ────────────────────── */
.ex-your-progress { padding: 16px; }
.ex-prog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-top: 10px;
}
.ex-prog-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.ex-prog-ww { font-size: 22px; font-weight: 800; }
.ex-prog-delta { font-size: 12px; font-weight: 700; }
.ex-prog-delta--green { color: #22C55E; }
.ex-prog-delta--red { color: #F85149; }
.ex-prog-delta--muted { color: var(--text-muted); }
.ex-prog-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.ex-prog-tog-btn {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
}
.ex-prog-tog-btn.active {
  color: #22C55E;
  border-color: rgba(34,197,94,.5);
  background: rgba(34,197,94,.08);
}
.ex-prog-chart-wrap { position: relative; }
.ex-prog-svg { display: block; overflow: visible; }
.ex-prog-stats {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.ex-prog-stat {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px;
  text-align: center;
}
.ex-prog-stat-val { font-size: 15px; font-weight: 800; }
.ex-prog-stat-lbl { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
[data-theme="dark"] .ex-prog-stat { background: rgba(255,255,255,.04); }

/* ── Program v2: sheet items with subtitles ─────────────────────────── */
.pr-sheet-item-texts { display: flex; flex-direction: column; gap: 2px; }
.pr-sheet-item-title { font-size: 15.5px; font-weight: 600; color: var(--text-primary); }
.pr-sheet-item-sub { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.pr-sheet-item { align-items: flex-start; }
.pr-sheet-item .pr-sheet-ic { margin-top: 2px; }

/* ── Text-edit sheet chip suggestions ──────────────────────────────── */
.pr-edit-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.pr-chip {
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 12px; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.pr-chip:active { background: var(--bg-card); color: var(--text-primary); }
@media (hover: hover) {
  .pr-chip:hover { background: var(--bg-card); color: var(--text-primary); }
}

/* ── Full-screen overlay (loader + result) ──────────────────────────── */
.pr-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg-page, #0d1117);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
/* display:flex above beats the [hidden] attribute — restate it */
.pr-overlay[hidden] { display: none; }
.pr-overlay-body {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; max-width: 340px; width: 100%; text-align: center;
}
.pr-overlay-title {
  font-size: 20px; font-weight: 700; color: var(--text-primary);
  margin: 0;
}
.pr-overlay-sub {
  font-size: 13px; color: var(--text-muted); margin: 0;
}

/* Spinner */
.pr-spinner {
  width: 44px; height: 44px;
  border: 3.5px solid var(--border);
  border-top-color: var(--green, #22c55e);
  border-radius: 50%;
  animation: pr-spin 0.8s linear infinite;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* Animated steps */
.pr-loader-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  align-self: stretch; text-align: left;
}
.pr-step {
  font-size: 13px; color: var(--text-muted);
  padding: 0 4px; transition: color 0.3s;
}
.pr-step--active { color: var(--text-primary); font-weight: 600; }
.pr-step--done { color: var(--c-green, #22c55e); font-weight: 500; }
.pr-step--done::before { content: ""; margin-right: 6px; }

/* Result overlay diff area */
.pr-result-overlay .pr-overlay-body { align-items: stretch; text-align: left; }
.pr-result-overlay .pr-overlay-title { text-align: center; }
.pr-result-diff {
  background: var(--bg-card); border-radius: var(--radius-md);
  padding: 12px 16px; max-height: 40vh; overflow-y: auto;
}
.pr-result-error {
  color: var(--c-red, #ef4444); font-size: 14px;
  background: rgba(239,68,68,.08); border-radius: var(--radius-md);
  padding: 10px 14px; text-align: center;
}
.pr-result-actions {
  display: flex; flex-direction: column; gap: 10px;
}

/* Program diff HTML (rendered by _program_diff.html) — Variant A */

/* Summary pills row */
.pdiff-summary {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; margin-bottom: 12px;
}
.pdiff-pill {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 10px; border-radius: 20px;
}
.pdiff-pill--added  { background: rgba(34,197,94,.15);  color: #22c55e; }
.pdiff-pill--removed { background: rgba(239,68,68,.14);  color: #ef4444; }
.pdiff-pill--replaced { background: rgba(245,158,11,.14); color: #f59e0b; }

/* Day cards */
.pdiff { display: flex; flex-direction: column; gap: 10px; }
.pdiff-card {
  background: var(--card, #1a1f2e);
  border-radius: 16px; border: 1px solid var(--line, rgba(255,255,255,.08));
  overflow: hidden;
}

/* Coloured header strip — gradient fades right to transparent */
.pdiff-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 9px 14px;
  background: linear-gradient(90deg, currentColor 0%, transparent 100%);
  /* Override: each grad-* class sets its own background; we layer a fade on top */
}
/* Re-define grad-* inside pdiff context to fade to transparent */
.pdiff-card-head.grad-back      { background: linear-gradient(90deg,rgba(76,29,149,.55),transparent); }
.pdiff-card-head.grad-chest     { background: linear-gradient(90deg,rgba(29,78,216,.55),transparent); }
.pdiff-card-head.grad-legs      { background: linear-gradient(90deg,rgba(21,128,61,.55),transparent); }
.pdiff-card-head.grad-full      { background: linear-gradient(90deg,rgba(185,28,28,.55),transparent); }
.pdiff-card-head.grad-shoulders { background: linear-gradient(90deg,rgba(194,65,12,.55),transparent); }
.pdiff-card-head.grad-arms      { background: linear-gradient(90deg,rgba(14,116,144,.55),transparent); }
.pdiff-card-head.grad-core      { background: linear-gradient(90deg,rgba(109,40,217,.55),transparent); }
.pdiff-card-head.grad-other     { background: linear-gradient(90deg,rgba(107,114,128,.45),transparent); }

.pdiff-card-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
  color: var(--text-primary, #f0f4ff); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.pdiff-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 600; line-height: 1;
  padding: 3px 8px; border-radius: 20px;
}
.pdiff-badge--new     { background: rgba(139,92,246,.25); color: #a78bfa; }
.pdiff-badge--removed { background: rgba(107,114,128,.25); color: var(--text-muted, #9ca3af); }

/* Exercise rows */
.pdiff-card-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 14px 10px; }
.pdiff-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.4;
}
.pdiff-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.pdiff-icon--added   { background: rgba(34,197,94,.15);  color: #22c55e; }
.pdiff-icon--removed { background: rgba(239,68,68,.14);  color: #ef4444; }
.pdiff-icon--replaced { background: rgba(245,158,11,.14); color: #f59e0b; }
.pdiff-name { color: var(--text-primary, #f0f4ff); }
.pdiff-old  { color: var(--text-muted, #9ca3af); text-decoration: line-through; }
.pdiff-arrow { color: #f59e0b; margin: 0 2px; }
.pdiff-row--unchanged {
  font-size: 12px; color: var(--text-muted, #9ca3af);
  font-style: italic; padding-left: 30px;
}

/* Text-edit sheet — fixed positioning like dots sheet, above overlay */
#pr-text-edit-sheet {
  position: fixed !important;
  transform: translateY(0) !important;
  z-index: 201;
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 20px);
}
#pr-text-edit-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.4);
}

/* ══════════════════════════════════════════════════════════
   WORKOUT ENTRY SHEET
   ══════════════════════════════════════════════════════════ */
.nb-wo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.nb-chip {
  padding: 7px 12px;
  border-radius: 20px;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t-fast);
}
.nb-chip:active {
  background: var(--accent-dim);
  border-color: var(--green);
  color: var(--green);
}
@media (hover: hover) {
  .nb-chip:hover {
    background: var(--accent-dim);
    border-color: var(--green);
    color: var(--green);
  }
}

/* Кнопка диктовки в шите еды (avg 27.08, макет A). Не сплошная зелёная: сплошная
   в шите ровно одна — «Записать», и две одинаковые спорили бы, какую жать. */
.nb-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(34, 197, 94, .42);
  background: var(--accent-dim);
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}
.nb-voice-btn:active { opacity: .7; }
.nb-voice-btn--recording {
  background: #EF4444;
  border-color: #EF4444;
  color: #fff;
  animation: nb-rec-pulse 1s ease-in-out infinite;
}
.nb-voice-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 12px;
  line-height: 1.4;
}

.nb-wo-textarea-wrap {
  position: relative;
  margin-bottom: 12px;
}


.nb-wo-textarea {
  /* block, а не инлайновый по умолчанию: у inline-block под полем оставался
     зазор в 7-8 px под базовую линию, обёртка становилась выше поля, и кнопка
     микрофона (она отмеряется от низа обёртки) садилась прямо на рамку —
     смотрелась сползшей (avg 22.08). */
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 12px 44px 12px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-muted);
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font);
  resize: none;
  line-height: 1.5;
  box-sizing: border-box;
}
.nb-wo-textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--bg-card);
}
.nb-wo-textarea::placeholder { color: var(--text-muted); }

/* Поле под кнопкой голоса — второй способ, а не главный: две строки вместо пяти.
   Правило обязано идти ПОСЛЕ базового: специфичность у них одинаковая. */
.nb-wo-textarea--short { min-height: 62px; padding-right: 12px; }

/* Mic button inside textarea — bottom-right corner */
.nb-wo-mic {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Рамка нужна: в фокусе поле само становится --bg-card, и кнопка без контура
     сливалась с ним — оставался болтаться один значок. */
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-card);
}
@media (hover: hover) {
  .nb-wo-mic:hover { color: var(--green); }
}
.nb-wo-mic:active { color: var(--green); }

.nb-wo-mic--recording {
  background: #EF4444;
  color: #fff;
  animation: nb-rec-pulse 1s ease-in-out infinite;
}

.nb-wo-rec-hint {
  font-size: 13px;
  color: #EF4444;
  text-align: center;
  margin-bottom: 8px;
}

.nb-wo-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   WEIGHT ENTRY SHEET
   ══════════════════════════════════════════════════════════ */
.nb-wt-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 20px;
}

.nb-wt-value {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  line-height: 1;
}

.nb-wt-unit {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-secondary);
}

.nb-wt-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.nb-wt-step {
  flex: 1;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t-fast);
}
.nb-wt-step:active { transform: scale(.96); }
.nb-wt-step--plus {
  color: var(--green);
  border-color: rgba(34,197,94,.30);
  background: var(--accent-dim);
}
@media (hover: hover) {
  .nb-wt-step--plus:hover { background: rgba(34,197,94,.18); }
}
.nb-wt-step--plus:active { background: rgba(34,197,94,.18); }

.nb-wt-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

/* Mic button in weight sheet — standalone square */
.nb-wt-mic {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-muted);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
@media (hover: hover) {
  .nb-wt-mic:hover { color: var(--green); border-color: var(--green); }
}
.nb-wt-mic:active { color: var(--green); border-color: var(--green); }

.nb-wt-mic--recording {
  background: #EF4444;
  border-color: #EF4444;
  color: #fff;
  animation: nb-rec-pulse 1s ease-in-out infinite;
}

.nb-wt-submit {
  flex: 1;
}

.nb-wt-last {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  min-height: 1em;
}

/* New sheets (workout / weight / feedback) pin to the viewport: the base
   .bottom-sheet is position:absolute, so page scroll (e.g. focus-scroll)
   drags "closed" translateY(100%) sheets into the frame. */
#sheet-workout,
#sheet-weight,
#sheet-food,
#feedback-sheet { position: fixed; }

/* My-food card polish: kcal lives in the body, delete pinned to the corner,
   so the name gets the full row width */
/* Крестик стоит в правом верхнем углу поверх карточки, а «Записать» уводим к
   нижнему краю — тогда они не спорят за одну строку и держать под крестик
   пустую колонку в 40px не нужно. Эти 40px забирает название: на 375px оно
   обрезалось («Гречка с гов…»), а ряд макросов переносил «480 г» на вторую
   строку — при пустом месте под кнопкой (avg 28.08). */
.food-card { position: relative; padding: 10px; gap: 10px; }
.food-card-right { align-self: flex-end; }
/* Плитку к верху: у карточки с названием в две строки центрированная плитка
   съезжала к макросам и выглядела приклеенной не к тому. */
.food-card-tile { align-self: flex-start; }
/* Длинное название переносится на вторую строку, а не режется на первой:
   справа под крестиком всё равно пусто, а «Котлета из п…» не блюдо. */
.food-card-name {
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.food-card-kcal { margin-top: 3px; }
.food-card-x {
  position: absolute; top: 8px; right: 8px;
  padding: 5px; border-radius: 50%;
}

/* ── Ring-day calendar strip (Feature 1: Kalo-batch) ─────────────── */

/* Reset link styling so <a class="streak-day"> looks same as <div> */
a.streak-day { text-decoration: none; color: inherit; }

/* Ring wrapper: SVG + centered day number */
.ringday {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.ringday svg {
  /* Rotate so the arc fill starts at 12 o'clock */
  transform: rotate(-90deg);
  display: block;
}

/* Track: faint background circle */
.ringday-track {
  stroke: var(--border-strong);
}
[data-theme="dark"] .ringday-track {
  stroke: rgba(255,255,255,.10);
}

/* Fill arc: green by default, orange for "over" state */
.ringday-fill {
  stroke: var(--green-ring);
}
.streak-day.state-over .ringday-fill {
  stroke: var(--amber, #F59E0B);
}

/* Day number centered inside the ring */
.ringday-num {
  position: absolute;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  pointer-events: none;
  /* counter-rotate so number stays upright */
  /* (svg is rotated -90deg on the parent; number lives outside svg so no rotation needed) */
}

/* Today: outline ring around the .ringday */
.streak-day.today .ringday {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 50%;
}

/* Future: faded opacity, no interaction */
.streak-day.future {
  opacity: .38;
  cursor: default;
}
.streak-day.future .ringday-fill {
  /* No fill for future days — stroke-dasharray="0 97.4" via pct=0 handles this,
     but ensure no stray stroke color bleeds through */
  stroke: transparent;
}

/* ============================================================
   nuw- (nutrient-week) — weekly nutrient bar cards on /progress
   Spec: docs/superpowers/specs/2026-07-10-kalo-batch-design.md §F2
   ============================================================ */
.nuw-section {
  margin-top: 4px;
}
.nuw-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 4px 8px;
}
.nuw-card {
  margin-bottom: 12px;
}
.nuw-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.nuw-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.nuw-card-target {
  font-size: 12px;
  color: var(--text-muted);
}
.nuw-avg-line {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.nuw-avg-line b {
  color: var(--text-primary);
}
.nuw-status--ok  { color: var(--green-ring); }
.nuw-status--bad { color: var(--amber, #F59E0B); }

/* Bars outer container: stacks 86px bar area + labels row */
.nuw-bars-outer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 86px bar zone — position:relative so target line is contained here */
.nuw-bars-area {
  position: relative;
  height: 86px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.nuw-col {
  flex: 1;
  height: 100%;  /* fills 86px */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.nuw-bar {
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 0 0;
  transition: height 400ms ease-out;
  min-height: 0;
}
.nuw-bar--ok    { background: var(--green-ring); }
.nuw-bar--bad   { background: var(--amber, #F59E0B); }
.nuw-bar--today { background: var(--green-ring); opacity: .5; }
.nuw-bar--empty { background: transparent; }

/* Weekday labels row — flex mirrors nuw-bars-area column widths */
.nuw-labels-row {
  display: flex;
  gap: 4px;
}
.nuw-col-label {
  flex: 1;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1;
}

/* Dashed target line — absolutely positioned inside .nuw-bars-area (86px) */
.nuw-target-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--border-strong);
  pointer-events: none;
  /* bottom: X% where X = target/scale_max*100 — correct because nuw-bars-area
     is exactly 86px with no padding, so % maps directly to bar heights. */
}
.nuw-target-line-label {
  position: absolute;
  right: 2px;
  top: -10px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1;
}

/* Light theme overrides — tokens handle most, but ensure orange readable */
:root[data-theme="light"] .nuw-status--bad,
:root:not([data-theme="dark"]) .nuw-status--bad {
  color: #D97706;
}
:root[data-theme="light"] .nuw-bar--bad,
:root:not([data-theme="dark"]) .nuw-bar--bad {
  background: #F59E0B;
}

/* Repeat tile: full-width row (long dynamic label), horizontal layout */
#nb-action-repeat {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}
#nb-action-repeat span { min-width: 0; }
.nb-repeat-label { color: var(--text-secondary); }

/* «Недавнее» — до 3 разных недавних блюд в шите еды, тап логирует снова.
   Та же рамка/радиус, что у textarea и quick-кнопок ниже — иначе читалась бы
   чужой вставкой (правило про соседей по стилю). */
.nb-food-recent { margin: 0 0 12px; }
.nb-food-recent-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  overflow: hidden;
}
.nb-food-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.nb-food-recent-row:last-child { border-bottom: none; }
.nb-food-recent-row:active { background: var(--bg-card); }
.nb-food-recent-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.nb-food-recent-kcal {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Быстрый путь в шите еды: «Мои блюда» (после веера П4, «Повторить» — в
   «Недавнее» выше). Колонка minmax(0,1fr), а не auto: авто-колонка
   растягивалась под неразрывную строку, и кнопка вылезала за край шита (avg 22.08). */
.nb-food-quick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.nb-food-quick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-muted);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nb-food-quick-btn[hidden] { display: none; }
.nb-food-quick-btn svg { flex-shrink: 0; color: var(--text-muted); }
.nb-food-quick-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-food-quick-btn:active { transform: scale(.99); }

/* ── Body measurements «Замеры» (Прогресс) ─────────────────── */
.bm-list { margin: 0 -16px; }
.bm-row { border-bottom: 1px solid var(--border); }
.bm-row:last-child { border-bottom: none; }
.bm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bm-name { flex: 1; min-width: 0; }
.bm-name b { display: block; font-size: 14px; font-weight: 650; }
.bm-ago { font-size: 11.5px; color: var(--text-muted); }
.bm-spark { flex: 0 0 56px; }
.bm-val { text-align: right; font-variant-numeric: tabular-nums; }
.bm-val b { font-size: 16px; font-weight: 800; }
.bm-val small { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.bm-delta { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.bm-delta--good { color: var(--green-ring); }
.bm-chev { flex: 0 0 14px; color: var(--text-muted); transition: transform 0.25s ease; }
.bm-row--open .bm-chev { transform: rotate(180deg); }
.bm-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.bm-row--open .bm-body { max-height: 260px; }
.bm-body-in { padding: 2px 16px 14px; }
.bm-range { display: flex; gap: 6px; margin-bottom: 10px; }
.bm-range-btn {
  border: 1px solid var(--border-strong);
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  /* 4px по вертикали давали кнопку в 25px — палец мимо. Аккордеон при этом
     остаётся в своих 260px: строка диапазонов + график = 221px. */
  padding: 9px 14px;
  border-radius: 99px;
  cursor: pointer;
}
.bm-range-btn--on {
  background: var(--accent-dim, rgba(34, 197, 94, 0.14));
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--green-ring);
}
.bm-chart-box { position: relative; height: 160px; }
.bm-add-btn { width: 100%; margin-top: 12px; }
.bm-fatcard { display: flex; align-items: center; gap: 14px; }
.bm-fatring { flex: 0 0 56px; }
.bm-fat-big { font-size: 18px; font-weight: 800; }
.bm-fat-big .bm-delta { display: inline; margin-left: 4px; }
.bm-fat-cap { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.bm-fat-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
#sheet-measure .bm-sheet-sub { font-size: 12.5px; color: var(--text-muted); margin: -4px 0 12px; }
.bm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.bm-field { min-width: 0; }
.bm-field-lbl {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 4px;
}
.bm-inp {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  min-width: 0;
}
.bm-inp input {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  outline: none;
  padding: 0;
}
.bm-inp span { flex: 0 0 auto; font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.bm-inp:focus-within { border-color: rgba(34, 197, 94, 0.45); }
#sheet-measure .sheet-submit-btn { margin-top: 16px; }
.bm-sheet-hint { font-size: 11.5px; color: var(--text-muted); text-align: center; margin-top: 16px; }
.bm-sheet-err { font-size: 12.5px; color: #f85149; text-align: center; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .bm-body, .bm-chev { transition: none; }
}

/* ── Установленное приложение: таббар и холст одного цвета ─────────────────
   Меню прибито к низу вьюпорта и НИКУДА не сдвигается. Вьюпорт на iOS короче
   экрана (WebKit #254868), поэтому под меню остаётся полоска холста — но её
   цвет теперь совпадает с цветом меню (холст красит скрипт в <head>), и стык
   не виден вовсе. Девять правок до этого двигали меню, пытаясь ту полоску
   схлопнуть; последняя, по разнице screen.height − innerHeight, промахивалась
   в разы: на этом айфоне screen.height отдаёт 912 при экране ~853 (проверено
   по скриншоту: 2560 физических точек при dpr 3), и меню уезжало за экран.
   Здесь ширина полоски не имеет значения — важен только её цвет.

   Меню в установленном приложении непрозрачное, ровно в тот же цвет: под ним
   в этой зоне ничего нет, а полупрозрачность давала третий оттенок на стыке. */
@media (display-mode: standalone) {
  /* Холст = цвет таббара: полосу экрана ниже вьюпорта iOS красит фоном
     КОРНЕВОГО элемента (webkit.org/blog/7929), и она обязана совпадать с меню.
     Медиазапросом, а не скриптом: скрипт судил по своему признаку «установлено»,
     и на телефоне avg тот подводил. */
  html {
    background-color: #FAFAF8;
  }
  html[data-theme="dark"] {
    background-color: #161B22;
  }

  /* ГЛАВНОЕ ПРАВИЛО, ради которого три дня ловили «подложку».

     Вьюпорт в установленном приложении короче экрана РОВНО у непрокручиваемой
     страницы: замер в симуляторе (iPhone 17 Pro, iOS 26.5) — на Питании, где
     контента много, inner=874 при screen=874, а на Спорте и в Чате inner=812.
     Меню прибито к низу вьюпорта, поэтому на коротких экранах оно и вставало
     на 62 px выше кромки экрана, а под ним оставалась полоса.

     Значит чинить надо не меню, а саму страницу: пусть любая прокручивается
     хотя бы на пиксель — тогда iOS отдаёт полный вьюпорт, и меню само стоит по
     нижней кромке экрана. Ни сдвигов по замеру, ни подкрашивания полос. */
  html,
  body {
    height: 100%;
  }
  body {
    min-height: calc(100% + 70px);
  }

  /* Чат был заперт во вьюпорт (`position: fixed; inset: 0`) и потому не
     прокручивался вовсе — из-за этого и получал короткий вьюпорт. Отпускаем:
     обычный блок высотой в экран. Шапку и строку ввода держит раскладка самого
     контейнера чата, а не эта клетка. */
  .app-frame--locked {
    position: static;
    inset: auto;
    height: 100%;
    overflow: visible;
  }

  .bottom-nav {
    background: #FAFAF8;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  [data-theme="dark"] .bottom-nav { background: #161B22; }
}

/* ── Экран распознавания (avg 30.08, вариант Б) ─────────────────────
   Полноэкранный слой поверх всего, а не шит: пока идёт распознавание,
   человек должен видеть снятый кадр, а не строку «Распознаю…». */
.nb-scan {
  /* Выше оверлея сканера штрих-кода (200): «Сфоткать этикетку» открывает этот
     экран, не закрывая сканер, и на равном z-index сканер накрыл бы его. */
  position: fixed; inset: 0; z-index: 260;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  overscroll-behavior: contain;
}
.nb-scan[hidden] { display: none; }
.nb-scan-top { display: flex; align-items: center; padding: 10px var(--page-pad) 4px; }
.nb-scan-close {
  background: var(--bg-muted); color: var(--text-primary); border: 0;
  border-radius: 999px; padding: 9px 15px; font: inherit;
  font-size: 13.5px; font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  /* Палец должен попадать: 44px по Apple, добираем полем, а не ростом кнопки */
  min-height: 40px;
}
/* Прокручивается тело, а не весь слой: шапка с «Закрыть» обязана оставаться
   на месте — это единственный выход с экрана. */
.nb-scan-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px var(--page-pad) calc(env(safe-area-inset-bottom, 0px) + 24px);
}

.nb-scan-stage {
  position: relative; border-radius: 20px; overflow: hidden;
  background: var(--bg-muted);
  aspect-ratio: 1 / 1;
  max-height: 46vh;
  margin: 0 auto;
}
.nb-scan-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-scan-line {
  position: absolute; left: 0; right: 0; height: 3px; top: 6%;
  background: linear-gradient(90deg, transparent, var(--green-ring), transparent);
  box-shadow: 0 0 18px 4px rgba(34,197,94,.5);
  animation: nb-scan-sweep 2.1s ease-in-out infinite;
}
@keyframes nb-scan-sweep { 0%,100% { top: 6% } 50% { top: 92% } }
/* Скобки и бейдж — только на готовом результате */
.nb-scan-brackets, .nb-scan-conf { display: none; }
.nb-scan--done .nb-scan-line { display: none; }
.nb-scan--ok .nb-scan-brackets { display: block; }
.nb-scan-brackets i {
  position: absolute; width: 22px; height: 22px;
  border: 2.5px solid var(--green-ring); border-radius: 3px;
}
.nb-scan-brackets i:nth-child(1) { top: 10px; left: 10px; border-right: 0; border-bottom: 0 }
.nb-scan-brackets i:nth-child(2) { top: 10px; right: 10px; border-left: 0; border-bottom: 0 }
.nb-scan-brackets i:nth-child(3) { bottom: 10px; left: 10px; border-right: 0; border-top: 0 }
.nb-scan-brackets i:nth-child(4) { bottom: 10px; right: 10px; border-left: 0; border-top: 0 }
.nb-scan--ok .nb-scan-conf:not([hidden]) {
  display: inline-flex; align-items: center; gap: 5px;
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(22,163,74,.92); color: #fff;
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
}
/* Модель сама сомневается — бейдж не должен выглядеть как знак качества */
.nb-scan--ok .nb-scan-conf--low { background: rgba(217,119,6,.92); }

.nb-scan-dots { display: flex; gap: 8px; justify-content: center; }
.nb-scan-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(34,197,94,.28);
  animation: nb-scan-pulse 1.3s ease-in-out infinite;
}
.nb-scan-dots i:nth-child(2) { animation-delay: .16s }
.nb-scan-dots i:nth-child(3) { animation-delay: .32s }
.nb-scan-dots i:nth-child(4) { animation-delay: .48s }
@keyframes nb-scan-pulse {
  0%,100% { background: rgba(34,197,94,.25); transform: scale(1) }
  50% { background: var(--green-ring); transform: scale(1.25) }
}
.nb-scan-status { padding: 26px 0 8px; }
.nb-scan-t { text-align: center; font-size: 17px; font-weight: 700; margin: 18px 0 5px; }
.nb-scan-s { text-align: center; font-size: 13.5px; color: var(--text-secondary); margin: 0; }
.nb-scan--done .nb-scan-status { display: none; }

.nb-scan-result { margin-top: 16px; }
/* Карточка распознавания здесь без своей рамки: экран и есть карточка */
.nb-scan-result .recog-card { background: none; border: 0; box-shadow: none; padding: 0; }
/* Кнопки карточки прилипают к низу шита — это его закон, не экрана: здесь
   они наезжали на список позиций и накрывали полосу дневной цели. */
.nb-scan-result .recog-actions { position: static; background: none; padding-bottom: 0; }
/* Макросы на большом экране — тремя плитками, как на макете */
.nb-scan-result .recog-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.nb-scan-result .recog-macro {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 11px 12px;
}

.nb-scan-goal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 13px 14px; margin-top: 14px;
}
.nb-scan-goal-t {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.nb-scan-goal-bar {
  height: 8px; border-radius: 5px; background: var(--bg-muted);
  margin: 10px 0 9px; overflow: hidden;
}
.nb-scan-goal-bar i { display: block; height: 100%; background: var(--green); border-radius: 5px; }
.nb-scan-goal-bar i.over { background: var(--amber, #F59E0B); }
.nb-scan-goal-n { font-size: 13px; color: var(--text-secondary); }
.nb-scan-goal-n b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .nb-scan-line { animation: none; top: 44% }
  .nb-scan-dots i { animation: none }
}

/* ── Subscription page (B2: the single money node) ───────── */
.settings-row--link { text-decoration: none; color: inherit; }
.sub-tier-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 4px; }
.sub-tier-badge {
  font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 99px;
  background: var(--border); color: var(--text-secondary);
}
.sub-tier-badge--full { background: rgba(34,197,94,.14); color: var(--green, #22C55E); }
.sub-usage { margin-top: 8px; }
.sub-usage-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 14.5px; color: var(--text-primary);
}
.sub-usage-row:last-child { border-bottom: 0; }
.sub-usage-row b { font-variant-numeric: tabular-nums; }
.sub-note { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 8px 0 14px; }
.sub-note--ok { color: var(--green, #22C55E); font-weight: 600; }
.sub-benefits { list-style: none; margin: 10px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sub-benefits li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--text-primary); }
.sub-benefits .ic { flex: none; margin-top: 2px; color: var(--green, #22C55E); }
.sub-periods { display: flex; gap: 8px; margin: 0 0 14px; }
.sub-period {
  flex: 1; text-align: center; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 6px;
}
.sub-period--best { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.07); }
.sub-period-l { display: block; font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.sub-period-v { display: block; font-size: 16px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   MEAL CARD · dictated day (макет A, avg 02.09): секции по приёмам,
   у каждой свой карандаш и крестик. Список позиций — тот же .recog-items.
   ══════════════════════════════════════════════════════════ */
.recog-slot { display: flex; flex-direction: column; }
.recog-slot .recog-items { margin-top: 0; border-top: 0; }
.recog-slot-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 2px 6px;
  border-bottom: 1px solid var(--border);
}
.recog-slot:first-of-type .recog-slot-head { padding-top: 14px; }
.recog-slot-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recog-slot-time { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.recog-slot-kcal {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.recog-slot-acts { display: inline-flex; gap: 4px; margin-right: -6px; }
/* 36px hit area at 15px glyph: пальцем попадать надо, а ряд не раздувать */
.recog-slot-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.recog-slot-btn:active { background: var(--press-tint, rgba(0,0,0,.06)); }
.recog-slot-btn--x { color: var(--danger, #f85149); }
.recog-slot-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
/* Нижний ряд у дневной карточки: «Записать всё» длиннее «Записать» и на 375px
   переносился на две строки — ужимаем отступы, но не текст. */
.recog-card--day .recog-actions .nb-btn { white-space: nowrap; padding-left: 8px; padding-right: 8px; gap: 5px; }
.recog-card--day .recog-actions .nb-btn--edit { flex: 0.9; }