/* KULIKADO-FILE | rev 33 | 2026-08-23 | rev24: +модификаторы иконок .icon.success (зелёный --color-success, семантика like) и .icon.cur (color:inherit — иконки в кнопках/оверлеях наследуют цвет контейнера); +токен --color-success:#669900 (:root, фикс). rev23: система иконок под тему (Фаза1) — .icon получил дефолтный цвет var(--color-primary) (тема) + модификаторы .icon.muted (серый text-secondary), .icon.danger (красный error), .icon.warn (оранж secondary). Механизм маски (background:currentColor + mask:var(--i)) уже был. rev22 Пункт4 темы: убрана пометка ЗАГЛУШКА у sport/longevity (палитры утв.Роландом как рабочие, доработка цветов позже). УНИФИКАЦИЯ фона страницы: --color-bg-page #F5F5F3→#F9F9F9 (значение planning, реш.Роланда «один стандарт»); body хардкод #f9f9f9→var(--color-bg-page). Теперь ВСЕ поля через один токен=#f9f9f9. Страницы на токене (profile/gifts-send/subscriptions) стали #f9f9f9=planning. ФИКС: легаси .btn (inline-block без text-align) — текст уезжал влево на full-width кнопках (напр. «Написать через форму» через .con-btn width:100%). +text-align:center → чинит все full-width легаси-кнопки, инлайн-безвредно. Библиотека ТЕНИ/РАМКА (хвост, реш.B): box-shadow→--shadow-* (.card→md, .tgl-t→sm, .modal-d+.modal-card→modal, .sheet→новый --shadow-sheet точная); .card border #e8e8e8→border-light. Микро-сдвиг прозрачности теней (незаметно). line-height1.1/fs7px оставлены (реш.A). Библиотека КОНТРОЛЫ (.tgl тогл/.kring-v кольцо КБЖУ/.pbar прогресс): hardcode→токены (tgl-t 50%→radius-round,#fff→bg-card,transition-base; kring-v fs-11/font-weight-bold; kring-v small font-weight-medium; pbar radius 3px→radius-sm клампится). Оставлены tgl radius12/line-height1.1/fs7px (нет токенов), тени rgba. Модульные тоглы на токенах. Нулевой сдвиг. Библиотека МОДАЛКИ/ШТОРКИ (.modal-d/.sheet/.modal-ov-набор): hardcode→токены (fs-18/17/14/24, font-weight-bold, line-height-none/base, gap-loose). Тени/оверлей rgba оставлены (отдельно). Модульные modal-* (planning/settings) уже на токенах. Нулевой сдвиг. Библиотека КАРТОЧКИ .card/.dish-img/n/m/.info-box: hardcode→токены (bg-card/radius-card/radius-btn/fs-24/fs-14/font-weight-semibold/gap-loose/fs-11). Грей #e8e8e8 в .card оставлен (нет точного токена, ~#E6E6E6). planning .dish (своя богатая карточка) уже на токенах. Нулевой сдвиг. Библиотека ЧИПЫ .chip/.chip-act: hardcode→токены (font-size 12→fs-12, font-weight 500→font-weight-medium, chip-act #fff→text-on-primary). .tag (серый лейбл, только админка) НЕ тронут. Нулевой сдвиг. Библиотека ПОЛЯ .inp/.err-m: hardcode→токены (font-size 14→fs-14, transition .15s→transition-fast, err-m 10→fs-10). Легаси input-стилей нет (один набор). Модули используют .inp; их .picker-input/.srch — свои/на токенах. Нулевой сдвиг. Библиотека КНОПКИ (легаси .btn/.btn-primary/cta/secondary): hardcode→токены (radius-btn/fs-16/font-weight-medium/text-on-primary/bg-card). Легаси ОСТАВЛЕН как инлайн/парный вариант (footer-промпты, hero, пары) — форма отлична от нового набора, миграция сломала бы раскладку в ряд. Нулевой сдвиг (transition 0.3s/padding 12-20 оставлены). Библиотека компонентов КНОПКИ (новый набор .btn-p/c/o/s): hardcode→токены (fs-16/font-weight-medium/text-on-primary/transition-fast) + завёл --btn-height(48)/--btn-pad-x(28). Нулевой сдвиг. Легаси .btn-primary/cta/secondary — отдельным шагом. Аспект spacing (вар.B, 5 токенов): +--space-container(20/15)/--space-section(40)/--gap-tight6/gap-row8/gap-loose10. .container padding + брейк-ауты через calc(--space-container) → фикс класса бага прокрутки. Аспект font-size ВАР.A (сохранить всё, реш. Роланда — читаемость): 16 токенов --fs-8..--fs-30 (1:1 по значению, БЕЗ слияний, нулевой сдвиг) вместо неиспользуемых h1..small. Аспект line-height: +none(1)/snug(1.4)/relaxed(1.6) к tight/base/loose; консолидация 10 значений→6 (1.15→tight, 1.35/1.44→snug, 1.55→base). Аспект радиусы: +--radius-sm 6px (слил 3&6) +--radius-round 50% (круги); 8px→radius-btn, 999px→radius-chip. Шаг0 системы тем: +семантические токены в :root (шрифт-веса/размеры/heading, тени shadow-*, рамки border-width/style, переходы transition-*, декор-слоты=none, radius-input, color-text-on-primary, min-width); значения=текущие→вид не меняется. rev5 +общие .modal-* (modal-ov/card/x/title/sub/actions) на токенах — для PWA-модалок в footer.php (установка/уведомления) на всех страницах; раньше .modal-* были только локально в planning. | rev4: ШКАЛА СЛОЁВ z-index (--z-panel/chrome/chrome-menu/overlay/modal/toast/gate); модалки 2000 ВЫШЕ футера 1000 (был баг: футер перекрывал модалки, кнопки нижнего меню оставались кликабельными) | rev5: убран мёртвый @font-face Manrope (файла не было → 404 в консоли; вид не менялся — везде системный шрифт)  rev25: шкала --fs-* → 10 ступеней (8/10/12/14/16/18/20/24/28/30); 61 хардкод-px переведён на var(--fs-*); снап 13→14,15→16 и т.п.; убранные ступени = deprecated-алиасы (для PHP до миграции); внесистемные 7/26/40/44 не тронуты.  rev26: +13 семантических токенов --t-* (подход C, слой поверх --fs-*); UP-изменения по ролям: .err-m 10→12, .dish-n/.modal-d p/.empty .e-d/.bs-rs h3 14→16 (веса не тронуты — изолируем тест увеличения). Тест «насколько поедет при увеличении».  rev27: правило мин-размера — основной блок (чипсы/настройки/дропдауны/интерактив/заголовки таблиц) от 12: .chain-btn .cn 10→12, .sched th 10→12. Второстепенное (7px кольцо) оставлено.  rev28: чипсы и заголовки раскрывающихся списков +1 ступень: .chip 12→14 (--t-secondary), .exp-h/.dept-hd 14→16 (--t-name).  rev29: +шкала отступов --sp-* (4/8/12/14/16/20/24/32) + 9 семантических токенов (label 8/chip 12/control 14/card 16/card-lg 20/field 16/block 20/section 24/title 20). Только определение, миграция дальше.  rev30: миграция ядра на токены отступов — .dish padding 12→var(--sp-card) (16, карточки блюд просторнее); .chip padding→5px var(--sp-chip) (без изм); .cat-tile→var(--sp-control) var(--sp-8) (без изм). rev31: шрифты — --font→свободный стек (system-ui,'Roboto','PT Sans',sans-serif; убраны Segoe UI/-apple-system), font-family body→var(--font). rev32: фикс горизонтальной прокрутки плиток категорий (pantry «Добавить продукт»): .cat-grid repeat(3,1fr)→repeat(3,minmax(0,1fr)) (колонки влезают в экран); .cat-tile +min-width:0 +overflow-wrap:break-word (длинные слова переносятся). rev33: +.e-hint (подсказка в пустой кладовой: светло-зелёный фон --color-primary-bg + зелёная левая рамка --color-primary). */
/* =============================================================================
   KULIKADO styles.css
   Слой 1: токены (палитра + семантика) и темы.  Тема по умолчанию = «семья».
   Старые классы перекрашены на токены (форма/шрифт/серые не тронуты).
   Библиотека новых компонентов добавляется ниже (этап 2).
============================================================================= */


