/* EMFiT — веб-приложение
   Design system ported 1:1 from the iOS app (Constants.swift) */

/* ════════════════════════════════════════════════════════════════
   THEME LAYER — один спокойный нейтральный фон на все темы; тема
   меняет только акцент и цвет текста. Раньше здесь был насыщенный
   пастельный --bg + анимированные орбы под каждую тему — убрано:
   спорило со сдержанным, score-first стилем остального редизайна.
   ════════════════════════════════════════════════════════════════ */
:root, [data-theme="green"] {        /* 🌿 по умолчанию */
  --accent: oklch(52% 0.13 145); --ink-base: oklch(22% 0.045 145);
}
[data-theme="blue"] {                /* 🌙 */
  --accent: oklch(48% 0.14 260); --ink-base: oklch(20% 0.045 260);
}
[data-theme="bordo"] {               /* 🔥 */
  --accent: oklch(52% 0.16 35);  --ink-base: oklch(24% 0.05 35);
}
[data-theme="lavender"] {            /* 🌸 */
  --accent: oklch(50% 0.15 305); --ink-base: oklch(22% 0.05 305);
}
[data-theme="white"] {               /* белый фон, акцент — бронза */
  --accent: oklch(52% 0.07 70);  --ink-base: oklch(25% 0.025 70);
}

:root {
  /* Нейтральная поверхность — общая для всех тем, с едва заметным
     оттенком акцента вместо насыщенного пастельного поля. */
  --bg:    color-mix(in srgb, var(--accent) 4%, oklch(97.5% 0.006 145));
  --glass:        oklch(100% 0 0);
  --glass-strong: oklch(100% 0 0);
  --glass-border: oklch(22% 0.045 145 / .08);
  /* Тёплые фиксированные акценты для различения макросов Б/Ж/У —
     не зависят от темы, всегда одни и те же (иначе жир/углеводы на
     дашборде теряют различимость, когда акцент темы тоже зелёный/синий). */
  --gold: oklch(74% 0.13 75);
  --clay: oklch(64% 0.09 55);

  /* Motion — именованные easing/duration вместо разрозненных ease/
     cubic-bezier по всему файлу (Hallmark motion discipline). Новые
     переходы должны ссылаться на эти токены; старые мигрируются
     постепенно, не одним проходом по всему файлу. */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;

  /* ── Алиасы: старые имена → новый тематический слой ──
     Вся компонентная вёрстка остаётся, но перекрашивается под тему. */
  --ink:   var(--ink-base);
  --ink2:  color-mix(in srgb, var(--ink-base) 76%, transparent);
  --ink3:  color-mix(in srgb, var(--ink-base) 50%, transparent);

  --forest:      var(--accent);
  --forest-mid:  color-mix(in srgb, var(--accent) 82%, #000);
  --forest-dark: color-mix(in srgb, var(--accent) 66%, #000);
  --forest-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --forest-tint: color-mix(in srgb, var(--accent) 42%, transparent);
  --terra:       var(--gold);
  --terra-dark:  color-mix(in srgb, var(--gold) 72%, #000);
  --terra-soft:  color-mix(in srgb, var(--gold) 22%, transparent);
  --terra-tint:  color-mix(in srgb, var(--gold) 42%, transparent);
  --sand:        var(--clay);
  --sand-dark:   var(--clay);
  --sand-light:  color-mix(in srgb, var(--clay) 18%, transparent);
  --sand-white:  var(--glass-strong);

  --bg-app:  var(--bg);
  --bg-card: var(--glass);
  --bg-soft: color-mix(in srgb, var(--ink-base) 6%, transparent);

  --rose:      oklch(56% 0.13 0);
  --rose-soft: color-mix(in srgb, oklch(56% 0.13 0) 18%, transparent);
  --online:    oklch(62% 0.15 150);

  --accent-soft: var(--forest-soft);

  /* Layout */
  --screen-pad: 20px;
  --card-radius: 20px;
  --tabbar-h: 78px;

  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Видимый фокус-ринг — раньше нигде не был задан глобально (только
   .field:focus гасил дефолтный outline через border-color, кнопки/ссылки/
   таб-бар не имели фокус-стейта вовсе). Мгновенный, не анимируется. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html, body {
  height: 100%;
  background: var(--bg-app);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

#app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  background: var(--bg-app);
  overflow: hidden;
}

.screen {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px);
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
/* auth/onboarding hide the tab bar (renderFlow()) — without this, .screen kept
   reserving var(--tabbar-h) under content that has nothing sitting on it,
   which read as dead space and threw off vertical centering on the auth
   screen specifically. */
.screen.flow { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }

/* ── Boot loading screen (shown until the first render) ───────────
   Спортивные капибары: 4 SVG-варианта (штанга, мяч, гантеля, бегун)
   лежат стопкой в .boot-stage; инлайн-скрипт в index.html перемешивает
   их и по очереди даёт класс .show (кроссфейд). У каждого варианта своя
   микро-анимация инвентаря. */
.boot-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding-bottom: var(--tabbar-h);
}
.boot-circle { position: relative; width: 168px; height: 168px; border-radius: 50%; background: var(--forest-soft); overflow: hidden; }
.boot-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.boot-capy {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  opacity: 0; transform: translateX(10px) scale(.96);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.boot-capy.show { opacity: 1; transform: none; }
.cp-shadow, .cp-ball-shadow { fill: color-mix(in srgb, var(--ink-base) 20%, transparent); }
/* Дыхание/подскок всей капибары */
.cp-bob { animation: cp-bob 1.4s ease-in-out infinite alternate; }
/* Жим штанги над головой: гриф с лапами ходит вверх-вниз */
.cp-press { animation: cp-press 1.5s ease-in-out infinite; }
/* Подъём гантели на бицепс: качается вокруг плеча */
.cp-curl { transform-origin: 81px 78px; animation: cp-curl 1.4s ease-in-out infinite alternate; }
/* Моргание (обе точки-глаза) */
.cp-eye {
  transform-box: fill-box; transform-origin: center;
  animation: cp-blink 3.4s ease-in-out infinite;
}
.boot-title { font-size: 24px; color: var(--ink); opacity: 0; animation: cp-rise .6s ease .5s forwards; }
.boot-sub {
  font-size: 13px; color: var(--ink3); min-height: 18px;
  opacity: 0; animation: cp-rise .6s ease .75s forwards;
  transition: opacity .25s ease;            /* кроссфейд фраз из инлайн-скрипта */
}
@keyframes cp-glow  { from { opacity: .35; transform: scale(.92); } to { opacity: .7; transform: scale(1.05); } }
@keyframes cp-rise  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cp-bob   { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes cp-press {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes cp-curl  { from { transform: rotate(0deg); } to { transform: rotate(-14deg); } }
@keyframes cp-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.12); }
}
@media (prefers-reduced-motion: reduce) {
  .boot-title, .boot-sub { animation: none; opacity: 1; transform: none; }
  .boot-stage::before { animation: none; opacity: .4; }
  .boot-capy { transition: opacity .3s ease; transform: none; }
  .cp-bob, .cp-press, .cp-curl, .cp-eye { animation: none; }
}
.boot-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--bg-soft); border-top-color: var(--forest);
  animation: boot-spin .8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* ── Skeleton / shimmer loading placeholders ─────────────────────
   Used wherever a piece of UI is fetching async data, instead of a bare
   "Загрузка…" string. Width/height are set per-use via inline style or
   modifier classes below. */
.skel {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  border-radius: 10px;
}
.skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--ink-base) 0%, transparent) 35%,
    rgba(255,255,255,.55) 50%,
    transparent 65%);
  transform: translateX(-100%);
  animation: skel-shimmer 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
@keyframes skel-shimmer { to { transform: translateX(100%); } }

.skel-line { height: 12px; border-radius: 6px; }
.skel-line + .skel-line { margin-top: 8px; }
.skel-title { height: 18px; border-radius: 7px; width: 60%; }
.skel-card { height: 64px; border-radius: var(--card-radius); }
.skel-circle { border-radius: 50%; }

.skel-stack { display: flex; flex-direction: column; gap: 10px; }
.skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Typography helpers ───────────────────────────────────────── */
.display { font-family: var(--font-serif); font-weight: 400; color: var(--ink); line-height: 1.12; }
/* Эмфазис на акцентном слове заголовка — цветом, не курсивом. Курсив на
   дисплейном шрифте — один из самых узнаваемых AI-тэллов (Hallmark gate
   38a); было `font-style:italic` на всех 6 заголовках экранов. */
.display-i { font-style: normal; color: var(--accent); }
.eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink3);
}
.muted  { color: var(--ink3); }
.muted2 { color: var(--ink2); }

/* ── Header block ─────────────────────────────────────────────── */
.scr-header {
  padding: calc(env(safe-area-inset-top) + 16px) var(--screen-pad) 8px;
}
.scr-header h1 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; margin-top: 4px; padding-right: 78px; }
.scr-header p.sub { font-size: 14px; color: var(--ink3); margin-top: 4px; }

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.card-pad { padding: 18px; }
.section { padding: 0 var(--screen-pad); }
.mt6{margin-top:6px;} .mt8{margin-top:8px;} .mt10{margin-top:10px;} .mt12{margin-top:12px;}
/* mt14 разметка «Добавить приём пищи» использовала с самого начала, а правила
   для него не было — подписи «Порция, г», «Калории» и прочие прижимались
   вплотную к тексту над ними. */
.mt14{margin-top:14px;}
.mt16{margin-top:16px;} .mt20{margin-top:20px;} .mt24{margin-top:24px;}
.mb4{margin-bottom:4px;} .mb8{margin-bottom:8px;} .mb12{margin-bottom:12px;}
.mb16{margin-bottom:16px;} .mb20{margin-bottom:20px;}
.row { display: flex; align-items: center; }
.row-between { display:flex; align-items:center; justify-content:space-between; }
.gap8{gap:8px;} .gap10{gap:10px;} .gap12{gap:12px;} .gap14{gap:14px;}

/* ── Chips / pills / badges ───────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 4px 9px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.pill-forest, .pill-green { background: var(--forest-soft); color: var(--forest); }
.pill-terra  { background: var(--terra-soft);  color: var(--terra-dark); }
.pill-rose   { background: var(--rose-soft);   color: var(--rose); }
.pill-soft   { background: var(--bg-soft);     color: var(--ink3); }

.tag-mini { font-size: 9px; font-weight: 700; letter-spacing: 1px; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px;
  padding: 14px 18px; border-radius: 14px; border: none;
  cursor: pointer; width: 100%; transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--forest); color: #fff; }
.btn-terra   { background: var(--terra);  color: #fff; }
.btn-ghost   { background: var(--bg-soft); color: var(--ink); }
.btn-outline { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--forest-tint); }
.btn-sm { padding: 9px 14px; font-size: 13px; width: auto; border-radius: 10px; }

/* ── Progress bars ────────────────────────────────────────────── */
.bar { height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.bar > i, .bar > span { display:block; height:100%; border-radius:999px; background: var(--forest); }
.bar.terra > i { background: var(--terra); }
.bar.sand  > i { background: var(--sand-dark); }
.bar.rose  > i { background: var(--rose); }

/* ── Ring (macro circular) ────────────────────────────────────── */
.ring { position: relative; width: 96px; height: 96px; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-center {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.ring .ring-center .v { font-family: var(--font-serif); font-size: 22px; line-height: 1; }
.ring .ring-center .l { font-size: 10px; color: var(--ink3); margin-top: 2px; }

/* ── Premium hero ring (Oura-style gradient + soft halo, light palette) ──
   Reserved for one focal ring per screen via ring(...,glow:true) — plain
   rings elsewhere stay flat so this doesn't turn into decoration everywhere. */
.ring-glow::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--glow-color, var(--accent)) 32%, transparent) 0%, transparent 72%);
  filter: blur(14px); z-index: -1;
}
.ring-glow svg circle.val {
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--glow-color, var(--accent)) 35%, transparent));
}

/* ── Stat tiles ───────────────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat {
  background: var(--bg-card); border-radius: 16px; padding: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.stat .v { font-family: var(--font-serif); font-size: 20px; }
.stat .l { font-size: 11px; color: var(--ink3); margin-top: 2px; }

/* ── Macro legend row ─────────────────────────────────────────── */
.macro-row { display:flex; align-items:center; justify-content:space-between; padding: 7px 0; }
.macro-row .dot { width:9px; height:9px; border-radius:50%; }
.macro-row .name { font-size: 13px; font-weight:600; }
.macro-row .val { font-size: 12px; color: var(--ink3); }

/* ── Food grid — тот же фото-карточный язык, что и .recipe-card (см.
   _recipeCardHtml): плитка/фото сверху с бейджем категории поверх, имя +
   БЖУ снизу. Каталог БЖУ/сочетаний и рецепты теперь визуально одна
   система, а не два разных стиля карточек на одном экране. ── */
