/* WHIT — style.css v5 */
/* Макет v5: таб-бар, сплэш, онбординг, плоский дизайн */

:root {
    --green: #059669;
    --green-light: #10B981;
    --yellow: #EAB308;
    --blue: #3B82F6;
    --orange: #EA580C;
    --bg: #ECFDF5;
    --card: #FFFFFF;
    --text: #0F172A;
    --text-muted: #64748B;
    --border: #E1F2ED;
    --radius: 16px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);

    /* Первый срез: утверждённый шрифт и геометрия контролов */
    --font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Нижняя навигация: высота используется как отступ контента,
       чтобы последний элемент не уходил под панель. Значение — высота общего
       компонента Figma `Navigation / Bottom` (узел 156:79) при ширине 414. */
    --tabbar-height: 222px;

    /* Playful 3D: высота 56px, радиус 20px, нижняя грань 4px */
    --btn-3d-height: 56px;
    --btn-3d-radius: 20px;
    --btn-3d-edge: 4px;

    /* Первый срез (Figma 414×956): цвета splash и onboarding.
       Значения сняты с макета, чтобы не менять остальные экраны. */
    --fig-slice-blue: #0057FF;
    --fig-slice-green: #26DA53;
    --fig-slice-cream: #F8F7F4;
    --fig-slice-sky: #CDE7FF;
    --fig-slice-ink: #1C1F26;
    --fig-slice-muted: #6C7E9F;
    --fig-slice-orange: #FF6900;

    /* Второй срез (дневник, Figma D01/D02 414×956) */
    --fig-diary-weekend: #E81F3D;
    --fig-diary-dot: #6B7078;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    height: 100dvh;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ==================== ЭКРАНЫ ==================== */

.screen {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

/* ==================== PLAYFUL 3D (утверждённый контрол) ==================== */
/* Высота 56px, радиус 20px, выраженная нижняя грань 4px.
   Варианты: --primary (зелёный), --accent (синий), --neutral (поверхность). */

.btn-3d {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: var(--btn-3d-height);
    min-height: var(--btn-3d-height);
    padding: 0 20px;
    border: none;
    border-radius: var(--btn-3d-radius);
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 var(--btn-3d-edge) 0 var(--btn-3d-edge-color, rgba(0, 0, 0, 0.22));
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
    -webkit-tap-highlight-color: transparent;
}

.btn-3d:active {
    transform: translateY(var(--btn-3d-edge));
    box-shadow: none;
}

.btn-3d.is-pressed {
    transform: translateY(var(--btn-3d-edge));
    box-shadow: none;
}

.btn-3d:focus-visible {
    outline: 3px solid var(--text);
    outline-offset: 2px;
}

.btn-3d:disabled {
    opacity: 0.55;
    cursor: default;
}

.btn-3d--primary {
    background: var(--green);
    --btn-3d-edge-color: #036B4A;
}

.btn-3d--accent {
    background: var(--blue);
    --btn-3d-edge-color: #1D4ED8;
}

.btn-3d--neutral {
    background: var(--card);
    color: var(--text);
    border: 2px solid var(--border);
    --btn-3d-edge-color: #C9D6D1;
}

/* ==================== СПЛЭШ (Figma 414×956) ==================== */
/* Композиция снята с макета 444:1228: светлый фон, наклонённый синий блок,
   заголовок в две строки, оранжевый штрих, белая плашка и авторские
   иллюстрации. Все размеры — в vw от ширины макета 414px (1 макетный px =
   100/414 vw), вертикальные якоря — в % от высоты экрана. */

.splash-screen {
    position: relative;
    display: block;
    background: var(--fig-slice-cream);
    cursor: pointer;
    overflow: hidden;
}

.splash-stage {
    position: absolute;
    inset: 0;
}

/* Декоративные точки-акценты: зелёная за поваром, голубая слева сверху. */
.splash-dot {
    position: absolute;
    border-radius: 50%;
}

.splash-dot--green {
    left: 79.0vw;
    top: 19.9%;
    width: 10.6vw;
    height: 10.6vw;
    background: var(--fig-slice-green);
}

.splash-dot--blue {
    left: 9.7vw;
    top: 19.4%;
    width: 7.2vw;
    height: 7.2vw;
    background: var(--fig-slice-sky);
}

/* Синий блок: 355×405 в макете, поворот 1.9° (углы скруглены крупно). */
.splash-block {
    position: absolute;
    left: 5.27vw;
    top: 23.2%;
    width: 85.75vw;
    height: 42.4%;
    background: var(--fig-slice-blue);
    border-radius: 16.4vw;
    transform: rotate(1.9deg);
}

.splash-title {
    position: absolute;
    left: 15.94vw;
    top: 34.1%;
    margin: 0;
    color: #fff;
    font-weight: 800;
}

.splash-title-greeting {
    display: block;
    font-size: 7.25vw;
    line-height: 1.1;
}

.splash-title-brand {
    display: block;
    font-size: 19.5vw;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

.splash-stroke {
    position: absolute;
    left: 15.94vw;
    top: 45.9%;
    width: 30.68vw;
    height: 1.93vw;
    border-radius: 1vw;
    background: var(--fig-slice-orange);
    transform: rotate(3.4deg);
}

.splash-pill {
    position: absolute;
    left: 14.0vw;
    top: 49.7%;
    width: 69.6vw;
    height: 15.9vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    color: var(--fig-slice-ink);
    font-size: 4.1vw;
    font-weight: 600;
}

/* Авторские иллюстрации: бокс больше видимой части, т.к. в исходниках есть
   прозрачные поля — позиции подобраны по видимому контенту макета. */
.splash-art {
    position: absolute;
    pointer-events: none;
}

.splash-art--chef {
    left: 55.1vw;
    top: 18.9%;
    width: 45.81vw;
    height: 45.81vw;
}

.splash-art--profile {
    left: -2.4vw;
    top: 51.5%;
    width: 42.5vw;
    height: 42.5vw;
}

.splash-art--food {
    left: 66.0vw;
    top: 56.5%;
    width: 29.7vw;
    height: 29.7vw;
    transform: rotate(-12deg);
}

/* Индикатор из трёх точек под блоком. */
.splash-dots {
    position: absolute;
    left: 0;
    right: 0;
    top: 78.8%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.45vw;
}

.splash-dot-item {
    width: 2.4vw;
    height: 2.4vw;
    border-radius: 50%;
    background: var(--fig-slice-blue);
}

/* ==================== ОНБОРДИНГ (Figma 444:1227) ==================== */

.onboarding-screen {
    display: flex;
    /* .screen задаёт flex-direction: column — панель центрируем по ширине,
       прижимаем к верху и отбиваем отступом, снятым с макета (88px / 77px
       при ширине 414px; проценты здесь считались бы от ширины). */
    justify-content: flex-start;
    align-items: center;
    background: var(--fig-slice-cream);
    padding-top: 21.26vw;
    padding-bottom: 18.6vw;
    overflow-y: auto;
    overflow-x: hidden;
}

.onboarding-panel {
    flex: none;
    width: 92.27vw;
    max-width: 100%;
    min-height: 82.85%;
    padding: 10.6vw 3.86vw 5.8vw;
    border-radius: 11.6vw;
    background: var(--fig-slice-blue);
    color: #fff;
}

.onboarding-title {
    padding: 0 0.97vw;
    font-size: 8.05vw;
    font-weight: 800;
    line-height: 1.2;
}

.onboarding-subtitle {
    margin-top: 1.7vw;
    padding: 0 0.97vw;
    font-size: 4.35vw;
    font-weight: 400;
    line-height: 1.3;
    color: var(--fig-slice-sky);
}

.onboarding-cards {
    display: flex;
    flex-direction: column;
    gap: 4.6vw;
    margin-top: 6.8vw;
}

.onboard-card {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 34.3vw;
    padding: 3.4vw 3.86vw 3.4vw 4.83vw;
    border: none;
    border-radius: 5.8vw;
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.onboard-card--profile {
    background: var(--fig-slice-cream);
}

.onboard-card--food {
    background: var(--fig-slice-green);
}

.onboard-card--chef {
    min-height: 40.1vw;
    background: var(--fig-slice-sky);
}

.onboard-card-text {
    position: relative;
    z-index: 1;
    /* Ширина подобрана по макету: «Настроим профиль?» держится в одну строку,
       «Познакомимся с поварами?» переносится на вторую. */
    max-width: 70%;
}

.onboard-card-title {
    display: block;
    font-size: 5.07vw;
    font-weight: 700;
    line-height: 1.25;
    color: var(--fig-slice-ink);
}

.onboard-card-sub {
    display: block;
    margin-top: 1.2vw;
    font-size: 3.38vw;
    font-weight: 400;
    line-height: 1.35;
    color: var(--fig-slice-muted);
}

.onboard-card--food .onboard-card-sub {
    color: var(--fig-slice-ink);
}

/* Иллюстрации карточек намеренно выступают за края (handoff, раздел 10). */
.onboard-card-art {
    position: absolute;
    pointer-events: none;
}

.onboard-card-art--profile {
    right: -3.6vw;
    top: 1.0vw;
    width: 27.1vw;
    height: 27.1vw;
}

.onboard-card-art--food {
    right: -5.8vw;
    top: -4.3vw;
    width: 43.2vw;
    height: 43.2vw;
}

.onboard-card-art--chef {
    right: -8.4vw;
    top: -2.9vw;
    width: 44.9vw;
    height: 44.9vw;
}

.onboard-later {
    display: block;
    width: 48.8vw;
    min-height: 44px;
    height: 13.04vw;
    margin: 9.2vw auto 0;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: var(--fig-slice-blue);
    font-family: var(--font-sans);
    font-size: 4.35vw;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.onboarding-caption {
    margin-top: 5.8vw;
    padding: 0 0.97vw;
    font-size: 3.86vw;
    line-height: 1.3;
    text-align: center;
    color: var(--fig-slice-sky);
}

/* ==================== ОСНОВНОЙ ЭКРАН ==================== */

.main-screen {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--bg);
}

.tab-page {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-top: calc(16px + var(--safe-top));
    padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 16px);
}

/* ==================== ТАБ-БАР ==================== */
/* Один общий компонент Figma `Navigation / Bottom` (узел 156:79) для Дневника,
   Профиля и Кухни. Визуальный слой — авторские ассеты компонента
   (frontend/assets/navigation/): контур 326.644×140 и три предмета.
   Геометрия снята с узла на 414×956: компонент x0 y734 w414 h222; контур
   x≈58.36 y740 w316.644 h130; предметы x45…370 y759 h62 — дневник x64 y772
   w100 h67, выбранный профиль x≈171.5 y751 w99 h104, кухня x293 y772 w77 h62.
   Координаты узла лежат внутри бокса компонента 414×222, поэтому вся геометрия
   задана в процентах от него: на 414 она равна узлу пиксель в пиксель, на 360
   масштабируется пропорционально и не даёт горизонтального переполнения.
   Порядок и маршруты пунктов постоянны: Дневник / Профиль / Кухня. */

.tabbar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 414px;
    aspect-ratio: 414 / 222;     /* высота компонента 222 при ширине 414 */
    box-sizing: content-box;     /* safe-area добавляется ниже геометрии узла */
    padding-bottom: var(--safe-bottom);
    background: none;
    border: none;
    z-index: 100;
    pointer-events: none;        /* тап ловят только сами пункты */
}

/* Фейд компонента — 414×222 (авторский ассет того же бокса, что и в узле
   455:1224; отдельного файла фейда в выгрузке компонента не было). */
.tabbar-fade {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/profile/bottom-fade.svg") bottom center / 100% 100% no-repeat;
    pointer-events: none;
}

/* Авторский контур 326.644×140: бокс ассета шире контура на внешний bleed
   обводки (5 px), поэтому x = 58.36 − 5 = 53.36, y = 740 − 5 = 735. */
.tabbar-bar {
    position: absolute;
    left: 12.888889%;            /* 53.36 / 414 */
    top: 0.450450%;              /* 1 / 222 */
    width: 78.899517%;           /* 326.644 / 414 */
    height: 63.063063%;          /* 140 / 222 */
    background: url("assets/navigation/bar.svg") center / 100% 100% no-repeat;
    pointer-events: none;
}

/* Пункт — авторский бокс предмета из узла (проценты от компонента 414×222). */
.tabbar-btn {
    position: absolute;
    display: block;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: var(--font-sans);
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.tabbar-btn[data-tab="diary"] {
    left: 15.458937%;            /* 64 / 414 */
    top: 17.117117%;             /* 38 / 222 */
    width: 24.154589%;           /* 100 / 414 */
    height: 30.180180%;          /* 67 / 222 */
}

.tabbar-btn[data-tab="profile"] {
    left: 41.425121%;            /* 171.5 / 414 */
    top: 7.657658%;              /* 17 / 222 */
    width: 23.913043%;           /* 99 / 414 */
    height: 46.846847%;          /* 104 / 222 */
}

.tabbar-btn[data-tab="kitchen"] {
    left: 70.772947%;            /* 293 / 414 */
    top: 17.117117%;             /* 38 / 222 */
    width: 18.599034%;           /* 77 / 414 */
    height: 27.927928%;          /* 62 / 222 */
}

/* Предмет — авторский растр узла; бокс уже имеет авторское соотношение сторон. */
.tabbar-icon {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.tabbar-btn[data-tab="diary"] .tabbar-icon { background-image: url("assets/navigation/nav-diary.png"); }
.tabbar-btn[data-tab="profile"] .tabbar-icon { background-image: url("assets/navigation/nav-profile.png"); }
.tabbar-btn[data-tab="kitchen"] .tabbar-icon { background-image: url("assets/navigation/nav-kitchen.png"); }

/* Подпись пункта остаётся в разметке (контракты срезов 1–4, озвучка активного
   пункта через aria-current/aria-label), но авторский компонент нарисован без
   подписей — визуально подпись скрыта. */
.tabbar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.tabbar-btn.active {
    color: var(--text);
}

.tabbar-btn.active .tabbar-label {
    font-weight: 700;
}

.tabbar-btn:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: -3px;
    border-radius: 12px;
}

/* ==================== ДНЕВНИК (один Diary(selectedDate)) ==================== */
/* Figma D01 42:42 (заполненный день) и D02 292:925 (пустой день):
   светлый фон, неделя с понедельника, синяя поверхность дня, плашка итогов
   выбранного дня с водой и вертикальная лента карточек. */

.diary-page {
    padding: 0;
    padding-top: calc(var(--safe-top) + 11px);
    padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom));
    overflow: hidden;
    /* В макете D01/D02 рамка дня — кремовая, а не общий фон приложения. */
    background: var(--fig-slice-cream);
}