/* ── ТОКЕНЫ (тема «семья», утверждённая палитра) ── */
:root{
  /* палитра — фиксированные бренд-значения */
  --green-500:#669900; --green-700:#3C5C00; --green-300:#A2C266; --green-100:#DFEBCC;
  --orange-500:#FA6F00; --orange-100:#FEE2CC;
  --gray-900:#1A1A1A; --gray-800:#333333; --gray-700:#4D4D4D; --gray-500:#808080;
  --gray-300:#B3B3B3; --gray-200:#CCCCCC; --gray-100:#E6E6E6; --white:#FFFFFF;
  /* семантические токены — НА НИХ ссылаются компоненты; темы переопределяют ИХ */
  --color-primary:#669900; --color-primary-dark:#3C5C00; --color-primary-light:#A2C266; --color-success:#669900;
  --color-primary-bg:#DFEBCC; --color-primary-pressed:#506D1A;
  --color-secondary:#FA6F00; --color-secondary-dark:#C75900; --color-secondary-bg:#FEE2CC;
  --color-info:#2196F3; --color-info-dark:#1976D2; --color-info-bg:#E3F2FD;
  --color-text-primary:#1A1A1A; --color-text-secondary:#808080; --color-border-light:#E6E6E6; --color-border:#CCCCCC;
  --color-bg-page:#F9F9F9; --color-bg-card:#FFFFFF; --color-disabled:#C7C7C7;
  --color-error:#D11D1D; --color-error-border:#D42828; --color-error-bg:#FDE2E2;
  --color-toast-success:#4CAF50; --color-toast-error:#F44336;
  --color-store-lenta:#0D3578; --color-store-magnit:#C41428; --color-store-metro:#104888; --color-store-pyaterochka:#DA1A18;
  /* шрифт, радиусы, отступы, макет */
  --font:system-ui,'Roboto','PT Sans',sans-serif; /* системный шрифт (Manrope убран — файла не было, вид не менялся) */
  --radius-btn:8px; --radius-card:12px; --radius-chip:999px; --radius-sheet:16px; --radius-sm:6px; --radius-round:50%;
  --spacing-xs:8px; --spacing-sm:16px; --spacing-md:24px; --spacing-lg:32px; --spacing-xl:48px;
  --max-width:430px; --header-height:64px; --footer-height:60px;

  /* ── ДОБАВЛЕНО (Шаг 0 системы тем): недостающие семантические токены.
     Значения = текущие фактические (код / DESIGN_SYSTEM) → вид НЕ меняется:
     пока на эти токены никто не ссылается. Ссылки проставляются помодульно
     (Шаги 1..N); тогда же значение токена сверяется с фактическим инлайном модуля. ── */
  /* цвет / радиус / макет — доотсутствовавшие */
  --color-text-on-primary:#FFFFFF;                 /* текст на зелёном (кнопки/хедер) */
  --radius-input:8px;                              /* поля ввода (в коде = radius-btn; отделено под темы) */
  --min-width:320px;                               /* нижняя граница main-wrapper */

  /* типографика */
  --font-heading:var(--font);                      /* заголовки: сейчас = базовый системный; тема задаст свой */
  --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700;
  /* Шкала размеров шрифта — 10 ступеней (число = px). Единый источник правды. */
  --fs-8:8px; --fs-10:10px; --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-28:28px; --fs-30:30px;
  /* deprecated-алиасы: снап убранных ступеней на шкалу (удалить после миграции PHP) */
  --fs-9:var(--fs-10); --fs-11:var(--fs-12); --fs-13:var(--fs-14); --fs-15:var(--fs-16); --fs-17:var(--fs-18); --fs-22:var(--fs-24);
  /* Семантические токены типографики (роль → размер из шкалы --fs-*). Подход C: слой поверх примитива. */
  --t-page-title:var(--fs-24); --t-appbar:var(--fs-20); --t-section:var(--fs-18);
  --t-body:var(--fs-16); --t-name:var(--fs-16); --t-label:var(--fs-14); --t-secondary:var(--fs-14);
  --t-caption:var(--fs-12); --t-caption-strong:var(--fs-12); --t-micro:var(--fs-10);
  --t-button:var(--fs-16); --t-nav:var(--fs-12); --t-nav-active:var(--fs-12);
  --line-height-none:1; --line-height-tight:1.2; --line-height-snug:1.4; --line-height-base:1.5; --line-height-relaxed:1.6; --line-height-loose:1.7;
  --space-container:20px; --space-section:40px; --gap-tight:6px; --gap-row:8px; --gap-loose:10px;
  --btn-height:48px; --btn-pad-x:28px;
  /* Шкала отступов — 4px-based (число = px). */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-14:14px; --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px;
  /* Семантические токены отступов (роль → шкала). Подход как у типографики. --sp-block резерв 24. */
  --sp-label:var(--sp-8); --sp-chip:var(--sp-12); --sp-control:var(--sp-14); --sp-card:var(--sp-16); --sp-card-lg:var(--sp-20);
  --sp-field:var(--sp-16); --sp-block:var(--sp-20); --sp-section:var(--sp-24); --sp-title:var(--sp-20);

  /* тени (пока захардкожены в инлайне — при миграции сверять значения помодульно) */
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 12px rgba(0,0,0,.12);
  --shadow-lg:0 12px 40px rgba(0,0,0,.25);
  --shadow-modal:0 8px 32px rgba(0,0,0,.2);
  --shadow-banner:0 4px 12px rgba(0,0,0,.3); --shadow-sheet:0 -4px 24px rgba(0,0,0,.1);

  /* рамки (тема может захотеть 2px / иной стиль) */
  --border-width:1px; --border-style:solid;

  /* переходы (пока захардкожены в инлайне) */
  --transition-fast:.15s; --transition-base:.2s; --transition-slow:.4s;

  /* декор-слоты под визуал тем — сейчас none → вид не меняется; наполним на Шаге L */
  --bg-pattern:none; --card-accent:none; --header-decor:none;

  /* ── ШКАЛА СЛОЁВ (z-index) — единая для всего приложения ──
     Раньше значения были вразнобой (60…1000), и футер (1000) перекрывал модалки:
     кнопки нижнего меню оставались кликабельными поверх открытого окна.
     Правило: модалка ВСЕГДА выше шапки и футера; тост — выше модалки. */
  --z-panel:90;       /* панели над контентом, но под шапкой/футером (кнопка «Утвердить меню») */
  --z-chrome:1000;    /* шапка и футер */
  --z-chrome-menu:1100;/* выпадающее меню шапки */
  --z-overlay:1500;   /* полноэкранные экраны (просмотр рецепта) */
  --z-modal:2000;     /* ВСЕ модальные окна — перекрывают футер */
  --z-toast:3000;     /* всплывающие уведомления — видны поверх модалки */
  --z-gate:9000;      /* экран загрузки/ошибки — поверх всего */
}