.food-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.food-card { background: var(--bg-card); border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.05); overflow:hidden; }
.food-card .fc-photo-wrap { position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.food-card .fc-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.food-card .fc-tag-badge {
  position:absolute; left:8px; bottom:8px; padding:3px 8px; border-radius:999px;
  font-size:9px; font-weight:800; letter-spacing:.05em; background:rgba(255,255,255,.88);
}
.food-card .fc-body { padding:10px 12px 12px; }
.food-card .fname { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height:1.3; }
.food-card .fmeta { font-size: 11px; color: var(--ink3); margin-top: 4px; line-height: 1.4; }

/* ── Combo card ───────────────────────────────────────────────── */
.combo-items { display:flex; flex-direction:column; gap:6px; margin-top: 10px; }
.combo-items li { list-style:none; display:flex; gap:8px; align-items:flex-start; font-size:13px; color: var(--ink2); }
.combo-items li::before { content:""; width:5px; height:5px; border-radius:50%; background: var(--forest); margin-top:6px; flex:0 0 auto; }
.divider { height:1px; background: rgba(122,140,132,.18); margin: 12px 0; }

/* ── Quick meal row ───────────────────────────────────────────── */
.qmeal { display:flex; align-items:center; gap:12px; padding:14px;
  background: var(--bg-card); border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.qmeal .ic { width:42px; height:42px; border-radius:12px; background: var(--terra-soft);
  display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 auto; }
.qmeal .qn { font-size:14px; font-weight:700; }
.qmeal .qd { font-size:12px; color:var(--ink3); margin-top:2px; }

/* ── Segmented control ────────────────────────────────────────── */
.segscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; padding: 0 var(--screen-pad); display:flex; }
.segscroll::-webkit-scrollbar { display:none; }
/* Растянут на всю ширину контейнера (как карточки под ним), а не
   сжат-по-контенту по центру — каждая кнопка получает равную долю
   через flex:1, а не паддинг + white-space:nowrap. */
.seg { display:flex; width:100%; gap:2px; padding:4px; background:var(--bg-soft); border-radius:12px; }
.seg button {
  flex:1; font-family: var(--font-sans); font-size:12px; font-weight:700; color:var(--ink3);
  padding:9px 6px; border:none; background:transparent; border-radius:9px; cursor:pointer;
}
.seg button.active { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
/* Компактные кнопки внутри (5 вкладок с более длинными словами —
   «Углеводы»/«Сочетания» — чуть меньше паддинг и кегль, чтобы не
   переносились на две строки внутри своей flex:1-доли). Внешний
   отступ контейнера НЕ трогаем — он должен совпадать с --screen-pad
   у карточек и у ряда на «Отчёте» (тот не имеет отдельного модификатора). */
.seg-tight .seg button { padding: 9px 4px; font-size: 11px; }
/* Вложенный ряд «Сочетаний» — компактнее и полупрозрачнее основного */
/* Отдельные пилюли, не один растянутый трек — возвращаем shrink-to-fit
   по центру, иначе унаследует width:100%/flex:1 от базового .seg. */
.seg.seg-sub { display:inline-flex; width:auto; margin:0 auto; background:transparent; padding:2px; gap:6px; }
.seg.seg-sub button { flex:none; padding:6px 12px; font-size:11px; background:var(--bg-soft); border-radius:999px; }
.seg.seg-sub button.active { background:var(--forest-soft); color:var(--forest); box-shadow:none; }

/* ── Hero (nutrition target) ──────────────────────────────────── */
.hero {
  display:flex; align-items:center; gap:14px; padding:16px;
  border-radius:18px;
  background: linear-gradient(90deg, var(--forest-soft), var(--accent-soft));
}
.hero .hicon { width:52px; height:52px; border-radius:14px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.06); flex:0 0 auto; }
.hero .hicon .ic { stroke: var(--rose); }
.hero .ht { font-family:var(--font-serif); font-size:18px; font-weight:600; }
.hero .hs { font-size:12px; color:var(--ink2); margin-top:2px; }

/* ── Avatar ───────────────────────────────────────────────────── */
.avatar { width:48px; height:48px; border-radius:50%; background:var(--forest);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:20px; flex:0 0 auto; }
.avatar.lg { width:72px; height:72px; font-size:30px; }
.theme-trigger {
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:1.5px solid var(--forest-tint); background:var(--bg-card); color:var(--forest);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.theme-trigger:active { transform:scale(.94); }
/* Уровень геймификации рядом с именем в профиле — данные из вкладки
   "Прогресс → Достижения" (levelFor/gameXp), тап уводит туда же. */
.lvl-chip {
  display:flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  background:var(--forest-soft); color:var(--forest); border:none; cursor:pointer;
  font-family:var(--font-sans); font-size:11px; font-weight:700; white-space:nowrap;
}
.lvl-chip .ic { stroke:var(--forest); }
.lvl-chip:active { transform:scale(.96); }

/* ── Chat bubbles ─────────────────────────────────────────────── */
.bubble { max-width: 82%; padding:11px 14px; border-radius:16px; font-size:14px; line-height:1.4; }
.bubble.ai   { background:var(--bg-card); color:var(--ink); border-bottom-left-radius:5px; box-shadow:0 1px 4px rgba(0,0,0,.05); align-self:flex-start; }
.bubble.me   { background:var(--forest); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.bubble .who { font-size:10px; font-weight:700; letter-spacing:.5px; opacity:.6; margin-bottom:3px; text-transform:uppercase; }

/* ── AI typing indicator (three bouncing dots) ───────────────────── */
.typing-dots { display:flex; align-items:center; gap:4px; padding:3px 2px; }
.typing-dots i {
  width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.45;
  animation: typing-bounce 1.1s ease-in-out infinite;
}
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity:.45; }
  30% { transform: translateY(-4px); opacity:1; }
}
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; opacity:.7; } }
.chat-list { display:flex; flex-direction:column; gap:10px; }

/* ── Markdown rendering inside AI bubbles/cards ──────────────────
   AI replies (chat answers, report analysis, onboarding welcome) may come
   back as Markdown (headers, bold, lists, tables) — these rules give that
   structure a sane look inside a chat bubble instead of raw "##"/"|" text. */
.md-p { margin:0 0 8px; }
.md-p:last-child { margin-bottom:0; }
.md-h { display:block; margin:0 0 6px; font-size:1.05em; }
.md-list { margin:0 0 8px; padding-left:20px; }
.md-list:last-child { margin-bottom:0; }
.md-list li { margin-bottom:2px; }
.md-table { width:100%; border-collapse:collapse; margin:0 0 8px; font-size:.93em; }
.md-table:last-child { margin-bottom:0; }
.md-table th, .md-table td { padding:4px 8px; border:1px solid currentColor; opacity:.95; text-align:left; }
.md-table th { font-weight:700; opacity:1; }
.bubble.ai code, .card code { background:rgba(0,0,0,.06); border-radius:4px; padding:1px 5px; font-size:.92em; }

/* ── Broadcast card ───────────────────────────────────────────── */
.broadcast { padding:14px; background:var(--bg-card); border-radius:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.05); border-left:3px solid var(--terra); }
.broadcast.unread { border-left-color: var(--forest); background: var(--forest-soft); }
.broadcast .bdate { font-size:11px; color:var(--ink3); margin-bottom:5px; }
.broadcast .btext { font-size:13px; color:var(--ink2); line-height:1.45; }

/* ── List rows (profile / report history) ─────────────────────── */
.lrow { display:flex; align-items:center; gap:12px; padding:14px;
  background:var(--bg-card); border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.05);
  cursor:pointer; width:100%; border:none; text-align:left; font-family:var(--font-sans); }
.lrow:active { filter:brightness(.98); }
.lrow .lic { width:38px; height:38px; border-radius:11px; background:var(--forest-soft);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; }
.lrow .lt { font-size:14px; font-weight:700; color:var(--ink); }
.lrow .ld { font-size:12px; color:var(--ink3); margin-top:1px; }
.lrow .chev { color:var(--ink3); margin-left:auto; font-size:18px; }

/* ── Subscription banner ──────────────────────────────────────── */
.subcard { padding:16px; border-radius:18px; color:#fff;
  background: linear-gradient(135deg, var(--forest), var(--forest-mid)); }
.subcard .stitle { font-family:var(--font-serif); font-size:18px; }
.subcard .sdays { font-size:13px; opacity:.85; margin-top:4px; }
/* Текст и значок тарифа — в разных колонках: длинная строка («осталось N дн. ·
   твоя цена … ₽/мес») раньше доходила до короны и ложилась под неё. Цена —
   своей строкой и без переноса внутри суммы. */
.subcard .sub-head { display:flex; align-items:flex-start; gap:14px; }
.subcard .sub-text { flex:1; min-width:0; }
.subcard .sub-ic { flex:none; display:flex; margin-top:2px; }
.subcard .sprice { white-space:nowrap; }
/* Остатки ИИ за период — длинная строка, переносится. */
.subcard .slimits { font-size:12px; line-height:1.4; }

/* ── AI analysis status grid ──────────────────────────────────── */
.ai-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.ai-stat { display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:var(--bg-soft); border-radius:12px; font-size:13px; font-weight:600; }
.ai-stat .ai-ic { font-size:15px; }
.status-ok   { color: var(--forest); }
.status-low  { color: var(--terra-dark); }
.status-high { color: var(--rose); }

/* ── Weight chart (SVG sparkline) — тёмная карточка-explorer, референс
   Oura (тёмный фон + яркая линия графика на весь модуль). Тот же тёмный
   градиент, что уже используется в .subcard/.ach-hero — не новый цвет
   для приложения, а знакомая "hero" поверхность в новом месте. ── */