/* switchMainTab() ставит вкладке inline display:block, поэтому высоту задаём
   экрану дневника, а не вкладке: иначе лента не получает прокрутку и последняя
   кнопка уходит за пределы экрана. */
.diary-screen {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 16px;
}

/* Неделя начинается с понедельника. Форма выбранного дня — исходный SVG
   Figma (CalendarSelectionSurface 383×126), а не перерисованная фигура. */
.diary-week {
    position: relative;
    flex: 0 0 auto;
    height: 62px;
}

.diary-week-surface {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 383 / 126;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.diary-week-days {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 62px;
}

.diary-day {
    min-height: 62px;                 /* цель касания больше 44px */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 400;
    color: var(--fig-slice-blue);
    -webkit-tap-highlight-color: transparent;
}

.diary-day--weekend {
    color: var(--fig-diary-weekend);
}

/* Выбранный день: крупнее и на светлой плашке-«капле», даже если выходной. */
.diary-day--selected {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--fig-slice-cream);
}

.diary-day:focus-visible {
    outline: 3px solid var(--fig-slice-blue);
    outline-offset: -3px;
    border-radius: 16px;
}

.diary-day--selected:focus-visible {
    outline-color: var(--fig-slice-cream);
}

/* Синяя поверхность выбранного дня */
.diary-panel {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 7px 10px 0;
    background: var(--fig-slice-blue);
    border-radius: 30px;
}

/* ── DailyStats: итоги дня + вода выбранного дня ── */

.diary-stats {
    position: relative;
    flex: 0 0 auto;
    height: 50px;
}

.diary-stats-view {
    position: absolute;
    left: 0;
    right: 58px;
    top: 0;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 30px;
    background: var(--fig-slice-cream);
    overflow: hidden;
    cursor: pointer;
    font-family: var(--font-sans);
    color: var(--fig-slice-blue);
    -webkit-tap-highlight-color: transparent;
}

.diary-stats-track {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 6px;
    height: 38px;
    border-radius: 30px;
    overflow: hidden;
}

.diary-stats-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 30px;
    background: var(--fig-slice-green);
    transition: width 0.25s ease;
}

.diary-stats-value {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
}

/* Второй вид тех же итогов: Б: / Ж: / У: */
.diary-stats-view--macros .diary-stats-track,
.diary-stats-view--macros .diary-stats-value {
    display: none;
}

.diary-macros {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 9.6%;
    font-size: 24px;
    font-weight: 600;
}

.diary-macros--incomplete {
    padding-bottom: 10px;
}

.diary-stats-note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    font-size: 9px;
    font-weight: 700;
    line-height: 10px;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}

.diary-macros-group {
    display: flex;
    align-items: baseline;
}

.diary-water {
    position: absolute;
    right: 0;
    top: 0;
    width: 49px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 30px;
    background: var(--fig-slice-cream);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.diary-water-icon {
    position: absolute;
    right: -2px;
    top: 0;
    display: block;
    width: 53px;
    height: 54px;
    pointer-events: none;
}

/* Число стаканов появляется только от 1 — при нуле счётчик скрыт (DailyStats). */
.diary-water-count {
    position: absolute;
    right: -2px;
    bottom: -2px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    background: var(--fig-slice-blue);
    color: var(--fig-slice-cream);
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    z-index: 1;
}

.diary-water-count[hidden] {
    display: none;
}

.diary-water:focus-visible {
    outline: 3px solid var(--fig-slice-cream);
    outline-offset: -3px;
}

/* Полоса под плашкой итогов: подрезает верх прокручиваемых карточек. */
.diary-feed-mask {
    flex: 0 0 auto;
    height: 11px;
    background: var(--fig-slice-blue);
}

.diary-feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 10px 0 16px;
}