/* ── ТЕМА «спорт-фитнес» (палитра утв., доработка цветов позже) ── */
[data-theme="sport"]{
  --color-primary:#1E6FE0; --color-primary-dark:#124A99; --color-primary-light:#7FB0F2;
  --color-primary-bg:#DCE9FB; --color-primary-pressed:#1657B3;
  --color-secondary:#FF7A1A; --color-secondary-dark:#CC5E00; --color-secondary-bg:#FFE6D1;
  --color-info:#00B8D4; --color-info-dark:#0091A7; --color-info-bg:#D0F4FA;
}

/* ── ТЕМА «долголетие» (палитра утв., доработка цветов позже) ── */
[data-theme="longevity"]{
  --color-primary:#2E8B7F; --color-primary-dark:#1F5F57; --color-primary-light:#8FC4BC;
  --color-primary-bg:#D6ECE8; --color-primary-pressed:#256F65;
  --color-secondary:#B5762E; --color-secondary-dark:#8A5A22; --color-secondary-bg:#F0E2CE;
  --color-info:#5C7CFA; --color-info-dark:#4263EB; --color-info-bg:#DBE4FF;
}

/* =============================================================================
   БАЗОВЫЕ НАСТРОЙКИ И СБРОС СТИЛЕЙ
============================================================================= */

/* Сброс стилей для всех элементов */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Базовые настройки body */
body {
    font-family: var(--font);
    background-color: var(--color-bg-page); /* Светло-фоновый согласно палитре */
    color: #424242; /* Графитовый - основной цвет текста */
    line-height: 1.6;
    min-height: 100vh;
}

/* =============================================================================
   МАКЕТ И КОНТЕЙНЕРЫ
============================================================================= */