.chart-wrap {
  padding:16px; border-radius:18px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--forest-mid), var(--forest-dark) 75%);
  box-shadow:0 14px 34px var(--forest-soft);
}
.chart-wrap .eyebrow { color:rgba(255,255,255,.7); }
.chart-wrap .pw-num { color:#fff; }
.chart-wrap .pw-unit { color:rgba(255,255,255,.65); }
.chart-wrap .muted { color:rgba(255,255,255,.6); }
.chart-wrap .bar { background:rgba(255,255,255,.18); }

/* ── Progress · Тело — единая лента показателей (Apple Health /
   Withings Health Mate): вес и замеры больше не два разных блока, а
   один ряд тач-чипов (значение+дельта на каждом) + один explorer-график
   на выбранную метрику, ниже — стрик/неделя, затем сырая история. ── */
.mchip-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.mchip {
  min-width:0; display:flex; flex-direction:column; align-items:flex-start;
  gap:2px; padding:10px 10px; border-radius:14px; background:var(--bg-card);
  box-shadow:0 1px 4px rgba(0,0,0,.05); border:1.5px solid transparent; cursor:pointer;
}
.mchip.active { border-color:var(--forest-tint); background:var(--forest-soft); }
.mchip-ic .ic { width:16px; height:16px; stroke:var(--ink3); }
.mchip.active .mchip-ic .ic { stroke:var(--forest); }
.mchip-lbl { font-size:11px; color:var(--ink3); }
.mchip-val { font-family:var(--font-serif); font-size:17px; margin-top:2px; font-variant-numeric:tabular-nums; }
.mchip-val small { font-size:11px; font-weight:500; color:var(--ink3); margin-left:2px; font-family:var(--font-sans); }
.mchip-delta { font-size:11px; font-weight:700; color:var(--ink3); }
/* Цвет — по цели, а не по знаку: при наборе массы «+» это к цели (см. metricDeltaTone). */
.mchip-delta.good { color:var(--forest); }
.mchip-delta.bad { color:var(--terra-dark); }
.pw-num { font-family:var(--font-serif); font-size:28px; line-height:1; margin-top:6px; font-variant-numeric:tabular-nums; }
.pw-unit { font-size:14px; font-weight:500; color:var(--ink3); margin-left:4px; font-family:var(--font-sans); }
.pw-goal { font-size:12px; color:var(--ink3); margin-top:10px; }
.pw-btn {
  width:100%; margin-top:14px; padding:11px; border:none; border-radius:12px;
  background:var(--ink); color:#fff; font-weight:700; font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.pw-btn:active { transform: scale(.98); }

.cw-flame { text-align:center; }
.cw-flame .ic { stroke: var(--terra); }
.cw-num { font-family:var(--font-serif); font-size:18px; text-align:center; margin-top:2px; }
.cw-lbl { font-size:11px; color:var(--ink3); text-align:center; margin-bottom:10px; }
.cw-week { display:flex; gap:4px; justify-content:space-between; }
.cw-dot {
  flex:1; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--ink3); background:var(--bg-soft);
}
.cw-dot.on { background:var(--accent); color:#fff; }

.chart-msg { margin-top:14px; padding:10px 14px; border-radius:12px; font-size:12.5px; font-weight:600; line-height:1.4; }
.chart-msg.good { background:var(--forest-soft); color:var(--forest-dark); }
.chart-msg.warn { background:var(--terra-soft); color:var(--terra-dark); }

/* ── Textarea / inputs ────────────────────────────────────────── */
.field { width:100%; font-family:var(--font-sans); font-size:14px; color:var(--ink);
  background:var(--bg-card); border:1.5px solid var(--bg-soft); border-radius:14px;
  padding:14px; resize:none; }
.field:focus { outline:none; border-color:var(--forest-tint); }

/* ── Tab bar ──────────────────────────────────────────────────── */
.tabbar {
  position: absolute; left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  display: flex; padding: 10px 6px;
  background: var(--glass-strong);
  border-radius: 28px;
  border: .5px solid rgba(255,255,255,.5);
  box-shadow: 0 -1px 2px rgba(0,0,0,.06), 0 -4px 20px rgba(0,0,0,.10);
  z-index: 10;
}
.tabbtn {
  flex: 1; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; cursor:pointer; padding: 2px 0;
  -webkit-tap-highlight-color: transparent;
}
.tabbtn .tic {
  width:40px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; color:var(--ink3);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.tabbtn .tic .lic {
  width:21px; height:21px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  /* Спружинистый scale здесь — намеренное исключение из "no bounce on UI
     state": это единственный игривый акцент таббара, не общая UI-транзишен
     дисциплина, и намеренно оставлен как есть. */
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), stroke-width var(--dur-base) var(--ease-out);
}
.tabbtn .tlbl { font-size:9px; font-weight:600; color:var(--ink3); transition: color var(--dur-base) var(--ease-out); }

/* ── Generic inline icon (lucide(), default class) — line-icon
   replacement for chrome emoji throughout the app. Default size fits
   most inline badge/button/label use; contexts needing another size
   override .ic within their own scope rather than here. ── */
.ic {
  width: 16px; height: 16px; flex: none; display: inline-block;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px;
}
.lrow .lic svg { width: 20px; height: 20px; stroke: var(--forest); }
.task-ic svg, .stat .ic { stroke: var(--ink2); }

/* Hover (desktop / browser preview) — lift + tint, only on inactive tabs. */
@media (hover:hover) {
  .tabbtn:hover .tic { color:var(--forest); }
  .tabbtn:hover .tlbl { color:var(--forest); }
  .tabbtn:hover:not(.active) .tic .lic { transform: translateY(-2px) scale(1.1); }
}
/* Press feedback (tap) — quick squish. */
.tabbtn:active .tic .lic { transform: scale(.86); }

/* Active tab — soft pill, brand colour, slightly heavier + larger glyph. */
.tabbtn.active .tic { background:var(--forest-soft); color:var(--forest); }
.tabbtn.active .tic .lic { transform: scale(1.12); stroke-width:2.3; }
.tabbtn.active .tlbl { color:var(--forest); }

/* ── Modal / sheet ────────────────────────────────────────────── */
.sheet-backdrop {
  position:absolute; inset:0; z-index:50; background:rgba(20,30,25,.35);
  display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.sheet-backdrop.show { opacity:1; pointer-events:auto; }
.sheet {
  width:100%; max-height:88%; overflow-y:auto; background:var(--bg-app); scrollbar-width:none;
  border-radius:24px 24px 0 0; padding:8px var(--screen-pad)
  calc(env(safe-area-inset-bottom) + 24px); transform:translateY(100%); transition:transform .28s cubic-bezier(.3,.8,.3,1);
}
.sheet::-webkit-scrollbar { display: none; }
.sheet-backdrop.show .sheet { transform:translateY(0); }
.sheet-grab { width:40px; height:5px; border-radius:999px; background:var(--bg-soft); margin:8px auto 14px; }
.sheet h2 { font-family:var(--font-serif); font-size:22px; margin-bottom:6px; }

/* Full-page chat sheets (ИИ-помощник, тренер) — take over the whole screen
   like Whoop Coach, instead of the usual half-height bottom sheet. Header
   pinned top, message list grows and scrolls, input pinned bottom. */
.sheet-backdrop.full { align-items:stretch; }
.sheet.sheet-full {
  width:100%; height:100dvh; max-height:100dvh; border-radius:0;
  display:flex; flex-direction:column;
  padding: calc(env(safe-area-inset-top) + 14px) var(--screen-pad) calc(env(safe-area-inset-bottom) + 16px);
}
.sheet.sheet-full .chatsheet-header { flex:0 0 auto; align-items:center; }
.sheet.sheet-full .chatsheet-header h2 { font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet.sheet-full .chat-list { flex:1 1 auto; min-height:0; max-height:none; margin-top:16px; }
.sheet.sheet-full .chatsheet-footer { flex:0 0 auto; }

/* ════════════════════════════════════════════════════════════════
   AUTH + ONBOARDING FLOW
   ════════════════════════════════════════════════════════════════ */
.onb-wrap { padding-bottom: calc(env(safe-area-inset-bottom) + 32px); }
/* .auth-wrap fills the real available height (.screen.flow above already
   dropped the phantom tab-bar reserve) and centers its own content group
   inside it — this is the actual fix for "отцентровка ужасная": the brand
   block + card + legal text used to just flow from the top, leaving a dead
   void below on any screen taller than the form. min-height, not height,
   for the same reason documented on .fade-in: registration mode (4 fields +
   agree row) can legitimately exceed one viewport and still needs to scroll
   instead of clipping. */
.auth-wrap {
  /* 100dvh, not %: .fade-in (the direct parent) only sets min-height, so its
     own computed `height` stays auto — CSS never treats an auto-height
     ancestor as a definite containing block, so a percentage min-height here
     silently resolved to 0 (verified in-browser: wrap stayed content-sized,
     centering never fired). dvh is viewport-relative and sidesteps that
     chain entirely. */
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding-bottom: calc(env(safe-area-inset-bottom) + 32px);
}

.auth-brand { text-align:center; padding: calc(env(safe-area-inset-top) + 12px) 0 24px; }
.auth-logo {
  position: relative; width:80px; height:80px; border-radius:50%;
  background:var(--forest-soft); color:var(--forest);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
/* One soft glow moment for the whole screen — same halo recipe as the
   dashboard's premium calorie ring (.ring-glow), reused here rather than
   invented fresh. Everything else on this screen stays flat by design. */
.auth-logo::before {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 72%);
  filter: blur(16px); z-index: -1;
}
.auth-card {
  margin: 0 16px; padding: 26px 22px 28px; background: var(--bg-card);
  border-radius: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 14px 32px rgba(0,0,0,.08);
}
.auth-field {
  display:flex; align-items:center; gap:12px; height:52px; padding:0 16px;
  background:var(--bg-soft); border-radius:14px; border:1.5px solid var(--bg-soft);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.auth-field:focus-within { border-color: var(--forest-tint); }
.auth-field .af-ic { opacity:.7; width:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.auth-field .af-input {
  flex:1; border:none; background:transparent; font-family:var(--font-sans);
  font-size:15px; color:var(--ink); outline:none;
}
.auth-err { display:flex; align-items:center; gap:6px; color:var(--rose); font-size:13px; font-weight:600; margin-top:12px; }
.auth-or { display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--ink3); font-size:12px; }
.auth-or::before, .auth-or::after { content:""; flex:1; height:1px; background:var(--bg-soft); }

/* ── Onboarding shared ─────────────────────────────────────────── */
.onb-progress { display:flex; gap:4px; padding: calc(env(safe-area-inset-top) + 16px) var(--screen-pad) 0; }
.onb-progress i { flex:1; height:3px; border-radius:2px; background:rgba(31,61,49,.15); transition:background .25s; }
.onb-progress i.on { background:var(--forest); }
.onb-head { padding: 12px var(--screen-pad) 4px; }
.onb-back {
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--bg-card); color:var(--forest); font-size:24px; line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center;
}
.onb-hero {
  height:200px; margin: calc(env(safe-area-inset-top) + 20px) var(--screen-pad) 0;
  border-radius:24px; display:flex; align-items:center; justify-content:center; color:var(--forest);
  background: linear-gradient(135deg, var(--forest-soft), var(--sand));
}
.onb-hero .ic { width:72px; height:72px; stroke-width:1.25; }
.onb-label { font-size:12px; font-weight:700; color:var(--ink3); margin-bottom:8px; }

.btn.disabled { opacity:.5; pointer-events:none; }

/* feature rows (welcome) */
.onb-feat { display:flex; align-items:center; gap:14px; padding:14px; background:var(--bg-card);
  border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.onb-feat .of-ic { width:42px; height:42px; border-radius:12px; background:var(--forest-soft);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--forest); }
.onb-feat .of-t { font-size:14px; font-weight:700; }
.onb-feat .of-s { font-size:12px; color:var(--ink3); margin-top:2px; }

/* selectable cards (goal / activity) */
.onb-card { display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px; border:1.5px solid transparent; border-radius:16px; cursor:pointer;
  background:var(--bg-card); box-shadow:0 1px 6px rgba(0,0,0,.05); font-family:var(--font-sans); }
.onb-card.sel { background:var(--forest-soft); border-color:var(--forest); }
.onb-card .oc-ic { width:40px; height:40px; border-radius:12px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--ink2); }
.onb-card .oc-ic.on { background:var(--forest); color:#fff; }
.onb-card .oc-t { font-size:15px; font-weight:700; color:var(--ink); }
.onb-card .oc-s { font-size:12px; color:var(--ink3); margin-top:2px; }
.onb-card .oc-check { margin-left:auto; color:var(--forest); font-weight:800; font-size:18px; }

/* gender */
.onb-gender { flex:1; height:48px; border:none; border-radius:14px; cursor:pointer;
  font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--ink2);
  background:var(--bg-card); box-shadow:0 1px 4px rgba(0,0,0,.06); }
.onb-gender.on { background:var(--forest); color:#fff; }

/* stepper */
.onb-stepper { display:flex; align-items:center; padding:6px 8px; background:var(--bg-card);
  border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.onb-stepper button { width:44px; height:44px; border:none; border-radius:10px; cursor:pointer;
  background:var(--bg-soft); font-size:20px; font-weight:700; color:var(--ink); }
.onb-stepper span { flex:1; text-align:center; font-family:var(--font-serif); font-size:20px; font-weight:600; }
/* Редактируемое поле веса — визуально как span, но принимает ввод с клавиатуры */
.onb-stepper input.onb-num { flex:1; width:100%; min-width:0; text-align:center; border:none; background:transparent;
  font-family:var(--font-serif); font-size:20px; font-weight:600; color:var(--ink);
  padding:0; margin:0; -moz-appearance:textfield; }
.onb-stepper input.onb-num:focus { outline:none; }
.onb-stepper input.onb-num::-webkit-outer-spin-button,
.onb-stepper input.onb-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* now → goal */
.onb-now-goal { display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  background:var(--bg-soft); border-radius:14px; }
.onb-now-goal .ng-l { font-size:10px; font-weight:700; letter-spacing:1.2px; color:var(--ink3); }
.onb-now-goal .ng-v { font-family:var(--font-serif); font-size:22px; font-weight:600; margin-top:2px; }
.onb-now-goal .ng-v span { font-family:var(--font-sans); font-size:12px; color:var(--ink3); font-weight:400; }
.onb-now-goal .ng-arrow { color:var(--ink3); font-size:18px; }

/* pace chips */
.onb-pace { flex:1; padding:12px 4px; border:1.5px solid #E0E0E0; border-radius:12px; cursor:pointer;
  background:var(--bg-card); display:flex; flex-direction:column; align-items:center; gap:2px; }
.onb-pace.on { border-color:var(--forest); border-width:2px; box-shadow:0 4px 10px rgba(31,61,49,.15); }
.onb-pace .op-l { font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--ink); }
.onb-pace.on .op-l { color:var(--forest); }
.onb-pace .op-s { font-size:10px; font-weight:700; letter-spacing:.4px; color:var(--ink3); }

.onb-estdate { display:flex; align-items:center; gap:8px; padding:12px 14px; font-size:13px;
  color:var(--ink2); background:var(--accent-soft); border-radius:12px; }

/* chips */
.onb-chips { display:flex; flex-wrap:wrap; gap:8px; }
.onb-chip { padding:9px 14px; border:1px solid #E0E0E0; border-radius:20px; cursor:pointer;
  font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--ink2); background:var(--bg-card); }
.onb-chip.on { background:var(--forest-soft); border-color:var(--forest); color:var(--forest); }

/* onboarding "план готов" hero card — named .onb-plan-card, NOT .plan-card:
   that name collides with the unrelated Lite/Full subscription card further
   down this file (~line 1480, `Тарифы` section), which is later in the
   cascade and was silently winning — its flat `background: var(--bg-soft)`
   overrode this card's gradient, leaving the white pl-* text on a near-
   invisible background ("слишком прозрачный фон и ничего не видно"). */
.onb-plan-card { padding:20px; border-radius:22px; position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--forest), var(--forest-mid) 55%, #3D5C44); }
.onb-plan-card::after { content:""; position:absolute; width:180px; height:180px; right:-30px; top:-60px;
  border-radius:50%; background: radial-gradient(circle, rgba(188,99,55,.4), transparent 70%); }
.onb-plan-card .pl-eyebrow { font-size:10px; font-weight:700; letter-spacing:1.6px; color:rgba(255,255,255,.6); position:relative; }
.onb-plan-card .pl-stats { display:flex; gap:8px; margin-top:12px; position:relative; }
.onb-plan-card .pl-stat { flex:1; padding:10px; background:rgba(255,255,255,.10); border-radius:12px; }
.onb-plan-card .pl-v { font-family:var(--font-serif); font-size:18px; color:#fff; }
.onb-plan-card .pl-l { font-size:9px; font-weight:700; letter-spacing:.8px; color:rgba(255,255,255,.6); margin-top:3px; }
.onb-plan-card .pl-date { display:flex; align-items:center; gap:8px; margin-top:10px; padding:10px 12px;
  background:rgba(255,255,255,.10); border-radius:12px; position:relative; }

.onb-info { display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13px;
  color:var(--ink2); background:var(--bg-soft); border-radius:12px; }
.onb-info b { color:var(--ink); font-weight:700; }

/* ════════════════════════════════════════════════════════════════
   REPORT — editable fields, measurements & photo upload
   ════════════════════════════════════════════════════════════════ */
.rep-edit-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.rep-edit .re-label { font-size:12px; font-weight:700; color:var(--ink3); margin-bottom:6px; }
/* Степпер — по образцу Daylio/Bearable: заполненный цветной кружок-кнопка,
   не тонкий контур. Прошлая версия (тонкое кольцо, всё серое) читалась
   как холодная/безликая — референсы трекеров состояния держат реальный
   цвет и вес на контролах, не только на цифре. */
.rep-stepper {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0; background:none; box-shadow:none;
}
.rep-stepper button {
  width:34px; height:34px; flex:none; border-radius:50%; cursor:pointer; border:none;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size:16px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rep-stepper button:active { transform:scale(.88); background: color-mix(in srgb, var(--accent) 26%, transparent); }
.rep-stepper span {
  flex:1; text-align:center; font-family:var(--font-serif); font-size:21px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.rep-wb .re-label { font-size:12px; font-weight:700; color:var(--ink3); margin-bottom:6px; }
/* Шкала самочувствия теперь рендерится как .wk-types/.onb-chip — те же
   текстовые пилюли, что и выбор типа тренировки чуть ниже. Отдельных
   .wb-* стилей больше нет: были эмодзи-кружки, читались как "набор
   смайликов" без премиальности — заменены на единый чиповый язык. */

/* Показатели дня как список раскрывающихся строк (тот же native-<details>
   приём, что и .meal-acc выше) — вместо всех степперов/чипов, видимых
   разом, каждая строка показывает текущее значение и разворачивается по
   тапу. Один явный ответ на «куда что вводить», а не стена контролов. */
/* Строки сгруппированы в один .card (.rep-group, см. ниже у .meal-group) —
   разделитель между строками вместо N отдельных карточек в столбик. */
.rep-row { background:none; box-shadow:none; border-radius:0; padding:14px; }
.rep-row:not(:last-child) { border-bottom: 1px solid var(--bg-soft); }
.rep-row summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rep-row summary::-webkit-details-marker { display:none; }
.rep-row .rr-label { font-size:14px; font-weight:700; color:var(--ink); }
.rep-row .rr-val { font-size:13px; color:var(--ink3); font-variant-numeric:tabular-nums; }
.rep-row .rr-chev { color:var(--ink3); font-size:16px; display:inline-block; transition:transform .2s ease; }
.rep-row[open] .rr-chev { transform:rotate(180deg); }
.rep-row .rep-row-body { margin-top:14px; animation:none; }
.rep-row[open] .rep-row-body { animation:card-in .22s ease both; }

/* photo upload grid */
.photo-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.photo-tile, .photo-add { position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; }
.photo-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-del { position:absolute; top:6px; right:6px; width:26px; height:26px; border:none; cursor:pointer;
  border-radius:50%; background:rgba(20,30,25,.6); color:#fff; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.photo-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:var(--bg-soft); border:1.5px dashed var(--sand-dark); cursor:pointer; color:var(--ink3); }
.photo-add .pa-plus { font-size:22px; line-height:1; color:var(--forest); }
.photo-add .pa-lbl { font-size:10px; font-weight:700; text-align:center; padding:0 4px; }
.photo-add .pa-emoji { font-size:22px; line-height:1; }
/* 4 фиксированных слота фото-отчёта в один ряд */
.photo-grid-4 { grid-template-columns:repeat(4, 1fr); gap:8px; }
.photo-tile.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:var(--bg-soft); color:var(--ink3); }
.photo-tile.empty .pa-emoji { font-size:22px; line-height:1; }
.photo-tile.empty .pa-lbl { font-size:10px; font-weight:700; text-align:center; padding:0 4px; }
.photo-slotlbl { position:absolute; left:0; right:0; bottom:0; padding:4px 6px; font-size:10px; font-weight:700;
  color:#fff; background:linear-gradient(0deg, rgba(20,30,25,.68), transparent); text-align:center; }

/* ════════════════════════════════════════════════════════════════
   PAYMENT sheet (карта + СБП)
   ════════════════════════════════════════════════════════════════ */
.pay-amount { display:flex; align-items:center; justify-content:space-between; margin-top:12px;
  padding:16px; border-radius:16px; background:var(--forest-soft); }
.pay-tabs { display:flex; gap:8px; }
.pay-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:50px;
  border:1.5px solid var(--bg-soft); border-radius:14px; cursor:pointer; background:var(--bg-card);
  font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--ink2); }
.pay-tab.on { border-color:var(--forest); background:var(--forest-soft); color:var(--forest); }
.pay-tab .pt-ic .ic { width:18px; height:18px; }
.pay-field { display:flex; align-items:center; gap:10px; height:52px; padding:0 14px; margin-top:8px;
  background:var(--bg-card); border:1.5px solid var(--bg-soft); border-radius:14px; }
/* Ряд промокода: поле + квадратная кнопка-галочка. Вместе занимают ровно ту же
   ширину, что и кнопка «Оплатить» ниже — ничего не выпирает за край листа. */
.promo-row { display:flex; gap:8px; margin-top:8px; width:100%; }
.promo-row .pay-field { flex:1; min-width:0; margin-top:0; }
.promo-apply {
  flex:0 0 52px; width:52px; height:52px; border-radius:14px; cursor:pointer;
  border:1.5px solid var(--forest); background:var(--forest-soft); color:var(--forest);
  font-size:20px; font-weight:800; line-height:1;
}
.promo-apply:disabled { opacity:.6; cursor:default; }
.pay-field .pf-ic .ic { width:16px; height:16px; opacity:.7; }
.pay-field .pf-input { flex:1; border:none; background:transparent; outline:none;
  font-family:var(--font-sans); font-size:16px; color:var(--ink); letter-spacing:.5px; }
.sbp-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.sbp-bank { display:flex; align-items:center; gap:12px; width:100%; padding:14px; cursor:pointer;
  border:1.5px solid var(--bg-soft); border-radius:14px; background:var(--bg-card);
  font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--ink); text-align:left; }
.sbp-bank.on { border-color:var(--forest); background:var(--forest-soft); }
.sbp-bank .sb-ic { width:18px; height:18px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.sbp-bank .sb-name { flex:1; }
.sbp-bank .sb-check { color:var(--forest); font-weight:800; }
.pay-secure { text-align:center; font-size:11px; color:var(--ink3); margin-top:14px; }

/* ── Trainer chat ─────────────────────────────────────────────── */
.trainer-chat { max-height:48vh; overflow-y:auto; padding-right:2px; scrollbar-width:none; }
.trainer-chat::-webkit-scrollbar { display:none; }

/* Подсказки-вопросы в начале чата (Whoop Coach-style quick prompts) —
   горизонтальный скролл пилюль, тап сразу отправляет вопрос. */
.chat-suggest { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
.chat-suggest::-webkit-scrollbar { display:none; }
.chat-suggest button {
  flex:0 0 auto; white-space:nowrap; padding:9px 14px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--forest-tint); background:var(--bg-card); color:var(--forest);
  font-family:var(--font-sans); font-size:13px; font-weight:600;
}
.chat-suggest button:active { transform:scale(.96); background:var(--forest-soft); }

/* ════════════════════════════════════════════════════════════════
   CYCLE tracking
   ════════════════════════════════════════════════════════════════ */
.cycle-hero { display:flex; align-items:center; gap:16px; margin-top:12px; padding:18px;
  border-radius:18px; color:#fff;
  background:linear-gradient(135deg, var(--cyc, var(--forest)), color-mix(in srgb, var(--cyc, var(--forest)) 70%, #000)); }
.cycle-hero .cy-day { text-align:center; flex:0 0 auto; }
.cycle-hero .cy-num { font-family:var(--font-serif); font-size:40px; line-height:1; }
.cycle-hero .cy-lbl { font-size:10px; font-weight:700; letter-spacing:.6px; opacity:.8; margin-top:2px; }
.cycle-hero .cy-phase { display:flex; align-items:center; gap:10px; border-left:1px solid rgba(255,255,255,.25); padding-left:16px; }
.cycle-hero .cy-pt { font-family:var(--font-serif); font-size:18px; }
.cycle-hero .cy-ps { font-size:12px; opacity:.85; margin-top:3px; line-height:1.35; }
.cycle-legend { display:flex; flex-wrap:wrap; gap:8px; }
.cycle-legend .cl-item { font-size:11px; font-weight:600; color:var(--ink2);
  background:var(--bg-soft); border-radius:999px; padding:6px 11px;
  display:inline-flex; align-items:center; gap:4px; }
.cycle-legend .cl-item .ic { width:12px; height:12px; }

/* ════════════════════════════════════════════════════════════════
   CLIENT-FEEDBACK FEATURES
   ════════════════════════════════════════════════════════════════ */
/* Per-screen help button (в шапке) */
.scr-header { position: relative; }
.help-btn {
  position: absolute; top: calc(env(safe-area-inset-top) + 16px); right: var(--screen-pad);
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--forest-tint);
  background: var(--bg-card); color: var(--forest); font-size: 15px; font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.help-btn:active { transform: scale(.94); }

/* Колокольчик уведомлений — глобальный, слева от help-btn в той же шапке */
.bell-btn {
  position: absolute; top: calc(env(safe-area-inset-top) + 16px);
  right: calc(var(--screen-pad) + 30px + 8px);
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--forest-tint);
  background: var(--bg-card);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.bell-btn .ic { width: 15px; height: 15px; stroke: var(--forest); }

/* Same circle-with-contour look as .bell-btn/.help-btn, just not pinned to
   the screen header — for inline icon buttons like a sheet's back arrow. */
.circle-icon-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--forest-tint);
  background: var(--bg-card); color: var(--forest);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.06); flex: 0 0 auto;
}
.circle-icon-btn:active { transform: scale(.94); }
.circle-icon-btn .ic { width: 15px; height: 15px; }
.bell-btn:active { transform: scale(.94); }
.bell-dot {
  position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--rose); border: 1.5px solid var(--bg-card);
}

/* Paywall — blur gated content + CTA overlay (e.g. Прогресс без подписки) */
.paywall { position: relative; }
.paywall-content { filter: blur(7px); pointer-events: none; user-select: none; opacity: .7; }
.paywall-over {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px;
}
.paywall-card {
  background: var(--bg-card); border-radius: 20px; padding: 22px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,.14); max-width: 320px;
}
.paywall-lock .ic { stroke: var(--ink3); stroke-width: 1.5; }
.paywall-title { font-family: var(--font-serif); font-size: 20px; margin-top: 8px; color: var(--ink); }
.paywall-sub { font-size: 13px; color: var(--ink2); margin-top: 6px; line-height: 1.5; }
.help-steps { display: flex; flex-direction: column; gap: 10px; }
.help-step { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink2); line-height: 1.45; }
.help-step .hs-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--forest-soft); color: var(--forest); font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }

