/* Оформление мини-приложения «Рацио». Образец — холст с макетом (см. CLAUDE.md).
   Цвета и размеры заданы один раз, в начале файла; тёмная тема — вторым набором тех же имён. */

/* --- Шрифты (лежат в проекте, fonts/): Unbounded — заголовки экранов и числа, Onest — всё остальное --- */
@font-face { font-family: 'Onest'; font-weight: 400 700; font-display: swap;
  src: url(fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-weight: 400 700; font-display: swap;
  src: url(fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-weight: 400 700; font-display: swap;
  src: url(fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 400 600; font-display: swap;
  src: url(fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 400 600; font-display: swap;
  src: url(fonts/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-weight: 400 600; font-display: swap;
  src: url(fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Цвета: светлая тема --- */
:root {
  color-scheme: light;
  --ground: #F4F2F6;      /* фон страницы */
  --surface: #FFFFFF;     /* блоки */
  --ink: #231B27;         /* текст */
  --ink2: #685E6D;        /* второстепенный текст */
  --line: #E6E1E9;        /* тонкие линии */
  --accent: #8C1D4F;      /* свекольный: кнопки и заливки */
  --accent-ink: #8C1D4F;  /* свекольный для текста и значков */
  --on-accent: #FFFFFF;
  --tint: #F7E6EE;        /* светлая свекольная подложка */
  --tint-ink: #5C1638;
  --night: #5C1638;       /* блок «Сегодня вечером» */
  --danger: #B3261E;
  --warn: #9A5200;        /* меньше нормы */
  --soft: #EFEBF1;        /* незаполненная часть полос */
  /* Полоса дня: от светлого утра к тёмному вечеру */
  --m1: #EEC2D4;          /* завтрак */
  --m15: #E6A8C1;         /* перекус до обеда */
  --m2: #DE8EAE;          /* обед */
  --m3: #B8457A;          /* перекус после обеда */
  --m4: #5C1638;          /* ужин */
  /* Белки, жиры, углеводы */
  --mac1: #231B27;
  --mac2: #8A7F8F;
  --mac3: #D8D1DC;
  --tick: #B7ADBB;
  /* Высота панели разделов внизу: над ней стоит полоса корзины в «Покупках» */
  --tabs-h: calc(63px + max(14px, env(safe-area-inset-bottom, 0px)));
}

/* --- Цвета: тёмная тема (по теме Telegram; вне Telegram — по теме устройства) --- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #17121A; --surface: #231C27; --ink: #F3EEF5; --ink2: #ADA2B2; --line: #362C3A;
  --accent: #B3326C; --accent-ink: #E48AB0; --tint: #3A2231; --tint-ink: #F3D3E0;
  --night: #4E1532; --danger: #F2867E; --warn: #E8B06A; --soft: #2E2632;
  --m4: #7A2352;
  --mac1: #F3EEF5; --mac2: #9A8FA0; --mac3: #4A3F50; --tick: #5A4E5F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ground: #17121A; --surface: #231C27; --ink: #F3EEF5; --ink2: #ADA2B2; --line: #362C3A;
    --accent: #B3326C; --accent-ink: #E48AB0; --tint: #3A2231; --tint-ink: #F3D3E0;
    --night: #4E1532; --danger: #F2867E; --warn: #E8B06A; --soft: #2E2632;
    --m4: #7A2352;
    --mac1: #F3EEF5; --mac2: #9A8FA0; --mac3: #4A3F50; --tick: #5A4E5F;
  }
}

/* --- Основа --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.u { font-family: 'Unbounded', 'Onest', system-ui, sans-serif; }   /* заголовки экранов и числа */
.tn { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink2); }

/* Цвета приёмов пищи: заливка и цвет текста на ней */
.c-m1 { background: var(--m1); color: #231B27; }
.c-m15 { background: var(--m15); color: #231B27; }
.c-m2 { background: var(--m2); color: #231B27; }
.c-m3 { background: var(--m3); color: #FFFFFF; }
.c-m4 { background: var(--m4); color: #FFFFFF; }

/* --- Экран --- */
.screen {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.title { padding: 0 4px; font-size: 25px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; }
.card { margin-top: 16px; padding: 18px 20px; background: var(--surface); border-radius: 22px; }
.h2 { font-size: 17px; line-height: 1.3; font-weight: 600; }
.text { font-size: 15px; line-height: 1.45; }
.dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; }

/* Полоса из частей в настоящей пропорции: ширину каждой части задаёт программа */
.band { display: flex; gap: 3px; }
.band > i { border-radius: 4px; min-width: 6px; }
.band > i:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.band > i:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

/* --- Состояния: загрузка и отказ --- */
.state {
  min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center; color: var(--ink2); font-size: 16px; line-height: 1.45;
}
.state-text { max-width: 320px; color: var(--ink); }
.btn {
  min-height: 52px; padding: 0 22px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 600;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-outline { border: 1.5px solid var(--accent-ink); color: var(--accent-ink); }

/* --- Моя норма --- */
.norm-kcal { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.norm-kcal-n { font-size: 48px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; }
.norm-band { height: 40px; margin-top: 18px; }
.norm-meals { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: 15px; }
.norm-meals li { display: flex; align-items: center; gap: 8px; }
.norm-meals span { flex-grow: 1; min-width: 0; }
.norm-meals b { font-weight: 600; }

.ruler { margin-top: 18px; }
.ruler-scale { position: relative; height: 24px; }
.ruler-line { position: absolute; left: 0; right: 0; top: 11px; height: 2px; border-radius: 1px; background: var(--line); }
.ruler-ticks {
  position: absolute; left: 0; right: 0; top: 4px; height: 16px; padding: 0 7px;
  display: flex; align-items: center; justify-content: space-between;
}
.ruler-ticks i { width: 1px; height: 8px; background: var(--tick); }
.ruler-ticks i.major { width: 2px; height: 16px; background: var(--ink2); }
.ruler-mark {
  position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--accent);
}
/* Подписи стоят точно под длинными делениями: у каждой «ширина» как у деления, текст — по его центру */
.ruler-labels { margin-top: 8px; padding: 0 7px; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink2); }
.ruler-labels span { width: 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; }
.ruler-labels b { font-size: 14px; font-weight: 500; color: var(--ink); }
.ruler-labels .mid { font-weight: 400; color: var(--ink2); }
.norm-tempo { margin-top: 16px; }
.norm-limit { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--tint); color: var(--tint-ink); font-size: 14px; line-height: 1.4; }

.macro-band { height: 12px; margin-top: 14px; gap: 2px; }
.macro-band > i { border-radius: 2px; }
.macro-band > i:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.macro-band > i:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.c-mac1 { background: var(--mac1); }
.c-mac2 { background: var(--mac2); }
.c-mac3 { background: var(--mac3); }
.macros { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.macros li { display: flex; flex-direction: column; gap: 2px; }
.macros .label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.macros .value { font-size: 17px; font-weight: 500; }
.norm-fiber { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.norm-details { margin: 16px 4px 0; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.disclaimer {
  margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px;
  font-size: 14px; line-height: 1.45; color: var(--ink2);
}

/* --- Общие части экранов --- */
.with-tabs { padding-bottom: calc(var(--tabs-h) + 24px); }
.head { padding: 0 4px; }
.head .title { padding: 0; }
.sub { margin-top: 6px; font-size: 15px; color: var(--ink2); }
.small { font-size: 13px; }
.h2.big { font-size: 18px; }
.notice { margin-top: 16px; padding: 12px 16px; border-radius: 18px; background: var(--surface); font-size: 15px; line-height: 1.45; }
.notice.tint { background: var(--tint); color: var(--tint-ink); }
.footnote { margin: 12px 4px 0; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.backlink { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -8px 0 4px -6px; padding: 0 10px 0 2px; font-size: 16px; }

/* Список строк в одном блоке: блюда дня, дни недели */
.list { margin-top: 16px; background: var(--surface); border-radius: 22px; overflow: hidden; }
.row { width: 100%; min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 14px; }
.row + .row { box-shadow: inset 0 1px 0 var(--line); }
.row-icon, .info-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.row-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-label { font-size: 13px; color: var(--ink2); }
.row-name { font-size: 16px; font-weight: 500; line-height: 1.3; }
.row-time { flex-shrink: 0; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink2); }
.info { width: 100%; margin-top: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 22px; }
.info-icon { background: var(--tint); color: var(--accent-ink); }

/* Разделы внизу экрана */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 6px 6px max(14px, env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
}
.tab { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 500; color: var(--ink2); }
.tab.on { font-weight: 600; color: var(--accent-ink); }

/* --- Сегодня --- */
.days { margin-top: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.day { height: 62px; border-radius: 15px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.day span { font-size: 12px; color: var(--ink2); }
.day b { font-size: 17px; font-weight: 500; }
.day svg { color: var(--accent-ink); }
.day.now b, .day.now span { color: var(--accent-ink); }
.day.on { background: var(--accent); }
.day.on span, .day.on b, .day.on svg { color: var(--on-accent); }

.daycard { padding: 16px 16px 14px; }
.daycard .text b { color: var(--ink); font-weight: 600; }
.day-band { height: 56px; margin-top: 12px; }
.day-band > i { display: flex; align-items: center; justify-content: center; border-radius: 5px; }
.day-band > i:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.day-band > i:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.day-kcal { margin-top: 6px; display: flex; gap: 3px; font-size: 12px; font-weight: 500; }
.day-kcal span { min-width: 6px; text-align: center; white-space: nowrap; }
.meters { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.meters li { display: flex; flex-direction: column; gap: 2px; }
.meter-label { font-size: 13px; color: var(--ink2); }
.meter-value { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 600; }
.meter-value.short { color: var(--warn); }
.meter-ok { display: flex; color: var(--accent-ink); }
.meter-norm { font-size: 12px; color: var(--ink2); }
.meters-note { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--warn); }

/* «Сегодня вечером»: тёмный блок — вечер */
.night { margin-top: 16px; padding: 18px; border-radius: 22px; background: var(--night); color: #FFFFFF; }
.night-head { display: flex; align-items: center; gap: 10px; }
.night-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center; }
.night-for { margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.night-tasks { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.94); }
.night-tasks b { font-weight: 600; color: #FFFFFF; }

/* --- Рецепт --- */
.dish-meal { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); }
.dish-meal-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.dish-name { margin-top: 10px; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.facts li { display: flex; flex-direction: column; gap: 2px; }
.facts .label { font-size: 13px; color: var(--ink2); }
.facts .value { font-size: 18px; font-weight: 500; }
.facts-legend { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.facts-legend li { display: flex; align-items: center; gap: 6px; }
.card.flush { padding: 6px 0 4px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 20px 8px; }
.ingredients { padding: 0 20px; }
.ingredients li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.35; }
.ing-name { flex-grow: 1; min-width: 0; }
.ing-amount { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.ing-amount b { font-weight: 600; }
.card-note { margin: 4px 20px 12px; font-size: 13px; color: var(--ink2); }
.steps { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: flex; gap: 14px; font-size: 16px; line-height: 1.5; }
.step-n { flex-shrink: 0; width: 22px; font-weight: 500; color: var(--accent-ink); }
.neighbors { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.neighbor { min-height: 52px; padding: 0 14px; border-radius: 16px; background: var(--surface); display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
.neighbor.end { justify-content: flex-end; }
.neighbor svg { color: var(--ink2); }

/* --- Неделя --- */
.budget-sum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.budget-n { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.budget-bar { margin-top: 12px; height: 10px; border-radius: 5px; overflow: hidden; display: flex; gap: 2px; background: var(--soft); }
.c-main { background: var(--accent); }
.c-restock { background: var(--m2); }
.budget-legend { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.budget-legend li { display: flex; align-items: center; gap: 10px; }
.budget-legend span { flex-grow: 1; min-width: 0; }
.budget-legend b { font-weight: 600; white-space: nowrap; }
.budget-none { margin-top: 10px; }
.week-day { width: 100%; display: flex; gap: 12px; padding: 16px; }
.week-day + .week-day { box-shadow: inset 0 1px 0 var(--line); }
.week-day.now { background: var(--tint); box-shadow: none; }
.week-day.past { opacity: 0.6; }
.week-date { flex-shrink: 0; width: 52px; display: flex; flex-direction: column; }
.week-date span { font-size: 13px; color: var(--ink2); }
.week-date b { font-size: 20px; line-height: 1.2; font-weight: 500; }
.week-date em { margin-top: 4px; font-size: 12px; font-style: normal; font-weight: 600; }
.week-day.now .week-date span, .week-day.now .week-date b, .week-day.now .week-date em { color: var(--accent-ink); }
.week-dishes { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; font-size: 15px; line-height: 1.35; }
.week-dish { display: flex; align-items: flex-start; gap: 10px; }
.week-dish .dot { margin-top: 5px; }
.week-evening { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink2); }
.week-evening svg { flex-shrink: 0; margin-top: 1px; }
.week-restock { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--tint); color: var(--tint-ink); font-size: 14px; line-height: 1.35; font-weight: 500; }
.week-restock .week-date { color: var(--accent-ink); }

/* --- Покупки --- */
.with-cartbar { padding-bottom: calc(var(--tabs-h) + 96px); }
.seg { margin-top: 16px; padding: 4px; border-radius: 18px; background: var(--surface); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.seg-item { padding: 9px 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 1px; }
.seg-item b { font-size: 15px; font-weight: 600; }
.seg-item span { font-size: 13px; color: var(--ink2); }
.seg-item.on { background: var(--accent); color: var(--on-accent); }
.seg-item.on span { color: var(--on-accent); opacity: 0.85; }
.progress { margin-top: 16px; padding: 0 4px; }
.progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.progress-row b { font-size: 16px; font-weight: 600; }
.progress-row span { font-size: 14px; color: var(--ink2); }
.progress-bar { margin-top: 8px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); }
.progress-bar i { display: block; height: 6px; border-radius: 3px; background: var(--accent); }
.progress p { margin-top: 10px; line-height: 1.4; }
.notice.warn { color: var(--warn); }
.cart-links { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }

/* Список — одним листом, как чек */
.receipt { padding: 6px 0 0; }
.receipt-h { padding: 16px 20px 2px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.item { display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 0 20px 0 10px; }
.check { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.check-box { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--tick); background: var(--surface); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.item.done .check-box { border-color: var(--accent); background: var(--accent); }
.item-text { flex-grow: 1; min-width: 0; padding: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.item-name { font-size: 15px; line-height: 1.3; }
.item-sub { font-size: 13px; line-height: 1.3; color: var(--ink2); }
.item-rub { flex-shrink: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
.item.done .item-name, .item.done .item-rub { color: var(--ink2); }
.receipt-total { margin-top: 8px; padding: 16px 20px 20px; border-top: 1px dashed var(--tick); display: flex; align-items: baseline; gap: 8px; font-size: 16px; }
.receipt-total i { flex-grow: 1; border-bottom: 2px dotted var(--tick); }
.receipt-total b { font-weight: 600; }
.receipt-total b.u { font-size: 18px; font-weight: 500; white-space: nowrap; }

/* Полоса над разделами: сумма недели и корзина */
.cartbar {
  position: fixed; left: 0; right: 0; bottom: var(--tabs-h); z-index: 9;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--surface); border-top: 1px solid var(--line);
}
.cartbar-sum { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.cartbar-sum b { font-size: 15px; font-weight: 600; }
.cartbar-sum span { font-size: 13px; color: var(--ink2); }
.cartbar .btn { flex-shrink: 0; min-height: 48px; padding: 0 18px; border-radius: 14px; font-size: 15px; }
.btn[disabled] { opacity: 0.7; }
a.info { color: inherit; }

/* --- Кнопки и общие мелочи шага «действия» --- */
.btn.wide { width: 100%; margin-top: 12px; }
.btn-quiet { color: var(--ink2); font-weight: 500; }
.btn-danger { background: var(--danger); color: var(--surface); }
.stack { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.pre { white-space: pre-line; }
.sub.pad { padding: 0 4px; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.notice p + .btn, .notice .offer { margin-top: 12px; width: 100%; }
.group { margin: 22px 4px 8px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Замена блюда --- */
.current-dish { margin-top: 16px; padding: 14px; border-radius: 18px; background: var(--soft); display: flex; align-items: flex-start; gap: 12px; }
.current-dish-name { font-size: 17px; font-weight: 600; line-height: 1.3; }
.arrow-row { margin: 10px 0 10px 21px; display: flex; align-items: center; gap: 12px; font-size: 16px; }
.arrow-row b { font-weight: 600; }
.arrow-dot { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.options { display: flex; flex-direction: column; gap: 8px; }
.option { width: 100%; padding: 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); display: flex; align-items: flex-start; gap: 12px; }
.option.on { border-color: var(--accent-ink); background: var(--tint); }
.option.big { padding: 16px; border-radius: 20px; gap: 14px; }
.option-name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.option-name.big { font-size: 17px; }
.option-sub { font-size: 14px; line-height: 1.35; color: var(--ink2); }
.option.on .option-sub, .option.on .row-time { color: var(--tint-ink); }
.radio { flex-shrink: 0; margin-top: 1px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--tick); display: flex; align-items: center; justify-content: center; }
.option.on .radio { border-color: var(--accent-ink); }
.option.on .radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-ink); }
.dish-actions { margin-top: 16px; }
.dish-actions .btn { width: 100%; }

/* --- Настройки --- */
.srow { width: 100%; min-height: 56px; padding: 8px 16px; display: flex; align-items: center; gap: 12px; font-size: 16px; }
.srow + .srow, .field + .srow { box-shadow: inset 0 1px 0 var(--line); }
.srow.top { align-items: flex-start; padding: 14px 16px; }
.srow-name { flex-grow: 1; min-width: 0; }
.srow-value { color: var(--ink2); }
.srow svg { flex-shrink: 0; color: var(--ink2); }
.srow.danger, .srow.danger svg { color: var(--danger); }
.seg-item.center { align-items: center; padding: 10px; }
.seg-item.center b { font-size: 16px; font-weight: 500; }
.chips-card { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chip { min-height: 44px; border-radius: 22px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.chip.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.chip.own { border-style: dashed; border-color: var(--tick); font-weight: 500; color: var(--ink2); }
.chip.own.on { border-style: solid; border-color: var(--accent); color: var(--on-accent); }
.switch { flex-shrink: 0; width: 52px; height: 32px; padding: 3px; border-radius: 16px; background: var(--tick); display: flex; }
.switch span { width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(35, 27, 39, 0.25); transition: transform 0.15s; }
.switch.on { background: var(--accent); }
.switch.on span { transform: translateX(20px); }
.field { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chips-card .field { padding: 6px 4px 4px; }
.field-label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.field-box { display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1.5px solid var(--tick); border-radius: 14px; background: var(--ground); }
.field-box:focus-within { border-color: var(--accent-ink); }
.field-box input { flex-grow: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 18px; }
.field-error { font-size: 14px; line-height: 1.4; color: var(--warn); }
.field-buttons { display: flex; gap: 8px; }
.field-buttons .btn { min-height: 48px; border-radius: 14px; }
.field-buttons .btn-primary { flex-grow: 1; }

/* --- Первый вход: согласие и анкета --- */
.welcome-title { margin-top: 12px; padding: 0 4px; font-size: 34px; line-height: 1.1; font-weight: 500; color: var(--accent-ink); letter-spacing: -0.02em; }
.welcome-lead { margin-top: 10px; padding: 0 4px; font-size: 17px; line-height: 1.45; }
.welcome-point { display: flex; align-items: flex-start; gap: 14px; }
.welcome-point .text { margin-top: 4px; }
.quiz-step { margin-top: 4px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.quiz-bar { margin: 8px 4px 20px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.2s; }
.quiz-q { margin-top: 4px; }
.quiz-list { padding-left: 38px; list-style: disc; font-size: 15px; line-height: 1.45; }
.quiz-list li + li { margin-top: 6px; }
.quiz-list li::marker { color: var(--accent-ink); }
.quiz-options { margin-top: 16px; }
.quiz-field { padding: 6px 4px; }
.pad-top { margin-top: 20px; padding: 0 4px; }
.pad-top + .sub { padding: 0 4px; }

/* Меню ещё нет */
.empty { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 8px; text-align: center; }
.empty .text { max-width: 340px; }
.empty .btn.wide { max-width: 340px; }
.empty-icon { width: 72px; height: 72px; border-radius: 22px; background: var(--tint); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}