/* Основная обертка приложения - мобильное приложение с ограничением ширины */
.main-wrapper {
    width: 100%;
    max-width: 430px; /* Максимальная ширина для современных телефонов */
    min-width: 320px; /* Минимальная поддерживаемая ширина */
    margin: 0 auto; /* Центрирование на десктопах */
    background: white; /* Чистый белый фон контента */
    min-height: 100vh;
    position: relative;
}

/* Основной контейнер контента */
.container {
    padding: var(--space-container);
    padding-bottom: 130px; /* Отступ снизу для футера */
}

/* Секции контента с отступами */
.section {
    margin-bottom: var(--space-section);
}

/* =============================================================================
   ТИПОГРАФИКА
============================================================================= */

/* Заголовки первого уровня - основные заголовки страниц */
h1 {
    color: #424242; /* Графитовый */
    font-size:var(--fs-28);
    font-weight: 700; /* Bold согласно руководству */
    line-height: 1.2;
    margin-bottom: 20px;
}

/* Заголовки второго уровня - заголовки разделов */
h2 {
    color: #424242; /* Графитовый */
    font-size:var(--fs-24);
    font-weight: 600; /* SemiBold согласно руководству */
    line-height: 1.3;
    margin-bottom: 16px;
}

/* Заголовки третьего уровня - подзаголовки */
h3 {
    color: #424242; /* Графитовый */
    font-size:var(--fs-20);
    font-weight: 600; /* SemiBold */
    line-height: 1.3;
    margin-bottom: 14px;
}

/* Заголовки четвертого уровня */
h4 {
    color: #424242; /* Графитовый */
    font-size:var(--fs-18);
    font-weight: 500; /* Medium */
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Заголовки пятого и шестого уровня */
h5,
h6 {
    color: #424242; /* Графитовый */
    font-size:var(--fs-16);
    font-weight: 500; /* Medium */
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Основной текст параграфов */
p {
    color: #424242; /* Графитовый - основной цвет текста */
    font-size:var(--fs-16);
    font-weight: 400; /* Regular согласно руководству */
    margin-bottom: 16px;
}

/* Второстепенный текст - подписи, мелкие детали */
.secondary-text {
    color: #9e9e9e; /* Средне-серый согласно палитре */
    font-size:var(--fs-14);
    font-weight: 400; /* Regular */
}

/* Акцентный текст - важные выделения */
.accent-text {
    color: var(--color-primary); /* Освежающий зеленый - фирменный цвет */
    font-weight: 500; /* Medium согласно руководству */
}

/* Ссылки - используем фирменный зеленый цвет */
a {
    color: var(--color-primary); /* Освежающий зеленый */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-pressed); /* Более темный оттенок зеленого для hover */
}

/* =============================================================================
   СПИСКИ
============================================================================= */

/* Маркированные и нумерованные списки */
ul,
ol {
    margin-bottom: 16px;
    padding-left: 20px;
}

/* Элементы списков */
li {
    color: #424242; /* Графитовый */
    margin-bottom: 8px;
}

/* =============================================================================
   ЦИТАТЫ И ВЫДЕЛЕННЫЕ БЛОКИ
============================================================================= */

/* Блоки цитат */
blockquote {
    border-left: 4px solid var(--color-primary); /* Зеленая полоска слева */
    padding-left: 16px;
    margin: 20px 0;
    font-style: italic;
    color: #424242; /* Графитовый */
    background-color: #f9f9f9; /* Светло-фоновый */
    padding: 16px;
    border-radius: 8px;
}

/* Выделенные информационные блоки - советы, подсказки */
.highlight-box {
    background-color: var(--color-primary-bg); /* Светло-зеленый фон */
    border: 1px solid var(--color-primary); /* Зеленая рамка */
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

/* Предупреждающие блоки */
.warning-box {
    background-color: var(--color-secondary-bg); /* Светло-оранжевый фон */
    border: 1px solid var(--color-secondary); /* Оранжевая рамка */
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

/* =============================================================================
   КОМПОНЕНТЫ - КНОПКИ
============================================================================= */

/* Базовые стили для всех кнопок */
.btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: var(--radius-btn); /* Скругление согласно руководству */
    font-size: var(--fs-16);
    font-weight: var(--font-weight-medium); /* Medium для текста кнопок */
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: center;
}

/* Основные кнопки действия - зеленые */
.btn-primary {
    background-color: var(--color-primary); /* Освежающий зеленый */
    color: var(--color-text-on-primary); /* Белый текст на зеленом фоне */
}

.btn-primary:hover {
    background-color: var(--color-primary-pressed); /* Более темный зеленый при наведении */
    color: var(--color-text-on-primary);
}

/* Кнопки вызова к действию - оранжевые для привлечения внимания */
.btn-cta {
    background-color: var(--color-secondary); /* Энергичный оранжевый */
    color: var(--color-text-on-primary); /* Белый текст на оранжевом фоне */
}

.btn-cta:hover {
    background-color: var(--color-secondary-dark); /* Более темный оранжевый при наведении */
    color: var(--color-text-on-primary);
}

/* Второстепенные кнопки - обводка без заливки */
.btn-secondary {
    background-color: var(--color-bg-card); /* Белый фон */
    color: var(--color-primary); /* Зеленый текст */
    border: 1px solid var(--color-primary); /* Зеленая рамка */
}

.btn-secondary:hover {
    background-color: var(--color-primary); /* Зеленый фон при наведении */
    color: var(--color-text-on-primary); /* Белый текст при наведении */
}

/* =============================================================================
   КОМПОНЕНТЫ - КАРТОЧКИ
============================================================================= */

/* Карточки контента - основные блоки информации */
.card {
    background: var(--color-bg-card); /* Чистый белый фон */
    border: 1px solid var(--color-border-light); /* Светло-серая рамка */
    border-radius: var(--radius-card); /* Скругление согласно руководству */
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md); /* Легкая тень */
}

/* Заголовки карточек */
.card-title {
    color: #424242; /* Графитовый */
    font-size:var(--fs-18);
    font-weight: 600; /* SemiBold */
    margin-bottom: 12px;
}

/* Текст внутри карточек */
.card-text {
    color: #424242; /* Графитовый */
    margin-bottom: 0;
}

/* =============================================================================
   КОМПОНЕНТЫ - РАЗДЕЛИТЕЛИ И ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ
============================================================================= */

/* Горизонтальные разделители между секциями */
.divider {
    height: 2px;
    background-color: var(--color-primary); /* Зеленый разделитель */
    margin: 30px 0;
    border-radius: 1px;
}

/* =============================================================================
   КОМПОНЕНТЫ - ТЕГИ И МЕТКИ
============================================================================= */

/* Теги для категорий, фильтров и меток */
.tag {
    display: inline-block;
    background-color: #e8e8e8; /* Светло-серый фон по умолчанию */
    color: #424242; /* Графитовый текст */
    padding: 4px 8px;
    border-radius: 4px;
    font-size:var(--fs-12);
    margin-right: 8px;
    margin-bottom: 4px;
}

/* Активные теги - выделенные зеленым */
.tag.active {
    background-color: var(--color-primary); /* Зеленый фон для активного тега */
    color: white; /* Белый текст на зеленом фоне */
}

/* =============================================================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
============================================================================= */

/* Стили для узких экранов - до 430px */
@media (max-width: 430px) {
    /* Убираем скругления на мобильных для полноэкранного вида */
    .main-wrapper {
        border-radius: 0;
    }

    /* Уменьшаем отступы в контейнере на мобильных */
    :root { --space-container: 15px; } /* мобильный инсет; брейк-ауты через calc авто-совпадают; padding-bottom наследуется из базового .container */

    /* Уменьшаем размеры заголовков на мобильных */
    h1 {
        font-size:var(--fs-24);
    }

    h2 {
        font-size:var(--fs-20);
    }
}


/* ═══════════════════════════════════════════════════════════════════
   БИБЛИОТЕКА КОМПОНЕНТОВ (для НОВЫХ модулей) — на семантических токенах.
   Кнопки нового набора .btn-p/.btn-c/.btn-o/.btn-s — самодостаточные,
   НЕ конфликтуют со старым .btn/.btn-cta (выше). Темы меняют var(--c-*).
═══════════════════════════════════════════════════════════════════ */

/* — Кнопки (новый набор) — */
.btn-p,.btn-c,.btn-o,.btn-s{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-height);padding:0 var(--btn-pad-x);border-radius:var(--radius-btn);font-family:var(--font);font-size:var(--fs-16);font-weight:var(--font-weight-medium);cursor:pointer;border:none;transition:all var(--transition-fast);width:100%}
.btn-p{background:var(--color-primary);color:var(--color-text-on-primary)}
.btn-p:hover{background:var(--color-primary-pressed)}
.btn-c{background:var(--color-secondary);color:var(--color-text-on-primary)}
.btn-c:hover{background:var(--color-secondary-dark)}
.btn-o{background:var(--color-bg-card);color:var(--color-primary);border:1.5px solid var(--color-primary)}
.btn-o:hover{background:var(--color-primary-bg)}
.btn-s{background:var(--color-bg-card);color:var(--color-text-primary);border:1.5px solid var(--color-text-secondary)}
.btn-p[disabled],.btn-c[disabled],.btn-o[disabled],.btn-s[disabled]{background:var(--color-disabled);color:var(--color-text-on-primary);border-color:var(--color-disabled);cursor:not-allowed}