/* Baseline first-week calorie card */
.baseline-card { border-left: 3px solid var(--forest); }
.baseline-bar { height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.baseline-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--forest); }

/* «Авто-ввод скоро» hint */
.auto-hint { font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--ink3);
  background: var(--bg-soft); border-radius: 999px; padding: 4px 9px; display:inline-flex; align-items:center; gap:3px; }
.auto-hint .ic { width: 11px; height: 11px; vertical-align: -1px; }

/* Workout block */
.wk-toggles { display: flex; gap: 8px; }
.wk-toggle { flex: 1; height: 44px; border: 1.5px solid var(--bg-soft); border-radius: 12px;
  background: var(--bg-card); cursor: pointer; font-family: var(--font-sans); font-size: 14px;
  font-weight: 700; color: var(--ink2); }
.wk-toggle.on { background: var(--forest-soft); border-color: var(--forest); color: var(--forest); }
.wk-types { display: flex; flex-wrap: wrap; gap: 8px; }

/* Locked window card (замеры/фото) */
.locked-card { text-align: center; border: 1.5px dashed var(--sand-dark); background: var(--sand-light); }
.locked-card .lock-emoji .ic { width: 34px; height: 34px; stroke: var(--ink3); stroke-width: 1.5; }

/* Weekly day strip */
.week-strip { display: flex; gap: 6px; }
.wd-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wd-dot { width: 100%; height: 34px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 800; }
.wd-cell.on .wd-dot { background: var(--forest-soft); color: var(--forest); }
.wd-cell.off .wd-dot { background: var(--bg-soft); color: var(--ink3); border: 1px dashed var(--sand-dark); }
.wd-lbl { font-size: 10px; color: var(--ink3); text-transform: capitalize; }

/* Recipe cards + submission — photo-led vertical card (референс: Zoe app):
   фото/цветная плитка на всю ширину сверху с бейджами поверх (время, ИИ),
   заголовок + компактная мета снизу. Сетка в 2 колонки (.rc-grid), а не
   вертикальный список — фото должно читаться как фото, а не как иконка
   46×46. Текстовый тизер убран с лицевой стороны — полный рецепт открывается
   в detail-шите (см. _recipeCardHtml). */
.rc-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.recipe-card { background: var(--bg-card); border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.05); overflow:hidden; }
.recipe-card .rc-photo-wrap { position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.recipe-card .rc-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.recipe-card .rc-time-badge, .recipe-card .rc-ai-badge {
  position:absolute; display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px;
  font-size:10.5px; font-weight:700; background:rgba(255,255,255,.88); backdrop-filter:blur(4px);
}
.recipe-card .rc-time-badge { left:8px; bottom:8px; color:var(--ink2); }
.recipe-card .rc-ai-badge { right:8px; top:8px; color:var(--forest); }
.recipe-card .rc-fav-badge {
  position:absolute; left:8px; top:8px; display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,.88); backdrop-filter:blur(4px);
}
.recipe-card .rc-fav-badge .ic, .rc-fav-btn.on .ic { stroke:var(--terra); fill:var(--terra); }
/* Сердечко-кнопка на карточке: в избранное без открытия рецепта. Видимый кружок
   30px, область нажатия — 44px за счёт прозрачного поля вокруг. */
.recipe-card .rc-fav-toggle {
  position:absolute; left:1px; top:1px; width:44px; height:44px; padding:7px; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;
}
.recipe-card .rc-fav-toggle::before {
  content:""; position:absolute; inset:7px; border-radius:999px; background:rgba(255,255,255,.88); backdrop-filter:blur(4px);
}
.recipe-card .rc-fav-toggle .ic { position:relative; stroke:var(--ink2); transition:transform .15s ease; }
.recipe-card .rc-fav-toggle.on .ic { stroke:var(--terra); fill:var(--terra); }
.recipe-card .rc-fav-toggle:active .ic { transform:scale(.82); }
.recipe-card .rc-cat { font-size:10.5px; font-weight:700; letter-spacing:.02em; color:var(--accent); margin-bottom:3px; }

/* ── «Нашли ошибку?»: плитки приложенных фото ── */
/* Две кнопки в одну строку одинаковой ширины («Вернуть» / «Сохранить») */
.btn-pair { display:flex; gap:10px; }
html:root .btn-pair .btn { flex:1 1 0; width:auto; min-width:0; padding-inline:12px; align-self:stretch; }
/* «Нашли ошибку?»: всё в одной левой колонке с полем. Скриншоты — строки на линейке
   (имя + крестик), «Добавить» — тихая строка под ними; пояснение и кнопка по центру. */
.sheet label.onb-label { display:block; }
.bug-shots { margin-top:6px; }
.bug-file { display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--rule);
  font-size:13.5px; font-weight:600; color:var(--ink); }
.bug-file .bf-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bug-file .bf-del { flex:none; width:32px; height:32px; margin-right:-6px; border:0; background:none; cursor:pointer;
  color:var(--ink3); display:flex; align-items:center; justify-content:center; }
.bug-file .bf-del .ic { width:16px; height:16px; }
.bug-attach { display:flex; align-items:center; gap:8px; width:100%; padding:11px 0; border:0; border-top:1px solid var(--rule);
  background:none; cursor:pointer; text-align:left; font-family:var(--font-sans); font-size:13.5px; font-weight:600; color:var(--ink); }
