/* ============================================================================
   ПЛАН ШЕФА — ВЕБ-ВЕРСИЯ. ОБЩИЕ ДЕТАЛИ ИНТЕРФЕЙСА.

   Решение заказчика 01.09.2026: сайт должен выглядеть и работать В ТОЧНОСТИ как приложение
   и нормально открываться на телефоне, планшете и ПК.

   Отсюда правило работы, то же самое, что в приложении (журнал №177/№185): новый экран
   собирается ЭТИМИ деталями — своя карточка, своя кнопка или своё окно заводиться не должны,
   иначе сайт разъедется так же, как разъезжалось приложение до №185.

   ЗЕРКАЛО ПАЛИТРЫ ПРИЛОЖЕНИЯ: android/.../ui/theme/Color.kt, Shape.kt, Type.kt, Background.kt.
   У каждого цвета ДВА значения — светлое и тёмное, ровно как там.

   ⚠️ ГЛАВНОЕ ПРАВИЛО ТЁМНОЙ ТЕМЫ (журнал №194): чем красим БУКВЫ и ЗНАЧКИ — `--green-accent`
   (в тёмной теме он светло-зелёный); чем ЗАЛИВАЕМ, обводим и рисуем тень — `--green-dark`
   (низ перелива кнопки обязан оставаться тёмным в обеих темах). До №194 в приложении было
   133 места, где тёмно-зелёный лежал на тёмном с контрастом 2,2 при норме 4,5 — на сайте
   ровно та же беда была на «Отметить съеденным», «Завтрак» и «2 порции».

   ⚠️ И правило-близнец: на заливке, ОДИНАКОВОЙ в обеих темах (зелёная кнопка, оранжевая
   плашка), содержимое — честный белый `#fff`, а не `--surface`: `--surface` в тёмной теме
   тёмная, и получился бы тёмный текст на зелёном.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   ШРИФТ. Nunito — тот же файл переменного начертания, что в приложении (277 КБ вместо
   1,2 МБ четырьмя обычными). Лежит рядом с сайтом: внешних сервисов не подключаем,
   сайт должен открываться и когда чужие CDN недоступны.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: "Nunito";
    src: url("fonts/nunito.1f0e8654e8e5.ttf") format("truetype-variations");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   ПАЛИТРА — СВЕТЛАЯ ТЕМА (значения из Color.kt, ни одно не изменено)
   --------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Акценты, одинаковые в обеих темах */
    --green: #43A047;
    --green-dark: #2E7D32;          /* заливка, обводка, тень — НЕ буквы */
    --orange: #F5821F;              /* оранжевый = подписка и предупреждение, больше ничего */
    --water: #4C9AFF;
    --fat: #F5821F;

    /* Буквы и значки зелёным */
    --green-accent: #2E7D32;

    /* Фон и поверхности */
    --bg: #FAF9F5;
    --warm-top: #F7E9CF;
    --surface: #FFFFFF;
    --surface-2: #F6F4EC;
    --surface-3: #F0EEE5;
    /* `surfaceContainerHighest` Material 3 — дорожка выключенного тумблера (Н266-236). */
    --surface-highest: #EAE8DE;
    --text: #1B1C18;
    --text-muted: #6B6F66;
    --outline: #E7E7E2;
    /* Знакомство: точки и подложка снимка (`DotIdle`, `ShotBackdrop` телефона). */
    --dot-idle: #D7DAD2;
    --shot-backdrop: #F3F2EC;
    --outline-strong: #7C8074;

    /* Контейнеры */
    --green-container: #E6F4EA;
    --orange-container: #FFE9D6;
    --orange-border: #F6D3AE;
    --green-action: #C5E7CC;        /* зелёная кнопка-действие в окнах */
    --green-soft: #F6FAF4;          /* подсказка под кольцом калорий */
    --green-border-soft: #BFD9BA;
    --danger: #B3261E;
    --danger-container: #FDECEA;

    /* Календарь серии — ЧИСЛА ИЗ ПРИЛОЖЕНИЯ (`theme/Color.kt`). До 05.09.2026 сайт красил
       пропуск прощённый ОРАНЖЕВЫМ, а пропуск РОЗОВЫМ (цветом ошибки), и один и тот же месяц
       в телефоне и в браузере выглядел по-разному. Пропуск — это не ошибка, а просто серый день. */
    --streak-miss-fill: #F1F0EA;
    --streak-miss-text: #A0A498;
    /* ⚠️ #A5D6A7 — `LightStreakFrozenRing` телефона (Н264, C191). Здесь стояло #BFD9BA — цвет
       рамки мягких зелёных плашек сайта, а не кольца дня: в светлой теме кольцо прощённого
       дня было бледнее телефонного. */
    --streak-frozen-ring: #A5D6A7;
    /* Золото зелёной карточки серии (`StreakGold` в `StreakParts.kt`): звезда ступени, полоса
       до следующей ступени, кубок. Одно на обе темы — карточка зелёная и там и там. */
    --streak-gold: #E8B96A;
    /* День без состояния: прозрачный кружок с тонким кольцом (`StreakIdleRing`)
       и бледное число (`StreakIdleText`). Зеркало приложения — `DayDot`. */
    --streak-idle-text: #C4C2B8;
    --streak-idle-ring: #EFEDE4;
    /* ⚠️ РАМКА НЕПОЛУЧЕННОЙ ПЛИТКИ ДОСТИЖЕНИЯ — `PanelBorder` телефона (проверка C188, 17.09.2026),
       а не общий `--panel-border`: тот с Н252 равен `Divider` (#E7E7E2), и неполученная плитка
       ничем не отличалась рамкой от полученной. В телефоне у полученной `Divider`, у неполученной
       `PanelBorder` #ECECE4 (тёмная #2D3229). Общий токен не трогаем — на нём вся палитра. */
    --streak-tile-off-border: #ECECE4;
    --calendar-weekend: #C0761C;

    /* Детали анкеты (макеты 7b/7c) */
    --chip-top: #FFFFFF;
    --chip-bottom: #F5F5F0;
    --chip-border: #D2D6C9;
    --chip-text: #2A2C27;
    --panel-surface: #FBFBF7;
    /* Строки окон-списков Корзины — `CardSurface` телефона (Н266-145): чуть тёплый белый;
       в тёмной теме = `surface`. */
    --card-surface: #FCFAF3;
    /* ⚠️ РАМКА ПАНЕЛЬКИ — `PanelBorder` телефона (#ECECE4), заказчик 17.09.2026: «цвета как в
       телефоне». В телефоне два цвета: панельки (переключатель долей, плитки дат, панели вопросов
       анкеты, таблетка «Ем другое», поле поиска рецептов, полоса вкладок корзины) обведены
       `PanelBorder`, а карточки и черты — `Divider` (#E7E7E2, это `--outline` и `--divider`).
       С Н252 (14.09) здесь стоял `Divider` для всего — панельки выходили темнее телефонных. */
    --panel-border: #ECECE4;
    /* ⚠️ `--divider` УЖЕ ИСПОЛЬЗОВАЛСЯ, НО НИГДЕ НЕ БЫЛ ЗАДАН (найдено 14.09.2026): в правиле
       `.cart-day .sq.off` цвет просто не применялся, и браузер брал унаследованный. Тот же
       `Divider`, что в приложении. */
    --divider: #E7E7E2;
    --note-surface: #F3F4EE;
    --note-text: #5C6157;
    --field-border: #DFE0D8;
    --field-border-strong: #C9CEC0;
    --hint-text: #8A8F85;

    /* ГОТОВКА — ЧИСЛА ИЗ ПРИЛОЖЕНИЯ (`theme/Color.kt`, находка Н257, 14.09.2026). Сайт красил
       таймер общей палитрой: стоящий таймер был бледно-зелёным `--green-container` вместо
       салатового и БЕЗ обводки, идущий — тёмно-зелёным вместо зелёного, «время вышло» — бордовым
       `#B3261E` вместо красного. Пять состояний, и ни одно не совпадало с телефоном.
       Зеркало: `LightTimerIdleFill`, `LightTimerIdleBorder`, `LightTimerIdleAction`,
       `LightTimerPausePlay`, `TimerDoneFill`. */
    --timer-idle-fill: #D6F2B8;
    --timer-idle-border: #ADD97F;
    --timer-idle-action: #FFFFFF;
    --timer-pause-play: #DFEFDC;
    /* Одинаковый в обеих темах: на красной плашке белые буквы честны и там и там. */
    --timer-done-fill: #D33A2C;
    /* Плашка «15 мин» у шага (`LightStepTimeFill/Text/Icon`): своя тёплая заливка и тёмно-рыжий
       текст, а не общий оранжевый подписки. */
    --step-time-fill: #FDE3C8;
    --step-time-text: #8A4B0C;
    --step-time-icon: #E4720F;
    /* ⚠️ Значок на БЕЛОМ кружке таймера в последнюю минуту — `LightStepTimeIcon` в ОБЕИХ темах
       (Н266-125, 24.09.2026). В тёмной теме НЕ переопределяется: кружок белый всегда, и тёмный
       `--step-time-icon` (#E0A050) на нём был бледным (контраст 2,2). */
    --timer-last-icon: #E4720F;
    /* Ниточка между шагами рецепта (`StepLine`). */
    --step-line: #E4EFE1;

    /* КБЖУ — сняты пипеткой с макета 28a */
    --protein: #D33A2C;
    --carb: #3C7DB8;
    --calorie: #43A047;

    /* Огонь серии — единственное место, где тёплый цвет не про подписку */
    --flame-top: #F5A623;
    --flame-bottom: #D9600A;

    /* Линия над нижним меню: тёплая, а не серая */
    --nav-line: #E6DFCE;

    /* Дорожка полосы пройденного в анкете (ProgressTrack) */
    --progress-track: #D3C5A7;

    /* Перелив карточки — как cardBackground() телефона: Brush.linearGradient от угла (0,0) до
       Offset(220, 620) px, три цвета поровну. Это 250,6 точки (15,66rem) под углом 160,46°:
       перелив кончается у верха карточки, ниже — ровный тёплый. Раньше был растянут на всю
       карточку (0–100%), и высокая карточка сайта выглядела белой почти целиком (журнал №271). */
    --card-bg: linear-gradient(160.46deg, #FFFFFF 0, #FDFBF4 7.83rem, #F8F5EB 15.66rem);
    /* Низ переливной карточки: им затухает подсказка «листайте дальше» внутри окна. */
    --card-fade: #F8F5EB;
    /* Тёплый фон экрана — пять точек, чтобы не было видно полосы-стыка */
    --app-bg: linear-gradient(180deg, #F7E9CF 0%, #F8EFDC 22%, #F9F5EA 48%, #FAF9F5 78%, #FAF9F5 100%);

    /* Переливы кнопок — ОДНО МЕСТО НА ВЕСЬ САЙТ (в приложении это GreenButtonGradient и т.д.) */
    --btn-green: linear-gradient(180deg, #5CBB5E 0%, #3C963C 55%, #2E7D32 100%);
    --btn-pill: linear-gradient(180deg, #54B85A 0%, #357F38 100%);
    --btn-orange: linear-gradient(180deg, #FB963A 0%, #E0700F 100%);
    --glow-green: 0 0.375rem 1rem rgba(67, 160, 71, .34);
    --glow-orange: 0 0.375rem 1rem rgba(245, 130, 31, .34);
    --shadow-card: 0 0.125rem 0.375rem rgba(0, 0, 0, .06);
    --shadow-pop: 0 0.375rem 1.25rem rgba(0, 0, 0, .12);

    /* Скругления (Shape.kt) */
    --radius-card: 1.0625rem;
    --radius-inner: 0.75rem;
    --radius-button: 999px;   /* ⚠️ ТАБЛЕТКА, а не прямоугольник: это признак формы, а не размер — не масштабируем */
    --radius-badge: 0.5rem;
}

/* --- ТЁМНАЯ ТЕМА. Два одинаковых блока: «как в системе» и явно выбранная. --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --green-accent: #8BD79A;
        --bg: #121410;
        --warm-top: #241A12;
        --surface: #1C1F1A;
        --surface-2: #1D201B;
        --surface-3: #272B25;
        --surface-highest: #32362F;
        --text: #E7E4DC;
        --text-muted: #AAAEA3;
        --outline: #343830;
        --dot-idle: #3E443A;
        --shot-backdrop: #23261F;
        --outline-strong: #8A8E82;
        --green-container: #20372A;
        --orange-container: #3B2A19;
        --orange-border: #56381A;
        --green-action: #24402B;
        --green-soft: #1B241C;
        --green-border-soft: #3A5140;
        --danger: #FFB4A9;
        --danger-container: #3B1512;
        --timer-idle-fill: #24331B;
        --timer-idle-border: #3F5B2C;
        --timer-idle-action: #3E5B2E;
        --timer-pause-play: #2A3A2A;
        --step-time-fill: #3B2A19;
        --step-time-text: #F0B07A;
        --step-time-icon: #E0A050;
        --step-line: #2C3A2C;
        --streak-miss-fill: #262A23;
        --streak-miss-text: #8E9387;
        /* ⚠️ ТЕМНЕЕ СВОЕЙ ЗАЛИВКИ (находка Н47): светлое кольцо на календаре должно
       быть ровно одно — у сегодняшнего дня. Раньше «прощённый» день читался как
       «сегодня». Зеркало приложения: `DarkStreakFrozenRing`. */
    --streak-frozen-ring: #12291A;
            /* День без состояния: прозрачный кружок с тонким кольцом (`StreakIdleRing`)
           и бледное число (`StreakIdleText`). Зеркало приложения — `DayDot`. */
        --streak-idle-text: #6A6F63;
        --streak-idle-ring: #32372E;
        /* Рамка неполученной плитки — `DarkPanelBorder` (см. светлую тему). */
        --streak-tile-off-border: #2D3229;
        --calendar-weekend: #E0A050;
        --chip-top: #2B2F28;
        --chip-bottom: #23261F;
        --chip-border: #3E443A;
        --chip-text: #E7E4DC;
        --panel-surface: #191C17;
        --card-surface: #1C1F1A;
        /* Рамка панельки — `DarkPanelBorder` телефона (см. светлую тему). */
        --panel-border: #2D3229;
        --divider: #343830;
        --note-surface: #1D201B;
        --note-text: #AAAEA3;
        --field-border: #3A3F35;
        --field-border-strong: #4A5045;
        --hint-text: #9AA093;
        --protein: #E8695C;
        --carb: #5FA8DC;
        --calorie: #5CC163;
        --flame-top: #E0A050;
        --flame-bottom: #C0761C;
        --nav-line: #2D3229;
        --progress-track: #3A3226;
        --card-bg: linear-gradient(158deg, #1C1F1A 0%, #1C1F1A 100%);
        --card-fade: #1C1F1A;
        --app-bg: linear-gradient(180deg, #241A12 0%, #1E1811 22%, #171611 48%, #121410 78%, #121410 100%);
        --shadow-card: 0 0.125rem 0.375rem rgba(0, 0, 0, .38);
        --shadow-pop: 0 0.375rem 1.25rem rgba(0, 0, 0, .5);
        --glow-green: 0 0.375rem 1rem rgba(67, 160, 71, .26);
        --glow-orange: 0 0.375rem 1rem rgba(245, 130, 31, .26);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --green-accent: #8BD79A;
    --bg: #121410;
    --warm-top: #241A12;
    --surface: #1C1F1A;
    --surface-2: #1D201B;
    --surface-3: #272B25;
    --surface-highest: #32362F;
    --text: #E7E4DC;
    --text-muted: #AAAEA3;
    --outline: #343830;
    --dot-idle: #3E443A;
    --shot-backdrop: #23261F;
    --outline-strong: #8A8E82;
    --green-container: #20372A;
    --orange-container: #3B2A19;
    --orange-border: #56381A;
    --green-action: #24402B;
    --green-soft: #1B241C;
    --green-border-soft: #3A5140;
    --danger: #FFB4A9;
    --danger-container: #3B1512;
    --timer-idle-fill: #24331B;
    --timer-idle-border: #3F5B2C;
    --timer-idle-action: #3E5B2E;
    --timer-pause-play: #2A3A2A;
    --step-time-fill: #3B2A19;
    --step-time-text: #F0B07A;
    --step-time-icon: #E0A050;
    --step-line: #2C3A2C;
    --streak-miss-fill: #262A23;
    --streak-miss-text: #8E9387;
    /* ⚠️ ТЕМНЕЕ СВОЕЙ ЗАЛИВКИ (находка Н47): светлое кольцо на календаре должно
       быть ровно одно — у сегодняшнего дня. Раньше «прощённый» день читался как
       «сегодня». Зеркало приложения: `DarkStreakFrozenRing`. */
    --streak-frozen-ring: #12291A;
    /* День без состояния: прозрачный кружок с тонким кольцом (`StreakIdleRing`)
       и бледное число (`StreakIdleText`). Зеркало приложения — `DayDot`. */
    --streak-idle-text: #6A6F63;
    --streak-idle-ring: #32372E;
    /* Рамка неполученной плитки — `DarkPanelBorder` (см. светлую тему). */
    --streak-tile-off-border: #2D3229;
    --calendar-weekend: #E0A050;
    --chip-top: #2B2F28;
    --chip-bottom: #23261F;
    --chip-border: #3E443A;
    --chip-text: #E7E4DC;
    --panel-surface: #191C17;
    --card-surface: #1C1F1A;
    /* Рамка панельки — `DarkPanelBorder` телефона (см. светлую тему). */
    --panel-border: #2D3229;
    --divider: #343830;
    --note-surface: #1D201B;
    --note-text: #AAAEA3;
    --field-border: #3A3F35;
    --field-border-strong: #4A5045;
    --hint-text: #9AA093;
    --protein: #E8695C;
    --carb: #5FA8DC;
    --calorie: #5CC163;
    --flame-top: #E0A050;
    --flame-bottom: #C0761C;
    --nav-line: #2D3229;
    --progress-track: #3A3226;
    --card-bg: linear-gradient(158deg, #1C1F1A 0%, #1C1F1A 100%);
    --card-fade: #1C1F1A;
    --app-bg: linear-gradient(180deg, #241A12 0%, #1E1811 22%, #171611 48%, #121410 78%, #121410 100%);
    --shadow-card: 0 0.125rem 0.375rem rgba(0, 0, 0, .38);
    --shadow-pop: 0 0.375rem 1.25rem rgba(0, 0, 0, .5);
    --glow-green: 0 0.375rem 1rem rgba(67, 160, 71, .26);
    --glow-orange: 0 0.375rem 1rem rgba(245, 130, 31, .26);
}

/* ---------------------------------------------------------------------------
   ОСНОВА
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }

/* ===========================================================================
   МАСШТАБ ВСЕГО САЙТА ЦЕЛИКОМ (просьба заказчика 03.09.2026)

   «Если у человека меньше экран — приложение само сужается: мельче кнопки, карточки, шрифт.
   Если больше — всё увеличивается. Но выглядеть должно так же, как у меня в приложении
   на Pixel 8.»

   ⚠️ ЗА ЕДИНИЦУ ВЗЯТ PIXEL 8 — 412 точек в ширину. На нём 1rem = 16px, и каждый размер
   сайта равен своему размеру в приложении ЧИСЛО В ЧИСЛО (фото блюда 158, фото рецепта 160,
   заголовок 28, кружок оценки 35 и так далее). На экране уже — всё пропорционально мельче,
   на шире — крупнее, но пропорции те же.

   ⚠️ ПОЭТОМУ ВСЕ РАЗМЕРЫ В ЭТОМ ФАЙЛЕ — В `rem`, А НЕ В `px`. Пиксели остались ровно
   в трёх местах, и это не описка:
     * условия медиазапросов — они меряют НАСТОЯЩИЙ экран, и масштаб на них влиять не должен;
     * ширина колонки (544) и меню слева (240) — это сетка страницы, а не размер содержимого;
     * ширина колонки задаёт сам масштаб, и считать её от масштаба было бы замкнутым кругом.
   Новые правила пишем в `rem`: делим размер из приложения на 16.

   Считаем от ШИРИНЫ КОЛОНКИ, а не от ширины окна: на планшете и на компьютере колонка
   упирается в 544, и от ширины окна текст рос бы бесконечно. Нижняя граница 0,8 — чтобы
   на очень узких телефонах буквы не стали нечитаемыми.
   =========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    /* 412 — ширина Pixel 8, 16 — размер буквы на нём. Делим ШИРИНУ КОЛОНКИ на 412 и умножаем
       на 16: получается доля от эталонного экрана. Границы — чтобы на совсем узком телефоне
       буквы не стали нечитаемыми, а на широком экране не разрослись. */
    font-size: clamp(12.8px, calc(min(100vw, 544px) / 412 * 16), 21.12px);
}

body {
    margin: 0;
    /* Тёплый фон на всё приложение (Background.kt: `warmBackground`). Раньше сайт стоял на
       ровной заливке, и переход с анкеты на Главную выглядел как переход в другую программу.
       `fixed` — чтобы перелив не повторялся на каждом экране прокрутки. */
    background: var(--bg) var(--app-bg) no-repeat fixed;
    color: var(--text);
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--green-accent); }
img { max-width: 100%; }

/* Значок из набора `_icons.html`. Цвет — от родителя. */
/* ⚠️ ОДНО ПРАВИЛО НА ВЕСЬ САЙТ: `display` из класса СИЛЬНЕЕ атрибута `hidden`, и любой
   спрятанный из скрипта элемент с `display:flex` продолжал висеть на экране (так на готовке
   светились чип «Прочитать снова» и слово «Готово» у неработающего таймера). */
[hidden] { display: none !important; }

/* Спрятано от глаз, но осталось для клавиатуры и голосового помощника: так спрятана кнопка
   «Сохранить» у количества «что есть дома» — по Enter она работает, а места не занимает.
   ⚠️ НЕ `display:none`: тогда браузер не отправлял бы форму по Enter. */
.visually-hidden {
    position: absolute; width: 0.0625rem; height: 0.0625rem; margin: -0.0625rem; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ic { width: 1.25rem; height: 1.25rem; flex: none; display: inline-block; vertical-align: middle; }
.ic-sm { width: 1rem; height: 1rem; }
.ic-md { width: 1.375rem; height: 1.375rem; }
.ic-lg { width: 1.625rem; height: 1.625rem; }

/* ---------------------------------------------------------------------------
   КАРКАС: колонка-«телефон» по центру, слева стоячее меню (ПК и планшет от 900 px),
   внизу пять вкладок (телефон).

   Решение заказчика 03.09.2026: содержимое остаётся колонкой шириной с экран телефона —
   так сайт остаётся приложением, а не растянутой таблицей, — а широкий монитор занимает
   меню слева.
   --------------------------------------------------------------------------- */
.app {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    max-width: 806px;      /* 240 меню + 22 зазор + 544 колонка */
    margin: 0 auto;
}
.screen-col { flex: 1; min-width: 0; max-width: 544px; }

/* Колонка содержимого. Отступ 16 px по бокам — тот же, что в приложении. */
.wrap { max-width: 544px; margin: 0 auto; padding: 0 1rem; }
/* Страницы, которым нужна вся ширина: витрина для гостя и длинные юридические тексты.
   Экраны приложения так НЕ верстаются — там колонка шириной с телефон. */
.wrap-wide { max-width: 1040px; }
.screen-col:has(.wrap-wide) { max-width: none; }
.app:has(.wrap-wide) { max-width: 1302px; }

/* --- Меню слева (ПК/планшет) --- */
.sidebar {
    width: 240px;
    flex: none;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
    padding: 18px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sidebar .logo { margin: 0 0.5rem 0.875rem; }
.side-link {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-button);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
}
.side-link:hover { background: var(--surface-2); color: var(--text); }
.side-link.active { background: var(--green-container); color: var(--green-accent); }
.side-sep { height: 0.0625rem; background: var(--outline); margin: 0.625rem 0.75rem; }
.side-title {
    font-size: 0.6875rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-muted);
    margin: 0.5rem 0.75rem 0.25rem;
}
.side-form { display: block; }
.side-form .side-link { width: 100%; border: none; background: none; font-family: inherit; cursor: pointer; text-align: left; }

/* Робот и название (то же, что на значке приложения и на заставке). */
.logo {
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.logo img { display: block; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--green-container); }
.logo span { color: var(--orange); }

/* --- Верхняя полоса. На телефоне её нет вовсе: в приложении экран начинается сразу
       с приветствия, а не с логотипа. На ПК логотип живёт в меню слева. --- */
.header { display: none; }

/* --- Пять вкладок внизу (телефон) --- */
.tabbar { display: none; }

/* --- Плавающая кнопка «Чат ИИ» (макет 22a) --- */
.fab {
    position: fixed;
    /* На ПК кнопка стоит СПРАВА ОТ колонки, а не поверх неё: `.app` шириной 806 px по центру,
       её правый край — `50vw + 25.1875rem`, и мы отступаем на ширину кнопки. Иначе на широком
       мониторе она садилась прямо на карточку блюда, хотя места вокруг сколько угодно.
       На телефоне (ниже, в медиазапросе) она возвращается в угол экрана, как в приложении. */
    right: max(1rem, calc(50vw - 30.3125rem));
    bottom: 5.25rem;
    z-index: 15;
    /* ⚠️ КРУГ, А НЕ СКРУГЛЁННЫЙ КВАДРАТ, И 76 dp, А НЕ 66 (Н254, 14.09.2026). В приложении это
       `FloatingActionButton(shape = CircleShape, size = 76.dp)`; сайт рисовал квадрат со
       скруглением 20 px и на 10 dp меньше — рядом с телефоном это другая кнопка. */
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 50%;
    background: var(--btn-green);
    box-shadow: var(--glow-green);
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.fab .ic { width: 1.5625rem; height: 1.5625rem; }   /* 25 dp, как в телефоне */
/* Подпись — 11/13 жирная (700), вплотную под значком (Н264-006): было 800 и строка браузера. Строка
   не ниже букв Nunito — как у телефона: 13 + добавка сверху и снизу. */
.fab-label { font-size: 0.6875rem; line-height: 0.8125rem; padding-block: calc((1.364em - 0.8125rem) / 2); font-weight: 700; }
/* ⚠️ КНОПКА ПРЯЧЕТСЯ, ПОКА ЧЕЛОВЕК ЛИСТАЕТ (решение заказчика 09.09.2026). Кружок висит поверх
   содержимого и закрывает то, что под него попало: за четыре прохода это находили четырежды
   (Н27, Н57, Н85, Н169), и каждый раз лечили ОДИН экран — уводили от края то стрелки дня, то
   тумблер. Теперь чинится сам кружок. Класс снимает `base.html` через 450 мс после того, как
   прокрутка остановилась. Зеркало телефона — `FabWhileScrolling.kt`. */
.fab { transition: opacity .15s ease, transform .15s ease; }
.fab.scroll-away { opacity: 0; transform: scale(.7); pointer-events: none; }
/* Кому движение мешает (системная настройка) — кнопка просто исчезает и появляется. */
@media (prefers-reduced-motion: reduce) { .fab { transition: none; } }

/* ---------------------------------------------------------------------------
   ТИПОГРАФИКА (Type.kt)
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 { letter-spacing: -.02em; }
/* Заголовок экрана: 28 sp самого жирного начертания, буквы плотнее обычного. */
.screen-title { font-size: 1.75rem; line-height: 1.18; font-weight: 800; letter-spacing: -.025em; margin: 1.125rem 0 0.25rem; }
.screen-sub { color: var(--text-muted); margin: 0 0 1rem; font-size: 0.9375rem; }
/* Заголовок карточки. */
.card h2, .card-title { margin: 0 0 0.375rem; font-size: 1.125rem; line-height: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.card h3 { margin: 0 0 0.375rem; font-size: 1.0625rem; font-weight: 700; }
.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }
/* ⚠️ ВТОРАЯ СТРОКА — БЛОК, А НЕ ИНЛАЙН (находка Н243, 14.09.2026, продолжение Н252).
   У инлайновой строки СВОЯ высота строки не работает: браузер считает её по высоте строки
   РОДИТЕЛЯ (24 px), и подпись из двух строк занимает 48 точек вместо 34. Так «Готовим на 2
   человека» растило карточку «Цель на сегодня» на 9 точек, а подписи плиток — каждую свою
   карточку. Ровно этой же причиной (только через `<br>`) распухала полоса серии. */
.sub, .people .cap { display: block; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.stack { display: flex; flex-direction: column; gap: 0.625rem; }

/* ---------------------------------------------------------------------------
   КНОПКИ. Все — ТАБЛЕТКИ (в анкете приложения скруглены полностью, и прямоугольные
   кнопки остальных экранов рядом с ними выглядели из другой программы).
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: var(--radius-button);
    padding: 0.8125rem 1.375rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-family: inherit;
    color: var(--text);
    background: transparent;
}
/* ⚠️ ГЛАВНАЯ КНОПКА — «переливающаяся» (`ShimmerButton`): перелив, мягкое зелёное свечение
   И БЕГУЩИЙ БЛИК — светлая полоса раз в несколько секунд проходит слева направо. Без блика
   кнопка выглядит плоской: заказчик просил именно «чтобы переливались и светились».
   Размеры оттуда же: высота 56, подпись 19 жирная. */
.btn-primary, .btn-pay {
    min-height: 3.5rem;
    font-size: 1.1875rem;
    padding: 0.875rem 1.375rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-primary { background: var(--btn-green); box-shadow: var(--glow-green); }
/* Оранжевая — ТОЛЬКО подписка и оплата (`accentButtonLook`). */
.btn-pay { background: var(--btn-orange); box-shadow: var(--glow-orange); }
.btn-primary:hover, .btn-pay:hover { filter: brightness(1.05); }
.btn-primary.btn-sm, .btn-pay.btn-sm { min-height: 0; font-size: 0.9375rem; padding: 0.5625rem 1rem; }

/* Бегущий блик. Ход 4,2 с — как в приложении; в покое полоса уходит за край. */
.shimmer::after, .btn-primary::after, .btn-pay::after, .eaten-btn::after, .gen-btn::after, .shimmer-btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 64%;
    left: -70%;
    z-index: -1;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .26) 50%, transparent 100%);
    animation: shimmer 4.2s linear infinite;
    pointer-events: none;
}
@keyframes shimmer { 0% { left: -70%; } 100% { left: 170%; } }
/* Тем, кто просил систему не анимировать, блик не показываем. */
@media (prefers-reduced-motion: reduce) {
    .shimmer::after, .btn-primary::after, .btn-pay::after, .eaten-btn::after, .gen-btn::after { animation: none; }
}
.btn:disabled::after { animation: none; background: none; }

/* Контурная (`AppOutlineButton`): белая таблетка с ЗЕЛЁНОЙ рамкой и зелёной жирной подписью.
   ⚠️ Рамка именно `--green-accent`, а не бледная: бледная читалась как выключенная кнопка. */
.btn-ghost {
    background: var(--surface);
    color: var(--green-accent);
    border: 0.0625rem solid var(--green-accent);
    min-height: 2.9375rem;
    font-size: 0.9375rem;
}
.btn-ghost:hover { background: var(--green-soft); }
.btn-ghost.btn-sm { min-height: 0; font-size: 0.875rem; }
/* Оранжевая контурная — только для предупреждений (Н255): «Подтвердить» у непроверенной
   почты. В телефоне залитая оранжевая спорила бы с «Оформить подписку» ниже, поэтому там
   она контурная — и здесь так же. */
.btn-warn {
    background: var(--surface);
    color: var(--orange);
    border: 0.0625rem solid var(--orange);
    min-height: 2.9375rem;
    font-size: 0.9375rem;
}
.btn-warn:hover { background: var(--orange-container); }
.btn-warn.btn-sm { min-height: 0; font-size: 0.875rem; }
/* Карточка-предупреждение целиком оранжевая — как `OrangeContainer` + оранжевая рамка.
   ⚠️ Пишем `.card.warn-card`, а не просто `.warn-card`: у обычной карточки заливка задана
   переливом, и правило с одной меткой проиграло бы ей по порядку в файле. */
.card.warn-card {
    background: var(--orange-container);
    box-shadow: inset 0 0 0 0.0625rem var(--orange), var(--shadow-card);
}
.card.warn-card .warn-ic { color: var(--orange); flex: none; }
/* Мерки телефона (Н264-190): значок 24, заголовок 17/21 жирный, подпись 15/19, 8 до кнопки;
   кнопка — белая таблетка с оранжевой рамкой, поля 16/10, «Подтвердить» 15/24 жирная — всего 46.
   ⚠️ Правила с `.card.warn-card` — сильнее общего `.icon-row .btn.btn-sm` (поля 8/12, шрифт 14). */
.card.warn-card .warn-ic { width: 1.5rem; height: 1.5rem; }
.card.warn-card .grow b { font-size: 1.0625rem; line-height: 1.3125rem; }
.card.warn-card .grow .sub { font-size: 0.9375rem; line-height: 1.1875rem; }
.card.warn-card .btn-warn.btn-sm {
    padding: 0.625rem 1rem; font-size: 0.9375rem; line-height: 1.5rem; font-weight: 700;
    white-space: nowrap; margin-left: -0.25rem;
}

/* Промо-карточка из админки (`PromoCard`, Н264-185): вся залита цветом блока, рамка и тень — от
   общей карточки; значок 24 без кружка, 12, заголовок 15/19 и текст 12/16, 8, кнопка 56 цвета
   блока с подписью 19. */
.card.promo-card { display: flex; align-items: center; gap: 0.75rem; background: var(--green-container); }
.card.promo-card.warm { background: var(--orange-container); }
.promo-card .promo-ic { width: 1.5rem; height: 1.5rem; flex: none; color: var(--green); }
.promo-card.warm .promo-ic { color: var(--orange); }
.promo-card .grow { flex: 1; min-width: 0; }
.promo-card .grow b { display: block; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 600; }
.promo-card .grow .sub { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.promo-btn {
    flex: none; margin-left: -0.25rem; height: 3.5rem; padding: 0 1.375rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-button); background: var(--green); box-shadow: var(--glow-green);
    color: #fff; font-size: 1.1875rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    position: relative; overflow: hidden; isolation: isolate;
}
.promo-card.warm .promo-btn { background: var(--orange); box-shadow: var(--glow-orange); }

/* Строка едока в «Суточных нормах на каждого» (Н261). Мерки из телефона: кружок 38 dp,
   значок 20 dp, отступы 8 dp сверху и снизу. */
.member-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.member-row .round {
    width: 2.375rem; height: 2.375rem; flex: none; border-radius: 50%;
    background: var(--green-container); color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.member-row .round .ic { width: 1.25rem; height: 1.25rem; }
.member-row .grow { flex: 1; min-width: 0; }
/* Мерки `FamilyCard` телефона (Н264-195): имя 16/24, возраст 12/16, калории 15/19, белок 11/16. */
.member-row .grow b { display: block; font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.member-row .grow .sub { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.member-row .cnt { flex: none; text-align: right; }
.member-row .cnt b { display: block; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700; color: var(--green); }
/* Заголовок карточки мерками `titleMedium` (16/24 жирный, 4 до содержимого) — «Суточные нормы на
   каждого», «Мы в соцсетях». Общий `.card-title` крупнее; сам он у других карточек не меняется. */
.card-title.title-m { display: block; font-size: 1rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0; margin: 0 0 0.25rem; }
.member-row .cnt em { display: block; font-style: normal; font-size: 0.6875rem; line-height: 1rem; color: var(--text-muted); }
/* «Действует до …» — крупная зелёная строка под пояснением подписки (Н263). */
.sub-until { margin: 0.25rem 0 0; font-size: 1.0625rem; line-height: 1.3125rem; font-weight: 800; color: var(--green-accent); }
/* Второстепенное действие мягкой зелёной заливкой. */
.btn-soft { background: var(--green-container); color: var(--green-accent); }
.btn-soft:hover { background: var(--green-action); }
.btn-danger { background: transparent; color: var(--danger); border: 0.09375rem solid var(--danger); }
.btn-sm { padding: 0.5625rem 1rem; font-size: 0.9375rem; }
.btn-wide { width: 100%; }

/* Выбор месяца отчёта: горизонтальные таблетки, как в Статистике APK 6. */
.report-months {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.125rem 0 0.25rem;
    margin: 0.75rem 0;
    scrollbar-width: thin;
}
.report-month { position: relative; flex: none; cursor: pointer; }
.report-month input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.report-month span {
    display: block;
    padding: 0.4375rem 0.75rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--calorie);
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 600;
    white-space: nowrap;
}
.report-month input:checked + span { background: var(--green); color: #fff; }
.report-month input:focus-visible + span { outline: 0.125rem solid var(--green); outline-offset: 0.125rem; }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }

/* Круглая кнопка-значок (колокольчик в шапке, «назад», сброс воды). */
.icon-btn {
    width: 2.8125rem; height: 2.8125rem;
    flex: none;
    border-radius: 50%;
    border: 0.0625rem solid var(--outline);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
.icon-btn:hover { color: var(--green-accent); border-color: var(--green-border-soft); }
.icon-btn-sm { width: 2rem; height: 2rem; box-shadow: none; }

/* ---------------------------------------------------------------------------
   КАРТОЧКИ. С ПЕРЕЛИВОМ (`cardBackground`), тонкой рамкой и мягкой тенью.
   ⚠️ Без рамки белая карточка на светлом фоне держится только тенью и теряет края.
   --------------------------------------------------------------------------- */
.card {
    background: var(--card-bg);
    /* ⚠️ РАМКА РИСУЕТСЯ ВНУТРЬ, А НЕ ОТНИМАЕТ ШИРИНУ (находка Н243, 14.09.2026). В телефоне
       обводка карточки (`BorderStroke` у `Card`) ложится ПОВЕРХ и места у содержимого не берёт,
       а `border` в браузере съедал по точке с каждой стороны. Две точки решали дело: подсказка
       «Осталось ~2600 ккал · доберите напитком» переставала помещаться в строку, становилась
       трёхстрочной, и карточка вырастала на 19 точек против телефонной. Выглядит так же —
       тот же цвет, та же толщина, то же скругление. */
    box-shadow: inset 0 0 0 0.0625rem var(--outline), var(--shadow-card);
    border-radius: var(--radius-card);
    padding: 1rem;
    margin-bottom: 0.875rem;
}
.card-tight { padding: 0.8125rem 0.875rem; }
/* Карточка «здесь пока пусто» — общая деталь EmptyState приложения: мелкий серый текст
   по центру, без кнопки. Пустой экран без неё читался как поломка. */
.empty-card {
    padding: 1.75rem 1.25rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 0;
}
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { box-shadow: inset 0 0 0 0.0625rem var(--green-border-soft), var(--shadow-card); }

/* Плашка «нужна подписка» — оранжевый контейнер с рамкой (DemoPlanBanner). */
.promo {
    background: var(--orange-container);
    border: 0.0625rem solid var(--orange-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.125rem;
    margin-bottom: 0.875rem;
}
.promo h2, .promo h3 { margin: 0 0 0.375rem; font-size: 1.125rem; line-height: 1.375rem; font-weight: 800; }

/* Светлая панелька вокруг блока (PanelSurface). */
.panel {
    background: var(--panel-surface);
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-inner);
    padding: 0.75rem 0.875rem;
}
/* Подсказка-плашка бледно-зелёным с рамкой (макет 22a). */
.hint {
    background: var(--green-soft);
    /* ⚠️ РАМКА ВНУТРЬ, А НЕ В ШИРИНУ (находка Н243, 14.09.2026). В телефоне обводка Surface
       рисуется ПОВЕРХ, не отнимая места у текста; у нас же `border` съедал 2 точки ширины —
       и строка «Осталось ~2600 ккал · доберите напитком» переставала помещаться, подсказка
       становилась трёхстрочной, а карточка выше телефонной на 19 точек. */
    box-shadow: inset 0 0 0 0.0625rem var(--chip-border);
    border-radius: var(--radius-inner);
    padding: 0.75rem;
    margin: 0.75rem 0 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.1875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.hint .ic { color: var(--green); margin-top: 0.125rem; }

/* ---------------------------------------------------------------------------
   СПИСКИ
   --------------------------------------------------------------------------- */
.list { border-top: 0.0625rem solid var(--outline); }
.list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.125rem;
    border-bottom: 0.0625rem solid var(--outline);
}
.list-row .grow { flex: 1; min-width: 0; }
.list-row .qty { color: var(--text-muted); font-size: 0.875rem; white-space: nowrap; }
.list-row.done .grow { text-decoration: line-through; color: var(--text-muted); }
a.list-row { text-decoration: none; color: inherit; }
a.list-row:hover { background: var(--surface-2); }
a.list-row::after { content: "›"; color: var(--text-muted); font-size: 1.375rem; line-height: 1; }

/* Строка-переход карточкой: круглый значок, два текста, стрелка (Хочу есть / Статистика).
   ⚠️ Селектор с ДВУМЯ классами: у `a.card` вес выше, чем у одного `.nav-card`, и карточка-ссылка
   оставалась блоком — значок уезжал на свою строку над текстом (поймано на живом). */
.card.nav-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem; }
.nav-card .round {
    width: 2.75rem; height: 2.75rem; flex: none;
    border-radius: 50%;
    background: var(--green-container);
    color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.nav-card .round.warm { background: var(--orange-container); color: var(--orange); }
.nav-card b { display: block; font-size: 1.125rem; line-height: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.nav-card .sub { font-size: 0.9375rem; line-height: 1.1875rem; color: var(--text-muted); }
/* Стрелка — `KeyboardArrowRight` без размера, то есть 24 (Н266-090); была общая 20. */
.nav-card .arrow { color: var(--text-muted); width: 1.5rem; height: 1.5rem; }
/* «Приготовить из того, что дома» МЕЛЬЧЕ соседних (Н266-091): у `PantryCookCard` заголовок `titleSmall`
   15/19 жирным и подпись `labelMedium` 12/16, а «Хочу есть» и «Статистика» — 18/22 и 15/19. Строка
   телефона не ниже букв Nunito (1.364 кегля) — отсюда `padding-block`. */
.nav-card-sm b { font-size: 0.9375rem; line-height: 1.1875rem; padding-block: calc((1.364em - 1.1875rem) / 2); font-weight: 700; letter-spacing: 0; }
.nav-card-sm .sub { font-size: 0.75rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2); font-weight: 500; }

/* ---------------------------------------------------------------------------
   ТАБЛЕТКИ, ЧИПЫ, БЕЙДЖИ
   --------------------------------------------------------------------------- */
.pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.875rem; }
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0.0625rem solid var(--chip-border);
    background: linear-gradient(180deg, var(--chip-top), var(--chip-bottom));
    color: var(--chip-text);
    border-radius: var(--radius-button);
    /* ⚠️ РАЗМЕРЫ ИЗ ТЕЛЕФОНА (Н244, 14.09.2026). Здесь стоял шрифт 15 px и отступ 16 px, в
       приложении у той же «таблетки» 13 sp и 15 dp (`AppChip`, высота 37 dp). Из-за лишних
       двух пикселей шрифта таблетки становились шире и переставали помещаться в ряд: в окне
       «Новый план» три варианта «как часто готовите» вставали столбиком вместо двух строк. */
    min-height: 2.3125rem;
    padding: 0 0.9375rem;
    font-size: 0.8125rem;
    line-height: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}
.pill:hover { border-color: var(--green-border-soft); }
/* Выбранная «таблетка» — с переливом, как в анкете. Белые буквы на зелёном в обеих темах. */
.pill.active { background: var(--btn-pill); border-color: transparent; color: #fff; font-weight: 700; }
.pill.active .ic { color: #fff; }

/* Переключатель-капсула из нескольких равных долей (в приложении — AppSegmentedPill):
   «Рецепты» (В плане / Нравится / Не нравится), период в «Корзине». Одна белая таблетка
   во всю ширину, выбранная доля — зелёная таблетка со свечением ВНУТРИ неё.
   ⚠️ Это не `.pills`: там отдельные кнопки в строку, здесь один цельный переключатель. */
.segmented {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin: 0 0 0.75rem;
    background: var(--surface);
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-button);
}
.seg {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    background: none;
    border-radius: var(--radius-button);
    /* Высота доли 58 — как `AppSegment` (было 56 по содержимому). */
    height: 3.625rem;
    padding: 0 0.25rem;
    color: var(--text);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
}
.seg .seg-top { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
/* Подпись доли — 16/18 очень жирная, без сжатия букв; длинная переносится во вторую строку, а не
   обрезается (`maxLines = 2` в `AppSegment`: «Не нравится» на узком телефоне читалось как «Не»). */
.seg .seg-top span { font-size: 1rem; line-height: 1.125rem; font-weight: 800; letter-spacing: 0; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seg .ic { width: 0.75rem; height: 0.75rem; color: var(--text-muted); }
.seg b { font-size: 1rem; line-height: 1.1875rem; font-weight: 700; color: var(--text-muted); }
.seg:hover { background: var(--surface-2); }
/* Выбранная доля: перелив и свечение зелёной кнопки, содержимое честным белым в обеих темах. */
.seg.active, .seg.active:hover { background: var(--btn-green); box-shadow: var(--glow-green); color: #fff; }
.seg.active .ic { color: #fff; }
.seg.active b { color: rgba(255, 255, 255, .88); }

/* Поле поиска таблеткой со значком лупы внутри (в приложении — OutlinedTextField
   с Icons.Outlined.Search). Подписи-ярлыка над полем нет: её нет и в приложении. */
/* ⚠️ Под полем 12 — промежуток списка «Рецептов» (`LazyColumn`: `spacedBy(12)`, Н266-122; было 14). */
.search-pill { position: relative; display: block; margin: 0 0 0.75rem; }
/* Мерки материального поля телефона (Н264): высота 56, значок 24 в 12 от края, текст с 52,
   рамка 1 цветом панели внутрь, при вводе — 2 зелёным. */
.search-pill .ic-lead {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    width: 1.5rem; height: 1.5rem; color: var(--text-muted); pointer-events: none;
}
.search-pill input[type="search"], .search-pill input[type="text"] {
    width: 100%;
    height: 3.5rem;
    padding: 0 3.25rem 0 3.25rem;
    border-radius: var(--radius-button);
    border: 0;
    box-shadow: inset 0 0 0 0.0625rem var(--panel-border);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
}
.search-pill input::placeholder { color: var(--text-muted); }
.search-pill input:focus { outline: none; box-shadow: inset 0 0 0 0.125rem var(--green); }
.search-pill input::-webkit-search-cancel-button { display: none; }
.search-pill .clear {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    width: 2.25rem; height: 2.25rem; border: 0; background: none; cursor: pointer;
    color: var(--text-muted); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.search-pill .clear:hover { background: var(--surface-2); }
/* Крестик — `Icon` телефона без своего размера, то есть 24 (Н266-122; было 20 общего `.ic`). */
.search-pill .clear .ic { width: 1.5rem; height: 1.5rem; }

.chip {
    display: inline-flex; align-items: center; gap: 0.375rem;
    background: var(--green-container);
    color: var(--green-accent);
    border: 0.0625rem solid var(--green-border-soft);
    border-radius: var(--radius-button);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.chip:hover { background: var(--green-action); }

.badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: var(--orange-container);
    color: var(--orange);
    border-radius: var(--radius-badge);
    padding: 0.1875rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
}
.badge-green { background: var(--green-container); color: var(--green-accent); }
/* «Активна» у подписки — зелёная таблетка, как в телефоне (Н263): оранжевая читалась
   как предупреждение. Скругление и кегль — те же, что у остальных плашек. */
.badge.ok { background: var(--green-container); color: var(--calorie); border-radius: 999px; padding: 0.3125rem 0.75rem; line-height: 1rem; }
/* «Free» — таблетка цвета фона экрана (`Cream`) с серой надписью 13/16, как в телефоне (Н264,
   C167). Была оранжевой — «нет подписки» читалось как предупреждение. Строка 16, а не 19,5
   браузерной: иначе таблетка выше телефонной и сдвигает заголовок карточки. */
.badge.free { background: var(--bg); color: var(--text-muted); border-radius: 999px; padding: 0.3125rem 0.75rem; line-height: 1rem; }
.badge-muted { background: var(--surface-2); color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   ГЛАВНАЯ — по макету заказчика «10 Главная.png» (22a)
   --------------------------------------------------------------------------- */

/* Шапка: аватар-робот, приветствие, колокольчик. */
/* ⚠️ Снизу 14 (Н266-083): шапка — первый элемент столбца `spacedBy(14.dp)`, а у блоков под ней верхнего
   поля нет — шапка прилипала к плашке и серии. */
.home-head { display: flex; align-items: center; gap: 0.75rem; margin: 0.875rem 0 0.875rem; }
.home-head .avatar {
    width: 3.125rem; height: 3.125rem; flex: none;
    border-radius: 50%;
    background: var(--green-container);
    padding: 0.3125rem;
    object-fit: contain;
}
.home-head h1 {
    flex: 1; min-width: 0;
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.6875rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
/* Колокольчик — белый кружок 45 с тенью 1, БЕЗ рамки, значок 24 (`HomeHeader`, Н266-083). Общий
   `.icon-btn` — ещё и крестик окон и «назад»: рамку снимаем только здесь. */
.home-head .icon-btn { border: 0; }
.home-head .icon-btn .ic { width: 1.5rem; height: 1.5rem; }

/* Полоска серии (макет 18d). Разметка одна на Главную и Профиль — `_streak_strip.html` (C193).
   ⚠️ ПРОМЕЖУТКИ КАК В ТЕЛЕФОНЕ (`StreakStrip`): огонь → 10 → текст → 8 → таблетка → 8 → стрелка.
   Было 10 везде, и таблетка со стрелкой отъезжали от текста. */
.card.streak-strip, .streak-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8125rem 0.75rem;
    background: var(--surface);
    /* Рамка внутрь, а не в ширину, — как у остальных карточек (Н243). */
    box-shadow: inset 0 0 0 0.0625rem var(--outline), var(--shadow-card);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.875rem;
}
.streak-strip .flame {
    width: 2.3125rem; height: 2.3125rem; flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--flame-top), var(--flame-bottom));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-right: 0.125rem;
}
/* Огонь 21 в кружке 37 (было 20 — размер `.ic` по умолчанию). */
.streak-strip .flame .ic { width: 1.3125rem; height: 1.3125rem; }
/* ⚠️ ДВЕ СТРОКИ — КОЛОНКОЙ, А НЕ ЧЕРЕЗ `<br>` (Н242, 14.09.2026). Строки были инлайновыми, и
   браузер считал их по высоте строки САМОГО БЛОКА (24 px), а не по своим 13 и 21: текст занимал
   48 точек вместо 36, полоса выходила выше телефонной. В приложении это `Column` с отступом
   2 dp между строками (`StreakParts.kt`) — здесь то же самое. */
.streak-strip .grow {
    display: flex; flex-direction: column; gap: 0.125rem;
    line-height: normal; min-width: 0;
}
.streak-strip .grow br { display: none; }
.streak-strip .label {
    font-size: 0.6875rem; line-height: 0.8125rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.streak-strip .days { font-size: 1.0625rem; line-height: 1.3125rem; font-weight: 800; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Таблетка ступени (C193): поля 10/5, звезда 12 оранжевая, 5, надпись 13/16 в одну строку.
   Своя ширина у неё не сжимается — ужимается надпись слева (в телефоне вес у колонки текста). */
.streak-strip .badge { flex: none; padding: 0.3125rem 0.625rem; gap: 0.3125rem; line-height: 1rem; white-space: nowrap; }
.streak-strip .badge .ic { width: 0.75rem; height: 0.75rem; color: var(--orange); }
.streak-strip .arrow { width: 1.125rem; height: 1.125rem; color: var(--text-muted); }

/* Карточка «Цель на сегодня»: кольцо, Б/Ж/У с процентами, кружок «Готовим на N». */
/* ⚠️ Отступ под заголовком — 14 точек, как в телефоне (`Spacer(14.dp)`): 6 у заголовка
   карточки плюс 8 здесь. Было 12, и вместе с заголовком выходило 18. */
/* Строка заголовка: «Цель на сегодня/на день» и плашка «ИИ» у правого края (`CalorieCard`, Н266-087).
   Заголовок — Bold 700, как `fontWeight = FontWeight.Bold` телефона, а не общий ExtraBold `.card-title`.
   Плашка: `BadgeShape` на `GreenContainer`, поля 8/3, `AutoAwesome` 13 зелёным → 4 → «ИИ» 11/16
   полужирным цветом калорий. Поле 6 под строкой — прежнее поле заголовка (6 + 8 = 14). */
.goal-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.goal-head .card-title { margin: 0; font-weight: 700; }
.ai-badge {
    margin-left: auto; flex: none;
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.1875rem 0.5rem; border-radius: var(--radius-badge);
    background: var(--green-container); color: var(--calorie);
    font-size: 0.6875rem; line-height: 1rem; font-weight: 600;
}
.ai-badge .ic { width: 0.8125rem; height: 0.8125rem; color: var(--green); }
.goal { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.ring { position: relative; width: 6.4375rem; height: 6.4375rem; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .ring-bg { stroke: var(--green-container); }
/* У круга задан pathLength="100" — долю нормы пишем прямо в процентах. */
.ring .ring-fg { stroke: var(--green); stroke-linecap: round; }
.ring-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
}
.ring-text b { font-size: 1.625rem; line-height: 1.05; font-weight: 700; }
.ring-text span { font-size: 0.6875rem; line-height: 0.8125rem; color: var(--text-muted); }
.macros { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-width: 0; }
.macro { display: flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; line-height: 1.125rem; }
.macro i { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; display: inline-block; flex: none; }
.macro .name { color: var(--text-muted); }
.macro .val { font-weight: 600; }
.macro .pct { margin-left: auto; font-weight: 600; }
.people { width: 5.5rem; flex: none; text-align: center; }
.people .circle {
    width: 4.125rem; height: 4.125rem; margin: 0 auto;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0;
}
.people .circle b { font-size: 1.125rem; line-height: 1.25rem; font-weight: 700; }
/* Человек в кружке — `Icons.Outlined.Person` 20 (Н266-090); был общий мелкий 16. */
.people .circle .ic { width: 1.25rem; height: 1.25rem; }
.people .cap { margin-top: 0.3125rem; font-size: 0.875rem; line-height: 1.0625rem; font-weight: 600; color: var(--text-muted); }

/* Карточка «Вода». */
.water-head { display: flex; align-items: center; gap: 0.5rem; }
/* Капля — `WaterDrop` без размера, то есть 24 (Н266-090). ⚠️ ТОЛЬКО ПРЯМОЙ ПОТОМОК: правило
   `.water-head .ic` красило в цвет воды и значок сброса внутри кнопки — синим и в обычном, и в
   выключенном виде, а у телефона он `GreenAccent`, выключенный — `Divider`. */
.water-head > .ic { color: var(--water); width: 1.5rem; height: 1.5rem; }
.water-head b { font-size: 1.125rem; line-height: 1.375rem; font-weight: 700; }
.water-head .of { margin-left: auto; font-size: 0.9375rem; line-height: 1.125rem; font-weight: 600; color: var(--text-muted); }
.water-head .of.done { color: var(--green); }
.water-reset {
    width: 1.875rem; height: 1.875rem; flex: none;
    border: none; border-radius: 50%;
    background: var(--green-container);
    color: var(--green-accent);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.water-reset:disabled { background: transparent; color: var(--outline); cursor: default; }
/* Значок сброса — `RestartAlt` 19 в кружке 30 (Н266-356), цвет — кнопки (зелёный или выключенный). */
.water-head .water-reset .ic { width: 1.1875rem; height: 1.1875rem; color: inherit; }
/* `display:block` обязателен: полосу ставят и внутри строки (виджет покупок), а там она
   строчная и схлопывается в ничто. */
.progress { display: block; height: 0.625rem; border-radius: var(--radius-badge); background: var(--outline); overflow: hidden; margin: 0.625rem 0 0.75rem; }
.progress > span { display: block; height: 100%; border-radius: var(--radius-badge); background: var(--water); }
.progress.green > span { background: var(--green); }
/* ⚠️ «Своё количество» — ОТДЕЛЬНОЙ строкой во всю ширину, как в приложении: рядом с «+250 мл»
   и «+500 мл» подпись не помещалась и переносилась на две строки. Раньше на сайте её ради
   этого сократили до «Своё» — теперь подпись такая же, как в телефоне, а строк две. */
.water-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.water-btns form { flex: 1; display: flex; }
.water-btns .btn { flex: 1; padding: 0.75rem 0.5rem; font-size: 0.9375rem; }
.water-btns > .btn { flex-basis: 100%; }
.disclaimer { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--text-muted); }

/* Заголовок «План на сегодня» со стрелками дней. */
/* Листание даты в Корзине (режим «На день»): кружки со стрелками и дата между ними — тот же
   вид, что у шапки дня на «Плане». Неактивная стрелка бледная, но место занимает: без этого
   дата прыгала вбок на первом и последнем дне. */
.cart-day {
    display: flex; align-items: center; gap: 0;
    /* 8 под переключателем (12 − 4 при схлопывании) и 12 до вкладок, как у телефона. */
    margin: -0.25rem 0 0.75rem;
}
.cart-day .sq {
    width: 1.9375rem; height: 1.9375rem; flex: none;
    border-radius: 50%;
    background: var(--green-container);
    color: var(--green-accent);
    display: flex; align-items: center; justify-content: center;
}
.cart-day .sq.off { background: transparent; color: var(--divider); }
.cart-day b { flex: 1; min-width: 0; text-align: center; font-size: 0.9375rem; line-height: 1.1875rem; padding-block: calc((1.364em - 1.1875rem) / 2); font-weight: 700; }
.cart-day .sq .ic { width: 1.125rem; height: 1.125rem; }

/* ⚠️ ДВЕ СТРОКИ, А НЕ ОДНА (найдено глазами 05.09.2026, решение заказчика — «двигать стрелки»).
   Стрелки листания дня стояли справа в одной строке с заголовком и делали сразу две беды:
   1) на 360 заголовку «План на сегодня» оставалось 131 px при нужных 126 — он переносился
      и занимал две строки;
   2) при прокрутке правая стрелка проезжала ровно под плавающей кнопкой «Чат ИИ», и нажатие
      ловила кнопка: проверено точкой — в середине стрелки нажимался чат.
   Тогда стрелки убрали строкой ниже. ⚠️ РЕШЕНИЕ ЗАКАЗЧИКА 06.09.2026: вернуть дату В СТРОКУ,
   а переключатель УМЕНЬШИТЬ. Обе прежние беды при этом закрыты по-другому: кнопки стали 24 px
   вместо 32 и текст мельче (места хватает), а сам переключатель стоит СРАЗУ ЗА ЗАГОЛОВКОМ,
   а не у правого края, — под плавающую кнопку он не заезжает ни при какой прокрутке. */
.plan-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0.875rem;
}
/* ⚠️ ЗАГОЛОВОК СЖИМАЕТСЯ, А ПЕРЕКЛЮЧАТЕЛЬ — НЕТ. Без `min-width: 0` длинный заголовок
   выталкивает стрелки за край экрана: гибкий блок по умолчанию не даёт себя ужать. */
.plan-head b { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ ПЕРЕКЛЮЧАТЕЛЬ ПРИЖАТ К ПРАВОМУ КРАЮ И УВЕЛИЧЕН (правка заказчика 09.09.2026: «кнопка
   где листать даты такая маленькая, надо увеличить и чтобы равнялась по правому краю»).
   ⚠️ ЭТО ОТМЕНА ПРЕЖНЕГО РЕШЕНИЯ 06.09.2026, и у него была причина: у правого края переключатель
   при прокрутке проезжает под плавающей кнопкой «Чат ИИ», и нажатие ловит она. Это та же беда,
   что в находке Н169 (кружок закрывает тумблер) — и вылечена она перестановкой САМОГО КРУЖКА
   (решение заказчика 09.09.2026: пока листают, кружка нет — см. `.fab.scroll-away` ниже),
   а не тем, что всё остальное от него разбегается.
   ⚠️ ВПРАВО ЕГО ПРИЖИМАЕТ ЗАГОЛОВОК, А НЕ ОТСТУП. `margin-left: auto` тут стоял вместе с
   нерастяжимым заголовком — и на телефоне заголовок обрезался многоточием («План на …»),
   хотя место было. Растягиваем заголовок (`flex: 1 1 auto` выше) — переключатель уезжает
   вправо сам, а многоточие включается только когда места правда нет. Зеркало — `PlanHeader`. */
.plan-head .day-nav { flex: 0 0 auto; }
.plan-head .sq {
    width: 1.9375rem; height: 1.9375rem; flex: none;
    border-radius: var(--radius-inner);
    background: var(--green-container);
    color: var(--green-accent);
    display: flex; align-items: center; justify-content: center;
}
/* Календарь — `CalendarMonth` 19 в квадрате 31 (Н266-090); был общий мелкий 16. */
.plan-head .sq .ic { width: 1.1875rem; height: 1.1875rem; }
.plan-head b { font-size: 1.125rem; line-height: 1.375rem; font-weight: 700; }
.day-nav {
    display: flex; align-items: center;
    background: var(--surface);
    border: 0.0625rem solid var(--outline);
    border-radius: var(--radius-inner);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
/* ⚠️ ПЕРЕКЛЮЧАТЕЛЬ ДНЯ УВЕЛИЧЕН (правка заказчика 09.09.2026). 06.09 его наоборот уменьшали —
   тогда дата вернулась в строку с заголовком и на узком экране (360) разваливалась надвое.
   Чтобы этого не повторилось, заголовок рядом ужимается многоточием (`.plan-head b`), а сама
   дата не переносится (`white-space: nowrap`), — проверено на 360. */
.day-nav a, .day-nav span.stub {
    width: 2rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--green);
}
.day-nav .ic-sm { width: 1.125rem; height: 1.125rem; }
.day-nav span.stub { color: var(--text-muted); opacity: .4; }
.day-nav .label { padding: 0 0.375rem; font-size: 0.9375rem; font-weight: 800; color: var(--text); white-space: nowrap; }
/* Стрелки дня на Главной — `ChevronLeft/Right` 22 (Н266-090). Ширина кнопок прежняя — дата на 360 не
   переносится. */
.plan-head .day-nav .ic { width: 1.375rem; height: 1.375rem; }
/* ⚠️ «ДНЕВНИК» — СО СВОИМИ МЕРКАМИ (Н266-435). Его заголовок — тоже `.plan-head` (раскладка общая), и два
   правила Главной выше достались ему: стрелки 22 вместо 18 (`.day-nav .ic-sm`), календарь 19 вместо 16
   (`.ic-sm`). Возвращаем прежние мерки весом выше, чем у правил Главной, — от места в файле не зависит. */
.plan-head.diary-head .sq .ic { width: 1rem; height: 1rem; }
.plan-head.diary-head .day-nav .ic { width: 1.125rem; height: 1.125rem; }
/* Строка «… убрали из пробных дней» — `home_demo_unsafe` телефона (Н266-091): 11/16 средним, поля 16/4,
   и 14 до соседей (`spacedBy`). Поля — `padding`, а не `margin`: верхнее поле схлопнулось бы с нижним
   у `.plan-head`, а у телефона между ними 14 + 4. */
.home-unsafe { margin: 0 0 0.875rem; padding: 0.25rem 1rem; font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }

/* Карточка блюда (макет 22a). */
.meal-card { padding: 0.75rem; }
/* ⚠️ КАРТОЧКА ЦЕЛИКОМ — КНОПКА, как в приложении (`Card(onClick = …)`). Раньше рецепт
   открывался только тычком точно в название: фото, калории и состав не нажимались, хотя
   выглядят частью одной кнопки. Ссылку растягиваем на весь верх карточки — кнопки ниже
   (оценка, «Заменить», «Отметить съеденным») остаются сами собой. */
.meal-top { display: flex; gap: 0.625rem; align-items: flex-start; position: relative; }
.meal-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.meal-top:hover .meal-title { text-decoration: underline; }
.meal-card.skipped .meal-top { opacity: .45; }
.meal-card.eaten .meal-top { opacity: .5; }
/* Строка блюда на «Из того, что дома» (Н245). Мерки из телефона (`PantryCookScreen`):
   карточка с отступом 12, снимок 56 в квадрате со скруглением как у вложенных блоков,
   промежуток 12, дальше название и подписи столбиком. */
/* ⚠️ Имя с ДВУМЯ метками: у общего правила `a.card { display: block }` вес выше, чем
   у одной метки, и строка ложилась столбиком — снимок сверху, текст под ним. */
.card.pantry-dish {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem; text-decoration: none; color: inherit;
}
.pantry-dish .dish-photo {
    width: 3.5rem; height: 3.5rem; flex: none;
    border-radius: var(--radius-inner);
    object-fit: cover;
    background: var(--green-container);
    display: block;
}
/* ⚠️ Шрифты — `DishRow` телефона (Н264-087): название `bodyMedium` 14/20 полужирное,
   «N ккал · M мин» `labelMedium` 12/16, «Докупить: …» `labelSmall` 11/16 (у обоих вес 500).
   Было 15/20 и 13/17 — на 1–2 точки крупнее телефона. */
.pantry-dish b { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.pantry-dish .sub {
    display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500;
    padding-block: calc((1.364em - 1rem) / 2); color: var(--text-muted);
}
.pantry-dish .sub.miss { font-size: 0.6875rem; padding-block: 0; }
/* Список «Из того, что дома» — `LazyColumn` с шагом 10 и отступом 8 сверху; заголовок группы —
   `titleSmall` 15/19 жирный с 4 сверху (Н264-085: был `.block-title` 18/22 с 18 сверху).
   ⚠️ Свои 8 сверху списку НЕ даём: у шапки сайта снизу 14 — это уже 6 шапки телефона и 8 списка. */
.pantry-cook-list { display: flex; flex-direction: column; gap: 0.625rem; }
.pantry-cook-list > .card { margin: 0; }
.pantry-group-title {
    margin: 0.25rem 0 0; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700;
    padding-block: calc((1.364em - 1.1875rem) / 2); color: var(--text);
}

.meal-photo-box { position: relative; width: 9.875rem; flex: none; }
.meal-photo {
    width: 9.875rem; height: 9.875rem;
    border-radius: 1rem;
    object-fit: cover;
    background: var(--green-container);
    display: block;
}
.meal-photo.warm { background: var(--orange-container); }
/* Блюдо без фотографии — зелёный квадрат с вилкой, как в приложении: пустой серый
   прямоугольник читался как «картинка не загрузилась», то есть как поломка. */
.meal-photo.no-photo { display: flex; align-items: center; justify-content: center; color: var(--green); }
.meal-photo.no-photo .ic { width: 3.75rem; height: 3.75rem; }
.meal-tags { position: absolute; left: 0.375rem; top: 0.375rem; display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.meal-tag {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border-radius: var(--radius-button);
    padding: 0.1875rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--green-accent);
}
.meal-tag.time { color: var(--text-muted); }
.meal-body { flex: 1; min-width: 0; }
.meal-title { font-size: 1.0625rem; line-height: 1.3125rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.meal-title a { color: inherit; text-decoration: none; }
.meal-title a:hover { text-decoration: underline; }
/* ⚠️ Переносим по строкам, а не сжимаем: трёх значений («387 ккал · 12 мин · 330 г») в одну
   строку не влезает, и без переноса каждое ломалось пополам — «387 / ккал». */
.meal-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.125rem; color: var(--text-muted); }
.meal-facts span { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.meal-facts .ic { width: 1.0625rem; height: 1.0625rem; }
.meal-facts .kcal .ic { color: var(--green); }
.meal-portions { display: inline-flex; align-items: center; gap: 0.3125rem; margin-top: 0.3125rem; font-size: 0.875rem; line-height: 1.0625rem; color: var(--text-muted); }
.meal-portions .ic { color: var(--green); width: 0.9375rem; height: 0.9375rem; }
.meal-ings { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--text-muted); }
.meal-sep { height: 0.0625rem; background: var(--outline); margin: 0.625rem 0; }
.meal-actions { display: flex; align-items: center; gap: 0.5rem; }
/* Главная — `ReactionButton` 39 со значком 18 (HomeScreen.kt), «План» — 40/19 (`.plan-meal .react`).
   ⚠️ Прежние «35» были ошибкой пересказа (Н266-103): 35 нет ни на одном экране телефона. */
.react {
    width: 2.4375rem; height: 2.4375rem; flex: none;
    border-radius: 50%;
    border: 0.0625rem solid var(--chip-border);
    background: var(--surface);
    color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.react .ic { width: 1.125rem; height: 1.125rem; }
.react.on { color: var(--green); }
.react.on.down { color: var(--danger); }
/* «Заменить блюдо» — светло-зелёная таблетка во всю оставшуюся ширину. */
.replace-btn {
    flex: 1;
    height: 2.5rem;
    border-radius: var(--radius-button);
    border: 0.0625rem solid var(--chip-border);
    background: var(--green-container);
    color: var(--green-accent);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    text-decoration: none;
}
.replace-btn:hover { background: var(--green-action); }
/* Подбор идёт (Н266-359) — кружок 18 с линией 2 на месте значка, через 8 «Подбираем…», кнопка не
   нажимается (`CircularProgressIndicator(strokeWidth = 2.dp, size 18)` телефона). */
.replace-btn.is-busy { cursor: default; }
.replace-btn .spin {
    width: 1.125rem; height: 1.125rem; flex: none; display: inline-block; border-radius: 50%;
    border: 0.125rem solid transparent; border-top-color: var(--green); border-right-color: var(--green);
    animation: spin 0.9s linear infinite;
}
/* «Отметить съеденным». ⚠️ Цвета по макету ПЕРЕВЁРНУТЫ: несделанное — залитая зелёная кнопка
   (её и ждут от человека), сделанное — светлая с галочкой. */
.eaten-btn {
    width: 100%;
    height: 3.0625rem;
    margin-top: 0.625rem;
    border: none;
    border-radius: var(--radius-button);
    background: var(--btn-green);
    box-shadow: var(--glow-green);
    color: #fff;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    position: relative; overflow: hidden; isolation: isolate;
}
.eaten-btn.done { background: var(--green-container); color: var(--green-accent); box-shadow: none; }
.eaten-btn.done::after { animation: none; background: none; }
/* Значок «Отметить съеденным» / «Съедено» — 19 (`EatenChip`, Н266-090); был общий мелкий 16. */
.eaten-btn .ic { width: 1.1875rem; height: 1.1875rem; }
/* «Ем другое» — подчёркнутая ссылка по центру: рядом стоит большая зелёная кнопка,
   и две одинаковые кнопки спорили бы. */
.eat-other {
    display: flex; align-items: center; justify-content: center; gap: 0.4375rem;
    margin-top: 0.5rem; padding: 0.375rem;
    color: var(--green);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: underline;
    background: none; border: none; width: 100%; font-family: inherit; cursor: pointer;
}
.eat-out-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.eat-out-row form { flex: 1; display: flex; }
.eat-out-row .btn { flex: 1; padding: 0.5625rem 0.5rem; font-size: 0.875rem; }

/* Кнопка «Сгенерировать новый план»: фирменный перелив зелёный → оранжевый.
   ⚠️ Значок и надписи — ГРУППОЙ ПО ЦЕНТРУ (Н266-084, `contentAlignment = Alignment.Center` телефона);
   строки внутри группы — по левому краю, как у `Column` телефона. */
.gen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 4.875rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.875rem;
    border: none;
    border-radius: var(--radius-button);
    background: linear-gradient(100deg, #3E8E41 0%, #7CB342 52%, #F57C00 100%);
    box-shadow: var(--glow-green);
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    position: relative; overflow: hidden; isolation: isolate;
}
.gen-btn .ic { width: 1.625rem; height: 1.625rem; }
.gen-btn b { display: block; font-size: 1.125rem; line-height: 1.3125rem; font-weight: 800; }
/* ⚠️ Прозрачность 90 % — ТОЛЬКО У ПОДПИСИ (Н266-084): у телефона заголовок чисто белый, подпись
   `Color.White.copy(alpha = 0.9f)`. Прежнее правило на любой `span` задевало и обёртку — прозрачности
   перемножались: заголовок 90 %, подпись 81 %. */
.gen-btn .gen-txt { display: block; }
.gen-btn .gen-txt > span { display: block; font-size: 0.75rem; line-height: 0.9375rem; opacity: .9; }

/* Дневник за день — `DiarySection` телефона (Н266-092). Строка: поля 6; фото 32 → 8 или точка 8 → 10;
   название 14/20 в ОДНУ строку (`maxLines = 1`, лишнее обрезается без многоточия) и приём 11/16;
   калории 12/16 вплотную (у телефона колонка названия с `weight(1f)`) → 4 → крестик 28 без рамки и
   фона со значком 16. Зазоры разные — у строки `gap: 0`, отступы у самих деталей.
   ⚠️ `.diary-row` стоит только на Главной; `.diary-photo` общий со страницей «Дневник» — его отступ
   только внутри строки. Общие `.icon-btn`, `.btn-soft`, `.muted.small` дневник больше не носит. */
.diary-card .card-title { margin-bottom: 0.25rem; }
.diary-row { display: flex; align-items: center; gap: 0; padding: 0.375rem 0; }
.diary-row .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; background: var(--green); margin-right: 0.625rem; }
/* Обед и ужин — оранжевая точка (`mealAccentDot`: "lunch", "dinner" -> Orange). */
.diary-row .dot.warm { background: var(--orange); }
.diary-row .diary-photo { margin-right: 0.5rem; }
.diary-row .d-title { display: block; font-size: 0.875rem; line-height: 1.25rem; white-space: nowrap; overflow: hidden; }
.diary-row .d-meal { display: block; font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.diary-row .kcal { font-size: 0.75rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2); font-weight: 600; color: var(--calorie); white-space: nowrap; }
.diary-row form { margin-left: 0.25rem; }
.diary-del {
    width: 1.75rem; height: 1.75rem; flex: none;
    border: 0; background: none; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); cursor: pointer;
}
.diary-del .ic { width: 1rem; height: 1rem; }
.diary-empty { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
/* «Добавить своё блюдо» — таблетка на `GreenContainer` через 10: поля 10, значок 18 → 6 → 13/16
   полужирным цветом калорий, высота 38. */
.diary-add {
    width: 100%; margin-top: 0.625rem;
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: 0.625rem 1rem;
    border: 0; border-radius: var(--radius-button);
    background: var(--green-container); color: var(--calorie);
    font-family: inherit; font-size: 0.8125rem; line-height: 1rem; font-weight: 600;
    cursor: pointer;
}
.diary-add .ic { width: 1.125rem; height: 1.125rem; color: var(--green); }
.diary-note { margin: 0.625rem 0 0; font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.diary-photo { width: 2rem; height: 2rem; flex: none; border-radius: 0.5rem; object-fit: cover; background: var(--surface-2); }

/* Виджет «Продукты на неделю». */
.shop-widget { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem; }
.shop-widget .round {
    width: 2.625rem; height: 2.625rem; flex: none; border-radius: 50%;
    background: var(--green-container); color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.shop-widget b { display: block; font-size: 1.125rem; line-height: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.shop-widget .cnt { font-size: 1.0625rem; line-height: 1.3125rem; font-weight: 700; color: var(--green); margin: 0.3125rem 0; }
.shop-widget .sub { font-size: 0.8125rem; line-height: 1.0625rem; color: var(--text-muted); }
.shop-widget .progress { margin: 0.3125rem 0; height: 0.6875rem; }
.shop-widget .open {
    width: 5.625rem; flex: none;
    padding: 0.625rem 0.5rem;
    border-radius: var(--radius-button);
    border: 0.0625rem solid var(--chip-border);
    background: var(--green-container);
    color: var(--green-accent);
    font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700;
    text-align: center; text-decoration: none;
}

/* ---------------------------------------------------------------------------
   ЭКРАН «ПЛАН» — макет 24a («11 план .png»)
   --------------------------------------------------------------------------- */

/* Итог дня под заголовком. Перебор нормы подсвечиваем оранжевым — порог 5 %, как в приложении:
   план почти никогда не сходится в ноль, и красить каждое отклонение значило бы обесценить
   предупреждение. */
/* Н266-238: 15/19, строка не ниже букв Nunito, в 4 под заголовком. */
.plan-total { margin: 0.25rem 0 0; font-size: 0.9375rem; line-height: 1.1875rem; padding-block: calc((1.364em - 1.1875rem) / 2); font-weight: 700; color: var(--green-accent); }
.plan-total.over { color: var(--orange); }

.day-card-title { font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.4375rem; }
.day-kcal { display: flex; align-items: flex-end; gap: 0.375rem; min-width: 0; }
.day-kcal b { font-size: 1.9375rem; line-height: 2.125rem; font-weight: 800; letter-spacing: -.02em; }
.day-kcal span { font-size: 1rem; line-height: 1.25rem; color: var(--text-muted); padding-bottom: 0.125rem; }
.day-kcal.over b { color: var(--orange); }
/* «Цель» — зелёная таблетка: норма правится прямо здесь, а не «числом, которое некуда деть». */
.goal-btn {
    flex: none; height: 2.6875rem; padding: 0 0.9375rem;
    border: none; border-radius: var(--radius-button);
    background: var(--green); color: #fff;
    font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4375rem;
}
.goal-btn:hover { filter: brightness(1.05); }
/* Б/Ж/У — цветной точкой и числом в цвет точки (макет 24a). */
.macro-dots { display: flex; flex-wrap: wrap; gap: 0.9375rem; margin-top: 0.4375rem; font-size: 0.9375rem; font-weight: 700; }
.macro-dots span { display: inline-flex; align-items: center; gap: 0.3125rem; }
.macro-dots i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; display: inline-block; }

/* Тумблер «Весь день вне дома» — вид материального Switch из приложения. */
.switch {
    flex: none; width: 3.25rem; height: 2rem; padding: 0;
    border: 0.125rem solid var(--outline-strong); border-radius: 999px;
    /* Дорожка выключенного — `surfaceContainerHighest` Material 3 (Н266-236): на тёмной карточке
       прежний `--surface-2` сливался с фоном, и оставалась одна рамка. */
    background: var(--surface-highest); cursor: pointer;
    display: inline-flex; align-items: center;
    transition: background .15s, border-color .15s;
}
.switch > span {
    width: 1rem; height: 1rem; margin-left: 0.375rem; border-radius: 50%;
    background: var(--outline-strong); transition: transform .15s, background .15s, width .15s, height .15s;
}
.switch.on { background: var(--green); border-color: var(--green); }
/* Бегунок включённого 24 и по 4 со всех сторон (`SelectedHandleWidth` M3), как у телефона. */
.switch.on > span { width: 1.5rem; height: 1.5rem; background: #fff; transform: translateX(1rem); }

/* Зелёная кнопка экрана «План» — тем же видом, что «Цель». */
.plan-green {
    /* `PlanGreenButton` (Н266-101): 54, поля 10, значок 19, отбивка 8, текст 15/18 в две строки. */
    flex: 1; min-width: 0; height: 3.375rem; padding: 0 0.625rem;
    border: none; border-radius: var(--radius-button);
    background: var(--green); color: #fff;
    font-family: inherit; font-size: 0.9375rem; line-height: 1.125rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    text-align: center; text-decoration: none;
}
.plan-green:hover { filter: brightness(1.05); }

/* Светлая таблетка-действие во всю ширину («Ем другое», «Добавить блюдо в план»). */
.btn-panel {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; height: 2.5rem; margin-top: 0.625rem;
    border: 0.0625rem solid var(--panel-border); border-radius: var(--radius-button);
    background: var(--panel-surface); color: var(--green);
    font-family: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer;
    text-decoration: none;
}
.btn-panel:hover { background: var(--green-soft); }

/* Список выбора в окнах «Поменять местами» и «Убрать приём»: строки с полоской между ними.
   ⚠️ Полоска обязательна — без неё блюда сливались в сплошной столбик текста. */
.pick-list { max-height: 18.75rem; overflow-y: auto; }
.pick-row {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.625rem 0.5rem; border-radius: var(--radius-inner);
    cursor: pointer; font-size: 0.9375rem;
}
.pick-row + .pick-row { border-top: 0.0625rem solid var(--outline); }
.pick-row:has(input:checked) { background: var(--green-container); }
.pick-row .meal-type { font-size: 0.8125rem; }
/* Таблетка-переключатель на скрытом радио («Из всех дней» / «Только из этого дня»). */
.pill:has(input:checked) { background: var(--btn-pill); border-color: transparent; color: #fff; }

/* ---------------------------------------------------------------------------
   ОКНА. Одна деталь на все окна сайта — как `AppAlertDialog.kt` в приложении:
   подложка с переливом, значок в кружке, заголовок, прокрутка длинного содержимого.

   ⚠️ Своих окон страницы не рисуют. В приложении из-за самодельных окон уже ломался вид,
   и все окна переоформили ОДНИМ файлом (журнал №185).
   --------------------------------------------------------------------------- */
.modal {
    width: min(27.5rem, calc(100vw - 2rem));
    max-height: min(35rem, calc(100vh - 3rem));
    padding: 1.125rem;
    border: 0.0625rem solid var(--outline);
    border-radius: var(--radius-card);
    background: var(--card-bg);
    color: var(--text);
    box-shadow: var(--shadow-pop);
    overflow-y: auto;
}
.modal::backdrop { background: rgba(0, 0, 0, .45); }
.modal-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; }
/* ⚠️ СТРОКА ЗАГОЛОВКА ОКНА НЕ НИЖЕ САМИХ БУКВ (заказчик 17.09.2026: «поправить разом»). У окон
   телефона строка 25 при 21 и 23 при 19 — ниже букв Nunito (1,364 кегля: 28,6 и 25,9). Compose
   такую строку не режет: одна строка — высота букв, каждая следующая — ещё строка (замер на
   эмуляторе: «Изменить имя» 29, «Выйти из аккаунта?» 26,3, подсказка 15/19 в две строки 39,5).
   Сайт ставил ровно 25 и 23 — все окна были на 3–4 точки ниже. Строка телефона + добавка сверху и
   снизу даёт то же и в одну, и в две строки. */
.modal-head b {
    flex: 1; font-size: 1.1875rem; line-height: 1.4375rem;
    padding-block: calc((1.364em - 1.4375rem) / 2); font-weight: 800; letter-spacing: -.02em;
}
.modal-ic {
    width: 2.375rem; height: 2.375rem; flex: none; border-radius: 50%;
    background: var(--green-container); color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.modal-label { font-size: 0.875rem; font-weight: 700; color: var(--text-muted); margin: 0 0 0.375rem; }
/* Свёрнутая строка «Что уже есть дома» в окне «Новый план»: развёрнутый список закрывал собой
   остальные настройки, и до кнопки «Сгенерировать» приходилось листать.
   ⚠️ Н266-095 — СТРОКА `GenerateDialog` ТЕЛЕФОНА, БЕЗ ПЛАШКИ: подпись 17/21 очень жирная (`GenLabel`),
   под ней «отмечено N из 15» 13/17 цветом подсказки, справа шеврон 24 серым (раскрыто — вверх);
   раскрыто — подсказка 11/16 серым (`labelSmall`) и через 8 плитки `AppChip` с промежутком 8. */
.pantry-fold { border: 0; background: none; padding: 0; }
.pantry-fold > summary {
    display: flex; gap: 0.625rem; align-items: center;
    cursor: pointer; list-style: none;
}
.pantry-fold > summary::-webkit-details-marker { display: none; }
.pantry-fold > summary b {
    display: block; font-size: 1.0625rem; line-height: 1.3125rem; font-weight: 800; color: var(--text);
}
.pantry-fold > summary .sub { display: block; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--hint-text); }
.pantry-fold .chev { width: 1.5rem; height: 1.5rem; flex: none; color: var(--text-muted); }
.pantry-fold[open] .chev { transform: rotate(180deg); }
/* ⚠️ Подсказка — ТОЛЬКО внутри строки (Н266-435): у «Корзины» → «Дома» свой `.pantry-hint` 13/18 обычным,
   и два правила одного веса перебивали друг друга — здесь выходило 13/18, там шрифт 500. */
.pantry-fold .pantry-hint { margin: 0; font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.pantry-tiles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.modal-actions { display: flex; gap: 0.5rem; margin-top: 0.875rem; }
.modal-actions .btn { flex: 1; }

/* ---------------------------------------------------------------------------
   ОКНО-ВОПРОС — зеркало `AppConfirmDialog` (Н264, 16.09.2026). «Убрать из истории?»,
   «Удалить запись?» и подобные: крестика НЕТ, заголовок 19/23, черта, пояснение 15/20,
   главная кнопка во всю ширину и «Отмена» контуром под ней.
   ⚠️ Поля 21, промежуток 13, по бокам окна 19 — числа телефона. Рамки у окна нет:
   в телефоне оно держится тенью.
   --------------------------------------------------------------------------- */
.modal.modal-confirm {
    width: min(23.3125rem, calc(100vw - 2.375rem));
    padding: 1.3125rem;
    border: 0;
}
.modal-confirm form, .modal-confirm .confirm-box { display: flex; flex-direction: column; gap: 0.8125rem; }
.confirm-head { display: flex; align-items: center; gap: 0.6875rem; }
.confirm-head b {
    font-size: 1.1875rem; line-height: 1.4375rem; padding-block: calc((1.364em - 1.4375rem) / 2);
    font-weight: 800; letter-spacing: 0; color: var(--text);
}
.confirm-head .modal-ic { width: 2.125rem; height: 2.125rem; color: var(--green-accent); }
.confirm-head .modal-ic .ic { width: 1.1875rem; height: 1.1875rem; }
.modal-sep { width: 100%; height: 0.0625rem; margin: 0; border: 0; background: var(--divider); }
.confirm-body { margin: 0; font-size: 0.9375rem; line-height: 1.25rem; color: var(--text-muted); }
/* Опасное действие — белая таблетка 48 с красной надписью 16 (`AppConfirmDialog`, `danger`). */
.pill-danger {
    width: 100%; height: 3rem;
    border-radius: 999px;
    border: 0; box-shadow: inset 0 0 0 0.0625rem var(--divider);
    background: var(--surface); color: var(--danger);
    font: inherit; font-size: 1rem; font-weight: 700;
    cursor: pointer;
}
.pill-danger:disabled { color: var(--text-muted); cursor: default; }
/* ОБЩЕЕ ОКНО — зеркало `AlertDialog` из `AppAlertDialog.kt`: поля 21, промежуток 13, по бокам
   окна 15, заголовок 21/25 без значка и без крестика, черта, содержимое 15/20, черта и кнопки
   справа («Отмена» и главная) с промежутком 9. */
.modal.modal-alert {
    width: min(23.8125rem, calc(100vw - 1.875rem));
    /* ⚠️ Браузер сам ужимает `<dialog>` до «ширина экрана − 38»: на 412 окно выходило 374 вместо
       телефонных 381 (увидено живьём 16.09.2026). Ширину и так держит строка выше. */
    max-width: none;
    padding: 1.3125rem;
    border: 0;
}
.modal-alert form, .modal-alert .alert-box { display: flex; flex-direction: column; gap: 0.8125rem; }
.alert-title {
    display: block; font-size: 1.3125rem; line-height: 1.5625rem; padding-block: calc((1.364em - 1.5625rem) / 2);
    /* Буквы плотнее на 0,4 — `titleLarge` телефона (Н266-260); у окна-списка и окна-вопроса 0. */
    font-weight: 800; letter-spacing: -0.025rem; color: var(--text);
}
.alert-text { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.25rem; color: var(--text-muted); }
/* ⚠️ Поле в тексте окна — `AppTextField` («Сколько добавить», Н266-435): рамка 1 внутрь и поля 14 по бокам.
   Общее `input[type="text"]` стоит НИЖЕ по файлу с тем же весом, что `input.app-field`, и добавляло рамку
   1,5 поверх своей и поля 12 сверху-снизу — та же ловушка, что у промокода и окна «Что вы съели?». */
.alert-text input.app-field { width: 100%; padding: 0 0.875rem; border: 0; }
.alert-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5625rem; }
.alert-actions .pill-outline { width: auto; }
/* ОКНО «ИЗМЕНИТЬ БЛЮДО» — `EditMealDialog` телефона на общем окне (18.09.2026, «по фото не совпадают
   разделения и цвета»). Мерки с эмулятора: строки 12/16 серым через 6; через 12 подпись раздела
   17/21 очень жирная тёмная и 8 до таблеток (37, промежуток 8, надпись 13/15); через 10 поле 54;
   через 10 «Просто другое» — зелёная плашка 36 (10 + строка 16 + 10), значок 16 и надпись 12
   полужирная; через 14 вторая подпись, через 8 поле. Прокрутка у содержимого своя — до 460, как
   в телефоне; у окна и кнопок её нет. */
/* ОКНО «ЧТО ВЫ СЪЕЛИ?» — `AddFoodDialog` телефона на общем окне (В.7 «Главная», 24.09.2026).
   Мерки с кода телефона: заголовок 21/25 и крестик — кружок 34 цвета фона со значком 19; строка
   «Обед · изменить» 14/18 полужирно зелёным со значком 15 через 6; зелёные таблетки-действия
   (`GreenActionSurface`) — поля 13, значок 19 через 9, надпись 16/19 очень жирная; «или добавьте
   своё» 14/18 между чертами; выбранное блюдо — плашка `GreenContainer` с полями 8, фото 48, название
   15/19 жирно зелёным и «Убрать» 14; фото 56 и «Убрать фото» 15; подсказки 13/17; итог 13 зелёным;
   поля — `AppTextField` по 8 друг от друга. Промежутки — `Spacer` телефона (10, 12, 6, 4). */
.modal.eat-dialog { max-height: calc(100vh - 2rem); overflow: visible; }
/* ⚠️ НИЗКИЙ ЭКРАН СЖИМАЕТ ПОЛЯ, А НЕ ВЫТАЛКИВАЕТ КНОПКИ (Н266-428). Запас «экран − 15rem» был посчитан
   под окно без «Просто не готовлю»: окно «Что вы съели вместо?» ниже ~690 выходило за карточку, а
   стрелка «Листайте дальше» ложилась на эту кнопку. Теперь столбец окна не выше экрана (минус поля
   окна 21 + 21), заголовок, черты и кнопки не сжимаются, а поля берут остаток — не больше 420, как
   потолок `AppAlertDialog` телефона, — и прокручиваются внутри. */
.eat-dialog .alert-box { max-height: calc(100vh - 4.625rem); }
.eat-dialog .alert-box > * { flex: none; }
.modal-alert form.eat-body {
    display: flex; flex-direction: column; gap: 0;
    flex: 0 1 auto; min-height: 0; max-height: 26.25rem; overflow-y: auto;
}
/* ⚠️ Поле окна — `AppTextField`: рамка 1 внутрь и поля 14 по бокам (Н266-428). Общее правило
   `input[type="text"]` стоит НИЖЕ по файлу с тем же весом, что `input.app-field`, и добавляло рамку 1,5
   поверх своей и поля 12 сверху-снизу — та же ловушка, что у промокода и `.float-field` (№282). */
.eat-dialog input.app-field { padding: 0 0.875rem; border: 0; }
.eat-title { display: flex; align-items: center; gap: 0.625rem; }
.eat-title .alert-title { flex: 1; }
.eat-x {
    width: 2.125rem; height: 2.125rem; flex: none; border: 0; border-radius: 50%;
    background: var(--bg); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.eat-x .ic { width: 1.1875rem; height: 1.1875rem; }
.eat-meal {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 0.375rem;
    margin: 0 0 0.625rem; padding: 0.125rem 0; border: 0; border-radius: 999px; background: none;
    color: var(--green-accent); font: inherit; font-size: 0.875rem; line-height: 1.125rem;
    padding-block: calc(0.125rem + (1.364em - 1.125rem) / 2); font-weight: 600; cursor: pointer;
}
.eat-meal .ic { width: 0.9375rem; height: 0.9375rem; color: var(--text-muted); }
.eat-pill {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5625rem;
    padding: calc(0.8125rem + (1.364em - 1.1875rem) / 2) 1rem; border: 0; border-radius: 999px;
    background: var(--green-action); color: var(--green-accent);
    font: inherit; font-size: 1rem; line-height: 1.1875rem; font-weight: 800; cursor: pointer;
}
.eat-pill .ic { width: 1.1875rem; height: 1.1875rem; flex: none; }
/* Считать нечего (нет ни названия, ни снимка) или уже считаем — бледнее, как `GreenContainer`. */
.eat-pill:disabled { background: var(--green-container); cursor: default; }
/* Без Plus — бледная таблетка с замком и серой надписью, не нажимается. */
.eat-pill.eat-pill-off { background: var(--green-container); color: var(--text-muted); cursor: default; }
.eat-pill .eat-ic { display: inline-flex; width: 1.1875rem; height: 1.1875rem; align-items: center; justify-content: center; }
.eat-pill .eat-ic .spin {
    width: 1.125rem; height: 1.125rem; border: 0.125rem solid var(--green-container);
    border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite;
}
.eat-gap-12 { margin-bottom: 0.75rem; }
.eat-gap-10 { margin-bottom: 0.625rem; }
.eat-top-6 { margin-top: 0.375rem; }
.eat-or { display: flex; align-items: center; margin: 0 0 0.75rem; }
.eat-or::before, .eat-or::after { content: ""; flex: 1; height: 0.0625rem; background: var(--divider); }
.eat-or span { padding: 0 0.625rem; font-size: 0.875rem; line-height: 1.125rem; color: var(--hint-text); }
.eat-picked {
    display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.625rem; padding: 0.5rem;
    border-radius: var(--radius-inner); background: var(--green-container);
}
.eat-picked b {
    flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700; color: var(--green-accent);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.eat-thumb-48 { width: 3rem; height: 3rem; flex: none; object-fit: cover; border-radius: var(--radius-inner); }
.eat-thumb-52 { width: 3.25rem; height: 3.25rem; flex: none; object-fit: cover; border-radius: 0.75rem; }
.eat-thumb-56 { width: 3.5rem; height: 3.5rem; flex: none; object-fit: cover; border-radius: var(--radius-inner); }
.eat-thumb-empty { display: flex; align-items: center; justify-content: center; background: var(--green-container); color: var(--green-accent); }
.eat-thumb-empty .ic { width: 1.5rem; height: 1.5rem; }
.eat-link {
    flex: none; padding: 0.25rem 0.5rem; border: 0; border-radius: 999px; background: none;
    color: var(--text-muted); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
.eat-link.eat-link-15 { padding: 0.375rem 0.625rem; font-size: 0.9375rem; }
.eat-photo { display: flex; align-items: center; gap: 0.625rem; }
.eat-hint, .eat-note, .eat-need { margin: 0; font-size: 0.8125rem; line-height: 1.0625rem; }
.eat-hint { color: var(--hint-text); }
.eat-note { margin-top: 0.25rem; color: var(--text-muted); }
.eat-need { color: var(--orange); }
.eat-sum { margin: 0; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--green-accent); }
.eat-row { display: flex; gap: 0.5rem; }
.eat-row .app-field { flex: 1; min-width: 0; width: auto; }
.eat-row-3 { margin-top: 0.625rem; }
.eat-actions { flex-direction: column; align-items: stretch; gap: 0.5625rem; }
.eat-actions .pill-outline { width: 100%; }
/* Окно «Какой это приём?» — таблетки `AppChip` потоком через 8: надпись 13/15, у выбранной галочка 11
   (Н266-428; общая `.wchip` — таблетка анкеты 15/17). */
.eat-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.eat-chips .wchip > span { font-size: 0.8125rem; line-height: 0.9375rem; }
/* «Блюда плана»: строки и черты через 13 (`list-gap`, Н266-428), черты не сжимаются — иначе в длинном
   списке с прокруткой браузер ужимал их до нуля и строки сливались. */
.eat-dishes > .modal-sep { flex: none; }
/* Строка «Блюда плана»: фото 52, через 12 название 15/19 полужирно в 2 строки и «N ккал · Обед» 13/16. */
.eat-dish {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.5rem 0;
    border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.eat-dish-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eat-dish-text b {
    font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 600; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.eat-dish-text span { font-size: 0.8125rem; line-height: 1rem; color: var(--hint-text); }
/* ⚠️ Прокрутка — у содержимого (как в телефоне, до 460), а окно целиком не прокручивается: общий
   `.modal` держит потолок 560 и свою прокрутку, и на низком экране кнопки уезжали за край, а две
   прокрутки сидели одна в другой. Низкий экран сжимает содержимое, а не окно. */
.modal.edit-meal, .modal.offer { max-height: calc(100vh - 2rem); overflow: visible; }
.edit-body {
    display: flex; flex-direction: column; overflow-y: auto;
    max-height: min(28.75rem, calc(100vh - 14rem));
}
/* ⚠️ Вес выше, чем у `.modal-alert form` (там столбец с промежутком 13): иначе всё решал бы порядок
   строк в файле, и промежутки окна «плыли» бы от перестановки. */
.modal-alert .edit-body form { display: contents; }
.edit-meta {
    margin: 0; font-size: 0.75rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2);
    color: var(--text-muted);
}
.edit-meta + .edit-meta { margin-top: 0.375rem; }
.edit-label {
    display: block; margin: 0.75rem 0 0.5rem;
    font-size: 1.0625rem; line-height: 1.3125rem; padding-block: calc((1.364em - 1.3125rem) / 2);
    font-weight: 800; color: var(--text);
}
.edit-label.edit-label-next { margin-top: 0.875rem; }
.edit-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* ⚠️ `<button>` вместо `<label>`: у кнопки браузер рисует свою рамку и заливку — сбрасываем. */
.edit-chips button.wchip { padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.edit-chips .wchip > span { font-size: 0.8125rem; line-height: 0.9375rem; }
.edit-body input.app-field { width: 100%; margin-top: 0.625rem; }
.edit-body .edit-label + input.app-field { margin-top: 0; }
.edit-other {
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    width: 100%; margin-top: 0.625rem; padding: 0.625rem 0;
    border: 0; border-radius: 999px; background: var(--green-container);
    color: var(--calorie); font: inherit; font-size: 0.75rem; line-height: 1rem; font-weight: 600;
    cursor: pointer;
}
.edit-other .ic { width: 1rem; height: 1rem; color: var(--green); }

.pill-outline.pill-48 { height: 3rem; }
/* Поле ввода — `AppTextField`: высота от 54, скругление 12, рамка 1 цветом `FieldBorder`
   ВНУТРЬ (как рамка карточки), текст 16/20, поля по бокам 14. */
input.app-field {
    min-height: 3.375rem; padding: 0 0.875rem;
    border: 0; box-shadow: inset 0 0 0 0.0625rem var(--field-border);
    border-radius: 0.75rem;
    font-size: 1rem; line-height: 1.25rem;
}
/* Дата таблеткой с календарём (`AppOutlineButton` с `DateRange`): само поле даты браузера
   спрятано — он печатал бы «16.09.2026» вместо «16 сент. 2026». */
.date-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; }
.date-pill .ic { width: 0.9375rem; height: 0.9375rem; }
.date-hidden { position: absolute; width: 1px !important; height: 1px; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.date-fixed { font-size: 0.8125rem; line-height: 1rem; font-weight: 700; color: var(--text-muted); }
/* Главная кнопка окна — `ShimmerButton` с `height = 46`, `fontSize = 16`: зелёный перелив, блик,
   поля по бокам 22. Приглушённая (`dimmed`) — не нажимается и без блика. */
.shimmer-btn {
    height: 3rem; padding: 0 1.375rem;
    border: 0; border-radius: 999px;
    background: var(--btn-green); box-shadow: var(--glow-green);
    color: #fff; font: inherit; font-size: 1.1875rem; font-weight: 700;
    position: relative; overflow: hidden; isolation: isolate; cursor: pointer;
}
.shimmer-btn.btn-46 { height: 2.875rem; font-size: 1rem; }
/* ⚠️ ПОДПИСЬ ПО ЦЕНТРУ У ССЫЛКИ-КНОПКИ (задача 11, 23.09.2026; Н266-381). У <button> браузер
   центрует подпись сам, а у ССЫЛКИ с тем же видом (окно «Сначала нужен аккаунт») она липла к верху
   таблетки. Флекс — только у ссылки: базовую кнопку держат окна поддержки, веса и «Хочу есть»
   (сторож `test_мерки_карточки`), а модификаторы `btn-50/56/full` ставят свой `display: flex`. */
a.shimmer-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Размеры `ShimmerButton` экрана «Подписка» и карточки подписки (Н264, C167/C169/C173).
   ⚠️ `display: flex` — В МОДИФИКАТОРЕ, а не в базовом правиле: базовое держат обычные кнопки окон
   (поддержка, вес, «Хочу есть»), а здесь кнопка бывает `<span>` внутри карточки-ссылки, и без
   флекса подпись не встаёт по центру. */
.shimmer-btn.btn-50, .shimmer-btn.btn-52, .shimmer-btn.btn-56, .shimmer-btn.btn-full {
    display: flex; align-items: center; justify-content: center;
    width: 100%; text-decoration: none;
}
/* Профиль, без подписки: 50/17, через 12 под пояснением. */
.shimmer-btn.btn-50 { height: 3.125rem; font-size: 1.0625rem; margin-top: 0.75rem; }
/* «Добавить» / «Сохранить» окна «Что вы съели?»: 52/17 (`AddFoodDialog`). */
.shimmer-btn.btn-52 { height: 3.25rem; font-size: 1.0625rem; }
/* «Оформить за 499 ₽»: 56/18. */
.shimmer-btn.btn-56 { height: 3.5rem; font-size: 1.125rem; }
/* По умолчанию телефона — 56/19 («Готово» в окне-вопросе). */
.shimmer-btn.btn-full { height: 3.5rem; }
/* «Отключить подписку» — белая таблетка 52 с красной надписью 17 (C173). */
.pill-danger.pill-52 { height: 3.25rem; font-size: 1.0625rem; }
/* «Добавить карту» — контурная 46 со значком 15 и отбивкой 6 (`AppOutlineButton(icon)`, C172). */
.pill-outline.pill-46 { height: 2.875rem; display: flex; align-items: center; justify-content: center; gap: 0.375rem; }
.pill-outline.pill-46 .ic { width: 0.9375rem; height: 0.9375rem; }
.shimmer-btn:disabled { opacity: .5; box-shadow: none; cursor: default; }
.shimmer-btn:disabled::after { animation: none; background: none; }
.pill-outline.pill-44 { height: 2.75rem; }
/* Подсказка под полем (`bodySmall` 12/16 серым); ошибка встаёт на её место красным. */
.field-hint { font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.field-hint.error { color: var(--danger); }
/* Кнопка-надпись — материальная `TextButton`: высота 40, поля 12, подпись 13 жирная цветом
   темы; выключенная — бледная и не нажимается. */
.text-btn {
    min-height: 2.5rem; padding: 0 0.75rem;
    border: 0; border-radius: 999px; background: transparent;
    color: var(--green-accent); font: inherit; font-size: 0.8125rem; line-height: 1rem; font-weight: 700;
    cursor: pointer;
}
.text-btn:disabled { color: var(--text); opacity: .38; cursor: default; }

/* ОКНО-СПИСОК — `AppListDialog`: по бокам окна 15, поля 21, заголовок 21/25 со значком 34,
   черта, список (до 460, прокрутка) с промежутком 13, черта и «Закрыть» надписью 16 справа. */
.modal.modal-list { width: min(23.8125rem, calc(100vw - 1.875rem)); max-width: none; padding: 1.3125rem; border: 0;
    /* ⚠️ Потолок — экран, а не общие 560 окон сайта: список внутри и так до 460 (как `heightIn(460)`
       телефона), а с заголовком и «Отмена» окно выше 560 — и «Отмена» уезжала под прокрутку
       (окно «Блюда плана», 24.09.2026). */
    max-height: calc(100vh - 2rem); }
.modal-list .list-box { display: flex; flex-direction: column; gap: 0.8125rem; }
.modal-list .list-body { display: flex; flex-direction: column; gap: 0; max-height: 28.75rem; overflow-y: auto; }
/* ⚠️ Промежуток 13 между подписью, чертами и строками (`AppListDialog`: `spacedBy(13)`, Н264).
   Голый `.list-gap` был слабее правила выше и не срабатывал нигде — строки слипались с чертами. */
.modal-list .list-body.list-gap { gap: 0.8125rem; }
/* Заголовок окна-списка — 21/25, как `AlertDialog`; `.confirm-head b` (19/23 окна-вопроса) перебивал его. */
.modal-list .confirm-head b { font-size: 1.3125rem; line-height: 1.5625rem; padding-block: calc((1.364em - 1.5625rem) / 2); }
.list-action {
    align-self: flex-end; padding: 0.375rem 0.625rem;
    border: 0; border-radius: 999px; background: transparent;
    color: var(--green); font: inherit; font-size: 1rem; line-height: 1.1875rem; font-weight: 700; cursor: pointer;
}
.list-empty { margin: 0; font-size: 0.9375rem; line-height: 1.1875rem; color: var(--text-muted); }
/* Строка платежа (`SubHistoryDialog`): поля 9 сверху-снизу, слева «Подписка на…» 15/18 полужирно,
   дата 13/16 бледно, «Чек» 13/16 зелёным жирно; справа сумма 16/19 жирно и слово статуса 13/16. */
.pay-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0; }
.pay-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pay-main b { font-size: 0.9375rem; line-height: 1.125rem; font-weight: 600; color: var(--text); }
.pay-main span, .pay-side span { font-size: 0.8125rem; line-height: 1rem; color: var(--hint-text); }
.pay-receipt { font-size: 0.8125rem; line-height: 1rem; font-weight: 700; color: var(--green-accent); text-decoration: none; }
.pay-side { display: flex; flex-direction: column; align-items: flex-end; }
.pay-side b { font-size: 1rem; line-height: 1.1875rem; font-weight: 700; color: var(--text); }
.pay-side span.ok { color: var(--green-accent); }
.modal-list .modal-sep + .pay-row, .modal-list .pay-row + .modal-sep { margin: 0; }

/* «Отмена» — `AppOutlineButton`: 40, контур зелёным, надпись 14 жирная. */
.pill-outline {
    /* ⚠️ ПОДПИСЬ ПО ЦЕНТРУ (задача заказчика 11, 23.09.2026). Высота задана, а выравнивания не
       было: у <button> браузер центрует сам, а у ССЫЛКИ с тем же видом (окно «Сначала нужен
       аккаунт» — это две ссылки) подпись липла к верхнему краю таблетки. В телефоне кнопка
       центрует подпись всегда. */
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
    width: 100%; height: 2.5rem; padding: 0 1rem;
    border-radius: 999px;
    border: 0; box-shadow: inset 0 0 0 0.0625rem var(--green-accent);
    background: var(--surface); color: var(--green-accent);
    font: inherit; font-size: 0.875rem; font-weight: 700;
    cursor: pointer;
}


/* ---------------------------------------------------------------------------
   ОСТАЛЬНЫЕ СТРАНИЦЫ (пока не переносились экран за экраном — вид общий)
   --------------------------------------------------------------------------- */
.socials { display: flex; gap: 0.5rem; margin: 0.625rem 0 0.25rem; flex-wrap: wrap; }
.social {
    width: 2.125rem; height: 2.125rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.75rem; font-weight: 700; text-decoration: none; letter-spacing: 0.0125rem;
}
.social:hover { opacity: .85; }
/* В карточке профиля кружки крупнее — 40 dp, как в телефоне (`SocialLinks`). */
.card .socials { gap: 0.625rem; margin: 0.625rem 0 0; }
/* Подпись буквами в кружке — `labelMedium` 12 жирная, как `SocialLinks` телефона (Н264, NEW-2). */
.card .social { width: 2.5rem; height: 2.5rem; font-size: 0.75rem; }

/* Строка блюда в списках (план, рецепты) — маленькая миниатюра слева. */
.meal { display: flex; gap: 0.875rem; padding: 0.875rem 0; border-bottom: 0.0625rem solid var(--outline); }
.meal:last-child { border-bottom: none; }
.meal .meal-photo { width: 5.75rem; height: 5.75rem; border-radius: var(--radius-inner); }
.meal .meal-photo.no-photo .ic { width: 2.125rem; height: 2.125rem; }
.meal-type { color: var(--green-accent); font-weight: 700; font-size: 0.875rem; }
.meal .meal-title { font-size: 1rem; line-height: 1.25rem; margin: 0.125rem 0; }
.meal .meal-actions { flex-wrap: wrap; margin-top: 0.5rem; }
.meal.skipped .meal-title, .meal.skipped .meal-photo { opacity: .55; }

.tiles-3 { grid-template-columns: repeat(3, 1fr); }
.tiles-3 .tile { text-align: center; padding: 0.875rem 0.5rem; }

/* «Уведомления» — `NotificationCard` телефона (Н264-073…078): поля 16, кружок 46 со значком 22,
   промежуток 14, заголовок 15/19 жирный, под ним 2 и текст 14/20 серым; между карточками 12. */
.card.notif { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.75rem; }
.notif-icon {
    flex: none; width: 2.875rem; height: 2.875rem; border-radius: 50%;
    background: var(--green-container); color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.notif-icon .ic { width: 1.375rem; height: 1.375rem; }
.notif-text { flex: 1; min-width: 0; }
/* ⚠️ Строка 19 НИЖЕ самих букв Nunito (15 × 1,364 = 20,5). Телефон такую строку не режет:
   одна строка у него 20,5, две — 20,5 + 19. Поэтому строка телефона и добавка сверху и снизу. */
.notif-title {
    display: block; font-size: 0.9375rem; line-height: 1.1875rem;
    padding-block: calc((1.364em - 1.1875rem) / 2); font-weight: 700; color: var(--text);
}
.notif-body { display: block; margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }

/* --- Статистика --- */
.macro-tiles.stats-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.stats-summary .macro-tile { padding: 0.875rem 0.5rem; border-radius: 1.0625rem; }
.stats-summary .macro-tile.kcal b { color: var(--calorie); }
.stats-goal { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
.stats-goal + #cal-chart { margin-top: 0.625rem; }
.chart { position: relative; display: flex; align-items: flex-end; gap: 0.3125rem; height: 9.375rem; margin-top: 0.875rem; }
#cal-chart { gap: 0.375rem; margin-top: 0; }
#cal-chart.month { gap: 0.125rem; }
/* ⚠️ Столбик калорий — КНОПКА (в приложении день нажимается и раскрывает список того дня),
   поэтому гасим всё браузерное оформление кнопки: рамку, заливку, отступы и шрифт. */
.chart-col {
    flex: 1; height: 100%; display: flex; align-items: flex-end; position: relative;
    padding: 0; border: 0; background: none; font: inherit; cursor: pointer; -webkit-appearance: none;
}
.chart-bar { display: block; width: 100%; min-height: 0.125rem; border-radius: 0.375rem 0.375rem 0 0; background: var(--green); }
.chart-bar.over { background: var(--orange); }
/* ⚠️ ЧИСЛО НАД ВЫБРАННЫМ СТОЛБИКОМ (Н246, 14.09.2026). В телефоне над сегодняшним днём висит
   тёмная плашка с калориями; на сайте её не было, и столбик ничего не говорил. */
.chart-value {
    display: none;
    position: absolute; left: 50%; transform: translateX(-50%);
    /* ⚠️ Плашка висит НАД СТОЛБИКОМ, а не над всей колонкой: высоту столбика знает
       только шаблон, поэтому `bottom` приходит оттуда inline-стилем. Без этого
       число вставало у самой линии нормы, вдалеке от своего дня. */
    font-style: normal; font-size: 0.75rem; line-height: 0.875rem; font-weight: 800;
    color: #fff; background: var(--text);
    padding: 0.1875rem 0.5rem; border-radius: 0.625rem; white-space: nowrap;
}
.chart-col.sel .chart-value { display: block; }
/* Выбранный день: столбик ярче, остальные приглушены — как подсветка выбранного дня в телефоне. */
.chart-col .chart-bar { opacity: .55; transition: opacity .12s; }
.chart-col.sel .chart-bar, .chart-col:hover .chart-bar { opacity: 1; }
.chart-col .chart-bar.empty { background: var(--green-container); opacity: 1; }
.chart-labels span.sel { color: var(--text); font-weight: 700; }
.chart-goal { position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none; border-top: 0.125rem dashed var(--text-muted); }
.chart-labels { display: flex; gap: 0.375rem; margin-top: 0.375rem; }
.chart-labels span { flex: 1; min-width: 0; text-align: center; font-size: 0.75rem; color: var(--text-muted); overflow: hidden; }
/* ⚠️ ПОДПИСИ ДНЕЙ — ДВУМЯ ВИДАМИ, КАК В ПРИЛОЖЕНИИ (`StatisticsScreen`), а не «каждая пятая
   на узком экране». Столбиков десять и меньше (неделя) — под каждым две строчки: день недели
   и число. Столбиков больше (месяц) — вместо частокола чисел только край, подсказка и край. */
.chart-labels span b { display: block; font-size: 0.625rem; line-height: 0.8125rem; font-weight: 400; }
.chart-labels span i { display: block; font-size: 0.5625rem; line-height: 0.75rem; font-style: normal; }
.chart-labels span.sel i { color: var(--green-accent); }
.chart-labels span.sel b { color: var(--text); font-weight: 700; }
.chart-ends { display: flex; justify-content: space-between; margin-top: 0.375rem; font-size: 0.75rem; color: var(--text-muted); }
/* Карточка «что вы ели в выбранный день» под графиком (в приложении — `SelectedDayCard`). */
.day-entry { display: flex; align-items: center; gap: 0.625rem; padding: 0.3125rem 0; }
.day-entry .dot { flex: none; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--green); }
.day-entry .dot.own { background: var(--orange); }
.day-entry .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-card .n { color: var(--calorie); font-size: 0.8125rem; font-weight: 700; }

.chart-weight { height: 6.875rem; }
.chart-dot { position: absolute; left: 50%; width: 0.5625rem; height: 0.5625rem; margin-left: -0.25rem; border-radius: 50%; background: var(--green); }
.macro-bars { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.625rem; }
.bar { height: 0.625rem; border-radius: 0.3125rem; background: var(--surface-2); overflow: hidden; margin-top: 0.3125rem; }
.bar span { display: block; height: 100%; border-radius: 0.3125rem; }

/* --- Замена продукта в списке покупок --- */
.subs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--text-muted); }
.sub-btn {
    border: 0.0625rem solid var(--chip-border); background: var(--surface); color: var(--green-accent);
    border-radius: var(--radius-button); padding: 0.1875rem 0.625rem; font-size: 0.8125rem; font-family: inherit; cursor: pointer;
}
.sub-btn:hover { background: var(--green-container); }

/* --- Плитки-переходы --- */
.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.375rem, 1fr)); gap: 0.75rem; }
.tile { display: block; text-decoration: none; color: inherit; margin-bottom: 0; }
.tile b { display: block; margin-bottom: 0.25rem; }
.tile:hover { border-color: var(--green-border-soft); }

/* Анкета шагами: полоса пройденного сверху, «Назад / Далее» снизу. */
.wiz-head { max-width: 40rem; margin: 0 0 0.875rem; }
.wiz-head .cook-progress { margin-bottom: 0.375rem; }
.wiz-nav { max-width: 40rem; margin-top: 1.125rem; }

/* --- Лендинг (задача 30.7): рассказ со снимками экранов и витрина блюд --- */
.hero-robot { display: block; width: 5.5rem; height: 5.5rem; margin: 0 auto 0.875rem; }
.land-title { font-size: 1.375rem; line-height: 1.6875rem; font-weight: 800; letter-spacing: -.02em; margin: 1.75rem 0 0.75rem; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 0.875rem; }
.shot {
    background: var(--card-bg); border: 0.0625rem solid var(--outline);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 0.875rem; text-decoration: none; color: inherit; display: block;
}
.shot img {
    display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
    border-radius: var(--radius-inner); margin-bottom: 0.625rem; background: var(--surface-2);
}
/* ⚠️ СНИМКИ ЭКРАНОВ ПОКАЗЫВАЕМ ЦЕЛИКОМ (`contain`), а не подрезаем по рамке.
   Три снимка из четырёх — узкий высокий кадр телефона, а «Неделя вперёд» — широкий кусок
   экрана. Подрезка по рамке 3:4 срезала ему левый и правый край, и слова обрывались
   на полуслове: «Ем друг…», «…и скол…». Правило переживёт пересъёмку снимков, какими бы
   они ни пришли. ФОТО БЛЮД в витрине ниже — наоборот, подрезаются (`cover`): у еды края
   не жалко, а поля вокруг тарелки смотрелись бы дырой. */
.shot-intro img { object-fit: contain; object-position: center; }
.shot b { display: block; font-size: 1rem; line-height: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.shot p { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.1875rem; color: var(--text-muted); }
a.shot:hover { border-color: var(--green-border-soft); }

/* --- Знакомство и вход: общая колонка, заголовок и подзаголовок (знакомство, макет 6a) --- */
.auth { max-width: 26.25rem; margin: 0 auto; padding-top: 0.5rem; }
.auth h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; letter-spacing: -.03em; text-align: center; margin: 0 0 0.5rem; }
.auth .lead { text-align: center; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.25rem; margin: 0 0 1.375rem; }
.auth-note { text-align: center; color: var(--text-muted); font-size: 0.8125rem; line-height: 1.125rem; margin: 0.5rem 0 0; }

/* ---------------------------------------------------------------------------
   ВХОД И РЕГИСТРАЦИЯ — `AuthScreen` телефона (Н264, 17.09.2026). Числа — dp телефона ÷ 16.
   ⚠️ ПРАВИЛА — НА `.auth-screen`, А НЕ НА `.auth`: `.auth` носит и знакомство, и правка входа
   иначе сдвинула бы его кадры.
   ⚠️ Две ветки чисел, как `if (isRegister)` в телефоне: на регистрации робот, заголовок и
   промежутки меньше — полей больше.
   --------------------------------------------------------------------------- */
/* Поля экрана 24 (16 колонки + 8), сверху 32 / 27, снизу 12. */
.auth.auth-screen { padding: 2rem 0.5rem 0.75rem; }
.auth.auth-screen.is-register { padding-top: 1.6875rem; }
/* Робот 184 / 136, под ним 10 / 6. */
.auth-screen .robot { display: block; width: 11.5rem; height: 11.5rem; margin: 0 auto 0.625rem; }
.auth-screen.is-register .robot { width: 8.5rem; height: 8.5rem; margin-bottom: 0.375rem; }
/* «Добро пожаловать» 31/35 / 28/32, жирность 700, разрядка −0.02em; под ним 6 / 4.
   ⚠️ СТРОКА НЕ НИЖЕ САМОГО ШРИФТА (замер 17.09.2026). Если строка в телефоне задана меньше
   высоты букв Nunito (1.364 кегля), Compose её не режет: заголовок знакомства 26/31 на эмуляторе
   занимает 35,8, заголовок окна 21/25 — 29. Здесь 31/35 даёт 42,7, а 28/32 — 38,5, и на столько же
   ниже встаёт всё под заголовком. `max()` повторяет это правило, а не вписывает готовое число. */
.auth.auth-screen h1 { font-size: 1.9375rem; line-height: max(2.1875rem, 1.364em); font-weight: 700; letter-spacing: -.02em; margin: 0 0 0.375rem; }
.auth.auth-screen.is-register h1 { font-size: 1.75rem; line-height: max(2rem, 1.364em); margin-bottom: 0.25rem; }
/* Подзаголовок 15 / 14, строка 21; под ним 19 / 10. */
.auth.auth-screen .lead { font-size: 0.9375rem; line-height: 1.3125rem; margin: 0 0 1.1875rem; }
.auth.auth-screen.is-register .lead { font-size: 0.875rem; margin-bottom: 0.625rem; }
/* Карточка формы — общая `.card`; внутри 14 по бокам, сверху 7 / 5, снизу 16 / 11. */
.card.auth-card { margin: 0; padding: 0.4375rem 0.875rem 1rem; }
.is-register .card.auth-card { padding: 0.3125rem 0.875rem 0.6875rem; }
/* Вкладки-пилюля (`AuthTabs`): подложка GreenContainer, скругление 11, отступ 3; вкладка —
   скругление 9, по высоте 11, текст 18 жирный; выбранная залита зелёным, текст белый.
   Под вкладками 15 / 12. */
.auth-tabs { display: flex; padding: 0.1875rem; border-radius: 0.6875rem; background: var(--green-container); margin-bottom: 0.9375rem; }
.is-register .auth-tabs { margin-bottom: 0.75rem; }
.auth-tabs a {
    flex: 1; padding: 0.6875rem 0; border-radius: 0.5625rem;
    text-align: center; text-decoration: none;
    /* Строка 24, но не ниже букв 18-го кегля (24,6) — то же правило, что у заголовка. */
    font-size: 1.125rem; line-height: max(1.5rem, 1.364em); font-weight: 700; color: var(--green-accent);
}
.auth-tabs a[aria-selected="true"] { background: var(--green); color: #fff; }
/* Поля (`AuthField`): высота 56, скругление 11, заливка фоном темы, рамка 1 Divider ВНУТРЬ,
   при фокусе зелёная 2; значок 22 зелёный в ячейке 48, текст и подсказка 17. Между полями 10.
   ⚠️ Селектор с `[name]` — сильнее общего правила полей ниже по файлу. */
.auth-fields { display: flex; flex-direction: column; gap: 0.625rem; }
.auth-field { position: relative; }
.auth-field .ic-lead {
    position: absolute; left: 0.8125rem; top: 50%; transform: translateY(-50%);
    width: 1.375rem; height: 1.375rem; color: var(--green); pointer-events: none;
}
.auth-field input[name] {
    width: 100%; height: 3.5rem; padding: 0 1rem 0 3.25rem;
    border: 0; border-radius: 0.6875rem;
    background: var(--bg); box-shadow: inset 0 0 0 0.0625rem var(--divider);
    color: var(--text); font-size: 1.0625rem;
}
.auth-field input[name]::placeholder { color: var(--text-muted); opacity: 1; }
.auth-field input[name]:focus { outline: none; box-shadow: inset 0 0 0 0.125rem var(--green); }
/* Галочки (`ConsentBlock`): над блоком 6; ряд — ячейка 48 с квадратом 20 и текст 12/16.
   Обязательная обведена зелёным, у рассылки рамка и текст серые. Ссылки зелёные с подчёркиванием. */
.auth-consent { margin-top: 0.375rem; }
.auth-check {
    display: grid; grid-template-columns: 3rem 1fr; align-items: center; min-height: 3rem;
    font-size: 0.75rem; line-height: 1rem; color: var(--text); cursor: pointer;
}
.auth-check input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; justify-self: center; margin: 0;
    width: 1.25rem; height: 1.25rem; border: 0.125rem solid var(--green); border-radius: 0.125rem;
    background: transparent center / 0.875rem no-repeat; cursor: pointer;
}
.auth-check input[type="checkbox"]:checked {
    background-color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.auth-check input[type="checkbox"]:focus-visible { outline: 0.125rem solid var(--green); outline-offset: 0.125rem; }
.auth-check a { color: var(--green); text-decoration: underline; }
.auth-check.muted { color: var(--text-muted); }
.auth-check.muted input[type="checkbox"]:not(:checked) { border-color: var(--text-muted); }
/* Главная кнопка: над ней 15 / 13. */
.auth-go { margin-top: 0.9375rem; }
.is-register .auth-go { margin-top: 0.8125rem; }
/* Ошибка или подсказка — сразу под кнопкой: 10, текст 14/20 по центру; ошибка красным. */
.auth-msg { margin: 0.625rem 0 0; font-size: 0.875rem; line-height: 1.25rem; text-align: center; color: var(--text-muted); }
.auth-msg.error { color: var(--danger); }
/* «Забыли пароль?» — `TextButton` 40 внутри карточки, текст 16 жирный. */
.text-btn.auth-forgot { display: block; margin: 0 auto; font-size: 1rem; }
/* «или» чертой по бокам: над и под ним 19 / 10, текст 14 в строке 24, поля 12. */
.auth-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.1875rem 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.5rem; }
.is-register .auth-or { margin: 0.625rem 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 0.0625rem; background: var(--divider); }
/* «Потом» — `TextButton` 40: над ним 26 / 14, текст 17 жирный с подчёркиванием.
   Подпись 13.5/19 серым, снизу 18. */
.auth-guest {
    display: flex; align-items: center; justify-content: center; width: fit-content;
    min-height: 2.5rem; margin: 1.625rem auto 0; padding: 0 0.75rem;
    font-size: 1.0625rem; line-height: 1rem; font-weight: 700; color: var(--green-accent); text-decoration: underline;
}
.is-register .auth-guest { margin-top: 0.875rem; }
.auth-guest-hint { margin: 0 0 1.125rem; font-size: 0.84375rem; line-height: 1.1875rem; color: var(--text-muted); text-align: center; }

/* КАРТОЧКА «ПЛАН ЗАКОНЧИЛСЯ» — ОДНА НА «ПЛАН» И «КОРЗИНУ» (Н186, Н266-344). Оранжевая
   рамка, честная дата и кнопка сборки; в Корзине она стоит ВМЕСТО списка покупок.
   Раньше правило жило строкой `style="…"` внутри «Плана» — во второй половине его
   пришлось бы переписывать заново, и карточки разошлись бы. */
/* ⚠️ ОБВОДКА КАРТОЧКИ — `box-shadow`, А НЕ `border` (правило `.card` выше, находка Н243):
   стоявший здесь `border-color: var(--orange)` не рисовал ничего вовсе, и карточка «План
   закончился» была обычной серой. В телефоне она обведена оранжевым (`BorderStroke(1.dp, Orange)`),
   и это единственное, что отличает её от простой карточки. */
.card.plan-ended { box-shadow: inset 0 0 0 0.0625rem var(--orange), var(--shadow-card); margin-bottom: 0.875rem; }
.card.plan-ended p { margin: 0.375rem 0 0.75rem; }

/* «ПРИЛОЖЕНИЕ НА ТЕЛЕФОН» НАД ФОРМОЙ ВХОДА (просьба заказчика 23.09.2026). Блок стоял внизу
   страницы, и гость до него не долистывал; наверху он не должен отодвигать поля за нижний край
   экрана — поэтому на «Входе» карточка теснее обычной, а подпись про установку из браузера —
   мельче (как подпись под «Потом»). В «Профиле» блок остаётся обычной карточкой. */
.auth-screen [data-app-download] { padding: 0.8125rem 0.875rem 0.875rem; }
.auth-screen [data-app-download] > .hero-actions { margin-top: 0.5rem; }
.auth-screen [data-app-download] > p { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.125rem; }
/* Пока идёт вход: вкладки, Яндекс, «Забыли пароль?» и «Потом» не нажимаются (`enabled = !loading`). */
.auth-screen.is-loading .auth-tabs a, .auth-screen.is-loading .btn-yandex,
.auth-screen.is-loading .auth-forgot, .auth-screen.is-loading .auth-guest, .auth-screen.is-loading .auth-go { pointer-events: none; }

/* ГЛАВНАЯ КНОПКА РОВНЫМ ЗЕЛЁНЫМ — `ShimmerButton` без `gradient` (Н264, NEW-2): вход,
   регистрация, «Согласен». Высота, свечение и блик — от `.btn-primary`. */
.btn-primary.btn-flat { background: var(--green); }
/* КНОПКА ЗАНЯТА — белый кружок 20 рядом с подписью (промежуток 10), подпись бледнее, блик стоит.
   Одно правило на главные кнопки (`ShimmerButton(loading = true)`). */
.btn-primary .spin {
    display: none; width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%;
    border: 0.125rem solid transparent; border-top-color: #fff; border-right-color: #fff;
    animation: spin 0.9s linear infinite;
}
.is-loading .btn-primary { gap: 0.625rem; cursor: default; color: rgba(255, 255, 255, .85); }
.is-loading .btn-primary .spin { display: inline-block; }
.is-loading .btn-primary::after { animation: none; background: none; }

/* ОКНА ЭКРАНА ВХОДА.
   Документ (`DocumentDialog`): текст 12/16, прокручивается до 460; пометка «черновик» 11/16
   зелёным через 12. */
.auth-doc .doc-body { gap: 0; max-height: 28.75rem; overflow-y: auto; }
/* ⚠️ Окно целиком выше общего потолка окон (560): заголовок, 460 текста и кнопка. Потолок резал
   его, и прокручивался не текст, а всё окно вместе с «Понятно» — у телефона кнопка стоит всегда. */
.modal.auth-doc { max-height: calc(100vh - 3rem); }
.auth-doc .doc-text { margin: 0; white-space: pre-line; font-size: 0.75rem; line-height: 1rem; }
.auth-doc .doc-draft { margin: 0.75rem 0 0; font-size: 0.6875rem; line-height: 1rem; color: var(--green-accent); }
/* Стрелка внутри прокручиваемого текста: без выхода за края — иначе у текста появится прокрутка вбок. */
.auth-doc .doc-body .scrollhint.in-modal { margin: -4rem 0 0; flex: none; }
/* «Восстановление пароля» (`ForgotPasswordDialog`): текст шага 14/20, поля через 12,
   «Выслать код заново» надписью по центру, «Новый код отправлен» 12/16, ошибка 14/20 через 10.
   Кнопки надписями: серая «Отмена» и зелёная полужирная главная; занята — зелёный кружок 18. */
.forgot-body { gap: 0; }
.forgot-step { margin: 0; font-size: 0.875rem; line-height: 1.25rem; }
/* Между текстом и полями — по 12 (`Spacer(12)` в `ForgotPasswordDialog`). */
.forgot-body > .float-field, .forgot-code > .float-field { margin-top: 0.75rem; }
/* Почта на втором шаге выключена, как `enabled = false` у телефона: бледная, код выпущен под неё
   (вид выключенного поля — общий `.float-field input:disabled`). */
.forgot-code { display: flex; flex-direction: column; }
.text-btn.forgot-resend { align-self: center; font-weight: 600; }
.forgot-note { font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.forgot-error { margin: 0.625rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--danger); }
.text-btn.forgot-cancel { color: var(--text-muted); }
.text-btn.forgot-go { display: inline-flex; align-items: center; justify-content: center; color: var(--green); font-weight: 600; }
.forgot-go .spin {
    display: none; width: 1.125rem; height: 1.125rem; border-radius: 50%;
    border: 0.125rem solid transparent; border-top-color: var(--green); border-right-color: var(--green);
    animation: spin 0.9s linear infinite;
}
#dlg-forgot.is-busy .forgot-go .spin { display: inline-block; }
#dlg-forgot.is-busy .forgot-go [data-forgot-label] { display: none; }
#dlg-forgot.is-busy .text-btn.forgot-go:disabled { opacity: 1; }

/* КНОПКА «ВОЙТИ ЧЕРЕЗ ЯНДЕКС ID» — ПО ПРАВИЛАМ ЯНДЕКСА (задание 100).

   ⚠️ ЭТО ЧУЖАЯ МАРКА. Брендбук (yandex.ru/dev/id/doc/ru/codes/buttons-design) запрещает менять
   цвет кнопки, толщину обводки и её содержимое: текст, значок и отступы между ними. Выбирать
   разрешено только размер и скругление — заказчик выбрал размер L (высота 56) и полное
   скругление (28).

   ⚠️ ЧИСЛА И ЦВЕТА — ЖЁСТКИЕ, БЕЗ ПЕРЕМЕННЫХ ПАЛИТРЫ И БЕЗ ТЁМНОЙ ТЕМЫ. Наша тема поменяется —
   кнопка Яндекса меняться не должна: она одинаковая на светлом и тёмном фоне. Ровно поэтому
   тут #000000, а не var(--on-surface).

   ⚠️ ЗЕРКАЛО ТЕЛЕФОНА: `YandexButton` в `AuthScreen.kt` — те же 56, 28, 24, #000000 и #FC3F1D. */
.btn-yandex {
    display: flex; align-items: center; justify-content: center; gap: 0.625rem;
    width: 100%; height: 3.5rem;              /* размер L — 56 px */
    border-radius: 1.75rem;                   /* полное скругление — 28 px */
    background: #000000;
    color: #FFFFFF;
    font-size: 1.125rem; font-weight: 700; text-decoration: none;
}
/* ⚠️ ЗНАК ЯНДЕКСА — ГОТОВЫЙ ВЕКТОР, ЗДЕСЬ ТОЛЬКО ЕГО РАЗМЕР (правка 11.09.2026).
   Раньше кружок рисовался этим правилом: красная заливка, круглая рамка и буква «Я» шрифтом.
   Теперь и красный, и сама фигура живут ВНУТРИ вектора (`_yandex_button.html`), а правилу
   остаётся одно — держать 24 px. Красить, обводить или менять форму знака отсюда НЕЛЬЗЯ:
   это чужая марка. Цвет знака сторожится там, где он теперь лежит, — в самой разметке. */
.btn-yandex-logo {
    display: block;
    width: 1.5rem; height: 1.5rem;            /* значок — 24 px */
    flex: 0 0 auto;                           /* кнопка узкая — знак не сплющивается */
}

/* Знакомство: снимок экрана, заголовок, текст и точки-шаги (макет 6a, `WelcomeScreen`).
   ⚠️ ЭКРАН ВО ВСЮ ВЫСОТУ, КАК В ТЕЛЕФОНЕ (Н264-169, 17.09.2026). В телефоне рамка снимка
   забирает всю высоту, что осталась от текста, точек и кнопок (`weight(1f)` + пропорция
   704:1180), и низ экрана всегда занят «Вход». На сайте рамка стояла числом 260 в ширину, и под
   кнопкой оставалась пустота; на Pixel 8 рамка выходила 260×436 против телефонных 287×482.
   Поля экрана 24 (16 колонки + 8), сверху 24, снизу 18 — числа телефона. */
.auth.welcome {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh; min-height: 34rem;
    padding: 0 0.5rem; box-sizing: border-box;
}
/* ⚠️ ЛЕНТА КАДРОВ: листается ПАЛЬЦЕМ ВПРАВО, как `HorizontalPager` в приложении.
   Кадры лежат в ряд, прокрутка вбок с «прилипанием» — палец тянет с настоящей инерцией.
   Полосу прокрутки прячем: она тут лишняя, кадры и так считаются точками. */
.wel-track {
    /* ⚠️ Промежуток 24, а не телефонные 16 (`pageSpacing`): в телефоне соседний кадр обрезан
       краем листалки, а здесь лента выходит к краям экрана, и при 16 соседний кадр выглядывал
       справа полоской в 8 точек. При 24 он начинается ровно за краем экрана. */
    display: flex; gap: 1.5rem;
    flex: 1 1 0; min-height: 0;               /* забирает всю высоту над точками — `weight(1f)` */
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* ⚠️ `scroll-behavior: smooth` ЗДЕСЬ НЕ СТАВИМ. С ним прокрутка из скрипта в части
       браузеров молча НЕ СРАБАТЫВАЕТ вовсе — стрелка нажимается, а лента стоит на месте
       (поймано на живом). Свайп пальцем и так идёт плавно, средствами самого браузера,
       а стрелка просто переставляет кадр. */
    scrollbar-width: none;
    /* Кадры во всю ширину колонки — вылезают за её поля, чтобы соседний не выглядывал краем. */
    margin: 0 -1.5rem; padding: 0 1.5rem;
    /* Кадр прилипает к полю ленты, а не к краю экрана: без этого лента сдвигалась на 24 влево. */
    scroll-padding: 0 1.5rem;
    outline: none;
}
.wel-track::-webkit-scrollbar { display: none; }
/* Кадр: сверху 24, рамка на всю оставшуюся высоту, 22, заголовок, 9, подпись. */
.welcome .wel-slide {
    flex: 0 0 100%; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center;
    min-width: 0; min-height: 0; padding-top: 1.5rem; box-sizing: border-box;
    text-align: center;
}
/* Место под рамку: всё, что осталось по высоте. Сама рамка берёт эту высоту целиком, а ширину —
   по пропорции 704:1180 (так высота у неё «настоящая», и пропорция считается от неё). */
.wel-shot { flex: 1 1 0; min-height: 0; width: 100%; display: flex; justify-content: center; }
/* Снимок в белой рамке с мягкой тенью (макет и `WelcomeScreen`): скругление 21, обводка 1,
   поле 5; картинка вписывается ЦЕЛИКОМ — один из снимков широкий, и обрезка съела бы у него
   половину. */
.wel-frame {
    display: block; height: 100%; max-width: 100%;
    aspect-ratio: 704 / 1180;
    padding: 0.3125rem; box-sizing: border-box;
    background: var(--surface);
    border: 0.0625rem solid var(--outline);
    border-radius: 1.3125rem;
    box-shadow: var(--shadow-pop);
}
/* Подложка снимка — `ShotBackdrop` телефона, своим цветом в каждой теме. */
.welcome .wel-slide img {
    display: block; width: 100%; height: 100%;
    object-fit: contain;
    border-radius: var(--radius-card);
    background: var(--shot-backdrop);
}
/* Заголовок 26/31 ExtraBold без разрядки; строка не ниже букв Nunito (1.364 кегля) — так рисует
   телефон: на эмуляторе заголовок занимает 35,8. Над ним 22. */
.welcome .wel-slide h2 {
    font-size: 1.625rem; line-height: max(1.9375rem, 1.364em);
    font-weight: 800; letter-spacing: 0; margin: 1.375rem 0 0;
}
/* Подпись 13/20 серым, над ней 9. Снизу отступа нет: до точек 18 задают сами точки. */
.welcome .wel-slide .lead { font-size: 0.8125rem; line-height: 1.25rem; margin: 0.5625rem 0 0; }
/* Точки-страницы и стрелка: над ними 18, между точками 6. Активная точка — полоска 17×7,
   остальные — кружки 7×7 цветом `DotIdle`. */
.wel-dots { display: flex; flex: none; justify-content: center; align-items: center; gap: 0.375rem; margin: 1.125rem 0 0; }
.wel-dots span { width: 0.4375rem; height: 0.4375rem; border-radius: 999px; background: var(--dot-idle); transition: width .15s; }
/* ⚠️ СТРЕЛКА — БЛЕДНО-ЗЕЛЁНАЯ, как в приложении: кружок 34 с заливкой `GreenContainer`
   и зелёной стрелкой 18 внутри. Сплошная зелёная кнопка спорила бы с «Начать» под ней.
   От последней точки до кружка 22 (6 + 10 + 6 в телефоне): промежуток ряда 6 плюс 16. */
.wel-arrow {
    width: 2.125rem; height: 2.125rem; margin-left: 1rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--green-container); color: var(--green);
}
.wel-arrow .ic { width: 1.125rem; height: 1.125rem; }
.wel-dots span.on { width: 1.0625rem; border-radius: 999px; background: var(--green); }
/* «Начать» — над ней 22, ровный зелёный (`ShimmerButton` без перелива). */
.welcome .wel-start { flex: none; margin-top: 1.375rem; }
/* «Вы уже наш пользователь? Вход»: над строкой 15, снизу 18. Текст 13 в строке 24; «Вход» жирный,
   подчёркнут, поле нажатия 8 по высоте и 4 по бокам — строка выходит 40, как в телефоне. */
.welcome .wel-login {
    display: flex; flex: none; justify-content: center; align-items: center; gap: 0.3125rem;
    margin: 0.9375rem 0 1.125rem;
    font-size: 0.8125rem; line-height: 1.5rem; color: var(--text-muted);
}
.welcome .wel-login a { padding: 0.5rem 0.25rem; font-weight: 700; color: var(--green-accent); text-decoration: underline; }

/* --- Серия и достижения (макеты 18a-18d) ---
   Зелёная карточка серии, календарь месяца кружками, плитки достижений. */
/* ⚠️ ЗЕЛЁНАЯ КАРТОЧКА — В ПОРЯДКЕ ТЕЛЕФОНА (Н264, C186, 16.09.2026; `StreakHeroCard`).
   Было: ступень белой таблеткой СПРАВА от числа, под числом «Так держать» (в телефоне такой
   строки нет), полоса БЕЛАЯ и ДО текста «До ступени…», «Лучшая серия» белой звездой и только
   когда она больше нынешней. Стало сверху вниз: таблетка «★ ступень» (звезда золотая) → число
   37/39 → «До ступени…» 15/19 → полоса 7 золотом → черта → кубок и прощённые пропуски золотом.
   Заливка — по диагонали из левого верхнего угла, как `Brush.linearGradient`, поля 15.
   ⚠️ 120deg, А НЕ `to bottom right` (проверка C186, 17.09.2026). В телефоне у градиента нет
   start/end — он идёт ВДОЛЬ диагонали (0,0)→(w,h). `to bottom right` в CSS ведёт полосы вдоль
   ДРУГОЙ диагонали: у карточки 380×225 переход шёл под 59° к горизонтали, почти сверху вниз,
   а в телефоне под 31°, почти слева направо. Угол вдоль диагонали = 90° + atan(h/w) ≈ 120.6°
   для обычной карточки с серией; точно при любой высоте CSS этого не умеет, 120deg ближе всего.
   ⚠️ Правила с приставкой `.streak-hero`: без неё `.track`, `.line`, `.fact` стали бы общими
   на весь сайт, а старое `.streak-hero b` перебивало бы новое число по силе селектора. */
.streak-hero {
    background: linear-gradient(120deg, #4CAE51, #2E7D32); box-shadow: var(--glow-green);
    color: #fff; border: 0; padding: 0.9375rem;
}
/* Таблетка ступени: белый 17%, поля 10/5, звезда 13, 6, надпись 14 жирная (строка 24 — у
   телефонного `Text` без своей высоты строки она берётся из `bodyLarge`); под ней 9. */
.streak-hero .hero-tier {
    display: flex; width: fit-content; align-items: center; gap: 0.375rem;
    margin-bottom: 0.5625rem; padding: 0.3125rem 0.625rem; border-radius: 999px;
    background: rgba(255, 255, 255, .17);
    font-size: 0.875rem; line-height: 1.5rem; font-weight: 700;
}
.streak-hero .hero-tier .ic { width: 0.8125rem; height: 0.8125rem; color: var(--streak-gold); }
.streak-hero .hero-days { display: block; font-size: 2.3125rem; line-height: 2.4375rem; font-weight: 800; letter-spacing: -.03em; }
.streak-hero .hero-hint { display: block; margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.125rem; color: rgba(255, 255, 255, .92); }
.streak-hero .hero-next { margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 600; color: rgba(255, 255, 255, .92); }
.streak-hero .line { height: 0.0625rem; background: rgba(255, 255, 255, .22); margin: 0.75rem 0 0.6875rem; }
.streak-hero .fact { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.9375rem; line-height: 1.1875rem; color: rgba(255, 255, 255, .95); }
.streak-hero .fact + .fact { margin-top: 0.4375rem; }
.streak-hero .fact .ic { width: 0.875rem; height: 0.875rem; color: var(--streak-gold); }
.streak-hero .track { height: 0.4375rem; border-radius: 999px; background: rgba(255, 255, 255, .24); overflow: hidden; margin-top: 0.5rem; }
.streak-hero .track span { display: block; height: 100%; border-radius: 999px; background: var(--streak-gold); }

/* Календарь месяца: семь колонок, кружок на каждый день. */
/* ⚠️ КРУЖОК ДНЯ — 30 dp, А НЕ ВО ВСЮ ЯЧЕЙКУ (Н256). На сайте он растягивался на ширину
   колонки (около 50 dp), и календарь занимал в полтора раза больше места, чем в телефоне. */
/* ⚠️ НО КЛЕТКА ДНЯ — КВАДРАТ НА ШИРИНУ КОЛОНКИ (Н264, C191, 16.09.2026). В телефоне кружок 30
   стоит по центру квадрата `weight(1f).aspectRatio(1f)`, ряды идут через 5: при ширине 412 шаг
   ряда ≈56. Сайт ставил сами кружки через 12, шаг выходил 42, и календарь был ниже телефонного
   на треть. Квадрат — `span.cal-day`, кружок внутри него — `span.cell`.
   ⚠️ НЕ `.day` (проверка C191, 17.09.2026): это имя занято лентой дат плана, и её общее правило
   (ширина 54, поля 13/4, фон, рамка, тень) превращало каждый день в плитку — сетка 7×54 = 378
   не влезала в карточку шириной 356. */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3125rem 0; justify-items: stretch; }
.cal .cal-day { aspect-ratio: 1 / 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
/* Карточка календаря — поля 12 (`StreakCalendarCard`), а не 16, как у обычной. */
.card.cal-card { padding: 0.75rem; }
/* Шапка дней недели: в приложении она есть, на сайте её не было — календарь читался вслепую.
   Высота строки 24: своей у телефонного `Text` нет, она берётся из `bodyLarge`. */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 0.375rem; }
.cal-week span {
    text-align: center; font-size: 0.8125rem; line-height: 1.5rem; font-weight: 700; color: var(--text-muted);
}
.cal-week span.wknd { color: var(--calendar-weekend); }
/* ⚠️ У ДНЯ БЕЗ СОСТОЯНИЯ — ТОНКОЕ КОЛЬЦО, А НЕ СЕРАЯ ЗАЛИВКА (Н256, 14.09.2026).
   В телефоне (`DayDot`) залиты только засчитанные, прощённые и пропущенные дни; остальные —
   прозрачные с обводкой в 1 dp. Сайт заливал серым ВСЕ числа месяца, и календарь читался как
   сплошная стена кружков, где отмеченные дни терялись. */
.cal .cell {
    width: 1.875rem; height: 1.875rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem; font-weight: 700; color: var(--streak-idle-text);
    background: none; box-shadow: inset 0 0 0 0.0625rem var(--streak-idle-ring);
}
.cal .cell.ok { background: var(--green); color: #fff; }
/* Прощённый пропуск — СВЕТЛО-ЗЕЛЁНЫЙ с тонкой обводкой, пропуск — СЕРЫЙ (как в приложении). */
.cal .cell.frozen {
    background: var(--green-container); color: var(--green-accent);
    box-shadow: inset 0 0 0 0.0625rem var(--streak-frozen-ring);
}
.cal .cell.miss { background: var(--streak-miss-fill); color: var(--streak-miss-text); }
/* ⚠️ СЕГОДНЯ: КОЛЬЦО ОТДЕЛЬНО, ЗАЛИВКА И ЦВЕТ ЧИСЛА — ПО СОСТОЯНИЮ ДНЯ (Н264, C187, 16.09.2026).
   Было: кольцо рисовалось поверх всей клетки цветом `--green` и красило число в тёмно-зелёный.
   У засчитанного сегодня выходило тёмно-зелёное число на зелёном круге, кольца зелёным по
   зелёному не видно, а у прощённого сегодня кольцо затирало его обводку.
   В телефоне (`DayDot`): кольцо 2 `GreenAccent` по краю 30, внутри отступ 3 — заливка 24 со
   своей обводкой, между кольцом и заливкой просвет 1. Здесь так же: сам кружок 24 (заливка и
   обводка остаются от состояния), кольцо — `outline` на 1 снаружи, 24 + 2·(1 + 2) = 30. */
.cal .cell.today { width: 1.5rem; height: 1.5rem; outline: 0.125rem solid var(--green-accent); outline-offset: 0.0625rem; }
/* Название месяца — ВНУТРИ карточки, прописными и серым (15 sp, разрядка 0,04em, строка 24). */
.cal-title { margin: 0 0 0.5625rem; font-size: 0.9375rem; line-height: 1.5rem; font-weight: 700;
    letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
/* Легенда (C191): под сеткой 8 (5 после ряда + 3), в строку через 12, переносом через 2;
   точка 9, 5, подпись 13/17. У «пропуск прощён» точка с кольцом, как сам день в календаре. */
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem; margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--text-muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 0.3125rem; }
.cal-legend i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; display: inline-block; flex: none; }
.cal-legend i.ok { background: var(--green); }
.cal-legend i.frozen { background: var(--green-container); box-shadow: inset 0 0 0 0.0625rem var(--streak-frozen-ring); }
.cal-legend i.miss { background: var(--streak-miss-fill); }
/* Плашка «получено» у взятого достижения (Н256): 10 sp, зелёная на светло-зелёном. */
/* ⚠️ Строка 24, а не 14: у телефонной надписи «получено» задан только кегль 10, высота строки
   берётся из `bodyLarge` (24) — таблетка там 28 в высоту. */
.ach-tile .got {
    display: inline-block; margin-top: 0.25rem;
    background: var(--green-container); color: var(--green-accent);
    border-radius: 999px; padding: 0.125rem 0.375rem;
    font-size: 0.625rem; line-height: 1.5rem; font-weight: 600;
}

/* Плитки достижений — по три в ряд.
   ⚠️ КАК `AchievementTile` (Н264, C188, 16.09.2026). Было: у плитки тень, поля 12/8, кружок 40
   со значком 20, между плитками 10, а неполученная — полупрозрачная (opacity .55), хотя в
   телефоне прозрачности нет вовсе. Стало: без тени, рамка внутрь (`Divider`, у неполученной
   `PanelBorder`), поля 9/7, кружок 35 со значком 18, под ним 5; между плитками 6, между
   рядами 9; неполученная отличается только серым кружком, значком и названием. */
.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5625rem 0.375rem; }
.ach-tile {
    background: var(--card-bg); border: 0;
    border-radius: var(--radius-inner); box-shadow: inset 0 0 0 0.0625rem var(--outline);
    padding: 0.5625rem 0.4375rem; text-align: center; min-width: 0;
}
.ach-tile .round {
    width: 2.1875rem; height: 2.1875rem; margin: 0 auto 0.3125rem; border-radius: 50%;
    background: var(--green-container); color: var(--green-accent);
    display: flex; align-items: center; justify-content: center;
}
.ach-tile .round .ic { width: 1.125rem; height: 1.125rem; }
.ach-tile b { display: block; font-size: 0.8125rem; line-height: 0.9375rem; font-weight: 700; color: var(--text); }
.ach-tile .note { display: block; margin-top: 0.25rem; font-size: 0.625rem; line-height: 0.875rem; color: var(--text-muted); }
.ach-tile.off { box-shadow: inset 0 0 0 0.0625rem var(--streak-tile-off-border); }
.ach-tile.off .round { background: var(--panel-surface); color: var(--text-muted); }
.ach-tile.off b { color: var(--text-muted); }

/* ЭКРАН СЕРИИ ЦЕЛИКОМ (C191): блоки идут через 9 (`spacedBy(9.dp)`), заголовок раздела 22/24
   жирно с отступом сверху 6 — над ним выходит 15, под ним 9. Отступ сверху не складывается с
   нижним у карточки: у блочного `main.wrap` поля схлопываются, остаётся больший. */
.ach-page .card { margin-bottom: 0.5625rem; }
.ach-page .block-title { font-size: 1.375rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0; margin: 0.9375rem 0 0.5625rem; }
/* Оговорка под календарём — 13/18 серым. */
.ach-note { margin: 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--text-muted); }

/* КАРТОЧКА «ОБЩИЙ РЕЙТИНГ» (Н264, C189, 16.09.2026) — поля 14, тексты и кнопки из телефона.
   Было: строка со значком группы в кружке, «Вы участвуете как…», лишнее «Место появится…»,
   отдельный абзац «больше ничего: ни почты…» и широкие кнопки сайта 47 и 56. */
.card.rating-card { padding: 0.875rem; }
.rating-text { margin: 0; font-size: 0.9375rem; line-height: 1.3125rem; color: var(--text); }
.rating-place { margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.5rem; color: var(--text-muted); }
.rating-leave { margin-top: 0.6875rem; }
.rating-off-title { display: block; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 800; color: var(--text); }
.rating-off-body { margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--text-muted); }
.rating-join { margin-top: 0.75rem; }
.card.rating-card .shimmer-btn { width: 100%; font-size: 1.125rem; }
.rating-locked { margin: 0; font-size: 0.875rem; line-height: 1.1875rem; color: var(--text-muted); }
/* Отказ записать участие — под кнопкой через 8, 14 оранжевым (строка 24 из `bodyLarge`), как
   `streak_offline` в карточке телефона. Раньше отказ висел плашкой над всем экраном. */
.rating-fail { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.5rem; color: var(--orange); }

/* --- Профиль и подписка (макеты «профиль», «управление подпиской») ---
   Шапка с аватаром, группы настроек списком, карточка подписки. */
/* ⚠️ ШАПКА МЕРКАМИ ТЕЛЕФОНА (Н264-184, `ProfileHeader`): аватар 72 на зелёном со значком 36,
   14 до текста; кружок смены 27 — заливка зелёная, рамка 2 цветом карточки, значок 14, в углу
   БЕЗ выноса; имя 16/24 жирное; почта 12/16 отдельной строкой; норма — плашкой 8, 12/16. */
.profile-head { display: flex; align-items: center; gap: 0.875rem; }
/* Под заголовком «Профиль» 14, как `spacedBy(14)` списка (NEW-1): у заголовка своё поле 4, и
   поля схлопываются — ставим больше него. */
.screen-title + .profile-head { margin-top: 0.875rem; }
.profile-head .avatar {
    width: 4.5rem; height: 4.5rem; flex: none; border-radius: 50%;
    background: var(--green-container); color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.profile-head .avatar .ic { width: 2.25rem; height: 2.25rem; }
/* Картинка профиля вместо значка: обрезаем по кружку, а не жмём — лица иначе вытягивает. */
.profile-head .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Кружок со значком картинки поверх аватара — как в приложении: подсказывает, что это выбор.
   Это кнопка, открывающая окно: браузерные рамка, фон и поля сняты. */
.avatar-link {
    position: relative; flex: none; display: block; line-height: 0;
    padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
}
.avatar-edit {
    position: absolute; right: 0; bottom: 0;
    width: 1.6875rem; height: 1.6875rem; border-radius: 50%;
    background: var(--green); color: #fff;
    box-shadow: 0 0 0 0.125rem var(--surface);
    display: flex; align-items: center; justify-content: center;
}
.avatar-edit .ic { width: 0.875rem; height: 0.875rem; }

/* Окно «Картинка профиля» (`AvatarPicker`, Н264-183): три ряда кругов 74 через 11, ряды прижаты
   влево. У выбранной рамка 3 зелёным ПОВЕРХ картинки — у невыбранной картинка на все 74, без
   зелёного кольца вокруг. */
.avatar-grid {
    display: grid; grid-template-columns: repeat(3, 4.625rem); gap: 0.6875rem;
    justify-content: start; margin: 0;
}
.avatar-pick {
    position: relative; width: 4.625rem; height: 4.625rem;
    padding: 0; border: 0; border-radius: 50%;
    background: var(--green-container); cursor: pointer; line-height: 0; overflow: hidden;
}
.avatar-pick img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-pick.on::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: inset 0 0 0 0.1875rem var(--green);
}
.avatar-pick:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 2px; }
.profile-head b { display: block; font-size: 1rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0; }
.profile-head .mail { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); word-break: break-all; }
.goal-badge {
    display: flex; width: fit-content; margin-top: 0.25rem; padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-badge); background: var(--green-container);
    font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--calorie);
}

/* Строки окна «Тема оформления» (`ThemeDialog`, Н264-178): поля 15, текст 17/21; выбранная —
   жирная, тёмная, с зелёной галочкой 22 справа, остальные — серые без галочки. */
.theme-row {
    display: flex; align-items: center; width: 100%; padding: 0.9375rem 0;
    border: 0; background: none; font: inherit; font-size: 1.0625rem; line-height: 1.3125rem;
    color: var(--text-muted); text-align: left; cursor: pointer;
}
.theme-row[aria-pressed="true"] { font-weight: 700; color: var(--text); }
.theme-row .ic { width: 1.375rem; height: 1.375rem; flex: none; color: var(--green); visibility: hidden; }
.theme-row[aria-pressed="true"] .ic { visibility: visible; }
/* Строка-кнопка окна-списка («Поделиться с друзьями»): браузерные рамка и фон сняты. */
button.choice-row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }

/* Поле с подписью НА РАМКЕ — материальное `OutlinedTextField` («Изменить имя», Н264-175):
   высота 56, рамка 1 цветом `outline`, скругление 4, текст 16; подпись 12/16 серым в разрыве
   рамки; в фокусе рамка 2 и подпись зелёные. Между полем и подсказкой 8. */
.name-box { gap: 0.5rem; }
.float-field { position: relative; display: block; }
/* ⚠️ `span.` В НАЧАЛЕ — ВЕС (Н266-197): общее правило `input[type="text"|"email"|"password"]` стоит
   ниже по файлу с тем же весом и перебивало рамку и фон — поле выходило белым с двойной светлой
   рамкой вместо прозрачного с рамкой `outline`. */
span.float-field input {
    width: 100%; height: 3.5rem; padding: 0 1rem;
    border: 0; border-radius: 0.25rem; box-shadow: inset 0 0 0 0.0625rem var(--outline-strong);
    background: transparent; color: var(--text); font: inherit; font-size: 1rem; line-height: 1.5rem;
}
.float-field input:focus { outline: none; box-shadow: inset 0 0 0 0.125rem var(--green); }
.float-field label {
    position: absolute; left: 0.75rem; top: -0.5rem; padding: 0 0.25rem;
    /* Разрыв рамки под подписью — только НИЖНЕЙ половиной подложки цвета окна: белый прямоугольник
       целиком был виден на кремовом переливе окна. */
    background: linear-gradient(to bottom, transparent 50%, var(--card-surface) 50%);
    font-size: 0.75rem; line-height: 1rem; color: var(--text-muted);
    pointer-events: none;
}
.float-field input:focus + label { color: var(--green); }
/* ⚠️ ПУСТОЕ ПОЛЕ — ПОДПИСЬ ВНУТРИ, 16/24 по центру; в фокусе или с текстом — на рамку (Н266-197,
   160). Так делает материальное поле: у пустых полей пароля и кода подпись стояла на рамке сразу,
   а поле с подсказкой-заглушкой теряло подпись при первой букве. Нужен `placeholder=" "`. */
.float-field label { transition: top .15s, font-size .15s, line-height .15s; }
.float-field input:placeholder-shown:not(:focus) + label {
    top: 1rem; font-size: 1rem; line-height: 1.5rem; background: none;
}
/* Выключенное поле — как у материального: рамка 12% и текст с подписью 38% цвета текста. */
.float-field input:disabled {
    box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--text) 12%, transparent);
    color: color-mix(in srgb, var(--text) 38%, transparent);
}
.float-field input:disabled + label { color: color-mix(in srgb, var(--text) 38%, transparent); }
/* Ошибка (`isError`): рамка и подпись красные, в фокусе рамка 2. */
.float-field.error input { box-shadow: inset 0 0 0 0.0625rem var(--danger); }
.float-field.error input:focus { box-shadow: inset 0 0 0 0.125rem var(--danger); }
.float-field.error label, .float-field.error input:focus + label { color: var(--danger); }
/* Поля окон входа — `shape = InnerShape` (12), у остальных материальное 4. */
.float-field.r12 input { border-radius: 0.75rem; }
/* Окно «Подтверждение почты» (`VerifyEmailDialog`, Н264-182): подсказка 14/20 серым, 12 до поля;
   «Выслать код заново» — материальная надпись у левого края. */
/* ⚠️ Промежутки — `VerifyEmailDialog` (Н266-160): текст → 12 → поле, а ошибка и «Выслать код
   заново» идут ВПЛОТНУЮ друг за другом (у телефона между ними `Spacer` нет). Было по 12 везде. */
.verify-box { gap: 0; }
.verify-box > span:first-child { font-size: 0.875rem; line-height: 1.25rem; }
.verify-box > .float-field { margin-top: 0.75rem; }
.verify-box .verify-resend { align-self: flex-start; }
/* «Сменить пароль» (`ChangePasswordDialog`): между полями 10, от поля до подсказки 8. */
.pwd-box { gap: 0; }
.pwd-box > .float-field + .float-field { margin-top: 0.625rem; }
.pwd-box > .field-hint { margin-top: 0.5rem; }

/* Заголовок группы настроек — НАД карточкой, прописными, мелким серым (макет «профиль»).
   ⚠️ МЕРКИ ТЕЛЕФОНА (Н264-192, `SettingsGroup`/`SettingRow`, сверено живьём 16.09.2026):
   заголовок 13/16 жирный без разрядки, отступ 8 слева и 6 снизу, между группами 14; у карточки
   поля 6 сверху и снизу; строка 52 — поля 16 по бокам и 14 сверху-снизу, значок 22, 14 до
   текста 16/24, значение 14/20, 4 до стрелки 24; черта с отступом 16 с обеих сторон, под
   последней строкой черты нет. Было: заголовок 12 с разрядкой, строка 46 с текстом 15, значки
   20, черта во всю ширину. */
.set-title {
    margin: 0.875rem 0 0.375rem; padding-left: 0.5rem;
    /* 18 в высоту, как строка телефона живьём (13 sp у Nunito занимает 18, а не 16). */
    font-size: 0.8125rem; line-height: 1.125rem; font-weight: 700;
    letter-spacing: 0; text-transform: uppercase; color: var(--text-muted);
}
.set-card { padding: 0.375rem 0; }
.set-row {
    position: relative;
    display: flex; align-items: center; gap: 0;
    padding: 0.875rem 1rem; width: 100%;
    border: 0; background: none;
    color: var(--text); font-family: inherit; font-size: 1rem; line-height: 1.5rem; text-align: left;
    text-decoration: none; cursor: pointer;
}
/* Черта — отдельной полосой 1 МЕЖДУ строками (шаг строк 53, как в телефоне), а не поверх низа строки. */
.set-row:not(:last-child) { margin-bottom: 0.0625rem; }
.set-row:not(:last-child)::after {
    content: ""; position: absolute; left: 1rem; right: 1rem; bottom: -0.0625rem;
    height: 0.0625rem; background: var(--divider);
}
/* ⚠️ `:not(.arrow)`: стрелка — тоже прямой потомок строки, и с полем справа она отъехала бы от края. */
.set-row > .ic:not(.arrow) { width: 1.375rem; height: 1.375rem; margin-right: 0.875rem; color: var(--text-muted); }
.set-row .grow { flex: 1; min-width: 0; }
.set-row .val { color: var(--text-muted); font-size: 0.875rem; line-height: 1.25rem; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; max-width: 45%; margin-right: 0.25rem; }
.set-row .arrow { width: 1.5rem; height: 1.5rem; color: var(--text-muted); }
.set-row:hover { color: var(--green-accent); }
.set-row:hover > .ic { color: var(--green-accent); }
/* Опасные действия — красным, как в приложении. */
.set-row.danger, .set-row.danger > .ic, .set-row.danger:hover, .set-row.danger:hover > .ic { color: var(--danger); }

/* Карточка подписки — общая деталь `_sub_card.html` (Н264, C168/C194), числа телефона: кружок 36
   со значком 21, отбивка 10, заголовок 19/23, через 9 пояснение 14/18. Было 34/20, 18/22, а
   пояснение стояло `<p class="muted small">` с полями браузера 14 сверху и снизу. */
.sub-head { display: flex; align-items: center; gap: 0.625rem; margin: 0; }
.sub-head .round {
    width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%;
    background: var(--orange-container); color: var(--orange);
    display: flex; align-items: center; justify-content: center;
}
.sub-head .round .ic { width: 1.3125rem; height: 1.3125rem; }
.sub-head b { flex: 1; min-width: 0; font-size: 1.1875rem; line-height: 1.4375rem; font-weight: 800; letter-spacing: 0; }
.sub-text { margin: 0.5625rem 0 0; font-size: 0.875rem; line-height: 1.125rem; color: var(--text-muted); }
/* В Профиле «не забудьте продлить» серее (`TextMuted`), на экране «Подписка» — бледнее (`HintText`). */
a.sub-card .sub-days .hint-word { color: var(--text-muted); }
/* Черта над строкой срока и сама строка «Осталось N дней» — числа из приложения
   (SubscriptionScreen): черта 11 сверху и 10 снизу, значок 17, отбивка 7, текст 15/18. */
.sub-rule { height: 0.0625rem; background: var(--outline); margin: 0.6875rem 0 0.625rem; }
.sub-days {
    display: flex; align-items: center; gap: 0.4375rem;
    margin-top: 0.625rem;
    font-size: 0.9375rem; line-height: 1.125rem; font-weight: 700;
    color: var(--text);
}
/* После черты отбивка уже есть — второй раз её не добавляем. */
.sub-rule + .sub-days { margin-top: 0; }
.sub-days .grow { flex: 1; min-width: 0; }
.sub-days .ic { width: 1.0625rem; height: 1.0625rem; flex: none; color: var(--green-accent); }
/* «не забудьте продлить» — приписка помельче и потише самой строки. */
.sub-days .hint-word { flex: none; font-size: 0.8125rem; line-height: 1rem; font-weight: 400; color: var(--hint-text); }
.sub-days.soon, .sub-days.soon .ic { color: var(--orange); }
/* Полоска срока: сколько осталось от ВСЕГО срока подписки. */
.sub-bar {
    height: 0.4375rem; margin-top: 0.5rem;
    border-radius: var(--radius-button);
    background: var(--progress-track);
    overflow: hidden;
}
.sub-bar > span { display: block; height: 100%; border-radius: var(--radius-button); background: var(--green); }
/* Что входит в Plus — строки с галочкой в зелёном кружке (`SubIncludedCard`, C196): поля карточки
   15, между строками 11, строка по центру кружка. Было поле 16 и по 7 сверху-снизу у строки:
   первая строка стояла на 23 от края, а между строками выходило 14. */
.card.plus-card { padding: 0.9375rem; }
.plus-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6875rem; }
.plus-list li { display: flex; align-items: center; gap: 0.625rem; padding: 0; font-size: 0.9375rem; line-height: 1.1875rem; color: var(--text); }
.plus-list .tick {
    width: 1.375rem; height: 1.375rem; flex: none; border-radius: 50%;
    background: var(--green-container); color: var(--green-accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.plus-list .tick .ic { width: 0.8125rem; height: 0.8125rem; }
/* Остатки ИИ по ролям: строка и чип «N из M». */
.quota-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0; border-bottom: 0.0625rem solid var(--outline); font-size: 0.9375rem; }
.quota-row:last-child { border-bottom: 0; }
.quota-row .grow { flex: 1; min-width: 0; }
.quota-row .n { font-size: 0.875rem; font-weight: 700; color: var(--green-accent); white-space: nowrap; }
/* Пояснения под названием строки — как в телефоне: почему месяц «стоит» больше недели и
   когда можно будет собрать новый план. Своей строкой, иначе они склеиваются с названием. */
.quota-row .grow .sub { display: block; margin-top: 0.125rem; font-size: 0.8125rem;
    line-height: 1.0625rem; color: var(--text-muted); }
.quota-row .n.out { color: var(--text-muted); }
/* «Что осталось в подписке» на экране «Подписка» — `SubLimitsCard` (Н264, C170): поля карточки
   6/15, строка 11 сверху-снизу, черта между строками, название 15/18 полужирно, пояснения 13/16
   бледно, справа плашка 8 на зелёном «N из M» 14/17. Первые четыре строки, дальше «Показать всё».
   ⚠️ ТОЛЬКО ВНУТРИ `.quota-card`: `.quota-row` держат ещё рейтинг в «Достижениях» и «Вы не готовили
   по плану» в дневнике — там плашек нет. */
.card.quota-card { padding: 0.375rem 0.9375rem; }
.quota-card .quota-row { padding: 0.6875rem 0; border: 0; font-size: 0.9375rem; }
.quota-card .quota-row + .quota-row { border-top: 0.0625rem solid var(--divider); }
.quota-card .q-name { display: block; font-size: 0.9375rem; line-height: 1.125rem; font-weight: 600; color: var(--text); }
.quota-card .quota-row .grow .sub { margin-top: 0; line-height: 1rem; color: var(--hint-text); }
.quota-card .quota-row .n {
    background: var(--green-container); border-radius: var(--radius-badge);
    padding: 0.3125rem 0.625rem; font-size: 0.875rem; line-height: 1.0625rem;
}
.quota-more {
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    width: 100%; padding: 0.75rem 0;
    border: 0; border-top: 0.0625rem solid var(--divider); background: none;
    font: inherit; font-size: 1rem; line-height: 1.1875rem; font-weight: 700; color: var(--green-accent);
    cursor: pointer;
}
.quota-more .ic { width: 1.25rem; height: 1.25rem; transition: transform .15s; }
.quota-more[aria-expanded="true"] .ic { transform: rotate(180deg); }
/* Подписчик без единой строки лимитов — как в телефоне, серая строка в карточке. */
.quota-empty { margin: 0; padding: 0.625rem 0; font-size: 0.9375rem; color: var(--text-muted); }

/* ЭКРАН «ПОДПИСКА» — стопка блоков с промежутком 14 (`LazyColumn` со `spacedBy(14)`, NEW-1).
   ⚠️ Правило стопки стоит ПОСЛЕ `.card`: вес у `.sub-stack > *` тот же, и нижнее поле карточки
   иначе вернулось бы. Окна (`<dialog>`) в стопку не кладём — им нужен браузерный `margin: auto`. */
.sub-stack { display: flex; flex-direction: column; gap: 0.875rem; }
.sub-stack > * { margin: 0; }
/* Заголовок раздела — `SubSectionTitle` 19/23. Общий `.block-title` (18/22 с полями) не трогаем:
   его держат «Достижения», «Корзина», «Дневник» и «Статистика». */
.sub-title { font-size: 1.1875rem; line-height: 1.4375rem; font-weight: 800; letter-spacing: 0; color: var(--text); }
#pay-form { display: flex; flex-direction: column; gap: 0.875rem; }
/* Промокод — `AppTextField` и под ним через 4 подпись `labelSmall` 11/16 (C196).
   ⚠️ Поле уточнено селектором: общее `input[type="text"]` ниже по файлу с тем же весом, что и
   `input.app-field`, и возвращало полю рамку 1,5 и поля 12/14 — поле выходило ниже телефонного. */
.promo-box input.app-field { width: 100%; padding: 0 0.875rem; border: 0; }
.promo-note { margin: 0.25rem 0 0; font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
/* «Оплата» — `SubPaymentCard` (C172): поля 15 по бокам, строки 13 сверху-снизу, значок 21 серый,
   отбивка 11, черта между строками. Своим классом, а не `.set-row`: строки Профиля другие. */
.card.pay-card { padding: 0 0.9375rem; }
.pay-line {
    display: flex; align-items: center; gap: 0.6875rem;
    width: 100%; padding: 0.8125rem 0;
    border: 0; background: none;
    font: inherit; font-size: 1rem; line-height: 1.1875rem; color: var(--text); text-align: left;
    cursor: pointer;
}
.pay-line + .pay-line { border-top: 0.0625rem solid var(--divider); }
.pay-line > .ic { width: 1.3125rem; height: 1.3125rem; color: var(--text-muted); }
.pay-line > .ic.arrow { width: 1.25rem; height: 1.25rem; }
.pay-line .grow { flex: 1; min-width: 0; }
.row-title { display: block; font-size: 1rem; line-height: 1.1875rem; font-weight: 700; color: var(--text); }
.row-sub { display: block; font-size: 0.8125rem; line-height: 1rem; font-weight: 400; color: var(--hint-text); }
/* «Изменить» — надпись 15/18 жирная зелёная, отбивка 8 (а не 11, как у значка). */
.row-link { flex: none; margin-left: -0.1875rem; font-size: 0.9375rem; line-height: 1.125rem; font-weight: 700; color: var(--green-accent); }
/* Кнопка с ценой и подписи под ней — один элемент телефона: сверху 6, под кнопкой 8 (C169). */
.pay-cta { padding-top: 0.375rem; }
.sub-note { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--hint-text); text-align: center; }
/* «Отключить подписку» — сверху 4, под таблеткой 8 и подпись (C173). */
.sub-off { padding-top: 0.25rem; }
/* Окно «Способ оплаты» (`SubPaymentMethodsDialog`, C172): строка про продление 14/18 бледно,
   карты плитками 12 со скруглением 12 и рамкой (основная — зелёная), кружок 24 справа.
   ⚠️ Своя подсказка, а не `.list-hint`: та 14/20 серее — это окно «Помощь» в Профиле. */
/* ⚠️ СТРОКА КАРТЫ С «ОТВЯЗАТЬ» (требование ЮKassa, 23.09.2026): выбор карты — уже кнопка,
   поэтому «Отвязать» стоит РЯДОМ с ней, а не внутри (кнопка в кнопке в браузере не работает). */
.card-row { display: flex; align-items: center; gap: 0.5rem; }
.card-row > form { flex: 1; min-width: 0; }
.text-btn.card-forget { flex: none; font-size: 0.875rem; color: var(--danger); }
.card-hint { margin: 0; font-size: 0.875rem; line-height: 1.125rem; color: var(--hint-text); }
.card-note { margin: 0; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--hint-text); }
.card-choice {
    display: flex; align-items: center; gap: 0.6875rem;
    width: 100%; padding: 0.75rem 0.8125rem;
    border: 0; border-radius: 0.75rem;
    box-shadow: inset 0 0 0 0.0625rem var(--divider); background: var(--surface);
    font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.card-choice.on { background: var(--green-container); box-shadow: inset 0 0 0 0.0625rem var(--green); }
.card-choice > .ic { width: 1.3125rem; height: 1.3125rem; color: var(--green-accent); }
.card-choice .grow { flex: 1; min-width: 0; }
.card-choice .row-sub { min-height: 1rem; }
.card-dot {
    width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%;
    box-shadow: inset 0 0 0 0.0625rem var(--divider); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
/* ⚠️ ЗАЛИВКА — `--green-dark`, А НЕ `--green-accent` (Н266-247, 24.09.2026). `--green-accent` —
   цвет БУКВ: в тёмной теме он светло-зелёный #8BD79A, и белая галочка основной карты на нём
   почти пропадала (контраст 1,7). Правило палитры (шапка файла, `Color.kt`): заливаем
   `--green-dark` — он одинаковый в обеих темах, светлая тема не сдвинулась ни на пиксель.
   Зеркало — кружок основной карты в окне «Способ оплаты» телефона (`SubscriptionScreen`). */
.card-choice.on .card-dot { background: var(--green-dark); box-shadow: none; }
.card-dot .ic { width: 0.875rem; height: 0.875rem; }

/* --- Корзина и цены (макеты «корзина и цены») ---
   Три вкладки полосой с подчёркиванием, круглые галочки покупок, чипы «Заменить» и
   «есть дома», карточки товаров и полка «Базовое» последней. */

/* Полоса вкладок: три равные доли, выбранная — жирная зелёная с зелёной чертой под собой. */
/* Вкладки «Продукты / Товары / Дома» (Н247, 14.09.2026).
   ⚠️ ЭТО БЕЛАЯ КАРТОЧКА, А НЕ СТРОКА НА ФОНЕ. В телефоне (`AppTabStrip`) полоска вкладок —
   белый прямоугольник со скруглением и тонкой рамкой, высотой 57 dp; зелёная черта в 3 dp
   лежит ВНУТРИ него, под своей вкладкой. На сайте карточки не было: слова висели прямо на
   фоне, а под всей строкой шла длинная линия во всю ширину — другой рисунок.
   Мерки: 57 dp → 3.5625rem, 3 dp → 0.1875rem, 16 sp → 1rem. */
.tabstrip {
    display: flex; margin: 0 0 0.75rem; min-height: 3.5625rem; overflow: hidden;
    background: var(--surface); border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-inner);
}
.tabstrip a {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
    text-align: center; text-decoration: none; color: var(--text-muted);
    font-size: 1rem; line-height: 1.125rem; font-weight: 400;
}
.tabstrip a span { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 0.25rem; }
/* Черта под словом — своя у каждой вкладки, а не общая линия под всей полосой. */
.tabstrip a i { display: block; height: 0.1875rem; background: transparent; }
.tabstrip a.active { color: var(--green-accent); font-weight: 700; }
.tabstrip a.active i { background: var(--green); }
.tabstrip a:hover { color: var(--green-accent); }

/* Строка-плашка со значком в кружке: «Адрес», «Отправить список», магазин, доставка. */
.icon-row { display: flex; align-items: center; gap: 0.75rem; }
.icon-row .round {
    width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%;
    background: var(--green-container); color: var(--green-accent);
    display: flex; align-items: center; justify-content: center;
}
.icon-row .round.warm { background: var(--orange-container); color: var(--orange); }
.icon-row .grow { flex: 1; min-width: 0; }
.icon-row .btn { flex: none; }
.icon-row .btn.btn-sm { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.icon-row .grow .sub { font-size: 0.8125rem; line-height: 1.0625rem; }
.icon-row .grow b { display: block; font-size: 1rem; line-height: 1.25rem; font-weight: 700; }
.icon-row .grow .sub { font-size: 0.875rem; line-height: 1.125rem; color: var(--text-muted); }
.icon-row .arrow { color: var(--text-muted); }
/* ⚠️ `border: 0` — у `<button class="card">` браузер рисовал свою чёрную рамку поверх нашей
   (Н264-012, журнал №281): «Адрес» и «Отправить список» в Корзине, «Блюда плана» в окне «Что вы съели». */
a.card.icon-row, button.card.icon-row { text-decoration: none; color: inherit; width: 100%; text-align: left; font-family: inherit; cursor: pointer; display: flex; border: 0; }

/* Плашка «Адрес» в корзине: подпись сверху мелкой серой, сам адрес — крупнее и полужирным
   (Н247, 14.09.2026 — на сайте было наоборот). Мерки из `AddressBar`: кружок 30 dp,
   значок 17 dp, подпись 13 sp, адрес 15 sp, отступы 14/11 dp. */
.address-row { gap: 0.625rem; padding: 0.6875rem 0.875rem; }
.address-row .round { width: 1.875rem; height: 1.875rem; color: var(--green); }
.address-row .round .ic { width: 1.0625rem; height: 1.0625rem; }
.address-row .grow i { display: block; font-style: normal; font-size: 0.8125rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2); color: var(--hint-text); }
.address-row .grow b {
    display: block; font-size: 0.9375rem; line-height: 1.125rem; font-weight: 600;
    padding-block: calc((1.364em - 1.125rem) / 2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.address-row .grow b.empty { color: var(--text-muted); }

/* Сводка корзины: два блока, значок над числом. */
.cart-sum { display: flex; }
.cart-sum > div { flex: 1; text-align: center; }
.cart-sum .ic { width: 1.375rem; height: 1.375rem; color: var(--green); }
.cart-sum b { display: block; font-size: 1.0625rem; line-height: 1.25rem; padding-block: calc((1.364em - 1.25rem) / 2); font-weight: 800; letter-spacing: 0; margin-top: 0.375rem; }
.cart-sum span { font-size: 0.8125rem; color: var(--text-muted); }
/* Заголовок полки лежит НАД карточкой, мелким серым (макет «корзина и цены 1 экран»). */
/* ⚠️ Н264-015 (журнал №281): 15/18 ExtraBold TextMuted, отступ слева 4 и сверху 6 — `categoryLabel`
   телефона на всех трёх вкладках. Было 14 обычным и 6 до карточки. */
.shelf-title {
    margin: 1.125rem 0 0.75rem;
    padding: calc((1.364em - 1.125rem) / 2) 0 calc((1.364em - 1.125rem) / 2) 0.25rem;
    font-size: 0.9375rem; line-height: 1.125rem; font-weight: 800; color: var(--text-muted);
}
/* На «Дома» шаг телефона другой: полки и строки в столбике через 6 (`spacedBy(6)` + сверху 6). */
.shelf-title.home { margin: 0.75rem 0 0.375rem; }
.pantry-shelves .shelf-title.home:first-child { margin-top: 0.375rem; }
/* «N уже есть дома — не покупаем» — 13/16 Green, слева 4, сверху 2 (12 + 2 от сводки). */
.at-home-note {
    margin: 0.875rem 0 0; padding: calc((1.364em - 1rem) / 2) 0 calc((1.364em - 1rem) / 2) 0.25rem;
    font-size: 0.8125rem; line-height: 1rem; color: var(--green);
}
/* ⚠️ «12 продуктов» под сроком в корзине — ТОГО ЖЕ размера, что число на «Рецептах» (Н264):
   в телефоне это одна деталь `AppSegment`, подпись 16 жирная. Здесь было своё правило 13. */
/* Зелёная плашка-пояснение внизу карточки. */
.note-green {
    margin: 0.75rem 0 0; padding: 0.625rem 0.75rem;
    background: var(--green-soft); border-radius: var(--radius-inner);
    color: var(--green-accent); font-size: 0.875rem; line-height: 1.125rem;
}

/* Строка покупки: нажимается ВСЯ, галочка круглая. */
/* --- Строка продукта в списке покупок ---
   Размеры из приложения (`ShoppingRow`): отступы 13 слева / 10 справа / 11 сверху и снизу,
   кружок 21 с галочкой 13, промежуток 10. */
.buy-row {
    display: flex; align-items: center; gap: 0.625rem; position: relative;
    padding: 0.6875rem 0.625rem 0.6875rem 0.8125rem;
    border-radius: var(--radius-inner);
    transition: background .15s;
}
/* ⚠️ ПОЛОСКА МЕЖДУ ПРОДУКТАМИ — С ОТБИВКОЙ ОТ КРАЁВ (12), как в приложении, и НЕ под
   последней строкой. Раньше линия шла во всю ширину карточки и упиралась в её края. */
.buy-row + .buy-row::before {
    content: "";
    position: absolute; left: 0.75rem; right: 0.75rem; top: 0;
    height: 0.0625rem; background: var(--outline);
}
.buy-row .tick {
    width: 1.3125rem; height: 1.3125rem; flex: none; border-radius: 50%;
    border: 0.125rem solid color-mix(in srgb, var(--text-muted) 40%, transparent); background: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: transparent; cursor: pointer; padding: 0;
}
/* ⚠️ НАЖИМАЕТСЯ ВСЯ СТРОКА, а не только кружок: в приложении отметить купленным можно
   тапом по любому месту строки. Растягиваем область кнопки на всю строку — тем же приёмом,
   что у карточки блюда. Чип «Заменить» поднимаем выше, иначе он тоже стал бы «купить». */
.buy-row .tick::after { content: ""; position: absolute; inset: 0; }
.buy-row .mini-chip { position: relative; z-index: 1; }
.buy-row .tick .ic { width: 0.8125rem; height: 0.8125rem; }
/* ⚠️ ОТМЕЧЕННАЯ СТРОКА — С ЗЕЛЁНОЙ ЗАЛИВКОЙ, как в приложении (`GreenContainer` вполсилы).
   Раньше на сайте у купленного менялся только кружок и зачёркивалось название: в магазине
   с одного взгляда было не видно, что уже взято. Продукт «есть дома» не красим — он не
   покупка, а напоминание. */
.buy-row.done:not(.at-home) { background: color-mix(in srgb, var(--green-container) 50%, transparent); }
.buy-row.done .tick { background: var(--green); border-color: var(--green); color: #fff; }
.buy-row.done .name { text-decoration: line-through; color: var(--text-muted); }
.buy-row .name { flex: 1; min-width: 0; font-size: 0.9375rem; }
.buy-row .qty { color: var(--text-muted); font-size: 0.875rem; white-space: nowrap; }
/* Маленький чип действия внутри строки: «Заменить», «есть дома». */
.mini-chip {
    display: inline-flex; align-items: center; gap: 0.3125rem;
    background: var(--green-container); color: var(--green-accent);
    border: 0; border-radius: var(--radius-button);
    /* ⚠️ `CartPill` (Н266-139): поля 10/5 + добавка до высоты букв Nunito, подпись 13/15, рамка
       1 `GreenBorderSoft` внутрь. У `<span>` и `<button>` теперь одна высота. */
    padding: calc(0.3125rem + (1.364em - 0.9375rem) / 2) 0.625rem;
    box-shadow: inset 0 0 0 0.0625rem var(--green-border-soft);
    font-family: inherit; font-size: 0.8125rem; line-height: 0.9375rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.mini-chip.flat { cursor: default; }
.mini-chip .ic { width: 0.75rem; height: 0.75rem; }

/* Карточка товара на вкладке «Товары». */
.goods-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.125rem; border-bottom: 0.0625rem solid var(--outline); }
.goods-row:last-child { border-bottom: 0; }
/* Товар своей карточкой (Н251): линии между строками тогда не нужны — их роль играют поля
   между карточками, ровно как в телефоне. */
.goods-card { padding: 0.75rem 0.875rem; }
.goods-card .goods-row { border-bottom: 0; padding: 0; align-items: center; gap: 0.5625rem; }
/* Название товара — 17 sp, как в телефоне; на сайте было 15. */
.goods-card .goods-row b { font-size: 1.0625rem; line-height: 1.3125rem; padding-block: calc((1.364em - 1.3125rem) / 2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.goods-card .grow { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1875rem; }
.goods-card .sub { font-size: 0.8125rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2); color: var(--text-muted); }
.goods-card .used { font-size: 0.8125rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2); color: var(--green); }
.goods-card .mini-chip { margin-top: 0.125rem; }
.goods-card .price { font-size: 1.0625rem; line-height: 1.25rem; padding-block: calc((1.364em - 1.25rem) / 2); font-weight: 800; }
.goods-row .grow { flex: 1; min-width: 0; }
.goods-row b { display: block; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700; }
.goods-row .sub { font-size: 0.8125rem; line-height: 1.0625rem; color: var(--text-muted); }
.goods-row .price { font-size: 1rem; font-weight: 800; white-space: nowrap; }
.goods-row .price .sub { font-weight: 400; text-align: right; }

/* Место под фотографию товара — как в приложении (решение заказчика 04.09.2026).
   ⚠️ Своих снимков у нас нет и взять их неоткуда: чужие картинки с сайтов магазинов брать
   нельзя. Настоящие приедут вместе с ценами, когда подключим доставку. Пустое место читалось
   бы как незагрузившаяся картинка, поэтому стоит квадрат с честной подписью.
   Размеры и цвет — те же, что в телефоне: 57 px, скругление внутренней формы, `--note-surface`. */
.goods-photo {
    flex: none; width: 3.5625rem; height: 3.5625rem;
    display: flex; align-items: center; justify-content: center;
    padding: 0 0.25rem;
    border-radius: var(--radius-inner);
    background: var(--note-surface);
    color: var(--text-muted);
    font-size: 0.625rem; line-height: 0.8125rem; text-align: center;
}
/* В окне выбора марки квадрат меньше — как в приложении (46 px). */
.goods-photo.sm { width: 2.875rem; height: 2.875rem; font-size: 0.5rem; line-height: 0.625rem; }

/* --- «Сервисы доставки» (в приложении `cart_delivery_*`) ---
   Карточка-пример: кружок со значком, закрытое название, срок и сумма; ниже строка
   «все товары в наличии» и НЕАКТИВНАЯ кнопка «Перейти».
   ⚠️ Когда сервис подключат, здесь появятся настоящие карточки товаров с фотографиями —
   ровно это обещает текст в приложении, поэтому место под них держим уже сейчас. */
.deliv-row { display: flex; align-items: center; gap: 0; }
/* Значок — в зелёном КВАДРАТЕ 44 со скруглением 12, сам значок 22 зелёный. */
.deliv-row .round {
    width: 2.75rem; height: 2.75rem; flex: none; margin-right: 0.75rem;
    border-radius: var(--radius-inner); background: var(--green-container); color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.deliv-row .round .ic { width: 1.375rem; height: 1.375rem; }
.deliv-row .grow { flex: 1; min-width: 0; }
.deliv-row b { display: block; font-size: 0.9375rem; line-height: 1.1875rem; padding-block: calc((1.364em - 1.1875rem) / 2); font-weight: 700; letter-spacing: 0; }
.deliv-row .sub { display: block; font-size: 0.75rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2); font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
/* «Пример» — ОДНА пометка в строке заголовка: зелёный текст на светло-зелёной плашке со
   скруглением 8 (`BadgeShape`), 12/16 жирный, поля 8/3. */
.deliv-example {
    padding: 0.1875rem 0.5rem; border-radius: var(--radius-badge);
    background: var(--green-container); color: var(--green);
    font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0;
}
.deliv-sum { margin-left: 0.625rem; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700; white-space: nowrap; letter-spacing: 0; }
.deliv-have {
    display: flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem;
    font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--green);
}
.deliv-have .deliv-check { width: 0.875rem; height: 0.875rem; color: var(--green); }
.deliv-have .deliv-chev { width: 1.5rem; height: 1.5rem; color: var(--text-muted); }
/* Кнопка под замком: серая, не нажимается. Зелёная читалась бы как рабочая. */


/* Число и единица — одно слово для переноса (правка заказчика 09.09.2026). Без этого
   «350 мл» рвалось: «350» оставалось в строке, а «мл» уезжало на свою и наползало на
   кнопку «Заменить товар». */
.nowrap { white-space: nowrap; }

/* РАЗДЕЛЕНИЕ СТРОК ВНУТРИ БЛОКА «МАГАЗИНЫ И ДОСТАВКА» — как в телефоне (правка заказчика
   09.09.2026). Там каждая строка лежит в своей белой коробке с рамкой, а заголовок и пометка
   «Пример» стоят ВНУТРИ карточки. На сайте строки шли встык, и блок читался как чужой. */
.deliv-card { padding: 0.875rem; }
.deliv-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; }
.deliv-head b { flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.1875rem; padding-block: calc((1.364em - 1.1875rem) / 2); font-weight: 700; }
.deliv-head .deliv-example { margin-left: auto; }
/* Строка магазина и сервиса — своя белая коробка: рамка 1 `Divider`, скругление 12, поля 12,
   через 10 от предыдущего. */
.deliv-inner {
    background: var(--surface); box-shadow: inset 0 0 0 0.0625rem var(--divider); border-radius: var(--radius-inner);
    padding: 0.75rem; margin-top: 0.625rem;
}
.deliv-note { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2); font-weight: 500; color: var(--text-muted); }
.deliv-note.deliv-note-2 { margin-top: 0.25rem; }

/* РАСКРЫТИЕ КАРТОЧКИ СЕРВИСА (задача 119, задание заказчика 08.09.2026).
   ⚠️ Без единой строчки скриптов: `details/summary` работает с выключенным JavaScript,
   с клавиатуры и с читалкой. Прячем только стандартный треугольник — стрелку рисуем свою,
   как в остальных строках сайта. */
.deliv-fold > summary { list-style: none; cursor: pointer; }
.deliv-fold > summary::-webkit-details-marker { display: none; }
.deliv-fold > summary:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 2px; border-radius: 0.5rem; }
.deliv-chev { margin-left: auto; transition: transform .15s ease; }
/* ⚠️ Стрелка смотрит ВНИЗ и переворачивается вверх — это раскрытие, а не переход
   (в телефоне `KeyboardArrowDown` / `KeyboardArrowUp`). Раньше она смотрела вправо. */
.deliv-fold[open] .deliv-chev { transform: rotate(180deg); }
/* Часть позиций без цены магазина — серым; все нашлись — зелёным, как в телефоне. */
.deliv-have.part { color: var(--text-muted); }
/* Две кнопки в раскрытой карточке — в строку, а на узком экране одна под другой. */
/* Две кнопки поровну, одной высоты (`ServiceButton`, `weight(1f)` + `IntrinsicSize.Min`). */
.deliv-actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.5rem; margin-top: 0.75rem; }
.svc-btn {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: 0.5625rem 0.625rem; border: 0; border-radius: var(--radius-inner);
    background: var(--green-container); color: var(--text-muted);
    font: inherit; font-size: 0.8125rem; line-height: 1rem; font-weight: 700; text-align: center; cursor: pointer;
}
.svc-btn .ic { width: 0.9375rem; height: 0.9375rem; flex: none; }
.svc-btn .svc-lock { width: 0.75rem; height: 0.75rem; margin-left: -0.125rem; }

/* СПИСОК «ЧЕГО НЕТ» — КРУПНО И СПИСКОМ (правка заказчика 09.09.2026: «понятнее и больше»).
   Раньше это была строка названий через запятую мелким серым — читалась как примечание,
   а это главное, ради чего карточку и раскрывают. */
.deliv-missing-title { margin: 0.875rem 0 0.25rem; font-size: 1.0625rem; line-height: 1.3125rem; padding-block: calc((1.364em - 1.3125rem) / 2); font-weight: 700; }
.deliv-missing-note { margin: 0 0 0.5rem; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--text-muted); }
.deliv-unknown { margin: 0.625rem 0 0; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.deliv-goods { display: flex; flex-direction: column; gap: 0.5rem; }
.deliv-goods .goods-card { margin: 0; }
.deliv-missing {
    list-style: none; margin: 0; padding: 0.25rem 0;
    background: var(--note-surface); box-shadow: inset 0 0 0 0.0625rem var(--divider); border-radius: var(--radius-inner);
}
.deliv-missing li {
    display: flex; align-items: center; gap: 0.625rem; position: relative;
    padding: 0.625rem 0.75rem; font-size: 1rem; line-height: 1.25rem; font-weight: 600;
}
/* Черта между строками — с отбивкой 12 от краёв, как `HorizontalDivider(padding h12)`. */
.deliv-missing li + li::before { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; top: 0; height: 0.0625rem; background: var(--divider); }
.deliv-missing .ic { width: 1.125rem; height: 1.125rem; color: var(--text-muted); flex: none; }
.deliv-missing .grow { flex: 1; min-width: 0; }
.deliv-missing .qty { color: var(--text-muted); font-size: 0.875rem; line-height: 1.125rem; font-weight: 400; white-space: nowrap; }

/* Подпись раздела внутри раскрытой карточки: «Товары сервиса», «Чего нет в сервисе». */
.deliv-sub { margin: 0.75rem 0 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--text-muted); }

/* Строка бюджета: спокойная зелёная или тревожная оранжевая с кнопкой «Что заменить». */
.budget-row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.125rem; }
.budget-row.over { color: var(--orange); font-weight: 700; flex-wrap: nowrap; }
/* ⚠️ Кнопка «Что заменить» СТОИТ РЯДОМ, а не сваливается на строку ниже: в телефоне длинный
   текст переносится в две строки, а таблетка остаётся справа. */
.budget-row.over b { flex: 1; min-width: 0; font-weight: 700; }

.budget-row.over .ic { width: 1.0625rem; height: 1.0625rem; flex: none; margin-right: 0.4375rem; color: var(--orange); }
.budget-chip {
    flex: none; height: 2.25rem; margin-left: 0.5rem; padding: 0 0.875rem;
    border: 0; border-radius: var(--radius-button); background: var(--green-container);
    box-shadow: inset 0 0 0 0.0625rem var(--chip-border); color: var(--green-accent);
    font: inherit; font-size: 0.875rem; line-height: 1.0625rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}

/* Карточка «Этот план» на вкладке «Товары» (Н248, 14.09.2026). Мерки из `TotalPriceCard`:
   кружок 44 dp, значок 22 dp, подпись 13 sp, сумма 24 sp, счётчик 14 и 12 sp. */
.price-head { display: flex; align-items: center; gap: 0.75rem; }
.price-head .round {
    width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%;
    background: var(--green-container); color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.price-head .round .ic { width: 1.375rem; height: 1.375rem; }
.price-head .grow { flex: 1; min-width: 0; }
.price-head .grow i { display: block; font-style: normal; font-size: 0.8125rem; line-height: 1rem; color: var(--text-muted); }
.price-head .grow b { display: block; font-size: 1.5rem; line-height: 1.75rem; padding-block: calc((1.364em - 1.75rem) / 2); font-weight: 800; letter-spacing: 0; }
.price-head .cnt { flex: none; text-align: right; }
.price-head .cnt span { display: block; font-size: 0.875rem; line-height: 1.0625rem; color: var(--text-muted); }
.price-head .cnt em { display: block; font-style: normal; font-size: 0.75rem; line-height: 0.9375rem; color: var(--text-muted); }
/* Разделитель внутри карточки — та же линия, что `HorizontalDivider` в телефоне. */
.card-div { height: 0; margin: 0.875rem 0 0.625rem; border: 0; border-top: 0.0625rem solid var(--divider); }
.shop-total { margin: 0; font-size: 0.875rem; line-height: 1.125rem; font-weight: 700; }
.price-card { padding: 1rem 1rem 0.875rem; }
.price-note { margin: 0.125rem 0 0; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--text-muted); }
.price-note.price-note-last { margin: 0; }
/* «Отправить список» — `SendListCard`: поля 14, кружок 44 со значком 22 Green, 17/20 и 13/16, кнопка
   — зелёный прямоугольник со скруглением 12, поля 17/12, 16 жирным, вплотную к тексту. */
.share-row { padding: 0.875rem; gap: 0; }
.share-row .round { width: 2.75rem; height: 2.75rem; margin-right: 0.75rem; color: var(--green); }
.share-row .round .ic { width: 1.375rem; height: 1.375rem; }
.share-row .grow b { font-size: 1.0625rem; line-height: 1.25rem; padding-block: calc((1.364em - 1.25rem) / 2); }
.share-row .grow .sub { display: block; font-size: 0.8125rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2); }
.share-btn {
    flex: none; padding: 0.75rem 1.0625rem; border-radius: var(--radius-inner);
    background: var(--btn-green); box-shadow: var(--glow-green); color: #fff;
    font-size: 1rem; line-height: 1.25rem; font-weight: 700;
}
/* «Товары для покупки» 20/24 очень жирный, 8 сверху; подсказка «Базовое» 13/17; подпись цен 12/16. */
.block-title.goods-title { font-size: 1.25rem; line-height: 1.5rem; padding-block: calc((1.364em - 1.5rem) / 2); letter-spacing: 0; margin: 1.25rem 0 0; }
.shelf-hint { margin: 0 0 0.75rem; padding: 0 0 0.125rem 0.25rem; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--text-muted); }
.prices-note { margin: 0.875rem 0 0; font-size: 0.75rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2); font-weight: 500; color: var(--text-muted); }

/* Вкладка «Дома»: поле с круглой кнопкой «плюс». */
/* Поле и круглая кнопка «плюс» (`PantryTab`): и то и другое 50 dp = 3.125rem. */
.pantry-add { display: flex; gap: 0.5rem; align-items: center; }
.pantry-add input[type="text"] { flex: 1; min-width: 0; min-height: 3.125rem; }
.pantry-add .round-btn {
    width: 3.125rem; height: 3.125rem; flex: none; border: 0; border-radius: 50%;
    background: var(--btn-green); box-shadow: var(--glow-green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
/* ⚠️ ПУСТОЕ ПОЛЕ — КНОПКА СЕРАЯ (Н253). В телефоне «плюс» зажигается зелёным только когда
   есть что добавить; на сайте он горел зелёным всегда и звал нажать на пустое поле. */
.pantry-add input[type="text"]:placeholder-shown ~ .round-btn {
    background: var(--note-surface); box-shadow: none; color: var(--text-muted);
    border: 0.0625rem solid var(--panel-border);
}
/* Две серые строки над полем — прямо на фоне, без карточки: `PantryTab` — 13/18 обычным (400), между
   ними 5. ⚠️ Только внутри вкладки (Н266-435): у окна «Новый план» своя подсказка 11/16 (`.pantry-fold`). */
.pantry-tab .pantry-hint { margin: 0 0 0.3125rem; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 400; color: var(--text-muted); }
.pantry-add.pill { margin-top: 0.6875rem; }
.pantry-add.pill input[type="text"] {
    height: 3.125rem; min-height: 0; padding: 0 0.875rem;
    border: 0; border-radius: var(--radius-button); box-shadow: inset 0 0 0 0.0625rem var(--panel-border);
    background: var(--surface); font-size: 0.875rem;
}
.pantry-add.pill input[type="text"]::placeholder { color: var(--text-muted); }
.pantry-shelves { padding-top: 0.875rem; }
.pantry-tab .card-row { margin-bottom: 0.375rem; }
.pantry-empty { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }

/* ===========================================================================
   КОРЗИНА КАК ТЕЛЕФОН — пачка В.3 (журнал №281). Мерки `CartScreen.kt` ÷ 16 (1rem = 16 при 412).
   ⚠️ Свои классы, а не общие: `.buy-row`, `.note-green` живут и в дневнике, `.mini-chip.flat` — в
   других местах; окна — на общих оболочках `.modal-confirm` (`AppDialog`) и `.modal-list`
   (`AppListDialog`).
   =========================================================================== */
/* Шаг между блоками экрана — 12 (`spacedBy(12.dp)`), у сайта везде 14. */
.cart-page .card { margin-bottom: 0.75rem; }
/* Подзаголовок — `bodyMedium` 14/20, до «Адреса» 12. */
.cart-page .screen-sub { font-size: 0.875rem; line-height: 1.25rem; margin-bottom: 0.75rem; }
/* Пусто — `EmptyState` через 8 (12 + 8 от предыдущего блока). */
.cart-page .cart-empty { margin-top: 1.25rem; }
/* Плашка сводки — `GreenContainer`, текст `CalorieColor` 13/17, поля 12 (Н266-141): `.note-green`
   дневника в тёмной теме сливался с карточкой. */
.note-green.cart-note {
    margin: 0.75rem 0 0; padding: calc(0.75rem + (1.364em - 1.0625rem) / 2) 0.75rem;
    background: var(--green-container); color: var(--calorie);
    font-size: 0.8125rem; line-height: 1.0625rem;
}
/* Карточка полки — поля 4 сверху и снизу, по бокам 0: строки во всю ширину (Н266-139). */
.card.shelf-card { padding: 0.25rem 0; }
/* Строка продукта — `ShoppingRow`: кружок → 10 → столбик (название 15/18, под ним «заменено»
   зелёным и «дома 900 мл» серым 11/16) → количество 15/18 → 8 → таблетка (без неё — ещё 8). */
.shelf-card .buy-row { gap: 0; }
.shelf-card .buy-row .tick { margin-right: 0.625rem; }
.buy-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shelf-card .buy-row .name { font-size: 0.9375rem; line-height: 1.125rem; padding-block: calc((1.364em - 1.125rem) / 2); }
.buy-sub { font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.buy-sub.green { color: var(--green); }
.shelf-card .buy-row .qty { font-size: 0.9375rem; line-height: 1.125rem; padding-block: calc((1.364em - 1.125rem) / 2); color: var(--text-muted); }
.shelf-card .buy-row .qty:last-child { margin-right: 0.5rem; }
.shelf-card .buy-row .mini-chip { margin-left: 0.5rem; }
.shelf-card .buy-row.at-home .mini-chip { margin-left: 0; }
/* Кнопки внизу: «Всё куплено — переложить домой» 52/17 (12 + 6), «Купил N …» контуром 46/15 (12 + 8). */
.shimmer-btn.cart-all-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 3.25rem; margin-top: 1.125rem; font-size: 1.0625rem;
}
.pill-outline.cart-bought-btn { height: 2.875rem; margin-top: 1.25rem; font-size: 0.9375rem; }
.deliv-have.svc { margin-top: 0.625rem; }

/* --- Окна Корзины --- */
/* Текст окна «Переложить всё домой?» — `bodyMedium` 14/20 серым (у окна-вопроса 15/20). */
.confirm-body.body-14 { font-size: 0.875rem; line-height: 1.25rem; }
.modal-confirm input.app-field { width: 100%; }
/* Список окна: столбик через 8 («Заменить: …») или 6 («Чем заменить», «Дешевле»). */
.dlg-rows { display: flex; flex-direction: column; }
.dlg-rows.gap-8 { gap: 0.5rem; }
.dlg-rows.gap-6 { gap: 0.375rem; }
.dlg-rows > form { margin: 0; }
/* «Свой вариант» живёт в том же столбике, что строки, — обёртки его шаг не ломают. */
.own-box, .own-rows { display: contents; }
/* Строка-вариант: скругление 12, фон `CardSurface`, рамка 1 `Divider` внутрь. */
.opt-row {
    display: flex; align-items: center; width: 100%;
    border: 0; border-radius: var(--radius-inner);
    background: var(--card-surface); box-shadow: inset 0 0 0 0.0625rem var(--divider);
    font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.opt-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* «Заменить: …» — кружок 32 с рамкой `GreenBorderSoft`, ⇄ 16, название 17/20, причина 13/16, стрелка 15. */
.sub-row { padding: 0.625rem 0.6875rem; }
.sub-ic {
    width: 2rem; height: 2rem; flex: none; margin-right: 0.625rem; border-radius: 50%;
    background: var(--green-container); box-shadow: inset 0 0 0 0.0625rem var(--green-border-soft);
    color: var(--green-accent); display: flex; align-items: center; justify-content: center;
}
.sub-ic .ic { width: 1rem; height: 1rem; }
.sub-row b, .brand-row b, .save-row b {
    font-size: 1.0625rem; line-height: 1.25rem; padding-block: calc((1.364em - 1.25rem) / 2); font-weight: 700;
}
.sub-row .sub { font-size: 0.8125rem; line-height: 1rem; color: var(--text-muted); }
.opt-chev { width: 0.9375rem; height: 0.9375rem; flex: none; margin-left: 0.5rem; color: var(--text-muted); }
/* «Чем заменить» — фото 46 на белом, 9, марка 12/15, разбор цены 12/15; справа цена 17/20 и
   «дешевле всех» 11/14 зелёным; выбранная — заливка `GreenContainer` и рамка `GreenBorderSoft`. */
.brand-row { padding: 0.5625rem 0.625rem; }
.brand-row .goods-photo.sm { margin-right: 0.5625rem; background: var(--surface); }
.brand-row .grow { gap: 0.125rem; }
.brand-row .sub { font-size: 0.75rem; line-height: 0.9375rem; color: var(--text-muted); }
.brand-row.sel { background: var(--green-container); box-shadow: inset 0 0 0 0.0625rem var(--green-border-soft); }
.brand-price { flex: none; margin-left: 0.5rem; display: flex; flex-direction: column; align-items: flex-end; }
.brand-price b { font-weight: 800; }
.brand-row.sel .brand-price b { color: var(--green-accent); }
.brand-price em { font-style: normal; font-size: 0.6875rem; line-height: 0.875rem; font-weight: 700; color: var(--green); }
/* «Или свой вариант:» 13/16, поле-таблетка 46 с рамкой панели, отказ 13/16 оранжевым жирным;
   подсказки — строки 15/18 с «+» 14 через 9. */
.own-label { margin: 0.125rem 0 0; font-size: 0.8125rem; line-height: 1rem; color: var(--text-muted); }
input.own-field {
    height: 2.875rem; min-height: 0; padding: 0 0.875rem;
    border: 0; border-radius: var(--radius-button); box-shadow: inset 0 0 0 0.0625rem var(--panel-border);
    background: var(--surface); font-size: 0.875rem;
}
input.own-field::placeholder { color: var(--text-muted); }
.own-blocked { margin: 0; font-size: 0.8125rem; line-height: 1rem; font-weight: 700; color: var(--orange); }
.own-row { padding: 0.5625rem 0.6875rem; gap: 0.5625rem; font-size: 0.9375rem; line-height: 1.125rem; }
.own-row .ic { width: 0.875rem; height: 0.875rem; flex: none; color: var(--green-accent); }
/* «Вернуть исходный продукт» — оранжевая строка 15 жирным во всю ширину, поля 11/10. */
.reset-row {
    width: 100%; padding: 0.625rem 0.6875rem; border: 0; border-radius: var(--radius-inner);
    background: none; color: var(--orange); font: inherit; font-size: 0.9375rem; font-weight: 700;
    text-align: left; cursor: pointer;
}
/* «Что заменить, чтобы вышло дешевле» — фон панели, рамка `PanelBorder`, поля 12/10; цена 13/16;
   таблетка «−N ₽» 15/18 очень жирная зелёным на `GreenContainer`, поля 10/5. */
.save-row {
    display: flex; align-items: center; width: 100%; padding: 0.625rem 0.75rem;
    border: 0; border-radius: var(--radius-inner);
    background: var(--panel-surface); box-shadow: inset 0 0 0 0.0625rem var(--panel-border);
    font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.save-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.save-row b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.save-row .sub { font-size: 0.8125rem; line-height: 1rem; color: var(--text-muted); }
.save-pill {
    flex: none; margin-left: 0.625rem; padding: 0.3125rem 0.625rem; border-radius: var(--radius-button);
    background: var(--green-container); color: var(--green-accent);
    font-size: 0.9375rem; line-height: 1.125rem; font-weight: 800; white-space: nowrap;
}
/* ⚠️ СТРОКА-КАРТОЧКА. В приложении каждый продукт — своя карточка (`PantryAmountRow`):
   отступы 11/9 и промежуток 8 между карточками (размеры макета ÷ 2,625). Раньше сайт держал
   весь список в ОДНОЙ карточке во весь экран, и она читалась как один большой блок. */
.card-row { padding: 0.5625rem 0.6875rem; margin-bottom: 0.5rem; }
/* ⚠️ Мерки строки — `PantryAmountRow` (Н264-086): между названием, полем и крестиком по 9,
   название 15/18 не больше двух строк, крестик 18 без полей вокруг. Было 8, одна строка
   высотой 22 и крестик 20 в полях 4 — строка выходила выше телефонной. */
.pantry-row { display: flex; align-items: center; gap: 0.5625rem; }
.pantry-row .name {
    flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.125rem;
    padding-block: calc((1.364em - 1.125rem) / 2); color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pantry-qty { display: flex; align-items: center; gap: 0.375rem; flex: none; }
/* ⚠️ ПОЛЕ-ТАБЛЕТКА С ЕДИНИЦЕЙ ВНУТРИ — как в приложении (`PantryAmountRow`): 107×41
   (макет 280×108 ÷ 2,625), рамка на всей таблетке, «г» / «мл» справа внутри неё.
   Раньше поле было 74 px и в него не влезала даже собственная подсказка «сколько» —
   она обрывалась на «сколькс», — а единица и кнопка «Сохранить» стояли снаружи и
   съедали ширину у названия продукта. */
.pantry-field {
    display: flex; align-items: center; gap: 0.25rem; flex: none;
    width: 6.6875rem; height: 2.5625rem; box-sizing: border-box;
    padding: 0 0.6875rem;
    background: var(--surface); border: 0.0625rem solid var(--field-border);
    border-radius: 999px;
}
.pantry-field input[type="text"] {
    flex: 1; min-width: 0; width: auto;
    border: 0; background: none; padding: 0; height: 100%;
    font-size: 1rem; color: var(--text);
}
.pantry-field input[type="text"]:focus { outline: none; }
.pantry-field .unit { flex: none; font-size: 0.75rem; color: var(--text-muted); }
.pantry-row .unit { color: var(--text-muted); font-size: 0.875rem; }
.pantry-row .kill { border: 0; background: none; color: var(--danger); cursor: pointer; padding: 0; display: inline-flex; }
.pantry-row .kill .ic { width: 1.125rem; height: 1.125rem; }
/* ⚠️ Подсказка в поле количества — 13 серым, число — 16 (`PantryAmountRow`). Подсказка
   наследовала 16 от поля и не влезала в таблетку 107. */
.pantry-field input[type="text"]::placeholder { font-size: 0.8125rem; color: var(--text-muted); opacity: 1; }

/* --- Экран «Что есть дома» — `PantryScreen` телефона (Н264-079…083, 22.09.2026) ---
   Верх лежит ПРЯМО НА ФОНЕ, без карточки: подсказка 14/20 серым, под ней 16; поле
   `OutlinedTextField` 56 со скруглением 12, рамка 1 цвета `outline` (в фокусе 2 зелёная), фон
   прозрачный, текст и подсказка 16/24 с полями 16; через 8 — `Button` 56 × 72 таблеткой с
   `primaryButtonLook` и значком «плюс» 24. Пустое поле — кнопка выключена: материальная
   `Button` кладёт на перелив свою серую пелену 12% и гасит значок до 38%, перелив остаётся.
   ⚠️ Это НЕ круглая кнопка 50 вкладки «Дома» Корзины (`.pantry-add`) — там своя деталь. */
/* ⚠️ Сверху МИНУС 4: у шапки снизу 14, а в телефоне под ней 6 и `Spacer(4)` — 10. Отступы
   схлопываются: 14 + (−4) = 10. */
.pantry-top-hint { margin: -0.25rem 0 1rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
.pantry-top-add { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.pantry-top-add input[type="text"] {
    flex: 1; min-width: 0; height: 3.5rem; padding: 0 1rem;
    border: 0; border-radius: 0.75rem; box-shadow: inset 0 0 0 0.0625rem var(--outline-strong);
    background: transparent; color: var(--text); font-size: 1rem; line-height: 1.5rem;
}
.pantry-top-add input[type="text"]:focus { outline: none; box-shadow: inset 0 0 0 0.125rem var(--green); }
.pantry-top-add input[type="text"]::placeholder { color: var(--text-muted); opacity: 1; }
.pantry-top-add button {
    flex: none; width: 4.5rem; height: 3.5rem; padding: 0;
    border: 0; border-radius: 999px; background: var(--btn-green); box-shadow: var(--glow-green);
    color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pantry-top-add button .ic { width: 1.5rem; height: 1.5rem; }
.pantry-top-add input[type="text"]:placeholder-shown ~ button {
    background: linear-gradient(color-mix(in srgb, var(--text) 12%, transparent) 0 0), var(--btn-green);
    color: color-mix(in srgb, var(--text) 38%, transparent); cursor: default;
}
/* «Что можно приготовить» — `ShimmerButton` через 12 под полем, только при непустом списке. */
.pantry-cook-open { margin-top: 0.75rem; }
/* Подсказка про количество — `labelMedium` 12/16 серым, 16 сверху и 8 снизу, над списком. */
.pantry-amount-hint {
    margin: 1rem 0 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500;
    padding-block: calc((1.364em - 1rem) / 2); color: var(--text-muted);
}
/* Пустой список — `EmptyState` (общая `.empty-card`) через 16 под полем. */
.pantry-screen-empty { margin-top: 1rem; }

/* --- Карточка блюда (макет 28a) ---
   Порядок и состав ровно как на экране приложения: фото край-в-край с кружком «назад»,
   название, время и сложность, две пилюли оценки, четыре плитки КБЖУ, аллергены,
   порции, состав, шаги, кнопка «Начать готовку». */
.hero-photo { position: relative; margin: 0 -1rem 0.875rem; }
.hero-photo img, .hero-photo .no-photo {
    display: block; width: 100%; height: 15.25rem; object-fit: cover;
    background: var(--green-container); color: var(--green);
    border: 0; border-radius: 0;
}
.hero-photo .no-photo { display: flex; align-items: center; justify-content: center; }
.hero-photo .no-photo.warm { background: var(--orange-container); color: var(--orange); }
.hero-photo .no-photo .ic { width: 4.75rem; height: 4.75rem; }
.hero-photo .back { position: absolute; left: 0.875rem; top: 0.875rem; }

/* Две пилюли оценки под названием (в приложении ReactionPills): значок «нравится» всегда
   зелёный, «не нравится» — серый; выбранная получает рамку в 2 px своим цветом. */
.grow { flex: 1; min-width: 0; }
.btn-ghost .ic { color: var(--green); }
.btn-ghost.down { border-color: var(--chip-border); color: var(--text); }
.btn-ghost.down .ic { color: var(--text-muted); }
.btn-ghost.on { border-width: 0.125rem; border-color: var(--green); color: var(--green-accent); }
.btn-ghost.down.on { border-color: var(--danger); color: var(--danger); }
.btn-ghost.down.on .ic { color: var(--danger); }

/* Заголовок раздела и подпись под ним лежат НА ФОНЕ страницы, а список — в карточке
   (макет 28a): «Ингредиенты», «Как готовить», «Порции», «Готовим на». */
.block-title { font-size: 1.125rem; line-height: 1.375rem; font-weight: 800; letter-spacing: -.02em; margin: 1.125rem 0 0.125rem; }
.block-sub { margin: 0 0 0.3125rem; padding: calc((1.364em - 1rem) / 2) 0 calc((1.364em - 1rem) / 2) 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.bare-row { margin: 1.125rem 0 0.25rem; }
.bare-row .muted { margin: 0.375rem 0 0; }
/* Зелёная точка перед названием продукта. */
.list-row .dot { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--green); }
/* Список внутри карточки: без черты сверху и под последней строкой — иначе линия липнет
   к краю карточки и читается как обрезанная строка (макет 28a). */
.list.list-plain { border-top: 0; }
.list.list-plain .list-row:last-child { border-bottom: 0; }
/* Пилюли оценки — по содержимому, не во всю ширину. */
.react-pills { display: flex; gap: 0.625rem; flex-wrap: wrap; margin: 0.875rem 0 1rem; }

/* Четыре плитки КБЖУ. Цвета уже заданы палитрой и сняты пипеткой с макета 28a. */
.macro-line { margin: 0 0 0.5rem; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--hint-text); }
.macro-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.macro-tile {
    background: var(--card-bg);
    border: 0.0625rem solid var(--outline);
    border-radius: var(--radius-inner);
    box-shadow: var(--shadow-card);
    padding: 0.625rem 0.25rem;
    text-align: center;
}
.macro-tile b { display: block; font-size: 1.25rem; line-height: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.macro-tile span { display: block; margin-top: 0.125rem; font-size: 0.75rem; line-height: 0.875rem; color: var(--text-muted); }
/* ⚠️ «ккал» ОТДЕЛЬНОЙ СТРОКОЙ, как в телефоне (Н246): число, единица, подпись. Без неё
   плитка читалась как «0 Вчера» — без единицы измерения. */
.macro-tile i { display: block; font-style: normal; font-size: 0.75rem; line-height: 0.875rem; color: var(--text-muted); }
.macro-tile.kcal b { color: var(--green-accent); }
.macro-tile.prot b { color: var(--protein); }
.macro-tile.fat b { color: var(--fat); }
.macro-tile.carb b { color: var(--carb); }

/* ═══ Экран «Статистика»: кольца Б/Ж/У, карточка веса и месяцы (Н246, 14.09.2026) ═══
   Всё это раньше было нарисовано по-своему, а не как в телефоне. Мерки взяты с экрана
   `StatisticsScreen` и переведены в доли: 76 dp кольца → 4,75rem, 9 dp толщина → доля радиуса. */
.macro-rings { display: flex; justify-content: space-evenly; margin-top: 0.875rem; }
.macro-ring { position: relative; width: 5.5rem; text-align: center; }
.macro-ring svg { display: block; width: 4.75rem; height: 4.75rem; margin: 0 auto; }
.macro-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
/* Щель шкалы — 90° внизу: рисуем дугу в 270° из полного круга (радиус 42 → длина 263,9). */
.macro-ring .track { stroke: var(--divider); stroke-dasharray: 197.9 999; }
.macro-ring .fill { transition: stroke-dasharray .4s; }
/* Число с единицей — по центру кольца. */
.macro-ring .val {
    position: absolute; left: 0; right: 0; top: 1.5rem; font-style: normal;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.macro-ring .val b { font-size: 1rem; font-weight: 800; }
.macro-ring .val em { font-style: normal; font-size: 0.5625rem; color: var(--text-muted); }
.macro-ring .cap { display: block; margin-top: 0.375rem; font-size: 0.75rem; font-weight: 600; }
.macro-ring .norm { display: block; font-size: 0.6875rem; color: var(--text-muted); }

/* Карточка веса. Заголовок «Вес» — как у остальных карточек, число под ним крупное. */
.weight-card .card-title { font-size: 1rem; line-height: 1.25rem; font-weight: 700; }
.weight-now { display: flex; align-items: baseline; gap: 0.25rem; margin-top: 0.25rem; }
.weight-now b { font-size: 1.5rem; line-height: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.weight-now em { font-style: normal; font-size: 0.75rem; color: var(--text-muted); }
.weight-now .chip { margin-left: 0.375rem; }
.weight-delta {
    margin-left: 0.375rem; padding: 0.1875rem 0.5rem;
    border-radius: 0.5rem; background: var(--green-container); color: var(--green-accent);
    font-size: 0.6875rem; line-height: 0.9375rem; font-weight: 600;
}
.weight-delta.off { background: var(--orange-container); color: var(--orange); }
button.btn-primary.btn-sm.weight-log {
    min-height: 2.5rem; padding: 0.5rem 0.875rem;
    border-radius: 0.75rem; font-size: 0.8125rem; line-height: 1rem;
}
/* Зелёная строка-ссылка со значком: «Задать целевой вес ✏️» и «Вся история (N) →». */
.link-row {
    display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem;
    padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none;
    font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--green-accent);
}
.link-row.wide { display: flex; width: 100%; margin-top: 0.75rem; }
.link-row .arrow-txt { font-size: 1.125rem; line-height: 1; }
.norm-status {
    display: flex; align-items: center; gap: 0.3125rem; margin: 0.125rem 0 0;
    font-size: 0.75rem; font-weight: 600; color: var(--green-accent);
}
.norm-status.off { color: var(--orange); }
.nowrap-norm { margin: 0.625rem 0 0; }
.goal-line { margin: 0.625rem 0 0; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.goal-line.done { color: var(--green-accent); }
.goal-bar { height: 0.5rem; margin-top: 0.375rem; background: var(--green-container); }
.goal-bar span { background: var(--green); }

/* Месяц — карточкой в три строки, как `MonthCard`. */
.month-kcal { margin: 0.375rem 0 0; font-size: 1rem; font-weight: 700; color: var(--calorie); }
.month-macros { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 0.5rem; }
.month-macros span { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.75rem; color: var(--text-muted); }
.month-macros i { width: 0.5rem; height: 0.5rem; border-radius: 50%; }

/* Строка аллергенов. ⚠️ Видна ВСЕГДА: «нет аллергенов» — это ответ, а не пустота.
   Цвет несут кружок и текст, рамку карточки не красим. */
.allergen-row { display: flex; align-items: center; gap: 0.625rem; }
.allergen-row .round {
    width: 2.125rem; height: 2.125rem; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--green-container); color: var(--green-accent);
}
.allergen-row.has .round { background: var(--orange-container); color: var(--orange); }
.allergen-row b { font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 600; }
.allergen-row.has b { color: var(--orange); }

/* Счётчик-таблетка «− N +» — порции и «приготовить впрок». */
.row-line { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.row-line > b { font-size: 1rem; line-height: 1.25rem; font-weight: 700; }
.stepper {
    display: inline-flex; align-items: center; gap: 0.125rem; flex: none;
    background: var(--surface); border: 0.0625rem solid var(--chip-border);
    border-radius: var(--radius-button); padding: 0.1875rem;
}
.stepper .step-btn {
    width: 2rem; height: 2rem; border: 0; border-radius: 50%;
    background: none; color: var(--green-accent); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; font-family: inherit;
}
.stepper .step-btn:hover { background: var(--green-container); }
.stepper .step-btn.off { color: var(--text-muted); opacity: .4; pointer-events: none; }
.stepper .step-btn .ic { width: 1.0625rem; height: 1.0625rem; }
.stepper .val { min-width: 1.875rem; text-align: center; font-size: 1rem; font-weight: 800; }

/* Строка «Готовим на» — открывает окно «На кого готовим?» (в приложении CookForDialog). */
.cook-for { display: inline-flex; align-items: center; gap: 0.375rem; }

/* Список шагов: зелёный кружок с номером, ниточка между кружками, чип времени. */
.steps { margin: 0; padding: 0; list-style: none; }
.step-row { display: flex; gap: 0.75rem; padding-bottom: 0.875rem; position: relative; }
.step-row:last-child { padding-bottom: 0; }
.step-row .num {
    width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%;
    background: var(--btn-pill); color: #fff;
    font-size: 0.875rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
/* Ниточка между кружками — чтобы шаги читались одной дорожкой, а не отдельными абзацами. */
.step-row:not(:last-child)::before {
    content: ""; position: absolute; left: 0.84375rem; top: 1.875rem; bottom: 0.25rem;
    width: 0.0625rem; background: var(--outline);
}
.step-row .txt { flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.3125rem; padding-top: 0.1875rem; }
.step-time {
    display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.375rem;
    /* ⚠️ Отдельной строкой ПОД текстом: внутри абзаца чип уносил с собой последнее слово. */
    float: none; clear: both;
    /* ⚠️ СВОЯ ПАРА ЦВЕТОВ, А НЕ ОБЩИЙ ОРАНЖЕВЫЙ ПОДПИСКИ (Н257): в телефоне у плашки времени
       тёплая заливка `StepTimeFill` и тёмно-рыжий текст `StepTimeText`, а значок ещё темнее.
       Общий `--orange` — цвет подписки и предупреждений, и на нём текст читался хуже. */
    background: var(--step-time-fill); color: var(--step-time-text);
    border-radius: var(--radius-badge); padding: 0.125rem 0.5rem;
    font-size: 0.8125rem; font-weight: 700;
}
.step-time .ic { width: 0.875rem; height: 0.875rem; color: var(--step-time-icon); }
.step-row .txt > .step-time { display: flex; width: fit-content; }

/* --- Каталог рецептов (макет 25a) ---
   Карточка повторяет список приложения: фото слева, справа четыре яруса — название,
   ккал/время, вес/сложность, состав, а пара кружков-оценок прижата в правый НИЖНИЙ угол.
   ⚠️ Содержимое выравниваем ПО ВЕРХУ: при выравнивании по центру короткое название
   уезжало на середину фото, и ярусы переставали читаться сверху вниз. */
.recipe-list { display: flex; flex-direction: column; gap: 0.75rem; }
/* ⚠️ ШАГ ЭКРАНА — 12, КАК `spacedBy(12)` ТЕЛЕФОНА (Н266-122): заголовок → переключатель → поиск →
   карточки. У общего заголовка экрана снизу 4, поэтому на «Рецептах» — свой; пустая карточка
   ниже ещё на 8 (`EmptyState(Modifier.padding(top = 8.dp))`), то есть 20 под полем поиска. */
.recipes-screen .screen-title { margin-bottom: 0.75rem; }
.recipe-list > .empty-card { margin-top: 0.5rem; }
/* ⚠️ Отступ 11 и промежуток 10 — как в приложении (`Row(Modifier.padding(11.dp))`,
   `Spacer(width = 10.dp)`). */
.recipe-row { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.6875rem; margin-bottom: 0; position: relative; }
.recipe-row .meal-photo, .recipe-row .meal-photo-box { width: 10rem; height: 10rem; }
/* ⚠️ МЕРКИ КАРТОЧКИ ИЗ ТЕЛЕФОНА (`RecipeCard`, Н264): колонка с промежутком 5; название 16/24
   жирное в три строки; «ккал · мин» и «г · сложность» — 12/16 со значками 14, между парами 14,
   между рядами 2; «По подписке» 12/16 со значком 14; состав 11/16 в три строки. Сайт брал
   мерки карточки Главной (17/21, 15, значки 17, состав 13 без обрезки) — список был крупнее. */
.recipe-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3125rem; }
.recipe-row .meal-title {
    font-size: 1rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.recipe-row .meal-facts { margin: 0; gap: 0.125rem 0.875rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.recipe-row .meal-facts .ic { width: 0.875rem; height: 0.875rem; }
.recipe-row .meal-ings {
    margin: 0; font-size: 0.6875rem; line-height: 1rem; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.recipe-row .lock-badge { margin: 0; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
/* Название — ссылка на рецепт, но нажимается ВСЯ карточка (приём с Главной, журнал №197):
   растянутая псевдо-ссылка лежит под кнопками оценки, поэтому кнопки продолжают работать. */
.recipe-body .meal-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.recipe-row:hover .meal-title { text-decoration: underline; }
/* «По подписке» — оранжевая строка под названием (в приложении Icons.Outlined.Lock + текст). */
.lock-badge {
    display: inline-flex; align-items: center; gap: 0.3125rem;
    margin-top: 0.25rem;
    color: var(--orange);
    font-size: 0.875rem; line-height: 1.0625rem; font-weight: 600;
}
.lock-badge .ic { width: 0.875rem; height: 0.875rem; }
/* Кружки оценки — в ряд, в правом нижнем углу карточки. */
.recipe-marks { display: flex; gap: 0.5rem; margin-top: 0.125rem; align-self: flex-end; position: relative; z-index: 2; }
/* Кружок оценки — `ReactToggle`: 35, значок 17; в покое рамка цветом разделителя, у выбранного —
   рамка чипа и заливка; выбранное «нравится» — зелёный `Green`, «не нравится» — красный. */
.mark {
    border: 0.0625rem solid var(--divider); background: var(--surface); color: var(--text-muted);
    border-radius: 50%; width: 2.1875rem; height: 2.1875rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit;
}
.mark .ic { width: 1.0625rem; height: 1.0625rem; }
/* ⚠️ Включённый «не нравится» — КРАСНЫЙ, как в приложении. Класс `down` шаблон обязан
   ставить рядом с `on`: без него правило ниже не срабатывало и дизлайк горел зелёным. */
.mark.on { background: var(--green-container); border-color: var(--chip-border); color: var(--green); }
.mark.on.down { color: var(--danger); }
.mark:hover { background: var(--green-container); }

/* --- Полоса дат плана (макет 24a) ---
   Тот же вид, что у «таблеток» анкеты: выбранный день — зелёный со свечением, остальные —
   светлые с тонкой рамкой. ⚠️ Тень есть и у НЕвыбранных: без неё лента дней выглядела
   плоской наклейкой на фоне. */
/* ⚠️ ИМЯ КЛАССА БЫЛО ЗАНЯТО ДВАЖДЫ, И ЭТО СТОИЛО РАЗЪЕХАВШИХСЯ ЭКРАНОВ (Н242, 14.09.2026).
   `.days` значило и «лента дат плана» (здесь), и «сколько дней серии» — надпись в полосе серии
   на Главной и в Профиле. Правило отсюда накладывалось на ту надпись: `display:flex`, отступ
   снизу 10 px и внешний 8 px. Полоса серии вырастала с 66 до 93 точек — на 40 % выше, чем
   в телефоне, и заказчик увидел это сразу: «окошки на сайте больше, чем должны быть».
   Лента дат теперь зовётся своим именем. */
/* ЛЕНТА ДАТ «ПЛАНА» — `LazyRow` + `DayChip` телефона (Н264-010, Н266-112, журнал №280).
   Плитка 54, промежуток 6, скругление 12, поля 13 сверху и снизу (рамка рисуется ВНУТРИ, как в
   телефоне, и места не берёт); день недели 11/16 средний, 2, число 15/19 жирное (строка не ниже
   букв Nunito), 3, точка 4 — у сегодняшнего зелёная, на выбранной белая, место держится всегда.
   Итог 71,5. Выбранная — ровная зелёная и обычная тёмная тень 10, без свечения. Ползунка нет:
   лента листается пальцем, как у телефона. Правила — только внутри `.plan-days`: имя `.day`
   слишком общее. */
.plan-days {
    display: flex; gap: 0.375rem; overflow-x: auto;
    /* Место под тень выбранной плитки — внутри ленты (6 сверху, 15 снизу), а в раскладке лента
       равна плитке: снизу его съедает отрицательное поле, сверху поле 6 + 6 дают 12 под шапкой. */
    padding: 0.375rem 0 0.9375rem; margin: 0.375rem 0 -0.9375rem;
    scrollbar-width: none;
}
.plan-days::-webkit-scrollbar { display: none; }
.plan-days .day {
    flex: none; width: 3.375rem;
    display: flex; flex-direction: column; align-items: center;
    padding: 0.8125rem 0;
    border-radius: var(--radius-inner);
    background: var(--panel-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--panel-border), var(--shadow-card);
    text-decoration: none; color: var(--text);
}
.plan-days .day span { font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.plan-days .day b {
    margin-top: 0.125rem;
    font-size: 0.9375rem; line-height: 1.1875rem; padding-block: calc((1.364em - 1.1875rem) / 2);
    font-weight: 700;
}
.plan-days .day i { width: 0.25rem; height: 0.25rem; margin-top: 0.1875rem; border-radius: 50%; }
.plan-days .day.today i { background: var(--green-accent); }
.plan-days .day.active {
    background: var(--green); color: #fff;
    box-shadow: inset 0 0 0 0.0625rem var(--green), 0 0.3125rem 0.625rem rgba(0, 0, 0, .2);
}
.plan-days .day.active span { color: #fff; }
.plan-days .day.active.today i { background: #fff; }

/* --- Лендинг --- */
.hero { padding: 2.5rem 0 1.5rem; }
.hero h1 { font-size: 2.25rem; line-height: 1.15; margin: 0 0 0.75rem; font-weight: 800; }
.hero p.lead { font-size: 1.125rem; color: var(--text-muted); margin: 0 0 1.5rem; max-width: 40rem; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.feature { background: var(--card-bg); border: 0.0625rem solid var(--outline); border-radius: var(--radius-card); padding: 1.125rem; box-shadow: var(--shadow-card); }
.feature h3 { margin: 0 0 0.375rem; font-size: 1.0625rem; }
.feature p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; }

/* --- Тарифы --- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.plan {
    position: relative;
    border: 0.0625rem solid var(--outline); border-radius: var(--radius-card); padding: 1rem;
    text-align: center; background: var(--card-bg); box-shadow: var(--shadow-card);
}
/* `.title/.price/.old` и `.plan-link` — плитки рассказа о приложении (`index.html`). */
.plan .title { font-size: 0.9375rem; color: var(--text-muted); }
.plan .price { font-size: 1.5rem; font-weight: 800; margin: 0.375rem 0 0.125rem; }
.plan .old { text-decoration: line-through; color: var(--text-muted); font-size: 0.875rem; }
/* ⚠️ Радио-кружок прячем: выбранную плитку видно по зелёной рамке и галочке. Правило было задано
   дважды подряд — оставлено одно. */
.plan input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.plan-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.plan-link:hover { border-color: var(--green); box-shadow: var(--shadow-pop); }
.plan-link .plan-cta { margin-top: auto; padding-top: 0.625rem; color: var(--green-accent); font-weight: 700; }
.plan-link .badge { align-self: center; }
/* Плитка тарифа на экране «Подписка» — `SubPlanTile` (Н264, C171): по две в ряд через 10, ряды
   через 14; поля 14, текст слева; рамка 1 внутрь и тень 2, у выбранной рамка 2 зелёная и тень
   глубже, ФОН ТОТ ЖЕ. Сверху срок 15/18 и справа — зелёный кружок 21 с галочкой (выбранная) или
   оранжевая плашка «−17%» (остальные со скидкой); через 4 цена 23/27 (у выбранной зелёная), под
   ней зачёркнутая старая цена или «в месяц» 14/17.
   ⚠️ Было: всё по центру, заливка зелёным, без галочки, рамка `border` отнимала ширину (урок Н243).
   ⚠️ СЕЛЕКТОР `label.plan`: плитки-ссылки `index.html` остаются как были. */
.plans.sub-plans { gap: 0.875rem 0.625rem; }
label.plan {
    display: block; padding: 0.875rem; text-align: left; cursor: pointer;
    border: 0; box-shadow: inset 0 0 0 0.0625rem var(--outline), var(--shadow-card);
}
/* ⚠️ ВЫДЕЛЕНА РОВНО ОДНА ПЛИТКА — та, что выбрана сейчас (Н264-192). Было ещё правило для класса
   `selected`, который сервер ставил первой плитке: после выбора другого срока зелёными горели
   ДВЕ плитки, и было не понять, за что заплатишь. Выбор с сервера приходит отметкой `checked`. */
.plan:has(input[type="radio"]:checked) {
    box-shadow: inset 0 0 0 0.125rem var(--green), 0 0.25rem 0.75rem rgba(46, 125, 50, .22);
}
label.plan:has(input[type="radio"]:focus-visible) { outline: 0.125rem solid var(--green-accent); outline-offset: 0.125rem; }
.plan-top { display: flex; align-items: center; gap: 0.375rem; }
.plan-name { flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.125rem; font-weight: 600; color: var(--text); }
.plan-tick {
    display: none; width: 1.3125rem; height: 1.3125rem; flex: none; border-radius: 50%;
    background: var(--green); color: #fff; align-items: center; justify-content: center;
}
.plan-tick .ic { width: 0.8125rem; height: 0.8125rem; }
.plan-off {
    flex: none; padding: 0.1875rem 0.4375rem; border-radius: var(--radius-badge);
    background: var(--orange-container); color: var(--orange);
    font-size: 0.75rem; line-height: 0.9375rem; font-weight: 700;
}
.plan:has(input[type="radio"]:checked) .plan-tick { display: flex; }
.plan:has(input[type="radio"]:checked) .plan-off { display: none; }
.plan-price { display: block; margin-top: 0.25rem; font-size: 1.4375rem; line-height: 1.6875rem; font-weight: 800; color: var(--text); }
.plan:has(input[type="radio"]:checked) .plan-price { color: var(--green-accent); }
.plan-sub { display: block; font-size: 0.875rem; line-height: 1.0625rem; color: var(--hint-text); }

/* --- Формы --- */
.form { max-width: 28.75rem; }
.field { margin-bottom: 0.875rem; }
.field label { display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.25rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], select, textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 0.09375rem solid var(--field-border);
    border-radius: var(--radius-inner);
    font-size: 1rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--hint-text); }
select {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 1.125rem) 1.375rem, calc(100% - 0.8125rem) 1.375rem;
    background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
    background-repeat: no-repeat;
    padding-right: 2.125rem;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0.125rem solid var(--green); border-color: transparent; }
input[type="checkbox"], input[type="radio"] { width: 1.125rem; height: 1.125rem; accent-color: var(--green); }
.inline-input { flex: 1 1 9.375rem; width: auto; min-width: 0; font-size: 0.9375rem; padding: 0.5rem 0.625rem; }
.inline-input:is(select) { background-position: calc(100% - 1rem) 1.125rem, calc(100% - 0.6875rem) 1.125rem; }
.check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.875rem; margin-bottom: 0.75rem; }
.fields-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.fields-row .field { flex: 1; min-width: 6.875rem; margin-bottom: 0; }

/* --- Подсказка «?» у поля анкеты — `HelpIcon(boxed = true)` телефона (Н264-008) ---
   Зелёный кружок 17 (у заголовка шага 19): заливка `GreenContainer`, рамка `GreenAccent` 30%,
   «?» очень жирный цвета `GreenAccent`, кегль 0,62 и строка 0,70 от кружка. Был серый кружок 18 с
   серым «?» обычной жирности. Нажатие открывает окно `_dlg_help.html`. */
.fieldhelp {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.0625rem; height: 1.0625rem; padding: 0; margin-left: 0.25rem; vertical-align: middle;
    border: 0; border-radius: 50%; background: var(--green-container);
    box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--green-accent) 30%, transparent);
    color: var(--green-accent); font: inherit; font-size: 0.65875rem; line-height: 0.74375rem;
    font-weight: 800; letter-spacing: 0; cursor: pointer; user-select: none;
}

/* --- «Блюдо не найдено» (`recipe_missing`, Н264-044): по центру экрана с полями 24, текст 16/24
   серым по центру, через 16 — материальная `Button` с `primaryButtonLook`: высота 40, поля 24,
   подпись `labelLarge` 13/16 жирная, белая. --- */
.missing-screen {
    min-height: calc(100vh - 12rem); padding: 1.5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.missing-text { margin: 0; font-size: 1rem; line-height: 1.5rem; color: var(--text-muted); }
.missing-back {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.5rem; margin-top: 1rem; padding: 0 1.5rem; border-radius: 999px;
    background: var(--btn-green); box-shadow: var(--glow-green); color: #fff; text-decoration: none;
    font-size: 0.8125rem; line-height: 1rem; font-weight: 700;
}

/* --- Окно-подсказка — `HelpCard` телефона (Н264-007): белое, скругление 19, поля 21, шаг 13;
   ширина — экран без 19 с каждой стороны; тень 24. --- */
.modal.help-card {
    width: min(27.5rem, calc(100vw - 2.375rem));
    padding: 1.3125rem; border: 0; border-radius: 1.1875rem;
    background: var(--surface); box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, .28);
}
.help-card[open] { display: flex; flex-direction: column; gap: 0.8125rem; }
.help-head { display: flex; align-items: center; gap: 0.625rem; }
.help-ic {
    width: 2.3125rem; height: 2.3125rem; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--green-container); color: var(--green-accent);
}
.help-ic .ic { width: 1.375rem; height: 1.375rem; }
.help-head b {
    font-size: 1.25rem; line-height: 1.5rem; padding-block: calc((1.364em - 1.5rem) / 2);
    font-weight: 700; color: var(--text);
}
/* Абзацы 13/20 через 9 — первый тёмный, второй серый; не выше 420, дальше своя прокрутка. */
.help-body { display: flex; flex-direction: column; gap: 0.5625rem; max-height: 26.25rem; overflow-y: auto; }
.help-body p { margin: 0; font-size: 0.8125rem; line-height: 1.25rem; }
.help-body .help-p1 { color: var(--text); }
.help-body .help-p2 { color: var(--text-muted); }
/* «Понятно» — `ShimmerButton(gradient = GreenPillPair, height = 50, скругление 13, 17 ExtraBold)`. */
.btn.btn-primary.help-ok {
    min-height: 0; height: 3.125rem; padding: 0 1.375rem; border-radius: 0.8125rem;
    background: var(--btn-pill); font-size: 1.0625rem; font-weight: 800;
}

/* --- Сообщения --- */
.msg { border-radius: var(--radius-inner); padding: 0.75rem 0.875rem; margin: 0.75rem 0; font-size: 0.9375rem; }
.msg-error { background: var(--danger-container); color: var(--danger); }
.msg-success { background: var(--green-container); color: var(--green-accent); }

/* --- Подвал --- */
.footer { border-top: 0.0625rem solid var(--outline); margin-top: 2rem; padding: 1.25rem 0 1.5rem; color: var(--text-muted); font-size: 0.875rem; }
.footer a { color: var(--text-muted); margin-right: 0.875rem; }

/* --- Режим готовки (макеты 28b/28c/28e/28d) ---
   Один шаг на экран: шапка с кружком «назад», полоса прогресса, зелёный номер, крупный текст
   шага, чипы озвучки, карточка голосовых команд, плашка таймера, «Спросить ИИ» и две кнопки
   внизу. Экран «Блюдо готово» показывается вместо всего перечисленного. */
/* ⚠️ КНОПКИ «НАЗАД» И «ДАЛЕЕ» — ВНИЗУ ЭКРАНА (находка Н258, 14.09.2026). В телефоне шаг
   занимает всю свободную высоту (`Column.weight(1f)` с прокруткой), а пара кнопок стоит ПОД
   ним, у нижнего края. На сайте они шли обычным потоком: на коротком шаге кнопки оказывались
   посреди экрана, а под ними оставалась пустая треть страницы.

   Устроено так же, как у анкеты (`.wiz-page`): страница — колонка во всю высоту окна, шаги
   растягиваются и прокручиваются сами, кнопки прижаты книзу. */
.cook-page { overflow: hidden; }
.cook-page .app { height: 100dvh; align-items: stretch; }
.cook-page .screen-col { display: flex; min-height: 0; }
.cook-page main.wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cook-page .cook { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Шаг прокручивается сам: длинный текст не должен уносить кнопки за нижний край.
   ⚠️ Окно прокрутки — во всю ширину экрана, поля — внутри (`verticalScroll().padding(15)` телефона):
   иначе прокрутка срезала свечение кружка с номером и тень таймера по краю колонки. */
.cook-page .cook-step { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -1rem; padding: 0 1rem; }
/* Поля пары кнопок — 10 сверху и снизу (`padding(vertical = 10)` телефона). */
.cook-page .cook-nav { margin-top: auto; padding: 0.625rem 0; }
/* «Блюдо готово» — ПО ЦЕНТРУ экрана, как в телефоне (`Column.align(Alignment.Center)`), и со своей
   прокруткой (`verticalScroll`): карточки «Списали…» и «Как разделить» делают его выше экрана. */
.cook-page .cook-final { margin: auto 0; min-height: 0; overflow-y: auto; }

/* Шапка готовки — на 17 от верха (`padding(top = 17)`, Н266-128). */
.cook { margin-top: 1.0625rem; }
/* ---------------------------------------------------------------------------
   ШАПКА ВЛОЖЕННОГО ЭКРАНА — зеркало `ScreenHeader` (Н264, 16.09.2026). Одна на все
   вложенные страницы (`_screen_head.html`), как в телефоне одна на пятнадцать экранов.
   Кружок 37 БЕЗ рамки и тени, тёмная стрелка 19, промежуток 12, заголовок 22/26.
   ⚠️ Отступ слева −4: в телефоне кружок стоит в 12 точках от края, а колонка сайта уже
   отступила 16. Сверху 6 и снизу 6+8 — как у шапки и списка под ней.
   --------------------------------------------------------------------------- */
/* ⚠️ ШАПКА НА 14 ОТ ВЕРХА (Н266-188, 190): у телефона список отступает 8 и у самой шапки сверху 6
   (`calculateTopPadding() + 8.dp` на 12 экранах из 14). Сайт ставил её на 6 — на всех вложенных
   экранах шапка была на 8 выше. «История приготовленных» и «Подписка» отступают 6 — у них 12
   (`.screen-head.top12`). */
.screen-head { display: flex; align-items: center; gap: 0.75rem; margin: 0.875rem 0 0.875rem -0.25rem; }
.screen-head.top12 { margin-top: 0.75rem; }
.screen-back {
    width: 2.3125rem; height: 2.3125rem; flex: none;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.screen-back .ic { width: 1.1875rem; height: 1.1875rem; }
/* Значок у заголовка (звёздочки помощника): 19, после него 6 — промежуток шапки 12 минус 6. */
.screen-head .head-ic { width: 1.1875rem; height: 1.1875rem; flex: none; color: var(--green); margin-right: -0.375rem; }
.screen-head-title { margin: 0; min-width: 0; font-size: 1.375rem; line-height: 1.625rem; font-weight: 800; letter-spacing: 0; color: var(--text); }

/* ---------------------------------------------------------------------------
   ИСТОРИЯ ВЕСА — `WeightHistoryScreen` (Н264): кнопка «Добавить за дату» — обычная материальная
   кнопка 40 с зелёным переливом и подписью 13 (без блика); карточка записи: поля 16 слева, 6 справа
   и сверху-снизу, вес 16/24 жирный, дата 12/16 серым, разница 12/16 серым и 6 до значков,
   значки 24 в кнопках 48 без кружков («удалить» красный). Между всеми строками 10.
   --------------------------------------------------------------------------- */
.weight-list { display: flex; flex-direction: column; gap: 0.625rem; }
.btn-plain-green {
    width: 100%; min-height: 2.5rem; padding: 0.5rem 1.5rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    border: 0; border-radius: 999px;
    background: var(--btn-green); box-shadow: var(--glow-green);
    color: #fff; font: inherit; font-size: 0.8125rem; line-height: 1rem; font-weight: 700; cursor: pointer;
}
.btn-plain-green .ic { width: 1.5rem; height: 1.5rem; }
.weight-row { display: flex; align-items: center; padding: 0.375rem 0.375rem 0.375rem 1rem; margin: 0; }
.weight-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.weight-main b { font-size: 1rem; line-height: 1.5rem; font-weight: 700; }
.weight-main span, .weight-delta { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.weight-delta { margin-right: 0.375rem; }
.weight-btn {
    width: 3rem; height: 3rem; flex: none;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.weight-btn .ic { width: 1.5rem; height: 1.5rem; }
.weight-btn.danger { color: var(--danger); }

/* ---------------------------------------------------------------------------
   ИСТОРИЯ ПРИГОТОВЛЕННЫХ — строка `HistoryRow` (Н264): поля 12, снимок 56 со скруглением 12,
   промежуток 12, название 16/20 полужирное в две строки, дата 13/17 бледная, крестик 36
   со значком 20 без кружка. Между строками 10.
   --------------------------------------------------------------------------- */
.history-list { display: flex; flex-direction: column; gap: 0.625rem; }
.history-row { display: flex; align-items: center; gap: 0; padding: 0.75rem; margin: 0; }
.history-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.history-thumb { width: 3.5rem; height: 3.5rem; flex: none; border-radius: 0.75rem; object-fit: cover; background: var(--green-container); }
.history-thumb.no-photo { display: flex; align-items: center; justify-content: center; color: var(--green); }
/* Заглушка без фото — общая `MealThumb` телефона (Н266-243): значок 0,38 снимка (56 × 0,38 = 21,28),
   подложка по приёму блюда — у обеда и ужина тёплая (`mealAccentColor`), значок всегда зелёный. */
.history-thumb.no-photo .ic { width: 1.33rem; height: 1.33rem; }
.history-thumb.warm { background: var(--orange-container); }
.history-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.history-title {
    font-size: 1rem; line-height: 1.25rem; font-weight: 600; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.history-date { font-size: 0.8125rem; line-height: 1.0625rem; color: var(--hint-text); }
.history-del {
    width: 2.25rem; height: 2.25rem; flex: none;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.history-del .ic { width: 1.25rem; height: 1.25rem; }

/* ШАПКА ГОТОВКИ — `CookingScreen` телефона (Н266-128): белый кружок 37 с рамкой `Divider` и тенью 6,
   тёмная стрелка 18, промежуток 10; название 15/18 жирное до двух строк, под ним через 3 «Шаг N из M»
   13/15 цветом подсказки. Полоса хода 6 таблеткой, зелёная (`Green`) на `Divider`, по 11 сверху и
   снизу (Н266-126). */
.cook-head { display: flex; align-items: center; gap: 0.625rem; margin: 0; }
.cook-back {
    width: 2.3125rem; height: 2.3125rem; flex: none; border-radius: 50%;
    background: var(--surface); box-shadow: inset 0 0 0 0.0625rem var(--divider), 0 0.1875rem 0.375rem rgba(0, 0, 0, .16);
    color: var(--text); display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.cook-back .ic { width: 1.125rem; height: 1.125rem; }
.cook-head .grow { min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.cook-head b {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 0.9375rem; line-height: 1.125rem; font-weight: 700; letter-spacing: 0; color: var(--text);
}
.cook-head .sub { font-size: 0.8125rem; line-height: 0.9375rem; color: var(--hint-text); }
.cook-progress { height: 0.375rem; background: var(--divider); border-radius: 999px; overflow: hidden; margin: 0.6875rem 0; }
.cook-progress span { display: block; height: 100%; width: 0; background: var(--green); border-radius: 999px; transition: width .2s; }

/* Номер шага 43 (цифра 22/24) через 4 под полосой, до текста 15; текст 25/33, буквы плотнее на 0,4,
   до кнопок озвучки 8. */
.cook-num {
    width: 2.6875rem; height: 2.6875rem; border-radius: 50%;
    background: var(--btn-green); box-shadow: var(--glow-green); color: #fff;
    font-size: 1.375rem; line-height: 1.5rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    margin: 0.25rem 0 0.9375rem;
}
/* ⚠️ Текст шага — КРУПНЫЙ и жирный: человек читает его от плиты, с полутора метров. */
.cook-text { font-size: 1.5625rem; line-height: 2.0625rem; font-weight: 800; letter-spacing: -0.025rem; margin: 0 0 0.5rem; }

/* Чипы озвучки: «Озвучить шаг» либо пара «Пауза» + «Прочитать снова» через 8. */
.speak-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
/* Значок 15 и отбивка 6 до подписи — у всех четырёх («Озвучить шаг», «Пауза», «Прочитать снова»,
   «Спросить ИИ»): в телефоне это `AppOutlineButton` (Н266-356). Было 18 и 7.
   ⚠️ Н266-129: высота 42, поля 16, рамка `GreenBorderSoft` и БЕЗ тени — как на экране готовки. */
.speak-chip {
    display: inline-flex; align-items: center; gap: 0.375rem;
    height: 2.625rem; box-sizing: border-box;
    background: var(--surface); border: 0.0625rem solid var(--green-border-soft);
    box-shadow: none;
    border-radius: var(--radius-button); padding: 0 1rem;
    color: var(--green-accent); font-family: inherit; font-size: 0.9375rem; font-weight: 700;
    cursor: pointer;
}
.speak-chip .ic { width: 0.9375rem; height: 0.9375rem; }

/* Карточка «Слушать команды» — тумблер, шесть слов и строка состояния. Отступы вокруг задают
   соседи (8 сверху у кнопок озвучки, 42 у таймера, 18 у «Спросить ИИ»), свой нижний у карточки — нет. */
.voice-card { margin: 0; }
.voice-card .voice-top { display: flex; align-items: flex-start; gap: 0.625rem; }
.voice-card .voice-top .ic { width: 1.25rem; height: 1.25rem; color: var(--green); margin-top: 0.1875rem; }
.voice-card b { display: block; font-size: 1.0625rem; line-height: 1.3125rem; font-weight: 800; letter-spacing: -.02em; }
.voice-card .words { font-size: 0.875rem; line-height: 1.125rem; color: var(--text-muted); }
.voice-state {
    margin-top: 0.75rem; padding: 0.75rem 0.875rem;
    background: var(--green-soft); border-radius: var(--radius-inner);
    color: var(--text-muted); font-size: 0.9375rem;
}

/* Плашка таймера. Пять состояний с макета «виды таймера»: стоит, идёт, пауза,
   последняя минута, время вышло.
   ⚠️ Мерки `TimerCard` телефона (Н266-130): высота 84, скругление 17 (`CardShape`), поля 17,
   промежуток 11; время 36/40; кружки 43; у цветной плашки тень своего цвета (`spotColor = fill`);
   «Готово» с колокольчиком 20 — сразу за цифрами, кружки — справа. Сверху 42 (`Spacer(42)`). */
.timer-bar {
    display: flex; align-items: center; gap: 0.6875rem;
    height: 5.25rem; box-sizing: border-box;
    border-radius: var(--radius-card);
    /* Обводка есть только у стоящего таймера, но место под неё держим ВСЕГДА — иначе плашка
       дёргается на пиксель, когда таймер запускают. */
    border: 0.0625rem solid transparent;
    padding: 0 1.0625rem;
    margin-top: 2.625rem;
    background: var(--timer-idle-fill);
    border-color: var(--timer-idle-border);
    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--timer-idle-fill) 60%, transparent);
}
.timer-bar .time {
    flex: none;
    font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; letter-spacing: -0.04375rem;
    font-variant-numeric: tabular-nums;
    color: var(--green-accent);
}
/* ⚠️ Промежутки «Готово» — как их даёт `spacedBy(11)` телефона вместе со своими `Spacer`: от цифр
   до колокольчика 11 + 5 + 11, от колокольчика до слова 11 + 6 + 11. Слово занимает остаток ряда. */
.timer-bar .ring {
    flex: 1; min-width: 0; margin-left: 1rem;
    display: inline-flex; align-items: center; gap: 1.75rem;
    font-size: 0.9375rem; line-height: 1.125rem; font-weight: 700;
}
.timer-bar .ring .ic { width: 1.25rem; height: 1.25rem; flex: none; }
.timer-btn {
    width: 2.6875rem; height: 2.6875rem; flex: none; border: 0; border-radius: 50%;
    /* ⚠️ Кружок «пуск» у СТОЯЩЕГО таймера — не просто белый: в тёмной теме два белых круга
       на тёмной плашке оставались единственным белым на всём экране и лезли в глаза сильнее
       самого времени (`TimerIdleAction`). */
    background: var(--timer-idle-action); color: var(--green-accent);
    box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, .18);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
/* Кружки стоят справа: пустое место между цифрами и кружками — у первого кружка (`Spacer(weight)`). */
.timer-btn[data-play] { margin-left: auto; }
.timer-btn.ghost {
    background: color-mix(in srgb, var(--timer-idle-action) 72%, transparent);
    box-shadow: inset 0 0 0 0.0625rem var(--green-border-soft);
}
.timer-btn .ic { width: 1.25rem; height: 1.25rem; }
.timer-btn.ghost .ic { width: 1.1875rem; height: 1.1875rem; }
.timer-bar.run .timer-btn, .timer-bar.last .timer-btn, .timer-bar.over .timer-btn { background: #fff; }
/* Идёт отсчёт — зелёная заливка, буквы и кружок белые.
   ⚠️ Значок на белом кружке — ПОСТОЯННЫЙ `--green-dark` (#2E7D32), а не `--green-accent`
   (Н266-125, 24.09.2026): кружок белый в обеих темах, а `--green-accent` в тёмной — светлый
   #8BD79A, и значок паузы на белом почти не читался (контраст 1,7). Светлая тема не изменилась:
   там `--green-accent` и есть #2E7D32. Зеркало — `TimerCard` телефона (`GreenDark`). */
.timer-bar.run { background: var(--green); border-color: transparent;
    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--green) 45%, transparent); }
.timer-bar.run .time, .timer-bar.run .ring { color: #fff; }
.timer-bar.run .timer-btn { color: var(--green-dark); }
.timer-bar.run .timer-btn.ghost { background: rgba(255, 255, 255, .24); color: #fff; box-shadow: none; }
/* Пауза — подложка карточки с переливом (`cardBackground`), время серым, тонкая рамка `Divider`;
   тени нет (у телефона цвет тени — цвет заливки, а он прозрачный). Кружок «пуск» — с рамкой
   `GreenBorderSoft`, «сброс» — белый с рамкой `Divider` (Н266-130). */
.timer-bar.pause { background: var(--card-bg); border-color: var(--divider); box-shadow: none; }
.timer-bar.pause .time { color: var(--text-muted); }
.timer-bar.pause .timer-btn { background: var(--timer-pause-play); color: var(--green-accent);
    box-shadow: inset 0 0 0 0.0625rem var(--green-border-soft), 0 0.1875rem 0.375rem rgba(0, 0, 0, .18); }
.timer-bar.pause .timer-btn.ghost { background: var(--surface); color: var(--text-muted);
    box-shadow: inset 0 0 0 0.0625rem var(--divider); }
/* Последняя минута — оранжевая, значок на кружке тёмно-рыжий (`LightStepTimeIcon`).
   ⚠️ Постоянный `--timer-last-icon` (#E4720F в обеих темах), а не `--step-time-icon` (Н266-125,
   24.09.2026): тёмный #E0A050 на белом кружке был бледным (контраст 2,2). */
.timer-bar.last { background: var(--orange); border-color: transparent;
    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--orange) 45%, transparent); }
.timer-bar.last .time, .timer-bar.last .ring { color: #fff; }
.timer-bar.last .timer-btn { color: var(--timer-last-icon); }
.timer-bar.last .timer-btn.ghost { background: rgba(255, 255, 255, .24); color: #fff; box-shadow: none; }
/* Время вышло — красная, со словом «Готово» и колокольчиком.
   ⚠️ Красный тут СВОЙ (`TimerDoneFill`), а не `--danger`: в тёмной теме `--danger` бледно-розовый
   (так требует контраст на тёмном фоне), и плашка вместо тревожной красной становилась
   розовой, а белые буквы на ней переставали читаться. Заливка одинаковая в обеих темах —
   значит и содержимое на ней честным белым. */
.timer-bar.over { background: var(--timer-done-fill); border-color: transparent;
    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--timer-done-fill) 45%, transparent); }
.timer-bar.over .time, .timer-bar.over .ring { color: #fff; }
.timer-bar.over .timer-btn { color: var(--timer-done-fill); }
.timer-bar.over .timer-btn.ghost { background: rgba(255, 255, 255, .24); color: #fff; box-shadow: none; }

/* «Спросить ИИ» — светлая таблетка под таймером: 46 с подписью 16, через 18, под ней 16 (Н266-129). */
.ask-pill { align-self: flex-start; height: 2.875rem; font-size: 1rem; margin: 1.125rem 0 1rem; }

/* Две кнопки внизу: «Назад» уже, «Далее» шире (макет 28b). Н266-132: промежуток 9, обе 53,
   подпись 17/20 жирная; «Назад» — белая с рамкой `Divider` и зелёной подписью, на первом шаге
   без заливки, подпись серая (`TextMuted`), без полупрозрачности. */
.cook-nav { display: flex; gap: 0.5625rem; margin-top: 1.625rem; }
.cook-nav .btn {
    flex: 1; height: 3.3125rem; min-height: 0; box-sizing: border-box; padding: 0 1rem;
    font-size: 1.0625rem; line-height: 1.25rem; font-weight: 700;
}
.cook-nav .btn.wide { flex: 1.4; }
.cook-nav .cook-prev { background: var(--surface); border: 0.0625rem solid var(--divider); color: var(--green-accent); }
.cook-nav .cook-prev:disabled { background: transparent; color: var(--text-muted); opacity: 1; }

/* Экран «Блюдо готово» (макет 28d) — вместо всего остального. */
/* Экран «Блюдо готово» — ВСЕ мерки из телефона (`CookingScreen`, находка Н259, 14.09.2026):
   круг 145 и галочка 75, заголовок 28/32, подпись 20/24, кнопка высотой 62 со шрифтом 20,
   отступы 20 / 9 / 21 / 15 / 6. На сайте были свои числа — «блюдо готово» выглядело мельче. */
.cook-final { text-align: center; padding: 1.25rem 0; }
.cook-final .round {
    width: 9.0625rem; height: 9.0625rem; margin: 0 auto 1.25rem; border-radius: 50%;
    background: var(--green-container); color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.cook-final .round .ic { width: 4.6875rem; height: 4.6875rem; }
.cook-final h2 {
    font-size: 1.75rem; line-height: 2rem; font-weight: 800;
    letter-spacing: -.03125rem; margin: 0 0 0.5625rem;
}
.cook-final .sub {
    color: var(--text-muted); font-size: 1.25rem; line-height: 1.5rem;
    font-weight: 600; margin: 0 0 1.3125rem;
}
.cook-final .btn-wide { height: 3.875rem; font-size: 1.25rem; line-height: 1.4375rem; font-weight: 700; }
/* «Оценить блюдо» и «Закрыть» — надписи-кнопки с полями 12/6 (`padding(12, 6)` телефона): от кнопки
   до слова 15 + 6 = 21, между словами 6 + 6 + 6 = 18 (Н266-133). «Закрыть» — серая (`TextMuted`). */
.cook-final .rate {
    display: block; width: fit-content; margin: 0.9375rem auto 0; padding: 0.375rem 0.75rem;
    border-radius: 999px;
    color: var(--green-accent); font-size: 1.0625rem; line-height: 1.25rem; font-weight: 600;
    text-decoration: none;
}
/* «Закрыть» стоит сразу под «Оценить блюдо», отступ 6 — как в телефоне. */
.cook-final .rate.close { margin-top: 0.375rem; color: var(--text-muted); }
.cook-final .rate:hover { text-decoration: underline; }
/* «Получилось примерно N порций» — 14/18 серым, через 14 (Н266-134). */
.cook-portions { margin: 0.875rem 0 0; font-size: 0.875rem; line-height: 1.125rem; color: var(--text-muted); }
/* Карточки под ссылками — `AppCard(14, 12)`: «Списали из домашних продуктов» через 16 и
   «Как разделить блюдо» через 14; заголовок 15/18 жирный. */
.cook-card { margin: 1rem 0 0; padding: 0.75rem 0.875rem; text-align: left; }
.cook-card.cook-split { margin-top: 0.875rem; }
.cook-card-title { display: block; font-size: 0.9375rem; line-height: 1.125rem; font-weight: 700; color: var(--text); }
/* Строки списанного 14/18 серым через черту с полями 6; «Поправить» 14/17 жирно зелёным, поля 10/5. */
.cook-spent-rows { margin-top: 0.375rem; }
.cook-spent-row { margin: 0; font-size: 0.875rem; line-height: 1.125rem; color: var(--text-muted); }
.cook-sep { height: 0.0625rem; margin: 0.375rem 0; border: 0; background: var(--divider); }
.cook-fix {
    display: inline-block; margin-top: 0.5rem; padding: 0.3125rem 0.625rem; border-radius: 999px;
    font-size: 0.875rem; line-height: 1.0625rem; font-weight: 700; color: var(--green-accent); text-decoration: none;
}
/* «Приготовить всего: ≈N г» 13/16 цветом подсказки через 2; строки 34 через черту: точка 8, через 9
   подпись 14,5/17, справа «N ккал» 14/17 жирно серым. */
.cook-split-total { display: block; margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1rem; color: var(--hint-text); }
.cook-split-rows { margin-top: 0.5rem; }
.cook-split-row { display: flex; align-items: center; height: 2.125rem; }
.cook-split-row + .cook-split-row { border-top: 0.0625rem solid var(--divider); }
.cook-split-row .dot { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--green); margin-right: 0.5625rem; }
.cook-split-row .grow { flex: 1; min-width: 0; font-size: 0.90625rem; line-height: 1.0625rem; color: var(--text); }
.cook-split-row b { font-size: 0.875rem; line-height: 1.0625rem; font-weight: 700; color: var(--text-muted); }
/* Окно «Оценить блюдо» (Н266-136): таблетки прямо под чертой — свой отступ `.rd-pills` карточки не нужен. */
.rd-pills.cook-rate-pills { margin: 0; }
/* Окно «ИИ-подсказка по шагу» (`AiStepDialog`, Н266-135): подсказка 12/16 серым; «ИИ думает…» с
   кружком 18; ответ — зелёная плашка `GreenContainer` с полями 12, текст 14/20. Без Plus — оранжевый
   замок 28 и текст 14/20. */
.cook-ask .ask-hint { margin: 0; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.cook-ask .ask-wait { display: flex; align-items: center; gap: 0.625rem; margin: 0.125rem 0 0; font-size: 0.75rem; line-height: 1rem; }
.cook-ask .ask-spin {
    width: 1.125rem; height: 1.125rem; flex: none; box-sizing: border-box; border-radius: 50%;
    border: 0.125rem solid var(--green); border-right-color: transparent; animation: spin 0.9s linear infinite;
}
.cook-ask .ask-answer {
    margin: 0.125rem 0 0; padding: 0.75rem; border-radius: var(--radius-inner);
    background: var(--green-container); color: var(--text);
    font-size: 0.875rem; line-height: 1.25rem; white-space: pre-wrap;
}
.cook-ask .ask-locked { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text); }
.cook-ask .ask-locked .ic { width: 1.75rem; height: 1.75rem; flex: none; color: var(--orange); }

/* ---------------------------------------------------------------------------
   ИИ-ПОМОЩНИК — `AIChatScreen` телефона (Н264, 16.09.2026).

   ⚠️ ЭКРАН ВО ВСЮ ВЫСОТУ ОКНА (Н264-119), как готовка и анкета: шапка сверху, лента занимает всё
   свободное место и листается САМА, строка остатка и белая панель ввода всегда у нижнего края.
   Раньше страница шла обычным потоком: при короткой переписке поле стояло посреди экрана, при
   длинной листалась вся страница и шапка уезжала.
   --------------------------------------------------------------------------- */
.chat-page { overflow: hidden; }
.chat-page .app { height: 100dvh; align-items: stretch; }
.chat-page .screen-col { display: flex; min-height: 0; }
.chat-page main.wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Лента: поля 16 (сбоку их даёт колонка), между пузырями 10. Сверху 8 — вместе с отступом
   шапки выходит те же 22, что у телефона (6 у шапки + 16 у ленты). */
.chat-feed {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.625rem;
    padding: 0.5rem 0 1rem;
}
.chat-locked { flex: 1; display: flex; align-items: center; padding: 1.25rem 0.25rem; }
.chat-locked .plus-lock { width: 100%; margin: 0; }

.chat-row { display: flex; }
.chat-row.mine { justify-content: flex-end; }
/* Пузыри: поля 12, текст 14/20; ответ — белый БЕЗ рамки, до 320, «хвост» 4 слева внизу. */
.chat-b {
    max-width: 20rem; padding: 0.75rem;
    border-radius: 1rem 1rem 1rem 0.25rem;
    background: var(--surface); color: var(--text);
    font-size: 0.875rem; line-height: 1.25rem;
    overflow-wrap: anywhere;
}
/* Свой — ровным `Green` (был тёмный `GreenDark`), до 300, «хвост» справа внизу.
   ⚠️ Белый текст — честным `#fff`: заливка одна в обеих темах. */
.chat-b.mine {
    max-width: 18.75rem;
    border-radius: 1rem 1rem 0.25rem 1rem;
    background: var(--green); color: #fff;
    display: flex; align-items: center; gap: 0.375rem;
}
.chat-b .ic { width: 1.125rem; height: 1.125rem; flex: none; }
/* «Сделано» и ошибка: значок 18 сверху слева, промежуток 8. */
.chat-b.done, .chat-b.error { display: flex; align-items: flex-start; gap: 0.5rem; }
.chat-b.done .ic { color: var(--green); }
.chat-b.error { background: var(--danger-container); color: var(--danger); }
.chat-b.typing { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); }
.chat-b .spin, .chat-send .spin {
    width: 1rem; height: 1rem; flex: none; display: inline-block;
    border: 0.125rem solid transparent; border-top-color: var(--green); border-right-color: var(--green);
    border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-b .spin, .chat-send .spin { animation: none; } }

/* Строка остатка — 13/16 серым по центру, 8 до панели. Кончились деньги — оранжевым. */
.chat-left { margin: 0 0 0.5rem; text-align: center; font-size: 0.8125rem; line-height: 1rem; color: var(--text-muted); }
.chat-left.cap { color: var(--orange); }

/* Панель ввода — белая, во всю ширину окна, с тенью (`shadowElevation = 8`). */
.chat-panel {
    margin: 0 -1rem;
    background: var(--surface);
    box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, .08);
}
.chat-inputs { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; }
/* Снимок и микрофон — кружки 44 ЦВЕТА ФОНА без рамки, значок серым; микрофон включён — зелёный. */
.chat-circle {
    width: 2.75rem; height: 2.75rem; flex: none; padding: 0; border: 0; border-radius: 50%;
    background: var(--bg); color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.chat-circle.on { background: var(--green); color: #fff; }
/* Поле — таблетка цвета фона без рамки, поля 16/12, текст 16, растёт до четырёх строк. */
/* ⚠️ Общее правило `textarea` даёт высоту от 96 — поле в одну строку выходило трёхэтажным
   (увидено живьём 16.09.2026); два класса сильнее общего правила. */
textarea.chat-field {
    flex: 1; min-width: 0; resize: none; overflow-y: auto;
    padding: 0.75rem 1rem; border: 0; border-radius: var(--radius-button);
    background: var(--bg); color: var(--text);
    font: inherit; font-size: 1rem; line-height: 1.375rem;
    min-height: 0; height: 2.875rem; max-height: 7rem;
}
textarea.chat-field::placeholder { color: var(--text-muted); opacity: 1; }
textarea.chat-field:focus { outline: none; }
/* Отправка — кружок 48 ровным зелёным без свечения; нечего отправить — бледная (40 %) и не
   нажимается. Пока ИИ отвечает — белая крутилка 20 вместо значка. */
.chat-send {
    width: 3rem; height: 3rem; flex: none; padding: 0; border: 0; border-radius: 50%;
    background: var(--green); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.chat-send:disabled { background: rgba(67, 160, 71, .4); cursor: default; }
.chat-send .spin { display: none; width: 1.25rem; height: 1.25rem; border-top-color: #fff; border-right-color: #fff; }
.sending .chat-send .ic { display: none; }
.sending .chat-send .spin { display: inline-block; }
/* Снимок — строкой НАД полем: миниатюра 48, «Прикрепить снимок» серым, крестик 22. */
.chat-photo-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1rem 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
.chat-photo-row img { width: 3rem; height: 3rem; flex: none; border-radius: var(--radius-inner); object-fit: cover; }
.chat-photo-x { width: 1.375rem; height: 1.375rem; flex: none; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; display: inline-flex; }
.chat-photo-x .ic { width: 1.375rem; height: 1.375rem; }
/* Слушаю / не разобрал — 12/16 зелёным, поля 16, сверху 8. */
.chat-voice { margin: 0; padding: 0.5rem 1rem 0; font-size: 0.75rem; line-height: 1rem; color: var(--green); }

/* Снимок еды в окне «Съел другое» — та же строка миниатюры. */
.chat-photo { display: flex; align-items: center; gap: 0.625rem; margin: 0.625rem 0 0; font-size: 0.875rem; color: var(--text-muted); }
.chat-photo img { width: 3rem; height: 3rem; border-radius: 0.75rem; object-fit: cover; }

/* ---------------------------------------------------------------------------
   ЗАМОК «ЭТО В PLUS» — `PlusLockCard` телефона (Н264): карточка с полями 24, всё по центру;
   оранжевый кружок 56 со значком 30, 14, заголовок 16/24 очень жирный, 8, текст 14/20 серым,
   20, оранжевая кнопка 52 во всю ширину с подписью 17 жирной.
   --------------------------------------------------------------------------- */
.plus-lock { padding: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.plus-lock-ic {
    width: 3.5rem; height: 3.5rem; flex: none; border-radius: 50%;
    background: var(--orange-container); color: var(--orange);
    display: flex; align-items: center; justify-content: center;
}
.plus-lock-ic .ic { width: 1.875rem; height: 1.875rem; }
.plus-lock-title { display: block; margin-top: 0.875rem; font-size: 1rem; line-height: 1.5rem; font-weight: 800; color: var(--text); }
.plus-lock-text { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
.plus-lock-btn {
    margin-top: 1.25rem; width: 100%; height: 3.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-button);
    background: var(--btn-orange); box-shadow: var(--glow-orange);
    color: #fff; font-size: 1.0625rem; line-height: 1.25rem; font-weight: 700; text-decoration: none;
}
.plus-lock-btn:hover { filter: brightness(1.05); }

/* ---------------------------------------------------------------------------
   ТЕЛЕФОН И ПЛАНШЕТ: меню слева убирается, внизу появляются пять вкладок
   --------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .sidebar { display: none; }
    .app { max-width: 544px; }
    .screen-col { max-width: none; }

    .tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 20;
        background: var(--surface);
        border-top: 0.1875rem solid var(--nav-line);
        box-shadow: 0 -0.1875rem 0.75rem rgba(0, 0, 0, .06);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .tabbar a {
        flex: 1;
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: 0.1875rem;
        padding: 0.5rem 0.125rem 0.4375rem;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 0.6875rem;
        font-weight: 600;
    }
    /* ⚠️ ТОНКАЯ ЧЁРТОЧКА МЕЖДУ ПУНКТАМИ — та же тёплая линия, что идёт над меню (просьба
       заказчика 02.09.2026, в приложении это `VerticalDivider` высотой 30 dp). Перед ПЕРВЫМ
       пунктом её нет, поэтому правило на `a + a`. Без чёрточек пять вкладок сливались
       в одну полосу. */
    .tabbar a + a::before {
        content: "";
        position: absolute; left: 0; top: 50%;
        transform: translateY(-50%);
        width: 0.0625rem; height: 1.875rem;
        background: var(--nav-line);
    }
    .tabbar a .ic { width: 1.5rem; height: 1.5rem; }
    /* ⚠️ Выбранная вкладка — ЗЕЛЁНАЯ таблетка (в приложении зелёная). Оранжевый на сайте
       значил бы «подписка», а это просто выбранный раздел. */
    .tabbar a.active { color: var(--green-accent); font-weight: 700; }
    .tabbar a.active .tab-icon { background: var(--green-container); border-radius: 999px; }
    .tab-icon { padding: 0.1875rem 0.9375rem; display: flex; }

    /* ⚠️ МЕСТО ПОД НИЖНИМ МЕНЮ И ПЛАВАЮЩЕЙ КНОПКОЙ. Обе они «висят» поверх страницы и сами
       места не занимают, поэтому конец списка уезжал под них — до последнего продукта в корзине
       и до последней настройки в Профиле было не долистать.

       Раньше запас держал подвал (`margin-bottom`), но подвал убран с экранов приложения —
       и запас пропал вместе с ним. Теперь отступ у самого содержимого, как в приложении:
       там к нижнему отступу списка добавляют высоту плавающей кнопки (`FAB_CONTENT_INSET`).
       Считаем так же: полоса меню (~67) + кнопка с отступом (~108). */
    .has-tabbar main.wrap { padding-bottom: 11rem; }
    .footer { margin-bottom: 4.625rem; }
    .fab { right: 1rem; bottom: 5.25rem; }

    /* ⚠️ РАЗМЕРЫ НА ТЕЛЕФОНЕ НЕ УЖИМАЕМ (просьба заказчика 03.09.2026: «размер как
       в приложении, всё-таки с одного телефона»). Здесь раньше лежала целая пачка правил,
       которые на узком экране делали заголовок мельче (25 вместо 28), фото блюда ниже
       (213 вместо 244), фото в списке рецептов вдвое меньше (118 вместо 160), а подписи
       долей — 13 вместо 16. Приложение на ТОМ ЖЕ телефоне ничего этого не делает: размеры
       у него постоянные, и длинные строки просто переносятся. Теперь так же. */
    .wrap { padding: 0 1rem; }
    .form { max-width: none; }
}

/* ⚠️ ПОДГОНОК ПОД УЗКИЙ ЭКРАН БОЛЬШЕ НЕТ — И ДОБАВЛЯТЬ ИХ НЕЛЬЗЯ.
   Здесь стояли два правила: фото блюда ужималось со 158 до 128, а кружок «на скольких
   готовим» — с 66 до 58. Пока сайт не масштабировался, это был единственный способ уместить
   содержимое; теперь он тянется целиком, и такая подгонка ужимает ВТОРОЙ раз — блок
   становится меньше, чем в приложении.
   Если что-то не помещается — это видно и в приложении на том же телефоне, и лечить надо
   так же, как там: переносом строки, а не своим размером. */

/* ===========================================================================
   АНКЕТА — МАСТЕР ПО ШАГАМ (03.09.2026)

   Раньше анкета сайта была одной длинной формой на восемь произвольных шагов плюс три блока
   под ней. Теперь она собрана ТЕМИ ЖЕ шагами и в том же порядке, что анкета приложения
   (`domain/OnboardingSteps.kt`): знакомство → для кого → человек 1..N → тип питания → аллергии
   вместе с «не люблю» → кухни → как готовите → техника → приёмы → пожелания → норма и бюджет →
   когда собрать план → сводка.

   Размеры — из приложения, делённые на 16 (эталон Pixel 8 = 412). Подгонок под узкий экран
   здесь нет и быть не должно: не помещается на сайте — значит не помещается и в телефоне.

   ⚠️ Выбор рисуем ЧЕСТНЫМ полем ввода (input), спрятанным внутри подписи, а вид берёт соседний
   span через `input:checked + span`. Без скриптов анкета тоже работает: браузер сам отмечает
   и сам отправляет.
   =========================================================================== */

/* --- Шапка: стрелка «назад», «Шаг N из M», «Отмена» --- */
.wiz-top {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1.5rem 0.1875rem 0;   /* 24 сверху, 19 по бокам (16 даёт .wrap + 3) */
}
.wiz-top .wiz-arrow {
    width: 1.375rem; height: 1.375rem; flex: none;
    border: 0; padding: 0; background: none; cursor: pointer;
    color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
}
.wiz-top .wiz-arrow .ic { width: 100%; height: 100%; }
.wiz-count { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.015em; color: var(--text); }
.wiz-cancel {
    margin-left: auto;
    font-size: 1rem; font-weight: 700;
    color: var(--green-accent);
    background: var(--green-container);
    border-radius: var(--radius-button);
    padding: 0.5rem 0.75rem;
    text-decoration: none;
}

/* --- Полоса пройденного: толстая, с переливом (тонкая на тёплом фоне терялась) --- */
.wiz-bar {
    height: 0.625rem;
    margin: 0.9375rem 0.1875rem 0;
    border-radius: var(--radius-button);
    background: var(--progress-track);
    overflow: hidden;
}
.wiz-bar > span {
    display: block; height: 100%; width: 0;
    border-radius: var(--radius-button);
    background: linear-gradient(90deg, #4CAF50, #2E7D32);
    transition: width .25s;
}

/* --- Шапка шага: кольцо со значком, заголовок, подпись --- */
/* ⚠️ Отбивка СНИЗУ обязательна: без неё подпись шага ложилась прямо на белую карточку,
   и заголовок с содержимым читались одним пятном (в приложении здесь 15). */
.step-hero { text-align: center; margin: 0.9375rem 0.25rem 0.9375rem; }
.hero-ring {
    width: 6.6875rem; height: 6.6875rem;   /* 107 */
    margin: 0 auto;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    /* Кольцо от зелени к золоту — те же пять точек, что в приложении (StepRingColors). */
    background: linear-gradient(135deg, #2E7D32, #4C9A3E, #B98A21, #C0761C, #2E7D32);
    box-shadow: 0 0.375rem 0.75rem rgba(67, 160, 71, .34);
}
/* Кольцо с рисунком крупнее: рисунок должен быть виден, а значок и мелким читается. */
.hero-ring.with-image { width: 9.5rem; height: 9.5rem; }
.hero-plate {
    width: 5.25rem; height: 5.25rem;       /* 84 */
    border-radius: 50%;
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--green-accent);
}
.hero-plate .ic { width: 2.75rem; height: 2.75rem; }
.hero-ring img { width: 8.5625rem; height: 8.5625rem; border-radius: 50%; object-fit: cover; }
.hero-title {
    margin: 0.9375rem 0 0;
    font-size: 1.625rem; line-height: 1.9375rem;
    font-weight: 700; letter-spacing: -.02em;
}
.hero-sub {
    margin: 0.4375rem 0 0;
    font-size: 0.9375rem; line-height: 1.3125rem;
    color: var(--text-muted);
}
/* Значок «?» у заголовка шага крупнее, чем у вопросов внутри: сам заголовок крупный (19, кегль 0,62). */
/* Отбивка «?» от крупного заголовка шире общей: рядом с 26-м кеглем 4 читались как «прилип»
   (`Spacer(8)` у телефона). */
.hero-title .fieldhelp { width: 1.1875rem; height: 1.1875rem; font-size: 0.73625rem; line-height: 0.83125rem; margin-left: 0.5rem; }

/* ===========================================================================
   АНКЕТА НА ВЫСОТУ ЭКРАНА: шапка и полоса пройденного прибиты сверху, кнопки — снизу,
   листаются ТОЛЬКО вопросы. Так же устроен экран в приложении.

   ⚠️ Раньше листалась вся страница целиком, и на длинном шаге («Человек 1», «Приёмы пищи»)
   кнопка «Далее» уезжала за нижний край: чтобы нажать её, приходилось докручивать, а номер
   шага и полоса пройденного пропадали из виду.
   =========================================================================== */
.wiz-page { overflow: hidden; }
.wiz-page .app { height: 100dvh; align-items: stretch; }
.wiz-page .screen-col { display: flex; min-height: 0; }
.wiz-page main.wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#wiz { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* --- Тело шага --- */
/* ⚠️ Отбивки сверху здесь БОЛЬШЕ НЕТ: она переехала внутрь, к шапке шага. У прокручиваемой
   области отступ остался бы снаружи и не уезжал бы вместе с содержимым, а в приложении эти
   15 точек — часть прокрутки. */
.wiz-body {
    margin: 0 0.25rem;
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column;
}
/* Короткий шаг («Когда собрать план») растягивается на всю высоту, а его карточки встают по
   центру свободного места: иначе шаг кончался на середине экрана, и низ оставался пустым. */
.wiz-step[data-fill] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wiz-step[data-fill] > .step-cards { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* Белая панель шага. У шагов, чьё содержимое само состоит из карточек, её нет: панель вокруг
   карточек читается как окно вокруг окон. */
.step-card {
    background: var(--card-bg);
    border: 0.0625rem solid var(--outline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 0.875rem;
}
.step-cards > * + * { margin-top: 0.5625rem; }   /* шаги со своими карточками: зазор 9 */

/* Тонкая черта внутри белой карточки шага (вступление). */
.step-rule { height: 0.0625rem; background: var(--outline); margin: 0.875rem 0; }
.intro-line { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; line-height: 1.25rem; }
.intro-line .ic { width: 1.125rem; height: 1.125rem; flex: none; color: var(--green); margin-top: 0.0625rem; }
.intro-note { margin: 0.875rem 0 0; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }

/* --- Один вопрос в своей светлой панельке (макет 7b) --- */
.qpanel {
    background: var(--panel-surface);
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-inner);
    padding: 0.5625rem 0.625rem;
}
.qpanel + .qpanel, .qpanel + .qnote, .qnote + .qpanel, .wname + .qpanel, .wfields + .qpanel,
.qpanel + .wfields { margin-top: 0.5625rem; }
.qtitle {
    /* ⚠️ Отбивку «?» здесь задаёт gap строки; общий отступ значка гасим — иначе выходило 10. */
    display: flex; align-items: center; gap: 0.375rem;
    font-size: 1.0625rem; line-height: 1.3125rem;
    font-weight: 700; letter-spacing: -.01em;
    margin: 0 0 0.4375rem;
}
.qtitle .fieldhelp { margin-left: 0; }
/* «Сколько человек?» набрано крупнее прочих названий вопросов — так же в приложении. */
.qtitle.big { font-size: 1.1875rem; line-height: 1.4375rem; font-weight: 800; }
/* Название КАРТОЧКИ (`StepCard(titleRes)` телефона: «Аллергии», «Нелюбимые продукты», «С какого
   дня», «На сколько дней») — до содержимого 10, а не 7, как у вопроса в панельке (`QuestionPanel`
   spacedBy 7). Только прямые дети карточки: внутри `.qpanel` остаётся 7 (Н266-207). */
.step-card > .qtitle { margin-bottom: 0.625rem; }
/* Шаг «Для кого»: карточки без названия — `StepCard()` с полями 12, после «Сколько человек?» 9. */
.wiz-step[data-key="size"] .step-card { padding: 0.75rem; }
.step-card > .qtitle.big { margin-bottom: 0.5625rem; }
/* Тонкая черта внутри панельки: отделяет чипы от поля и срока (макет 15a). */
.qrule { height: 0.0625rem; background: var(--panel-border); margin: 0.1875rem 0; }
/* Плашка-пояснение: что даст цель, что уберёт тип питания. */
.qnote {
    background: var(--note-surface);
    border-radius: var(--radius-inner);
    padding: 0.6875rem;
    font-size: 0.8125rem; line-height: 1.125rem;
    color: var(--note-text);
    display: flex; gap: 0.5rem;
}
.qnote .ic { width: 1.0625rem; height: 1.0625rem; flex: none; }
.qnote p { margin: 0; }
.qnote p + p { margin-top: 0.4375rem; }
/* Плашка «что даст цель» — `GoalEffect`: между строками 6, а не 7 (Н266-208). */
.goal-effect p + p { margin-top: 0.375rem; }
.qnote b { font-weight: 700; }
.qhint { margin: 0.5625rem 0 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--hint-text); }
/* Плашка типа питания — `DietStep` (Н266-224): имя 13/17 жирным и СРАЗУ под ним текст 13/18,
   между диетами 7; «состав неизвестен» один раз в конце, серым (HintText). Своими правилами:
   общее `.qnote p + p` держит плашку «что даст цель». */
#diet-note-body .diet-line b { display: block; font-weight: 700; line-height: 1.0625rem; }
#diet-note-body .diet-line span { display: block; line-height: 1.125rem; }
#diet-note-body .diet-line + .diet-line { margin-top: 0.4375rem; }
#diet-note .diet-unknown { margin: 0.4375rem 0 0; color: var(--hint-text); }
/* «Можно выбрать несколько» — строка со значком-списком над сеткой. */
.qmulti { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.8125rem; font-weight: 600; color: var(--note-text); margin: 0 0 0.625rem; }
.qmulti .ic { width: 0.9375rem; height: 0.9375rem; flex: none; color: var(--green-accent); }

/* --- «Таблетка» анкеты (WizardChip): 37 высотой, выбранная — зелёная с галочкой --- */
.chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.wchip { display: inline-block; cursor: pointer; }
.wchip input { position: absolute; opacity: 0; width: 0; height: 0; }
.wchip > span {
    display: inline-flex; align-items: center; gap: 0.375rem;
    height: 2.3125rem; padding: 0 0.9375rem;
    border-radius: var(--radius-button);
    border: 0.0625rem solid var(--chip-border);
    background: linear-gradient(180deg, var(--chip-top), var(--chip-bottom));
    color: var(--chip-text);
    font-size: 0.9375rem; line-height: 1.0625rem; font-weight: 700;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .10);
}
.wchip > span .ic { width: 0.6875rem; height: 0.6875rem; display: none; }
.wchip input:checked + span {
    /* ⚠️ Белые буквы на зелёном в ОБЕИХ темах: заливка одинаковая, значит и содержимое честно белое. */
    background: var(--btn-pill);
    border-color: transparent;
    color: #fff;
    font-weight: 800;
    padding: 0 0.8125rem;
    box-shadow: 0 0.25rem 0.5rem rgba(46, 125, 50, .34), 0 0 0 0.10625rem rgba(67, 160, 71, .16);
}
.wchip input:checked + span .ic { display: inline-block; color: #fff; }
.wchip input:focus-visible + span { outline: 0.125rem solid var(--green); outline-offset: 0.125rem; }
/* Закрытая подпиской таблетка: замок вместо галочки, подпись бледнее. */
.wchip.locked > span { color: var(--text-muted); }
.wchip.locked > span .ic { display: inline-block; color: var(--text-muted); }
/* Запертая таблетка — КНОПКА (Н266-209): нажатие открывает окно, как в телефоне. Сброс рамки и
   фона браузера, иначе у `button` вокруг таблетки проступает серый прямоугольник. */
button.wchip { padding: 0; border: 0; background: none; font: inherit; color: inherit; }
button.wchip:focus-visible > span { outline: 0.125rem solid var(--green); outline-offset: 0.125rem; }
/* Текст окна `AppDialog` телефона — 16/23 (у окна-вопроса 15/20). */
.confirm-body.body-16 { font-size: 1rem; line-height: 1.4375rem; }

/* Карточка «Подписка Plus» в конце анкеты — `PlusOfferCard` телефона (Н266-210): поля 16, значок
   20 оранжевый БЕЗ кружка, заголовок 15/19, текст 14/20, кнопка — плоская оранжевая полоса со
   скруглением 12 и подписью 13/16 полужирной (поля 11), под ней по центру 12/16 «Можно позже». */
.plus-offer {
    background: var(--orange-container);
    border-radius: var(--radius-card);
    box-shadow: inset 0 0 0 0.0625rem var(--divider), var(--shadow-card);
    padding: 1rem; margin-bottom: 0.75rem;
}
.plus-offer-head { display: flex; align-items: center; gap: 0.5rem; }
.plus-offer-head .ic { width: 1.25rem; height: 1.25rem; flex: none; color: var(--orange); }
.plus-offer-head b {
    font-size: 0.9375rem; line-height: 1.1875rem; padding-block: calc((1.364em - 1.1875rem) / 2);
    font-weight: 700; color: var(--text);
}
.plus-offer > p { margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
.plus-offer-btn {
    display: block; width: 100%; margin-top: 0.75rem;
    border: 0; border-radius: var(--radius-inner);
    background: var(--orange); color: #fff;
    font: inherit; font-size: 0.8125rem; line-height: 1rem; font-weight: 600;
    padding: calc(0.6875rem + (1.364em - 1rem) / 2) 0;
    text-align: center; cursor: pointer;
}
.plus-offer > .plus-offer-later {
    margin-top: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; text-align: center;
}

/* --- Поля анкеты — `OutlinedTextField` телефона (`NumberField`, Н266-206, 21.09.2026) ---
   Подпись НА РАМКЕ, а не отдельной строкой над полем: у пустого поля она внутри 16/24, у
   заполненного или в фокусе — 12/16 в разрыве верхней рамки. Поле 56, скругление 10, число
   17 полужирным, рамка 1 цвета FieldBorder, в фокусе 2 зелёная; над полем 8 — это
   `OutlinedTextFieldTopPadding`, в нём лежит верхняя половина подписи.
   ⚠️ Рамка — тенью `inset`: у `border` разрыв под подпись не сделать. Подпись закрывает черту
   НИЖНЕЙ половиной своего фона, верхняя прозрачная — сквозь неё видна карточка или панелька.
   ⚠️ Правилу `.wfield` нельзя давать `display`: иначе атрибут `hidden` у поля целевого веса и
   своей нормы перестанет его прятать. */
.wfields { display: flex; gap: 0.5625rem; }
.wfields > .wfield { flex: 1; min-width: 0; }
.wfield { position: relative; padding-top: 0.5rem; }
.wfield input {
    width: 100%; height: 3.5rem;
    padding: 0 1rem;
    border: 0; border-radius: 0.625rem;
    box-shadow: inset 0 0 0 0.0625rem var(--field-border);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1.0625rem; line-height: 1.5rem;
    font-weight: 600;
}
.wfield input:focus { outline: none; box-shadow: inset 0 0 0 0.125rem var(--green); }
.wfield label {
    position: absolute; left: 0.75rem; top: 0;
    max-width: calc(100% - 1.5rem); padding: 0 0.25rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 0.75rem; line-height: 1rem; color: var(--hint-text);
    background: linear-gradient(to bottom, transparent 50%, var(--surface) 50%);
    pointer-events: none;
    transition: top .15s, font-size .15s, line-height .15s;
}
.wfield input:focus + label { color: var(--green-accent); }
.wfield input:placeholder-shown:not(:focus) + label {
    top: 1.5rem; font-size: 1rem; line-height: 1.5rem; background: none;
}
/* Поле «Имя» — с зелёным значком слева и заметной рамкой (макет 7b). */
.wname { position: relative; }
.wname .ic { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: var(--green); }
.wname input[type="text"] {
    width: 100%;
    padding: 0.875rem 0.75rem 0.875rem 2.375rem;
    border-radius: 0.6875rem;
    border: 0.0625rem solid var(--field-border-strong);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1.0625rem;
}
.wname input[type="text"]:focus { border-color: var(--green); outline: none; }

/* --- Поле «добавить своё» с квадратной зелёной кнопкой (макет 8a) --- */
.addfield { display: flex; align-items: center; gap: 0.5rem; }
.addfield input[type="text"] {
    flex: 1; min-width: 0;
    padding: 0.875rem 0.75rem;
    border-radius: 0.6875rem;
    border: 0.0625rem solid var(--field-border-strong);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1.0625rem;
}
.addfield input[type="text"]:focus { border-color: var(--green); outline: none; }
.addfield input[type="text"]::placeholder { text-overflow: ellipsis; }
.addfield button {
    width: 3.5rem; height: 3.5rem; flex: none;
    border: 0; border-radius: 0.6875rem;
    background: var(--btn-pill);
    box-shadow: 0 0.25rem 0.5rem rgba(46, 125, 50, .34);
    color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.addfield button .ic { width: 1.25rem; height: 1.25rem; }
/* Пустое поле — «+» гаснет (прозрачность .45, без тени) и не нажимается, как у телефона (Н266-211). */
.addfield button:disabled { opacity: .45; box-shadow: none; cursor: default; }
/* Подсказки продуктов под полем — `AddField` телефона: белая панель в потоке (не всплывающая),
   рамка 1 GreenContainer, скругление 12; строка — поля 14/11, зелёный плюс 16, 10, имя 14/20. */
.suggest {
    margin-top: 0.375rem;
    background: var(--surface);
    border: 0.0625rem solid var(--green-container);
    border-radius: var(--radius-inner);
    overflow: hidden;
}
.suggest-row {
    display: flex; align-items: center; gap: 0.625rem;
    width: 100%; padding: 0.6875rem 0.875rem;
    border: 0; background: none;
    font: inherit; font-size: 0.875rem; line-height: 1.25rem; color: var(--text);
    text-align: left; cursor: pointer;
}
.suggest-row:hover { background: var(--green-container); }
.suggest-row .ic { width: 1rem; height: 1rem; flex: none; color: var(--green); }

/* --- Снимаемые чипы: то, что человек вписал словом --- */
.rchips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; }
.rchip {
    display: inline-flex; align-items: center;
    background: var(--green-container);
    border: 0; border-radius: var(--radius-inner);
    padding: 0.25rem 0.375rem 0.25rem 0.75rem;
    color: var(--green-accent);
    font-family: inherit; font-size: 0.875rem; font-weight: 600;
    cursor: pointer;
    max-width: 100%; overflow-wrap: anywhere;   /* слово до 60 знаков не вылезает за карточку */
}
.rchip .ic { width: 1rem; height: 1rem; margin-left: 0.25rem; flex: none; }

/* --- Шаг «Для кого»: две широкие карточки внутри панели --- */
.whofor {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.6875rem;
    border-radius: 1rem;
    background: var(--panel-surface);
    border: 0.0625rem solid var(--panel-border);
    cursor: pointer;
}
.whofor + .whofor { margin-top: 0.5625rem; }
.whofor input { position: absolute; opacity: 0; width: 0; height: 0; }
.whofor .round {
    width: 2.5rem; height: 2.5rem; flex: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
}
.whofor .round .ic { width: 1.375rem; height: 1.375rem; }
.whofor .grow b { display: block; font-size: 1.1875rem; line-height: 1.5rem; font-weight: 800; }
.whofor .sub { display: block; margin-top: 0.1875rem; font-size: 1.0625rem; line-height: 1.375rem; color: var(--text-muted); }
.whofor .tick {
    width: 1.375rem; height: 1.375rem; flex: none;
    border-radius: 50%;
    border: 0.125rem solid var(--chip-border);
    display: flex; align-items: center; justify-content: center;
    color: transparent;
}
.whofor .tick .ic { width: 0.875rem; height: 0.875rem; }
.whofor.on {
    background: var(--green-container);
    border: 0.125rem solid var(--green);
    padding: 0.625rem;   /* рамка толще на 1 — отступ на 1 меньше, размер не прыгает */
}
.whofor.on .round { background: var(--surface); color: var(--green-accent); }
.whofor.on .grow b { color: var(--green-accent); }
.whofor.on .tick { background: var(--green); border-color: var(--green); color: #fff; }
/* Сколько человек: пять квадратных кнопок 2..6 в ряд. */
.sizerow { display: flex; gap: 0.5625rem; }
.sizerow .wchip { flex: 1; }
.sizerow .wchip > span {
    width: 100%; height: 3rem;
    justify-content: center;
    border-radius: 0.6875rem;
    font-size: 1.375rem; font-weight: 700;
    background: var(--surface);
    padding: 0;
}
.sizerow .wchip input:checked + span {
    background: linear-gradient(180deg, #4CAF50, #3E9142);
    padding: 0;
}
.sizerow .wchip > span .ic { display: none !important; }

/* --- Тип питания: широкая строка «Любой» и сетка плиток 3 в ряд --- */
.anydiet {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5625rem 0.625rem;
    border-radius: var(--radius-inner);
    border: 0.0625rem solid var(--chip-border);
    background: linear-gradient(180deg, var(--chip-top), var(--chip-bottom));
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .10);
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    text-align: left;
}
.anydiet .round {
    width: 2rem; height: 2rem; flex: none;
    border-radius: 50%;
    background: var(--green-container);
    color: var(--green-accent);
    display: flex; align-items: center; justify-content: center;
}
.anydiet .round .ic { width: 1.1875rem; height: 1.1875rem; }
.anydiet .grow b { display: block; font-size: 1.0625rem; line-height: 1.1875rem; font-weight: 700; color: var(--text); }
.anydiet .sub { display: block; font-size: 0.8125rem; line-height: 1rem; color: var(--text-muted); }
.anydiet .tick {
    width: 1.1875rem; height: 1.1875rem; flex: none;
    border-radius: 50%;
    border: 0.125rem solid var(--chip-border);
    display: flex; align-items: center; justify-content: center;
    color: transparent;
}
.anydiet .tick .ic { width: 0.75rem; height: 0.75rem; }
.anydiet.on {
    background: var(--btn-pill); border-color: transparent;
    box-shadow: 0 0.25rem 0.5rem rgba(46, 125, 50, .34);
}
.anydiet.on .grow b { color: #fff; }
.anydiet.on .sub { color: rgba(255, 255, 255, .9); }
.anydiet.on .round { background: rgba(255, 255, 255, .22); color: #fff; }
.anydiet.on .tick { background: #fff; border-color: #fff; color: var(--green-dark); }

.tilegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.dtile { position: relative; cursor: pointer; }
.dtile input { position: absolute; opacity: 0; width: 0; height: 0; }
.dtile > span {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 5rem; padding: 0 0.25rem;
    border-radius: var(--radius-inner);
    border: 0.0625rem solid var(--chip-border);
    background: linear-gradient(180deg, var(--chip-top), var(--chip-bottom));
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .10);
    text-align: center;
}
.dtile .round {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: var(--green-container);
    color: var(--green-accent);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.dtile .round .ic { width: 1.125rem; height: 1.125rem; }
/* Перечёркнутый значок — как в приложении: наклонная черта поверх продукта. */
.dtile .round.crossed::after {
    content: ""; position: absolute;
    left: 0.5rem; right: 0.5rem; top: 50%;
    border-top: 0.09375rem solid currentColor;
    transform: rotate(-45deg);
}
.dtile .cap { margin-top: 0.4375rem; font-size: 0.6875rem; line-height: 0.9375rem; font-weight: 700; color: var(--chip-text); }
.dtile input:checked + span { background: var(--btn-pill); border-color: transparent; box-shadow: 0 0.25rem 0.5rem rgba(46, 125, 50, .34); }
.dtile input:checked + span .round { background: rgba(255, 255, 255, .22); color: #fff; }
.dtile input:checked + span .cap { color: #fff; font-weight: 800; }
.dtile .tick {
    display: none;
    position: absolute; top: 0.375rem; right: 0.375rem;
    width: 1rem; height: 1rem; border-radius: 50%;
    background: #fff; color: var(--green-dark);
    align-items: center; justify-content: center;
}
.dtile .tick .ic { width: 0.6875rem; height: 0.6875rem; }
.dtile input:checked + span .tick { display: flex; }

/* --- Любимые кухни: плитки с фотографиями по две в ряд (макет 9a) --- */
.cuisgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5625rem; }
.ctile { position: relative; cursor: pointer; }
.ctile input { position: absolute; opacity: 0; width: 0; height: 0; }
.ctile > span {
    position: relative;
    display: block;
    border-radius: var(--radius-inner);
    border: 0.0625rem solid var(--field-border);
    background: var(--surface);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .10);
    overflow: hidden;
}
.ctile img { display: block; width: 100%; height: 5.4375rem; object-fit: cover; }
.ctile .cap {
    display: flex; align-items: center; justify-content: center;
    height: 2.1875rem;
    font-size: 0.9375rem; line-height: 1.0625rem; font-weight: 700;
    color: var(--chip-text);
}
.ctile input:checked + span { border: 0.09375rem solid var(--green); box-shadow: 0 0.3125rem 0.625rem rgba(46, 125, 50, .3); }
.ctile input:checked + span .cap { background: var(--green-container); color: var(--green-accent); font-weight: 800; }
.ctile .tick {
    display: none;
    position: absolute; top: 0.4375rem; right: 0.4375rem;
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--green); color: #fff;
    align-items: center; justify-content: center;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .28);
}
.ctile .tick .ic { width: 0.75rem; height: 0.75rem; }
.ctile input:checked + span .tick { display: flex; }

/* --- Приёмы пищи: блоки-подложки, в каждом строки с кружком-галочкой --- */
.mealbox {
    background: var(--surface);
    border: 0.0625rem solid var(--outline);
    border-radius: var(--radius-card);
    padding: 0.625rem;
}
.mealgroup {
    background: var(--panel-surface);
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-inner);
    padding: 0 0.625rem;
}
.mealgroup + .mealgroup { margin-top: 0.4375rem; }
.mealrow { padding: 0.375rem 0; }
.mealgroup .mealrow + .mealrow { border-top: 0.0625rem solid var(--panel-border); }
/* ⚠️ Между названием, временем и размером порции отступа НЕТ — как в строке `MealsPicker` телефона
   (название `weight(1f)`, сразу `TextButton` времени и `MealSizeToggle`). С отступами 10 и 6
   «Завтрак» переносился посреди слова, когда строка встала в белую панель шага (Н266-212). */
.mealline { display: flex; align-items: center; gap: 0; }
.mealhead { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; flex: 1; min-width: 0; }
.mealhead input { position: absolute; opacity: 0; width: 0; height: 0; }
.mealhead .tick {
    width: 1.375rem; height: 1.375rem; flex: none;
    border-radius: 50%;
    border: 0.125rem solid var(--outline-strong);
    display: flex; align-items: center; justify-content: center;
    color: transparent;
}
.mealhead .tick .ic { width: 0.875rem; height: 0.875rem; }
.mealhead .name { flex: 1; min-width: 0; font-size: 1.0625rem; line-height: 1.375rem; color: var(--text-muted); overflow-wrap: anywhere; }
.mealhead input:checked ~ .tick { background: var(--green); border-color: var(--green); color: #fff; }
.mealhead input:checked ~ .name { font-weight: 700; color: var(--text); }
.mealside { display: flex; align-items: center; gap: 0; flex: none; }
/* Время приёма. ⚠️ Значок часов у поля браузера съедал ширину у НАЗВАНИЯ приёма — «Второй
   завтрак» и «Поздний перекус» обрезало. В приложении время нарисовано просто зелёной
   подписью «8:00», поэтому значок прячем: поле по-прежнему открывает выбор времени по нажатию
   и принимает набор с клавиатуры. */
/* ⚠️ БЕЗ РАМКИ — ЗЕЛЁНОЙ НАДПИСЬЮ (Н266-212, 21.09.2026): в телефоне время — `TextButton` с
   «08:00» 15 жирным цвета Green, поля по бокам 6, высота 40, ширина не меньше 58; рамки и
   подложки нет. Нажатие открывает выбор времени (скрипт зовёт `showPicker`). */
.mealtime {
    width: 3.625rem; height: 2.5rem; flex: none;
    padding: 0 0.375rem;
    border: 0; border-radius: var(--radius-button);
    background: transparent; font-family: inherit;
    color: var(--green); font-weight: 700; font-size: 0.9375rem;
    text-align: center; cursor: pointer;
}
.mealtime:hover { background: rgba(67, 160, 71, .08); }
.mealtime:focus-visible { outline: 0.125rem solid var(--green); outline-offset: 0; }
.mealtime::-webkit-datetime-edit { padding: 0; }
.mealtime::-webkit-calendar-picker-indicator { display: none; }
/* Две подписи под коробкой приёмов — ВНУТРИ белой панели шага, bodySmall 12/16 серым. */
.meal-hint { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.meal-hint + .meal-hint { margin-top: 0.25rem; }
/* Размер порции — двойная «таблетка» «Обычный | Лёгкий» (`MealSizeToggle`).
   ⚠️ Скругление задаём У САМОГО РЯДА и обрезаем по нему: иначе закрашенная половина
   оставалась бы прямоугольной и торчала из круглой рамки. */
/* «Пройти опрос заново» в окне «Новый план» (Н244). Зеркало телефона: зелёный контейнер
   таблеткой, значок настроек, название и подпись столбиком, стрелка справа. */
.gen-survey {
    display: flex; align-items: center; gap: 0.625rem;
    margin-top: 0.75rem; padding: 0.75rem 0.875rem;
    background: var(--green-container);
    border-radius: var(--radius-button);
    text-decoration: none; color: inherit;
}
.gen-survey > .ic { width: 1.25rem; height: 1.25rem; flex: none; color: var(--green-accent); }
.gen-survey b { display: block; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 600; color: var(--green-accent); }
.gen-survey .sub { font-size: 0.6875rem; line-height: 0.9375rem; color: var(--text-muted); }
.gen-survey .arrow { width: 1.25rem; height: 1.25rem; flex: none; color: var(--green-accent); }
/* «Вернуть по умолчанию» — значок 15, как у `AppOutlineButton` телефона (Н266-356); был общий 20. */
.gen-reset .ic { width: 0.9375rem; height: 0.9375rem; }

.sizetoggle {
    display: inline-flex; flex: none;
    border: 0.0625rem solid var(--outline);
    border-radius: var(--radius-button);
    overflow: hidden;
}
.sizetoggle label { cursor: pointer; }
.sizetoggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sizetoggle label > span {
    display: block;
    padding: 0.4375rem 0.5rem;
    font-size: 0.8125rem; line-height: 1rem;
    color: var(--text-muted);
    white-space: nowrap;
}
/* ⚠️ ЗАЛИВКА ТЁМНО-ЗЕЛЁНАЯ, А НЕ ОСНОВНАЯ ЗЕЛЁНАЯ (находка Н92). Буквы здесь мелкие (13 px),
   и белым по `--green` контраст выходит 3,3 к 1 при нужных 4,5: на солнце и на дешёвом
   экране не разобрать, что выбрано, — а от этого зависит размер порций на весь план.
   С `--green-dark` выходит 5,1. Крупные зелёные кнопки той же краски трогать не надо:
   им по размеру хватает и 3 к 1. */
.sizetoggle input:checked + span { background: var(--green-dark); color: #fff; font-weight: 700; }
.mealnote { margin: 0 0 0.25rem 2rem; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--hint-text); }

/* --- Пожелания к приёмам: сворачиваемые блоки с плитками категорий --- */
/* ⚠️ Шапка — `MealSectionHeader` телефона (Н266-213): ЛИПКАЯ (`stickyHeader`) на белом фоне,
   название 17/21 жирное (700) на всю ширину, справа таблетка «выбрано N» (GreenContainer, поля
   8/3, 13 жирным), потом стрелка 20 зелёная. Зазора между разделами нет. z-index — чтобы галочки
   плиток (они `position: absolute`) не проезжали поверх прилипшей шапки. */
.prefsec > summary {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5625rem 0;
    cursor: pointer;
    list-style: none;
    position: sticky; top: 0; z-index: 2;
    background: var(--surface);
}
.prefsec > summary::-webkit-details-marker { display: none; }
.prefsec > summary b {
    flex: 1; min-width: 0;
    font-size: 1.0625rem; line-height: 1.3125rem; padding-block: calc((1.364em - 1.3125rem) / 2);
    font-weight: 700;
}
.prefsec > summary .n {
    flex: none;
    background: var(--green-container); border-radius: var(--radius-button);
    padding: 0.1875rem 0.5rem;
    font-size: 0.8125rem; line-height: 1.5rem; color: var(--green-accent); font-weight: 700;
}
.prefsec > summary .n[hidden] { display: none; }
.prefsec > summary .ic { width: 1.25rem; height: 1.25rem; flex: none; color: var(--green-accent); transition: transform .2s; }
.prefsec[open] > summary .ic { transform: rotate(180deg); }
.prefgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5625rem; padding-bottom: 0.5625rem; }
/* Плитка категории блюда. ⚠️ Это НЕ плитка кухни: у категории фотография внутри плитки со своими
   полями, светлая подложка и подпись РОВНО В ДВЕ СТРОКИ (в приложении `minLines = maxLines = 2`)
   — иначе плитки в ряду получаются разной высоты, а длинная подпись вылезает за рамку. */
.cattile { position: relative; cursor: pointer; }
.cattile input { position: absolute; opacity: 0; width: 0; height: 0; }
.cattile > span {
    position: relative;
    display: block;
    padding: 0.3125rem 0.3125rem 0.4375rem;
    border-radius: var(--radius-inner);
    border: 0.0625rem solid var(--panel-border);
    background: var(--panel-surface);
}
.cattile img {
    display: block; width: 100%; height: 4.75rem;
    border-radius: 0.5625rem;
    object-fit: cover;
    background: var(--warm-top);
}
.cattile .cap {
    display: block;
    margin-top: 0.3125rem;
    height: 1.875rem;            /* ровно две строки по 15 */
    overflow: hidden;
    font-size: 0.6875rem; line-height: 0.9375rem; font-weight: 500;
    color: var(--note-text);
    text-align: center;
}
.cattile input:checked + span { border-color: var(--green); background: var(--green-container); }
.cattile input:checked + span .cap { color: var(--green-accent); font-weight: 800; }
.cattile .tick {
    display: none;
    position: absolute; top: 0.6875rem; right: 0.6875rem;
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--green); color: #fff;
    align-items: center; justify-content: center;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .28);
}
.cattile .tick .ic { width: 0.75rem; height: 0.75rem; }
.cattile input:checked + span .tick { display: flex; }

/* --- Когда собрать план: зелёная плашка с итогом --- */
.plansum {
    background: var(--green-container);
    border-radius: var(--radius-card);
    padding: 0.6875rem 0.75rem;
}
.plansum b { display: block; font-size: 1rem; line-height: 1.1875rem; font-weight: 800; }
.plansum .sub { display: block; margin-top: 0.1875rem; font-size: 0.8125rem; line-height: 1.0625rem; font-weight: 700; color: var(--green-accent); }
.plansum .note { display: block; margin-top: 0.1875rem; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.datebox {
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    height: 2.1875rem; margin-top: 0.5625rem;
    border-radius: var(--radius-button);
    border: 0.0625rem solid var(--green-accent);
    background: var(--surface);
    color: var(--green-accent);
    font-size: 0.9375rem; font-weight: 700;
}
.datebox .ic { width: 0.75rem; height: 0.75rem; flex: none; }
/* Таблетка «Выбрать дату» — КНОПКА (Н266-215): во всю ширину, 35, рамка 1 GreenAccent, значок
   CalendarMonth 12, отбивка 6, 15 жирным. Сброс шрифта и курсора `button`. */
button.datebox { width: 100%; font-family: inherit; cursor: pointer; }
/* Поле даты браузера остаётся только без скрипта. */
.datebox-field {
    display: block; width: 100%; height: 2.1875rem; margin-top: 0.5625rem; padding: 0 0.75rem;
    border: 0.0625rem solid var(--green-accent); border-radius: var(--radius-button);
    background: var(--surface); color: var(--green-accent); font: inherit; font-weight: 700;
}
/* «С какого дня?» окна «Новый план» (Н266-343) — таблетка даты под «таблетками» выбора, отбивка
   до следующего вопроса та же, что у `.pills` (14). Строка «Текущий план идёт до …» — под ней. */
.gen-datebox { margin-bottom: 0.875rem; }
.gen-datebox .datebox, .gen-datebox .datebox-field { margin-top: 0; }
.gen-start-keep { margin: -0.375rem 0 0.875rem; }

/* --- Календарь «Когда собрать план» — `PlanDatePickerDialog` телефона (Н266-215) ---
   Окно без полей, скругление 17, по бокам 19; зелёная шапка (перелив #4CA551 → GreenDark, одинаков
   в обеих темах) с днём 29/33; тело 15 по бокам, 11 сверху, 10 снизу; стрелки — кружки 25 с
   рамкой панели и значком 15; дни недели 10 жирным, выходные золотые; ячейка 33, кружок 31, число
   13 полужирным; выбранное — зелёная таблетка с тенью, 14 очень жирным белым; прошедшие —
   цветом черты. Имена `pc-*`: `.cal`, `.cal-day`, `.day` уже заняты другими страницами. */
.modal.plan-cal {
    width: min(23.3125rem, calc(100vw - 2.375rem)); max-width: none;
    padding: 0; border: 0; border-radius: 1.0625rem;
    background: var(--surface); overflow: hidden;
}
.pc-head { background: linear-gradient(180deg, #4CA551, #2E7D32); padding: 0.9375rem; }
.pc-head b {
    display: block; color: #fff;
    font-size: 1.8125rem; line-height: 2.0625rem; font-weight: 800; letter-spacing: -0.015em;
}
.pc-body { padding: 0.6875rem 0.9375rem 0.625rem; }
.pc-month { display: flex; align-items: center; margin-bottom: 0.5625rem; }
.pc-month b {
    flex: 1; text-align: center; font-size: 1.0625rem; font-weight: 800; color: var(--text);
}
.pc-arrow {
    width: 1.5625rem; height: 1.5625rem; flex: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 0.0625rem solid var(--panel-border);
    background: var(--panel-surface); color: var(--note-text); cursor: pointer;
}
.pc-arrow .ic { width: 0.9375rem; height: 0.9375rem; }
.pc-arrow:disabled { color: var(--divider); cursor: default; }
.pc-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 0.1875rem; }
.pc-week span { text-align: center; font-size: 0.625rem; font-weight: 700; color: var(--hint-text); }
.pc-week .wknd { color: var(--calendar-weekend); }
.pc-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.pc-day {
    height: 2.0625rem; padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.pc-day span {
    width: 1.9375rem; height: 1.9375rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8125rem; font-weight: 600; color: var(--text);
}
.pc-day.wknd span { color: var(--calendar-weekend); }
.pc-day:disabled { cursor: default; }
.pc-day:disabled span { color: var(--divider); font-weight: 500; }
.pc-day.on span {
    background: var(--btn-pill); color: #fff; font-size: 0.875rem; font-weight: 800;
    box-shadow: 0 0.25rem 0.5rem rgba(46, 125, 50, .34);
}
.pc-foot {
    display: flex; justify-content: flex-end; align-items: center; gap: 0.375rem;
    padding: 0.625rem 0.9375rem;
}
.pc-close {
    border: 0; background: none; padding: 0 0.75rem; min-height: 2.5rem; cursor: pointer;
    color: var(--green-accent); font: inherit; font-size: 0.9375rem; font-weight: 700;
}
.shimmer-btn.pc-done {
    width: 7rem; height: 2.1875rem; padding: 0;
    font-size: 0.9375rem; font-weight: 800; background: var(--btn-pill);
}

/* --- Сводка: строка-ответ со стрелкой, вся строка нажимается --- */
.sumrow {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left;
    padding: 0.5625rem 0;
    color: var(--text);
}
.sumrow + .sumrow { border-top: 0.0625rem solid var(--outline); }
/* Карточка сводки — `SummaryStep` телефона: поля 14 по бокам и 4 сверху-снизу (строки сами дают
   по 9), а не 14 со всех сторон, как у прочих карточек шага (Н266-214). */
#summary-rows { padding: 0.25rem 0.875rem; }
.sumrow > .ic { width: 0.9375rem; height: 0.9375rem; flex: none; color: var(--green-accent); }
.sumrow .grow { flex: 1; min-width: 0; }
.sumrow .lbl { display: block; font-size: 0.6875rem; line-height: 0.9375rem; font-weight: 500; color: var(--hint-text); }
.sumrow .val { display: block; margin-top: 0.125rem; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700; }
.sumrow .arr { width: 0.9375rem; height: 0.9375rem; flex: none; color: var(--hint-text); }

/* ===========================================================================
   «ЛИСТАЙТЕ ДАЛЬШЕ» — круглая стрелка вниз над мягким затуханием.

   Общая деталь приложения (`ScrollDownHint`): стоит и в анкете, и в окнах с длинным
   содержимым. Без неё длинный шаг выглядел так, будто он кончился, и человек жал «Далее»,
   не увидев нижних вопросов.

   ⚠️ Показывается, ТОЛЬКО пока есть что листать: у дочитавшего до конца она пропадает.
   Этим занимается скрипт — здесь только вид.
   =========================================================================== */
.scrollhint {
    height: 4rem;                       /* 64 */
    pointer-events: none;               /* сквозь затухание можно нажимать содержимое */
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 3;
}
.scrollhint[hidden] { display: none; }
/* В окне: висит над последними строками содержимого, места в потоке НЕ занимает. */
.scrollhint.in-modal {
    position: sticky; bottom: 0;
    /* Отрицательные отступы: подсказка ложится ПОВЕРХ последних строк и от края до края окна,
       а не в рамке его внутренних полей. Места в потоке не занимает. */
    margin: -4rem -1.125rem 0;
    /* Затухание — в НИЖНИЙ цвет карточки: у неё перелив, и белым низ был бы виден стыком. */
    background: linear-gradient(180deg, transparent, var(--card-fade));
}
/* В анкете: над кнопками, поверх последних строк шага. Места в потоке не занимает —
   листается тело шага, а не страница. */
.scrollhint.on-page {
    margin: -4rem 0.25rem 0;
    position: relative;
    background: linear-gradient(180deg, transparent, var(--bg));
}
.scrollhint > button {
    pointer-events: auto;
    width: 2.25rem; height: 2.25rem;    /* 36 */
    margin-bottom: 0.5rem;
    border-radius: 50%;
    border: 0.0625rem solid var(--outline);
    background: var(--surface);
    opacity: .55;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.scrollhint > button .ic { width: 1rem; height: 1rem; color: var(--green-accent); }
.scrollhint > button:hover { opacity: .85; }

/* «Составляем ваш план…» — затемнение поверх анкеты после «Готово».

   Сборка плана идёт секундами, и раньше страница просто молчала: кнопка нажата, а на экране
   ничего не меняется — второй тап напрашивался сам. Точно так же ведёт себя приложение.  */
.wiz-saving {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0, 0, 0, .40);
    display: flex; align-items: center; justify-content: center;
}
.wiz-saving[hidden] { display: none; }
.wiz-saving > div {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
    padding: 1.75rem;
    display: flex; flex-direction: column; align-items: center;
}
.wiz-saving p { margin: 0.875rem 0 0; font-size: 0.9375rem; color: var(--text-muted); }
/* Крутящийся кружок — той же зеленью, что кружок загрузки в приложении. */
.spinner {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    border: 0.25rem solid var(--progress-track);
    border-top-color: var(--green);
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Кому мешает движение — показываем кружок неподвижным, а не мигающим. */
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
/* «Готовим ваш план…» на Главной — `PlanPreparingCard` телефона (Н266-221): GreenContainer, тень 2,
   рамка 1 Divider, поля 18, кружок Green 28 толщиной 3, отбивка 14; заголовок жирный, под ним 2 и
   12/16 серым. */
.plan-preparing {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 1.125rem; margin-bottom: 0.875rem;
    background: var(--green-container);
    border-radius: var(--radius-card);
    box-shadow: inset 0 0 0 0.0625rem var(--divider), var(--shadow-card);
}
.plan-preparing .spinner { width: 1.75rem; height: 1.75rem; border-width: 0.1875rem; flex: none; }
.plan-preparing .grow { flex: 1; min-width: 0; }
.plan-preparing b { display: block; font-weight: 700; }
.plan-preparing .sub {
    display: block; margin-top: 0.125rem;
    font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--text-muted);
}

/* --- Низ: «Пропустить» и главная кнопка --- */
.wiz-blocked {
    margin: 0 1.25rem;
    font-size: 0.6875rem; line-height: 1rem;
    color: var(--orange);
    text-align: center;
}
.wiz-foot { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0; }
.wiz-skip {
    width: 7.5rem; height: 3.5625rem; flex: none;
    border-radius: 0.9375rem;
    border: 0.0625rem solid rgba(46, 125, 50, .30);
    background: var(--surface);
    color: var(--green-accent);
    font-family: inherit; font-size: 1.0625rem; font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
/* ⚠️ Главная кнопка анкеты — НЕ таблетка: в макете у неё скругление 15 и высота 64.
   Перелив, свечение и бегущий блик остаются общие (.btn-primary). */
.wiz-main {
    flex: 1;
    min-height: 4rem;
    border-radius: 0.9375rem;
    font-size: 1.5625rem;
    font-weight: 800;
}
.wiz-main.off { opacity: .45; }

/* Строка «Норма N мл · изменить» под карточкой воды — то самое «поставить вручную»,
   которое обещает подпись над ней (в приложении она стоит там же). */
.water-goal {
    display: inline-block;
    margin-top: 0.375rem;
    border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.75rem; line-height: 1rem; font-weight: 600;
    color: var(--green-accent);
    border-radius: var(--radius-button);
    padding: 0.25rem 0;
}
.water-goal:hover { text-decoration: underline; }

/* ВОПРОС — ОТВЕТ: ШЕВРОН НАШ, А НЕ ТРЕУГОЛЬНИК БРАУЗЕРА (находка Н38, 12.09.2026).
   Это было единственное место на сайте со стандартным чёрным треугольником `details`, тогда как
   в телефоне у каждого вопроса аккуратный шеврон. Приём тот же, что у `.deliv-fold` и
   `.pantry-fold`: прячем встроенный маркер и рисуем свой значок справа.
   ⚠️ Скриптов по-прежнему ноль: раскрытие делает сам `details`, с клавиатуры и с читалкой. */
.faq-item > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0;   /* шеврон вплотную к вопросу, как `FaqCard` (Н266-188) */
    font-weight: 700;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:focus-visible {
    outline: 2px solid var(--green-accent);
    outline-offset: 2px;
    border-radius: 0.5rem;
}
.faq-chev { margin-left: auto; flex: none; transition: transform .15s ease; }
/* ⚠️ Закрытый вопрос — значок ВНИЗ, раскрытый — ВВЕРХ: ровно как в телефоне (находка Н38).
   Было «вправо → вниз», и одна и та же стрелка на двух половинах показывала разное. */
.faq-item[open] .faq-chev { transform: rotate(180deg); }
/* Раскрытие плавное, как `animateContentSize` телефона (Н264-104). Где браузер так не умеет —
   раскрывается сразу, как раньше. Шеврон вплотную к вопросу (Н266-188): у `FaqCard` строка без
   промежутка — было 10, и длинные вопросы переносились раньше, чем в телефоне. */
.faq-list { interpolate-size: allow-keywords; }
.faq-item::details-content { height: 0; overflow: clip; transition: height .2s ease, content-visibility .2s allow-discrete; }
.faq-item[open]::details-content { height: auto; }

/* ОКНО «ВОТ ЧТО ПРЕДЛАГАЕМ» (задача 14). Снимок 96 точек и две строки фактов — как в телефоне
   (`MealThumb(size = 96.dp)` в `ReplacementOfferDialog`). */
.offer-row { display: flex; align-items: flex-start; gap: 0.625rem; }
.offer-photo, .offer-row .meal-photo { width: 6rem; height: 6rem; flex: none; }
.offer-row .meal-photo.no-photo .ic { width: 2.25rem; height: 2.25rem; }
.offer-body { flex: 1; min-width: 0; }
.offer-facts { margin: 0.25rem 0 0; }
.offer-diff { margin: 0.25rem 0 0; font-size: 0.9375rem; line-height: 1.25rem; }
/* Окно «Вот что предлагаем» — `ReplacementOfferDialog` телефона на общем окне (18.09.2026): фото 96
   со скруглением 16 и 10 до текста; название `titleMedium` 16/24 жирное тёмное, до трёх строк;
   через 4 строки 12/16 серым; через 12 подпись 17 (`.edit-label`); пункты `bodyMedium` 14/20
   тёмные без промежутков; через 12 строка «Замена уже потрачена» 12/16. */
.modal.offer .offer-photo { border-radius: 1rem; }
.offer-title {
    margin: 0; font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.modal.offer .offer-diff { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text); }
.modal.offer .offer-spent { margin-top: 0.75rem; }

/* ===========================================================================
   КАРТОЧКА БЛЮДА — `RecipeDetailsScreen` телефона (Н264, 16.09.2026).
   Мерки поэлементно из телефона; классы `rd-*` свои, чтобы не задеть плитки «Статистики».
   =========================================================================== */
.rd { padding-bottom: 1rem; }
/* Фото 244 край-в-край; без фото — мягкая подложка (обед и ужин тёплые) и вилка 56 зелёным. */
.rd-hero {
    position: relative; margin: 0 -1rem; height: 15.25rem;
    background: var(--green-container);
    display: flex; align-items: center; justify-content: center;
}
.rd-hero.warm { background: var(--orange-container); }
.rd-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-hero-ic { width: 3.5rem; height: 3.5rem; color: var(--green); }
/* Кружок «назад» 40: белый на 92 %, тень 8, без рамки, тёмная стрелка 20. */
.rd-back {
    position: absolute; left: 0.875rem; top: 0.875rem;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, .22);
    color: var(--text); display: inline-flex; align-items: center; justify-content: center;
}
.rd-back .ic { width: 1.25rem; height: 1.25rem; }
/* Поля колонки 15, а не 16 сайта. */
.rd-body { margin: 0 -0.0625rem; }
.rd-title { margin: 0.875rem 0 0; font-size: 1.5rem; line-height: 1.6875rem; font-weight: 800; letter-spacing: -0.03125rem; color: var(--text); }
.rd-meta { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 0.5rem; }
.rd-meta span { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.90625rem; line-height: 1.0625rem; color: var(--text-muted); }
.rd-meta .ic { width: 1.125rem; height: 1.125rem; }
/* Таблетки оценки (`ReactionPill`): 43, поля 13, промежуток 7, значок 18, подпись 15/18 жирная.
   Не нажата — рамка 1 цветом разделителя и СЕРАЯ подпись (значок «нравится» зелёный, «не нравится»
   серый); нажата — рамка 2 своим цветом. ⚠️ Сайт рисовал «Нравится» с зелёной рамкой без нажатия. */
.rd-pills { display: flex; flex-wrap: wrap; gap: 0.5625rem; margin-top: 0.6875rem; }
.rd-pills form { margin: 0; }
.rd-pill {
    height: 2.6875rem; padding: 0 0.8125rem;
    display: inline-flex; align-items: center; gap: 0.4375rem;
    border: 0; border-radius: 999px; background: var(--card-bg);
    box-shadow: inset 0 0 0 0.0625rem var(--divider), 0 0.0625rem 0.1875rem rgba(0, 0, 0, .14);
    color: var(--text-muted); font: inherit; font-size: 0.9375rem; line-height: 1.125rem; font-weight: 700; cursor: pointer;
}
.rd-pill .ic { width: 1.125rem; height: 1.125rem; }
.rd-pill.like .ic { color: var(--green); }
.rd-pill.like.on { color: var(--green); box-shadow: inset 0 0 0 0.125rem var(--green), 0 0.0625rem 0.1875rem rgba(0, 0, 0, .14); }
.rd-pill.dislike.on, .rd-pill.dislike.on .ic { color: var(--danger); }
.rd-pill.dislike.on { box-shadow: inset 0 0 0 0.125rem var(--danger), 0 0.0625rem 0.1875rem rgba(0, 0, 0, .14); }
.rd-macro-line { margin: 0.875rem 0 0; font-size: 0.8125rem; line-height: 1rem; color: var(--hint-text); }
/* Плитки КБЖУ (`MacroCard`): поля 11/4, промежуток 4, скругление 12, число 20/22, подпись 12/14 бледная. */
.rd-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.4375rem; }
.rd-macro {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.6875rem 0.25rem;
    border-radius: 0.75rem; background: var(--card-bg);
    box-shadow: inset 0 0 0 0.0625rem var(--divider), 0 0.0625rem 0.125rem rgba(0, 0, 0, .12);
}
.rd-macro b { font-size: 1.25rem; line-height: 1.375rem; font-weight: 800; white-space: nowrap; }
.rd-macro span { font-size: 0.75rem; line-height: 0.875rem; color: var(--hint-text); white-space: nowrap; }
.rd-macro.kcal b { color: var(--green-accent); }
.rd-macro.prot b { color: var(--protein); }
.rd-macro.fat b { color: var(--fat); }
.rd-macro.carb b { color: var(--carb); }
/* `AppCard`: скругление 17, перелив, рамка 1 внутрь и тень 2. */
.rd-card { border-radius: var(--radius-card); background: var(--card-bg); box-shadow: inset 0 0 0 0.0625rem var(--divider), var(--shadow-card); }
/* Аллергены (`AllergenCard`): поля 12/10, кружок 30, значок 17, промежуток 9, текст 15/19. */
.rd-allergens { display: flex; align-items: center; gap: 0.5625rem; margin-top: 0.5rem; padding: 0.625rem 0.75rem; }
.rd-allergens .round { width: 1.875rem; height: 1.875rem; flex: none; border-radius: 50%; background: var(--green-container); color: var(--green); display: flex; align-items: center; justify-content: center; }
.rd-allergens .round .ic { width: 1.0625rem; height: 1.0625rem; }
.rd-allergens b { font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 600; color: var(--text); }
.rd-allergens.warn .round { background: var(--orange-container); color: var(--orange); }
.rd-allergens.warn b { color: var(--orange); }
/* «Состав и готовка — в Plus» (`LockedRecipeCard`): оранжевая подложка без значка, поля 16. */
.rd-locked {
    margin-top: 1rem; padding: 1rem; border-radius: var(--radius-card);
    background: var(--orange-container); box-shadow: inset 0 0 0 0.0625rem var(--divider), var(--shadow-card);
}
.rd-locked b { display: block; font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--orange); }
.rd-locked p { margin: 0.375rem 0 0.875rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
/* Оранжевая `ShimmerButton(base = Orange)` — РОВНЫЙ оранжевый с бегущим бликом, без перелива
   (`gradient = null` телефона, Н266-121): карточка «Состав и готовка — в Plus», «Рецепт
   генерируется» и день без блюд на Главной. */
.gen-btn-orange { background: var(--orange); box-shadow: var(--glow-orange); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.rd-row { display: flex; align-items: center; margin-top: 0.8125rem; }
.rd-h { margin: 0; font-size: 1.125rem; line-height: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: 0; }
.rd-row .rd-h { flex: 1; }
.rd-block { margin-top: 0.875rem; }
/* Счётчик порций: таблетка 46, поля 13, промежуток 11, значки 18 (выключенный — цветом черты),
   число 18/20 очень жирное в ширину 17. */
.rd-stepper {
    height: 2.875rem; padding: 0 0.8125rem;
    display: inline-flex; align-items: center; gap: 0.6875rem;
    border: 0; border-radius: 999px; background: var(--card-bg);
    box-shadow: inset 0 0 0 0.0625rem var(--divider), 0 0.0625rem 0.125rem rgba(0, 0, 0, .12);
    color: var(--text); font: inherit;
}
.rd-stepper-44 { height: 2.75rem; }
.rd-step { display: inline-flex; color: var(--green); border: 0; background: none; padding: 0; cursor: pointer; }
.rd-step .ic { width: 1.125rem; height: 1.125rem; }
.rd-step.off { color: var(--divider); cursor: default; }
.rd-val { width: 1.0625rem; text-align: center; font-size: 1.125rem; line-height: 1.25rem; font-weight: 800; }
.rd-stepper-44 .rd-val { font-size: 1.0625rem; }
/* «Готовим на» (`CookForRow`): таблетка 46, поля 15, промежуток 8, значок группы 18 зелёным,
   подпись 16/19 жирная тёмная; имена — только если выбраны не все. */
.rd-cookfor { padding: 0 0.9375rem; gap: 0.5rem; cursor: pointer; font-size: 1rem; line-height: 1.1875rem; font-weight: 700; }
.rd-cookfor .ic { width: 1.125rem; height: 1.125rem; color: var(--green); }
.rd-eaters { margin: 0.3125rem 0 0; font-size: 0.8125rem; line-height: 1rem; color: var(--hint-text); }
.rd-caption { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1rem; color: var(--hint-text); }
/* Состав (`IngredientRow`): карточка с полями 14/5, строка 40, точка 8, промежуток 9, 14,5/17. */
.rd-ings { margin-top: 0.5rem; padding: 0.3125rem 0.875rem; }
.rd-ing { height: 2.5rem; display: flex; align-items: center; gap: 0.5625rem; }
.rd-ing + .rd-ing { box-shadow: inset 0 0.0625rem 0 var(--divider); }
.rd-ing .dot { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--green); }
.rd-ing .grow { flex: 1; min-width: 0; font-size: 0.90625rem; line-height: 1.0625rem; color: var(--text); }
.rd-ing .qty { font-size: 0.90625rem; line-height: 1.0625rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.rd-level { margin: 0.5rem 0 0; }
/* Шаги (`StepRow`): карточка 14/4, у шага поля 12 и черта между шагами; кружок 29 с переливом,
   номер 15/17; ниточка 1,5 цветом `StepLine`; текст 16/23 полужирный; плашка времени 24 таблеткой. */
.rd-steps { margin-top: 0.625rem; padding: 0.25rem 0.875rem; }
.rd-step-row { display: flex; gap: 0.625rem; padding: 0.75rem 0; }
.rd-step-row + .rd-step-row { box-shadow: inset 0 0.0625rem 0 var(--divider); }
.rd-step-left { display: flex; flex-direction: column; align-items: center; flex: none; }
.rd-step-left .num {
    width: 1.8125rem; height: 1.8125rem; border-radius: 50%;
    background: var(--btn-green); box-shadow: var(--glow-green);
    color: #fff; font-size: 0.9375rem; line-height: 1.0625rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.rd-step-left .line { width: 0.09375rem; flex: 1; margin-top: 0.3125rem; border-radius: 999px; background: var(--step-line); }
.rd-step-right { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rd-step-right .txt { font-size: 1rem; line-height: 1.4375rem; font-weight: 500; color: var(--text); }
.rd-steps[data-level-box="detailed"] .txt.short, .rd-steps[data-level-box="short"] .txt.detailed { display: none; }
.rd-step-time {
    margin-top: 0.3125rem; height: 1.5rem; padding: 0 0.5625rem;
    display: inline-flex; align-items: center; gap: 0.3125rem;
    border-radius: 999px; background: var(--step-time-fill); color: var(--step-time-text);
    font-size: 0.8125rem; line-height: 0.9375rem; font-weight: 700;
}
.rd-step-time .ic { width: 0.875rem; height: 0.875rem; color: var(--step-time-icon); }
/* «Начать готовку»: во всю ширину, 53, подпись 17/20 жирная, зелёный перелив. */
.rd-start {
    margin-top: 0.9375rem; height: 3.3125rem; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--btn-green); box-shadow: var(--glow-green);
    color: #fff; text-decoration: none; font-size: 1.0625rem; line-height: 1.25rem; font-weight: 700;
}
/* Окно «На кого готовим?». Строка едока 60 — как в телефоне: галочка `Checkbox` занимает 48 (сама
   18 и по 15 с боков), сверху и снизу поля 6 (Н266-120; было 46 — по высоте двух строк текста). */
.rd-eater { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0; min-height: 3.75rem; cursor: pointer; }
.rd-eater input { width: 1.125rem; height: 1.125rem; margin: 0 0.9375rem; flex: none; }
.rd-eater span, .rd-extra > span:first-child { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rd-eater b, .rd-extra b { font-size: 0.9375rem; line-height: 1.125rem; font-weight: 600; color: var(--text); }
.rd-eater i, .rd-extra i { font-style: normal; font-size: 0.8125rem; line-height: 1rem; color: var(--hint-text); }
/* Промежуток 13 даёт `list-gap` в разметке (правило `.modal-list .list-body` обнуляет голый);
   черты в списке с прокруткой не сжимаются — иначе браузер ужимал их до нуля. */
.rd-eaters-list > .modal-sep { flex: none; }
.rd-last-warn { margin: 0; font-size: 0.8125rem; line-height: 1rem; font-weight: 700; color: var(--orange); }
.rd-extra { display: flex; align-items: center; gap: 0.625rem; }
.rd-note { margin: 0; font-size: 0.8125rem; line-height: 1.0625rem; color: var(--hint-text); }

/* ЭКРАН «РЕЦЕПТ ГЕНЕРИРУЕТСЯ» — `RecipeGeneratingScreen`: «Назад» надписью слева вверху,
   по центру название жирным серым, крутилка 48 и текст; при неудаче — текст и кнопка. */
.gen-screen { position: relative; min-height: calc(100vh - 8rem); padding: 1.5rem; display: flex; align-items: center; justify-content: center; }
.gen-back { position: absolute; left: 0.75rem; top: 0.75rem; padding: 0.5rem 0.75rem; color: var(--text-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; }
.gen-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gen-title { font-weight: 700; color: var(--text-muted); margin-bottom: 1.5rem; }
.gen-text { margin: 0 0 1rem; color: var(--text-muted); }
/* «Оформить Plus» и «Повторить» — `ShimmerButton` по умолчанию: высота 56 (`ShimmerButtonHeight`),
   подпись 19, ширина по подписи (Н266-121; голая `.shimmer-btn` — 48). */
.gen-center .shimmer-btn { height: 3.5rem; }
.gen-spinner {
    width: 3rem; height: 3rem; margin-bottom: 1.25rem; border-radius: 50%;
    border: 0.25rem solid var(--green-container); border-top-color: var(--green);
    animation: spin 1s linear infinite;
}

/* ===========================================================================
   ВОПРОС — ОТВЕТ, ПОМОЩЬ И ПОДДЕРЖКА, О ПРИЛОЖЕНИИ, ДОКУМЕНТЫ — экраны телефона (Н264).
   =========================================================================== */
/* «Вопрос — ответ» (`FaqScreen`): между карточками 10; вступление и «Не нашли ответ?» 12/16 серым. */
.faq-list { display: flex; flex-direction: column; gap: 0.625rem; }
/* От шапки до строки 16 (Н266-188): 6 у шапки телефона и 10 шага списка — у сайта 14 шапки + 2. */
.faq-intro { margin: 0.125rem 0 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.faq-more { margin: 0.375rem 0.125rem 0; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.faq-support { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Карточка вопроса (`FaqCard`): поля 14, вопрос 14/20 полужирный, шеврон 24 серый, ответ 12/16 серым. */
.card.faq-item { padding: 0.875rem; margin: 0; }
.faq-item > summary .grow { flex: 1; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--text); }
.faq-item .faq-chev { width: 1.5rem; height: 1.5rem; color: var(--text-muted); }
.faq-answer { margin: 0.375rem 0 0; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }

/* «Помощь и поддержка» (`SupportScreen`): между блоками 14. */
.support-list { display: flex; flex-direction: column; gap: 0.875rem; }
.support-list .card { margin: 0; }
/* Карточка «У вас что-то случилось?»: поля 16; заголовок 15/19 жирный; подписи 12/16 серым. */
.support-ask { display: flex; flex-direction: column; }
.support-ask-title { font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700; }
.support-muted { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.support-ask-sub { margin-top: 0.125rem; }
.support-terms { margin-top: 0.375rem; }
.support-topics { display: flex; flex-direction: column; margin-top: 0.5rem; }
/* Тема — строка на кремовой подложке скруглением 12, поля 14/12, значок 20 зелёный, текст 14/20. */
.support-topic {
    display: flex; align-items: center; gap: 0.625rem; width: 100%;
    margin: 0.25rem 0; padding: 0.75rem 0.875rem; min-height: 2.8125rem;
    border: 0; border-radius: 0.75rem; background: var(--bg);
    color: var(--text); font: inherit; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
    text-align: left; cursor: pointer;
}
.support-topic .ic { width: 1.25rem; height: 1.25rem; color: var(--green); flex: none; }
.support-h { font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--text); }
/* Карточка обращения (`TicketCard`): поля 14, значок 18, тема 15/19 полужирная в одну строку,
   плашка статуса, дата 11/16 серым. */
.card.support-ticket { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem; text-decoration: none; color: inherit; }
.support-ticket-top { display: flex; align-items: center; gap: 0.5rem; }
.support-ticket-top .ic { width: 1.125rem; height: 1.125rem; color: var(--green); flex: none; }
.support-ticket-top .subject { flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.support-date { font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
/* Плашка статуса (`StatusChip`): скругление 8, поля 8/3, 11/16 полужирно; «Открыто» оранжевым,
   «Решено» и «Закрыто» зелёным. */
.status-chip {
    flex: none; padding: 0.1875rem 0.5rem; border-radius: 0.5rem;
    background: var(--orange-container); color: var(--orange);
    font-size: 0.6875rem; line-height: 1rem; font-weight: 600; white-space: nowrap;
}
.status-chip.done { background: var(--green-container); color: var(--green-accent); }
/* Окно «Новое обращение». */
.ticket-topic { font-size: 0.8125rem; line-height: 1rem; font-weight: 600; color: var(--green-accent); }
textarea.app-field.ticket-text { min-height: 6rem; padding: 0.875rem; resize: vertical; }
.ticket-note { font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }

/* Переписка (`SupportTicketScreen`). */
.ticket-screen { display: flex; flex-direction: column; min-height: calc(100vh - 7rem); }
.ticket-head { display: flex; align-items: center; gap: 0; margin: 0 -0.5rem; padding: 0.25rem 0; }
.ticket-back { width: 3rem; height: 3rem; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.ticket-back .ic { width: 1.5rem; height: 1.5rem; }
.ticket-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-right: 0.5rem; }
.ticket-head-text b { font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-head-text span { font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.ticket-head .status-chip { margin-right: 0.5rem; }
.ticket-messages { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0; }
.bubble-row { display: flex; justify-content: flex-start; }
.bubble-row.mine { justify-content: flex-end; }
/* Пузырь: скругление 14, у «своего» угол внизу справа 4, у ответа — внизу слева; поля 12/8;
   свой — светло-зелёный, ответ — белый; тень 1; шире 300 не бывает. */
.bubble {
    max-width: 18.75rem; padding: 0.5rem 0.75rem;
    border-radius: 0.875rem 0.875rem 0.875rem 0.25rem;
    background: var(--surface); box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, .12);
    display: flex; flex-direction: column; gap: 0.125rem;
}
.bubble-row.mine .bubble { border-radius: 0.875rem 0.875rem 0.25rem 0.875rem; background: var(--green-container); }
.bubble-ai { font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.bubble-text { font-size: 0.875rem; line-height: 1.25rem; color: var(--text); }
.bubble-row.mine .bubble-text { color: var(--green-accent); }
.bubble-time { font-size: 0.5625rem; line-height: 1rem; color: var(--text-muted); }
.ticket-note { margin: 0.5rem 0 0; }
.ticket-bottom { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.625rem; background: var(--bg); }
.ticket-bottom form { margin: 0; }
/* Полоса «Отметить решённым»: скругление 12, поля 8, значок 16, подпись 13/16 полужирная. */
.resolve-bar {
    width: 100%; padding: 0.5rem; border: 0; border-radius: 0.75rem; background: var(--surface);
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    color: var(--text-muted); font: inherit; font-size: 0.8125rem; line-height: 1rem; font-weight: 600; cursor: pointer;
}
.resolve-bar .ic { width: 1rem; height: 1rem; }
.resolve-bar.done { background: var(--green-container); color: var(--green-accent); }
.resolve-bar:disabled { cursor: default; }
.reply-row { display: flex; align-items: center; gap: 0.5rem; }
textarea.app-field.reply-field { flex: 1; min-height: 3.5rem; padding: 1rem 0.875rem; resize: none; line-height: 1.5rem; }
/* Кнопка отправки 46: бледная, пока поле пустое; зелёная с белым значком — когда есть текст. */
.send-round {
    width: 2.875rem; height: 2.875rem; flex: none; border: 0; border-radius: 50%;
    background: var(--green-container); color: var(--green);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.send-round.on { background: var(--green); color: #fff; }
.send-round .ic { width: 1.25rem; height: 1.25rem; }

/* «О приложении» (`AboutScreen`). */
.card.about-card { display: flex; flex-direction: column; align-items: center; padding: 1.25rem; margin: 0; text-align: center; }
.about-robot { width: 4rem; height: 4rem; border-radius: 50%; background: var(--green-container); display: flex; align-items: center; justify-content: center; }
.about-name { margin-top: 0.625rem; font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; }
.about-version { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
/* ⚠️ Описание прижато ВЛЕВО (Н264-108): в телефоне у `Text` нет выравнивания — перенесённые строки
   идут от левого края, хотя сама карточка по центру. */
.about-desc { align-self: stretch; margin: 0.625rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); text-align: left; }
.about-docs-title { display: block; margin: 1rem 0 0.5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 700; }
.card.about-docs { padding: 0.25rem 0; margin: 0; }
/* Строка документа (`DocRow`): поля 16/14, текст 16/24, стрелка 24 серая, без значка и без черт. */
.doc-row { display: flex; align-items: center; padding: 0.875rem 1rem; color: var(--text); text-decoration: none; font-size: 1rem; line-height: 1.5rem; }
.doc-row .ic { width: 1.5rem; height: 1.5rem; color: var(--text-muted); flex: none; }
.about-contact { margin: 1rem 0 0; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
/* Документ (`DocumentScreen`): текст 14/20 серым без карточки, пометка черновика 11/16 зелёным. */
.doc-text { white-space: pre-wrap; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
.doc-draft { margin: 1rem 0 0; font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--green); }

/* Строка выбора в окне-списке (`ChoiceRow`): поля 4/14, значок 22 серый, текст 16/24, стрелка. */
.list-hint { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
.choice-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0.25rem; border-radius: 0.75rem; color: var(--text); text-decoration: none; font-size: 1rem; line-height: 1.5rem; }
.choice-row .ic { width: 1.375rem; height: 1.375rem; color: var(--text-muted); flex: none; }
.choice-row .ic.arrow { width: 1.5rem; height: 1.5rem; }

/* ---------------------------------------------------------------------------
   ОКНО «ХОЧУ ЕСТЬ» — `WantToEatDialog` телефона (Н264-104…111, 125). Каркас — общее окно
   `.modal-alert`; содержимое прокручивается само до 420, заголовок и кнопки стоят на месте.
   --------------------------------------------------------------------------- */
button.card.nav-card { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* ⚠️ Обе части окна — ФОРМЫ, а `.modal-alert form` ставит формам колонку с промежутком 13:
   поля «Хочу есть» разъехались бы, а «Отмена» встала бы над «Добавить». Два класса — вес выше. */
.modal-alert form.snack-body { display: flex; flex-direction: column; gap: 0; max-height: 26.25rem; overflow-y: auto; margin: 0; }
.modal-alert form.alert-actions { flex-direction: row; gap: 0.5625rem; }
/* Пояснение 14/19 серым, остаток до нормы тем же текстом (было 16 и число жирным). */
.snack-hint { margin: 0; font-size: 0.875rem; line-height: 1.1875rem; color: var(--text-muted); }
.snack-body input.app-field { width: 100%; margin-top: 0.75rem; flex: none; }
/* Заголовок раздела (`GenLabel`): 17/21 очень жирный, 8 до таблеток. */
.snack-label { display: block; margin: 0.75rem 0 0.5rem; font-size: 1.0625rem; line-height: 1.3125rem; font-weight: 800; color: var(--text); }
/* Таблетки в ряд через 8, без зазора между строками — как `FlowRow` телефона. Подпись 13/15
   (`AppChip`): с подписью анкеты 15 «60 мин» не влезала в строку и уезжала вниз. */
.snack-chips { gap: 0 0.5rem; }
.snack-chips .wchip > span { font-size: 0.8125rem; line-height: 0.9375rem; }
/* «Предложить блюдо» — `ShimmerButton`: 56, ровный зелёный (без перелива и без значка), свечение,
   подпись 19 жирная; без подписки — оранжевая и ведёт на оформление. */
.snack-go {
    margin-top: 0.875rem; width: 100%; height: 3.5rem; flex: none;
    display: flex; align-items: center; justify-content: center; gap: 0.625rem;
    padding: 0 1.375rem; border: 0; border-radius: var(--radius-button);
    background: var(--green); box-shadow: var(--glow-green);
    color: #fff; font: inherit; font-size: 1.1875rem; line-height: 1.4375rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    position: relative; overflow: hidden; isolation: isolate;
}
.snack-go.plus { background: var(--orange); box-shadow: var(--glow-orange); }
.snack-go .spin {
    display: none; width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%;
    border: 0.125rem solid transparent; border-top-color: #fff; border-right-color: #fff;
    animation: spin 0.9s linear infinite;
}
/* Пока ИИ думает — белая крутилка 20 и подпись бледнее; блик не бежит. */
.loading .snack-go { cursor: default; color: rgba(255, 255, 255, .85); }
.loading .snack-go .spin { display: inline-block; }
.loading .snack-go::after { animation: none; background: none; }
/* Под кнопкой мелко (`labelSmall` 11/16): сбой серым, отказ по правилу оранжевым. */
.snack-note { margin: 0.375rem 0 0; font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
.snack-note.denied { color: var(--orange); }
/* Ответ — кремовая карточка: скругление 17, поля 14. */
.snack-card { margin-top: 0.875rem; padding: 0.875rem; border-radius: var(--radius-card); background: var(--bg); flex: none; }
.snack-title { display: block; font-size: 0.9375rem; line-height: 1.1875rem; font-weight: 700; color: var(--text); }
.snack-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.snack-meta .kcal { color: var(--calorie); font-weight: 600; }
.snack-meta .min { display: inline-flex; align-items: center; gap: 0.125rem; color: var(--text-muted); }
.snack-meta .min[hidden] { display: none; }
.snack-meta .min .ic { width: 0.8125rem; height: 0.8125rem; }
.snack-meta .mode { color: var(--green); font-weight: 600; }
.snack-ings { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.snack-ings li { display: flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text); }
.snack-ings .ic { width: 0.875rem; height: 0.875rem; flex: none; }
.snack-ings .have .ic { color: var(--green); }
.snack-ings .buy .ic { color: var(--orange); }
.snack-how { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }

/* ⚠️ «Потом» стало КНОПКОЙ формы (Н264-135): у кнопки есть своя рамка и фон браузера, и без
   сброса она выглядела бы не ссылкой, а серой плашкой. Грабля из «Находок»: у button.card
   рамка браузера тоже не сброшена — проверять живьём. */
.auth-guest-form { display: contents; }
button.auth-guest { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ===========================================================================
   «ПЛАН» КАК В ТЕЛЕФОНЕ — пачка В.2, журнал №280 (21.09.2026). Мерки — из `PlanScreen.kt`,
   сверяет `backend/apps/core/tests/test_v2_plan.py`. Строка текста не ниже букв Nunito:
   `line-height: <строка>; padding-block: calc((1.364em - <строка>) / 2)`.
   =========================================================================== */

/* Между всеми элементами экрана — 12, как `LazyColumn(spacedBy(12.dp))` телефона. */
.page-plan .card, .page-plan .promo { margin-bottom: 0.75rem; }

/* --- Шапка (Н266-238): цена 14/18 средним серым, в 4 под итогом дня. ⚠️ Не `.plan-price`: это имя
   занято ценой тарифа на «Подписке». --- */
.plan-cost {
    margin: 0.25rem 0 0;
    font-size: 0.875rem; line-height: 1.125rem; padding-block: calc((1.364em - 1.125rem) / 2);
    font-weight: 500; color: var(--text-muted);
}
/* После плашки и карточки (у них своё поле 12) лента не прибавляет своих 6. */
.promo + .plan-days, .card + .plan-days { margin-top: -0.375rem; }
/* «День N из M» — 12/16 средним серым, в 8 под плитками и в 12 над карточкой дня. */
.plan-day-of {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.75rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2);
    font-weight: 500; color: var(--text-muted);
}

/* --- Карточка «План на день» (Н266-102) — `DaySummary`: поля 12, всё столбиком через 7. --- */
.card.plan-day { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.4375rem; }
.plan-day .day-card-title { margin: 0; padding-block: calc((1.364em - 1.1875rem) / 2); }
.plan-day .day-kcal b { letter-spacing: 0; padding-block: calc((1.364em - 2.125rem) / 2); }
.plan-day .day-kcal span {
    padding-top: calc((1.364em - 1.25rem) / 2);
    padding-bottom: calc((1.364em - 1.25rem) / 2 + 0.125rem);
}
.plan-day .goal-btn .ic { width: 1.125rem; height: 1.125rem; }
/* «+N ккал» — оранжевая плашка телефона (`plan_over_target`): 11/16, поля 8/3, скругление 8. */
.over-badge {
    display: flex; width: fit-content;
    padding: 0.1875rem 0.5rem; border-radius: var(--radius-badge);
    background: var(--orange-container); color: var(--orange);
    font-size: 0.6875rem; line-height: 1rem; font-weight: 600;
}
/* Б/Ж/У — `labelLarge` 13/16 жирные, точка 7, промежуток 15. */
.plan-day .macro-dots { margin: 0; gap: 0.9375rem; font-size: 0.8125rem; line-height: 1rem; }
.plan-day .macro-dots span { padding-block: calc((1.364em - 1rem) / 2); }
.plan-day .meal-sep { margin: 0; }
/* «Весь день вне дома» 17/21, подпись 13/17 средним серым, до тумблера 8, ряд не ниже 48. */
.plan-day .out-row { gap: 0.5rem; min-height: 3rem; }
.plan-day .out-row b {
    display: block;
    font-size: 1.0625rem; line-height: 1.3125rem; padding-block: calc((1.364em - 1.3125rem) / 2);
}
.plan-day .out-row .sub {
    display: block;
    font-size: 0.8125rem; line-height: 1.0625rem; padding-block: calc((1.364em - 1.0625rem) / 2);
    font-weight: 500; color: var(--text-muted);
}

/* --- Три зелёные кнопки дня (Н266-101) — `PlanGreenButton`: 54, значок 19, 8, текст 15/18. --- */
.card.plan-actions { padding: 0.6875rem; }
.plan-green .ic { width: 1.1875rem; height: 1.1875rem; flex: none; }

/* --- Карточка блюда: общее у Главной и «Плана» (телефон одинаков на обоих экранах). --- */
.meal-card .meal-tag { font-size: 0.6875rem; line-height: 1rem; }    /* labelSmall 11/16 жирный */
.meal-card .meal-title { letter-spacing: 0; padding-block: calc((1.364em - 1.3125rem) / 2); }
.meal-card .meal-facts { font-weight: 500; }
.meal-card .meal-facts span { padding-block: calc((1.364em - 1.125rem) / 2); }
.meal-card .meal-portions {
    display: flex; width: fit-content;
    line-height: 1.125rem; padding-block: calc((1.364em - 1.125rem) / 2); font-weight: 500;
}
/* Состав — средним, не больше двух строк на Главной и трёх на «Плане» (`maxLines`, Н264-004). */
.meal-card .meal-ings {
    font-weight: 500; padding-block: calc((1.364em - 1.0625rem) / 2);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.replace-btn .ic { width: 1.1875rem; height: 1.1875rem; }

/* --- Карточка блюда «Плана» (Н266-103) — `PlanMealCard`: поля 11, фото 160, столбик через 8,
   тело через 5, факты через 10, кружки оценки 40 со значком 19, «Ем другое» 40 со значком 19. --- */
.meal-card.plan-meal { padding: 0.6875rem; }
.plan-meal .meal-photo-box, .plan-meal .meal-photo { width: 10rem; }
.plan-meal .meal-photo { height: 10rem; }
.plan-meal .meal-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3125rem; }
.plan-meal .meal-body > * { max-width: 100%; }
.plan-meal .meal-facts { margin-top: 0; gap: 0 0.625rem; }
.plan-meal .meal-portions { margin-top: 0; }
.plan-meal .meal-ings { margin: 0; -webkit-line-clamp: 3; }
.plan-meal .meal-sep { margin: 0.5rem 0; }
.plan-meal .react { width: 2.5rem; height: 2.5rem; }
.plan-meal .react .ic { width: 1.1875rem; height: 1.1875rem; }
.plan-meal .btn-panel { margin-top: 0.5rem; }
.plan-meal .btn-panel .ic { width: 1.1875rem; height: 1.1875rem; color: var(--green); }
/* Пропущенное и съеденное на «Плане» — верх приглушён до 0,5 (на Главной пропущенное 0,45). */
.plan-meal.skipped .meal-top, .plan-meal.eaten .meal-top { opacity: .5; }
/* Съеденное сегодня (Н266-108): зелёная галочка 15 справа от названия, отбивка 6. */
.meal-title.done { display: flex; align-items: center; gap: 0.375rem; }
.meal-title.done a { min-width: 0; }
.eaten-mark { width: 0.9375rem; height: 0.9375rem; color: var(--green); flex: none; }

/* --- Пропущенное блюдо (Н266-113) — плашка «Ем другое» оранжевая, 11/16, поля 6/2; строка
   «Вместо плана» 12/16; кнопки — таблетки `EatingOutChip` ≈32 (поля 8, текст 12, значок 15). --- */
.skip-badge {
    display: flex; width: fit-content;
    padding: 0.125rem 0.375rem; border-radius: var(--radius-badge);
    background: var(--orange-container); color: var(--calorie);
    font-size: 0.6875rem; line-height: 1rem; font-weight: 600;
}
.skip-note {
    margin: 0.5rem 0 0;
    font-size: 0.75rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2);
    font-weight: 500; color: var(--text-muted);
}
/* На Главной под плашкой 4, между «Вместо плана» и кнопками 6 (`HomeScreen.kt`, Н266-089); без заметки
   до кнопок 8 — общий отступ `.eat-out-row`. На «Плане» у карточки флекс-колонка с зазором 5 — там
   своя мерка, поэтому только `:not(.plan-meal)`, а общая `.skip-badge` отступа не носит. */
.meal-card:not(.plan-meal) .skip-badge { margin-bottom: 0.25rem; }
.meal-card:not(.plan-meal) .skip-note + .eat-out-row { margin-top: 0.375rem; }
.eat-chip {
    flex: 1; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: calc(0.5rem + (1.364em - 1rem) / 2) 0.5rem;
    border: 0; box-shadow: inset 0 0 0 0.0625rem var(--panel-border);
    border-radius: var(--radius-button);
    background: var(--panel-surface); color: var(--calorie);
    font-family: inherit; font-size: 0.75rem; line-height: 1rem; font-weight: 600;
    white-space: nowrap; cursor: pointer; text-decoration: none;
}
.eat-chip .ic { width: 0.9375rem; height: 0.9375rem; color: var(--text-muted); flex: none; }
.eat-chip.fill { background: var(--orange); box-shadow: none; color: #fff; }
.eat-chip.fill .ic { color: #fff; }

/* --- Пустой приём (Н266-237) — `MissingMealCard`: заголовок 16/24, пояснение 11/16 средним,
   кнопки 40 через 8, текст 13/16, значок 16, отбивка 7. --- */
.plan-meal.missing .meal-top:hover .meal-title { text-decoration: none; }
.plan-meal.missing .meal-title { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0; padding-block: 0; }
.plan-meal.missing .meal-ings {
    font-size: 0.6875rem; line-height: 1rem; padding-block: 0;
    display: block; -webkit-line-clamp: unset; overflow: visible;
}
.missing-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.missing-actions form { margin: 0; }
.missing-actions .replace-btn, .missing-actions .btn-panel {
    width: 100%; margin-top: 0; font-size: 0.8125rem; gap: 0.4375rem;
}
.missing-actions .ic { width: 1rem; height: 1rem; }
.missing-actions .btn-panel .ic { color: var(--green); }

/* --- День за концом плана (Н264-013) — `PlanNotGeneratedCard`: поля 24, всё по центру. --- */
.card.plan-not-gen { padding: 1.5rem; text-align: center; display: flex; flex-direction: column; }
.plan-not-gen b {
    font-size: 0.9375rem; line-height: 1.1875rem; padding-block: calc((1.364em - 1.1875rem) / 2);
    font-weight: 700;
}
.plan-not-gen p { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
.plan-not-gen .shimmer-btn, .plan-not-gen .btn { margin-top: 1rem; }

/* --- Плана нет (Н266-114): серая строка `home_empty` 16/24 в 36 под заголовком. --- */
.plan-empty { margin: 2.25rem 0 0; font-size: 1rem; line-height: 1.5rem; color: var(--text-muted); }

/* --- Окна «Плана» на `.modal-confirm` (= `AppDialog`): содержимое через 13. --- */
.modal-confirm .dlg-lead { margin: 0 0 0.625rem; }      /* «Цель»: текст → 10 → поле */
.modal-confirm .swap-hint { margin: 0 0 0.5rem; }       /* «Поменять местами»: подсказка → 8 → список */
.modal-confirm .field-hint { margin: 0; }
.dlg-text { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text); }
/* Список блюд дня в окнах «Поменять местами» (до 330) и «Убрать приём» (до 300): строка с полями
   8/10, приём 12/16 зелёным, название 14/20 в одну строку, выбранная — светло-зелёная с галочкой 18. */
.swap-list { display: flex; flex-direction: column; max-height: 20.625rem; overflow-y: auto; }
.swap-list.rm-list { max-height: 18.75rem; }
.swap-list .modal-sep { flex: none; }
.swap-row {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.625rem 0.5rem; border: 0; border-radius: var(--radius-inner);
    background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.swap-row.on, .swap-row:has(input:checked) { background: var(--green-container); }
.swap-row .grow { min-width: 0; }
.swap-type {
    display: block; font-size: 0.75rem; line-height: 1rem; padding-block: calc((1.364em - 1rem) / 2);
    font-weight: 600; color: var(--green-accent);
}
.swap-title {
    display: block; font-size: 0.875rem; line-height: 1.25rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.swap-check { display: none; width: 1.125rem; height: 1.125rem; color: var(--green); flex: none; }
.swap-row.on .swap-check, .swap-row:has(input:checked) .swap-check { display: block; }
/* Пояснение «Откуда убрать» — 11/16 серым, меняется с выбором. */
.rm-note { margin: 0; font-size: 0.6875rem; line-height: 1rem; font-weight: 500; color: var(--text-muted); }
/* Таблетки окон — `AppChip` (37, текст 13/15), каждая своей строкой. */
.plan-chip { align-self: flex-start; }
.plan-chip > span { font-size: 0.8125rem; line-height: 0.9375rem; }
/* «Поменять время» — строки дня: приём 14/20, время 15/19 жирным зелёным, 6, часы 16 серым,
   черта после каждой строки. */
.times-list { display: flex; flex-direction: column; max-height: 20.625rem; overflow-y: auto; }
.time-row {
    display: flex; align-items: center; width: 100%;
    padding: 0.625rem 0; border: 0; border-bottom: 0.0625rem solid var(--divider);
    background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.time-row .grow { font-size: 0.875rem; line-height: 1.25rem; }
.time-row b {
    font-size: 0.9375rem; line-height: 1.1875rem; padding-block: calc((1.364em - 1.1875rem) / 2);
    font-weight: 700; color: var(--green-accent);
}
.time-row .ic { width: 1rem; height: 1rem; margin-left: 0.375rem; color: var(--text-muted); flex: none; }
/* «Добавить … в план» — содержимое через 10 (до 330), время кнопкой-контуром 38 со значком 15. */
.add-body { display: flex; flex-direction: column; gap: 0.625rem; max-height: 20.625rem; overflow-y: auto; }
.add-time-row { display: flex; align-items: center; gap: 0.5rem; }
.pill-outline.add-time {
    width: auto; height: 2.375rem; flex: none;
    display: inline-flex; align-items: center; gap: 0.375rem;
}
.add-time .ic { width: 0.9375rem; height: 0.9375rem; }
.add-days { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.add-days[hidden] { display: none; }

/* --- Колесо времени — `MealTimePickerDialog`: по бокам 19, поля 20, скругление 19, без рамки. --- */
.modal.modal-wheel {
    width: min(23.3125rem, calc(100vw - 2.375rem)); max-height: none;
    padding: 1.25rem; border: 0; border-radius: 1.1875rem;
    background: var(--surface); overflow: visible;
}
.wheel-title {
    display: block; font-size: 1.1875rem; line-height: 1.4375rem;
    padding-block: calc((1.364em - 1.4375rem) / 2); font-weight: 700; color: var(--text);
}
.wheel-now {
    display: flex; align-items: center; gap: 0.5625rem; margin-top: 0.8125rem;
    padding: 0.625rem 0.75rem; border-radius: var(--radius-inner); background: var(--green-container);
}
.wheel-now .ic { width: 1.0625rem; height: 1.0625rem; color: var(--green-accent); flex: none; }
.wheel-now .grow { font-size: 0.8125rem; color: var(--text-muted); }
.wheel-now b { font-size: 1.1875rem; font-weight: 800; color: var(--green-accent); }
.wheel-cols { display: flex; gap: 0.6875rem; margin-top: 0.8125rem; }
.wheel-col { flex: 1; min-width: 0; }
.wheel-cap { display: block; padding: 0 0 0.3125rem 0.25rem; font-size: 0.6875rem; color: var(--hint-text); }
.wheel {
    position: relative; height: 11.25rem; overflow: hidden;
    border-radius: var(--radius-inner); background: var(--panel-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--panel-border);
}
.wheel-band {
    position: absolute; left: 0.5rem; right: 0.5rem; top: 4.5rem; height: 2.25rem;
    border-radius: 999px; background: var(--green-container);
    box-shadow: inset 0 0 0 0.0625rem rgba(67, 160, 71, .45);
}
.wheel-list {
    position: relative; height: 100%; overflow-y: auto; padding: 4.5rem 0;
    scroll-snap-type: y mandatory; scrollbar-width: none;
}
.wheel-list::-webkit-scrollbar { display: none; }
.wheel-list span {
    display: flex; align-items: center; justify-content: center; height: 2.25rem;
    scroll-snap-align: center; cursor: pointer;
    font-size: 1rem; font-weight: 500; color: var(--text-muted);
}
.wheel-list span.on { font-size: 1.25rem; font-weight: 800; color: var(--green-accent); }
.wheel-foot { display: flex; align-items: center; margin-top: 0.875rem; }
.wheel-hint { flex: 1; font-size: 0.6875rem; line-height: 0.875rem; color: var(--hint-text); }
.text-btn.wheel-cancel { padding: 0 0.625rem; font-size: 0.9375rem; }
.shimmer-btn.wheel-save {
    width: 8.5rem; height: 3rem; margin-left: 0.375rem; padding: 0;
    border-radius: 0.8125rem; font-size: 0.9375rem; font-weight: 800;
}

/* Абзацы внутри текста окна — без полей браузера: промежуток задаёт столбик (10). */
.alert-text > p { margin: 0; }
/* Окна «Плана» высотой по экрану, как `Dialog` телефона: общий потолок окна сайта (560) прятал
   «Убрать» и «Отмена» под прокрутку. Длинные списки листаются внутри (до 300 и 330). */
.page-plan .modal.modal-confirm { max-height: calc(100dvh - 2rem); }

/* ---------------------------------------------------------------------------
   ГЛАВНАЯ, ПАЧКА 2 (В.7, 24.09.2026) — пустые состояния и край ленты дней.
   --------------------------------------------------------------------------- */
/* День без блюд (Н266-086) — `NotGeneratedCard` Главной телефона: значок календаря 40 серым, через 12
   заголовок, через 6 пояснение; рамка, поля 24, центр и кнопка — общие с «Планом» (`.plan-not-gen`). */
.home-not-gen > .ic { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.75rem; color: var(--text-muted); }
.home-not-gen p { margin-top: 0.375rem; }
/* Плана нет (Н266-086) — `EmptyPlanCard`: рамка, поля 24, строка `home_empty` 16/24 серым. */
.card.home-empty { padding: 1.5rem; }
.home-empty p { margin: 0; font-size: 1rem; line-height: 1.5rem; color: var(--text-muted); }
/* Край ленты дней Главной (Н266-096): выключенная стрелка телефона просто серая (`TextMuted`),
   без бледности — `.stub` дневника остаётся прежним. */
.plan-head .day-nav span.stub.edge { opacity: 1; }