/* — Поля ввода — */
.inp{width:100%;height:48px;border-radius:var(--radius-btn);border:1px solid var(--color-border);padding:0 16px;font-size:var(--fs-14);font-family:var(--font);color:var(--color-text-primary);background:var(--color-bg-card);outline:none;transition:border-color var(--transition-fast),background var(--transition-fast)}
.inp::placeholder{color:var(--color-text-secondary)}
.inp-a{border-color:var(--color-primary)}
.inp-s{border-color:var(--color-primary);background:var(--color-primary-bg)}
.inp-e{border-color:var(--color-error-border);background:var(--color-error-bg)}
.err-m{font-size:var(--t-caption);color:var(--color-error);margin-top:5px;display:flex;align-items:center;gap:4px}

/* — Контролы — */
.chk,.rdo{width:22px;height:22px;border-radius:5px;border:1.5px solid var(--color-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.rdo{border-radius:50%}
.chk.on,.rdo.on{border-color:var(--color-primary);color:var(--color-primary)}
.chk.fill,.rdo.fill{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.cr{display:flex;align-items:center;gap:10px;font-size:var(--fs-14)}
.tgl{width:44px;height:24px;border-radius:12px;position:relative;cursor:pointer;transition:background var(--transition-base)}
.tgl.on{background:var(--color-primary)}.tgl.off{background:var(--color-border)}
.tgl-t{width:20px;height:20px;border-radius:var(--radius-round);background:var(--color-bg-card);position:absolute;top:2px;transition:left var(--transition-base);box-shadow:var(--shadow-sm)}
.tgl.on .tgl-t{left:22px}.tgl.off .tgl-t{left:2px}
.stp{display:inline-flex;align-items:center;gap:14px}
.stp-b{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--color-primary);background:var(--color-bg-card);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:var(--fs-18);cursor:pointer}
.stp-v{font-size:var(--fs-16);font-weight:600;min-width:56px;text-align:center}

/* — Чипы — */
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px var(--sp-chip);border-radius:var(--radius-chip);font-size:var(--t-secondary);font-weight:var(--font-weight-medium);border:1.5px solid var(--color-border);background:var(--color-bg-card);cursor:pointer}
.chip-sel{border-color:var(--color-primary);border-width:2px}
.chip-dan{border-color:var(--color-error-border);background:var(--color-error-bg)}
.chip-act{background:var(--color-primary);color:var(--color-text-on-primary);border-color:var(--color-primary)}
.chip-info{background:var(--color-border-light);border-color:var(--color-border-light);color:var(--color-text-secondary)}

/* — Карточка блюда — */
.dish{border:1px solid var(--color-border-light);border-radius:var(--radius-card);background:var(--color-bg-card);display:flex;align-items:center;gap:12px;padding:var(--sp-card)}
.dish-img{width:56px;height:56px;border-radius:var(--radius-btn);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-24)}
.dish-n{font-size:var(--t-name);font-weight:var(--font-weight-semibold);margin-bottom:3px}
.dish-m{display:flex;gap:var(--gap-loose);font-size:var(--fs-12);color:var(--color-text-secondary)}
.dish-m span{display:flex;align-items:center;gap:2px}
.dish.cooked{background:var(--color-primary-bg)}
.dish.no-ing{border:2px solid var(--color-secondary)}
.dish.zero{opacity:.4}