.bug-attach .ic { width:18px; height:18px; stroke:var(--ink2); flex:none; }
.bug-attach em { margin-left:auto; font-style:normal; font-weight:500; font-size:12px; color:var(--ink3); }
.bug-attach:active { opacity:.6; }
.bug-shots > :last-child { border-bottom:1px solid var(--rule); }
.bug-note { margin:14px 0 14px; text-align:center; font-size:12px; line-height:1.45; color:var(--ink3); }

/* ── Отчёт: «Скопировать из другого дня» — второстепенное действие под главной кнопкой ── */
.rep-copy-btn { display:flex; align-items:center; gap:7px; margin:12px auto 0; padding:8px 6px; border:0; background:none;
  cursor:pointer; font-family:var(--font-sans); font-size:13.5px; font-weight:600; color:var(--ink2);
  text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:4px; }
.rep-copy-btn .ic { stroke:var(--ink2); }
.rep-copy-btn:active { opacity:.6; }
.mcopy-list { display:flex; flex-direction:column; }
.mcopy-back { display:block; margin:0 0 6px -2px; padding:6px 2px; border:0; background:none; cursor:pointer;
  font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--ink3); }
.mcopy-row { display:flex; align-items:center; gap:12px; width:100%; padding:13px 0; border:0; border-top:1px solid var(--rule);
  background:none; cursor:pointer; text-align:left; font-family:var(--font-sans); color:var(--ink); }
.mcopy-row:last-child { border-bottom:1px solid var(--rule); }
.mcopy-check { flex:none; width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--ink3);
  display:flex; align-items:center; justify-content:center; }
.mcopy-row.on .mcopy-check { box-shadow:none; }
.mcopy-row.on .mcopy-check .ic { stroke:var(--accent); }
.mcopy-row:not(.on) .mcopy-txt, .mcopy-row:not(.on) .mcopy-kcal { opacity:.5; }
.mcopy-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mcopy-txt .lt { font-size:14px; font-weight:700; }
.mcopy-txt .ld { font-size:12px; line-height:1.35; color:var(--ink3); overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mcopy-kcal { flex:none; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── Рецепт ИИ: порция с весом, продукты по граммам, способ приготовления ── */
.rcp-meta { font-size:13px; color:var(--ink3); margin-top:4px; }
.rcp-portion { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rcp-portion-txt { min-width:0; }
.rcp-portion-t { font-family:var(--font-serif); font-size:17px; font-weight:600; }
.rcp-portion-d { font-size:12px; line-height:1.35; color:var(--ink3); margin-top:2px; }
html:root .rcp-stepper { flex:none; width:168px; border:0; padding:0; gap:4px; }
.rcp-grams { flex:1; min-width:0; display:flex; align-items:baseline; justify-content:center; gap:3px;
  border-bottom:1.5px solid var(--ink); padding-bottom:2px; }
.rcp-grams input.onb-num { flex:none; width:3.2ch; text-align:right; }
.rcp-grams span { flex:none; font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--ink3); }
.rcp-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px 16px; margin-top:8px; }
.rcp-reset { padding:4px 0; border:0; background:none; cursor:pointer; font-family:var(--font-sans);
  font-size:12px; color:var(--ink3); text-decoration:underline; text-underline-offset:3px; }
.rcp-reset[hidden] { display:none; }
.rcp-kbju { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }
.rcp-kbju .stat .v { font-variant-numeric:tabular-nums; }
.rcp-ing { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:10px 0;
  border-bottom:1px solid var(--rule); font-size:14px; line-height:1.35; }
.rcp-ing:first-child { border-top:1px solid var(--rule); }
.rcp-ing-g { flex:none; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rcp-steps { font-size:14px; line-height:1.6; white-space:pre-line; }
.recipe-card .rc-body { padding:10px 12px 12px; }
.recipe-card .rc-title {
  font-size: 13.5px; font-weight: 700; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}
.recipe-card .rc-meta { display:flex; align-items:center; gap:4px; font-size: 11px; font-weight: 600; color: var(--ink3); margin-top: 5px; }
.recipe-card .rc-meta .ic { stroke:var(--ink3); }
.recipe-add { aspect-ratio: auto; width: 130px; height: 110px; }
.recipe-photo { position: relative; width: 130px; height: 130px; border-radius: 14px; overflow: hidden; }
.recipe-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Legal documents (соглашение / политика) ──────────────────── */
.legal-link { color: var(--forest); font-weight: 700; text-decoration: underline; cursor: pointer; }
.legal-meta { font-size: 12px; color: var(--ink3); margin-top: 2px; }
.legal-doc { margin-top: 8px; }
.legal-sec { margin-top: 16px; }
.legal-sec h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.legal-sec p { font-size: 13px; line-height: 1.6; color: var(--ink2); margin-bottom: 8px; }

/* ── Utility ──────────────────────────────────────────────────── */
.center { text-align:center; }
.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
.hide { display:none !important; }

/* ════════════════════════════════════════════════════════════════
   Спокойная оболочка — плоские непрозрачные поверхности вместо
   стекла/блюра, живой фон (орбы + падающие эмодзи) выключен целиком.
   Раньше здесь жил decor-heavy "Warm Glass" слой; при синтезе
   референсов (Oura restraint + Cal AI компоненты + Lifesum hero,
   см. память emfit-redesign-direction) стало ясно, что анимированный
   пастельный фон и полупрозрачные карточки спорят с этим направлением
   на любом экране, не только на дашборде — поэтому меняем здесь, а не
   точечно по карточкам.
   ════════════════════════════════════════════════════════════════ */
#app { background: var(--bg); transition: background-color var(--dur-slow) var(--ease-out); }

/* ── Плоские поверхности ── */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(20,20,15,.04), 0 10px 24px -16px rgba(20,20,15,.22);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
/* Only cards that are themselves the tap target get the press-scale — using
   a dedicated class instead of a blanket `.card:active` avoids the whole
   card visually "pressing" when the user taps a button nested inside it
   (e.g. the +/- steppers in the measurements form), since :active bubbles
   to ancestors. */
.card-tap:active { transform: scale(.97); }
.stat, .food-card, .qmeal, .lrow, .broadcast,
.onb-card, .onb-feat, .recipe-card, .auth-card, .hero {
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

/* Tab bar — плоская, тонкая верхняя граница вместо стекла */
.tabbar {
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  box-shadow: 0 -1px 2px rgba(20,20,15,.04), 0 -8px 20px -14px rgba(20,20,15,.22);
}

/* Sheet — плоская */
.sheet { background: var(--glass-strong); }
.sheet-backdrop { background: color-mix(in srgb, var(--ink-base) 28%, transparent); }

/* ── Типографика ── */
.display { font-weight: 700; letter-spacing: -.01em; }
.display-i { font-style: normal; font-weight: 700; }
.scr-header h1 { font-weight: 700; letter-spacing: -.02em; }

/* ── Прогресс-кольца: заполнение при входе ── */
.ring svg { transform: rotate(-90deg); }
.ring circle.val {
  stroke-dashoffset: var(--circ);
  transition: stroke-dashoffset 1.3s cubic-bezier(0.34, 1.1, 0.64, 1);
}
.ring.in circle.val { stroke-dashoffset: var(--target); }
.ring .ring-center .v { font-weight: 700; }

/* Прогресс-бары — цвет акцента + плавная перекраска */
.bar > i { transition: width .4s cubic-bezier(.34,1.1,.64,1), background-color .5s ease; }

/* ── Page transition ── */
@keyframes screen-in { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform:none; } }
/* min-height, не height: у .fade-in — единственного прямого ребёнка .screen —
   height:100% фиксировало его к высоте вьюпорта, из-за чего overflow:visible-
   контент детей выходил за его рамки, но .screen.scrollHeight эту разницу не
   учитывал вместе с padding-bottom (зона под таб-баром) — на любом экране,
   где контента больше одного экрана, последние ~100px были недоскроллимы.
   min-height сохраняет растягивание коротких экранов на весь вьюпорт, но
   позволяет расти вместе с реальным контентом на длинных. */
.fade-in { animation: screen-in .3s cubic-bezier(.2,.7,.3,1) both; min-height: 100%; }

/* ── Переключатель тем (Профиль) ── */
.theme-row { display:flex; gap:12px; }
.theme-dot {
  flex:1; aspect-ratio:1; max-width:64px; border-radius:50%; cursor:pointer;
  border:2.5px solid transparent; position:relative; display:grid; place-items:center;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.10);
  transition: transform .12s ease, border-color .25s ease;
}
.theme-dot .ic { width:20px; height:20px; stroke:currentColor; }
.theme-dot:active { transform: scale(.94); }
.theme-dot.on { border-color: var(--accent); }
.theme-dot.locked { opacity: .55; }
/* Белый кружок на белой шторке — тонкий ободок, чтобы он не пропадал */
.theme-dot[data-theme-pick="white"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.10); }
.theme-dot.locked .ic { width:14px; height:14px; }   /* доп. темы — только Full */
.theme-dot.on::after {
  content:"✓"; position:absolute; right:-2px; bottom:-2px; width:18px; height:18px;
  border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:800;
  display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* ── FAB (плавающая кнопка добавления) ── */
.fab {
  position:absolute; right:16px; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; border:none;
  display:grid; place-items:center; z-index:9; cursor:pointer;
  box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: fab-pulse 2.4s ease-in-out infinite;
}
.fab:active { transform: scale(.94); }
@keyframes fab-pulse {
  0%,100% { box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 38%, transparent); }
  50%     { box-shadow:0 8px 30px color-mix(in srgb, var(--accent) 66%, transparent); }
}

/* ── Streak-бейдж ── */
.streak { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  color:var(--accent); background:var(--forest-soft); border-radius:999px; padding:5px 10px; }

@media (prefers-reduced-motion: reduce) {
  .fab { animation: none; }
  .ring circle.val, .bar > i, .bar-fill, #app, .card { transition: none; }
  .spark-line, .spark-area, .spark-goal { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

/* ── Малые кольца БЖУ (Дашборд) ── */
.ring.sm { width: 64px; height: 64px; }
.ring.sm .ring-center .v { font-size: 13px; }
.ring.sm .ring-center .l { font-size: 9px; margin-top: 0; }
.macro-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mr-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.mr-cap { font-size: 12px; font-weight: 700; color: var(--ink); }
.mr-sub { font-size: 10px; color: var(--ink3); font-variant-numeric: tabular-nums; }

/* ── Sticky-сумма дня (Отчёт) ── */
.day-sum {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 16px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  box-shadow: 0 1px 2px rgba(20,20,15,.04), 0 8px 18px -12px rgba(20,20,15,.2);
}
.day-sum .ds-cap { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink3); }
.day-sum .ds-val { font-weight: 700; font-size: 20px; margin-top: 2px; }
.day-sum .ds-val span { font-size: 13px; color: var(--ink3); font-weight: 600; }
.day-sum .ds-macros { font-size: 12px; font-weight: 600; color: var(--ink2); text-align: right; }

/* ── Сгруппированные списки (показатели дня / приёмы пищи) — один .card
   с разделителем между строками вместо N отдельных карточек в столбик.
   Решает эффект "длинной портянки" одинаковых карточек друг под другом. ── */
.mg-head { padding: 12px 14px 4px; }
.rep-group, .meal-group { padding: 4px; }

/* ── Аккордеон приёмов пищи (сгруппирован в .meal-group выше) ── */
.meal-acc { display: block; padding: 14px; }
.meal-acc:not(:last-child) { border-bottom: 1px solid var(--bg-soft); }
.meal-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.meal-acc summary::-webkit-details-marker { display: none; }
.meal-acc .ms-name { font-weight: 700; }
.meal-acc .ms-photo { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }

/* ── «Добавить приём пищи» sheet ─────────────────────────────────
   Тип приёма → способ (фото/текст) → результат на правку. ── */
.addmeal-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.addmeal-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 10px; border-radius: 16px; border: 1.5px solid var(--bg-soft);
  background: var(--bg-card); cursor: pointer; font-family: var(--font-sans);
}
.addmeal-type-btn:active { transform: scale(.97); }
.addmeal-type-btn .amt-ic { font-size: 26px; }
.addmeal-type-btn .amt-lbl { font-size: 13px; font-weight: 700; color: var(--ink); }

.addmeal-methods { display: flex; flex-direction: column; gap: 10px; }
.addmeal-method-btn {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%;
  border-radius: 14px; border: 1.5px solid var(--bg-soft); background: var(--bg-card);
  cursor: pointer; text-align: left; font-family: var(--font-sans);
}
.addmeal-method-btn:active { transform: scale(.98); }
.addmeal-method-btn .amm-ic { flex: 0 0 auto; color: var(--forest); }
.addmeal-method-btn .amm-text { display: flex; flex-direction: column; gap: 2px; }
.addmeal-method-btn .amm-lbl { font-size: 14px; font-weight: 700; color: var(--ink); }
.addmeal-method-btn .amm-sub { font-size: 11.5px; color: var(--ink3); }
.barcode-submit-btn { width: auto; flex: 0 0 auto; padding: 14px 16px; }

.addmeal-loading { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
.al-spin {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--bg-soft); border-top-color: var(--accent);
  animation: boot-spin .8s linear infinite;
}
.addmeal-photo-preview { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; display: block; }

/* Выдача поиска продукта — те же строки-карточки, что в профиле/истории. */
.food-hits { display: flex; flex-direction: column; gap: 8px; }
.food-hit .lt, .food-hit .ld { overflow-wrap: anywhere; }
.food-hit .lic svg { width: 20px; height: 20px; stroke: var(--forest); }