/* Пустой день: только фирменная кнопка добавления на месте из макета. */
.diary-feed--empty {
    padding-top: 190px;
}

.diary-add-meal {
    flex: 0 0 auto;
    display: block;
    width: 83px;
    height: 97px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.diary-add-meal img {
    display: block;
    width: 83px;
    height: 97px;
}

.diary-add-meal:focus-visible {
    outline: 3px solid var(--fig-slice-cream);
    outline-offset: 4px;
    border-radius: 20px;
}

.diary-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    color: var(--fig-slice-cream);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.diary-retry {
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 22px;
    background: var(--fig-slice-cream);
    color: var(--fig-slice-blue);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* ── Карточка еды (Diary / MealCard 219:82 + MealActions 102:78) ── */

.meal-card {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    background: var(--fig-slice-cream);
    border-radius: 35px;
    color: var(--fig-slice-blue);
    touch-action: pan-y;
}

/* Карточка еды (Figma 219:82): 364×542 при 414px — фото 8..353, название 359,
   граммовка 415, ккал 451, макросы 469/487/505, «…» 57px в 12px от угла фото. */
.meal-card--photo {
    padding: 8px 10px 18px 9px;
}

.meal-card--text {
    padding: 20px 78px 20px 21px;
    min-height: 120px;
}

.meal-card-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(0, 87, 255, 0.08);
}

.meal-card-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.meal-card-photo--broken img {
    display: none;
}

/* Кнопка «…»: 57px, исходный ассет more-dot.svg */
.meal-card-actions {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
}

.meal-card--text .meal-card-actions {
    top: 18px;
    right: 16px;
    bottom: auto;
}

.meal-card-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 57px;
    height: 57px;
    padding: 0;
    border: none;
    border-radius: 30px;
    background: rgba(248, 247, 244, 0.75);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.meal-card-toggle:focus-visible {
    outline: 3px solid var(--fig-slice-blue);
    outline-offset: -3px;
}

.meal-card-dot {
    display: block;
    flex: 0 0 auto;
    width: 3.2px;
    height: 3.2px;
    opacity: 0.9;
}

.meal-card-info {
    padding: 6px 13px 0 12px;
}

.meal-card--text .meal-card-info {
    padding: 0;
}

.meal-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.meal-card-name {
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    word-break: break-word;
}

.meal-card-time {
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 400;
}

.meal-card-details {
    margin-top: 18px;
    padding-bottom: 12px;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
}

/* Компактное состояние: скрываются все детали, включая граммовку. */
.meal-card.is-collapsed .meal-card-details {
    display: none;
}

.meal-card.is-collapsed .meal-card-info {
    padding-bottom: 22px;
}

/* Меню действий карточки поверх самой карточки */
.meal-card .swipe-menu {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    width: 128px;
    background: rgba(248, 247, 244, 0.96);
    border-radius: 28px;
    box-shadow: 0 6px 20px rgba(0, 87, 255, 0.18);
    z-index: 4;
}

.meal-card .swipe-menu button {
    color: var(--fig-slice-blue);
    font-family: var(--font-sans);
}

.meal-card .swipe-menu .btn-delete {
    color: #C81E33;
}

/* ── Удаление без подтверждения: отмена 8 секунд ── */

.diary-undo {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 12px);
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 20px;
    background: var(--fig-slice-ink);
    color: var(--fig-slice-cream);
    box-shadow: 0 8px 24px rgba(28, 31, 38, 0.28);
}

.diary-undo-text {
    font-size: 15px;
    font-weight: 600;
}