/* — КБЖУ: кольца + прогресс-бары — */
.kring{width:60px;height:60px;position:relative}
.kring svg{transform:rotate(-90deg)}
.kring-v{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--fs-12);font-weight:var(--font-weight-bold);line-height:1.1;text-align:center}
.kring-v small{display:block;font-size:7px;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}
.pbar-t{width:100%;height:6px;background:var(--color-border-light);border-radius:var(--radius-sm);overflow:hidden}
.pbar-f{height:100%;border-radius:var(--radius-sm)}
/* цвет .pbar-f задаётся в разметке по правилу двунаправленной логики (см. DESIGN_SYSTEM.md) */

/* — Инфо-блоки — */
.info-box{border-radius:var(--radius-btn);padding:14px;margin:8px 0}
.info-tip{background:var(--color-primary-bg);border:1px solid var(--color-primary)}
.info-warn{background:var(--color-secondary-bg);border:1px solid var(--color-secondary)}
.info-err{background:var(--color-error-bg);border:1px solid var(--color-error-border)}

/* — Шаги мастера — */
.steps{display:flex;align-items:center;gap:0}
.step-d{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-12);font-weight:700;flex-shrink:0;border:2px solid var(--color-border);color:var(--color-text-secondary);background:var(--color-bg-card)}
.step-d.done{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.step-d.cur{border-color:var(--color-primary);color:var(--color-primary)}
.step-l{width:24px;height:2px;background:var(--color-border);flex-shrink:0}
.step-l.done{background:var(--color-primary)}

/* — Модалка — */
.modal-d{background:var(--color-bg-card);border-radius:var(--radius-sheet);padding:24px;max-width:300px;box-shadow:var(--shadow-modal);margin:0 auto}
.modal-d h4{font-size:var(--fs-18);font-weight:var(--font-weight-bold);margin-bottom:8px}
.modal-d p{font-size:var(--t-body);color:var(--color-text-secondary);margin-bottom:20px}

/* — Таблицы — */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-14)}
.tbl th{text-align:left;font-weight:600;color:var(--color-text-secondary);padding:8px 10px;border-bottom:2px solid var(--color-border);font-size:var(--fs-12)}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--color-border-light)}
.tbl .num{text-align:right;font-size:var(--fs-12);color:var(--color-text-secondary)}

/* — Иконки магазинов (цвет фона = var(--color-store-*) в разметке) — */
.store-i{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:var(--fs-12);font-weight:700;flex-shrink:0}