/* Вес порции на экране проверки: название слева, поле граммов справа. */
.meal-grams { display: flex; flex-direction: column; gap: 8px; }
.mg-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 14px; border: 1.5px solid var(--bg-soft); background: var(--bg-card);
}
.mg-text { flex: 1 1 auto; min-width: 0; }
.mg-name { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.mg-kcal { font-size: 12px; color: var(--ink3); margin-top: 1px; }
.mg-field { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.mg-field .field { width: 82px; padding: 9px 10px; text-align: right; }
.mg-unit { font-size: 12.5px; color: var(--ink3); }

.meal-acc .ms-chev { color: var(--ink3); font-size: 16px; display: inline-block; transition: transform .2s ease; }
.meal-acc[open] .ms-chev { transform: rotate(180deg); }
.meal-acc[open] .meal-items { animation: card-in .22s ease both; }

/* ── Отрисовка линии графика + заливка ── */
.spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spark-draw 1.2s cubic-bezier(.34,1.1,.64,1) forwards; }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
.spark-area { animation: spark-fade .8s ease .35s both; }
@keyframes spark-fade { from { opacity: 0; } to { opacity: 1; } }
/* Фоновая синхронизация (hydrateFromApi и т.п.) пересоздаёт весь экран через
   render(), а с ним и этот <svg> — без .no-anim рисование линии заново
   проигрывалось бы при каждом фоновом обновлении, а не только при первом
   показе или реальном изменении данных (см. bodyMetricExplorer). */
.spark-line.no-anim, .spark-area.no-anim { animation: none; stroke-dashoffset: 0; opacity: 1; }
/* Пунктир от последнего замера к цели — проявляется, когда линия факта дорисована */
.spark-goal { animation: spark-fade .6s ease 1s both; }
.spark-goal.solo { animation-delay: .15s; }
.spark-goal.no-anim { animation: none; opacity: 1; }
.spark-legend { display:flex; gap:14px; margin-top:8px; font-size:11px; color:rgba(255,255,255,.7); }
.spark-legend span { display:inline-flex; align-items:center; gap:6px; }
.spark-legend i { width:16px; height:0; border-top:2.5px solid #fff; border-radius:2px; }
.spark-legend i.dash { border-top:2px dotted #fff; opacity:.8; }

/* ── Бар с анимацией заполнения ── */
.bar-fill { display: block; height: 100%; width: 0; border-radius: 999px;
  transition: width .9s cubic-bezier(.34,1.1,.64,1); }

/* ── Авто-растущие textarea ── */
textarea.field { overflow-y: hidden; transition: height .12s ease; }
#fsInput { min-height: 140px; }   /* комфортная стартовая высота поля отчёта */

/* ── Чекбокс согласия (регистрация) ── */
.agree-row { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.agree-box { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--forest-tint); background: var(--bg-card); color: var(--accent);
  font-size: 14px; font-weight: 800; display: grid; place-items: center; margin-top: 1px;
  transition: background-color .15s ease, border-color .15s ease; }
.agree-box.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.agree-text { font-size: 12px; line-height: 1.45; color: var(--ink2); }

/* ── Achievements / gamification (Прогресс → Достижения sub-tab) ── */
/* Hero: level + XP progress bar (spring fill) */
.ach-hero { padding:20px; border-radius:22px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--forest), var(--forest-dark));
  box-shadow:0 14px 34px var(--forest-soft); }
.ach-hero .lvl-row { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.ach-hero .lvl-badge { width:60px; height:60px; border-radius:18px; display:grid; place-items:center;
  font-size:32px; background:rgba(255,255,255,.16); flex:0 0 auto; }
.ach-hero .lvl-num { font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.ach-hero .lvl-name { font-family:var(--font-serif); font-size:26px; line-height:1.05; margin-top:1px; }
.xp-track { height:14px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden; margin-top:16px; }
.xp-fill { height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, #FFE48F, var(--terra));
  transition:width 1.1s cubic-bezier(.34, 1.56, .64, 1); }
.xp-meta { display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; font-size:13px; opacity:.92; }
.xp-meta b { font-weight:800; }

/* ════════════════════════════════════════════════════════════════
   DASHBOARD · Direction B ("Редакторская" / Zoe-logic) — ported from
   the user-supplied tma-directions.html reference, dir-b variant.
   Scoped entirely under .b-page so it doesn't touch any other screen's
   tokens. --accent is NO LONGER shadowed here (was fixed green
   regardless of the active theme while this direction was being built
   out) — user reported hero/stat/button colours ignoring the theme
   picker, so .b-page now inherits the real --accent from :root like
   every other screen. --protein/--carbs/--fat stay fixed: they're
   macro-type colours, not theme accents, and were always meant to be
   distinct hues (see memory emfit-redesign-direction).
   ════════════════════════════════════════════════════════════════ */
.b-page {
  --protein: oklch(54% 0.19 290); --carbs: oklch(58% 0.14 235); --fat: oklch(72% 0.14 65);
  --b-hint: var(--ink3); --b-tint: color-mix(in oklch, var(--accent) 8%, var(--bg)); --b-highlight: oklch(84% 0.14 90);
  --b-fill: color-mix(in oklch, var(--accent) 5%, transparent);
}
.b-page .num { font-variant-numeric: tabular-nums; }
.b-page .t-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.b-page .t-label { font-size: 13px; font-weight: 500; color: var(--b-hint); }
.b-page .sec-head { display: flex; justify-content: space-between; align-items: baseline; padding: 20px var(--screen-pad) 0; }

/* Hero — remaining calories + macro bars, white-on-accent */
.b-hero {
  background: var(--accent); color: #fff; border-radius: 24px;
  padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 20px;
}
.b-hero .top { display: flex; justify-content: space-between; align-items: flex-start; }
.b-hero .lab { font-size: 12.5px; font-weight: 600; opacity: .72; }
.b-hero .big { font-size: 50px; font-weight: 700; letter-spacing: -.04em; line-height: .92; margin-top: 6px; }
.b-hero .sub { font-size: 13px; opacity: .72; margin-top: 4px; }
.b-badge { background: var(--b-highlight); color: #16221D; font-size: 11px; font-weight: 700;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap; }

/* ── AI hero (главная задача дашборда — совет ИИ, не калории) ──
   Тот же .b-hero корпус (акцентный блок), другое содержимое: заголовок
   разбора + действие + два CTA вместо большого числа. Пустое состояние —
   когда ещё не было ни одного отчёта, честно предлагает сдать первый,
   не выдумывает совет. ── */
.ai-hero-title {
  font-family: var(--font-serif); font-size: 21px; line-height: 1.22;
  margin-top: 10px; text-wrap: balance;
}
.ai-hero-body { font-size: 13.5px; line-height: 1.5; opacity: .85; margin-top: 8px; }
.ai-hero-actions { display: flex; gap: 8px; margin-top: 16px; }
.ai-hero-btn {
  flex: 1; padding: 11px 10px; border-radius: 12px; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.16); color: #fff;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.ai-hero-btn:active { transform: scale(.97); }
.ai-hero-btn.primary { background: #fff; color: var(--accent); }
.ai-hero-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.ai-hero-empty-title { font-family: var(--font-serif); font-size: 18px; line-height: 1.3; margin-top: 4px; }

/* ── Компактная карточка калорий — теперь вторичный блок (не hero) ── */
.cal-compact-num {
  font-family: var(--font-serif); font-size: 30px; line-height: 1; margin-top: 8px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.cal-compact-unit { font-size: 14px; font-weight: 500; color: var(--ink3); margin-left: 4px; font-family: var(--font-sans); }
.cal-compact-macros { display: flex; gap: 14px; }
.b-macros { display: flex; gap: 16px; }
.b-macro { flex: 1; min-width: 0; }
.b-macro .l { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; margin-bottom: 7px; opacity: .85; white-space: nowrap; }
.b-macro .l .num { font-size: 14px; font-weight: 700; opacity: 1; }
.b-hero .bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; }
.b-hero .bar span { display: block; height: 100%; border-radius: 999px; }

/* Chip strip — weight / avg protein / regularity — one full-width card,
   not 3 separate chips, so it reads as a block like the cards around it. */
.b-strip { display: flex; background: var(--bg-card); border-radius: var(--card-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,.05); overflow-x: auto; scrollbar-width: none; }
.b-strip::-webkit-scrollbar { display: none; }
.b-chip { flex: 1; min-width: 108px; background: none; border-radius: 0; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px; position: relative; }
.b-chip + .b-chip::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 1px; background: var(--bg-soft); }
.b-chip .v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.b-chip .k { font-size: 11px; color: var(--b-hint); font-weight: 500; }

/* Weight chart card */
.b-chart { background: var(--b-tint); border-radius: 24px; padding: 20px; }
.b-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.b-page .chart-foot { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; color: var(--b-hint); }

/* Recipe cards — placeholder gradient photo (no real food photos in
   DATA.recipes) + tags, name, personalised reason, real macros only. */
.b-rec { border-radius: 24px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--glass-border); }
.b-rec .ph { height: 152px; position: relative; display: flex; align-items: center; justify-content: center; }
.b-rec .ph-emoji { font-size: 48px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
.b-rec .tags { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; }
.b-rec .tag { background: rgba(255,255,255,.94); color: #16221D; font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; }
.b-rec .b { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.b-rec .n { font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.b-rec .why { font-size: 13.5px; color: var(--b-hint); line-height: 1.45; }
.b-rec .macros { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--b-fill); }
.b-rec .macros div { display: flex; flex-direction: column; gap: 1px; }
.b-rec .macros b { font-size: 14px; font-weight: 600; color: var(--ink); }
.b-rec .macros span { font-size: 10.5px; color: var(--b-hint); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* Photo placeholder gradients — stand-ins for real recipe photography */
.b-rec .ph1 { background: linear-gradient(150deg,#E9B65C,#C9713F); }
.b-rec .ph2 { background: linear-gradient(150deg,#8CC07A,#3F7D5C); }
.b-rec .ph3 { background: linear-gradient(150deg,#E0836F,#A83F52); }
.b-rec .ph4 { background: linear-gradient(150deg,#F0C97A,#B4763C); }

/* Daily tasks */
.task-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background:var(--bg-card); box-shadow:0 1px 4px rgba(0,0,0,.04); }
.task-row + .task-row { margin-top:8px; }
.task-row.done { opacity:.62; }
.task-ic { width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  font-size:18px; background:var(--forest-soft); flex:0 0 auto; }
.task-main { flex:1; min-width:0; }
.task-title { font-size:14px; font-weight:600; color:var(--ink); }
.task-prog { font-size:11px; color:var(--ink3); margin-top:2px; }
.task-xp { font-size:13px; font-weight:800; color:var(--terra-dark); }
.task-check { width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; flex:0 0 auto; }
.task-row.done .task-check { background:var(--forest); color:#fff; }
.task-row:not(.done) .task-check { border:2px solid var(--bg-soft); }

/* Achievement badges grid */
.ach-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ach-card { padding:14px 12px; border-radius:16px; background:var(--bg-card); text-align:center;
  position:relative; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.ach-card.locked { opacity:.6; }
.ach-card .ai { line-height:1; }
.ach-card .ai .ic { width:28px; height:28px; stroke:var(--forest); stroke-width:1.75; }
.ach-card.locked .ai { filter:grayscale(1); }
.ach-card .at { font-size:13px; font-weight:700; color:var(--ink); margin-top:6px; }
.ach-card .ad { font-size:11px; color:var(--ink3); margin-top:2px; }
.ach-card .axp { display:inline-block; margin-top:8px; font-size:11px; font-weight:800; color:var(--terra-dark);
  background:var(--terra-soft); padding:2px 8px; border-radius:999px; }
.ach-card .aprog { height:5px; border-radius:999px; background:var(--bg-soft); margin-top:9px; overflow:hidden; }
.ach-card .aprog > i { display:block; height:100%; background:var(--forest); border-radius:999px; }
.ach-card .badge-done { position:absolute; top:8px; right:9px; line-height:1; }
.ach-card .badge-done .ic { stroke:var(--forest); }

/* ════════════════════════════════════════════════════════════════
   COMPANION LAYER — редизайн-ветка: живой фон-листья, зверёк-компаньон
   на прогрессе, интерактивные достижения, стаггер-появление секций.
   ════════════════════════════════════════════════════════════════ */

/* ── Шкала-загрузчик: плавное заполнение + бегущий блик ─────────── */
.loadbar {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--bg-soft); overflow: hidden;
}
.loadbar .bar-fill {
  position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--barcol, var(--accent)) 62%, transparent), var(--barcol, var(--accent)));
}
/* Три макро-полосы под калориями (замена колец Б/Ж/У) */
.macro-bars { display: flex; flex-direction: column; gap: 12px; }

/* ── Тарифы FiT Start / FiT Solo / FiT Coach ── */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-list { display: flex; flex-direction: column; gap: 10px; }
.plan-list .plan-card { width: 100%; }
.plan-card {
  text-align: left; padding: 14px 12px; border-radius: 16px; cursor: pointer;
  background: var(--bg-soft); border: 2px solid transparent; color: var(--ink);
}
.plan-card.on { border-color: var(--forest); background: color-mix(in srgb, var(--forest) 8%, var(--bg-card)); }
.plan-card.dis { opacity: .55; cursor: not-allowed; }
.plan-card .pc-name { font-weight: 800; font-size: 15px; }
.plan-card .pc-check { color: var(--forest); font-weight: 800; }
.plan-card .pc-price { margin-top: 6px; font-size: 18px; }
.plan-card .pc-price b { font-size: 20px; }
.plan-card .pc-per { font-size: 12px; color: var(--ink3); }
.plan-card .pc-seats { margin-top: 6px; font-size: 11px; color: var(--terra); font-weight: 700; }
.plan-card .pc-feats { margin: 10px 0 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 4px; }
.plan-card .pc-feats li { font-size: 11.5px; line-height: 1.35; color: var(--ink2); }
/* FiT Start — бесплатный, не покупается: карточка для сравнения. */
.plan-card.free { cursor: default; opacity: 1; }
.plan-card.free .pc-price b { font-size: 17px; }
.plan-card .pc-trial { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--forest); }

/* Подпись под результатами ИИ (требование юриста, ТЗ тарифов). */
.ai-disclaimer { margin: 10px 0 0; font-size: 11px; line-height: 1.4; color: var(--ink3); }
.ai-disclaimer.on-dark { color: inherit; opacity: .65; }
.bubble .ai-disclaimer { margin-top: 6px; font-size: 10.5px; }

/* Способ добавить приём, закрытый тарифом или лимитом. */
.addmeal-method-btn.locked { opacity: .6; }
.addmeal-method-btn.locked .amm-ic { color: var(--ink3); }

/* Плашка о cookie при первом открытии: только информация, без галочек. */
.cookie-note {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: calc(100% - 32px); max-width: 448px; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 16px; background: var(--bg-card); color: var(--ink);
  box-shadow: 0 8px 28px rgba(0,0,0,.14); font-size: 12.5px; line-height: 1.45;
}
.cookie-note p { margin: 0; flex: 1; }
.cookie-note .btn { width: auto; min-width: 0; flex: 0 0 auto; padding: 9px 14px; font-size: 13px; }
/* Плашка «доступно на Full» поверх заблокированных секций */
.plan-lock {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-radius: 16px; background: var(--bg-soft); border: 1.5px dashed var(--sand-dark);
}
.plan-lock .pl-ic .ic { stroke: var(--ink3); }
.plan-lock .pl-tx { flex: 1; font-size: 13px; line-height: 1.4; color: var(--ink2); }
.loadbar .bar-fill::after {           /* блик, пробегающий по заполненной части */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  background-size: 220% 100%;
  animation: load-shine 2s ease-in-out infinite;
}
@keyframes load-shine { from { background-position: 130% 0; } to { background-position: -90% 0; } }
.loadbar-cap { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.loadbar-cap .lc-name { font-size: 12px; font-weight: 700; color: var(--ink2); }
.loadbar-cap .lc-pct  { font-size: 11px; font-weight: 700; color: var(--ink3); }
@media (prefers-reduced-motion: reduce) { .loadbar .bar-fill::after { animation: none; opacity: 0; } }

/* ── Неделя: лапки вместо галочек ──────────────────────────────── */
.wd-cell.on .wd-dot { font-size: 16px; }
.wd-cell.on .wd-dot span { display: inline-block; animation: paw-in .45s cubic-bezier(.34,1.56,.64,1) both; }
.wd-cell:nth-child(1) .wd-dot span { animation-delay: .05s; }
.wd-cell:nth-child(2) .wd-dot span { animation-delay: .1s; }
.wd-cell:nth-child(3) .wd-dot span { animation-delay: .15s; }
.wd-cell:nth-child(4) .wd-dot span { animation-delay: .2s; }
.wd-cell:nth-child(5) .wd-dot span { animation-delay: .25s; }
.wd-cell:nth-child(6) .wd-dot span { animation-delay: .3s; }
.wd-cell:nth-child(7) .wd-dot span { animation-delay: .35s; }
@keyframes paw-in { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .wd-cell.on .wd-dot span { animation: none; } }

/* ── Достижения: живой уровень, шиммер и отклик на тап ─────────── */
.ach-hero .lvl-badge { animation: badge-bob 2.4s ease-in-out infinite; }
@keyframes badge-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-3px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .ach-hero .lvl-badge { animation: none; } }

.ach-card { cursor: pointer; transition: transform .15s ease; overflow: hidden; }
.ach-card:active { transform: scale(.96); }
.ach-card:not(.locked)::before {          /* редкий световой блик по открытым бейджам */
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -70%; width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(8deg);
  animation: badge-sheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badge-sheen {
  0%, 72% { left: -70%; }
  100%    { left: 140%; }
}
@media (prefers-reduced-motion: reduce) { .ach-card:not(.locked)::before { animation: none; } }
.ach-card.wiggle { animation: ach-wiggle .5s ease; }
@keyframes ach-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
  75% { transform: rotate(-1.5deg); }
}
.ach-card.pop .ai { animation: ach-pop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes ach-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35) rotate(-8deg); }
  100% { transform: scale(1); }
}

/* ── Стаггер-появление секций экрана ───────────────────────────── */
.fade-in > * { animation: rise-in .5s cubic-bezier(.2,.7,.3,1) both; }
.fade-in > *:nth-child(1) { animation-delay: 0s; }
.fade-in > *:nth-child(2) { animation-delay: .06s; }
.fade-in > *:nth-child(3) { animation-delay: .12s; }
.fade-in > *:nth-child(4) { animation-delay: .18s; }
.fade-in > *:nth-child(5) { animation-delay: .24s; }
.fade-in > *:nth-child(6) { animation-delay: .3s; }
.fade-in > *:nth-child(n+7) { animation-delay: .36s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in > * { animation: none; } }

/* Bouncing dots animation for loading states */
.btn-loading::after {
  content: ""; display: inline-block; width: 4px; height: 4px;
  background: currentColor; border-radius: 50%; margin-left: 6px;
  animation: bounce-dots 1.4s infinite;
  vertical-align: middle;
}
@keyframes bounce-dots {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .btn-loading::after { animation: none; opacity: 0.7; } }

/* ── Отчёт: за какой день заполняем (кнопка-дата + календарь) ─────
   Заменила кнопку «Отправить за вчера»: день отчёта всегда подписан
   словами наверху экрана, прошедший день дополнительно подкрашен. ── */
.rep-daybar { display: flex; align-items: center; gap: 8px; }
.rep-day-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 14px; border: 1.5px solid var(--bg-soft); background: var(--bg-card);
  font-family: var(--font-sans); text-align: left; cursor: pointer; color: var(--ink);
}
.rep-day-btn:active { transform: scale(.98); }
.rep-day-btn .rdb-ic { color: var(--forest); display: flex; flex: 0 0 auto; }
.rep-day-btn .rdb-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rep-day-btn .rdb-cap { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink3); }
.rep-day-btn .rdb-val { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-day-btn .rdb-chev { color: var(--ink3); font-size: 16px; flex: 0 0 auto; }
.rep-daybar.other .rep-day-btn { border-color: var(--forest-tint); background: color-mix(in srgb, var(--accent) 7%, var(--bg-card)); }
.rep-day-today { flex: 0 0 auto; width: auto; white-space: nowrap; }
.rep-day-note { font-size: 12px; color: var(--ink3); margin-top: 8px; line-height: 1.45; }

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-month { font-weight: 700; font-size: 15px; text-transform: capitalize; }
.cal-nav {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--bg-soft);
  background: var(--bg-card); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; font-family: var(--font-sans);
}
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink3); text-align: center; padding: 4px 0; }
.cal-day {
  position: relative; aspect-ratio: 1; border-radius: 12px; border: 0; background: transparent;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; font-variant-numeric: tabular-nums; padding: 0;
}
.cal-day:active:not(:disabled) { transform: scale(.94); }
.cal-day:disabled { color: var(--ink3); opacity: .35; cursor: default; }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--forest); }
.cal-day.sel { background: var(--forest); color: #fff; }
.cal-day i { position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; }
.cal-day.done i { background: var(--forest); }
.cal-day.draft i { background: var(--terra); }
.cal-day.sel i { background: #fff; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink3); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cal-legend i.done { background: var(--forest); }
.cal-legend i.draft { background: var(--terra); }

.miss-days { display: flex; flex-wrap: wrap; gap: 8px; }

/* Удалить приём пищи — только в «Отчёте», в раскрытой карточке приёма */
.meal-del {
  margin-top: 10px; padding: 4px 0; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--rose);
}
.meal-del .ic { width: 14px; height: 14px; }

/* ── Камера внутри приложения (сканер штрихкода на Android) ─────────
   Живой поток через getUserMedia: BarcodeDetector находит код сам, без
   снимка. Зачем и где она включается — js/app.js, useInAppCamera. ── */
.cam-overlay { position: absolute; inset: 0; z-index: 70; background: #000; display: flex; flex-direction: column; }
.cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-frame {
  position: absolute; left: 8%; right: 8%; top: 34%; height: 22%; border-radius: 16px; pointer-events: none;
  border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
}
.cam-top { position: relative; display: flex; justify-content: flex-end; padding: calc(env(safe-area-inset-top) + 12px) 14px 0; }
.cam-close {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.45); color: #fff; font-size: 18px; font-family: var(--font-sans);
}
.cam-hint {
  position: relative; margin-top: auto; padding: 0 24px 14px; text-align: center;
  color: #fff; font-size: 13.5px; line-height: 1.45; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.cam-hint .btn { text-shadow: none; }
.cam-bar {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 12px 20px calc(env(safe-area-inset-bottom) + 22px);
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.cam-side {
  justify-self: start; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; color: #fff; cursor: pointer;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
}
.cam-side .ic { width: 24px; height: 24px; }
.cam-shutter {
  width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; cursor: pointer;
  background: rgba(255,255,255,.25); transition: transform var(--dur-fast) var(--ease-out);
}
.cam-shutter:active:not(:disabled) { transform: scale(.92); background: rgba(255,255,255,.55); }
.cam-shutter:disabled { opacity: .35; cursor: default; }

/* ════════════════════════════════════════════════════════════════
   ЛИСТ — один сплошной лист вместо «белых карточек на цветном поле».
   Содержимое больше не лежит в коробках: секции разделяет волосяная
   линейка сверху и воздух, вкладки — подчёркнутый текст, таб-бар
   пристыкован к низу. Рамку оставляем только тому, что нажимается
   (поля, чипы, кнопки выбора), заливку — одному акцентному блоку на
   экран (.b-hero, .chart-wrap, .ach-hero, .subcard) и оверлеям.
   Слой намеренно стоит последним в файле и переопределяет поверхности
   выше — разметка в js/ не менялась.
   ════════════════════════════════════════════════════════════════ */
:root {
  --bg:   color-mix(in srgb, var(--accent) 3%, oklch(98.6% 0.004 100));
  --rule: color-mix(in srgb, var(--ink-base) 12%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink-base) 82%, transparent);
  --tabbar-h: 62px;
}

/* ── Секции: линейка сверху, без фона/тени/скругления ── */
.card {
  background: none; border: 0; border-top: 1px solid var(--rule);
  border-radius: 0; box-shadow: none;
}
.card-pad { padding: 18px 0; }
.card-pad.center { padding: 32px 0; }
.card[style*="padding"] { padding-left: 0 !important; padding-right: 0 !important; }
/* Заметка на полях: бывшая карточка с цветной полосой слева */
.card[style*="border-left"] {
  border-top: 0; background: none !important;
  padding: 2px 0 2px 14px !important;
}
/* Тихая плашка-пояснение — единственная заливка, кроме акцентного блока */
.card[style*="background:var(--bg-soft)"] {
  border-top: 0; border-radius: 14px; padding: 14px 16px !important;
}
.card.locked-card {
  border: 1px dashed var(--rule-strong); border-radius: 14px;
  background: none; padding: 24px 16px;
}
.baseline-card { border-left: 0; }
.card-tap:active { transform: none; opacity: .6; }

/* Сгруппированные списки — строки от края до края */
.rep-group, .meal-group { padding: 0; }
.mg-head { padding: 16px 0 4px; }
.meal-acc, .rep-row { padding: 14px 0; }
.meal-acc:not(:last-child), .rep-row:not(:last-child) { border-bottom-color: var(--rule); }

/* ── Подписи секций: обычным регистром, без разрядки капсом ── */
.eyebrow, .day-sum .ds-cap, .rep-day-btn .rdb-cap {
  font-size: 13px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink3);
}

/* ── Шапка: значки без кружков ── */
.help-btn, .bell-btn, .circle-icon-btn, .theme-trigger, .onb-back {
  background: none; border: 0; box-shadow: none; color: var(--ink);
}
.help-btn, .bell-btn { width: 36px; height: 36px; top: calc(env(safe-area-inset-top) + 13px); }
.help-btn { right: calc(var(--screen-pad) - 10px); font-size: 17px; font-weight: 600; }
.bell-btn { right: calc(var(--screen-pad) + 28px); }
.bell-btn .ic { width: 19px; height: 19px; stroke: var(--ink); }
.bell-dot { top: 7px; right: 7px; border-color: var(--bg); }
.theme-trigger { right: 0; }

/* ── Вкладки: подчёркнутый текст вместо «таблетки в лотке» ── */
.seg {
  gap: 0; padding: 0; background: none; border-radius: 0;
  border-bottom: 1px solid var(--rule);
}
.seg button {
  flex: 1 1 auto; padding: 10px 4px 11px; border-radius: 0;
  font-size: 14px; font-weight: 500; color: var(--ink3);
  margin-bottom: -1px; border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.seg button.active {
  background: none; box-shadow: none; color: var(--ink); font-weight: 600;
  border-bottom-color: var(--ink);
}
.seg-tight .seg button { padding: 10px 2px 11px; font-size: 13px; }
.section .segscroll { padding: 0; }
.seg.seg-sub { border-bottom: 0; }
.seg.seg-sub button {
  margin-bottom: 0; padding: 6px 12px; font-size: 12px; border-radius: 999px;
  background: none; border: 1px solid var(--rule);
}
.seg.seg-sub button.active { background: var(--forest-soft); border-color: transparent; color: var(--forest); }

/* ── Таб-бар: пристыкован к низу, активная вкладка — чёрточка сверху ── */
.tabbar {
  left: 0; right: 0; bottom: 0; border-radius: 0;
  padding: 0 6px calc(env(safe-area-inset-bottom) + 8px);
  background: var(--bg); border: 0; border-top: 1px solid var(--rule); box-shadow: none;
}
.tabbtn { padding: 8px 0 0; gap: 3px; margin-top: -1px; border-top: 2px solid transparent; }
.tabbtn .tic { width: 28px; height: 26px; border-radius: 0; }
.tabbtn .tlbl { font-size: 10px; font-weight: 500; }
.tabbtn.active { border-top-color: var(--accent); }
.tabbtn.active .tic { background: none; color: var(--ink); }
.tabbtn.active .tic .lic { transform: none; stroke-width: 2.2; }
.tabbtn.active .tlbl { color: var(--ink); font-weight: 600; }

/* ── FAB: без пульсирующего свечения ── */
.fab { animation: none; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ink-base) 45%, transparent); }

/* ── Строки-списки: линейка снизу вместо отдельных плиток ── */
.lrow, .task-row, .qmeal, .onb-feat, .broadcast {
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0; box-shadow: none; padding: 14px 0;
}
.task-row + .task-row { margin-top: 0; }
.lrow:active { filter: none; opacity: .6; }
.lrow .lic, .task-ic, .onb-feat .of-ic, .hero .hicon {
  width: 24px; height: 24px; background: none; border-radius: 0; box-shadow: none;
}
.broadcast { padding-left: 12px; border-left: 2px solid var(--rule); }
.broadcast.unread { background: none; border-left-color: var(--accent); }

/* ── Цифры в ряд: вес / белок / регулярность, плитки показателей ── */
.b-strip {
  background: none; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--rule);
}
.b-chip { padding: 16px 14px; }
.b-chip:first-child { padding-left: 0; }
.b-chip + .b-chip::before { top: 16px; bottom: 16px; background: var(--rule); }
.stat {
  background: none; border: 0; border-top: 1px solid var(--rule);
  border-radius: 0; box-shadow: none; padding: 12px 0;
}
.mchip { background: none; box-shadow: none; border: 1px solid var(--rule); border-radius: 12px; }
.mchip.active { border-color: transparent; }

/* ── Достижения: сетка на линейках, без блика ── */
.ach-grid { gap: 0 16px; }
.ach-card {
  background: none; border-radius: 0; box-shadow: none; text-align: left;
  border-top: 1px solid var(--rule); padding: 14px 0 16px;
}
.ach-card:not(.locked)::before { content: none; }
.ach-card .badge-done { top: 14px; right: 0; }

/* ── Фото-плитки: фото само по себе, подпись на листе ── */
.food-grid, .rc-grid { gap: 22px 12px; }
.food-card, .recipe-card {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.food-card .fc-photo-wrap, .recipe-card .rc-photo-wrap { border-radius: 14px; overflow: hidden; }
.food-card .fc-body, .recipe-card .rc-body { padding: 9px 0 0; }
.b-rec { background: none; border: 0; border-radius: 0; overflow: visible; }
.b-rec .ph { border-radius: 14px; overflow: hidden; }
.b-rec .b { padding: 14px 0 0; }

/* ── Отчёт: итог дня — строка под жирной линейкой, выбор дня — текст ── */
.day-sum {
  padding: 12px 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--bg); border-bottom: 2px solid var(--rule-strong);
}
.rep-day-btn { padding: 4px 0; border: 0; border-radius: 0; background: none; }
.rep-day-btn:active { transform: none; opacity: .6; }
.rep-daybar.other .rep-day-btn { background: none; }
.rep-daybar.other .rep-day-btn .rdb-val { color: var(--accent); }

/* ── Цель питания: строка без подложки ── */
.hero {
  padding: 0 0 16px; border: 0; border-radius: 0; background: none;
  border-bottom: 1px solid var(--rule);
}

/* ── Акцентный блок: плоский, без цветного свечения ── */
.chart-wrap, .ach-hero { box-shadow: none; }
.b-hero { border-radius: 20px; }
.chart-wrap, .subcard, .cycle-hero { border-radius: 16px; }
.ach-hero, .onb-plan-card { border-radius: 20px; }

/* ── Чат: ответ — мягкая заливка, не «карточка с тенью» ── */
.bubble.ai { background: var(--bg-soft); box-shadow: none; }

/* ── Контролы выбора: тонкая рамка вместо тени ── */
.onb-card, .onb-gender, .onb-stepper {
  background: none; box-shadow: none; border: 1px solid var(--rule);
}
.onb-card.sel { background: var(--forest-soft); border-color: var(--forest); }
.onb-gender.on { background: var(--forest); border-color: var(--forest); }
.onb-pace, .onb-chip { border: 1px solid var(--rule); background: none; }
.onb-pace.on { border-color: var(--forest); border-width: 1px; box-shadow: inset 0 0 0 1px var(--forest); }
.onb-chip.on { background: var(--forest-soft); border-color: var(--forest); }
.field, .pay-field, .pay-tab, .sbp-bank, .mg-row, .wk-toggle,
.addmeal-type-btn, .addmeal-method-btn, .cal-nav {
  border-width: 1px; border-color: var(--rule);
}
.field:focus { border-color: var(--forest); }
.auth-card { background: none; box-shadow: none; border-radius: 0; margin: 0 var(--screen-pad); padding: 0; }
.auth-logo::before { content: none; }
/* Под строкой вкладок уже есть линейка — первой секции своя не нужна */
.segscroll + .section > .card:first-child, .segscroll + .card,
.section:has(> .seg) + .section > .card:first-child { border-top: 0; }
/* Варианты выбора в онбординге — список на линейках, не стопка коробок */
.onb-card { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 16px 0; }
.onb-card.sel { background: none; border-color: var(--rule); }
.onb-card.sel .oc-t { color: var(--forest); }
.onb-card .oc-ic, .onb-card .oc-ic.on { width: 24px; height: 24px; background: none; border-radius: 0; }
.onb-card .oc-ic.on { color: var(--forest); }
.onb-stepper { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 6px 0; }
.onb-stepper button { width: 40px; height: 40px; border-radius: 50%; background: none; border: 1px solid var(--rule); }
.broadcast { border-bottom: 0; padding: 2px 0 2px 12px; }
.auth-card { border: 0; }
.addmeal-methods { gap: 0; }
.addmeal-method-btn { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 14px 0; background: none; }
.addmeal-method-btn:active { transform: none; opacity: .6; }

/* ── Переключатель вкл/выкл — как системный в iOS (51×31, зелёный #34C759).
   Заменил текстовые пилюли «вкл»/«выкл» в напоминаниях и согласиях. ── */
.ios-switch {
  flex: 0 0 auto; position: relative; width: 51px; height: 31px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--ink-base) 16%, transparent);
  transition: background-color var(--dur-base) var(--ease-out);
}
.ios-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16);
  transition: transform var(--dur-base) var(--ease-out);
}
.ios-switch.on { background: #34C759; }
.ios-switch.on::after { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) { .ios-switch, .ios-switch::after { transition: none; } }


/* ════════════════════════════════════════════════════════════════
   ПАСТЕЛЬ — основной вид приложения (02.10). Поверх слоя «Лист»:
   ровное пастельное поле в оттенке выбранной цветовой темы, шрифты
   Montserrat Alternates (заголовки, крупные цифры) + Golos Text (текст),
   компактные тёмные кнопки-капсулы. Оттенок берётся из --accent, так что
   все четыре темы дают свою пастель.
   Селекторы начинаются с html:root, чтобы уверенно перекрывать правила
   выше по файлу, не переписывая их.
   ════════════════════════════════════════════════════════════════ */
html:root {
  /* Ровное поле, без пятен и градиентов */
  --p-base: color-mix(in oklch, var(--accent) 22%, white);
  --bg: var(--p-base);
  /* На цветном поле серый текст и линейки темнее, иначе теряются */
  --ink3: color-mix(in srgb, var(--ink-base) 66%, transparent);
  --rule: color-mix(in srgb, var(--ink-base) 18%, transparent);
  --font-serif: "Montserrat Alternates", "Golos Text", -apple-system, sans-serif;
  --font-sans:  "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Белая тема — фон задан цветом, а не смесью с акцентом (22% бронзы дали бы
   бежевый). Белые карточки и поля на белом сливаются — им лёгкая серая
   подложка того же тона, что текст. */
html:root[data-theme="white"] {
  --p-base: #ffffff;
  --glass:   color-mix(in srgb, var(--ink-base) 4%, white);
  --bg-card: color-mix(in srgb, var(--ink-base) 4%, white);
}
html:root[data-theme="white"] .field, html:root[data-theme="white"] .auth-field,
html:root[data-theme="white"] .pay-field { background: color-mix(in srgb, var(--ink-base) 5%, white); }
/* Совет ИИ и ответы ИИ в чате на остальных темах — полупрозрачный белый. */
html:root[data-theme="white"] .b-hero,
html:root[data-theme="white"] .bubble.ai { background: var(--bg-card); }
html:root #app { background: var(--p-base); }
html:root .tabbar, html:root .day-sum { background: var(--p-base); }

/* ── Типографика ── */
html:root .scr-header h1 { font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
html:root .display-i { font-weight: 600; }
html:root .display, html:root .sheet h2 { font-weight: 600; letter-spacing: -.02em; }
html:root .cal-compact-num, html:root .pw-num, html:root .mchip-val,
html:root .rep-stepper span, html:root .onb-stepper span { font-weight: 600; letter-spacing: -.02em; }

/* ── Блок совета ИИ — светлая заливка, тёмный текст ── */
html:root .b-hero {
  background: color-mix(in srgb, white 62%, transparent); color: var(--ink);
  border-radius: 24px;
}
html:root .b-hero .eyebrow { color: var(--accent); }
/* График, уровень, подписка: белый текст зашит в разметке, поэтому блок
   остаётся цветным, но ровным, без тёмного градиента */
html:root .chart-wrap, html:root .ach-hero, html:root .subcard, html:root .cycle-hero {
  background: color-mix(in oklch, var(--accent) 90%, white); border-radius: 24px;
}

/* ── Кнопки: тёмная капсула по ширине надписи, второстепенная — контур ── */
html:root .btn, html:root .pw-btn, html:root .ai-hero-btn {
  border-radius: 999px; font-weight: 600; letter-spacing: -.01em;
}
html:root .btn-primary, html:root .ai-hero-btn.primary, html:root .fab { background: var(--ink); color: var(--p-base); }
html:root .btn-ghost, html:root .btn-outline, html:root .ai-hero-btn:not(.primary) {
  background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
html:root .fab { box-shadow: none; }
html:root .btn:not(.btn-sm) { width: auto; padding: 15px 28px; align-self: flex-start; }
/* Минимальная ширина — только обычным кнопкам; у кнопок со своим inline-размером
   (отправка в чате, пара кнопок в ряд) она ломала строку */
html:root .btn:not(.btn-sm):not([style]) { min-width: 148px; }
/* Поля карты в два столбца: input не должен распирать свою половину */
.pay-field .pf-input { min-width: 0; width: 100%; }
/* Отчёт: «Добавить приём пищи», «Отправить на анализ», «Сохранить замеры»
   и кнопка фото-отчёта — по центру */
html:root .btn[data-action="addmeal-open"], html:root .btn[data-action="analyze"],
html:root .btn[data-action="save-measure"], html:root .btn[data-action="send-photos"],
html:root .btn.btn-center {
  display: flex; width: fit-content; margin-inline: auto; align-self: center;
}
/* Связь: «Открыть чат» и кнопка консультации — по центру, одной ширины */
html:root .btn[data-sheet="aiChat"], html:root .btn[data-action="consult"] {
  display: flex; width: 264px; max-width: 100%; margin-inline: auto; align-self: center;
}
/* Оплата: выбор тарифа и экран T-Bank — кнопки по центру. Не уже 264px, как
   на «Связи», чтобы пары («Перейти к оплате» / «Я оплатил — проверить») были
   одной ширины; длинная подпись («Оплатить 11 940 ₽ · 12 мес») раздвигает. */
html:root .sheet .btn:is([data-action="plan-buy"], [data-action="plan-waitlist"],
  [data-action="tpay-open"], [data-action="tpay-check"], [data-action="tpay-retry"],
  [data-action="tpay-close"], [data-action="pay-submit"]) {
  display: flex; width: fit-content; min-width: 264px; max-width: 100%;
  margin-inline: auto; align-self: center;
}
/* Остальные шторки — так же: большая кнопка отдельной строкой (прямо в шторке,
   не в ряду с другой) — по центру, не уже 264px. Владелец раз за разом просил
   центровать кнопки под формами по скриншотам — правило общее, чтобы новые
   шторки не приходилось чинить по одной. */
html:root .sheet > .btn:not(.btn-sm) {
  display: flex; width: fit-content; min-width: 264px; max-width: 100%;
  margin-inline: auto; align-self: center;
}

/* ── Поля и ответы в чате — полупрозрачная белая заливка ── */
html:root .field, html:root .auth-field, html:root .pay-field { background: color-mix(in srgb, white 60%, transparent); }
html:root .bubble.ai { background: color-mix(in srgb, white 62%, transparent); }

/* ── Главная: вес крупно слева, белок и регулярность стопкой справа ── */
html:root .b-strip { display: grid; grid-template-columns: 1.5fr 1fr; overflow: visible; }
html:root .b-chip { min-width: 0; padding: 14px 0 14px 16px; }
html:root .b-chip:first-child { grid-row: span 2; padding: 18px 16px 18px 0; justify-content: flex-end; }
html:root .b-chip:first-child .v { font-size: 44px; line-height: 1; letter-spacing: -.04em; }
html:root .b-chip:first-child .k { font-size: 13px; margin-top: 6px; }
html:root .b-chip + .b-chip::before { top: 0; bottom: 0; }
html:root .b-chip:nth-child(3) { border-top: 1px solid var(--rule); }
/* Кнопка-значок сканера рядом с полем штрихкода — компактная, не «148px минимум» */
html:root .btn.barcode-submit-btn:not(.btn-sm):not([style]) { min-width: 0; padding: 14px 16px; align-self: stretch; }

/* Код из 4 цифр: четыре ячейки, под ними один настоящий input (автозаполнение и клавиатура работают как раньше) */
.code-cells { position:relative; display:flex; gap:10px; justify-content:center; }
.code-cell {
  flex:1 1 0; min-width:0; aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft); border:1.5px solid var(--bg-soft); border-radius:14px;
  font-size:clamp(26px,9vw,40px); font-weight:700; color:var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.code-cells:focus-within .code-cell:not(.filled):first-of-type,
.code-cells:focus-within .code-cell.filled + .code-cell:not(.filled) { border-color: var(--forest-tint); }
.code-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; background:transparent; font-size:16px; z-index:1; caret-color:transparent; color:transparent; }
html:root .code-cell { background: color-mix(in srgb, white 60%, transparent); }
html:root .auth-card .btn-pair .btn { box-sizing:border-box; height:52px; min-height:52px; padding-block:0; white-space:nowrap; font-size:15px; align-self:auto; }