.diary-undo-btn {
    min-height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 22px;
    background: var(--fig-slice-cream);
    color: var(--fig-slice-blue);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.text-entry {
    background: var(--card);
    padding: 14px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    border-left: 4px solid var(--green);
}

.text-entry small {
    display: block;
    font-weight: 400;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

.polaroid-card { cursor: pointer; }
.polaroid-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    font-size: 14px;
    font-weight: 600;
    min-height: 100px;
}
.polaroid-details-kbzu {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
}

.text-entry { cursor: pointer; }
.text-entry-details {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}
.text-entry-details small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

/* ==================== REACTION BADGE & PICKER ==================== */

.reaction-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--card, #fff);
    border: 1px solid var(--border, #E1F2ED);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: transform 0.15s;
}
.reaction-badge:active { transform: scale(0.9); }

.reaction-picker {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    flex-wrap: wrap;
}
.reaction-option {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg, #ECFDF5);
    border: 2px solid var(--border, #E1F2ED);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.15s;
}
.reaction-option:active { transform: scale(0.9); }
.reaction-option.selected {
    border-color: var(--green, #059669);
    background: var(--green-light, #10B981);
    color: #fff;
}
.reaction-option.clear {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted, #64748B);
}

.polaroid-card { position: relative; }
.text-entry { position: relative; }

@keyframes reactionPop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.reaction-badge.just-set { animation: reactionPop 0.3s ease-out; }

/* ==================== КУХНЯ (Figma K01/K02/K03, 414×956) ==================== */
/* K01 297:714 — каталог шести персонажей; K03.1 511:1349 / 482:1413 / 401:838 —
   один экран запроса (ReadyForRequest → Thinking → ReadyRecipe); K02 329:780 —
   презентация premium-шефа. Панель 383×865 (x15, y60), окно результата 358×511
   r22, композер 358×57, верхние иконки x19/178/318 по y≈60. Геометрия макета —
   ориентир: контейнеры адаптивные, учитываются фактические safe areas. */

.kitchen-page {
    padding: 0;
    padding-top: calc(var(--safe-top) + 11px);
    padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--kb-inset, 0px));
    overflow: hidden;
    background: var(--fig-slice-cream);
}

/* Экранная клавиатура открыта: нижняя навигация скрыта, композер поднят над ней. */
body.keyboard-open .tabbar {
    display: none;
}

.kitchen-screen {
    position: relative;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
}

/* ── верхние иконки кухни: шефы / запрос / книга ─────────────────────────── */

.kitchen-head {
    position: relative;
    z-index: 2;   /* иконки кухни всегда поверх синей панели Figma */
    flex: none;
    height: 78px;
    margin-top: 46px;
    display: flex;
    align-items: center;
}

.kitchen-head-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.kitchen-head-btn:focus-visible {
    outline: 3px solid var(--fig-slice-blue);
    outline-offset: 2px;
    border-radius: 16px;
}

.kitchen-head-btn--chefs { width: 78px; height: 78px; }
.kitchen-head-btn--request { width: 52px; height: 78px; margin: 0 auto; }
.kitchen-head-btn--cookbook { width: 68px; height: 78px; }

.kitchen-head-btn--request[disabled] { cursor: default; }

.kitchen-head-img { display: block; object-fit: contain; }
.kitchen-head-btn--chefs .kitchen-head-img { width: 78px; height: 78px; }
.kitchen-head-btn--request .kitchen-head-img { width: 52px; height: 78px; }
.kitchen-head-btn--cookbook .kitchen-head-img { width: 68px; height: 71px; }

/* Выбранная иконка шефов: исходный tint-ассет Figma как маска + кремовая заливка. */
.kitchen-head-tint {
    position: absolute;
    left: 14px;
    top: 0;
    width: 61px;
    height: 78px;
    background: var(--fig-slice-cream);
    -webkit-mask-image: url("assets/kitchen/icon-chefs-tint.png");
    mask-image: url("assets/kitchen/icon-chefs-tint.png");
    -webkit-mask-size: 78px 78px;
    mask-size: 78px 78px;
    -webkit-mask-position: -8px 0;
    mask-position: -8px 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.kitchen-screen[data-view="catalog"] .kitchen-head-btn--chefs .kitchen-head-img { visibility: hidden; }
.kitchen-screen:not([data-view="catalog"]) .kitchen-head-tint { display: none; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── общая синяя панель кухни (исходная форма Figma 383×865) ────────────── */

.kitchen-catalog-wrap,
.chef-presentation,
.chef-request {
    position: relative;
    flex: 1;
    min-height: 0;
}

/* Исходная форма панели Figma (383×865) как фон рабочей области: у каталога и
   презентации вырез (таб) слева, у экрана запроса — по центру. */
.kitchen-catalog-wrap::before,
.chef-presentation::before,
.chef-request::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -75px;
    bottom: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.kitchen-catalog-wrap::before { background-image: url("assets/kitchen/panel-catalog.svg"); }
.chef-presentation::before { background-image: url("assets/kitchen/panel-presentation.svg"); }
.chef-request::before { background-image: url("assets/kitchen/panel-request.svg"); }

/* ── каталог K01 297:714: карточки 170×202, x25/x219, шаг 193 ───────────── */

.kitchen-catalog-wrap {
    padding: 21px 10px 12px;
}

.kitchen-catalog {
    position: relative;
    height: 100%;
    display: grid;
    grid-template-columns: 170px 170px;
    column-gap: 24px;
    grid-auto-rows: 193px;
    align-content: start;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
}

.chef-card {
    position: relative;
    width: 170px;
    height: 202px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chef-card:focus-visible {
    outline: 3px solid var(--fig-slice-blue);
    outline-offset: 2px;
    border-radius: 24px;
}

.chef-card-avatar {
    position: absolute;
    left: 8px;
    top: 0;
    width: 154px;
    height: 154px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--fig-slice-cream);
    border: 7px solid #ccc;
}

.chef-card--premium .chef-card-avatar { border-color: #ffb50f; }

.chef-card-border {
    position: absolute;
    left: 4px;
    top: -2px;
    width: 162px;
    height: 162px;
    pointer-events: none;
}

.chef-card-portrait {
    position: absolute;
    left: -21px;
    top: -7px;
    width: 181px;
    height: 217px;
    object-fit: cover;
    display: block;
}

/* Плашка имени: «ножка» 4×12, внешняя обводка 150×41, рамка 144×36. */
.chef-card-tag-connector {
    position: absolute;
    left: 83px;
    top: 151px;
    width: 4px;
    height: 12px;
    background: #ccc;
}

.chef-card--premium .chef-card-tag-connector { background: #ffb50f; }

.chef-card-tag-outer {
    position: absolute;
    left: 10px;
    top: 137px;
    width: 150px;
    height: 41px;
    border: 8px solid #969696;
    border-radius: 20px;
    pointer-events: none;
}

.chef-card--premium .chef-card-tag-outer { border-color: #ed5703; }

.chef-card-tag {
    position: absolute;
    left: 13px;
    top: 136px;
    width: 144px;
    height: 36px;
    border-radius: 18px;
    border: 6px solid #ccc;
    background: var(--fig-slice-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    overflow: hidden;
    text-align: center;
}

.chef-card--premium .chef-card-tag { border-color: #ffb50f; }

.chef-card-tag-text {
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chef-card-lock {
    position: absolute;
    left: 8px;
    top: 0;
    width: 154px;
    height: 154px;
    border-radius: 50%;
    background: rgba(28, 31, 38, 0.34);
    color: var(--fig-slice-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
}

/* ── презентация premium-шефа K02 329:780 (без имитации покупки) ────────── */

.chef-presentation {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px 24px;
}

.presentation-card {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 346px;
    border: 7px solid #ffb50f;
    border-radius: 28px;
    box-shadow: 0 0 0 5px #ed5703;
    background: var(--fig-slice-cream);
    overflow: hidden;
}

.presentation-quote {
    position: relative;
    padding: 11px 8px 0;
    font-size: 18px;
    line-height: 1.25;
    text-align: center;
    color: #141a2e;
}

.presentation-portrait {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 65px;
    width: 363px;
    max-width: none;
    height: 436px;
    object-fit: contain;
    pointer-events: none;
}

.presentation-buy {
    position: relative;
    z-index: 1;
    flex: none;
    margin-top: 17px;
    width: 306px;
    max-width: 100%;
    min-height: 58px;
    border: 2px solid #fa8c1a;
    border-radius: 20px;
    background: #ffe5a8;
    box-shadow: 0 5px 0 rgba(199, 89, 8, 0.95);
    color: #633305;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.presentation-buy:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(199, 89, 8, 0.95); }

.presentation-buy:focus-visible {
    outline: 3px solid var(--fig-slice-blue);
    outline-offset: 2px;
}

.presentation-note {
    position: relative;
    z-index: 1;
    flex: none;
    margin-top: 10px;
    min-height: 18px;
    font-size: 14px;
    color: var(--fig-slice-ink);
    text-align: center;
}

/* ── один экран запроса K03.1: ReadyForRequest → Thinking → ReadyRecipe ─── */

.kitchen-screen > .chef-screen {
    flex: 1;
    min-height: 0;
}

.chef-request {
    display: flex;
    flex-direction: column;
    /* Figma 511:1349: окно результата начинается на 86 px ниже верха панели.
       Коробка запроса начинается на 135 px (шапка 57–135), а панель ::before
       смещена на −75 px, поэтому 86 − 75 = 11 px. */
    padding: 11px 12px 9px;
}

.chef-viewport {
    position: relative;
    /* Figma 511:1349: окно 358×511 при y146 (панель 60 + 86). Фиксированная
       высота + flex-shrink: на низких экранах и при клавиатуре окно сжимается,
       на высоких — остаётся макетным, свободное поле уходит под композер. */
    flex: 0 1 auto;
    height: 511px;
    min-height: 0;
    border-radius: 22px;
    background: var(--fig-slice-cream);
    overflow: hidden;
}

/* Обои шефа: исходный портрет Figma, crop и масштаб из макета (-54/-7, 567×682),
   прозрачность 50% как в макете. Кадр не растягивается (object-fit/cover). */
.chef-wallpaper {
    position: absolute;
    left: -54px;
    right: -155px;
    top: -7px;
    bottom: -164px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.5;
    pointer-events: none;
}

.chef-viewport-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.chef-result {
    position: relative;
    padding: 42px 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
}

.chef-bubble {
    max-width: 100%;
    word-break: break-word;
}

/* Запрос пользователя: зелёная плашка 250×72, r20, правый нижний угол прямой. */
.chef-bubble--request {
    align-self: flex-end;
    width: 250px;
    padding: 10px 14px;
    border-radius: 20px 20px 0 20px;
    background: rgba(38, 218, 83, 0.95);
    color: var(--fig-slice-ink);
    font-size: 17px;
    line-height: 22px;
    white-space: pre-wrap;
}

/* Ожидание: синяя плашка 286×58, r18. */
.chef-bubble--thinking {
    width: 286px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(0, 87, 255, 0.72);
    color: var(--fig-slice-cream);
    font-size: 17px;
    line-height: 22px;
}

/* Результат: синяя карточка 286×286+, r20, левый нижний угол прямой. */
.chef-card-result {
    width: 286px;
    padding: 10px 14px 14px;
    border-radius: 20px 20px 20px 0;
    background: rgba(0, 87, 255, 0.84);
    color: var(--fig-slice-cream);
    font-size: 14px;
    line-height: 18px;
}

.chef-card-result-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 6px;
}

.chef-card-result h3,
.chef-card-result h4,
.chef-card-result h5 {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    margin: 8px 0 4px;
}

.chef-card-result p { margin: 0 0 4px; }
.chef-card-result p:last-child { margin-bottom: 0; }
.chef-card-result ul,
.chef-card-result ol { margin: 0 0 6px; padding-left: 16px; }
.chef-card-result li { margin-bottom: 1px; }
.chef-card-result strong { font-weight: 700; }
.chef-card-result em { font-style: italic; }

/* Ошибка/долгое ожидание: кремовая плашка с повтором, ввод остаётся в поле. */
.chef-notice {
    width: 286px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(248, 247, 244, 0.94);
    color: var(--fig-slice-ink);
    font-size: 15px;
    line-height: 20px;
}

.chef-notice-btn {
    margin-top: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: none;
    border-radius: 16px;
    background: var(--fig-slice-blue);
    color: var(--fig-slice-cream);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* ── действия текущего результата (RecipeResultActions 379:873) ─────────── */

/* Действия прижаты к правому краю окна: в макете 379:869 переключатель 57×57
   стоит на 203 px выше нижнего края окна 511 px (39.7% высоты), панель
   раскрывается вверх от той же точки. */
.chef-actions {
    position: absolute;
    right: 0;
    bottom: 39.7%;
    width: 63px;
    height: 0;
    z-index: 4;
}

.chef-actions-toggle {
    position: absolute;
    left: 6px;
    bottom: 0;
    width: 57px;
    height: 57px;
    border: none;
    border-radius: 28.5px;
    background: rgba(248, 247, 244, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chef-actions.is-open .chef-actions-toggle { background: transparent; }

/* Три точки — исходный ассет Figma Icon/More (4.2×4.2), шаг 11 px. */
.chef-actions-dot {
    display: block;
    width: 4.2px;
    height: 4.2px;
    flex: none;
}

.chef-actions-toggle { gap: 6.8px; }

.chef-actions-toggle:focus-visible,
.chef-action-btn:focus-visible {
    outline: 3px solid var(--fig-slice-blue);
    outline-offset: 2px;
}

.chef-actions-panel {
    display: none;
    position: absolute;
    left: 6px;
    bottom: 0;
    width: 57px;
    height: 200px;
    border: 1px solid #d6dbe5;
    border-radius: 30px;
    background: rgba(248, 247, 244, 0.8);
}

.chef-actions.is-open .chef-actions-panel { display: block; }

.chef-action-btn {
    display: none;
    position: absolute;
    left: 4px;
    width: 50px;
    height: 48px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.chef-actions.is-open .chef-action-btn { display: flex; }
.chef-action-btn--delete { top: 0; }
.chef-action-btn--report { top: 50px; }
.chef-action-btn--save { top: 100px; }

.chef-action-icon { display: block; object-fit: contain; }
.chef-action-btn--delete .chef-action-icon { width: 44px; height: 43px; }
.chef-action-btn--report .chef-action-icon { width: 40px; height: 36px; }
.chef-action-btn--save .chef-action-icon { width: 29px; height: 34px; }

/* ── композер запроса (358×57) ──────────────────────────────────────────── */

.chef-composer {
    position: relative;
    flex: none;
    min-height: 57px;
    margin-top: 11px;
    display: flex;
    align-items: center;
}

.chef-composer-bar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.chef-composer-input {
    position: relative;
    flex: 1;
    min-width: 0;
    margin: 0 52px 0 23px;
    max-height: 84px;
    padding: 0;
    border: none;
    background: none;
    outline: none;
    resize: none;
    overflow-y: auto;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 21px;
    color: var(--fig-slice-ink);
    user-select: text;
    -webkit-user-select: text;
}

.chef-composer-input::placeholder { color: var(--fig-slice-muted); }
.chef-composer-input:disabled { color: var(--fig-slice-muted); }

.chef-composer-send {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: var(--fig-slice-blue);
    color: var(--fig-slice-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chef-composer-send:disabled {
    background: #c9cfda;
    color: #f8f7f4;
    cursor: default;
}

.chef-composer-send:focus-visible,
.chef-composer-cancel:focus-visible {
    outline: 3px solid var(--fig-slice-blue);
    outline-offset: 2px;
}

.chef-composer-cancel {
    position: absolute;
    right: 8px;
    top: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: none;
    border-radius: 16px;
    background: none;
    color: var(--fig-slice-blue);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.chef-status {
    position: relative;
    z-index: 1;
    flex: none;
    min-height: 18px;
    margin-top: 8px;
    font-size: 14px;
    color: var(--fig-slice-ink);
    text-align: center;
}

/* Пустой статус не участвует в раскладке: иначе он сдвигает композер от
   макетной позиции Figma 511:1349. */
.chef-status:empty { display: none; }

/* ── узкий экран (360×800, Figma 551:1501) ──────────────────────────────── */

@media (max-width: 379px) {
    .kitchen-catalog {
        grid-template-columns: 160px 160px;
        column-gap: 10px;
    }

    .chef-card { width: 160px; }

    .kitchen-head { margin-top: 34px; }

    .chef-request { padding: 11px 8px 9px; }

    .chef-bubble--request { width: 220px; }
    .chef-bubble--thinking,
    .chef-card-result,
    .chef-notice { width: 226px; }

    .chef-actions { right: 0; bottom: 39.7%; }
    .chef-actions-toggle { left: 6px; }
    .chef-actions-panel { left: 6px; }
}

.chef-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Книга рецептов (Figma R01 336:885) ─────────────────────────────────── */

.kitchen-book {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Исходная форма синей панели Figma (383×865): вырез вкладки — справа,
   под иконкой книги. */
.kitchen-book::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -75px;
    bottom: 0;
    background-image: url("assets/kitchen/panel-cookbook.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

/* Строка умного поиска 283×52 (Figma y151) и кнопка «+» 64×64 (y145).
   Отдельной кнопки/панели фильтров в макете нет. */
.kitchen-book-search {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 8px 0 15px;
}

.recipe-search {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    height: 52px;
    margin: 0;
    padding: 0 17px;
    font-family: var(--font-sans);
    font-size: 16px;
    color: #141a2e;
    background: var(--fig-slice-cream);
    border: 1px solid #d6dbe5;
    border-radius: 26px;
    -webkit-appearance: none;
    appearance: none;
}

.recipe-search::placeholder {
    color: #596579;
    opacity: 1;
}

.kitchen-book-add {
    flex: none;
    width: 64px;
    height: 64px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.kitchen-book-add:focus-visible {
    outline: 3px solid var(--fig-slice-blue);
    outline-offset: 2px;
    border-radius: 32px;
}

.kitchen-book-add-img {
    display: block;
    width: 48px;
    height: 50px;
    margin: 6px auto 0;
}

/* Окно списка 358×735 от y221. Нижний распор 190 px (Figma
   RecipeListBottomScrollSpacer) не даёт последней карточке уйти под
   нижнюю навигацию. */
.kitchen-book-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    margin-top: 12px;
    padding: 0 13px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.kitchen-book-spacer {
    height: 190px;
}

/* ── Компактные карточки рецептов (Figma 350:828) ──────────────────────── */

.recipe-card {
    position: relative;
    box-sizing: border-box;
    min-height: 200px;
    background: var(--fig-slice-cream);
    border: 1px solid #d6dbe5;
    border-radius: 24px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.recipe-card:active {
    transform: scale(0.98);
}

/* Аватар 52×52 с синей рамкой 2 px (Figma x15 y17). Внутри — кадр головы
   шефа 92×110 из исходного портрета либо фото профиля/заглушка. */
.recipe-card-avatar {
    position: absolute;
    left: 15px;
    top: 17px;
    width: 52px;
    height: 52px;
    box-sizing: border-box;
    border: 2px solid var(--fig-slice-blue);
    border-radius: 26px;
    overflow: hidden;
}

.recipe-card-avatar-img {
    position: absolute;
    display: block;
    max-width: none;
}

.recipe-card-avatar-img:not(.recipe-card-avatar-img--user) {
    width: 92px;
    height: 110px;
    left: -20px;
    top: -6px;
    object-fit: cover;
}

.recipe-card-avatar-img--user {
    width: 48px;
    height: 48px;
    left: 0;
    top: 0;
    object-fit: cover;
}

.recipe-card-meta {
    margin: 17px 96px 0 81px;
    font-size: 14px;
    line-height: 19px;
    color: #596579;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-card-title {
    margin: 6px 72px 0 81px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: #141a2e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-card-nutrition {
    position: absolute;
    left: 15px;
    right: 72px;
    top: 125px;
    font-size: 14px;
    line-height: 19px;
    color: #596579;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Подробный рецепт (Figma R02 362:820 / R10 549:1461) ───────────────── */

.recipe-full {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Та же синяя панель, что у книги рецептов: вкладка книги справа. */
.recipe-full::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -75px;
    bottom: 0;
    background-image: url("assets/kitchen/panel-cookbook.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

/* Окно 358×805 от y147: карточка рецепта прокручивается внутри него. */
.recipe-full-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 12px 13px 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.recipe-detail-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 16px 18px 28px;
    background: var(--fig-slice-cream);
    border: 1px solid #d6dbe5;
    border-radius: 24px;
    margin-bottom: 24px;
}

.recipe-detail-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.recipe-detail-avatar {
    position: relative;
    flex: none;
    width: 52px;
    height: 52px;
    box-sizing: border-box;
    border: 2px solid var(--fig-slice-blue);
    border-radius: 26px;
    overflow: hidden;
}

.recipe-detail-avatar-img {
    position: absolute;
    display: block;
    max-width: none;
}

.recipe-detail-avatar-img:not(.recipe-detail-avatar-img--user) {
    width: 92px;
    height: 110px;
    left: -20px;
    top: -6px;
    object-fit: cover;
}

.recipe-detail-avatar-img--user {
    width: 48px;
    height: 48px;
    left: 0;
    top: 0;
    object-fit: cover;
}

.recipe-detail-meta {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: #596579;
}

/* Крестик Figma: кремовый круг 48×48 с синей тенью-смещением. */
.recipe-detail-close {
    flex: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 24px;
    background: var(--fig-slice-cream);
    color: var(--fig-slice-blue);
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0, 87, 255, 0.65);
}

.recipe-full-title {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    color: #141a2e;
}

.recipe-detail-nutrition {
    margin: 0;
    font-size: 14px;
    color: #596579;
}

.recipe-detail-divider {
    height: 1px;
    background: #d6dbe5;
}

.recipe-full-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    font-size: 18px;
    line-height: 1.45;
    color: #141a2e;
}

.recipe-full-content h3,
.recipe-full-content h4,
.recipe-full-content h5 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #141a2e;
}

.recipe-full-content p {
    margin: 0;
    white-space: pre-wrap;
}

/* ── Часть 4.3: отметки рецепта и удаление (кнопки, popup-меню, подтверждение) ── */

.recipe-card-actions {
    position: absolute;
    right: 13px;
    bottom: 13px;
    width: 57px;
    height: 57px;
    padding: 0;
    border: none;
    border-radius: 28.5px;
    background: rgba(248, 247, 244, 0.75);
    color: #596579;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.recipe-full-actions {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #d6dbe5;
    border-radius: 22px;
    background: var(--fig-slice-cream);
    color: #596579;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

/* ── Отмена удаления сохранённого рецепта (как в дневнике) ─────────────── */

.recipe-undo {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 12px);
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 20px;
    background: var(--fig-slice-ink);
    color: var(--fig-slice-cream);
    box-shadow: 0 8px 24px rgba(28, 31, 38, 0.28);
}

.recipe-undo-text {
    font-size: 15px;
    font-weight: 600;
}

.recipe-undo-btn {
    min-height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 22px;
    background: var(--fig-slice-cream);
    color: var(--fig-slice-blue);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.recipe-actions-overlay {
    position: fixed;
    inset: 0;
    z-index: 350;
    background: rgba(15, 23, 42, 0.32);
}

.recipe-actions-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    padding: 8px 0 calc(8px + var(--safe-bottom));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.recipe-action-item {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    text-align: left;
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
}

.recipe-action-item:active {
    background: var(--bg);
}

.recipe-actions-separator {
    border-top: 1px solid var(--border);
    margin: 6px 0;
}

.recipe-action-danger {
    color: #e53935;
    font-weight: 600;
}

.recipe-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 360;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    padding: 24px;
}

.recipe-confirm-card {
    background: var(--card);
    border-radius: 16px;
    padding: 20px;
    max-width: 320px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.recipe-confirm-text {
    font-size: 15px;
    line-height: 1.45;
    color: var(--text);
    margin: 0 0 18px;
}

.recipe-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.recipe-confirm-cancel {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.recipe-confirm-ok-danger {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background: #e53935;
    border: 1px solid #e53935;
    border-radius: var(--radius);
    cursor: pointer;
}

.recipe-full-content ul,
.recipe-full-content ol {
    margin: 0;
    padding-left: 22px;
}

.chef-chat {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 0;
}

.chat-msg {
    padding: 10px 14px;
    border-radius: 14px;
    margin-bottom: 8px;
    max-width: 85%;
    font-size: 14px;
}

.chat-msg.user {
    background: var(--green);
    color: #fff;
    margin-left: auto;
}

.chat-msg.chef {
    background: var(--card);
    border: 1px solid var(--border);
}

.chat-msg.chef h3,
.chat-msg.chef h4,
.chat-msg.chef h5,
.text-entry h3,
.text-entry h4,
.text-entry h5 {
    margin: 0 0 4px;
    color: var(--text);
    font-weight: 700;
    line-height: 1.3;
}

.chat-msg.chef h3, .text-entry h3 { font-size: 15px; }
.chat-msg.chef h4, .text-entry h4 { font-size: 14px; }
.chat-msg.chef h5, .text-entry h5 { font-size: 13px; }

.chat-msg.chef p,
.text-entry p {
    margin: 0 0 4px;
    line-height: 1.45;
}

.chat-msg.chef p:last-child,
.text-entry p:last-child,
.chat-msg.chef ul:last-child,
.chat-msg.chef ol:last-child,
.text-entry ul:last-child,
.text-entry ol:last-child {
    margin-bottom: 0;
}

.chat-msg.chef ul,
.chat-msg.chef ol,
.text-entry ul,
.text-entry ol {
    margin: 0 0 4px;
    padding-left: 16px;
    line-height: 1.45;
}

.chat-msg.chef li,
.text-entry li {
    margin-bottom: 1px;
}

.chat-msg.chef strong,
.text-entry strong { font-weight: 700; }

.chat-msg.chef em,
.text-entry em { font-style: italic; }

.recipe-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.btn-save-recipe, .btn-rate {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 16px;
    cursor: pointer;
}

.btn-rate.active { background: var(--green); color: #fff; border-color: var(--green); }
.btn-rate.down.active { background: #DC2626; border-color: #DC2626; }

.chef-input-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.chef-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 16px;
    outline: none;
}

.chef-input:focus { border-color: var(--blue); }

.btn-chef-send {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.btn-back-chefs {
    background: none;
    border: none;
    color: var(--blue);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    align-self: flex-start;
}

/* ==================== ПРОФИЛЬ (Зеркало) ==================== */

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

.profile-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.profile-name { font-weight: 700; font-size: 18px; }

.btn-settings {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.profile-mirror {
    display: flex;
    gap: 12px;
}

.mirror-left {
    width: 140px;
    flex-shrink: 0;
    background: var(--card);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mirror-photo {
    width: 100px;
    height: 100px;
    border-radius: var(--radius);
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.mirror-label {
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

/* ==================== AVATAR BUTTON RESET ==================== */

.profile-avatar,
.mirror-photo {
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
}

.profile-avatar img,
.mirror-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar:disabled,
.mirror-photo:disabled,
.profile-avatar.avatar-uploading,
.mirror-photo.avatar-uploading {
    opacity: 0.6;
    cursor: wait;
}

.mirror-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.tracker-baseline {
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    border-left: 3px dashed var(--text-muted);
    opacity: 0.3;
    z-index: 0;
}

.tracker-card {
    background: var(--yellow);
    color: #fff;
    padding: 14px;
    border-radius: var(--radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.tracker-label { font-weight: 600; font-size: 14px; }
.tracker-value { font-weight: 800; font-size: 20px; }

.tracker-kbzu {
    background: var(--card);
    padding: 14px;
    border-radius: var(--radius);
    margin-top: auto;
    text-align: center;
}

/* Прогресс — пустое состояние */
.progress-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    background: var(--card);
    border-radius: var(--radius);
    text-align: center;
}

.progress-empty-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
}

.progress-empty-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
}

.btn-progress-add {
    background: var(--yellow);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}

.btn-progress-update {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

/* Check-in */
.checkin-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.checkin-title {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin: 0;
}

.checkin-note {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

.checkin-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkin-form label {
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}

.checkin-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
}

.checkin-input:focus {
    outline: none;
    border-color: var(--yellow);
}

.checkin-input:disabled {
    opacity: 0.6;
}

.checkin-error {
    font-size: 13px;
    color: var(--orange);
    margin-top: 2px;
}

.btn-checkin-save {
    background: var(--yellow);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 12px 0;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 12px;
    width: 100%;
}

.btn-checkin-save:disabled {
    opacity: 0.6;
    cursor: wait;
}

.btn-checkin-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
    text-align: center;
    width: 100%;
}

/* ==================== МОДАЛКИ ==================== */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.modal-content {
    background: var(--card);
    border-radius: var(--radius) var(--radius) 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
}

/* Календарь */

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

.cal-header-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.cal-nav-btn {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.cal-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 0;
}

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

.cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: var(--bg);
    cursor: pointer;
    color: var(--text-muted);
}

.cal-day-blank {
    background: transparent;
    cursor: default;
}

.cal-day.cal-today {
    background: var(--green);
    color: #fff;
}

.cal-day.cal-selected {
    border: 2px solid var(--blue);
    border-radius: 10px;
}

.cal-day.cal-has-entries {
    color: var(--text);
    font-weight: 700;
}

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

.cal-status-error {
    color: var(--orange);
    cursor: pointer;
    text-decoration: underline;
}

.cal-day-detail {
    margin-top: 16px;
}

.cal-day-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.cal-day-item {
    padding: 10px 12px;
    background: var(--bg);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-day-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.cal-day-item-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.calendar-kbzu {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

.calendar-summary {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Добавление еды */
.food-polaroid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.polaroid-frame {
    width: 200px;
    height: 200px;
    background: var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

#polaroidPhoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.polaroid-question {
    font-size: 72px;
    color: var(--text-muted);
    font-weight: 300;
}

.polaroid-actions {
    display: flex;
    gap: 20px;
}

.btn-polaroid {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--border);
    font-size: 24px;
    cursor: pointer;
}

.btn-save-food {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    border: none;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 12px;
}

.kbzu-panel {
    background: var(--blue);
    border-radius: var(--radius);
    padding: 20px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
}

.kbzu-grams {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    cursor: pointer;
}

.btn-kbzu {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.kbzu-details {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    font-size: 14px;
}

/* Food entry status */
.food-entry-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    min-height: 20px;
    margin-top: 4px;
}
.food-entry-status-error {
    color: var(--orange);
}

.recognized-food-name {
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

/* Inline edit of the recognized name (tap-to-edit) */
.name-edit-form {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    margin-top: 8px;
}
.name-edit-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    background: var(--bg);
    color: var(--text);
    box-sizing: border-box;
}
.name-edit-input:focus {
    border-color: var(--green);
}
.name-edit-submit {
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.name-edit-cancel {
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Manual food form */
.manual-food-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin-top: 8px;
}
.manual-food-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.manual-food-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    background: var(--bg);
    color: var(--text);
    box-sizing: border-box;
}
.manual-food-input:focus {
    border-color: var(--green);
}
.btn-manual-food-submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.btn-manual-food-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ==================== CARD ACTION MENU ==================== */
.polaroid-card, .text-entry {
    touch-action: pan-y;
}
.swipe-menu {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 140px;
    background: var(--card, #fff);
    display: none;
    flex-direction: column;
    border-radius: 0 var(--radius, 16px) var(--radius, 16px) 0;
    overflow: hidden;
    z-index: 4;
    box-shadow: -2px 0 12px rgba(0,0,0,0.08);
}
.swipe-menu.show { display: flex; }
.swipe-menu button {
    flex: 1;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px solid var(--border, #E1F2ED);
    color: var(--text, #0F172A);
}
.swipe-menu button:last-child { border-bottom: none; }
.swipe-menu .btn-edit { color: var(--blue, #2563EB); }
.swipe-menu .btn-delete { color: #DC2626; }
.swipe-menu .btn-photo { color: var(--text-muted, #64748B); }

.edit-modal-content { max-width: 320px; }
.edit-food-label {
    display: block;
    margin: 8px 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #0F172A);
}
.edit-food-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid var(--border, #E1F2ED);
    border-radius: 8px;
    font-size: 14px;
}
.edit-food-input:focus {
    outline: none;
    border-color: var(--green, #059669);
}
.btn-edit-save {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: var(--green, #059669);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.photo-choice-content { max-width: 320px; text-align: center; }
.photo-choice-content button:not(.modal-close) {
    width: 100%;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border, #E1F2ED);
    border-radius: 8px;
    background: var(--card, #fff);
    font-size: 14px;
    cursor: pointer;
}
.photo-choice-coming-soon {
    margin-top: 12px;
    padding: 10px;
    background: #FEF3C7;
    border-radius: 8px;
    font-size: 12px;
    color: #92400E;
}

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

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

.settings-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.settings-theme-row {
    display: flex;
    gap: 8px;
}

/* Уточнение к теме: «Системная» — это светлая тема по умолчанию, приложение
   не следует тёмной теме системы. Никаких обещаний system-dark. */
.settings-theme-hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
}

.settings-theme-btn {
    flex: 1;
    padding: 10px 8px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.settings-theme-btn.active {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.settings-value {
    font-size: 18px;
}

.settings-reset-btn {
    width: 100%;
    padding: 12px;
    border: 2px solid #DC2626;
    border-radius: 10px;
    background: none;
    color: #DC2626;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* ==================== ПОДТВЕРЖДЕНИЕ ПОЛНОГО СБРОСА (узел 469:1239) ==================== */
/* Белая карточка по центру экрана: заголовок, краткий текст и две кнопки —
   обводная «Отмена» и красная «Удалить и начать заново». */

#modal-full-reset {
    align-items: center;
    padding: 0 32px;
}

.full-reset-content {
    width: 100%;
    max-width: 350px;
    padding: 28px 24px;
    border-radius: 28px;
    background: #fff;
    text-align: left;
}

.full-reset-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--fig-slice-ink);
}

.full-reset-text {
    margin-top: 28px;
    font-size: 17px;
    font-weight: 500;
    line-height: 23px;
    color: var(--fig-slice-muted);
}

.full-reset-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 45px;
}

.btn-full-reset-cancel,
.btn-full-reset-execute {
    width: 100%;
    padding: 0 12px;
    border-radius: 20px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.btn-full-reset-cancel {
    height: 58px;
    border: 2px solid var(--fig-slice-blue);
    background: #fff;
    color: var(--fig-slice-blue);
}

.btn-full-reset-execute {
    height: 66px;
    border: none;
    background: #E81F3D;
    color: #fff;
}

.btn-full-reset-cancel:focus-visible,
.btn-full-reset-execute:focus-visible {
    outline: 3px solid var(--fig-slice-blue);
    outline-offset: 2px;
}

/* ==================== ЗНАКОМСТВО С ПРОФИЛЕМ ==================== */

.profile-intro-content {
    text-align: center;
    max-width: 320px;
}

.profile-intro-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.profile-intro-text {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.profile-intro-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.profile-intro-input:focus {
    border-color: var(--green);
}

.profile-intro-error {
    color: #DC2626;
    font-size: 13px;
    margin-bottom: 12px;
    text-align: left;
}

.btn-profile-intro-save {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
}

.btn-profile-intro-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-profile-intro-skip {
    width: 100%;
    padding: 14px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
}

.profile-intro-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==================== ТЁМНАЯ ТЕМА ==================== */

[data-theme="dark"] {
    --bg: #0F172A;
    --card: #1E293B;
    --text: #F1F5F9;
    --text-muted: #94A3B8;
    --border: #334155;
}

/* Future dates in calendar */
.cal-future {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

/* ============ Оценка ответа повара 👍/👎 (Block 2) ============ */
/* Backdrop ниже popup, оба выше чата и таб-бара */
.chef-feedback-backdrop {
    position: fixed;
    inset: 0;
    z-index: 380;
    background: rgba(15, 23, 42, 0.35);
}

.chef-feedback-popup {
    position: fixed;
    left: 12px;
    bottom: 16px;
    z-index: 381;
    width: calc(100% - 24px);
    box-sizing: border-box;
    flex-shrink: 0;
    max-width: 100%;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.chef-feedback-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text);
}

.chef-feedback-reasons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Длинные подписи переносятся, кнопка остаётся тапом ≥44px */
.chef-feedback-reason {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    cursor: pointer;
}

.chef-feedback-other {
    margin-top: 10px;
}

.chef-feedback-comment {
    width: 100%;
    box-sizing: border-box;
    min-height: 72px;
    max-height: 160px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    resize: vertical;
}

.chef-feedback-error {
    color: #DC2626;
    font-size: 13px;
    margin-top: 6px;
}

.chef-feedback-submit {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}

.chef-feedback-cancel {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}

.chef-feedback-submit {
    background: var(--green);
    border: 1px solid var(--green);
    color: #fff;
}

.chef-feedback-cancel {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

/* ==================== УЗКИЙ ЭКРАН (360px) ==================== */
/* Контрольные ширины по handoff: 360px — геометрия не должна обрезаться.
   Splash и onboarding заданы в vw от макета 414px, поэтому масштабируются
   сами; здесь остаются только правки нижней навигации. */

@media (max-width: 380px) {
    .btn-3d {
        font-size: 15px;
        padding: 0 14px;
        gap: 10px;
    }

    .tabbar-btn {
        padding-left: 0;
        padding-right: 0;
    }

    .tabbar-label {
        font-size: 11px;
    }

    .tabbar {
        padding-left: 0;
        padding-right: 0;
    }

    /* Дневник: на 360px неделя, итоги и карточки ужимаются, геометрия не режется. */
    .diary-day {
        font-size: 18px;
    }

    .diary-day--selected {
        font-size: 36px;
    }

    .diary-stats-value {
        font-size: 32px;
    }

    .diary-macros {
        font-size: 20px;
        padding: 0 8%;
    }

    .meal-card-name {
        font-size: 24px;
        line-height: 32px;
    }

    .meal-card-time {
        font-size: 18px;
    }

    .meal-card--text {
        padding-right: 70px;
    }
}

/* ==================== КОРОТКИЙ ЭКРАН ==================== */
/* Вертикальный шаг onboarding снят с макета 956px по высоте. На более низких
   экранах он немного ужимается, чтобы подпись и «Позже» оставались внутри
   синего контейнера, а не требовали прокрутки. */

@media (max-height: 940px) {
    .onboarding-screen {
        padding-top: 10vw;
        padding-bottom: 8vw;
    }

    .onboarding-panel {
        padding-top: 8vw;
        padding-bottom: 5vw;
    }

    .onboarding-cards {
        gap: 3.4vw;
        margin-top: 5vw;
    }

    .onboard-later {
        margin-top: 5vw;
    }

    .onboarding-caption {
        margin-top: 4vw;
    }
}

/* ==================== ПРОФИЛЬ (пятый срез) ==================== */
/* Композиция перенесена из авторских узлов Figma 455:1224 (пустой профиль) и
   455:1268 (профиль с замерами): синий контейнер 16..398 с радиусом 36, белая
   внутренняя карточка параметров, карточка «Всего за всё время» и кремовый экран
   редактирования 471:1240. Геометрия снята измерениями узлов на 414×956; цвета —
   из токенов среза (--fig-slice-*), своей палитры блок не вводит. В узлах отсчёт
   идёт от верха экрана устройства, где полосу статуса рисует система (~49 px),
   поэтому верхние отступы считаются от safe-area. */

.profile-page {
    background: var(--fig-slice-cream);
    padding: 0 16px calc(var(--tabbar-height) + var(--safe-bottom) + 116px) 16px;
    padding-top: calc(var(--safe-top) + 36px);
    overflow-x: hidden;
}

/* Нижний фейд 414×222 теперь часть общего компонента навигации (.tabbar-fade):
   в узле 455:1224 он лежит в том же боксе, что и сам компонент. */

/* ── Шапка: кольцо аватара 78, имя + подпись, круглая кнопка настроек 48 ── */

.pf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px 0 12px;   /* 16 страницы + 12 = 28 слева, + 14 = 30 справа */
    margin-bottom: 21px;
}

.pf-identity {
    display: flex;
    align-items: center;
    gap: 17px;
    min-height: 48px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.pf-avatar {
    position: relative;
    width: 78px;
    height: 78px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fff url("assets/profile/avatar-ring.svg") center / 78px 78px no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pf-avatar img {
    display: block;
    border-radius: 50%;
}

/* Загруженное фото заполняет кольцо, авторская 3D-заглушка из онбординга
   сохраняет пропорции и центрируется. */
.pf-avatar img.pf-avatar-photo { width: 72px; height: 72px; object-fit: cover; }
.pf-avatar img.pf-avatar-photo--fallback { width: 64px; height: 64px; object-fit: contain; }

.pf-names {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-name {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--fig-slice-ink);
}

.pf-subtitle {
    font-size: 15px;
    font-weight: 600;
    color: var(--fig-slice-muted);
}

.pf-gear {
    width: 48px;
    height: 48px;
    min-height: 48px;
    flex: 0 0 auto;
    /* В узле 455:1224 кнопка стоит на 3 px выше центра аватара. */
    margin-top: -6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: url("assets/profile/settings-button.svg") center / 48px 48px no-repeat;
    /* Точная структура узла 455:1224/455:1268: поверх авторской рамки 48×48 —
       отдельный текстовый глиф U+2699 + U+FE0E, Nunito Sans SemiBold 27px,
       #0057FF, по центру рамки. */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fig-slice-blue);
    font-family: var(--font-sans);
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.pf-identity:focus-visible,
.pf-gear:focus-visible,
.pf-plus:focus-visible,
.pf-nutrition-value:focus-visible {
    outline: 3px solid var(--fig-slice-blue);
    outline-offset: 2px;
}

/* ── Карточки ── */

.pf-card {
    border-radius: 36px;
}

/* Синий контейнер: пустое и полное состояние отличаются только содержимым. */
.pf-card--hero {
    background: var(--fig-slice-blue);
    color: #fff;
    padding: 25px 12px 45px;
}

.pf-card--hero .pf-sheet {
    margin-top: 12px;
}

.pf-card--nutrition {
    background: #fff;
    border-radius: 28px;
    padding: 23px 24px 24px;
    margin-top: 18px;
}

.pf-card--nutrition[hidden],
.pf-card--nutrition.is-hidden {
    display: none;
}

/* ── Заголовки состояния ── */

.pf-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
}

#profileEmptyHead {
    margin-top: 9px;
}

.pf-hero-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Заголовок узла 455:1224 — ОДНА строка при каноническом размере 414×956.
   Раньше размер был придушен до 27px, потому что Nunito Sans шире шрифта
   макета и строка не влезала в бокс 334: при 27px её чернила 332.4 (в притирку),
   а на fallback-шрифте 335.3 — заголовок переносился на две строки и сдвигал
   подзаголовок/карточку/CTA на ~31 px. Теперь строка фиксируется геометрией
   (white-space: nowrap), а не уменьшением шрифта: размер — авторские 28/34,
   трекинг слегка поджат (Nunito на 28px даёт чернила 344.7 против авторских
   334 при боксе узла 338). */
.pf-hero-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 34px;
    letter-spacing: -0.5px;
    white-space: nowrap;
    color: #fff;
}

/* Узкий экран (360×800): заголовок остаётся ОДНОЙ строкой. Уменьшаются только
   размер и трекинг — line-height 34px сохраняется, поэтому description/card/CTA
   не сдвигаются (anchors те же), а чернила 289 px укладываются в доступные
   292 px, то есть горизонтального переполнения и обрезки строки нет.
   Блок обязан идти ПОСЛЕ базового правила: иначе тот же селектор вне media-query
   перебивает его по порядку каскада. */
@media (max-width: 380px) {
    .pf-hero-title {
        font-size: 24px;
        letter-spacing: -0.3px;
    }
}

/* Отступ компенсирует рост строки заголовка 31.05 → 34 px, чтобы подзаголовок
   (и всё, что ниже) остался на авторских anchors. */
.pf-hero-sub {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    color: rgba(255, 255, 255, 0.45);
}

/* В узле 455:1224 подсказка отделена от заголовка большим интервалом и
   переносится после слова «хочешь». Отступ тоже компенсирован на рост строки
   заголовка: description остаётся на авторском anchor. */
.pf-hero-sub--wide {
    margin-top: 44px;
    max-width: 330px;
}

/* Зелёная кнопка «обновить замеры» (авторский 48×50 плюс, узел 455:1268). */
.pf-plus {
    width: 48px;
    height: 50px;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.pf-plus img {
    display: block;
    width: 48px;
    height: 50px;
}

/* ── Внутренняя белая карточка ── */

.pf-sheet {
    background: #fff;
    border-radius: 28px;
}

/* Пустое состояние: карточка-превью параметров внутри синего контейнера. */
.pf-empty .pf-sheet {
    margin: 8px 4px 0;
    padding: 6px 22px 5px;
}

/* Полное состояние: строки параметров (шаг строки 96 px, шапка 322 px — узел 455:1268). */
#profileMetricsSheet {
    padding: 21px 0 46px;
}

.pf-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    border-bottom: 2px solid var(--fig-slice-sky);
}

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

.pf-preview-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--fig-slice-ink);
}

/* «—» без данных: тонкая линия 20×1, как в узле 455:1224. */
.pf-preview-dash {
    width: 20px;
    height: 1px;
    margin-right: 11px;
    background: #7F8EAB;
}

/* Зелёный CTA пустого состояния: 232×68, радиус 20, синий «+» и тёмная подпись
   (авторская высота узла 455:1224 — ровно 68 px; нижнюю 3D-грань не рисуем). */
.btn-progress-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 31px;
    width: 232px;
    height: 68px;
    margin: 65px auto 0;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: var(--fig-slice-green);
    color: var(--fig-slice-ink);
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.pf-cta-plus {
    position: relative;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.pf-cta-plus::before,
.pf-cta-plus::after {
    content: '';
    position: absolute;
    background: var(--fig-slice-blue);
}

.pf-cta-plus::before {
    left: 0;
    right: 0;
    top: 5.5px;
    height: 2px;
}

.pf-cta-plus::after {
    top: 0;
    bottom: 0;
    left: 5.5px;
    width: 2px;
}

/* ── Полные замеры: подпись, строка значений и шкала изменения ── */

.pf-metric {
    text-align: center;
}

.pf-metric + .pf-metric {
    margin-top: 33px;
}

.pf-metric-label {
    font-size: 19px;
    line-height: 24px;
    font-weight: 700;
    color: var(--fig-slice-ink);
}

.pf-metric-line {
    margin-top: 13px;
    font-size: 15px;
    line-height: 18px;
    font-weight: 600;
    color: var(--fig-slice-muted);
}

.pf-metric-arrow,
.pf-metric-sep {
    margin: 0 4px;
}

/* Нейтральный индикатор: 0 в центре, минус влево, плюс вправо, точное число —
   в строке значений. Масштаб симметричный (PROFILE_DELTA_CLAMP = ±20 %),
   за краем шкалы точка остаётся на краю. */
.pf-track {
    position: relative;
    height: 4px;
    margin: 4px 38px 0;
    border-radius: 2px;
    background: var(--fig-slice-sky);
}

.pf-track-fill {
    position: absolute;
    top: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--fig-slice-blue);
}

.pf-delta-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: url("assets/profile/delta-knob.svg") center / 12px 12px no-repeat;
    transition: left 240ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .pf-delta-knob {
        transition: none;
    }
}

/* ── «Всего за всё время» ── */

.pf-nutrition-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--fig-slice-muted);
}

.pf-nutrition-row {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.pf-nutrition-value {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--fig-slice-ink);
}

.pf-nutrition-unit {
    margin-left: 52px;
    font-size: 17px;
    font-weight: 600;
    color: var(--fig-slice-muted);
}

.pf-nutrition-macros {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fig-slice-muted);
}

.pf-nutrition-note {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--fig-slice-muted);
}

.pf-nutrition-note:empty {
    display: none;
}

/* ==================== РЕДАКТИРОВАНИЕ ПРОФИЛЯ (узел 471:1240) ==================== */
/* Кремовый экран на всю высоту, «← Назад», синяя карточка с фото, полем
   «Имя или ник» и зелёной кнопкой сохранения. */

#modal-profile-edit {
    align-items: stretch;
    background: var(--fig-slice-cream);
    padding: 0;
}

#modal-profile-edit .pf-edit-content {
    width: 100%;
    max-width: none;
    max-height: none;
    background: transparent;
    border-radius: 0;
    padding: calc(var(--safe-top) + 14px) 16px calc(var(--safe-bottom) + 24px);
}

.pf-edit-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 0 0 1px 8px;
    padding: 0;
    background: none;
    border: none;
    color: var(--fig-slice-blue);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.pf-edit-card {
    background: var(--fig-slice-blue);
    border-radius: 36px;
    padding: 39px 16px 16px;
}

.pf-edit-title {
    padding: 0 9px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.pf-edit-sub {
    margin-top: 9px;
    padding: 0 7px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
}

/* Фото: кремовый круг 136 с зелёным бейджем 40 в правом нижнем углу. */
.pf-edit-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 41px auto 0;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.pf-edit-photo-wrap {
    position: relative;
    width: 136px;
    height: 136px;
}

.pf-edit-photo-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    background: var(--fig-slice-cream);
    overflow: hidden;
}

.pf-edit-photo-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-edit-photo-plus {
    position: absolute;
    left: 101px;
    top: 99px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fig-slice-green);
}

.pf-edit-photo-plus::before,
.pf-edit-photo-plus::after {
    content: '';
    position: absolute;
    background: #fff;
}

.pf-edit-photo-plus::before {
    left: 13px;
    right: 13px;
    top: 18.5px;
    height: 3px;
}

.pf-edit-photo-plus::after {
    top: 13px;
    bottom: 13px;
    left: 18.5px;
    width: 3px;
}

.pf-edit-photo-hint {
    margin-top: 23px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.pf-edit-photo-sub {
    margin-top: 11px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
}

.pf-edit-form {
    margin-top: 26px;
}

/* Белая плашка поля: подпись «Имя или ник» внутри рамки, как в узле. */
.pf-edit-field {
    display: block;
    padding: 12px 19px 27px;
    background: #fff;
    border-radius: 24px;
}

.pf-edit-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--fig-slice-muted);
}

.pf-edit-input {
    display: block;
    width: 100%;
    margin-top: 9px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    color: var(--fig-slice-ink);
}

.pf-edit-input:focus {
    outline: none;
}

.pf-edit-error {
    margin-top: 8px;
    padding: 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: #FFD7E0;
}

.pf-edit-save {
    display: block;
    width: 270px;
    height: 64px;
    margin: 28px auto 0;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: var(--fig-slice-green);
    color: var(--fig-slice-ink);
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.pf-edit-hint {
    margin-top: 23px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
}