/* — Тосты — */
.toast{display:inline-block;padding:10px 18px;border-radius:8px;color:#fff;font-size:var(--fs-14);font-weight:500}
.toast-s{background:var(--color-toast-success)}.toast-e{background:var(--color-toast-error)}

/* — Разделитель слота — */
.sep{height:32px;background:var(--color-bg-page);display:flex;align-items:center;padding:0 16px;font-size:var(--fs-12);font-weight:700;color:var(--color-text-secondary)}

/* — Раскрывающийся блок — */
.exp-h{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:12px 0;font-size:var(--t-name);font-weight:600}
.exp-h .arr{transition:transform .2s;font-size:var(--fs-12);color:var(--color-text-secondary)}

/* — Служебные: спиннер / пусто / bottom-sheet / иконка — */
.spin{width:28px;height:28px;border:3px solid var(--color-border-light);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}
.spin-lg{width:44px;height:44px;border-width:4px}
@keyframes spin{to{transform:rotate(360deg)}}
/* — §Q1-Q3: оверлей готовности данных (фоновая синхра) + экран ошибки соединения — */
.kdo-gate{position:fixed;inset:0;z-index:var(--z-gate);background:var(--color-bg-page);display:none;align-items:center;justify-content:center;padding:24px}
.kdo-gate.on{display:flex}
.kdo-gate-box{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:320px}
.kdo-gate-msg{color:var(--color-text-secondary);font-size:var(--fs-16);line-height:1.45}
.kdo-gate-btn{background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-btn);padding:12px 24px;font:inherit;font-weight:600;cursor:pointer}
.kdo-gate-btn:active{background:var(--color-primary-pressed)}
.empty{text-align:center;padding:36px 20px;color:var(--color-text-secondary)}
.empty .e-ico{font-size:40px;opacity:.45;margin-bottom:10px}
.empty .e-t{font-size:var(--fs-16);font-weight:600;color:var(--color-text-secondary);margin-bottom:4px}
.empty .e-d{font-size:var(--t-body);line-height:1.5}
.e-hint{margin-top:16px;padding:10px 14px;background:var(--color-primary-bg);border-left:3px solid var(--color-primary);border-radius:6px;font-size:var(--t-body);line-height:1.5;text-align:left}
.sheet{background:var(--color-bg-card);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;padding:8px 20px 24px;max-width:var(--max-width);margin:0 auto;box-shadow:var(--shadow-sheet)}
.sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--color-border);margin:8px auto 16px}
.sheet h4{font-size:var(--fs-18);font-weight:var(--font-weight-bold);margin-bottom:6px}
.icon{display:inline-block;width:24px;height:24px;vertical-align:middle;color:var(--color-primary);background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.icon-sm{width:18px;height:18px}.icon-lg{width:32px;height:32px}
/* Модификаторы цвета иконок-масок (group B/C): по умолчанию .icon = тема (primary). */
.icon.muted{color:var(--color-text-secondary)}   /* серые нейтральные (back/search/«пусто»/корзина/футер-неактив) */
.icon.danger{color:var(--color-error)}            /* красный семантический (dislike/dangerous) */
.icon.warn{color:var(--color-secondary)}          /* оранжевый (attention/warning) */
.icon.success{color:var(--color-success)}       /* зелёный семантический (like_rating) — фикс, не следует теме */
.icon.cur{color:inherit}                          /* наследует цвет контейнера (иконки в кнопках/оверлеях: белый на btn-p/тёмном, зелёный на btn-o) */

/* — Оптимизатор — */
.wk-sw{display:inline-flex;flex-direction:column;align-items:flex-start;background:var(--color-bg-card);border:1px solid var(--color-border-light);border-radius:var(--radius-btn);padding:8px 14px;cursor:pointer}
.wk-sw .l{font-size:var(--fs-14);font-weight:600;color:var(--color-primary)}
.wk-sw .d{font-size:var(--fs-12);color:var(--color-text-secondary);margin-top:2px}
.day-hd{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-14);font-weight:700;padding:8px 0}
.day-hd .badge{font-size:var(--fs-12);font-weight:600;color:var(--color-primary);background:var(--color-primary-bg);padding:2px 8px;border-radius:var(--radius-chip)}
.optp{height:8px;background:var(--color-border-light);border-radius:4px;overflow:hidden}
.optp-f{height:100%;background:var(--color-primary);border-radius:4px}
.rate{display:inline-flex;gap:8px}
.rate-b{width:42px;height:36px;border:1.5px solid var(--color-border);border-radius:8px;background:var(--color-bg-card);font-size:var(--fs-16);cursor:pointer;display:flex;align-items:center;justify-content:center}
.rate-b.up.on{border-color:var(--color-primary);background:var(--color-primary-bg)}
.rate-b.down.on{border-color:var(--color-error-border);background:var(--color-error-bg)}
.bs-rs{max-width:var(--max-width);margin:0 auto;background:var(--color-bg-card);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;overflow:hidden}
.bs-rs .ph{height:120px;background:var(--color-primary-bg);display:flex;align-items:center;justify-content:center;font-size:44px}
.bs-rs .bd{padding:16px 18px}
.bs-rs .bd h3{font-size:var(--t-name);font-weight:700;margin:14px 0 6px;color:var(--color-text-primary)}

/* — Кладовая — */
.pn-card{display:flex;align-items:center;gap:10px;border:1px solid var(--color-border-light);border-radius:var(--radius-card);padding:10px 12px;background:var(--color-bg-card)}
.pn-card.upd{border-left:3px solid var(--color-primary)}
.pn-ico{width:36px;height:36px;border-radius:8px;background:var(--color-primary-bg);display:flex;align-items:center;justify-content:center;font-size:var(--fs-18);flex-shrink:0}
.pn-q{font-size:var(--fs-12);color:var(--color-text-secondary);margin-top:2px}
.pn-act{display:flex;gap:8px;font-size:var(--fs-16);color:var(--color-text-secondary);cursor:pointer}
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cat-tile{border:1px solid var(--color-border-light);border-radius:var(--radius-card);padding:var(--sp-control) var(--sp-8);text-align:center;background:var(--color-bg-card);cursor:pointer;min-width:0;overflow-wrap:break-word}
.cat-tile .ci{font-size:26px}
.cat-tile .cn{font-size:var(--fs-12);font-weight:600;margin-top:4px}
.ing-item{padding:11px 4px;border-bottom:1px solid var(--color-border-light);font-size:var(--fs-14);display:flex;align-items:center;gap:8px;cursor:pointer}
.ing-item.in-p{color:var(--color-text-secondary)}
.skl{display:flex;flex-direction:column;gap:10px}
.skl-card{height:54px;border-radius:var(--radius-card);background:linear-gradient(90deg,var(--color-border-light) 25%,var(--color-bg-page) 50%,var(--color-border-light) 75%);background-size:200% 100%;animation:shimmer 1.3s infinite}
/* — Кладовая: инлайн-управление количеством (степпер «− значение +» + корзина) — */
.pn-info{flex:1;min-width:0}
.qstep{display:flex;align-items:center;gap:2px;flex-shrink:0}
.qbtn{width:22px;height:22px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-bg-card);color:var(--color-primary);font-size:var(--fs-16);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:background .1s,transform .08s}
.qbtn:active{background:var(--color-primary-bg);transform:scale(.9)}
.qbtn.dis,.qbtn:disabled{color:var(--color-disabled);opacity:.45;cursor:not-allowed}
.qval{min-width:56px;text-align:center;font-size:var(--fs-14);font-weight:600;cursor:pointer;padding:4px 2px;white-space:nowrap}
.qtrash{width:18px;height:18px;margin-left:8px;cursor:pointer;flex-shrink:0}
.ing-ico{width:32px;height:32px;border-radius:8px;background:var(--color-primary-bg);display:flex;align-items:center;justify-content:center;font-size:var(--fs-16);flex-shrink:0}
/* сворачивание категорий */
.dept-hd .arr{display:inline-block;font-size:var(--fs-12);color:var(--color-text-secondary);transition:transform .15s;margin-left:4px}
.dept-hd.collapsed .arr{transform:rotate(-90deg)}
.cat-group.collapsed{display:none}
/* — Поле поиска с крестиком очистки — */
.srch{position:relative}
.srch .inp{padding-right:38px}
.srch-x{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--color-border);color:var(--color-text-secondary);display:none;align-items:center;justify-content:center;font-size:var(--fs-16);line-height:1;cursor:pointer}
.srch.has .srch-x{display:flex}
@keyframes shimmer{to{background-position:-200% 0}}

/* — Список покупок — */
.chain-flt{display:flex;gap:14px;justify-content:center;padding:8px 0}
.chain-btn{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px solid transparent;border-radius:10px;padding:6px 10px;background:none;cursor:pointer}
.chain-btn .cn{font-size:var(--t-caption);color:var(--color-text-secondary)}
.chain-btn .store-i{opacity:.4;transition:opacity .15s}
.chain-btn.on{border-color:var(--color-primary);background:var(--color-primary-bg)}
.chain-btn.on .store-i{opacity:1}
.dept-hd{display:flex;align-items:center;justify-content:space-between;background:var(--color-border-light);font-size:var(--t-name);font-weight:600;padding:10px 14px;border-radius:8px;cursor:pointer}
.dept-hd .cnt{font-size:var(--fs-12);color:var(--color-text-secondary)}
.shop-item{display:flex;align-items:center;gap:8px;padding:10px 4px;border-bottom:1px solid var(--color-border-light)}
.shop-item .si-img{width:32px;height:32px;border-radius:50%;background:var(--color-primary-bg);display:flex;align-items:center;justify-content:center;font-size:var(--fs-16);flex-shrink:0}
.shop-item .si-n{flex:1;font-size:var(--fs-14);font-weight:500}
.shop-item .si-m{font-size:var(--fs-12);color:var(--color-text-secondary);min-width:52px;text-align:right}
.shop-item .si-p{font-size:var(--fs-14);font-weight:600;min-width:46px;text-align:right}
.shop-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--color-bg-card);border-top:1px solid var(--color-border-light);padding:12px 14px}
.shop-bottom .tot{font-size:var(--fs-16);font-weight:700}

/* — Онбординг — */
.seg{display:inline-flex;border:1.5px solid var(--color-border);border-radius:var(--radius-btn);overflow:hidden}
.seg button{border:none;background:var(--color-bg-card);padding:9px 18px;font-size:var(--fs-14);font-family:var(--font);color:var(--color-text-secondary);cursor:pointer}
.seg button.on{background:var(--color-primary);color:#fff;font-weight:600}
.seg button+button{border-left:1.5px solid var(--color-border)}
.fld .lbl{font-size:var(--fs-12);font-weight:600;color:var(--color-text-secondary);margin-bottom:5px;display:block}
.fld .hint{font-size:var(--fs-12);color:var(--color-text-secondary);margin-top:4px}
.unit-in{display:flex;align-items:center;gap:8px}
.unit-in .u{font-size:var(--fs-14);color:var(--color-text-secondary)}
.sched{border-collapse:collapse;font-size:var(--fs-12);width:100%}
.sched th{font-weight:600;color:var(--color-text-secondary);padding:5px 3px;font-size:var(--t-caption)}
.sched td{padding:5px 3px;text-align:center;border-top:1px solid var(--color-border-light)}
.sched .dn{text-align:left;font-weight:600;color:var(--color-text-primary)}
.sched .cell{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--color-border);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--fs-12)}
.sched .cell.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* — Еда вне дома — */
.em-log{border:1px solid var(--color-border-light);border-radius:var(--radius-card);padding:12px;background:var(--color-bg-card);margin-bottom:8px}
.em-log .h{font-size:var(--fs-14);font-weight:600}
.em-log .c{font-size:var(--fs-12);color:var(--color-text-primary);margin:4px 0}
.em-log .n{font-size:var(--fs-12);color:var(--color-text-secondary)}
.em-log .a{display:flex;gap:12px;font-size:var(--fs-12);color:var(--color-primary);margin-top:8px;cursor:pointer}

/* =============================================================================
   МОДАЛЬНЫЕ ОКНА (общие; используются PWA-модалками в footer.php и модулями)
============================================================================= */
.modal-ov {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: none;                      /* JS ставит flex при показе */
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .5); padding: 20px;
}
.modal-card {
    position: relative; width: 100%; max-width: 380px;
    background: var(--color-bg-card); color: var(--color-text-primary);
    border-radius: var(--radius-card); padding: 24px 20px 20px;
    box-shadow: var(--shadow-modal); text-align: center;
}
.modal-x {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; cursor: pointer;
    font-size: var(--fs-24); line-height: var(--line-height-none); color: var(--color-text-secondary);
}
.modal-title { font-size: var(--fs-18); font-weight: var(--font-weight-bold); margin-bottom: 8px; }
.modal-sub   { font-size: var(--fs-14); color: var(--color-text-secondary); line-height: var(--line-height-base); }
.modal-actions { display: flex; gap: var(--gap-loose); }
.modal-actions .btn { flex: 1; }