/* ============================================================
   PREMIUM THEME — отдельная версия приложения (роут /premium).
   Дизайн-язык из data/design_handoff/age_variants/COMBINED_premium.html
   (то, что понравилось владельцу): прохладный натуральный фон, ВВ-зелёный
   (НЕ жёлтый), глина/синий-акценты, слоистые мягкие тени, Unbounded/Manrope.

   Подход: грузится ПОСЛЕ design_v2.css и ПЕРЕОПРЕДЕЛЯЕТ его :root-токены —
   весь app (главная/корзина/лайфхаки/прогресс/дневник) перекрашивается разом,
   без переписывания экранов. Текущие версии (design/legacy) не затрагиваются.
   Это ревью-превью; per-screen полиш — следующими итерациями.
   2026-06-15
   ============================================================ */

:root {
  /* — палитра — */
  --vv-green:        #1E9E59;
  --vv-green-dark:   #0F6E3E;
  --vv-green-soft:   #5CD592;
  --vv-green-tint:   #E7F6EC;
  --vv-green-tint-2: #EFF9F1;
  --vv-clay:         #DE774B;
  --vv-clay-tint:    #FBEEE5;
  --vv-blue:         #4C8DC4;
  --vv-blue-tint:    #EAF2F9;

  --ink:        #161A13;
  --ink-2:      #454A40;
  --ink-3:      #787E71;
  --ink-4:      #A7AC9D;
  --line:       #E8E6DC;
  --line-soft:  #F0EEE6;
  --paper:      #FFFFFF;
  --bg:         #F3F2EC;
  --bg-warm:    #FBFAF6;
  --card:       #FFFFFF;

  /* — радиусы (чуть мягче/крупнее) — */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* Б: крупнее (05.09.2026) */

  /* — слоистые тени age.html — */
  --sh-1: 0 1px 2px rgba(22,26,19,.04), 0 1px 1px rgba(22,26,19,.03);
  --sh-2: 0 2px 6px rgba(22,26,19,.05), 0 10px 24px rgba(22,26,19,.05);
  --sh-3: 0 4px 10px rgba(22,26,19,.06), 0 20px 50px rgba(22,26,19,.09);

  /* — зеркало dv2-токенов (design_v2.css читает и их) — */
  --dv2-bg:        #F3F2EC;
  --dv2-surface:   #FFFFFF;
  --dv2-surface-2: #FBFAF6;
  --dv2-text:      #161A13;
  --dv2-text-2:    #454A40;
  --dv2-muted:     #787E71;
  --dv2-muted-2:   #A7AC9D;
  --dv2-border:     #E8E6DC;
  --dv2-border-soft:#F0EEE6;
  --dv2-green:      #1E9E59;
  --dv2-green-dark: #0F6E3E;
  --dv2-green-tint: #E7F6EC;
  --dv2-chip-bg:    rgba(22,26,19,.04);
  --dv2-shadow:     0 1px 2px rgba(22,26,19,.04), 0 1px 1px rgba(22,26,19,.03);
  --dv2-glass:      rgba(243,242,236,.88);
  --dv2-glass-nav:  rgba(243,242,236,.86);
  --dv2-icon-color: #454A40;
  --dv2-ai-bubble:  #E7F6EC;
  --dv2-ai-border:  #CFEBD8;
  --dv2-btn-surface:rgba(255,255,255,.92);
}

/* подложка вокруг «телефона» — чуть холоднее */
body { background: #E7E5DC; }

/* мягкая зелёная аура вверху экрана (как в age.html hero) */
.screen { position: relative; }

/* премиум-полиш карточек: глубже тень + тонкая верхняя светлая кромка */
.dv2-cart-header,
.vv-meal-block,
.wkb-card,
.vv-theme-card,
.lh-card,
.vv-why-cart {
  box-shadow: var(--sh-2) !important;
  border-color: var(--line-soft) !important;
}

/* нижняя навигация — стеклянная, премиум */
.bottom-nav {
  background: var(--dv2-glass-nav) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-top: 1px solid var(--line-soft) !important;
}
.bottom-nav button.active { color: var(--vv-green-dark) !important; }

/* зелёные кнопки — премиум-градиент + мягкая тень */
.btn-berry, .btn-green {
  background: linear-gradient(135deg, var(--vv-green), var(--vv-green-dark)) !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(15,110,62,.22) !important;
}
/* ⚠ НОЧЬЮ ГЛАВНАЯ КНОПКА ОСТАЁТСЯ ЗЕЛЁНОЙ. Правило выше по каскаду проигрывало
   `.vv-theme-night .btn-berry { background: var(--vv-berry) }` из design_v2.css
   (у него специфичность выше), и одна и та же кнопка днём была фирменной
   зелёной, а ночью — коралловой: замер computed style на экране «Настройки»,
   кнопка «Сохранить» — день зелёный градиент, ночь rgb(229,118,106). То же
   коралловое «Съел всё» в Дневнике. Селектор здесь той же специфичности, что и
   ночное правило, но premium.css грузится ПОСЛЕ design_v2.css — выигрывает он.
   Текст белый: на ночном зелёном (#32D06A → #3FE07A) контраст с белым 2.3, с
   тёмным — 8+, поэтому на ночном градиенте пишем тёмным. */
.vv-theme-night .btn-berry,
.vv-theme-night .btn-green {
  background: linear-gradient(135deg, var(--vv-green), var(--vv-green-dark)) !important;
  color: #12241A !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
}
/* ⚠ ОПАСНОЕ ДЕЙСТВИЕ ОСТАЁТСЯ КРАСНЫМ В ОБЕИХ ТЕМАХ. «Выйти» задавал свой цвет
   инлайн-стилем, а `.vv-theme-night .btn-ghost { color: var(--ink) !important }`
   инлайн-стиль без !important перебивает — ночью кнопка выхода выглядела обычным
   пунктом меню (замер: день rgb(255,60,60), ночь rgb(237,229,214)). */
.btn-danger,
.vv-theme-night .btn-danger,
.vv-theme-night .btn-ghost.btn-danger {
  color: var(--vv-red) !important;
  border-color: var(--vv-red) !important;
}
.btn-green-outline { border-color: var(--vv-green) !important; color: var(--vv-green-dark) !important; }

/* eyebrow/типографика заголовков — под премиум-зелёный */
.eyebrow, .eyebrow.tint, .wkb-section-eyebrow { color: var(--vv-green-dark) !important; }

/* секция «Фрукты и овощи» — без зелёной полоски (по просьбе Данила, как у других приёмов) */
.vv-meal-block[data-fv="1"] .vv-meal-head {
  border-left: none !important;
  padding-left: 0 !important;
}

/* ── Фикс перекрытия нижней навигации фиксированными барами (премиум, мобильный
   вьюпорт с safe-area). На айфоне с вырезом nav ≈ 54px + env(safe-area-inset-bottom),
   поэтому стики-чекаут (был bottom:56px inline) и поле ввода чата (bottom:72px)
   налезали на навигацию. Поднимаем над nav и даём контенту нижний отступ. 2026-06-16 ── */

/* кнопка/бар «Оформить …» — над навигацией (override инлайн-стиля через !important) */
#vv-sticky-checkout {
  bottom: calc(60px + env(safe-area-inset-bottom)) !important;
}
/* чтобы последние товары корзины не прятались под баром «Оформить» */
#cart-list { padding-bottom: 150px !important; }

/* Поле ввода чата «Спросить VVilliam…» — ровно НАД навигацией.
   ⚠ Было bottom: calc(60px + env(safe-area-inset-bottom)), а навигация занимает 75px:
   поле заходило под неё на 15px. Число 60 было выдумано — фиксированной высоты у
   навигации нет, она складывается из содержимого, паддингов и safe-area и разная на
   разных телефонах. Теперь берём измеренную --vv-nav-h (ставит _syncNavHeight в
   bindings.js). safe-area внутрь переменной уже входит — второй раз не прибавляем. */
#screen-chat .chat-input-wrap {
  bottom: var(--vv-nav-h, 76px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 430px !important;
}
/* последнее сообщение чата не должно прятаться под полем ввода.
   ⚠ ЗАПАС СЧИТАЕМ ПО ФАКТИЧЕСКОЙ ВЫСОТЕ БЛОКА, А НЕ ЧИСЛОМ (08.09.2026,
   раунд 2 VVELL-724). Число 96 было верно, пока над полем ввода ничего не
   стояло. С переездом постоянных правил блок вырос: замер в браузере на
   высоте телефона 844 px у Игоря (7 правил) — поле с правилами занимает
   358 px, из них правила 270, а лента резервировала снизу 167. Итог на
   снимке: заголовок «ПОСТОЯННЫЕ ПРАВИЛА · 7» лёг поверх плитки «Разобрать
   прогресс», а кнопка-подсказка просвечивала сквозь строку правил.
   `--vv-chat-input-h` ставит _vvСинхроПолеЧата() в bindings.js. */
#screen-chat .chat-list {
  padding-bottom: calc(var(--vv-nav-h, 76px) + var(--vv-chat-input-h, 96px) + 16px) !important;
}

/* ════════════════════════════════════════════════════════════════
   НОЧНАЯ ТЕМА. premium.css переопределяет :root светлыми токенами и
   грузится ПОСЛЕ design_v2 → клобберил его .vv-theme-night. Возвращаем
   тёмные значения здесь (этот блок — последнее слово в каскаде).
   ════════════════════════════════════════════════════════════════ */
.vv-theme-night {
  --ink:        #F4F1EA;
  --ink-2:      #D8D4CC;
  --ink-3:      #B9B6AD;
  --ink-4:      #8E8A82;
  --line:       rgba(255,255,255,.10);
  --line-soft:  rgba(255,255,255,.07);
  --paper:      #2A2D34;
  --bg:         #1F2228;
  --bg-warm:    #282C33;
  --card:       #2A2D34;
  /* premium.css переопределял эти токены СВЕТЛЫМИ в :root и грузится после design_v2,
     поэтому в ночи они оставались светлыми: белые инпуты (var(--dv2-surface)), светлые
     плитки/советы (var(--vv-green-tint)). Возвращаем тёмные (зеркало design_v2 .vv-theme-night). */
  --vv-green:        #32D06A;
  --vv-green-dark:   #3FE07A;
  --vv-green-tint:   rgba(50,208,106,.14);
  --vv-green-tint-2: rgba(50,208,106,.10);
  --vv-berry:        #E34B76;
  --vv-yellow:       #F1C94A;
  --sh-1: 0 1px 4px rgba(0,0,0,.25);
  --sh-2: 0 6px 20px rgba(0,0,0,.30);
  --sh-3: 0 14px 40px rgba(0,0,0,.35);
  --dv2-bg:          #1F2228;
  --dv2-surface:     #2A2D34;
  --dv2-surface-2:   #30343D;
  --dv2-text:        #F4F1EA;
  --dv2-text-2:      #D8D4CC;
  --dv2-muted:       #B9B6AD;
  --dv2-muted-2:     #8E8A82;
  --dv2-border:      rgba(255,255,255,.10);
  --dv2-border-soft: rgba(255,255,255,.07);
  --dv2-green:       #32D06A;
  --dv2-green-dark:  #3FE07A;
  --dv2-green-tint:  rgba(50,208,106,.14);
  --dv2-berry:       #E34B76;
  --dv2-yellow:      #F1C94A;
  --dv2-chip-bg:     rgba(255,255,255,.08);
  --dv2-shadow:      0 1px 4px rgba(0,0,0,.25);
}
.vv-theme-night body { background: #1F2228; }
.vv-theme-night { --dv2-glass: rgba(31,34,40,.92); --dv2-glass-nav: rgba(31,34,40,.92); }

/* ─────────────────────────────────────────────────────────────────────────
   СКАНЕР И ПОИСК ТОВАРА В ДНЕВНИК (VVELL-66, 03.08.2026)
   Три равноправных пути: камера / код с упаковки / поиск по названию.
   font-size:16px у полей — не косметика: при меньшем размере iOS сам
   зумит страницу на фокусе и вёрстка модалки уезжает.
   ───────────────────────────────────────────────────────────────────────── */
/* пять вкладок (с 21.09.2026 «Покупки») в 390 px не помещаются в строку — переносим, а не режем */
.vv-scan-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.vv-scan-tab {
  flex:1; min-height:44px; padding:9px 8px; border:1px solid var(--line-soft);
  border-radius:var(--r-xs); background:transparent; font:inherit; font-size:13px;
  color:var(--ink-3); cursor:pointer;
}
.vv-scan-tab.is-on { background:#EAF3EC; color:#1F7A4D; border-color:transparent; font-weight:600; }
/* Три вкладки вместо двух — названия стали короче, но в узкий экран всё равно
   впритык. Перенос внутри кнопки выглядел бы сломанным. */
.vv-scan-tab { white-space:nowrap; padding-left:4px; padding-right:4px; }

/* ── Еда по фото (VVELL-99/100, 10.08.2026) ────────────────────────────────
   Ни граммов, ни калорий на карточке нет: их не спрашиваем принципиально. */
.vv-ph-drop {
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; min-height:150px; padding:20px 16px;
  text-align:center; cursor:pointer; overflow:hidden;
  border:1.5px dashed var(--line); border-radius:var(--r-md); background:var(--bg-warm);
}
.vv-ph-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Со снимком рамка становится самой фотографией: иконка и подписи уходят, рамка
   из пунктирной делается сплошной-невидимой. Тап по ней по-прежнему открывает
   выбор — поэтому это label, а не div. */
.vv-ph-drop-img { display:none; }
.vv-ph-drop.has-photo { padding:0; border-style:solid; border-color:transparent; }
.vv-ph-drop.has-photo .vv-ph-drop-img {
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
}
.vv-ph-drop.has-photo .vv-ph-ic,
.vv-ph-drop.has-photo .vv-ph-t,
.vv-ph-drop.has-photo .vv-ph-s { display:none; }
.vv-ph-re { display:none; }
/* Подсказка «Заменить фото» — поверх снимка, на затемнении: без неё непонятно,
   что рамка всё ещё тапается. */
.vv-ph-drop.has-photo .vv-ph-re {
  display:block; position:absolute; right:10px; bottom:10px;
  padding:6px 11px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; font-size:12px; font-weight:600;
}
.vv-ph-ic { color:var(--vv-green-dark); }
.vv-ph-ic svg { width:30px; height:30px; }
.vv-ph-t { font-size:15px; font-weight:700; color:var(--ink); }
.vv-ph-s { font-size:12.5px; color:var(--ink-3); }
/* ── «ИИ смотрит на фото»: сканирование + дыхание ─────────────────────────
   Модель думает 3-12 секунд. Спиннер тут не годится: он говорит «идёт загрузка»,
   а надо сказать «я смотрю ИМЕННО НА ЭТУ фотографию». Поэтому движение живёт
   поверх снимка, а не рядом с ним.

   Приём собран из двух, обкатанных в Google Lens / Apple Visual Look Up:
   1) СКАНИРУЮЩАЯ ПОЛОСА — мягкая светлая волна идёт сверху вниз. Именно она
      читается как «разглядывает», а не «грузит»;
   2) ДЫХАНИЕ — контур снимка медленно наливается и гаснет. Период 2,6 с: это
      темп спокойного вдоха-выдоха, быстрее уже суетится.
   Оба цикла НЕ кратны друг другу (2,2 и 2,6 с) — рисунок не повторяется буквально
   и не выглядит машинным.

   ⚠ Палитра наша, а не «эппловская радуга»: четыре цвета Apple Intelligence на
   песочном фоне выглядят чужеродно. Берём зелёный приложения.

   ⚠ Уход — 0,45 с плавно, а не мгновенно: резкая пропажа читается как сбой.  */
.vv-ph-drop.is-thinking::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  /* Полоса не чисто белая: на студийном фото на белом фоне белая волна не видна
     вовсе (проверено на кадрах). Даём ей зелёное ядро приложения и тёмные края —
     тогда она читается и на светлом, и на тёмном снимке. */
  background: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,       rgba(0,0,0,.10) 40%,
      rgba(255,255,255,.62) 47%, rgba(122,190,150,.55) 50%, rgba(255,255,255,.62) 53%,
      rgba(0,0,0,.10) 60%,    rgba(0,0,0,0) 100%);
  background-size: 100% 300%;
  background-repeat: no-repeat;
  animation: vv-ph-scan 2.2s cubic-bezier(.45,0,.55,1) infinite;
}
/* Второй слой — ровное дыхание по всей площади. Нужен затем, что полоса проходит
   раз в 2,2 с, и между её проходами кадр замирал: казалось, что всё встало. */
.vv-ph-drop.is-thinking::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 80% at 50% 50%,
              rgba(27,127,75,.20) 0%, rgba(27,127,75,0) 70%);
  animation: vv-ph-glow 2.6s ease-in-out infinite;
}
.vv-ph-drop.is-thinking { animation: vv-ph-breathe 2.6s ease-in-out infinite; }
.vv-ph-drop::after, .vv-ph-drop::before { opacity: 1; transition: opacity .45s ease; }
.vv-ph-drop:not(.is-thinking)::after,
.vv-ph-drop:not(.is-thinking)::before { opacity: 0; }

@keyframes vv-ph-scan {
  0%   { background-position: 0 -150%; }
  100% { background-position: 0  150%; }
}
@keyframes vv-ph-glow {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
@keyframes vv-ph-breathe {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(27,127,75,0); }
  50%      { box-shadow: inset 0 0 0 2.5px rgba(27,127,75,.45); }
}

/* Человек попросил систему не двигать картинки — просим и мы. Вместо движения
   остаётся ровная подсветка: понятно, что процесс идёт, но ничего не мельтешит. */
@media (prefers-reduced-motion: reduce) {
  .vv-ph-drop.is-thinking,
  .vv-ph-drop.is-thinking::after,
  .vv-ph-drop.is-thinking::before { animation: none; }
  .vv-ph-drop.is-thinking { box-shadow: inset 0 0 0 2.5px rgba(27,127,75,.45); }
  .vv-ph-drop.is-thinking::after { background: rgba(27,127,75,.10); }
  .vv-ph-drop.is-thinking::before { background: none; }
}

.vv-ph-hint { margin:10px 0 0; font-size:12.5px; color:var(--ink-3); text-align:center; }
.vv-ph-note { margin:10px 0 0; font-size:12px; line-height:1.4; color:var(--vv-clay);
  text-align:center; }
.vv-ph-hint:empty { display:none; }

.vv-ph-card, .vv-ph-done { margin-top:14px; }

.vv-ph-dish { font-size:17px; font-weight:700; color:var(--ink); }
.vv-ph-items { margin-top:3px; font-size:12.5px; line-height:1.4; color:var(--ink-3); }

/* Шкала из четырёх делений. Показываем ВСЮ линейку, а не одну свою ступень:
   так «средне» читается как место на шкале, а не как приговор ужину. */
.vv-ph-scale { display:flex; gap:5px; margin:14px 0 10px; }
.vv-ph-step { flex:1; display:flex; flex-direction:column; gap:5px; align-items:center; }
/* ⚠ Цвета уровней тут ЗАДАЮТСЯ ЗАНОВО, а не переиспользуются из .vv-pc-N:
   те объявлены как `#screen-stats .vv-pc-N` и `.vv-pc-dot.vv-pc-N`, а лист
   висит на body вне экрана статистики — полоски оставались бесцветными. */
.vv-ph-bar { display:block; width:100%; height:4px; border-radius:2px; opacity:.28;
  background:var(--line); }
.vv-ph-bar.vv-pc-4 { background:var(--vv-green); }
.vv-ph-bar.vv-pc-3 { background:var(--vv-green-dark); }
.vv-ph-bar.vv-pc-2 { background:var(--vv-clay); }
.vv-ph-bar.vv-pc-1 { background:var(--vv-clay); }
.vv-ph-step.is-on .vv-ph-bar { opacity:1; height:5px; }
.vv-ph-step span { font-size:11px; color:var(--ink-3); text-align:center; }
.vv-ph-step.is-on span { color:var(--ink); font-weight:700; }
/* ⚠ КАРТОЧКА ЛИСТА ЕЗДИЛА ВБОК НА iPHONE (VVELL-1136, 28.09.2026). `.vv-modal-card { overflow-y: auto }` делает и
   `overflow-x` прокручиваемым; в WKWebView поле времени «Когда» и подписи шкалы просят больше ширины, чем 320 px, —
   карточка становилась шире экрана, её можно было таскать пальцем, кнопка «Записать» уезжала за край. В Chromium 390
   переполнения нет (scrollWidth = clientWidth). Лечим с двух сторон: вбок карточка не прокручивается, а ни одно поле,
   кнопка, список или шкала не могут стать шире неё; подписи шкалы при нехватке места режутся многоточием. */
.vv-modal-card { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; }
.vv-modal-card > *, .vv-modal-body, .vv-modal-body > * { min-width: 0; max-width: 100%; }
/* ⚠ КНОПКИ-ВКЛАДКИ СЮДА НЕ ВХОДЯТ (VVELL-1141, 29.09.2026). В первой редакции (28.09) здесь стояло и `button`: у `.vv-scan-tab`
   `flex: 1` (основа 0), и перенос на вторую строку держался только на min-width: auto = ширина текста. С `min-width: 0` все
   семь вкладок «Моё · Фото · Штрих-код · По названию · Словами · Покупки · БАДы» встали в ОДНУ строку по 41 px и текст
   слился в полоску (владелец, снимок 29.09). Кнопкам в листе ужиматься не нужно — они и так не шире карточки. */
.vv-modal-card input, .vv-modal-card select, .vv-modal-card textarea,
.vv-modal-card .vv-ph-scale, .vv-modal-card .vv-ph-items, .vv-modal-card .vv-ph-item, .vv-modal-card label { max-width: 100%; min-width: 0; box-sizing: border-box; }
.vv-modal-card .vv-scan-tab { min-width: auto; }
.vv-modal-card input[type=time], .vv-modal-card input[type=date] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; }
/* ⚠ ПОЛЕ-СПИСОК В ЛИСТЕ — СВОЙ ВИД, А НЕ СИСТЕМНЫЙ (проверка VVELL-1190, 30.09.2026). WebKit рисует <select> системной
   светлой плашкой и не берёт наш фон, а цвет текста берёт из темы: под «небом» и ночью «В какой приём» было белым по
   белому — и у товара, и у блюда. Без системного вида фон тот же, что у соседних полей, стрелка — своя.
   ⚠ СТРЕЛКА С !important: ночью design_v2 задаёт всем полям `background: var(--dv2-surface) !important`, и этот
   шорткат гасил картинку (снимок с прода 30.09: приём читается, стрелки нет). */
.vv-modal-card select.vv-scan-input {
  -webkit-appearance: none; appearance: none; padding-right: 40px; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A8F85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important;
}
.vv-ph-step { min-width: 0; }
.vv-ph-step span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vv-ph-why {
  padding:10px 12px; border-radius:var(--r-sm, 10px); background:var(--bg-warm);
  font-size:13px; line-height:1.45; color:var(--ink-2);
}
/* Строка пересчёта: видна только когда человек поправил название. */
.vv-ph-recalc { margin-top:8px; font-size:12px; line-height:1.4; color:var(--ink-3); }
.vv-ph-recalc:empty, .vv-ph-items:empty, .vv-ph-why:empty { display:none; }
.vv-ph-unsure { margin-top:8px; font-size:12.5px; line-height:1.4; color:var(--vv-clay); }
/* Второе прочтение — кнопкой, а не текстом: соглашаться с ним человек будет
   часто, и лишний тап по полю ввода тут ни к чему. */
.vv-ph-alt { padding:0; border:0; background:none; font:inherit; font-weight:700;
  color:var(--vv-clay); text-decoration:underline; cursor:pointer; }
.vv-ph-row { display:block; margin-top:12px; }
.vv-ph-row span { display:block; margin-bottom:4px; font-size:12px; color:var(--ink-3); }
.vv-ph-empty { padding:16px 4px; text-align:center; font-size:13.5px; color:var(--ink-2); }
/* ⚠ ИЗМЕРЕНО, А НЕ НА ГЛАЗ: правый край второй кнопки уходил на 392 px при
   экране 390. Причина — у .btn стоят white-space:nowrap и min-width:auto,
   поэтому флекс-элемент НЕ МОЖЕТ сжаться ниже ширины текста: «Найти по
   названию» требует 191 px, а места 154. Лечится тремя вещами сразу:
   min-width:0 разрешает сжатие, перенос строки разрешает уместиться в две
   строки, а более скромные отступы и кегль убирают саму нехватку. */
.vv-ph-empty-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.vv-ph-empty-acts .btn {
  flex:1 1 130px; min-width:0; white-space:normal;
  padding-left:10px; padding-right:10px; font-size:13.5px; line-height:1.25;
}
.vv-ph-done-t { font-size:16px; font-weight:700; color:var(--ink); }
.vv-ph-done-s { margin-bottom:12px; font-size:12.5px; color:var(--ink-3); }
.vv-scan-cam {
  position:relative; margin-bottom:8px; border-radius:var(--r-sm); overflow:hidden;
  background:#000; aspect-ratio:4/3;
}
.vv-scan-cam video { display:block; width:100%; height:100%; object-fit:cover; }
/* Рамка прицела: затемняем всё вокруг огромной тенью, чтобы не рисовать 4 блока */
.vv-scan-frame {
  position:absolute; left:12%; right:12%; top:32%; bottom:32%; pointer-events:none;
  border:2px solid rgba(255,255,255,.9); border-radius:var(--r-xs);
  box-shadow:0 0 0 100vmax rgba(0,0,0,.28);
}
.vv-scan-hint { margin:6px 0 10px; font-size:12px; color:var(--ink-3); text-align:center; }
.vv-scan-manual summary { padding:8px 0; font-size:13px; color:var(--ink-3); cursor:pointer; }
.vv-scan-input {
  width:100%; box-sizing:border-box; padding:11px 12px; margin-bottom:10px;
  border:1px solid var(--line-soft); border-radius:var(--r-xs);
  font-family:inherit; font-size:16px; background:var(--paper);
}
.vv-scan-lbl { display:block; margin-bottom:4px; font-size:12px; color:var(--ink-3); }
.vv-scan-err { margin-bottom:10px; font-size:13px; color:#C0392B; }
/* ⚠ ЦВЕТ КНОПКЕ ЗАДАЁМ ЯВНО (VVELL-944, 16.09.2026). `font: inherit` наследует
   ТОЛЬКО шрифт — цвет к нему не относится, и <button> оставался с системным чёрным.
   Пока лист был белым, этого никто не замечал; под тёмным стеклом название товара
   стало чёрным по чёрному: контраст 1,11 при норме 4,5 — надпись пропала совсем. */
.vv-find-row {
  display:flex; gap:10px; align-items:center; width:100%; min-height:56px;
  padding:9px; margin-bottom:6px; text-align:left; background:transparent;
  border:1px solid var(--line-soft); border-radius:var(--r-sm); font:inherit;
  color:var(--ink); cursor:pointer;
}
/* ⚠ ПОДСВЕТКА СТРОКИ — ПО КООРДИНАТЕ ПАЛЬЦА, А НЕ ПО :active (23.09.2026, VVELL-1052). На iPhone узел
   касания уезжает на соседнюю строку (ловушка VVELL-994): :active красил не ту строку, в которую пришёл
   клик. Класс is-press ставит bindings.js по elementFromPoint; :active оставлен только мыши. */
.vv-find-row { -webkit-tap-highlight-color: transparent; }
.vv-find-row.is-press { background:var(--line-soft); }
@media (hover: hover) and (pointer: fine) { .vv-find-row:active { background:var(--line-soft); } }
.vv-find-row img { flex:none; width:44px; height:44px; object-fit:cover; border-radius:var(--r-xs); }
.vv-find-name { display:block; font-size:14px; font-weight:600; line-height:1.25; }
.vv-find-sub  { display:block; margin-top:2px; font-size:12px; color:var(--ink-3); }
.vv-scan-found {
  display:flex; gap:10px; align-items:center; padding:10px; margin-bottom:12px;
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
}
.vv-scan-found img { flex:none; width:52px; height:52px; object-fit:cover; border-radius:var(--r-xs); }
.vv-scan-found-name { font-size:14px; font-weight:600; line-height:1.25; }
.vv-scan-found-sub  { margin-top:2px; font-size:12px; color:var(--ink-3); }
/* Подпись «что внутри» под карточкой скана и поиска — ТОТ ЖЕ класс, что у
   фото-пути (`.vv-ph-items`), VVELL-335. Здесь только отступ: у трёх способов
   добавить еду подпись обязана выглядеть одинаково, а не почти одинаково. */
.vv-scan-found + .vv-ph-items { margin:-4px 0 10px; }
.vv-scan-empty {
  padding:12px; border:1px dashed var(--line-soft); border-radius:var(--r-xs);
  font-size:13px; color:var(--ink-2);
}
.vv-scan-empty span { font-size:12px; color:var(--ink-3); }

/* ─────────────────────────────────────────────────────────────────────────
   ДОБАВКИ (БАДы) — VVELL-1068, 23.09.2026
   Вкладка «Добавки» в листе «Добавить в дневник», листы «Добавить добавку» и
   «Мои добавки», строка «Добавки» в разборе дня.
   ⚠ НИ ОДНОГО hex: тема переключается классом .vv-theme-night и переопределяет
     ровно токены (--card, --ink, --ink-2, --ink-3, --line-soft, --vv-green*).
     Захардкоженный фон дал бы белую карточку в тёмной теме.
   ⚠ ЗОНА КАСАНИЯ КНОПОК — НЕ МЕНЬШЕ 44 px. «Принял» и «×2» стоят рядом: узкая
     кнопка на телефоне попадает пальцем в соседнюю.
   ───────────────────────────────────────────────────────────────────────── */
.vv-supp-sum {
  padding:9px 11px; margin-bottom:10px; font-size:13px; line-height:1.35;
  color:var(--ink-2); background:var(--vv-green-tint); border-radius:var(--r-xs);
}
.vv-supp-empty {
  padding:14px 12px; margin-bottom:10px; text-align:center;
  border:1px dashed var(--line-soft); border-radius:var(--r-xs);
  font-size:13px; color:var(--ink-3);
}
.vv-supp-card {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px 11px; margin-bottom:8px;
  border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--card);
}
.vv-supp-card.is-auto { border-color:var(--vv-green); }
.vv-supp-card.is-off { opacity:.55; }
.vv-supp-main { flex:1 1 150px; min-width:0; }
.vv-supp-name { display:block; font-size:14px; font-weight:600; line-height:1.25; color:var(--ink); }
.vv-supp-sub  { display:block; margin-top:2px; font-size:12px; color:var(--ink-3); }
.vv-supp-from { display:block; margin-top:2px; font-size:11.5px; color:var(--ink-3); opacity:.85; }
.vv-supp-acts { display:flex; gap:6px; flex:0 0 auto; }
.vv-supp-btn {
  min-height:44px; padding:10px 12px; border:1px solid var(--line-soft);
  border-radius:var(--r-xs); background:transparent; font:inherit; font-size:13px;
  color:var(--ink-2); cursor:pointer; white-space:nowrap;
}
.vv-supp-btn.is-main { border-color:transparent; background:var(--vv-green-tint); color:var(--vv-green-dark); font-weight:600; }
.vv-supp-btn:active { opacity:.7; }
.vv-supp-add { margin-top:4px; }
.vv-supp-mine-link {
  display:block; width:100%; min-height:44px; margin-top:6px; padding:12px 8px;
  background:none; border:0; font:inherit; font-size:13px; color:var(--ink-3);
  text-decoration:underline; cursor:pointer;
}
/* Строка справочника — та же разметка, что у поиска товаров (.vv-find-row):
   подсветка по координате пальца достаётся ей бесплатно (VVELL-1052). */
.vv-supp-row { align-items:flex-start; }
.vv-supp-gives { color:var(--vv-green-dark); }
.vv-supp-own-link {
  display:block; width:100%; min-height:44px; margin-top:8px; padding:12px 8px;
  background:none; border:0; font:inherit; font-size:13px; color:var(--ink-3);
  text-decoration:underline; cursor:pointer;
}
.vv-supp-back {
  min-height:44px; margin-bottom:6px; padding:10px 2px; background:none; border:0;
  font:inherit; font-size:13px; color:var(--ink-3); cursor:pointer;
}
.vv-supp-chosen {
  padding:10px 11px; margin-bottom:12px;
  border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--card);
}
.vv-supp-chosen b { display:block; font-size:15px; font-weight:600; color:var(--ink); }
.vv-supp-chosen span { display:block; margin-top:2px; font-size:12px; color:var(--ink-3); }
.vv-supp-lbl { margin:12px 0 6px; font-size:12px; color:var(--ink-3); }
.vv-supp-lbl small { font-size:11.5px; opacity:.8; }
.vv-supp-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.vv-supp-chip {
  min-width:52px; min-height:44px; padding:10px 12px; border:1px solid var(--line-soft);
  border-radius:var(--r-xs); background:transparent; font:inherit; font-size:14px;
  color:var(--ink-2); cursor:pointer;
}
.vv-supp-chip.is-on { border-color:transparent; background:var(--vv-green-tint); color:var(--vv-green-dark); font-weight:600; }
.vv-supp-num {
  width:92px; min-height:44px; box-sizing:border-box; padding:10px 12px;
  border:1px solid var(--line-soft); border-radius:var(--r-xs);
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--paper);
}
.vv-supp-tiles { display:flex; gap:8px; }
.vv-supp-tile {
  flex:1 1 0; min-height:60px; padding:11px 10px; text-align:left;
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:transparent; font:inherit; color:var(--ink-2); cursor:pointer;
}
.vv-supp-tile b { display:block; font-size:14px; font-weight:600; line-height:1.2; }
.vv-supp-tile span { display:block; margin-top:3px; font-size:12px; color:var(--ink-3); }
.vv-supp-tile.is-on { border-color:transparent; background:var(--vv-green-tint); }
.vv-supp-tile.is-on b { color:var(--vv-green-dark); }
.vv-supp-two { display:flex; gap:8px; }
.vv-supp-two .vv-scan-input { margin-bottom:0; }
.vv-supp-two .vv-scan-input:first-child { flex:1 1 auto; }
.vv-supp-two .vv-scan-input:last-child { flex:0 0 96px; }
.vv-supp-note { margin-top:10px; font-size:12px; line-height:1.4; color:var(--ink-3); }
.vv-supp-safety {
  margin-top:8px; padding:9px 11px; font-size:12px; line-height:1.4;
  color:var(--ink-2); background:var(--bg-warm); border-radius:var(--r-xs);
}
.vv-supp-mine-row {
  padding:12px; margin-bottom:10px;
  border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--card);
}
.vv-supp-mine-row.is-off { opacity:.55; }
.vv-supp-drop {
  display:block; width:100%; min-height:44px; margin-top:12px; padding:12px 8px;
  background:none; border:0; font:inherit; font-size:13px; color:var(--ink-3);
  text-decoration:underline; cursor:pointer;
}
/* Строка «Добавки» в разборе дня */
.vv-supp-line-text { font-size:14px; line-height:1.4; color:var(--ink-2); }
.vv-supp-line-more {
  min-height:44px; margin-top:2px; padding:10px 2px; background:none; border:0;
  font:inherit; font-size:12.5px; color:var(--ink-3); text-decoration:underline; cursor:pointer;
}
/* «из них 400 мг из добавок» под числом цели */
.vv-gl-supp { margin-top:2px; font-size:12px; color:var(--ink-3); }
/* Та же подпись в разборе дня и в «Питании сегодня»: число выросло — говорим, откуда. */
.vv-supp-in { margin-top:6px; font-size:12px; line-height:1.4; color:var(--ink-3); }
/* «Вернуть в список» у убранной добавки */
.vv-supp-back-btn {
  display:block; width:100%; min-height:44px; margin-top:10px; padding:12px 8px;
  border:1px solid var(--line-soft); border-radius:var(--r-xs); background:transparent;
  font:inherit; font-size:13px; color:var(--ink-2); cursor:pointer;
}
/* Пока ответ не пришёл, кнопки не ловят второй тап: «убрать» дважды уводило день в минус. */
.vv-supp-out.is-busy, #vv-supp-out.is-busy { opacity:.6; pointer-events:none; }

/* ─────────────────────────────────────────────────────────────────────────
   ЛИСТ ВВОДА МЕТРИКИ (VVELL-63, 03.08.2026)
   Ввод открывается ПОВЕРХ текущего экрана, а не уводит на другой: раньше тап
   по «Сон» в «Итоге дня» переносил с Прогресса на Дневник, где подсветка
   секции продолжала врать. Лист сохраняет место и контекст.
   ───────────────────────────────────────────────────────────────────────── */
.vv-sheet-bg { align-items: flex-end; }          /* лист приезжает снизу, не по центру */
.vv-sheet-card {
  width: 100%; max-height: 88vh; overflow-y: auto; box-sizing: border-box;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .18);
  animation: vvSheetUp .22s ease-out;
}
/* ⚠ СДВИГ В ПИКСЕЛЯХ, А НЕ В ПРОЦЕНТАХ ОТ ВЫСОТЫ ЛИСТА (18.09.2026).
   Было `translateY(14%)`. У листа меню высота ≈ 455 px, 14 % — это 64 px, ровно высота строки.
   Пока лист едет (220 мс), нарисованный кадр отстоит от настоящей геометрии на целую строку:
   палец видит «Настройки», а касание достаётся строке ниже. Клик считается позже, по осевшей
   геометрии, поэтому переход шёл верный, а подсветка оставалась у соседа — ровно жалоба
   владельца «жму кнопку А, выделяется Б, но переносит в А». 18 px — меньше трети строки:
   промахнуться мимо своей строки из-за движения больше нельзя, а лист по-прежнему выезжает. */
@keyframes vvSheetUp { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vv-sheet-card { animation: none; } }
.vv-sheet-grip {
  width: 38px; height: 4px; margin: 6px auto 10px;
  background: var(--line-soft); border-radius: 2px;
}
/* ⚠ ШАПКА ЛИСТА ОБЯЗАНА ВМЕЩАТЬ ЗОНУ НАЖАТИЯ КРЕСТИКА (13.08.2026).
   Сам кружок 30×30, но зона указателя у него добита до 44×44 прозрачным
   ::before (см. блок .vv-modal-close ниже) — он торчит на 7 px выше и ниже
   кружка. Шапка была ровно по кружку, поэтому нижние 7 px зоны ложились на
   ПЕРВУЮ строку тела листа и забирали её тап себе: замер elementFromPoint по
   листу «Прошлые разговоры» — точки (331, y+2 … y+14) первой строки отдавали
   .vv-modal-close, сама строка отзывалась только с y+20. Палец закрывал лист
   вместо того, чтобы открыть разговор; в «Памяти обо мне» так же перехватывало
   верх кнопки «Убрать».
   min-height 44 делает шапку ровно такой же высоты, как зона нажатия, — зона
   больше никуда не выходит. Числом это и проверяется. */
.vv-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px;
}
.vv-sheet-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 18px; font-weight: 800; color: var(--ink); text-wrap: balance;
}
.vv-sheet-sub { margin: 2px 0 14px; font-size: 13px; color: var(--ink-3); }
.vv-sheet-chart-title { margin: 18px 0 6px; font-size: 12px; color: var(--ink-3); }
.vv-sheet-chart { min-height: 84px; }

/* Период и вывод под графиком (VVELL-103). Переключатель — кнопки, а не
   выпадающий список: все варианты должны быть видны сразу, без раскрытия.
   ⚠ Прежнее оправдание «высота 32px здесь допустима вместо 44» СНЯТО.
   Пилюля остаётся 32px только визуально, а зона указателя добирается до 44
   прозрачным псевдоэлементом — см. блок .vvch-* в конце файла. */
.vv-ms-chart-head { display: flex; align-items: center; gap: 10px; }
.vv-ms-chart-head .vv-sheet-chart-title { flex: 1; margin-bottom: 6px; }
.vv-ms-range { display: flex; gap: 4px; margin-top: 12px; }
.vv-ms-range-btn {
  min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3);
  cursor: pointer; white-space: nowrap;
}
.vv-ms-range-btn.is-on {
  background: var(--vv-green-tint); border-color: transparent; color: var(--vv-green-dark);
}
.vv-ms-trend {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm, 10px);
  background: var(--bg-warm); font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
/* Хорошая и настораживающая динамика различаются НЕ ТОЛЬКО цветом — текст сам
   говорит, что происходит. Цвет здесь усиливает, а не несёт смысл в одиночку. */
.vv-ms-trend.is-good  { background: var(--vv-green-tint); color: var(--ink); }
.vv-ms-trend.is-watch { background: var(--vv-clay-tint);  color: var(--ink); }
.vv-ms-trend:empty { display: none; }
/* ⚠ ЧЕЙ ЭТО РЯД (14.08.2026). Линия за 45 дней у владельца — это 29 ночей WHOOP
   и 16 ночей Apple Health подряд: ступенька на стыке приборов читается как
   изменение здоровья, хотя это смена измерителя. Подпись появляется ТОЛЬКО
   когда приборов в ряду больше одного. Цвета — те же токены, что у соседней
   `.vv-ms-trend`: их контраст уже проверен в обеих темах. */
.vv-ms-srcmix {
  margin-top: 8px; padding: 8px 12px; border-radius: var(--r-sm, 10px);
  background: var(--bg-warm); font-size: 12px; line-height: 1.45; color: var(--ink-2);
}
.vv-ms-srcmix:empty { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   ГРУППЫ СОВЕТОВ (VVELL-63, 03.08.2026)
   «Все N» — настоящая кнопка, раскрывающая остаток группы НА МЕСТЕ.
   До этого в design_v2.css стоял ::after с текстом «Все →», который нельзя
   было нажать: content не принимает события. Иконки — из набора _ic, как на
   корзине и «Готовим», поэтому наследуют цвет темы (эмодзи так не умеют).
   ───────────────────────────────────────────────────────────────────────── */
#screen-lifehacks .lh-group {
  background: var(--card); border-radius: var(--r-md, 12px);
  padding: 14px 16px; margin-bottom: 12px;
}
#screen-lifehacks .lh-group-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
#screen-lifehacks .lh-group-icon { display: inline-flex; flex: none; color: var(--ink-3); }
#screen-lifehacks .lh-group-icon svg { width: 17px; height: 17px; }
#screen-lifehacks .lh-group-title {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 700;
  color: var(--ink); text-wrap: balance;
}
#screen-lifehacks .lh-group-more {
  flex: none; min-height: 32px; padding: 6px 10px;
  border: 1px solid var(--line-soft); border-radius: var(--r-xs); background: transparent;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--vv-green-dark, #1F7A4D);
  cursor: pointer;
}
#screen-lifehacks .lh-group-more:active { background: var(--line-soft); }

/* ── Товары внутри карточки совета (VVELL-63, 03.08.2026) ────────────────────
   Совет заканчивается действием: конкретный товар с полки + причина, почему он.
   Раньше модалка была тупиком, хотя products приходили с сервера всё это время. */
.lh-prod-list { display: flex; flex-direction: column; gap: 8px; }
.lh-prod {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.lh-prod-img { flex: none; width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-xs); }
.lh-prod-body { flex: 1; min-width: 0; }
.lh-prod-name { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.lh-prod-why {
  margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lh-prod-add {
  flex: none; min-height: 34px; padding: 7px 11px;
  border: none; border-radius: var(--r-xs); background: var(--vv-green-dark, #1F7A4D);
  color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.lh-prod-add:disabled { opacity: .55; }

/* Кнопка повтора в чате (VVELL-63, 04.08.2026): у ошибки обязан быть выход.
   До этого единственным советом было «Обнови страницу» — оно стирало весь диалог. */
.vv-chat-retry-row { margin-top: 8px; }
/* ⚠ 44px, А НЕ 36 (дефект 13, 14.08.2026). Это ЕДИНСТВЕННЫЙ выход из ошибки —
   и он был самым мелким элементом экрана: замер указателем давал зону 37×97 при
   норме 44. Соседняя пилюля подсказки в том же прогоне держала 45 — значит порог
   достижим, здесь его просто не поставили. */
.vv-chat-retry { min-height: 44px; padding: 11px 16px; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ТЕКСТ ОТКАЗА В ЧАТЕ (дефект 12, 14.08.2026)
   Было: `<span style="color:#e74c3c">` инлайном в bindings.js::_chatFail. Цвет
   не токен, поэтому ночная тема его не переопределяла, и самый важный текст в
   самый растерянный момент не проходил порог НИ В ОДНОЙ теме: 3,23:1 днём и
   3,56:1 ночью при норме 4,5. Соседи в том же пузыре норму держали (VVILLIAM
   5,65/5,90, пилюли 6,25/6,70) — то есть выбивалась ровно эта строка.
   Числа ниже посчитаны по WCAG 2.1 на заливке пузыря ответа:
   день rgb(228,239,229), ночь rgb(25,51,40).
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --vv-err-text: #B3261E; }        /* 5.53 на дневном пузыре */
:root.vv-theme-night,
.vv-theme-night { --vv-err-text: #FF9A8F; }  /* 6.65 на ночном пузыре */
.vv-chat-err { color: var(--vv-err-text); }
.vv-chat-err-dot { background: var(--vv-err-text) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   ПЕРЕКЛЮЧАТЕЛЬ СЕКЦИЙ ДНЕВНИКА (VVELL-63, 06.08.2026)
   Было: инлайн-стили с захардкоженными #e8375a и #999 — они не переключались
   вместе с темой. Стало: токены, иконка из общего набора, высота под касание.
   ───────────────────────────────────────────────────────────────────────── */
#vv-diary-sections { display: flex; gap: 4px; }
.vv-dsec {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 11px 8px; cursor: pointer;
  background: transparent; border: none;
  border-bottom: 3px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink-3);
  transition: color .18s ease, border-color .18s ease;
}
/* Цвет активной секции — ЗЕЛЁНЫЙ, а не ягодный. JS красил в ягодный, но design_v2.css
   перекрывал на зелёный через !important, и пользователь всё это время видел зелёный.
   Два источника правды противоречили друг другу; оставляем тот, что был на экране. */
.vv-dsec.is-on { color: var(--vv-green-dark); border-bottom-color: var(--vv-green-dark); font-weight: 700; }
.vv-dsec-icon { display: inline-flex; }
.vv-dsec-icon svg { width: 17px; height: 17px; }
.vv-dsec-label { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .vv-dsec { transition: none; } }

/* ── Размеры SVG-иконок там, где раньше стояли эмодзи (06.08.2026) ──────────
   Старые правила задавали иконке font-size — для эмодзи это работало, для SVG
   бессмысленно. Нужен явный размер. !important обязателен: design_v2.css почти
   весь на !important, и без него правило не переживёт каскад. */
#screen-stats .wkb-tab-icon,
#screen-progress .wkb-tab-icon,
#screen-progress .wkb-pane-icon,
#screen-stats .wkb-pane-icon {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  color: currentColor;
}
#screen-stats .wkb-tab-icon svg,
#screen-progress .wkb-tab-icon svg { width: 18px !important; height: 18px !important; }
#screen-progress .wkb-pane-icon svg,
#screen-stats .wkb-pane-icon svg { width: 22px !important; height: 22px !important; }
.vv-itog-life-icon { display: inline-flex; align-items: center; justify-content: center; }
.vv-itog-life-icon svg { width: 19px; height: 19px; }

/* ─────────────────────────────────────────────────────────────────────────
   МОДАЛКА ПОДТВЕРЖДЕНИЯ vvConfirm (06.08.2026)
   Замена window.confirm, который в iOS WKWebView молча возвращает false —
   из-за него на айфоне нельзя было ни отключить WHOOP, ни убрать лекарство.
   ───────────────────────────────────────────────────────────────────────── */
.vv-confirm-card {
  width: min(360px, 88vw); box-sizing: border-box;
  padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-radius: var(--r-md);
}
.vv-confirm-text {
  font-size: 15px; line-height: 1.4; color: var(--ink);
  text-wrap: balance; margin-bottom: 18px;
}
.vv-confirm-actions { display: flex; gap: 8px; }
.vv-confirm-actions .btn {
  flex: 1; min-height: 46px; font-size: 14px; font-weight: 700; border-radius: var(--r-sm);
}
.vv-confirm-no {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line);
}
/* Разрушающее действие отделено цветом и стоит справа — рука не промахнётся мимо
   отмены, а красный говорит о последствии до нажатия. */
/* ⚠ ФОН БЕРЁМ НЕ ИЗ ПАЛИТРЫ ТЕМЫ, А ИЗ ОТДЕЛЬНОГО ТОКЕНА.
   В ночной палитре --sand-berry = #E5766A (лососевый): белый текст на нём даёт
   2,94:1 при норме 4,5:1 — замерено getComputedStyle на живом экране. В дневной
   тот же контрол даёт 5,55:1. Ягодный дневной #B0463B читается на обеих темах
   (5,55:1), поэтому кнопка опасного действия держит его в обеих. */
.vv-confirm-danger { background: var(--vv-berry-solid, #B0463B); color: #fff; border: none; }

/* ── Записи сверх плана в дневнике (06.08.2026) ─────────────────────────────
   Отсканированное и добавленное вручную раньше не показывалось вообще: дневник
   рисовал только позиции из корзины, а by_meal с сервера выбрасывался. Блок
   отделён меткой, чтобы не путать с планом, и позволяет убрать лишнее. */
.vv-extra-block { border-style: dashed; }
.vv-extra-tag {
  padding: 3px 8px; border-radius: 999px;
  background: var(--line-soft); color: var(--ink-3);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.vv-meal-btn-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: none; background: transparent; color: var(--ink-3); cursor: pointer;
}
.vv-meal-btn-del svg { width: 17px; height: 17px; }
.vv-meal-btn-del:disabled { opacity: .5; }

/* ── Состояние «ошибка» (06.08.2026) ────────────────────────────────────────
   Обязательное по docs/DESIGN.md. До этого упавший запрос показывался как факт:
   «0 ккал съедено», «плана нет — собери корзину», «выбери привычки». Человек верил
   и переделывал то, что уже сделано. */
.vv-err {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px 16px; margin: 8px 0;
  background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-md);
}
.vv-err-text { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.vv-err-retry { min-height: 44px; padding: 9px 16px; font-size: 13px; font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────
   РАЗМЕРЫ КАСАНИЯ В ДНЕВНИКЕ (06.08.2026)
   Замер: «съел» был 34×34, «Все съел» ~24px по высоте, отметка привычки ~26px.
   Это ВСЯ работа на экране, и «съел» стоит вплотную к «Все съел» — промах давал
   ложную запись в дневник, которую потом надо снимать вручную.
   Норма 44×44 при зазоре ≥8px (Apple HIG / Material). Визуальный размер кружка
   не раздуваем: расширяем именно область нажатия через ::after.
   !important обязателен — design_v2.css почти весь на нём.
   ───────────────────────────────────────────────────────────────────────── */
#screen-progress .vv-meal-btn-eat,
#screen-stats .vv-meal-btn-eat {
  position: relative;
  width: 38px !important; height: 38px !important;
}
/* Невидимое расширение до 44×44 — кружок остаётся прежним, палец не мажет */
#screen-progress .vv-meal-btn-eat::after,
#screen-stats .vv-meal-btn-eat::after {
  content: ''; position: absolute; inset: -3px;
}
#screen-progress .wkb-food-meal-all,
#screen-stats .wkb-food-meal-all {
  min-height: 36px !important;
  padding: 9px 14px !important;
  font-size: 12px !important;
}
/* Зазор между «Все съел» и рядом стоящими отметками */
#screen-progress .wkb-food-meal-right { gap: 10px !important; }
#screen-progress .vv-ld-habit-btn,
#screen-progress .vv-ld-section button {
  min-height: 44px !important;
  padding: 9px 14px !important;
}
/* ⚠ «НЕ ДЕЛАЛ» — ИСКЛЮЧЕНИЕ ИЗ ПРАВИЛА ВЫШЕ (VVELL-720, 07.09.2026).
   Общее правило даёт всем кнопкам этого раздела поля 14 px по бокам. Замер на
   живом экране: строка привычки 316 px, «Отметить» 88 px, «Не делал» с такими
   полями — 82 px, и на название оставалось 100 px, то есть «Убрать яркий свет
   за час до…». Второстепенной кнопке широкие поля не нужны — высоту касания
   44 px оставляем, ширину отдаём названию.
   ⚠ СЕЛЕКТОР НАРОЧНО ДЛИННЕЕ ОБЩЕГО. Первый заход был короче
   (`#screen-progress .vv-ld-hskip`) и не сработал: у общего правила есть ещё и
   тип элемента, то есть вес выше, а `!important` стоит у обоих. Проверено
   замером на живом экране — кнопка осталась 82 px. */
#screen-progress .vv-ld-section button.vv-ld-hskip,
#screen-stats .vv-ld-section button.vv-ld-hskip,
#vv-body-sheet .vv-ld-section button.vv-ld-hskip,
#vv-pantry-sheet .vv-ld-section button.vv-ld-hskip {
  padding: 9px 6px !important;
}
/* Быстрые кнопки воды идут плотной сеткой — им нужен и размер, и зазор */
#screen-progress .wkb-quick-input + div { gap: 8px !important; }
#screen-progress .wkb-quick-input + div .btn { min-height: 44px !important; }

/* ─────────────────────────────────────────────────────────────────────────
   ДНЕВНИК ПО ЭТАЛОНУ «ГОТОВИМ» (VVELL-63, 06.08.2026)
   Было: .wkb-pane — рамка вокруг всей секции «Питание», а внутри неё ещё рамки
   у каждого приёма (карточка в карточке). У «Образа жизни» внешней рамки нет
   вовсе, поэтому две половины одного экрана выглядели по-разному.
   Эталон кладёт карточки прямо на фон — так и делаем.
   ───────────────────────────────────────────────────────────────────────── */
#screen-progress .wkb-pane,
.vv-theme-night #screen-progress .wkb-pane {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#screen-progress .wkb-food-day-totals,
#screen-progress .wkb-food-meal-block,
#screen-progress .vv-ld-summary,
#screen-progress .vv-ld-section {
  padding: 14px 16px !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: 12px !important;
}
#screen-progress .wkb-food-day-totals {
  border: 1px solid var(--line-soft) !important;   /* было rgba(45,190,100,.18) */
}
/* Заголовки — дисплейный шрифт и balance, как на сделанных экранах */
#screen-progress .wkb-pane-title,
#screen-progress .vv-ld-h1 {
  font-family: var(--font-display, var(--font-body)) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}
/* Белый текст на зелёной заливке — через токен поверхности, иначе в ночной теме
   он остаётся белым на светлом. Было `color: white !important` в трёх местах. */
#screen-progress .wkb-food-meal-all.is-done,
#screen-progress .vv-meal-item.is-eaten .vv-meal-btn-eat,
#screen-progress .vv-ld-hbtn.is-done {
  color: var(--paper) !important;
}

/* Полоса прогресса дня: было rgba(255,255,255,.10) — белый с прозрачностью 10%.
   На тёмной теме это видно, на светлой — практически невидимо, полоса выглядела
   пустой. Дорожка должна строиться от линии, а не от белого. */
#screen-progress .wkb-food-progress-bar { background: var(--line-soft) !important; }
#screen-progress .vv-ld-habit.is-done { border-color: var(--vv-green) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   ПРОГРЕСС: ЛЕНТА ВКЛАДОК И КНОПКИ (VVELL-63, 06.08.2026)
   Считали: на 375px под подпись остаётся ~48px, а «Биомаркеры» при 11px/700
   занимают ~63px — текст вылезал за кнопку и наезжал на соседнюю. Высота
   вкладки была ~36px против нормы 44.
   Иконка НАД подписью чинит обе беды сразу: ширина уходит под текст, высота растёт.
   ───────────────────────────────────────────────────────────────────────── */
#screen-stats .wkb-tab {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 3px !important; min-height: 52px !important;
  padding: 7px 4px !important;
}
#screen-stats .wkb-tab-label {
  white-space: normal !important; line-height: 1.15 !important;
  font-size: 11px !important; text-align: center !important;
}
/* Кнопка «Начать трекать»: было 5px 14px при 12px шрифта — высота ~25px */
#screen-stats .wkb-found-card .btn,
#screen-stats .wkb-btn-sm {
  min-height: 44px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
}
/* Флаги биомаркера — токенами. Было #FFE0E0 / #B71C1C: в ночной теме светло-розовая
   плашка на тёмной карточке. */
.vv-bm-flag {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.vv-bm-flag.is-ok  { background: var(--vv-green-tint); color: var(--vv-green-dark); }
.vv-bm-flag.is-off { background: var(--bg-warm); color: var(--vv-berry); }

/* ─────────────────────────────────────────────────────────────────────────
   НАСТРОЙКИ (VVELL-63, 06.08.2026)
   ───────────────────────────────────────────────────────────────────────── */
/* Иконочная кнопка вместо «×» размером со шрифт: было ~18px, норма 44. */
#screen-settings .s-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  border: none; background: transparent; color: var(--ink-3); cursor: pointer;
}
#screen-settings .s-icon-btn svg { width: 17px; height: 17px; }
#screen-settings .s-icon-btn:active { color: var(--vv-berry); }
/* Предупреждение WHOOP — было #D9772E, не переключалось вместе с темой */
.s-warn { color: var(--vv-berry); font-weight: 600; }
/* Кнопки в строках настроек — под палец */
#screen-settings .settings-row button,
#screen-settings .settings-section > button { min-height: 44px; }
/* VVELL-1178 (30.09.2026): «Дата рождения» в «Настройки → Профиль» вылезала за карточку на iPhone (тестировщик, снимок
   28.09 22:36). У input[type=date|time] в WKWebView ширина — по содержимому («3 сент. 1998 г.»), и width: 100% без
   min-width: 0 и appearance: none не срабатывает. То же правило, что у полей в окнах (.vv-modal-card, выше по файлу);
   значение — по левому краю, как у соседних полей «Имя» и «Вес». VVELL-1127 (28.09) чинил это только в анкете. */
#screen-settings input[type=date], #screen-settings input[type=time] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
#screen-settings input[type=date]::-webkit-date-and-time-value,
#screen-settings input[type=time]::-webkit-date-and-time-value { text-align: left; }
/* Любое поле даты или времени в приложении — не шире своего места (запасной предел, вид не меняет). */
input[type=date], input[type=time] { min-width: 0; max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────
   ЧАТ (VVELL-63, 06.08.2026)
   ───────────────────────────────────────────────────────────────────────── */
/* Пузырь пользователя ночью: белый текст на осветлённом зелёном давал 2.30:1 —
   собственные реплики были нечитаемы. В палитре есть токен ровно под этот случай:
   заливка под белым текстом, 4.61 днём / 4.32 ночью. */
#screen-chat .msg.user { background: var(--vv-green-fill, var(--vv-green)) !important; }

/* Источники и дисклеймер: цвета висели хардкодом в app.css (#777 и #a05a00) и
   на ночной поверхности давали 3.44:1 и 2.91:1. Дисклеймер — это текст про то,
   что приложение не заменяет врача; он обязан читаться. */
#screen-chat .vv-ai-sources { color: var(--ink-2) !important; }
#screen-chat .vv-ai-disclaimer { color: var(--ink-2) !important; }

/* Касаемые цели ответа: было .vv-ai-pick 34px, .vv-ai-btn ~36px, отправка 40px */
#screen-chat .chat-input .send { width: 44px !important; height: 44px !important; }
#screen-chat .vv-ai-btn { min-height: 44px !important; padding: 11px 14px !important; }
/* ⚠ САМА КНОПКА 44×44, А НЕ ПСЕВДОЭЛЕМЕНТ (дефект 14, 14.08.2026). Здесь стояло
   34×34 плюс `::after { inset: -5px }`, и живой замер зоны давал 42×42 — ниже
   нормы. Псевдоэлемент годится там, где рядом ничего нет (крестик листа так и
   добран), но этих кнопок ПЯТЬ В СТОЛБИК: растягивать невидимую зону между
   соседними строками значит менять промах на промах. Поэтому растёт сама
   кнопка, а зона совпадает с тем, что человек видит. */
#screen-chat .vv-ai-pick {
  position: relative;
  min-width: 44px !important; height: 44px !important;
  padding: 0 14px !important;
}
#screen-chat .vv-ai-pick::after { content: none; }

/* Фото товара в ответе: работало правило из app.css с фоном #f5f5f5 — в тёмной
   теме светлое пятно под прозрачным PNG */
#screen-chat .vv-ai-cart-item .vv-meal-img {
  width: 44px !important; height: 44px !important; min-width: 44px !important;
  border-radius: 50% !important; object-fit: cover !important;
  background: var(--bg-warm) !important; border: 1px solid var(--line-soft) !important;
  flex-shrink: 0 !important;
}

/* «Не нашёл в каталоге» — был единственный хардкоженный оранжевый на экране */
.vv-ai-missing { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--vv-clay, var(--ink-2)); }

/* Анимация появления сообщений висела на каждом .msg без гасилки */
@media (prefers-reduced-motion: reduce) {
  #screen-chat .msg { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   ЦВЕТ ПО УМОЛЧАНИЮ У КНОПОК (06.08.2026) — РЕГРЕССИЯ, КОТОРУЮ Я ВНЁС
   Эмодзи цвет не наследуют, а SVG из _ic() рисуется stroke="currentColor".
   У .wkb-tab и у .btn без модификатора цвет НЕ ЗАДАН — и Safari на iOS
   подставляет системный синий. На макете это видно сразу: иконки вкладок
   «Итог дня», «Цели», «Биомаркеры» и кнопка сканера стали синими.
   Задаём цвет явно; иконка наследует его через currentColor.
   ───────────────────────────────────────────────────────────────────────── */
#screen-stats .wkb-tab,
#screen-progress .wkb-tab { color: var(--ink-3) !important; }
#screen-stats .wkb-tab.is-on,
#screen-progress .wkb-tab.is-on { color: var(--vv-green-dark) !important; }
#screen-stats .wkb-tab-icon,
#screen-progress .wkb-tab-icon,
#screen-stats .wkb-pane-icon,
#screen-progress .wkb-pane-icon { color: inherit !important; }

/* .btn без btn-green / btn-berry / btn-ghost — тоже наследовал системный синий */
.btn:not(.btn-green):not(.btn-berry):not(.btn-ghost):not(.btn-outline):not(.vv-confirm-danger) {
  color: var(--vv-green-dark);
}
.btn:not(.btn-green):not(.btn-berry):not(.btn-ghost):not(.btn-outline) svg { color: inherit; }

/* ═════════════════════════════════════════════════════════════════════════
   ДНЕВНИК ПИТАНИЯ — ПЕРЕСОБРАН (VVELL-63, 06.08.2026)
   Экран открывается вопросом, а не отчётом. Самый крупный элемент — «Съел всё».
   ═════════════════════════════════════════════════════════════════════════ */
#screen-progress .vv-dg-status {
  font-family: var(--font-display, var(--font-body));
  font-size: 15px; font-weight: 800; color: var(--ink);
  text-wrap: balance; margin: 4px 0 12px;
}
#screen-progress .vv-dg-stale {
  margin-bottom: 12px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--bg-warm); color: var(--ink-2); font-size: 12px; line-height: 1.35;
}
/* Плашка догона: зашёл вечером, не отмечено ничего — закрываем 2 приёма одним тапом */
#screen-progress .vv-dg-catchup {
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--vv-green-tint); border-radius: var(--r-lg);
}
#screen-progress .vv-dg-catchup-text { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
#screen-progress .vv-dg-catchup-btns { display: flex; gap: 8px; }
#screen-progress .vv-dg-catchup-btns .btn { flex: 1; min-height: 44px; font-size: 13px; }

/* ЯДРО: карточка вопроса */
#screen-progress .vv-dg-ask {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 12px;
}
#screen-progress .vv-dg-ask-head { display: flex; align-items: center; gap: 8px; }
#screen-progress .vv-dg-ask-icon { display: inline-flex; color: var(--ink-3); }
#screen-progress .vv-dg-ask-icon svg { width: 18px; height: 18px; }
#screen-progress .vv-dg-ask-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 17px; font-weight: 800; color: var(--ink);
}
#screen-progress .vv-dg-ask-sub { margin: 2px 0 12px 26px; font-size: 12px; color: var(--ink-3); }
#screen-progress .vv-dg-items { display: flex; flex-direction: column; gap: 2px; }
#screen-progress .vv-dg-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
#screen-progress .vv-dg-item:last-child { border-bottom: none; }
#screen-progress .vv-dg-item img { width: 40px; height: 40px; border-radius: var(--r-xs); object-fit: cover; flex: none; }
#screen-progress .vv-dg-item-body { flex: 1; min-width: 0; }
#screen-progress .vv-dg-item-name { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#screen-progress .vv-dg-item.is-done .vv-dg-item-name { color: var(--ink-3); }
/* Кнопка отметки: 44×44, и это не украшение — промах писал чужую еду в дневник */
#screen-progress .vv-dg-check {
  flex: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--line);
}
#screen-progress .vv-dg-check svg { width: 18px; height: 18px; }
#screen-progress .vv-dg-item.is-done .vv-dg-check {
  background: var(--vv-green); border-color: var(--vv-green); color: var(--paper);
}
#screen-progress .vv-dg-ask-actions { display: flex; gap: 8px; margin-top: 14px; }
#screen-progress .vv-dg-all { flex: 2; }
#screen-progress .vv-dg-ask-actions .btn { min-height: 48px; font-size: 14px; }
#screen-progress .vv-dg-ask-actions .btn-ghost { flex: 1; }

/* Остальные приёмы — свёрнутыми строками, день виден целиком */
#screen-progress .vv-dg-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#screen-progress .vv-dg-row {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md);
}
#screen-progress .vv-dg-row-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
#screen-progress .vv-dg-row.is-done .vv-dg-row-name { color: var(--ink-3); }
#screen-progress .vv-dg-row-meta { font-size: 12px; color: var(--ink-3); }
#screen-progress .vv-dg-row-done { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--vv-green-dark); }
#screen-progress .vv-dg-row-done svg { width: 14px; height: 14px; }
#screen-progress .vv-dg-row-skip { font-size: 12px; color: var(--ink-3); }
/* 44, а не 40: норма касания Apple HIG. Это кнопка «Съел всё» в строке приёма —
   ровно то действие, ради которого экран и пересобирали. */
#screen-progress .vv-dg-row-btn { min-height: 44px; padding: 9px 14px; font-size: 13px; }

#screen-progress .vv-dg-done-note {
  padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r-md);
  background: var(--vv-green-tint); font-size: 13px; line-height: 1.4; color: var(--ink-2);
}
/* Дверь для внешней еды — ниже главного действия, а не над ним */
#screen-progress .vv-dg-more {
  width: 100%; min-height: 48px; padding: 13px 16px; cursor: pointer;
  background: transparent; border: 1px dashed var(--line); border-radius: var(--r-md);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3);
}
/* Пустое состояние: объясняет механику и даёт действие */
#screen-progress .vv-dg-empty {
  padding: 22px 18px; text-align: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
#screen-progress .vv-dg-empty-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px;
}
#screen-progress .vv-dg-empty-text { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-bottom: 16px; }
/* Скелет повторяет форму ответа, а не пишет «Загружаем…» */
#screen-progress .vv-dg-skel-line,
#screen-progress .vv-dg-skel-card {
  background: var(--line-soft); border-radius: var(--r-sm); animation: vvDgPulse 1.2s ease-in-out infinite;
}
#screen-progress .vv-dg-skel-line { height: 14px; margin-bottom: 14px; }
#screen-progress .vv-dg-skel-card { height: 220px; border-radius: var(--r-lg); }
@keyframes vvDgPulse { 0%,100% { opacity: .55; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  #screen-progress .vv-dg-skel-line,
  #screen-progress .vv-dg-skel-card { animation: none; }
}

/* Правка подтверждённого приёма (06.08.2026). Строка «съеден» была статичной —
   отметил «Съел всё», а один товар не съел, и поправить нечем. Теперь раскрывается. */
#screen-progress .vv-dg-row { flex-direction: column; align-items: stretch; gap: 0; }
#screen-progress .vv-dg-row-head { display: flex; align-items: center; gap: 10px; min-height: 44px; }
#screen-progress .vv-dg-row.is-open { padding-bottom: 6px; }
#screen-progress .vv-dg-row-edit {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 10px;
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--vv-green-dark);
}
#screen-progress .vv-dg-row-edit svg { width: 14px; height: 14px; }
#screen-progress .vv-dg-row.is-open .vv-dg-items { margin-top: 4px; }
/* ⚠ ЗАЧЕМ ПРЯЧЕМ СОСТАВ ЗДЕСЬ, А НЕ В JS (05.09.2026, VVELL-526).
   Раскрытие приёма раньше рисовалось перерисовкой всего дневника — три запроса
   и скелет вместо экрана: «жму раскрыть, а сначала обновляется страница».
   Теперь состав приёма лежит в разметке всегда, а видимостью правит только класс
   `is-open` на строке. Селектор специфичнее, чем `#screen-progress .vv-dg-items`
   выше (там display:flex), и стоит НИЖЕ него — иначе состав не спрятался бы.
   `>` обязателен: у карточки-вопроса `.vv-dg-ask` свой `.vv-dg-items`, он всегда
   открыт и под это правило попадать не должен. */
#screen-progress .vv-dg-row:not(.is-open) > .vv-dg-items { display: none; }

/* Три состояния позиции и смысл тапа (06.08.2026).
   «Куплено» — не пустой чекбокс: человек должен видеть, что корзину мы уже знаем,
   и что от него нужно только подтверждение. Это и есть наш козырь в интерфейсе. */
#screen-progress .vv-dg-item-state {
  display: flex; align-items: center;
  margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-transform: lowercase;
}
/* Значок уровня живёт здесь же. Он уже цветной сам по себе, поэтому строку
   состояния не перекрашиваем — иначе рядом окажутся два разных «зелёных». */
#screen-progress .vv-dg-item-state .vv-grade { text-transform: none; letter-spacing: 0; }
#screen-progress .vv-dg-item.is-bought .vv-dg-item-state { color: var(--ink-3); }
#screen-progress .vv-dg-item.is-done   .vv-dg-item-state { color: var(--vv-green-dark); }
/* Смысл тапа стоит ДО тапа. Это замена стрикам, которые нам включать рано. */
#screen-progress .vv-dg-why {
  margin-top: 12px; font-size: 12px; line-height: 1.35; color: var(--ink-3); text-align: center;
}
/* Строка состояния — вход в третий ярус */
#screen-progress .vv-dg-status {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; padding: 8px 0; border: none; background: transparent;
  text-align: left; cursor: pointer;
}
#screen-progress .vv-dg-status-more {
  flex: none; font-size: 12px; font-weight: 700; color: var(--vv-green-dark);
  font-family: var(--font-body);
}
/* Лист «Весь день»: состав долями, оценка последней и честно подписанной */
.vv-ds-h { margin: 16px 0 8px; font-size: 12px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.vv-ds-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.vv-ds-row:last-of-type { border-bottom: none; }
.vv-ds-cat { color: var(--ink); }
.vv-ds-val { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vv-ds-kbju { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.vv-ds-note { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.vv-ds-none { padding: 10px 0; font-size: 13px; color: var(--ink-3); }
.vv-ds-why { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 12px; line-height: 1.45; color: var(--ink-3); }

/* ── Правило «из Здоровья» и утренняя карточка сна (06.08.2026) ──────────────
   Если сон и шаги приезжают из Apple Health или WHOOP, ручной ввод не показываем:
   человек введёт поверх автоматики и получит двойной учёт. */
#screen-progress .vv-ld-line-l { display: inline-flex; align-items: center; gap: 7px; }
#screen-progress .vv-ld-line-l svg { width: 15px; height: 15px; color: var(--ink-3); }
#screen-progress .vv-ld-src {
  display: block; font-style: normal; font-size: 10px; font-weight: 700;
  color: var(--ink-3); text-align: right; margin-top: 1px;
}
.vv-from-health { text-align: center; }
.vv-from-health-val { font-size: 28px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.vv-from-health-src { margin-top: 6px; font-size: 12px; color: var(--ink-3); }

/* «Как спалось?» — единственное действие без корзины, плана и коннектора */
#screen-progress .vv-ld-sleep {
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
#screen-progress .vv-ld-sleep-q {
  font-family: var(--font-display, var(--font-body));
  font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 10px;
}
#screen-progress .vv-ld-sleep-pills { display: flex; gap: 6px; }
#screen-progress .vv-ld-sleep-pill {
  flex: 1; min-height: 56px; padding: 8px 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  font: inherit; color: var(--ink);
}
#screen-progress .vv-ld-sleep-pill b { font-size: 14px; font-weight: 800; }
#screen-progress .vv-ld-sleep-pill span { font-size: 11px; color: var(--ink-3); }
#screen-progress .vv-ld-sleep-pill:active { background: var(--vv-green-tint); border-color: var(--vv-green); }

/* Питание — продукт, образ жизни — вторичен. Равный вес двух вкладок размывал
   главное действие, но удалять вторую нельзя: там живут вода, сон и привычки. */
.vv-dsec.is-primary { flex: 1.4; }
.vv-dsec:not(.is-primary) .vv-dsec-label { font-size: 13px; }

/* ── «Образ жизни»: аккуратность и честность (06.08.2026) ───────────────────
   Было: эмодзи в заголовках, числа напечатаны дважды (в сводке и в карточках),
   и подпись «из WHOOP» соседствовала с кнопками ручного ввода — противоречие,
   которое ещё и портит данные двойным учётом. */
#screen-progress .vv-ld-stitle {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display, var(--font-body));
  font-size: 15px; font-weight: 800; color: var(--ink);
}
#screen-progress .vv-ld-stitle svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
#screen-progress .vv-ld-overall {
  font-family: var(--font-display, var(--font-body));
  font-size: 16px; font-weight: 800; color: var(--ink);
}
#screen-progress .vv-ld-overall-sub { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--ink-3); }
/* Данные приходят сами — говорим это словами вместо кнопок ввода */
#screen-progress .vv-ld-auto {
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-warm); color: var(--ink-3);
  font-size: 12px; line-height: 1.35;
}
/* Кнопки быстрого ввода — под палец и с воздухом */
#screen-progress .vv-ld-qbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#screen-progress .vv-ld-qbtn { min-height: 44px; padding: 11px 14px; font-size: 13px; }

/* ═════════════════════════════════════════════════════════════════════════
   СОСТАВ ПОКУПКИ — быстрая метрика на «Прогрессе» (VVELL-63, 06.08.2026)
   «Возраст здоровья» доступен троим из двенадцати и почти не двигается.
   Состав покупки меняется каждым заказом: 87% → 82% → 77% → 44% за три недели.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-stats .vv-pc {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 12px;
}
#screen-stats .vv-pc-head { display: flex; align-items: center; gap: 8px; }
#screen-stats .vv-pc-ic { display: inline-flex; color: var(--ink-3); }
#screen-stats .vv-pc-ic svg { width: 17px; height: 17px; }
#screen-stats .vv-pc-title {
  flex: 1; font-family: var(--font-display, var(--font-body));
  font-size: 15px; font-weight: 800; color: var(--ink);
}
#screen-stats .vv-pc-date { font-size: 12px; color: var(--ink-3); }
#screen-stats .vv-pc-num {
  margin-top: 8px; font-family: var(--font-display, var(--font-body));
  font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1;
  font-variant-numeric: tabular-nums;
}
#screen-stats .vv-pc-sub { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
/* Полный диапазон, включая нижние уровни: показывать только хорошее — вдвое слабее */
#screen-stats .vv-pc-bar { display: flex; gap: 2px; height: 8px; margin: 12px 0 8px; }
#screen-stats .vv-pc-seg { border-radius: 3px; }
/* Четыре ступени вместо шести (10.08.2026). Ключ теперь НОМЕР уровня: сервер
   отдаёт distribution по уровням 1..4, а не по буквам A..F. */
#screen-stats .vv-pc-4 { background: var(--vv-green); }
#screen-stats .vv-pc-3 { background: var(--vv-green-dark); opacity: .75; }
#screen-stats .vv-pc-2 { background: var(--vv-clay); opacity: .7; }
#screen-stats .vv-pc-1 { background: var(--vv-clay); }
#screen-stats .vv-pc-delta { font-size: 12px; color: var(--ink-2); }
#screen-stats .vv-pc-note { margin-top: 6px; font-size: 11px; color: var(--ink-3); }
#screen-stats .vv-pc-empty { text-align: center; }
#screen-stats .vv-pc-empty .btn { margin-top: 12px; min-height: 44px; }

/* ── Лайфхаки: уровень доказательности и метки (06.08.2026) ─────────────────
   Уровень СЧИТАЛСЯ и выбрасывался — переменная вычислялась, в разметку не попадала.
   Для совета о здоровье это главное, что отличает «изучено» от «можно попробовать».
   Цвета были хардкодом (#E8F5E9, #FFF3E0, #E3F2FD) и светились на тёмной теме. */
#screen-lifehacks .lh-pe-item { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
#screen-lifehacks .lh-pe-item:last-child { border-bottom: none; }
#screen-lifehacks .lh-pe-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 5px; }
.lh-ev, .lh-caveat, .lh-syn {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.lh-ev-strong { background: var(--vv-green-tint); color: var(--vv-green-dark); }
.lh-ev-early  { background: var(--bg-warm); color: var(--ink-2); }
.lh-ev-try    { background: var(--line-soft); color: var(--ink-3); }
.lh-ev-none   { background: var(--line-soft); color: var(--ink-3); }
.lh-caveat    { background: var(--bg-warm); color: var(--vv-berry); }
.lh-syn       { background: var(--vv-green-tint); color: var(--vv-green-dark); }

/* Чат: чипы-сценарии не исчезают навсегда, а сжимаются в строку */
#screen-chat #vv-chat-scenarios.is-compact {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
  padding: 8px 0; margin: 0; -webkit-overflow-scrolling: touch;
}
#screen-chat #vv-chat-scenarios.is-compact::-webkit-scrollbar { display: none; }
#screen-chat #vv-chat-scenarios.is-compact .qr-chip { flex: none; min-height: 44px; font-size: 12px; }

/* Цели — не настройка, а причина, по которой корзина такая (06.08.2026).
   Лежали на одном уровне с темой оформления. Подняты первыми и подписаны. */
#screen-settings .settings-goals-primary { border-color: var(--vv-green); }
#screen-settings .s-goals-why {
  margin: -2px 0 12px; font-size: 12px; line-height: 1.4; color: var(--ink-2);
}

/* Чипы-сценарии чата: иконка + подпись, касание под палец */
#screen-chat .qr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 14px;
}
#screen-chat .qr-chip-ic { display: inline-flex; color: var(--ink-3); }
#screen-chat .qr-chip-ic svg { width: 15px; height: 15px; }

/* Касаемые цели, найденные обходом экранов (06.08.2026, scripts/shoot_screens.py).
   Замер в реальном браузере: чипы фильтров и кнопки настроек были ниже 40px. */
#screen-lifehacks .lh-chip,
#screen-lifehacks .lh-tab,
#screen-lifehacks .lh-group-more { min-height: 44px; }
#screen-settings .settings-section button,
#screen-settings #s-whoop-btn { min-height: 44px; }
#screen-cart .vv-horizon-btn,
#screen-cart .vv-meal-title { min-height: 44px; }
#screen-dashboard .wh-customize { min-width: 44px; min-height: 44px; }
#screen-progress .vv-dg-status { min-height: 44px; }

/* Корзина: горизонт и заголовки приёмов были ниже нормы касания (замер браузером) */
#screen-cart .horizon-btn { min-height: 44px; padding: 11px 14px; }
#screen-cart .vv-meal-head { min-height: 44px; }

/* Заголовок приёма в корзине — это кнопка сворачивания, ей нужен размер под палец.
   Кнопки замены и удаления рядом: без зазора промах удаляет вместо замены. */
#screen-cart .vv-meal-title { display: inline-flex; align-items: center; min-height: 44px; }
/* ⚠ ДЕЙСТВИЯ — СТОЛБИКОМ, А НЕ В РЯД (28.08.2026, VVELL-481).

   Замер строки корзины в браузере (390 px, 28.08.2026):
       вся строка 316 · фото 88 · ТЕКСТ 110 · действия 94
   На 110 px не помещается почти ничего. Из 40 подписей количества обрезаны
   были ВСЕ: «упак 350 г · ~4 порц.» показывалось как «упак…», имена — как
   «Мацони с зеленью 2%, 17…», «почему» — как «Питьевое кисломолочное к…».
   Владелец 28.08 про соседнюю панель теми же словами: «текст слитый»,
   «неаккуратные очень».

   ⚠ РАЗМЕР КНОПОК НЕ ТРОГАЕМ. Первым делом я сжал их до 34 px и хотел
   добрать палец невидимой областью — но при зазоре 8 px области соседних
   кнопок наложились бы друг на друга, а промах здесь УДАЛЯЕТ вместо замены.
   Столбик даёт то же место даром: две кнопки 44 px друг над другом занимают
   по ширине 44 вместо 96, зазор между ними остаётся честные 8 px, и высоты
   96 px строке хватает — текстовый блок (имя, количество, цена, «почему») и
   так выше. Освободилось 52 px, ровно они и уходят под текст. */
#screen-cart .vv-meal-actions {
  flex-direction: column;
  gap: 8px;
  /* ⚠ VVELL-327 (05.09.2026): было `center`. Пока высоту строки задавал сам
     этот столбик, центрирование было не видно — но фото и текст стоят от
     верха, а на строке с заменой («Вернуть прежний») тело выше столбика, и
     значки уезжали вниз от своей строки. Теперь все три колонки строки
     начинаются на одной линии. */
  align-self: flex-start;
}
#screen-cart .vv-meal-btn-swap,
#screen-cart .vv-meal-btn-del { min-width: 44px; min-height: 44px; }

/* ⚠ 44, А НЕ 40. 06.08 я поднял эти цели с 32 до 40 и посчитал вопрос закрытым —
   но норма касания 44 (Apple HIG) / 48 (Material), и 40 её не проходит. Проверка
   в скриншотере тогда стояла на пороге 40 и потому молчала: инструмент был
   настроен под мою же ошибку. 07.08 порог поднят до 44, места пересчитаны. */
#screen-cart .vv-meal-toggle-pill { min-height: 44px; padding: 9px 14px; }

/* Переключатель День/Неделя в «Итоге дня» — был 32px, потом 40px */
#screen-stats .vv-itog-toggle-btn,
#screen-progress .vv-itog-toggle-btn { min-height: 44px; padding: 9px 16px; }

/* ═════════════════════════════════════════════════════════════════════════
   ПРОГНОЗ — ВОЗРАСТ ЗДОРОВЬЯ (VVELL-105, 07.08.2026)
   Экран перенесён в SPA. Показываем ТОЛЬКО то, что считается по-настоящему:
   число, калибровку, факторы, состав тела. Пять макетных разделов с
   захардкоженными числами («Запас хода 64%», «Горные лыжи до 2049») не
   перенесены — они ждут своей логики. Пустой раздел честнее выдуманного.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-age .vv-age-hero {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 16px; margin-bottom: 12px; text-align: center;
}
#screen-age .vv-age-num {
  font-family: var(--font-display, var(--font-body));
  font-size: 52px; font-weight: 800; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
#screen-age .vv-age-delta { margin-top: 8px; font-size: 14px; font-weight: 700; }
#screen-age .vv-age-delta.is-good { color: var(--vv-green-dark); }
#screen-age .vv-age-delta.is-warn { color: var(--vv-berry); }
#screen-age .vv-age-pass { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
/* Когда посчитан и когда обновится (VVELL-182). Цвет --ink-2, а не --ink-3:
   строка отвечает на вопрос «почему число не шевелится», её обязаны прочитать. */
#screen-age .vv-age-recalc {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
#screen-age .vv-age-stale {
  /* Цвет тот же, что у «старит» в дельте выше: он уже проверен в обеих темах.
     Ягодный из палитры дня (--vv-berry-dark) ночью не годится — палитра его осветляет. */
  margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--vv-berry);
}

/* Калибровка: показываем прогресс и что осталось, а не прочерк */
#screen-age .vv-age-calib { text-align: left; }
#screen-age .vv-age-calib-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 17px; font-weight: 800; color: var(--ink);
}
#screen-age .vv-age-calib-sub { margin: 6px 0 12px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
#screen-age .vv-age-calib-num {
  font-family: var(--font-display, var(--font-body));
  font-size: 30px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
}
#screen-age .vv-age-calib-num span { font-size: 16px; color: var(--ink-3); font-weight: 700; }
#screen-age .vv-age-calib-left { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
#screen-age .vv-age-sigs { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
#screen-age .vv-age-sig {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--ink-3); padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}
#screen-age .vv-age-sig:last-child { border-bottom: none; }
#screen-age .vv-age-sig.is-on { color: var(--vv-green-dark); font-weight: 600; }

#screen-age .vv-age-bar, #screen-stats .vv-age-bar {
  height: 8px; margin: 8px 0; border-radius: 4px; background: var(--line-soft); overflow: hidden;
}
#screen-age .vv-age-bar-fill, #screen-stats .vv-age-bar-fill { height: 100%; border-radius: 4px; background: var(--vv-green); }
#screen-age .vv-age-bar-fill.is-warn, #screen-stats .vv-age-bar-fill.is-warn { background: var(--vv-berry); }
#screen-age .vv-age-bar-fill.is-none, #screen-stats .vv-age-bar-fill.is-none { background: var(--line); }
/* ⚠ СРЕДНЕМУ НУЖЕН СВОЙ ЦВЕТ. Без этого правила «Запас хода 41% — средний запас»
   рисовался полной зелёной полосой и читался как «всё отлично»: класс is-mid
   цвет не задавал, и бралась зелёная база. Цвет — часть смысла, а не украшение. */
#screen-age .vv-age-bar-fill.is-mid, #screen-stats .vv-age-bar-fill.is-mid { background: var(--vv-clay); }
#screen-age .vv-rd-word.is-mid, #screen-stats .vv-rd-word.is-mid { color: var(--ink-2); }

#screen-age .vv-age-block, #screen-stats .vv-age-block {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 12px;
}
#screen-age .vv-age-block-h, #screen-stats .vv-age-block-h {
  font-family: var(--font-display, var(--font-body));
  font-size: 15px; font-weight: 800; color: var(--ink); text-wrap: balance;
}
#screen-age .vv-age-block-sub, #screen-stats .vv-age-block-sub { margin: 4px 0 12px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }

#screen-age .vv-age-fx { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
#screen-age .vv-age-fx:last-child { border-bottom: none; }
/* Фактор с историей — кнопка (VVELL-103). Сбрасываем всё, что браузер даёт
   кнопке по умолчанию: это по-прежнему строка списка, а не элемент управления.
   Кнопкой она стала ради клавиатуры и скринридера, а не ради вида. */
#screen-age button.vv-age-fx {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: none; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#screen-age button.vv-age-fx:last-child { border-bottom: none; }
#screen-age button.vv-age-fx:active { opacity: .6; }
#screen-age .vv-age-fx-more {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--vv-green-dark);
}
/* Иконка chevron нарисована ВНИЗ (m6 9 6 6 6-6). Для «вперёд» её надо повернуть
   на 270°, а не на 90: при 90 она смотрит влево. Эта же ловушка описана в
   docs/FRONTEND.md — она уже стоила времени один раз. */
#screen-age .vv-age-fx-more svg { width: 13px; height: 13px; transform: rotate(270deg); }
#screen-age .vv-age-fx-top { display: flex; align-items: center; gap: 8px; }
#screen-age .vv-age-fx-ic { display: inline-flex; color: var(--ink-3); flex: none; }
#screen-age .vv-age-fx-ic svg { width: 16px; height: 16px; }
/* min-width:0 обязателен: без него flex-элемент не даёт себя сжать уже
   min-content, и вместо переноса имени рвалось соседнее ЗНАЧЕНИЕ. */
#screen-age .vv-age-fx-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
/* ⚠ ЗНАЧЕНИЕ НЕ РВЁМ НИКОГДА. Замер на 390 px: единственная строка карточки,
   которая ломалась на две, — VO₂max, и рвалась она ПОСЕРЕДИНЕ ЕДИНИЦЫ ИЗМЕРЕНИЯ:
   «35,2 мл/кг/» + «мин». Число с единицей — один предмет; переносить можно имя
   фактора (оно из слов), но не «мл/кг/мин». */
#screen-age .vv-age-fx-val { flex: 0 0 auto; white-space: nowrap; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#screen-age .vv-age-fx-contrib { font-size: 12px; font-weight: 700; white-space: nowrap; }
#screen-age .vv-age-fx-contrib.is-good { color: var(--vv-green-dark); }
#screen-age .vv-age-fx-contrib.is-warn { color: var(--vv-berry); }
#screen-age .vv-age-fx-contrib.is-none { color: var(--ink-3); }
#screen-age .vv-age-fx-why { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }

#screen-age .vv-age-empty { padding: 22px 18px; text-align: center; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); }
#screen-age .vv-age-empty-title { font-family: var(--font-display, var(--font-body));
  font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
#screen-age .vv-age-empty-text { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-bottom: 16px; }
#screen-age .vv-age-empty .btn, #screen-age .vv-age-block .btn { min-height: 44px; }
#screen-age .vv-age-disclaimer {
  padding: 12px 4px; font-size: 11px; line-height: 1.45; color: var(--ink-3); text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   ЗАГОЛОВОК ГРУППЫ на «Возрасте» (16.08.2026)

   Жалоба владельца дословно: «у нас всё друг под другом идёт, надо сделать
   структурно». Карточки на экране были ОДНОГО веса — восемь одинаковых плашек
   подряд, и по виду нельзя было понять, где ответ, где его разбор, а где
   соседние метрики. Заголовок группы и воздух над ним — единственное, что здесь
   добавлено: это не украшение, а разделитель уровней.

   Линия справа от подписи держит группу вместе на узком экране, где сама
   подпись занимает треть ширины и висела бы в пустоте.
   Цвета — только токены: экран живёт и в ночной теме.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠ ОБА ЭКРАНА В СЕЛЕКТОРЕ. Правило было привязано к #screen-age, а id перебивает
   любые классы: заголовки групп, добавленные на «Прогресс», приехали бы туда голым
   текстом без подписи-линии и без отступов. Ровно эта ловушка уже ловила здесь
   .vv-rd-*, .vv-age-block и .vv-hz-fill — дублируем СЕЛЕКТОР, а не свойства. */
#screen-age .vv-age-group,
#screen-stats .vv-age-group {
  display: flex; align-items: center; gap: 10px;
  /* 26px сверху против 12px между карточками внутри группы — расстояние и есть
     то, чем человек читает границу группы, ещё до того как прочтёт подпись. */
  /* ⚠ ГОРИЗОНТАЛЬНЫЕ 2px СНЯТЫ. Замер левых краёв всех блоков верхнего уровня на
     390 px: всё содержимое экрана стоит на x=20 / right=370, и ровно два заголовка
     групп — на x=22 / right=368. Заголовок группы обязан стоять по той же линейке,
     что и карточки, которые он подписывает: иначе он читается как чужой элемент. */
  margin: 26px 0 10px;
}
#screen-age .vv-age-group:first-child,
#screen-stats .vv-age-group:first-child { margin-top: 6px; }
#screen-age .vv-age-group span,
#screen-stats .vv-age-group span {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
#screen-age .vv-age-group i,
#screen-stats .vv-age-group i { flex: 1 1 auto; height: 1px; background: var(--line); }

/* «Запас хода» переехал на «Прогресс» и стоит НИЖЕ панели вкладок. Отбиваем его
   от неё так же, как группы на «Возрасте», — иначе он читается как продолжение
   открытой вкладки, хотя относится ко всему экрану. */
/* ⚠ ЛИНИЯ СНЯТА: над блоком теперь стоит заголовок группы «Сегодня по трекеру»,
   и его собственная черта шла бы второй подряд. Отступ оставлен — он и отбивает. */
#screen-stats .vv-rd-slot { margin-top: 4px; padding-top: 0; border-top: none; }
#screen-stats .vv-rd-slot:empty { margin: 0; padding: 0; border-top: none; }

/* ══════════════════════════════════════════════════════════════════
   ПРОГРЕСС: иконки вместо эмодзи (07.08.2026)
   Заголовки и кнопки «Итога дня» несли стикеры 📋 🍽️ 🌿 🌳 📊. На части
   устройств 🍽️ рисовался прямоугольником, и все они игнорировали тему.
   Заменены на _ic() — монолайн, stroke=currentColor.
   ⚠ COLOR ЗАДАЁМ ЯВНО. Именно на этом обожглись 06.08: у контейнера не было
   color, currentColor подхватывал системный синий iOS, и иконки синели.
   Размер тоже явный: у эмодзи он шёл от font-size, у SVG так не работает.
   ══════════════════════════════════════════════════════════════════ */
#screen-stats .vv-itog-title { display: flex; align-items: center; gap: 8px; }
#screen-stats .vv-itog-title .wh-ic { width: 20px; height: 20px; vertical-align: 0; color: var(--vv-green-dark, #2E5D00); flex: 0 0 auto; }
#screen-stats .vv-itog-section-icon { display: inline-flex; align-items: center; color: var(--ink-3); }
#screen-stats .vv-itog-section-icon .wh-ic { width: 17px; height: 17px; vertical-align: 0; }
#screen-stats .vv-itog-qbtn .wh-ic { width: 16px; height: 16px; vertical-align: 0; color: inherit; flex: 0 0 auto; }
#screen-stats .vv-itog-meal-icon { display: inline-flex; align-items: center; color: var(--ink-3); }
#screen-stats .vv-itog-meal-icon .wh-ic { width: 18px; height: 18px; vertical-align: 0; }

/* ═════════════════════════════════════════════════════════════════════════
   ЗАПАС ХОДА (VVELL-106, 07.08.2026) — раздел на экране «Прогноз».
   Числу здесь верят меньше, чем подписи под ним: см. комментарий у
   renderReadiness в bindings.js. Поэтому .vv-rd-src — не мелкая сноска
   сбоку, а полноценная строка на всю ширину.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-age .vv-rd-top, #screen-stats .vv-rd-top { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 8px; }
#screen-age .vv-rd-num, #screen-stats .vv-rd-num { font-family: var(--font-display, inherit); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
#screen-age .vv-rd-num span, #screen-stats .vv-rd-num span { font-size: 20px; font-weight: 700; margin-left: 2px; color: var(--ink-3); }
#screen-age .vv-rd-num.is-good, #screen-stats .vv-rd-num.is-good { color: var(--vv-green-dark, #2E5D00); }
#screen-age .vv-rd-num.is-warn, #screen-stats .vv-rd-num.is-warn { color: var(--vv-berry); }
#screen-age .vv-rd-word, #screen-stats .vv-rd-word { font-size: 14px; font-weight: 700; color: var(--ink-2); }

#screen-age .vv-rd-src, #screen-stats .vv-rd-src { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm, 12px); background: var(--bg-warm); font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
#screen-age .vv-rd-src .wh-ic, #screen-stats .vv-rd-src .wh-ic { width: 16px; height: 16px; vertical-align: 0; flex: 0 0 auto; color: var(--ink-3); }
#screen-age .vv-rd-src.is-native, #screen-stats .vv-rd-src.is-native { background: var(--vv-green-tint); color: var(--vv-green-dark, #2E5D00); }
#screen-age .vv-rd-src.is-native .wh-ic, #screen-stats .vv-rd-src.is-native .wh-ic { color: var(--vv-green-dark, #2E5D00); }

/* Продолжение подписи источника: что будет с ЭТИМ числом при смене трекера.
   Тон приглушённый (это пояснение, а не тревога), но --ink-2, а не --ink-3:
   строка объясняет подмену МЕТОДА, и читать её надо в обеих темах. */
#screen-age .vv-rd-method, #screen-stats .vv-rd-method { margin-top: 6px; padding: 0 12px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }

#screen-age .vv-rd-stale, #screen-stats .vv-rd-stale { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
#screen-age .vv-rd-calib, #screen-stats .vv-rd-calib { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
#screen-age .vv-rd-ill, #screen-stats .vv-rd-ill { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm, 12px); background: var(--vv-clay-tint); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
#screen-age .vv-rd-ill .wh-ic, #screen-stats .vv-rd-ill .wh-ic { width: 16px; height: 16px; vertical-align: 0; flex: 0 0 auto; color: var(--vv-berry); margin-top: 1px; }

#screen-age .vv-rd-why, #screen-stats .vv-rd-why { margin-top: 14px; }
#screen-age .vv-rd-why-h, #screen-stats .vv-rd-why-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
#screen-age .vv-rd-why-row, #screen-stats .vv-rd-why-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
#screen-age .vv-rd-why-row:last-child, #screen-stats .vv-rd-why-row:last-child { border-bottom: none; }
#screen-age .vv-rd-why-name, #screen-stats .vv-rd-why-name { color: var(--ink-2); }
#screen-age .vv-rd-why-val, #screen-stats .vv-rd-why-val { font-weight: 700; color: var(--ink-3); }
#screen-age .vv-rd-why-val.is-good, #screen-stats .vv-rd-why-val.is-good { color: var(--vv-green-dark, #2E5D00); }
#screen-age .vv-rd-why-val.is-warn, #screen-stats .vv-rd-why-val.is-warn { color: var(--vv-berry); }

/* Текст длинный и на 360px впритык упирается в края — разрешаем перенос, иначе
   строка обрежется многоточием и предложение потеряет смысл. */
#screen-age .vv-rd-connect, #screen-stats .vv-rd-connect { width: 100%; min-height: 44px; margin-top: 14px; padding: 10px 12px; font-size: 12.5px; line-height: 1.3; white-space: normal; }

/* ── Расшифровка кольца (10.08.2026) ───────────────────────────────────────
   Строка «то же число, что в кольце» стоит ПЕРЕД источником: сначала человек
   должен понять, что это не второй показатель, а разбор первого, и только
   потом — чей это расчёт. Плашка зелёная, когда числа совпали, и нейтральная,
   когда разошлись: разошлись — это не ошибка и не тревога, а факт про даты. */
#screen-age .vv-rd-same, #screen-stats .vv-rd-same {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  padding: 9px 12px; border-radius: var(--r-sm, 12px);
  background: var(--bg-warm); color: var(--ink-2);
  font-size: 12.5px; line-height: 1.35;
}
#screen-age .vv-rd-same .wh-ic, #screen-stats .vv-rd-same .wh-ic {
  width: 16px; height: 16px; vertical-align: 0; flex: 0 0 auto; margin-top: 1px;
  color: var(--vv-green-dark, #2E5D00);
}
#screen-age .vv-rd-same.is-diff, #screen-stats .vv-rd-same.is-diff { background: var(--bg-warm); color: var(--ink-2); }
#screen-age .vv-rd-same.is-diff .wh-ic, #screen-stats .vv-rd-same.is-diff .wh-ic { color: var(--ink-3); }

/* Пояснение над сигналами: почему разбивки нет (родной WHOOP) или по чему
   считаем (наш композит). Это самая важная строка блока после числа. */
#screen-age .vv-rd-why-note, #screen-stats .vv-rd-why-note {
  margin: 2px 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2);
}
#screen-age .vv-rd-note, #screen-stats .vv-rd-note {
  margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--ink-3);
}

/* Строка сигнала — КНОПКА: она открывает историю этого сигнала (тот же лист,
   что у факторов возраста). Раньше на этом месте были неподвижные строки, и
   «как менялось» посмотреть было негде. Высота 44 — правило касания. */
#screen-age .vv-rd-sig, #screen-stats .vv-rd-sig {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 0;
  /* Разделитель — СВЕРХУ, а не снизу. Строки бывают двух типов (кнопка с историей
     и плоская без неё), поэтому :last-of-type врал бы: он считает по типу тега, и
     линия пропадала бы не у последней строки, а у последней кнопки. Верхняя граница
     снимается у первой строки соседним селектором и не зависит от типов вовсе. */
  border: 0; border-top: 1px solid var(--line-soft);
  background: transparent; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#screen-age .vv-rd-why-note + .vv-rd-sig, #screen-stats .vv-rd-why-note + .vv-rd-sig { border-top: none; }
/* Строка без истории (частота дыхания: сервер её считает, а ряда для графика нет)
   не должна выглядеть нажимаемой — курсор и подсветка нажатия убраны. */
#screen-age .vv-rd-sig.is-flat, #screen-stats .vv-rd-sig.is-flat { cursor: default; }
#screen-age .vv-rd-sig.is-flat:active, #screen-stats .vv-rd-sig.is-flat:active { opacity: 1; }
/* ⚠ КУРСОРА НА ТЕЛЕФОНЕ НЕТ. Отличие «не нажимается» держалось на cursor:default и
   отсутствии шеврона — на айфоне не видно ни того, ни другого, и строка выглядела
   такой же, как соседние. Подпись занимает МЕСТО ШЕВРОНА, поэтому отличие видно
   ровно там, где человек его ищет. Цвет --ink-3 — тот же, что у подзаголовков строк. */
#screen-age .vv-rd-sig-nohist, #screen-stats .vv-rd-sig-nohist {
  flex: 0 0 auto; font-size: 11px; color: var(--ink-3); white-space: nowrap;
}
#screen-age .vv-rd-sig:active, #screen-stats .vv-rd-sig:active { opacity: .65; }
#screen-age .vv-rd-sig-name, #screen-stats .vv-rd-sig-name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
#screen-age .vv-rd-sig-sub, #screen-stats .vv-rd-sig-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
#screen-age .vv-rd-sig-sub.is-good, #screen-stats .vv-rd-sig-sub.is-good { color: var(--vv-green-dark, #2E5D00); }
#screen-age .vv-rd-sig-sub.is-warn, #screen-stats .vv-rd-sig-sub.is-warn { color: var(--vv-berry); }
/* ⚠ ПОДПИСЬ ИСТОЧНИКА В СТРОКЕ СИГНАЛА (VVELL-404, 23.08.2026). Селектор
   повторяет соседей по блоку (#screen-age / #screen-stats), иначе правило
   проиграет им по специфичности и подпись унаследует кегль имени показателя.
   Тон --ink-3 — тот же, что у пояснения выше: это сноска, а не второе число. */
#screen-age .vv-rd-sig-src, #screen-stats .vv-rd-sig-src {
  display: block; margin-top: 2px; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .01em; opacity: .85;
}
#screen-age .vv-rd-sig-val, #screen-stats .vv-rd-sig-val { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
#screen-age .vv-rd-sig-chev, #screen-stats .vv-rd-sig-chev { display: inline-flex; flex: 0 0 auto; }
/* Иконка «шеврон» в наборе смотрит ВНИЗ (её же используют раскрывашки). Поворот
   на -90 даёт стрелку вправо — знак «откроется отдельно», а не «раскроется тут». */
#screen-age .vv-rd-sig-chev .wh-ic, #screen-stats .vv-rd-sig-chev .wh-ic {
  width: 16px; height: 16px; vertical-align: 0; color: var(--ink-3);
  transform: rotate(-90deg);
}

/* ─────────────────────────────────────────────────────────────────────────
   ЧИПЫ-СЦЕНАРИИ В ЧАТЕ: иконка вместо эмодзи (07.08.2026)
   Размер и цвет иконке задаём явно: у эмодзи размер шёл от font-size, у SVG так
   не работает, а без color currentColor подхватывает системный синий на iOS.
   ───────────────────────────────────────────────────────────────────────── */
#screen-chat .qr-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 44px !important;
  text-align: left !important;
}
#screen-chat .qr-chip .wh-ic {
  width: 16px; height: 16px; vertical-align: 0; flex: 0 0 auto;
  color: var(--vv-green-dark);
}

/* ═════════════════════════════════════════════════════════════════════════
   ПРАКТИЧЕСКИЕ СОВЕТЫ в Лайфхаках (07.08.2026)
   Блок был целиком на инлайн-стилях с семью захардкоженными цветами — ночью
   светлые плашки на тёмном. Здесь только токены, поэтому обе темы работают.
   ═════════════════════════════════════════════════════════════════════════ */
.lh-pe { background: var(--card); border-radius: var(--r-md, 14px); padding: 16px; margin-top: 18px; }
.lh-pe-h { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); }
.lh-pe-sub { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 12px; }
.lh-pe-item { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.lh-pe-item:last-child { border-bottom: none; padding-bottom: 0; }
.lh-pe-title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.lh-pe-text { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-top: 4px; }
.lh-pe-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.lh-pe-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lh-pe-badge,
.lh-pe-ev,
.lh-pe-tag { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
/* Теги целей были ярко-розовыми и кричали громче заголовка — приглушены до фона. */
.lh-pe-tag { background: var(--bg-warm); color: var(--ink-3); font-weight: 600; }
.lh-pe-badge.is-syn { background: var(--vv-green-tint); color: var(--vv-green-dark); }
.lh-pe-badge.is-caveat { background: var(--vv-clay-tint); color: var(--vv-clay); }
/* Уровень доказательности: сильный — зелёный, ранние данные — глина, слабый — серый.
   ⚠ Классу is-weak («можно попробовать») правила НЕ БЫЛО (найдено 13.08.2026):
   чип выпадал из шкалы и рисовался бесцветным, тогда как соседние ступени
   покрашены. Плюс появилась ступень is-unknown («источник не записан») —
   она приезжает с сервера с 13.08.2026, когда под советом нет ни одной
   записанной работы, и обязана читаться как «нечем подтвердить», а не как
   тихая серая пилюля рядом с зелёной. */
.lh-pe-ev { background: var(--bg-warm); color: var(--ink-3); font-weight: 600; }
.lh-pe-ev.is-strong { background: var(--vv-green-tint); color: var(--vv-green-dark); }
.lh-pe-ev.is-early { background: var(--vv-clay-tint); color: var(--vv-clay); }
.lh-pe-ev.is-weak,
.lh-pe-ev.is-unknown {
  background: transparent; color: var(--ink-3);
  border: 1px dashed var(--line); font-weight: 600;
}
.lh-pe-more { margin-top: 8px; }
.lh-pe-more > summary { font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; min-height: 24px; display: flex; align-items: center; }
.lh-pe-more > div { font-size: 12px; line-height: 1.45; color: var(--ink-3); margin-top: 6px; padding: 8px 10px; background: var(--bg-warm); border-radius: var(--r-sm, 10px); }

/* ═════════════════════════════════════════════════════════════════════════
   ЦЕЛИ: факт покупки вместо фиктивной полосы (VVELL-118, 07.08.2026)
   Полосы здесь НЕТ намеренно. Прежняя «Покрытие через корзину 30/30» считалась
   из даты регистрации и была полной у всех; полоса под фактом покупки снова
   создала бы вид прогресса там, где его никто не измерял.
   Ноль подсвечиваем: «0 из 17» — самое полезное, что этот блок может сказать.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-stats .wkb-goal-fact,
#screen-progress .wkb-goal-fact {
  margin: 8px 0 6px; padding: 8px 10px;
  background: var(--bg-warm); border-radius: var(--r-sm, 10px);
  font-size: 12.5px; line-height: 1.35; color: var(--ink-2);
}
#screen-stats .wkb-goal-fact b,
#screen-progress .wkb-goal-fact b { font-size: 14px; color: var(--vv-green-dark); }
#screen-stats .wkb-goal-fact.is-empty,
#screen-progress .wkb-goal-fact.is-empty { color: var(--ink-3); }
#screen-stats .wkb-pane-icon .wh-ic,
#screen-progress .wkb-pane-icon .wh-ic {
  width: 20px; height: 20px; vertical-align: 0; color: var(--vv-green-dark);
}
/* Ноль в целях — не достижение: нейтральный фон, глиняный акцент, кнопка-выход. */
#screen-stats .wkb-goal-fact.is-zero,
#screen-progress .wkb-goal-fact.is-zero {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--vv-clay-tint); color: var(--ink-2);
}
/* ⚠ 44px, А НЕ 36. Прежние 36 писались, когда кнопка жила ВНУТРИ строки факта и
   правило «зона касания 44» на неё смотрели сквозь пальцы. С 16.08.2026 кнопка
   стоит отдельной строкой под карточкой (внутрь кнопки-карточки её класть
   нельзя — кнопка в кнопке это недопустимая разметка), и поблажке взяться
   неоткуда. Замерено в приёмке: было 36, стало 44. */
#screen-stats .wkb-goal-fix,
#screen-progress .wkb-goal-fix {
  flex: 0 0 auto; min-height: 44px; padding: 11px 16px; border: none;
  border-radius: 999px; background: var(--paper); color: var(--vv-green-dark);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ═════════════════════════════════════════════════════════════════════════
   ЦЕЛЬ — КНОПКА, А НЕ ССЫЛКА В «ЗНАНИЯ» (16.08.2026)

   ⚠ ЛОВУШКА КАСКАДА, ИЗ-ЗА КОТОРОЙ ЗДЕСЬ ИМЕННО ТАКИЕ СЕЛЕКТОРЫ.
   Оформление карточки цели живёт в design_v2.css за `#screen-stats
   .wkb-goal-card` И С `!important` — то есть id плюс важность. Класс
   `.wkb-goal-main` в одиночку не перебьёт даже собственный шрифт кнопки:
   у <button> он свой (13.33px Arial от браузера) и внутрь наследуется.
   Поэтому сброс кнопки идёт с тем же id-префиксом, что и всё вокруг.
   Проверено вычисленным стилем в приёмке, а не глазами по коду.

   Кнопка занимает всю карточку — цель нажимается целиком, а не «где-то там
   справа маленькая ссылка». `min-height` не ставим: карточка и так выше 44 px
   тремя строками текста, а жёсткая высота растянула бы её у коротких целей. */
#screen-stats .wkb-goal-main,
#screen-progress .wkb-goal-main {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-family: inherit; font-size: 13px; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#screen-stats .wkb-goal-main:active,
#screen-progress .wkb-goal-main:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  #screen-stats .wkb-goal-main:active,
  #screen-progress .wkb-goal-main:active { transform: none; }
}
/* «Разбор ›» — приглашение вместо прежнего «Все факты →». Шеврон _ic смотрит
   ВНИЗ (это значок «раскрыть»), поэтому доворачиваем его вправо: лист выезжает
   как отдельный экран, а не раскрывается на месте. */
#screen-stats .wkb-goal-open,
#screen-progress .wkb-goal-open {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
  font-size: 12px; font-weight: 700; color: var(--vv-green-dark); white-space: nowrap;
}
#screen-stats .wkb-goal-open .wh-ic,
#screen-progress .wkb-goal-open .wh-ic {
  width: 15px; height: 15px; transform: rotate(-90deg);
}
#screen-stats .wkb-goal-buy,
#screen-progress .wkb-goal-buy {
  margin: 0 0 6px; font-size: 12px; line-height: 1.35; color: var(--ink-3);
}
#screen-stats .wkb-goal-actions,
#screen-progress .wkb-goal-actions { margin-top: 10px; }

/* ── Диаграмма «Все цели рядом» ──────────────────────────────────────────
   Отделяется от списка карточек линией, а не воздухом: без неё диаграмма
   читается как ещё одна карточка цели. */
#screen-stats .wkb-goal-chart,
#screen-progress .wkb-goal-chart {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
#screen-stats .wkb-goal-chart-t,
#screen-progress .wkb-goal-chart-t {
  font-size: 14px; font-weight: 800; color: var(--ink);
}
#screen-stats .wkb-goal-chart-s,
#screen-progress .wkb-goal-chart-s {
  margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2);
}

/* ── Лист разбора цели ───────────────────────────────────────────────────
   Разметка та же, что у «Всего дня» и «Покупки» (vv-modal-bg / vv-sheet-card):
   шестой конвенции модалок в проекте не заводим. */
.vv-gr { padding: 4px 0 10px; }
.vv-gr-sect { margin-top: 14px; }
.vv-gr-h {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.vv-gr-body { font-size: 14px; line-height: 1.5; color: var(--ink); }
.vv-gr-wait { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.vv-gr-quiet { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.vv-gr-fact {
  margin-top: 8px; padding: 10px 12px; border-radius: var(--r-sm, 10px);
  background: var(--bg-warm); font-size: 13px; line-height: 1.4; color: var(--ink-2);
}
.vv-gr-fact b { font-size: 15px; color: var(--vv-green-dark); }
/* Ноль и здесь не зелёный: зелёная жирная единица читается как достижение. */
.vv-gr-fact.is-zero { background: var(--vv-clay-tint); color: var(--ink-2); }
.vv-gr-names { margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.vv-gr-link {
  display: block; margin-top: 18px; min-height: 44px; line-height: 44px;
  font-size: 13px; font-weight: 700; color: var(--vv-berry); text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   ДНЕВНИК: раскрытие любого приёма (VVELL-119, 07.08.2026)
   Заголовок строки — кнопка на всю свободную ширину, действие справа отдельно,
   поэтому клики не спорят. Шеврон поворачивается — иначе не видно, что тут вообще
   что-то раскрывается.
   ───────────────────────────────────────────────────────────────────────── */
#screen-progress .vv-dg-row-toggle {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  border: none; background: transparent; padding: 0;
  font: inherit; text-align: left; cursor: pointer; color: inherit;
}
#screen-progress .vv-dg-row-chev {
  display: inline-flex; align-items: center; color: var(--ink-4);
  transition: transform .18s var(--ease, ease);
}
#screen-progress .vv-dg-row-chev .wh-ic { width: 16px; height: 16px; vertical-align: 0; }
/* Иконка chevron рисует «вниз» (path m6 9 6 6 6-6) — значит свёрнуто это уже «раскрыть»,
   а раскрыто должно быть «вверх». Поворот 180°, а не 90°: при 90° шеврон смотрел ВЛЕВО. */
#screen-progress .vv-dg-row.is-open .vv-dg-row-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  #screen-progress .vv-dg-row-chev { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   ГОРИЗОНТ ПРИКЛЮЧЕНИЙ — лестница дел (VVELL-121, 07.08.2026)
   Полоса здесь означает ЦЕНУ дела, а не прогресс человека, поэтому она
   нейтрального цвета: зелёная читалась бы как «у тебя это получается».
   ═════════════════════════════════════════════════════════════════════════ */
#screen-age .vv-hz-row { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
#screen-age .vv-hz-row:last-of-type { border-bottom: none; }
#screen-age .vv-hz-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#screen-age .vv-hz-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
#screen-age .vv-hz-need { font-size: 13px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
/* ⚠ overflow БОЛЬШЕ НЕ hidden: засечка .vv-hz-mark стоит НА дорожке и торчит
   выше её на 3 px сверху и снизу — при hidden её просто срезало бы. */
#screen-age .vv-hz-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line-soft); margin: 8px 0 6px; }
#screen-age .vv-hz-fill { height: 100%; border-radius: 3px; background: var(--ink-4); }
/* Засечка на шкале: «это дело стоит вот здесь». Отвечает на вопрос «где я на
   линейке», не притворяясь заполнением. */
#screen-age .vv-hz-mark { position: absolute; top: -3px; width: 3px; height: 12px; border-radius: 2px;
  background: var(--ink-2); transform: translateX(-1px); }
#screen-age .vv-hz-row.is-ok .vv-hz-mark { background: var(--vv-green, #177652); }
/* Шапка колонок: единица измерения сказана ОДИН раз. Тот же ритм, что у
   заголовков групп .vv-age-group — 11px/700 uppercase. */
#screen-age .vv-hz-colh { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 12px 0 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
#screen-age .vv-hz-hint { font-size: 12px; color: var(--ink-3); }
#screen-age .vv-hz-note { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--bg-warm); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
#screen-age .vv-hz-note.is-quiet { background: transparent; padding: 8px 0 0; color: var(--ink-3); font-size: 12px; }
#screen-age .vv-hz-miss { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
#screen-age .vv-hz-miss ul { margin: 4px 0 0; padding-left: 18px; }
#screen-age .vv-hz-miss li { margin: 2px 0; }

/* ═════════════════════════════════════════════════════════════════════════
   ФИТИЛЁК НА ВЕЧЕР — сбор данных (VVELL-121, 07.08.2026)
   Числа-обещания тут нет намеренно: блок пока только спрашивает и записывает.
   Поэтому и оформление тихое — он не должен спорить за внимание с «Запасом хода».
   ═════════════════════════════════════════════════════════════════════════ */
#screen-age .vv-ev-why { margin: 4px 0 12px; padding: 9px 12px; border-radius: var(--r-sm, 10px); background: var(--bg-warm); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
#screen-age .vv-ev-act { padding: 12px 0 4px; }
#screen-age .vv-ev-act-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
#screen-age .vv-ev-act-text { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
#screen-age .vv-ev-act-ev { font-size: 12px; line-height: 1.45; color: var(--ink-3); margin-top: 8px; }
#screen-age .vv-ev-actions { display: flex; gap: 8px; margin-top: 12px; }
#screen-age .vv-ev-actions .btn { flex: 1; min-height: 44px; }
#screen-age .vv-ev-answered { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--vv-green-tint); color: var(--vv-green-dark); font-size: 12.5px; font-weight: 600; }
#screen-age .vv-ev-q { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
#screen-age .vv-ev-q-text { font-size: 13.5px; font-weight: 600; color: var(--ink); }
#screen-age .vv-ev-q-btns { display: flex; gap: 8px; margin-top: 8px; }
#screen-age .vv-ev-q-btns .btn { flex: 0 0 auto; min-height: 44px; padding: 10px 20px; }
#screen-age .vv-ev-q-note { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); margin-top: 8px; }
#screen-age .vv-ev-bed { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
#screen-age .vv-ev-bed label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
#screen-age .vv-ev-bed input { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; }
/* Кнопка-выход в строке «чего не хватает»: причина без действия бесполезна. */
#screen-age .vv-ev-why-fix {
  min-height: 44px; margin-left: 6px; padding: 8px 14px; border: none;
  border-radius: 999px; background: var(--paper); color: var(--vv-green-dark);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}

/* ═════════════════════════════════════════════════════════════════════════
   СОСТАВ ПОКУПКИ: карточка стала кнопкой + лист-разбор (VVELL-115, 07.08.2026)
   Цвета уровней (.vv-pc-A..F) уже описаны выше для полосы — здесь они же
   переиспользуются точками легенды, поэтому дублируем селекторы без префикса
   экрана: лист живёт в body, а не внутри #screen-stats.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-stats button.vv-pc {
  display: block; width: 100%; text-align: left; border: none; font: inherit;
  cursor: pointer; color: inherit;
}
#screen-stats .vv-pc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 6px; }
#screen-stats .vv-pc-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
#screen-stats .vv-pc-more {
  display: flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--vv-green-dark);
}
#screen-stats .vv-pc-more .wh-ic { width: 15px; height: 15px; vertical-align: 0; transform: rotate(-90deg); }

.vv-pc-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.vv-pc-dot.vv-pc-4 { background: var(--vv-green); }
.vv-pc-dot.vv-pc-3 { background: var(--vv-green-dark); opacity: .75; }
.vv-pc-dot.vv-pc-2 { background: var(--vv-clay); opacity: .7; }
/* Нижняя ступень — глина, а НЕ ягодный-красный: «среднее» это про состав еды,
   а не сигнал опасности. Красным приложение стыдило бы за ужин.
   (Слово ступени с 13.08.2026 — «среднее»; раньше было «умеренно», ещё раньше
   «скромно». Класс `vv-pc-1` не менялся ни разу — имя живёт в LEVEL_LABEL.) */
.vv-pc-dot.vv-pc-1 { background: var(--vv-clay); }
.vv-pc-dot.vv-pc-none { background: var(--line); opacity: .6; }

.vv-cs-lead { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-bottom: 14px; }
.vv-cs-group { margin-bottom: 14px; }
.vv-cs-group-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.vv-cs-group-name { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.vv-cs-group-count { font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vv-cs-item { padding: 7px 0 7px 17px; font-size: 13px; line-height: 1.35; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); }
.vv-cs-group .vv-cs-item:last-child { border-bottom: none; }
.vv-cs-group.is-ungraded .vv-cs-item { color: var(--ink-3); }
.vv-cs-how { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--bg-warm); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.vv-cs-how.is-quiet { background: transparent; padding: 8px 0 0; color: var(--ink-3); font-size: 12px; }

/* «Что ты получаешь» — нутриенты словами (VVELL-101).
   Чипы, а не таблица: у списка нет порядка, который стоило бы читать сверху
   вниз, и нет второго столбца. Число внутри чипа — вторым голосом (ink-3),
   потому что главное здесь слово «кальций», а не «92%». */
.vv-nu { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.vv-nu-title { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.vv-nu-title svg { width: 16px; height: 16px; flex: 0 0 auto; }
.vv-nu-row { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; }
.vv-nu-lab { flex: 0 0 42px; padding-top: 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); }
.vv-nu-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.vv-nu-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 9px; border-radius: 999px; background: var(--bg-warm); border: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.2; color: var(--ink-2); }
.vv-nu-chip b { font-weight: 700; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vv-nu-chip.is-rich { background: var(--vv-green-tint); border-color: transparent; color: var(--ink); }
.vv-nu-chip.is-rich b { color: var(--vv-green-dark); }
/* Класс .is-watch (глиняный чип блока «Следи») убран 12.08.2026 вместе с самим
   блоком: его единственным жителем был натрий, и цвет чипа был ЦВЕТОМ ПО СОЛИ.
   Правила удалены, а не оставлены «на всякий случай», — мёртвый CSS однажды
   оживает от чужой правки шаблона. Оставшийся .vv-ms-trend.is-watch (строка ~454)
   к нутриентам отношения не имеет, это тренд метрики. */
/* VVELL-157: дробь покрытия («14/19») и пунктир «в основном оценка» прямо на
   чипе. Цвета — только через токены: у страницы три состояния темы, и жёстко
   заданный серый в ночной теме сливается с фоном. <u> перебиваем на no-underline
   — тег взят за смысл «пометка», а не за подчёркивание. */
.vv-nu-chip u { font-size: 10.5px; color: var(--ink-3); opacity: .8;
  text-decoration: none; font-variant-numeric: tabular-nums; }
.vv-nu-chip.is-soft { border-style: dashed; border-color: var(--ink-3); }
.vv-nu-chip.is-rich.is-soft { border-color: var(--ink-3); }
.vv-nu-note { margin: -2px 0 8px 51px; font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.vv-nu-how { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.vv-nu-how.is-quiet { margin-top: 5px; opacity: .82; }

/* ═════════════════════════════════════════════════════════════════════════
   РУЧНАЯ ПРАВКА ПОВЕРХ ТРЕКЕРА (VVELL-120, 07.08.2026)
   Подпись источника и выход из него — одна строка. Кнопки ввода при живом
   коннекторе спрятаны до тапа «Поправить»: показывать их сразу рядом с
   «обновляется из WHOOP» значит предлагать спорить с прибором без повода.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-progress .vv-ld-auto {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; width: 100%;
}
#screen-progress .vv-ld-auto.is-manual { color: var(--vv-clay); font-weight: 600; }
#screen-progress .vv-ld-src-btn {
  min-height: 36px; padding: 7px 14px; border: none; border-radius: 999px;
  background: var(--paper); color: var(--vv-green-dark);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
#screen-progress .vv-ld-manual-hidden { display: none; width: 100%; gap: 8px; margin-top: 8px; }
#screen-progress .vv-ld-manual-hidden.is-open { display: flex; flex-wrap: wrap; }

/* ═════════════════════════════════════════════════════════════════════════
   КАЛЕНДАРЬ ПРИВЫЧЕК: насыщенность = число отметок (VVELL-117, 07.08.2026)
   Классы wkb-cal-full/partial/miss больше не используются: они означали
   «все привычки выполнены / частично / пропуск», а посчитать это было нельзя —
   знаменателем служило число записей в логе. Здесь четыре уровня по числу
   отметок, и ни одно слово не обещает того, чего мы не знаем.
   ═════════════════════════════════════════════════════════════════════════ */
/* ⚠ СЕЛЕКТОР БЕЗ ЭКРАНА ОБЯЗАТЕЛЕН (VVELL-720, 07.09.2026).
   Насыщенность была расписана только по экранам — `#screen-stats` и
   `#screen-progress`. А единственный живой путь на этот календарь ведёт не на
   экран, а в ЛИСТ: «Сводка → Что трекаем?» открывает `#vv-found-sheet`, и лист
   висит прямо в `body`. Итог на живом проде: все 30 клеток одного цвета
   rgb(235,227,213) — базовый фон `.wkb-cal-cell` — при подписи «Отмечался в 15
   днях из 30» и при РАЗНОЦВЕТНОЙ легенде рядом (её образцы `.wkb-cal-swatch`
   написаны без экрана и красились). Экран спорил сам с собой.
   Отдельно опасно это стало вместе с ответом «не делал»: правило `.wkb-cal-zero`
   ниже уже без экрана, поэтому в листе рисовался бы ровно один день месяца —
   отрицательный, а честно выполненные оставались бы невидимыми.
   Экранные селекторы (`#screen-stats`, `#screen-progress`) УБРАНЫ, а не оставлены
   рядом: пока они были, ночная поправка ниже (0,3,0) проигрывала им по весу
   (1,2,0) на самих экранах. Одно правило на класс — и ловушка закрыта навсегда. */
.wkb-cal-cell.wkb-cal-l0 { background: var(--bg-warm); color: var(--ink-4); }
.wkb-cal-cell.wkb-cal-l1 { background: var(--vv-green-tint); color: var(--vv-green-dark); }
.wkb-cal-cell.wkb-cal-l2 { background: var(--vv-green); color: #fff; opacity: .8; }
.wkb-cal-cell.wkb-cal-l3 { background: var(--vv-green-dark); color: #fff; }

/* ⚠ НОЧЬЮ ЛЕСТНИЦА ШЛА ВСПЯТЬ (замер 07.09.2026, тот же разбор).
   На светлой бумаге «тёмно-зелёный» — это САМЫЙ СИЛЬНЫЙ шаг. На тёмном фоне
   всё наоборот: сильный — самый ЯРКИЙ. Замер по пикселям ночного экрана:
   «2–3 привычки» давали rgb(55,160,117), «4 и больше» — rgb(36,157,111), то
   есть верхняя ступень выглядела ТУСКЛЕЕ предыдущей, и две последние клетки
   легенды «реже → чаще» были неотличимы. Ночью меняем два шага местами.
   Образцы легенды меняем ТЕМИ ЖЕ правилами: если поменять только клетки,
   легенда начнёт спорить с календарём. */
:root.vv-theme-night .wkb-cal-cell.wkb-cal-l2,
.vv-theme-night .wkb-cal-cell.wkb-cal-l2 { background: var(--vv-green-dark); opacity: 1; }
:root.vv-theme-night .wkb-cal-cell.wkb-cal-l3,
.vv-theme-night .wkb-cal-cell.wkb-cal-l3 { background: var(--vv-green); }
:root.vv-theme-night .wkb-cal-swatch.wkb-cal-l2,
.vv-theme-night .wkb-cal-swatch.wkb-cal-l2 { background: var(--vv-green-dark); opacity: 1; }
:root.vv-theme-night .wkb-cal-swatch.wkb-cal-l3,
.vv-theme-night .wkb-cal-swatch.wkb-cal-l3 { background: var(--vv-green); }

/* День, где человек ответил «не делал» и не отметил ничего сделанного
   (VVELL-720, 07.09.2026). Не зелёный — это не выполнение; но и не пустой —
   ответ был. Пунктир расшифрован подписью под календарём, чтобы значок не
   пришлось угадывать. */
/* ⚠ СЕЛЕКТОР БЕЗ ЭКРАНА ОБЯЗАТЕЛЕН. Календарь «Что трекаем» живёт не в
   `#screen-stats`, а в листе `#vv-found-sheet` — правило, написанное только по
   экранам, не применилось вовсе: класс на клетке стоял, рамки не было. Замер на
   живом экране: border-top-width 0px. */
.wkb-cal-cell.wkb-cal-zero,
#vv-found-sheet .wkb-cal-cell.wkb-cal-zero,
#screen-stats .wkb-cal-cell.wkb-cal-zero,
#screen-progress .wkb-cal-cell.wkb-cal-zero {
  background: transparent;
  border: 1px dashed var(--ink-4, #b9b9b3);
  color: var(--ink-3);
}
.wkb-cal-summary { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.wkb-cal-summary b { font-size: 15px; color: var(--ink); }
.wkb-cal-note { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.wkb-cal-legend { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }
.wkb-cal-swatch.wkb-cal-l0 { background: var(--bg-warm); }
.wkb-cal-swatch.wkb-cal-l1 { background: var(--vv-green-tint); }
.wkb-cal-swatch.wkb-cal-l2 { background: var(--vv-green); opacity: .8; }
.wkb-cal-swatch.wkb-cal-l3 { background: var(--vv-green-dark); }
.wkb-section-eyebrow .wh-ic { width: 15px; height: 15px; vertical-align: -2px; color: var(--vv-green-dark); }

/* ═════════════════════════════════════════════════════════════════════════
   ЛАЙФХАКИ: ПОДБОРКИ ПО ТЕМАМ (VVELL-185, 13.08.2026)

   До этого здесь был плоский список: первые 12 строк и кнопка «Показать ещё
   36». Владелец: «надо читать каждую без темы» — четыре совета подряд про
   белок, но пока не прочитаешь каждый, этого не видно.

   ⚠ ЭТО НЕ ВОЗВРАТ К ГРУППАМ 2026-08-07. Те группы РЕЗАЛИ список регулярками
   по словам заголовка, и не попавший ни в одну не рисовался вовсе (17 из 100).
   Здесь тема приезжает полем `topic` с сервера, у совета она ровно одна, и
   подборка СВОРАЧИВАЕТСЯ, а не отсекается: в заголовке видно, сколько внутри.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-lifehacks .lh-topics { display: flex; flex-direction: column; gap: 10px; }
#screen-lifehacks .lh-topics-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 2px 2px;
}
/* Строка «57 советов · 19 тем» — это и есть проверка «ничего не потеряли»,
   вынесенная человеку на экран, а не спрятанная в приёмку. */
#screen-lifehacks .lh-topics-sum {
  font-size: 12.5px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
#screen-lifehacks .lh-topics-all {
  min-height: 44px; padding: 10px 12px; border: none; border-radius: 999px;
  background: transparent; color: var(--vv-green-dark);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
#screen-lifehacks .lh-topic {
  background: var(--card); border-radius: var(--r-md, 14px); overflow: hidden;
}
#screen-lifehacks .lh-topic-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 12px 16px; border: none;
  background: transparent; font: inherit; text-align: left; cursor: pointer; color: inherit;
}
#screen-lifehacks .lh-topic-ic { flex: 0 0 auto; display: inline-flex; color: var(--ink-3); }
#screen-lifehacks .lh-topic-ic .wh-ic { width: 18px; height: 18px; vertical-align: 0; }
#screen-lifehacks .lh-topic-name {
  flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--ink);
}
/* Пометка «под твои цели» стоит у подборки, а не у каждой строки: подборка
   открыта сразу именно из-за неё, и человек должен видеть, почему. */
#screen-lifehacks .lh-topic-mine {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; background: var(--bg-warm); color: var(--vv-green-dark);
  white-space: nowrap;
}
#screen-lifehacks .lh-topic-n {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
#screen-lifehacks .lh-topic-chev { flex: 0 0 auto; display: inline-flex; color: var(--ink-4); }
/* ⚠ `_ic('chevron')` смотрит ВНИЗ (см. docs/FRONTEND.md). Для «раскрыто» нужен
   ровно 180deg: при 90deg шеврон разворачивается вбок. */
#screen-lifehacks .lh-topic-chev .wh-ic { width: 16px; height: 16px; vertical-align: 0; }
#screen-lifehacks .lh-topic.is-open .lh-topic-chev .wh-ic { transform: rotate(180deg); }
#screen-lifehacks .lh-topic-body { display: none; padding: 0 16px 6px; }
#screen-lifehacks .lh-topic.is-open .lh-topic-body { display: block; }
#screen-lifehacks .lh-topic.is-open .lh-topic-head { border-bottom: 1px solid var(--line-soft); }
#screen-lifehacks .lh-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  min-height: 44px; padding: 11px 0; border: none; border-bottom: 1px solid var(--line-soft);
  background: transparent; font: inherit; text-align: left; cursor: pointer; color: inherit;
}
#screen-lifehacks .lh-item:last-of-type { border-bottom: none; }
#screen-lifehacks .lh-item-body { flex: 1; min-width: 0; }
/* Перенос, а не обрезка: заголовок решает, читать ли совет, и рубить его посреди
   слова значит ломать выбор ровно в той точке, где он делается. */
#screen-lifehacks .lh-item-title { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#screen-lifehacks .lh-item-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.35; color: var(--ink-3); margin-top: 3px; }
#screen-lifehacks .lh-item.is-mine .lh-item-title { color: var(--vv-green-dark); }

/* ═════════════════════════════════════════════════════════════════════════
   НАСКОЛЬКО ЭТО ДОКАЗАНО — ЧИП В СТРОКЕ СОВЕТА (13.08.2026)
   Цвет несёт смысл и читается без легенды: зелёный — есть работа, глиняный —
   данные ранние, серый — источника нет, синий — спор. Цвета берутся токенами,
   поэтому ночью не выходят светлые плашки на тёмном (этим уже болел блок
   «Практические советы», см. запись от 07.08.2026 выше).
   Токены `--vv-blue*` в ночной теме не переопределены, поэтому спорность
   красим глиной: она в теме есть и ночью, и днём.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-lifehacks .lh-ev-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#screen-lifehacks .lh-ev,
#vv-lifehack-modal .lh-ev {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  white-space: nowrap; background: var(--bg-warm); color: var(--ink-3);
}
/* ⚠ ДВЕ ГЛАВНЫЕ СТУПЕНИ ШКАЛЫ БЫЛИ НЕОТЛИЧИМЫ ГЛАЗОМ (13.08.2026).
   Замер getComputedStyle на живом экране: у is-strong и is-research СОВПАДАЛ
   цвет текста (день rgb(18,105,74), ночь rgb(36,157,111)), а фоны различались
   на 9/5/7 из 255 днём и на 0.04 альфы ночью. На эти две ступени приходится
   38 и 41 совет из 126 — то есть ранжирование было нарисовано, но прочитать
   его было нельзя. Разводим не оттенком фона, а ЗАЛИВКОЙ ПРОТИВ ОБВОДКИ:
   «хорошо изучено» — плотный зелёный, «есть исследования» — тот же зелёный
   контуром по прозрачному. Разница видна и на снимке, и на глаз. */
#screen-lifehacks .lh-ev.is-strong,
#vv-lifehack-modal .lh-ev.is-strong {
  background: var(--vv-green-dark); color: var(--card);
}
#screen-lifehacks .lh-ev.is-research,
#vv-lifehack-modal .lh-ev.is-research {
  background: transparent; color: var(--vv-green-dark);
  box-shadow: inset 0 0 0 1.5px var(--vv-green-dark);
}
#screen-lifehacks .lh-ev.is-early,
#vv-lifehack-modal .lh-ev.is-early { background: var(--vv-clay-tint); color: var(--vv-clay); }
#screen-lifehacks .lh-ev.is-opinion,
#vv-lifehack-modal .lh-ev.is-opinion,
#screen-lifehacks .lh-ev.is-unknown,
#vv-lifehack-modal .lh-ev.is-unknown { background: var(--bg-warm); color: var(--ink-3); border: 1px solid var(--line); }

/* ⚠ ПРЕДУПРЕЖДЕНИЕ О СПОРЕ ВЫГЛЯДЕЛО КАК СТУПЕНЬ ШКАЛЫ. Правило is-dispute
   было СЛОВО В СЛОВО таким же, как is-early: тот же фон, тот же цвет, та же
   форма. На строках, где стоят оба чипа сразу («Перед сложной задачей — серия
   быстрых вдохов» несёт «есть ранние данные» и «мнения расходятся»), человек
   видел две одинаковые оранжевые пилюли и не мог понять, где оценка
   доказанности, а где предупреждение о споре. Это РАЗНЫЕ вопросы, и они
   обязаны выглядеть по-разному: спорность — не заливка, а рамка с точками,
   и она не соперничает со шкалой за один и тот же язык формы. */
#screen-lifehacks .lh-ev.is-dispute,
#vv-lifehack-modal .lh-ev.is-dispute {
  background: transparent; color: var(--vv-clay);
  border: 1px dashed var(--vv-clay);
}

/* Иконка темы в шапке карточки — вместо эмодзи 32-м кеглем (запрет спеки). */
#vv-lifehack-modal .lh-modal-ic { display: inline-flex; color: var(--ink-3); }
#vv-lifehack-modal .lh-modal-ic .wh-ic { width: 28px; height: 28px; }
/* Плашка оговорки: фон был захардкожен как #FFF3E0 и ночью светился. */
#vv-lifehack-modal .lh-caveat-box {
  font-size: 12px; color: var(--ink-2); background: var(--vv-clay-tint);
  border-radius: var(--r-xs); padding: 8px 10px;
}
#vv-lifehack-modal .lh-ev-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#vv-lifehack-modal .lh-ev-basis { font-size: 12.5px; color: var(--ink-3); }
#vv-lifehack-modal .lh-dispute-text { font-size: 12.5px; color: var(--ink-2); white-space: pre-line; }
#vv-lifehack-modal .lh-src-list { list-style: none; margin: 8px 0 0; padding: 0; }
#vv-lifehack-modal .lh-src { padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 12px; line-height: 1.35; }
#vv-lifehack-modal .lh-src-kind { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-4); }
#vv-lifehack-modal .lh-src-name { color: var(--ink-2); }
#vv-lifehack-modal a.lh-src-name { color: var(--vv-green-dark); text-decoration: underline; }

/* Подпись под вкладками: чем одна половина раздела отличается от другой. */
#screen-lifehacks .lh-tab-note { font-size: 12px; color: var(--ink-3); margin: 8px 2px 2px; }
#screen-lifehacks .lh-item-chev { flex: 0 0 auto; color: var(--ink-4); margin-top: 2px; }
#screen-lifehacks .lh-item-chev .wh-ic { width: 16px; height: 16px; vertical-align: 0; transform: rotate(-90deg); }
/* `.lh-flat-more` («Показать ещё N») удалён 13.08.2026 вместе с плоским
   списком: раскрывается теперь подборка целиком, кнопка ей не нужна. */

/* ═════════════════════════════════════════════════════════════════════════
   ЛАЙФХАКИ: одна строка выбора + лист тем (VVELL-113 ч.2, 07.08.2026)
   Было три ряда чипов, из которых три темы были захардкожены и физически не
   помещались в 390px. Здесь сегмент из двух вариантов и кнопка «Темы»,
   открывающая полный список листом.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-lifehacks .lh-bar { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
#screen-lifehacks .lh-segs { display: flex; flex: 0 0 auto; padding: 3px; gap: 2px; background: var(--bg-warm); border-radius: 999px; }
#screen-lifehacks .lh-seg {
  min-height: 44px; padding: 10px 16px; border: none; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
#screen-lifehacks .lh-seg.is-on { background: var(--paper); color: var(--vv-green-dark); box-shadow: var(--sh-1); }
#screen-lifehacks .lh-themes-btn {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#screen-lifehacks .lh-themes-btn.is-on { border-color: var(--vv-green); color: var(--vv-green-dark); }
#screen-lifehacks .lh-themes-n { color: var(--ink-4); font-weight: 600; }

.lh-th-list { display: flex; flex-direction: column; }
.lh-th-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 12px 0; border: none; border-bottom: 1px solid var(--line-soft);
  background: transparent; font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.lh-th-row:last-child { border-bottom: none; }
.lh-th-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
.lh-th-count { font-size: 13px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lh-th-row.is-on .lh-th-name { color: var(--vv-green-dark); }
.lh-th-check { display: inline-flex; color: var(--vv-green-dark); }
.lh-th-check .wh-ic { width: 17px; height: 17px; vertical-align: 0; }
.lh-th-reset {
  width: 100%; min-height: 44px; margin-top: 14px; border: none; border-radius: 999px;
  background: var(--bg-warm); color: var(--vv-green-dark);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
/* Иконки вместо эмодзи в ответах ИИ и чипах коуча (VVELL-114, 07.08.2026).
   Размер и цвет задаём явно: у эмодзи размер шёл от font-size, у SVG так не работает,
   а без color currentColor подхватывает системный синий на iOS. */
.vv-ai-sources .wh-ic,
.vv-ai-disclaimer .wh-ic,
.vv-ai-missing .wh-ic { width: 14px; height: 14px; vertical-align: -2px; color: inherit; }
.vv-ai-cart-goal .wh-ic { width: 14px; height: 14px; vertical-align: -2px; color: inherit; }
.vv-ai-btn .wh-ic { width: 15px; height: 15px; vertical-align: -2px; color: inherit; }
.vv-coach-intent { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.vv-coach-intent .wh-ic { width: 15px; height: 15px; vertical-align: 0; flex: 0 0 auto; color: var(--vv-green-dark); }
.vv-coach-avatar .wh-ic { width: 20px; height: 20px; vertical-align: 0; color: var(--vv-green-dark); }
#vv-theme-icon .wh-ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--ink-2); }
/* Чат: верх экрана без второй разделительной линии (VVELL-114, 07.08.2026).
   .chat-header удалён из разметки, но правило оставляем на случай, если блок
   вернётся: у шапки приложения уже есть своя граница, вторая читается как обрыв. */
#screen-chat .chat-header { border-bottom: none; padding-top: 8px; }
#screen-chat .chat-list { padding-top: 10px; }

/* ═════════════════════════════════════════════════════════════════════════
   ФУНДАМЕНТ: карточка привычки — действие целиком (VVELL-116, 07.08.2026)
   Было 24 кнопки «Начать трекать» на одном экране: двадцать четыре элемента
   с одинаковым максимальным весом = главного действия нет вовсе. Теперь
   действие — вся карточка, а состояние подписано словом, а не кнопкой.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-stats .wkb-found-card,
#screen-progress .wkb-found-card { cursor: pointer; }
#screen-stats .wkb-found-card:not(.is-done):active,
#screen-progress .wkb-found-card:not(.is-done):active { transform: scale(.99); }
#screen-stats .wkb-found-sum,
#screen-progress .wkb-found-sum { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); margin: 4px 0 8px; }
#screen-stats .wkb-found-state,
#screen-progress .wkb-found-state { display: flex; align-items: center; gap: 8px; min-height: 24px; }
#screen-stats .wkb-found-on,
#screen-progress .wkb-found-on { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--vv-green-dark); }
#screen-stats .wkb-found-add,
#screen-progress .wkb-found-add { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
#screen-stats .wkb-found-on .wh-ic,
#screen-stats .wkb-found-add .wh-ic,
#screen-progress .wkb-found-on .wh-ic,
#screen-progress .wkb-found-add .wh-ic { width: 14px; height: 14px; vertical-align: 0; }
#screen-stats .wkb-found-golink,
#screen-progress .wkb-found-golink {
  min-height: 32px; padding: 4px 0; border: none; background: transparent;
  color: var(--vv-green-dark); font: inherit; font-size: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
#screen-stats .vv-theme-icon .wh-ic,
#screen-progress .vv-theme-icon .wh-ic { width: 20px; height: 20px; vertical-align: 0; color: var(--vv-green-dark); }
/* Блок «Семья» в настройках: иконка вместо эмодзи 👨‍👩‍👧 (07.08.2026).
   Составные эмодзи с ZWJ хуже прочих: на части устройств распадаются на три
   отдельные фигурки, а цвет темы не наследуют вовсе. */
#screen-settings .s-fam-ic { display: inline-flex; align-items: center; }
#screen-settings .s-fam-ic .wh-ic { width: 24px; height: 24px; vertical-align: 0; color: var(--vv-green-dark); }

/* ═════════════════════════════════════════════════════════════════════════
   ФУНДАМЕНТ: «Мои привычки» с отметкой прямо здесь (VVELL-116, 07.08.2026)
   До этого экран показывал привычки, но отметить их можно было только в
   «Дневнике → Образ жизни»: человек приходил на экран привычек и уходил с
   него, чтобы отметить привычку. Строки переиспользуют разметку Дневника
   (.vv-ld-habit), поэтому оформление совпадает и учить второй раз не нужно.
   ═════════════════════════════════════════════════════════════════════════ */
#screen-stats .wkb-mine,
#screen-progress .wkb-mine { margin: 4px 0 16px; }
#screen-stats .wkb-mine-head,
#screen-progress .wkb-mine-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#screen-stats .wkb-mine-title,
#screen-progress .wkb-mine-title { font-size: 13px; font-weight: 700; color: var(--ink-2); }
#screen-stats .wkb-mine-count,
#screen-progress .wkb-mine-count { font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
#screen-stats .wkb-mine-row,
#screen-progress .wkb-mine-row { background: var(--card); border-radius: var(--r-sm, 12px); padding: 10px 12px; margin-bottom: 8px; }
#screen-stats .wkb-mine .vv-ld-hbtn .wh-ic,
#screen-progress .wkb-mine .vv-ld-hbtn .wh-ic { width: 16px; height: 16px; vertical-align: 0; }
/* ⚠ Кнопка «Отметить» была ЯГОДНОЙ (красной) на Фундаменте: базовый стиль
   .vv-ld-hbtn красный, а зелёный вариант описан только для #screen-progress —
   мой блок живёт на #screen-stats и переопределения не получал. Красная кнопка
   у позитивного действия читается как предупреждение. */
#screen-stats .wkb-mine .vv-ld-hbtn {
  min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--vv-green); background: transparent;
  color: var(--vv-green-dark); font-weight: 700;
}
#screen-stats .wkb-mine .vv-ld-hbtn.is-done {
  background: var(--vv-green); border-color: var(--vv-green); color: #fff;
}
/* Заголовок привычки: перенос в две строки вместо обрезки многоточием —
   по названию человек решает, отмечать ли, и рубить его посреди слова нельзя. */
#screen-stats .wkb-mine .vv-ld-htitle,
#screen-progress .wkb-mine .vv-ld-htitle {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; text-overflow: clip; line-height: 1.3;
}
/* Стрик — число без пояснения читается как счётчик чего угодно. Подписываем. */
#screen-stats .wkb-mine .vv-ld-hstreak::after,
#screen-progress .wkb-mine .vv-ld-hstreak::after { content: ' дн. подряд'; font-weight: 600; }

/* ═════════════════════════════════════════════════════════════════════════
   «КАК ИДЁТ ДЕНЬ» — окно спада (VVELL-107, 07.08.2026)
   Окно показано ДИАПАЗОНОМ, а не точкой: точное время спада индивидуально,
   и обещать минуту мы не можем. Крупно — само окно, потому что это и есть
   единственное число блока.
   ═════════════════════════════════════════════════════════════════════════ */
/* Имя числа НАД числом (16.08.2026). Голый интервал «15:01–17:01» первым и
   самым крупным на карточке человек не опознавал: «не ясно, что это».
   ⚠ Селектор через #screen-age — как у всех соседей: id перебивает классы,
   и правило на одном классе здесь просто не применилось бы. */
#screen-age .vv-ts-what {
  margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
#screen-age .vv-ts-window {
  font-family: var(--font-display); font-size: 30px; font-weight: 800;
  line-height: 1.05; letter-spacing: -.02em; color: var(--ink);
  margin: 2px 0 4px; font-variant-numeric: tabular-nums;
}
/* От чего отсчитано окно — сразу под числом, пока взгляд ещё на нём. */
#screen-age .vv-ts-wake { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); margin-bottom: 6px; }
/* Откуда взято время подъёма и двигается ли окно. Отбито линией: это подпись
   к блоку, а не ещё один совет. */
#screen-age .vv-ts-src {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; line-height: 1.45; color: var(--ink-3);
}
#screen-age .vv-ts-window span { margin: 0 4px; color: var(--ink-4); font-weight: 700; }
#screen-age .vv-ts-fact {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm, 10px);
  background: var(--vv-clay-tint); font-size: 12.5px; line-height: 1.4; color: var(--ink-2);
}
#screen-age .vv-ts-act { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
#screen-age .vv-ts-act-t { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); }
#screen-age .vv-ts-act-w { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); margin-top: 4px; }
#screen-age .vv-ts-q { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
#screen-age .vv-ts-q.is-done { font-size: 12.5px; font-weight: 600; color: var(--vv-green-dark); border-top: none; }
#screen-age .vv-ts-q-text { font-size: 13.5px; font-weight: 600; color: var(--ink); }
#screen-age .vv-ts-q-btns { display: flex; gap: 8px; margin-top: 8px; }
#screen-age .vv-ts-q-btns .btn { flex: 0 0 auto; min-height: 44px; padding: 10px 22px; }
#screen-age .vv-ts-note { margin-top: 12px; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
#screen-age .vv-ts-ask { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 4px; }
#screen-age .vv-ts-why { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); margin-top: 6px; }
#screen-age .vv-ts-go { width: 100%; min-height: 44px; margin-top: 14px; }

/* Домашнее блюдо: товара нет, значит нет и фото пачки. Раньше сюда
   подставлялся /img/sku/None — битая картинка у каждой записи по фото. */
.vv-meal-noimg { display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 44px; border-radius:var(--r-xs);
  background:var(--bg-warm); color:var(--ink-3); }
.vv-meal-noimg svg { width:20px; height:20px; }
.vv-meal-lvl { margin-top:5px; }
.vv-meal-why { margin-top:4px; font-size:11.5px; line-height:1.35; color:var(--ink-3); }

/* ⚠ У домашнего блюда название НЕ ЗАЧЁРКИВАЕМ. Зачёркивание в чек-листе
   означает «съедено из плана», а тут запись и так о съеденном — та же
   черта читается как «отменено» или «удалено». Правило узкое: только
   блок «добавлено», плановые позиции ведут себя как прежде. */
/* !important обязателен: правило в design_v2.css:2327 само с !important,
   и без него порядок подключения файлов ничего не решает. */
#screen-progress .vv-extra-block .vv-meal-item.is-eaten .vv-meal-name {
  text-decoration: none !important; opacity: 1 !important;
}

/* ── Модалка «Добавить в дневник»: три починки по замеру (10.08.2026) ───────
   Все три нашлись только при обходе фичи глазами, из кода не видны. */

/* ⚠ КРЕСТИК ВИСЕЛ ПОВЕРХ КНОПКИ НАСТРОЕК. У .vv-modal-close стоит
   position:absolute, а у .vv-modal-card позиционирования не было вовсе —
   содержащим блоком становился .vv-modal-bg (position:fixed на весь экран).
   Замер на 390 px: крестик {top:12, right:378}, карточка {top:283, right:374},
   то есть на 241 px выше карточки, и под ним лежала vv-settings-btn.
   Одна строка ниже возвращает его в угол СВОЕЙ карточки. */
.vv-modal-card { position: relative; }

/* Цель 30×30 при норме Apple HIG 44. Добираем прозрачной областью, не меняя
   вид кружка: увеличивать сам кружок значит перерисовывать шапку. */
/* ⚠ top/right 12px ИЗ app.css ОСТАВАЛИСЬ ЖИВЫМИ И ПРИ relative (13.08.2026).
   Они написаны для УГЛОВОГО крестика (position: absolute), но у относительно
   позиционированного элемента те же свойства работают как сдвиг от места в
   потоке: кнопка в шапке листа уезжала на 12 px вниз и на 12 px влево.
   Замер: шапка y 113..157, кнопка y 132..162 — она вываливалась ИЗ шапки, и
   нижняя часть её зоны нажатия (44 px) ложилась на первую строку тела листа.
   Обнуляем сдвиг здесь; угловому крестику он возвращается правилом ниже. */
.vv-modal-close { position: relative; top: 0; right: 0; }
.vv-modal-close::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}

/* ⚠ СТРОКА ВЫШЕ УВЕЛА КРЕСТИК КАРТОЧКИ СОВЕТА ЗА ЛЕВЫЙ КРАЙ ЭКРАНА (13.08.2026).
   Крестиков в приложении два вида: в шапке карточки (.vv-modal-head, там он в
   потоке — ему `position: relative` и нужен) и УГЛОВОЙ, прямым потомком
   .vv-modal-content — тому app.css задаёт absolute + top/right 12px. Общее
   правило `position: relative` затёрло absolute у второго вида, и `right: 12px`
   стало сдвигом ОТ СВОЕГО МЕСТА В ПОТОКЕ, то есть влево от левого края карточки.
   Замер: кнопка {x: -12, width: 36} при карточке {x: 0, width: 390} — 12 px из
   36 за экраном, на снимке у края висел разрезанный пополам кружок.
   Возвращаем угловое позиционирование ровно тем шести местам, где оно и было
   (карточка совета, карточка привычки, карточка товара и их ветки ошибки). */
.vv-modal-content > .vv-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* ⚠ НОЧНАЯ ТЕМА. Заголовок сидел на жёстком #111 по тёмной карточке —
   контраст 1,22:1 при норме 4,5:1, то есть названия окна просто не было видно.
   Ночных правил для .vv-modal-card не существовало ни в одном файле. */
.vv-theme-night .vv-modal-card { background: var(--paper); color: var(--ink); }
.vv-theme-night .vv-modal-title { color: var(--ink); }
.vv-theme-night .vv-modal-close { background: var(--bg-warm); color: var(--ink-2); }

/* ⚠ ГЛАВНАЯ КНОПКА БЫЛА ЗА НИЖНИМ КРАЕМ. У карточки max-height:80vh и своя
   прокрутка; после распознавания «Записать в дневник» оказывалась ниже края
   на 100-135 px, и подсказки об этом не было — на скриншотах она выглядела
   разрезанной пополам. Прижимаем ко дну карточки. */
#vv-ph-save {
  position: sticky; bottom: -18px; z-index: 3;
  margin-bottom: 0;
  box-shadow: 0 -14px 18px -6px var(--paper);
}

.vv-theme-night #vv-ph-save { box-shadow: 0 -14px 18px -6px var(--paper); }

/* Место под строку пересчёта резервируем заранее: без этого появление текста
   «Пересчитываю оценку…» сдвигало кнопку вниз на 41 px между нажатием и
   отпусканием пальца, и ПЕРВЫЙ тап пропадал. */
.vv-ph-recalc { min-height: 17px; }
.vv-ph-recalc:empty { display: block; }


/* ══════════════════════════════════════════════════════════════════════════
   НОВАЯ НАВИГАЦИЯ — ТЕСТОВЫЙ РЕЖИМ (10.08.2026)

   ⚠ ПО УМОЛЧАНИЮ ВЫКЛЮЧЕНА. Новый бар лежит в разметке рядом со старым, но
   скрыт, пока на <body> нет класса vv-nav-v2. Это правило важнее внешнего вида:
   без него бар поехал бы всем живым людям в тот же миг, как разметка попала в
   шаблон (проверено — так и случилось на минуту, пока не было этих строк).

   Включает переключатель в Настройках → localStorage.vv_nav_v2. Откат — снять
   тумблер, перезагрузка страницы не нужна, пересборка тем более.
   ══════════════════════════════════════════════════════════════════════════ */
#bottom-nav-v2 { display: none !important; }
/* ⚠ Здесь пряталась СТАРАЯ навигация, когда оба бара жили рядом. Бар удалён
   из разметки 11.08.2026 — правило стало мёртвым и убрано.
   ⚠ ВАЖНО ДЛЯ ТЕХ, КТО БУДЕТ ТРОГАТЬ ВИДИМОСТЬ БАРА: у нового бара классы
   "bottom-nav bottom-nav-v2", а в design_v2.css:814 у .bottom-nav стоит
   display:flex !important. Скрытие держится ТОЛЬКО на том, что селектор по id
   (#bottom-nav-v2) весомее селектора по классу. Ослабишь селектор до класса —
   бар вылезет на экране регистрации. */
body.vv-nav-v2 #bottom-nav-v2.visible { display: flex !important; }

/* Кнопка ИИ — залитая пилюля справа, а не ещё одна вкладка. Так у WHOOP (Coach
   в правом углу) и у Oura («+» там же): вкладка это одно из мест, куда надо
   сходить, а угловая кнопка живёт поверх всех экранов. */
#bottom-nav-v2 .nav2-ai {
  flex: 0 0 auto !important;
  min-width: 62px !important;
  margin-left: 6px;
  border-radius: var(--r-md);
  /* ⚠ ЗЕЛЁНЫЙ ВЗЯТ ИЗ НАШЕГО ТОКЕНА, А НЕ ПОДОБРАН ГЛАЗОМ.
     Первый заход я собрал градиент «на вкус» (#17835A -> #1F9E68 -> #46BE87), и
     Данил сразу увидел: «цвет какой-то не наш». Он прав — замер показал, что
     фирменный зелёный это --vv-green #177652 (H=157°, S=67%), им же залита
     главная кнопка «Далее» rgb(23,118,82). Мой был светлее и мятнее.

     Теперь ступени считаются от токена: ТОН и НАСЫЩЕННОСТЬ ровно его, меняется
     только светлота. Средняя ступень #156E4D — это и есть наш зелёный.

     ⚠ СВЕТЛОТУ ОГРАНИЧИВАЕТ БЕЛАЯ ПОДПИСЬ «ИИ». Тянуть градиент светлее нельзя:
     на #20A573 белый текст даёт 3.14 при норме 4.5. Посчитанный потолок 31.5%
     светлоты, на нём белый = 4.55. Отсюда крайняя ступень #1A865D, не светлее.
     Контраст белого по ступеням: 8.80 / 6.23 / 4.55. Пилюля на баре: 7.36 / 5.21 / 3.81. */
  background: linear-gradient(145deg, #11553B 0%, #156E4D 52%, #1A865D 100%) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px -2px rgba(17, 85, 59, .42),
              inset 0 1px 0 rgba(255, 255, 255, .18);
}
#bottom-nav-v2 .nav2-ai svg {
  color: #fff !important;
  /* ⚠ ИСКРА — ЗАЛИВКА. Остальные иконки бара обводочные, и общий stroke-стиль
     превратил бы её в пустой контур звезды. Перебиваем явно. */
  fill: currentColor !important; stroke: none !important;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .22));
}
#bottom-nav-v2 .nav2-ai span { color: #fff !important; font-weight: 700; }
#bottom-nav-v2 .nav2-ai.active {
  background: linear-gradient(145deg, #0E472F 0%, #11553B 52%, #156E4D 100%) !important;
  box-shadow: 0 1px 4px -1px rgba(17, 85, 59, .5),
              inset 0 1px 0 rgba(255, 255, 255, .14);
}
#bottom-nav-v2 .nav2-ai:active { transform: translateY(1px) scale(.97); }
#bottom-nav-v2 .nav2-ai { transition: transform .14s ease, box-shadow .18s ease; }

/* ⚠ НОЧЬЮ ГАММА ДРУГАЯ, И ДЕЛО НЕ В КРАСОТЕ. Ночной токен --vv-green это светлая
   мята #3FC08B (H=155°, S=51%). Приложение само подписывает такие кнопки светлым
   текстом, и это даёт контраст 1.91-2.95 — давняя общая беда, повторять её здесь
   не буду. Беру ночной ТОН и НАСЫЩЕННОСТЬ, но светлоту читаемую.
   Вилка узкая с двух сторон: светлее — белая подпись перестаёт читаться,
   темнее — сама пилюля пропадает на почти чёрном баре (#236B4D против бара даёт
   2.72 при норме графики 3.0). Выбранные ступени держат обе границы:
   белый текст 6.40 / 5.37 / 4.52, пилюля на баре 2.72 / 3.24 / 3.85. */
.vv-theme-night #bottom-nav-v2 .nav2-ai {
  background: linear-gradient(145deg, #236B4D 0%, #277857 52%, #2B8460 100%) !important;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, .5),
              inset 0 1px 0 rgba(255, 255, 255, .13);
}
.vv-theme-night #bottom-nav-v2 .nav2-ai.active {
  background: linear-gradient(145deg, #1B5540 0%, #236B4D 52%, #277857 100%) !important;
}

/* ── «Дыхание» кнопки ИИ ───────────────────────────────────────────────────
   Данил: «может ему добавить какой-нибудь дыхание?». Дышит ОРЕОЛ, а не сама
   кнопка: качать размер элемента навигации нельзя — палец целится в цель,
   которая уезжает, и промах уводит человека не туда. Поэтому масштабируется
   псевдоэлемент ПОД кнопкой, а её собственная геометрия неподвижна.

   Ритм 4.2 с — примерно спокойный вдох-выдох. Быстрее выглядит как тревожное
   мигание и тянет взгляд на себя весь сеанс.

   ⚠ ГАСИМ, КОГДА ЧЕЛОВЕК УЖЕ В ЧАТЕ (.active). Звать туда, где он и так
   находится, — шум.
   ⚠ И ГАСИМ ПРИ prefers-reduced-motion. Для части людей постоянное движение на
   экране это не украшение, а причина закрыть приложение. */
/* ── КОЛЬЦО «АВРОРА» ВОКРУГ КНОПКИ ИИ (VVELL-740, владелец 07.09.2026: «кольцо
   аврора добавить в итоге на значок ИИ»; выбрано на странице вариантов VVELL-728).
   Кольцо — СНАРУЖИ кнопки, а не внутри: пилюля остаётся нашим зелёным с белой
   искрой, вокруг неё в 3 px течёт цветной градиент. Крутится не элемент (пилюля не
   круг, поворот выглядел бы кривым), а угол conic-gradient через @property — форма
   стоит, цвет идёт по кругу. Где @property нет — кольцо статичное, но есть.
   ⚠ prefers-reduced-motion НЕ слушаем намеренно: владелец на странице вариантов
   («всё статически стоит») — движение и есть замысел. Ритм 7 с — спокойный. */
@property --vv-aurora-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#bottom-nav-v2 .nav2-ai { position: relative; isolation: isolate; }
/* ⚠ СВЕЧЕНИЕ, А НЕ КОЛЬЦО (владелец, 08.09.2026: «надо было прям сделать светящуюся
   снаружи штуку, прям цветную под цвет того, что внутри — только она светить
   должна»). Первый заход рисовал жёсткое кольцо в 3 px. Теперь снаружи кнопки
   лежит размытое цветное пятно теми же цветами, что и градиент внутри: размытие
   9 px, за край на 7 px, — оно именно светит, а не обводит. Цвет по-прежнему
   идёт по кругу через угол conic-gradient (@property), форма стоит.
   Кнопка `overflow: visible` — иначе пятно срезается по границе пилюли
   (правило ниже по файлу ставило hidden ради внутренних «волн» ::after; те
   и так ограничены собственным inset). */
/* ⚠ Размытый conic-gradient за кнопкой (первый заход 08.09) давал пятно шире
   самой кнопки на полтора размера и залезал на «Знания» — а сама пилюля в нём
   терялась. Свечение теперь — четыре цветные тени по краю, цвета те же, что в
   заливке пилюли (зелёный → синий → фиолетовый → розовый → оранжевый), и лежат
   они там же, где эти цвета внутри: синий и фиолетовый сверху, розовый и
   оранжевый снизу. Тень дышит медленно (5 с). */
#bottom-nav-v2 .nav2-ai::before { display: none; }
@keyframes vvAurora { to { --vv-aurora-a: 360deg; } }
#bottom-nav-v2 .nav2-ai {
  box-shadow: -4px -3px 12px 1px rgba(29, 111, 209, .55),
               5px -3px 12px 1px rgba(109, 58, 230, .55),
               5px  5px 12px 1px rgba(201, 48, 127, .5),
              -5px  5px 12px 1px rgba(194, 87, 27, .5),
               0 0 3px rgba(23, 118, 82, .6) !important;
  animation: vvAiGlowIdle 5s ease-in-out infinite;
}
#bottom-nav-v2 .nav2-ai.active { animation: none; box-shadow: 0 0 8px 1px rgba(109, 58, 230, .35), 0 0 8px 1px rgba(29, 111, 209, .3) !important; }
@keyframes vvAiGlowIdle {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.08); }
}
/* «Думаем»: пока собирается корзина или отвечает чат, свечение разгорается и
   дышит — индикатор процесса вместо серого спиннера. Подпрыгивание кнопки
   снято (владелец, 08.09.2026: «убрать подпрыгивание у значка ИИ»): сама
   кнопка стоит на месте, движется только свет вокруг неё. */
#bottom-nav-v2 .nav2-ai.is-thinking { animation: vvAiGlowThink 1.3s ease-in-out infinite; }
@keyframes vvAiGlowThink {
  0%, 100% { box-shadow: -4px -3px 12px 1px rgba(29, 111, 209, .55), 5px -3px 12px 1px rgba(109, 58, 230, .55),
                         5px 5px 12px 1px rgba(201, 48, 127, .5), -5px 5px 12px 1px rgba(194, 87, 27, .5); }
  50%      { box-shadow: -6px -5px 20px 4px rgba(29, 111, 209, .8), 7px -5px 20px 4px rgba(109, 58, 230, .8),
                         7px 7px 20px 4px rgba(201, 48, 127, .75), -7px 7px 20px 4px rgba(194, 87, 27, .75); }
}

/* Бейдж на «Корзине»: сколько позиций собрано. Точка, а не число — числа в баре
   на четыре вкладки читаются как шум. */
#bottom-nav-v2 .nav2-badge {
  position: absolute; top: 6px; right: 50%; margin-right: -16px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vv-green); display: block;
}
#bottom-nav-v2 .nav2-badge[hidden] { display: none; }

/* ── Сегменты внутри вкладки ──────────────────────────────────────────────
   Собраны как ЕДИНЫЙ переключатель (дорожка + подсвеченная половина), а не
   две отдельные кнопки. Первый заход был именно двумя кнопками с рамками, и
   Данил сразу увидел, что не так: у неактивной рамка «уходит в пустоту» —
   одинокий контур висит на полосе другого цвета, ни к чему не привязанный.
   Дорожка связывает половины в один предмет, и рамки становятся не нужны.

   ⚠ ФОН ПОЛОСКИ ПРОЗРАЧНЫЙ. Стоял var(--paper) = rgb(251,247,239), а страница
   под ним rgb(241,234,221) — между шапкой и содержимым шла заметная светлая
   лента. Измерено, не на глаз.

   ⚠ ОТСТУПЫ 20px, КАК У СОДЕРЖИМОГО. Было 16 против 20 у экрана: переключатель
   на 4 px шире карточек под ним, и это читается как сбой вёрстки. */
.nav2-seg {
  display: flex; padding: 10px 20px 2px;
  background: transparent;
}
.nav2-seg[hidden] { display: none; }

/* ── Полоска — ЧАСТЬ ШАПКИ, а не первый элемент содержимого ────────────────
   Данил про экран «Знания»: «цвета не корректные какие-то, не выглядит красиво».
   Причина не в цветах. На «Знаниях» подряд шли ТРИ ряда переключателей:
   мой сегмент, «Продукты питания · Образ жизни» и «Мои цели / Всё / Темы».
   Разделительная линия шапки проходила НАД моей полоской, поэтому она попадала
   в одну зону с фильтрами содержимого и читалась как третий фильтр — при том
   что она переключает РАЗДЕЛ, а не отбор внутри него.

   Отдаём полоске нижнюю линию шапки и её же фон. Тогда сверху один блок-хром
   (шапка + сегмент), а фильтры содержимого начинаются ПОСЛЕ линии и ни с чем
   не спорят. Ровно так это устроено в системной навигации iOS: сегмент живёт
   в navigation bar, а не в содержимом.

   ⚠ В СЕЛЕКТОРЕ ОБА КЛАССА. Одного vv-seg-on мало: залипни он при выключенном
   режиме — у живых людей пропадёт линия под шапкой. vv-nav-v2 это исключает. */
body.vv-nav-v2.vv-seg-on header.app-header {
  border-bottom-color: transparent !important;
  padding-bottom: 8px !important;
}
/* ⚠ ПОЛОСКА ЛИПНЕТ ПОД ШАПКОЙ (16.08.2026). Шапка объявлена sticky с самого начала,
   но НЕ ЛИПЛА: `html, body { overflow-x: hidden }` в app.css делал body контейнером
   прокрутки и убивал sticky у всех потомков (правка там же, через @supports clip).
   Замер на «Возрасте» (лента 3923 px): человек прокручивал и оставался без единого
   признака, где он, — уезжал весь блок-хром целиком.
   Теперь наверху остаётся то, что отвечает на вопрос «где я»: сегмент раздела.
   `top` берётся из ИЗМЕРЕННОЙ высоты шапки (--vv-hdr-h ставит _vvSyncHeaderH), а не
   из зашитого числа: при увеличенном системном шрифте шапка выше и полоска
   налезла бы на неё.
   ⚠ ФОН ОБЯЗАТЕЛЕН. У полоски он был `transparent` (и это осознанное решение —
   var(--paper) давал светлую ленту): у липкого элемента прозрачный фон означает,
   что содержимое проезжает СКВОЗЬ подписи. var(--bg) — цвет самой страницы,
   поэтому ленты по-прежнему нет, а просвечивания уже нет тоже. */
body.vv-nav-v2.vv-seg-on #nav2-seg {
  position: sticky; top: var(--vv-hdr-h, 67px); z-index: 39;
  background: var(--bg);
}
/* ── Переключатель «Продукты питания · Образ жизни» ────────────────────────
   ⚠ ЭТО ДЕФЕКТ ПРОДА, А НЕ НОВОЙ НАВИГАЦИИ. Проверено снимком в обоих режимах:
   выглядит одинаково криво и сейчас, у живых людей. У .lh-tab display:block,
   иконка идёт строкой вместе с текстом — «Продукты питания» переносится на две
   строки, кнопка вырастает до 62 px, а соседняя «Образ жизни» остаётся в одну.
   Половины одного переключателя разной высоты, иконка вплотную к слову.

   ⚠ ПРАВКА НАРОЧНО ЗАПЕРТА В body.vv-nav-v2. Чинить прод заодно с задачей про
   навигацию — это менять живым людям то, о чём не договаривались. Данил
   посмотрит в тест-режиме; снять замок = убрать префикс body.vv-nav-v2 из двух
   селекторов ниже, больше ничего. Ширины хватает: 171 px против ~138 нужных. */
body.vv-nav-v2 #screen-lifehacks .lh-tab {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; line-height: 1.25;
  /* Замер, а не подбор: кнопка 171, боковые отступы были 14+14 → под содержимое
     143. Нужно 147 = иконка 20 + зазор 6 + «Продукты питания» 121. Не хватало
     четырёх пикселей — из-за них и шёл перенос. Отступы 10+10 дают 151, запас 4.
     nowrap — страховка: подрастёт шрифт от системного масштаба, текст обрежется
     многоточием, но кнопка не развалится на две строки. */
  padding-left: 10px; padding-right: 10px;
  white-space: nowrap;
}
body.vv-nav-v2 #screen-lifehacks .lh-tab svg { flex: 0 0 auto; }

body.vv-nav-v2.vv-seg-on .nav2-seg {
  padding: 0 20px 10px;
  background: var(--dv2-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line-soft);
}

.nav2-seg-track {
  display: flex; flex: 1; gap: 2px; padding: 3px;
  border-radius: var(--r-sm);
  background: var(--bg-warm);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
}
.nav2-seg-btn {
  /* ⚠ 44, А НЕ 40 (дефект 15, 14.08.2026). Верхняя пара вкладок живёт ВНЕ
     `.screen`, поэтому приёмка снимками её не видела вовсе и десять прогонов
     подряд писала «замечаний 0». Обход расширен — и эти кнопки оказались
     первыми, кто ниже нормы. Псевдоэлемент тут не годится: половины стоят
     вплотную, и невидимая зона воровала бы нажатия у соседней вкладки. */
  flex: 1; min-height: 44px; padding: 10px 10px;
  border: 0; border-radius: var(--r-xs); background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink-3); cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Выбранная половина — «поднятая» пластина, как в системном сегмент-контроле:
   светлее дорожки плюс мягкая тень. Так видно даже боковым зрением. */
.nav2-seg-btn.is-on {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 .5px rgba(0, 0, 0, .04);
}
.nav2-seg-btn:active { opacity: .7; }

/* ⚠ НОЧЬЮ ПАРА ЦВЕТОВ ПЕРЕВОРАЧИВАЛАСЬ. Дорожка брала --bg-warm, выбранная
   половина --paper. Днём paper светлее warm — половина «приподнята», как и
   задумано. Ночью paper (28,39,33) ТЕМНЕЕ warm (35,47,40): выбранная половина
   выглядела вдавленной и почти не отличалась от дорожки. Замерено.
   Поэтому ночью задаём пару явно, слоями поверх фона: дорожка уходит вглубь,
   выбранная половина всплывает. Контраст текста проверен: 10:1 и 5.4:1. */
.vv-theme-night .nav2-seg-track {
  background: rgba(0, 0, 0, .28);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.vv-theme-night .nav2-seg-btn.is-on {
  background: rgba(255, 255, 255, .10);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45), inset 0 0 0 .5px rgba(255, 255, 255, .10);
}
/* Касание 44 px добираем прозрачной областью: сама пластина 40 px, иначе
   переключатель выглядит толстой плашкой и спорит с содержимым. */
.nav2-seg-track { position: relative; }
.nav2-seg-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: 0; right: 0; pointer-events: none;
}
.nav2-seg { padding-bottom: 6px; }

/* ── «Добавить еду» на «Сводке» — ТОЛЬКО тестовый режим ────────────────────
   Селектор начинается с body.vv-nav-v2 намеренно, хотя разметку и так гейтит JS:
   два независимых замка на одну дверь стоят двух строк, а починка «кнопка уехала
   всем» — рабочего дня. Ровно это уже случалось с самим баром 10.08.

   ЦВЕТА ЗАДАНЫ ЧИСЛАМИ, А НЕ ТОКЕНОМ. Ночью --vv-green-dark становится СВЕТЛЫМ
   (#3FE07A), и белый текст на нём дал бы 1,6:1 — нечитаемо. Пара стопов подобрана
   так, чтобы белый проходил 4,5:1 на ЛЮБОЙ точке градиента: посчитано по WCAG,
   #0E5F41 → 7,69:1, #17835A → 4,74:1. Светлее #17835A подниматься нельзя.

   Обе строки чисто белые: подпись оттенком #E8F5EE давала бы 4,11:1 — не проходит.
   Иерархия держится размером и насыщением, а не приглушённым цветом. */
body.vv-nav-v2 .nav2-addfood {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; margin: 0 0 14px; padding: 12px 14px;
  border: 0; border-radius: var(--r-md, 16px);
  background: linear-gradient(145deg, #0E5F41 0%, #17835A 100%);
  color: #fff; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 3px 12px -4px rgba(14, 95, 65, .5), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .16s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
body.vv-nav-v2 .nav2-addfood:active { transform: scale(.985); }
body.vv-nav-v2 .nav2-addfood .nav2-addfood-ic {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
body.vv-nav-v2 .nav2-addfood .nav2-addfood-ic .wh-ic {
  width: 20px; height: 20px; color: #fff; vertical-align: 0;
}
body.vv-nav-v2 .nav2-addfood .nav2-addfood-tx { flex: 1; min-width: 0; }
body.vv-nav-v2 .nav2-addfood .nav2-addfood-t {
  display: block; font-size: 15.5px; font-weight: 800; line-height: 1.2; color: #fff;
}
body.vv-nav-v2 .nav2-addfood .nav2-addfood-s {
  display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500;
  line-height: 1.25; color: #fff;
}
/* Ночью меняется только тень: сам градиент тёмно-зелёный и на тёмном фоне не
   «фонарит», а зелёное свечение из дня на ночном экране читается как грязь.
   ⚠ Класс темы висит на <html> (documentElement), а не на body — селектор
   .vv-theme-night body.vv-nav-v2, а не body.vv-theme-night. */
.vv-theme-night body.vv-nav-v2 .nav2-addfood {
  box-shadow: 0 3px 12px -4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* ══════════════════════════════════════════════════════════════════════════
   ЕДИНЫЙ РИСОВАЛЬЩИК ГРАФИКОВ — .vvch-*  (10.08.2026)
   Спецификация: docs/CHART_SPEC_2026-08-10.md, разделы 2, 3, 5, 8, 9, 10.
   Разметку строит static/js/vvchart.js, поэтому имена классов менять нельзя:
   JS пишет их литералами и мимо переименованного класса просто пролетит.

   ПОЧЕМУ ВЕСЬ БЛОК ЗДЕСЬ, А НЕ В palette_sand.css.
   Спека предлагала положить токены --vvch-* в palette_sand.css. Держим их
   рядом с компонентными правилами: palette_sand.css грузится ПОСЛЕ premium.css
   и переопределяет только те токены, которые объявляет сам. Ни одного --vvch-*
   он не объявляет — значит перебить нас ему нечем, а график остаётся одним
   куском, который читается и снимается целиком.

   ЗАМЕРЕНО getComputedStyle НА ЖИВОЙ СТРАНИЦЕ (не «на глаз», не по исходникам):
     день: --paper #FBF7EF (L=0.9326)  --bg-warm #F5EFE3 (L=0.8669) -> paper СВЕТЛЕЕ
     ночь: --paper #1C2721 (L=0.0181)  --bg-warm #232F28 (L=0.0254) -> paper ТЕМНЕЕ
   Именно из-за этого переворота кольцо точки и заливка полой точки берут
   --vvch-dot-ring (= цвет поверхности), а не белый: ночью #fff даст дырку.
   Фактический фон графика в обоих местах — --paper: у .wh-trend замерено
   rgb(28,39,33) = #1C2721, у листа .vv-sheet-card он же. Все цифры контраста
   ниже посчитаны по WCAG 2.1 именно на --paper.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Токены. Литеральный hex, НЕ var(--vv-green) ───────────────────────────
   var() на :root вычислился бы один раз против ДНЕВНОГО значения и достался
   ночи уже вычисленным — ночью получился бы дневной зелёный. На этих граблях
   проект уже стоял, см. комментарий palette_sand.css:162-166. */
:root {
  /* ⚠ ПЯТЬ СТУПЕНЕЙ, А НЕ ТРИ (11.08, просьба Данила: «ярко-зелёный если супер,
     слегка зелёный выше среднего, среднее между рыжим и зелёным, ниже жёлто-рыжий,
     в конце красный»). Все пять посчитаны на бумаге, норма нетекстовой графики 3.0. */
  --vvch-sup:       #0E8B4C;  /* 4.08 — заметно выше цели */
  --vvch-good:      #177652;  /* 5.24 — на цели, наш фирменный */
  --vvch-warn:      #B0701C;  /* 3.79 — ниже цели, рыжий */
  /* ⚠ ЖЁЛТЫЙ, А НЕ ОЛИВКА (11.08, замечание Данила: «цвета можно на тона как у
     нас, но зелёный жёлтый красный»). #8A6200 при контрасте 5.13 читался
     оливково-болотным и не давал средней ступени в тройке светофора.
     #A87B00 — 3.57 на бумаге, норма нетекстовой графики 3.0. Светлее не берём:
     на 3.11 линия в 2px на почти белом уже теряется. */
  --vvch-mid:       #8C7A21;  /* 3.99 — «серединка», хаки между зелёным и рыжим */
  /* ⚠ КРАСНЫЙ, А НЕ КОРИЧНЕВЫЙ. #9C562C читался «жжёной глиной» — тревоги в
     нём не было, а низкая ступень должна отличаться от средней не оттенком, а
     смыслом. #B23A2E — 5.56, тёплый (в песочной палитре холодный #B3261E
     выглядит чужим). */
  --vvch-low:       #B23A2E;  /* 5.56 */
  --vvch-flat:      #5E6B62;  /* 5.23 — вес/ккал, направления «лучше-хуже» нет */
  --vvch-grid:      #E0D6C3;  /* 1.35 — декор, см. «про сетку» ниже */
  --vvch-grid-soft: #EBE3D5;  /* 1.19 — декор */
  --vvch-axis:      #606A61;  /* 5.27 — ТЕКСТ, норма 4.5 */
  --vvch-gap:       #7C877D;  /* 3.50 — не текст, норма 3.0 */
  --vvch-target:    #9C562C;  /* 5.20 — линия и её подпись словом */
  --vvch-dot-ring:  #FBF7EF;  /* = --paper дня */

  /* ⚠ ТОНА ДЛЯ ТЕКСТА — ОТДЕЛЬНЫЕ, И ЭТО НЕ ПЕДАНТИЗМ. Пять тонов выше
     посчитаны как ГРАФИКА (норма 3.0): линия в 2 px и точка в 4 px. Числа у
     точек в двухлинейном графике — это ТЕКСТ кеглем 10.5, у него норма 4.5, и
     днём три тона из пяти её не проходили: sup 4.08, warn 3.79, mid 3.99.
     Ночью те же классы дают 8.53 / 6.55 / 7.47 — нарушение было ЧИСТО ДНЕВНОЕ,
     поэтому проверка «в обеих темах» его и не ловила: одна тема проходила.
     Оттенок сохранён, опущена только светлота. */
  --vvch-sup-t:  #0D8147;  /* 4.63 — было 4.08 */
  --vvch-good-t: #177652;  /* 5.24 — уже проходит, дублируем ради единообразия */
  --vvch-warn-t: #9B6319;  /* 4.69 — было 3.79 */
  --vvch-mid-t:  #7F6F1E;  /* 4.68 — было 3.99 */
  --vvch-low-t:  #B23A2E;  /* 5.56 */
  --vvch-flat-t: #5E6B62;  /* 5.23 */
}
/* :root.vv-theme-night даёт специфичность (0,2,0) и бьёт любой :root (0,1,0)
   независимо от порядка файлов. Это не перестраховка: класс темы висит на
   <html> (app/templates/base.html:32, _mvp_body_design.html:461), то есть на
   ТОМ ЖЕ элементе, что и :root, — там побеждает не наследование, а каскад.
   Второй селектор оставлен на случай, если тему когда-нибудь перевесят на body. */
:root.vv-theme-night,
.vv-theme-night {
  --vvch-sup:       #4ED89B;  /* 8.53 */
  --vvch-warn:      #E09A55;  /* 6.55 */
  --vvch-good:      #3FC08B;  /* 6.70 на ночном --paper. НЕ #249D6F: тот 4.50,
                                 впритык, и на линии в 2 px это видно */
  --vvch-mid:       #C9B45C;  /* 7.47 — ночная «серединка» */
  /* Ночью тоже красный, а не оранжевый: #E09055 стоял слишком близко к жёлтому
     и две нижние ступени сливались. #E8705F — 5.08. */
  --vvch-low:       #E8705F;  /* 5.08 */
  --vvch-flat:      #B3BEB4;  /* 8.04 */
  --vvch-grid:      #2C3A32;  /* 1.29 — декор */
  --vvch-grid-soft: #24302A;  /* 1.12 — декор */
  --vvch-axis:      #818E84;  /* 4.51 — ТЕКСТ, ровно на норме 4.5 */
  --vvch-gap:       #6E7A70;  /* 3.44 — не текст, норма 3.0 */
  --vvch-target:    #E09055;  /* 6.09 */
  --vvch-dot-ring:  #1C2721;  /* = --paper ночи, НЕ белый */

  /* Ночью текстовые тона совпадают с графическими: замер на ночном --paper даёт
     8.53 / 6.70 / 6.55 / 7.47 / 5.08 / 8.04 — все выше 4.5. Затемнять нечего,
     но токены обязаны существовать в ОБОИХ блоках, иначе ночь унаследует
     дневное значение (те самые грабли, из-за которых цвета тут литеральные). */
  --vvch-sup-t:  #4ED89B;
  --vvch-good-t: #3FC08B;
  --vvch-warn-t: #E09A55;
  --vvch-mid-t:  #C9B45C;
  --vvch-low-t:  #E8705F;
  --vvch-flat-t: #B3BEB4;
}

/* ── Контейнеры ───────────────────────────────────────────────────────────
   Три варианта отличаются геометрией viewBox (константы VV_CH_BOX в JS),
   а здесь — только отступами и полом высоты. Пол нужен, чтобы блок не прыгал
   при переключении периода и при переходе «пусто -> график». */
.vvch { position: relative; }
.vvch-svg {
  width: 100%; height: auto; display: block;
  /* тап по полю графика не должен выделять соседний текст */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Иначе SVG уедет на дефолтный шрифт браузера и подписи разойдутся с вёрсткой */
.vvch-svg text { font-family: inherit; }

.vvch--mini  { margin-top: 2px; }
.vvch--card  { margin-top: 6px; }
.vvch--sheet { margin-top: 6px; min-height: 200px; }

/* ⚠ ТОЛЩИНА ЛИНИЙ НЕ МАСШТАБИРУЕТСЯ.
   viewBox 320 единиц растягивается по ширине контейнера: в листе (~358 px)
   коэффициент 1.12, а в карточке «За 7 дней» (~174 px) — 0.54. Без этого
   свойства линия 2 стала бы 1.09 CSS-px, сетка 1 -> 0.54 px (подпиксель,
   местами исчезает), а кольцо полой точки 1.6 -> 0.87 px — точка «низкого»
   значения переставала отличаться от залитой, то есть ломался канал доступности
   «форма вместо цвета». Толщина фиксируется в CSS-пикселях. */
.vvch-line, .vvch-grid, .vvch-grid-v, .vvch-target, .vvch-gap, .vvch-dot {
  vector-effect: non-scaling-stroke;
}

/* ── Сетка и подписи ──────────────────────────────────────────────────────
   Про контраст сетки (1.35 днём / 1.29 ночью) — это осознанно. Сетка не текст
   и НЕ единственный носитель смысла: уровни подписаны числами контрастом
   5.27/4.51. Направляющая с контрастом 3:1 спорила бы с данными.
   Посчитано отдельно: под заливкой alpha .18 сетка падает до 1.05 днём и 1.09
   ночью — практически исчезает. Поэтому заливка обязана уходить в прозрачность
   вниз (см. .vvch-a-*), и в нижней трети поля сетка снова чистая. */
.vvch-grid   { stroke: var(--vvch-grid);      stroke-width: 1; fill: none; }
.vvch-grid-v { stroke: var(--vvch-grid-soft); stroke-width: 1; fill: none; }
.vvch-axis   { fill: var(--vvch-axis); font-size: 10px; }

/* ── Ломаная и заливка ────────────────────────────────────────────────────
   ⚠ ЗДЕСЬ НЕТ И НЕ ДОЛЖНО БЫТЬ `stroke:` у .vvch-line и `fill:` у .vvch-area.
   Градиент приезжает презентационным атрибутом stroke="url(#vvch-g-N)" /
   fill="url(#vvch-a-N)", а презентационный атрибут проигрывает ЛЮБОМУ правилу
   CSS. Одна строка `stroke: var(--vvch-good)` тут — и градиент по значению
   молча перестаёт работать во всём приложении. */
.vvch-line {
  fill: none; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.vvch-area { stroke: none; }
/* Специфичность (0,2,0) — чтобы тон .vvch-t-* (0,1,0) не залил внутренность
   ломаной: у метрик без направления линия несёт класс тона и заливку тоже. */
.vvch-svg .vvch-line { fill: none; }

/* ── Точки ────────────────────────────────────────────────────────────────
   Точка = день. Радиусы задаёт JS (r=3.0 / 2.2 / 3.4 / 2.6), здесь только
   заливка, кольцо и толщины. */
.vvch-svg .vvch-dot { stroke-width: 0; }
/* Значение ниже цели рисуется ПОЛОЙ точкой. Это не украшение, а второй канал
   смысла: форму видно и в чёрно-белой печати, и при любой форме дальтонизма.
   Заливка = цвет поверхности (--vvch-dot-ring), тон уходит в обводку. */
.vvch-svg .vvch-dot--hollow { fill: var(--vvch-dot-ring); stroke-width: 1.6; }
/* Последняя точка отделяется от линии кольцом цвета поверхности.
   paint-order: stroke — обводка рисуется ПОД заливкой, иначе кольцо съедает
   внешнюю половину самой точки и та выглядит меньше остальных. */
.vvch-svg .vvch-dot--last:not(.vvch-dot--hollow) {
  stroke: var(--vvch-dot-ring); stroke-width: 2; paint-order: stroke;
}
/* Полая И последняя одновременно: кольцо оставляем ТОНОМ (иначе точка стала бы
   поверхностью на поверхности, то есть невидимой), добираем только толщиной. */
.vvch-svg .vvch-dot--hollow.vvch-dot--last { stroke-width: 2; }

/* ── Целевая линия ────────────────────────────────────────────────────────
   Подписана словом «цель 7.5» — смысл читается без цвета (канал доступности 2). */
.vvch-target     { stroke: var(--vvch-target); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.vvch-target-lbl { fill: var(--vvch-target); font-size: 10px; }   /* текст: 5.20 / 6.09 */

/* ── Засечка пропуска ─────────────────────────────────────────────────────
   Штрих под нижней кромкой поля на месте дня без замера. 3.50/3.44 — это не
   текст, норма нетекстового контраста 3.0 выполнена. Смысл продублирован
   словами в .vvch-note («18 дней без данных») контрастом 5.27/4.51. */
.vvch-gap { stroke: var(--vvch-gap); stroke-width: 1; }

/* ── Зона тапа по точке ───────────────────────────────────────────────────
   Один прозрачный прямоугольник на всё поле (156 px в варианте sheet), а не
   колонка на день: на 90 днях колонка была бы 3 px шириной и правило 44 px
   нарушалось бы по построению. Ближайший день считает vvChartIndexAt(). */
.vvch-hit { fill: transparent; cursor: pointer; }

/* ── Подписи под графиком ─────────────────────────────────────────────────
   Все четыре — обычный текст на --paper, контраст посчитан:
     .vvch-note / .vvch-mm  = --ink-3: 5.27 днём / 4.51 ночью
     .vvch-pick / .vvch-empty = --ink-2: 5.23 днём / 8.04 ночью
   ⚠ Норма 4.5 держится ИМЕННО НА --paper. На --bg-warm ночной --ink-3 даёт
   4.07 — ниже нормы, посчитано. Поэтому график не кладём на тёплую вложенную
   поверхность; страховка для единственной такой соседки — ниже. */
.vvch-note  { margin-top: 6px; font-size: 12px;   color: var(--ink-3); line-height: 1.4; }
.vvch-mm    { margin-top: 2px; font-size: 12px;   color: var(--ink-3); }
/* min-height, чтобы строка не появлялась из ниоткуда и не дёргала лист при
   первом тапе: до тапа в ней уже лежит последний день. */
.vvch-pick  { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); min-height: 18px; }
.vvch-empty { padding: 18px 4px; font-size: 13px; color: var(--ink-2); text-align: center; line-height: 1.45; }
/* Страховка на тёплой поверхности: --ink-2 там 4.88 днём и 7.25 ночью. */
.vv-ms-trend .vvch-note, .vv-ms-trend .vvch-mm { color: var(--ink-2); }

/* ── Мини-график как кнопка ───────────────────────────────────────────────
   ⚠ ЛОВУШКА КАСКАДА. .vvch-tap вешается ВМЕСТЕ с .wh-trend
   (<button class="vvch-tap wh-trend">). Полный сброс background/border/padding
   из спецификации съел бы карточку: premium.css грузится после design_v2.css,
   и при равной специфичности (0,1,0) победил бы сброс, а не .wh-trend.
   Поэтому «голая кнопка» — только когда карточного класса нет. Появится второй
   карточный носитель .vvch-tap — его надо дописать в :not(). */
.vvch-tap {
  display: block; width: 100%; min-height: 44px; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.vvch-tap:not(.wh-trend) { background: none; border: 0; padding: 0; }
/* Отклик на нажатие — сдвигом, а не opacity: opacity гасит и текст тоже
   (ровно этим болел .wh-trend-empty, см. ниже). */
.vvch-tap:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .vvch-tap:active { transform: none; } }

/* ── Тон значения ─────────────────────────────────────────────────────────
   Одна пара классов и на ломаную (обводка), и на точку (заливка).
   `flat` — не «нейтральный серый по бедности», а осознанный отказ красить:
   у веса и калорий направления «лучше-хуже» нет, и приложение не вправе
   решать это за человека (то же самое записано на сервере). */
.vvch-t-sup  { stroke: var(--vvch-sup); fill: var(--vvch-sup); }
.vvch-t-warn { stroke: var(--vvch-warn); fill: var(--vvch-warn); }
.vvch-t-good { stroke: var(--vvch-good); fill: var(--vvch-good); }
.vvch-t-mid  { stroke: var(--vvch-mid);  fill: var(--vvch-mid);  }
.vvch-t-low  { stroke: var(--vvch-low);  fill: var(--vvch-low);  }
.vvch-t-flat { stroke: var(--vvch-flat); fill: var(--vvch-flat); }

/* Тон в <stop> градиента ломаной: по одному stop на непустую точку. */
.vvch-s-sup  { stop-color: var(--vvch-sup); }
.vvch-s-warn { stop-color: var(--vvch-warn); }
.vvch-s-good { stop-color: var(--vvch-good); }
.vvch-s-mid  { stop-color: var(--vvch-mid);  }
.vvch-s-low  { stop-color: var(--vvch-low);  }
.vvch-s-flat { stop-color: var(--vvch-flat); }

/* Заливка ОДНОЦВЕТНАЯ, тоном последней точки, и уходит в прозрачность вниз.
   Разноцветная площадь читалась бы как «зоны», которых в данных нет, а
   непрозрачный низ давал бы у разрывов вертикальные стенки — график
   превращался в столбики (именно это видно на docs/shots_v2/spec_sheet_night.png).
   Нижний stop получает stop-opacity:0 инлайном из JS — инлайн бьёт класс. */
.vvch-a-sup  { stop-color: var(--vvch-sup); stop-opacity: .18; }
.vvch-a-warn { stop-color: var(--vvch-warn); stop-opacity: .18; }
.vvch-a-good { stop-color: var(--vvch-good); stop-opacity: .18; }
.vvch-a-mid  { stop-color: var(--vvch-mid);  stop-opacity: .18; }
.vvch-a-low  { stop-color: var(--vvch-low);  stop-opacity: .18; }
.vvch-a-flat { stop-color: var(--vvch-flat); stop-opacity: .18; }

/* ── Полосы сравнения (vvChartBarsHtml, вкладка «Цели», 16.08.2026) ───────
   Токены НЕ новые: дорожка — та же сетка, что у линейных графиков, заливка —
   фирменный «на цели». Второй палитры под второй тип картинки не заводим.
   ⚠ Контраст текста считаем на --paper: подпись цели это ТЕКСТ (норма 4.5),
   поэтому она берёт --ink-2 (5.23 днём / 8.04 ночью), а не декоративный
   --vvch-axis. Число справа — тем же цветом: оно и есть данные.
   ⚠ Ноль подписывается ТУСКЛЫМ (--ink-3, 5.27/4.51 — тоже выше нормы), но
   подписывается: полоса нулевой длины без числа читается как «нет данных»,
   а это ровно наоборот — данные есть, и они говорят «ничего не сделано». */
.vvch--bars { margin-top: 8px; }
.vvch-bar-lbl { fill: var(--ink-2); font-size: 12px; }
.vvch-bar-val { fill: var(--ink-2); font-size: 12px; font-weight: 700; }
.vvch-bar-val.is-zero { fill: var(--ink-3); font-weight: 600; }
.vvch-bar-track { fill: var(--vvch-grid); }
.vvch-bar-fill  { fill: var(--vvch-good); }

/* ── Разрежённая ось: график анализа (vvChartLabHtml, 19.08.2026) ─────────
   ⚠ НОВЫХ ЦВЕТОВ ЗДЕСЬ НЕТ НИ ОДНОГО. Все семь классов собраны из тех же
   токенов --vvch-*, что и линейные графики: фоновая полоса «норма» — та же
   сетка, «цель» — фирменный «на цели», «риск» — тот же тревожный тон, что у
   низкого значения. Второй палитры под второй тип картинки не заводим — этим
   уже болели три разошедшихся рисовальщика.

   ⚠ ПРОЗРАЧНОСТЬ ВМЕСТО ОТДЕЛЬНЫХ СВЕТЛЫХ ЦВЕТОВ — СОЗНАТЕЛЬНО. Полосе нужен
   тот же оттенок в обеих темах; отдельный «светло-зелёный» пришлось бы
   заводить дважды и он разъехался бы с основным при первой правке палитры.
   opacity держит связь автоматически.

   ⚠ СМЫСЛ НЕ КОДИРУЕТСЯ ОДНИМ ЦВЕТОМ. У каждой полосы есть подпись СЛОВОМ в
   легенде под графиком («референс лаборатории 15–200 нг/мл»), у каждой
   лаборатории — своя ФОРМА точки, а не свой цвет. Экран обязан читаться в
   ч/б и при любой форме дальтонизма. */
.vvch-lab-zone { stroke: none; }
.vvch-lab-zone--lab_ref { fill: var(--vvch-flat); opacity: .10; }
.vvch-lab-zone--target  { fill: var(--vvch-good); opacity: .14; }
.vvch-lab-zone--risk    { fill: var(--vvch-low);  opacity: .10; }

/* Референс С БЛАНКА ЧЕЛОВЕКА. Границы — штриховые линии, между ними лёгкая
   заливка (21.08.2026, VVELL-374: «рефы сверху снизу блоками заливкой должны
   быть, где верх низ референса и моя точка»). Двух линий было мало: пороги
   видно, а полосу между ними — нет, и попадает ли туда своё число, приходилось
   вычислять глазом.
   ⚠ Заливка НАМЕРЕННО бледнее наших полос (.06 против .10-.14) и другого цвета:
   это НЕ наша шкала, а бумага его лаборатории, и путать их нельзя ни на секунду.
   Штриховые края оставлены — по ним читаются точные границы. */
.vvch-lab-ownband { fill: var(--vvch-target); opacity: .06; stroke: none; }
.vvch-lab-own {
  stroke: var(--vvch-target); stroke-width: 1; stroke-dasharray: 2 3; fill: none;
  vector-effect: non-scaling-stroke;
}

/* Отрезок между соседними замерами. Сплошной — внутри одной лаборатории;
   пунктирный — между разными: сравнивать такие числа напрямую некорректно,
   и линия обязана это показывать, а не сглаживать. */
.vvch-lab-seg {
  stroke: var(--vvch-flat); stroke-width: 2; fill: none;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.vvch-lab-seg--break { stroke-dasharray: 3 4; stroke-width: 1.5; }

/* Коридор измерения: усик 95 % вокруг одной точки. Тонкий и тусклый —
   это неопределённость, а не данные. */
.vvch-lab-corr {
  stroke: var(--vvch-gap); stroke-width: 1; vector-effect: non-scaling-stroke;
}

/* Точка замера. Форма приезжает из разметки и кодирует лабораторию. */
.vvch-lab-dot { fill: var(--vvch-flat); stroke: none; }
.vvch-lab-dot.is-last { fill: var(--vvch-good); }
.vvch-lab-dot .vvch-lab-cross {
  fill: none; stroke: var(--vvch-flat); stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}
.vvch-lab-dot.is-last .vvch-lab-cross { stroke: var(--vvch-good); }

/* Дорожка качества питания — ОТРЕЗОК ЗА ПРОМЕЖУТОК, а не точка в день. */
.vvch-lab-food {
  stroke: var(--vvch-mid); stroke-width: 3; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Легенда словами. Контраст текста считаем на --paper: --ink-3 даёт
   5.27 днём / 4.51 ночью — норма 4.5 выполняется. */
.vvch-lab-legend {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px;
  font-size: 11.5px; line-height: 1.35; color: var(--ink-3);
}
.vvch-lab-leg { display: inline-flex; align-items: center; gap: 5px; }
.vvch-lab-sw { width: 12px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.vvch-lab-sw--lab_ref { background: var(--vvch-flat); opacity: .30; }
.vvch-lab-sw--target  { background: var(--vvch-good); opacity: .35; }
.vvch-lab-sw--risk    { background: var(--vvch-low);  opacity: .30; }
.vvch-lab-sw--food    { background: var(--vvch-mid); height: 3px; }
/* Референс С БЛАНКА: штрих, а не заливка — и в легенде тоже, чтобы образец
   совпадал с тем, что нарисовано на поле. */
.vvch-lab-sw--own {
  height: 0; border-top: 2px dashed var(--vvch-target); border-radius: 0;
}
.vvch-lab-mk { width: 12px; height: 12px; flex-shrink: 0; }
.vvch--lab { min-height: 0; }

/* ── Лист метрики: место под большой график ───────────────────────────────
   Было 84 px (premium.css:428) под спарклайн. Для варианта sheet (viewBox
   320x190) этого мало, и лист дёргался при каждом переключении периода:
   пока грузится ответ, блок схлопывался. */
.vv-sheet-chart { min-height: 200px; }

/* ── Переключатель периода: касание 44 px по факту ────────────────────────
   ⚠ Комментарий premium.css:430-434 («высота 32 px здесь допустима») больше
   не действует и заменён на месте. Пилюля остаётся визуально 32 px — толстая
   плашка спорила бы с содержимым листа, — но зона указателя добирается
   прозрачным псевдоэлементом: 6 + 32 + 6 = 44. Правило выполняется по факту,
   а не «почти». Псевдоэлемент принадлежит самой кнопке, поэтому тап по нему
   попадает в кнопку; горизонтально не растём, иначе зоны соседних кнопок
   (gap 4 px) начали бы перекрываться. */
.vv-ms-range-btn { position: relative; }
/* ⚠ -7px, А НЕ -6px, И ЭТО НЕ ПРИДИРКА. Псевдоэлемент отсчитывается от ПАДДИНГ-БОКСА,
   а у пилюли есть рамка 1px сверху и снизу: 32 - 2 = 30, и 30 + 6 + 6 давало 42.
   Замер elementFromPoint по центру «Недели» подтверждал: зона 42.75 px вместо 44.
   30 + 7 + 7 = 44 по факту указателя. */
.vv-ms-range-btn::after { content: ''; position: absolute; inset: -7px 0; }
/* ⚠ ПОСЛЕДНИЙ ПИКСЕЛЬ ЗОНЫ СЪЕДАЛА ОБЁРТКА ГРАФИКА. .vvch{position:relative} лежит
   в DOM ПОЗЖЕ кнопок, и при равном z-index красится и ловит указатель поверх ::after:
   замер elementFromPoint по центру «Недели» давал 42.75 px вместо 44. Поднимаем сам
   переключатель на слой выше — псевдоэлемент снова принимает тап целиком. */
.vv-ms-range { position: relative; z-index: 1; }

/* ⚠ НАЙДЕНО ЗАМЕРОМ, В СПЕЦИФИКАЦИИ ЭТОГО НЕТ — но это подпись графика,
   значит наша зона ответственности. Выбранная кнопка периода ночью брала
   --vv-green-dark (#249D6F) на тинте rgba(63,192,139,.14) поверх --paper;
   getComputedStyle отдаёт ровно эту пару, фактический фон = #213C30,
   контраст 3.49 при норме 4.5 — активный период читался хуже неактивных.
   Днём та же пара даёт 5.65, поэтому правим ТОЛЬКО ночь: --vv-green
   (#3FC08B) на том же тинте = 5.20. Зелёный сохраняем — он и есть признак
   «выбрано»; --vv-green-soft (6.46) на 12 px уже спорит с тихим листом. */
:root.vv-theme-night .vv-ms-range-btn.is-on,
.vv-theme-night .vv-ms-range-btn.is-on { color: var(--vv-green); }

/* ── Починка существующего нарушения контраста ────────────────────────────
   Спека отмечала 3.50/3.44 у .wh-trend-arw и .wh-trend-none (design_v2.css:4121,
   4123 сидят на --wh-ink-3 -> --dv2-muted-2 -> --sand-ink-4). Замер на живой
   странице показал другое: palette_sand.css:300 уже поднимает --wh-ink-3 внутри
   .wh-home до --dv2-muted, и getComputedStyle отдаёт #606A61 днём / #818E84
   ночью, то есть 5.27/4.51. Но это верно ТОЛЬКО внутри .wh-home/.wh-detail —
   за их пределами тот же класс снова падает на 3.50/3.44. Прибиваем цвет к
   --ink-3 явно, независимо от контейнера.

   А вот настоящая дыра, которой в спеке нет: .wh-trend-empty{opacity:.65}
   гасит КАРТОЧКУ ЦЕЛИКОМ вместе с текстом «мало данных». Посчитано:
   #606A61 при .65 на #FBF7EF даёт фактические #969B93 -> контраст 2.65 днём,
   #818E84 при .65 на #1C2721 -> #5E6A61 -> 2.72 ночью. Это ниже нормы почти
   вдвое, и страдает ровно та подпись, которая честно сообщает о нехватке
   данных. Приглушать нечем: «мало данных» уже сказано словами. Тише карточку
   делает мягкая рамка, а не полупрозрачный текст. */
.wh-trend-arw, .wh-trend-none { color: var(--ink-3); }
.wh-trend-empty { opacity: 1; border-color: var(--line-soft); }

/* ── Дата замера на карточке «За 7 дней» ──────────────────────────────────
   Крупная цифра карточки — это ПОСЛЕДНИЙ ЗАМЕР, а не сегодняшний день: у сна
   пусты 53 дня из 90, окно, кончающееся пропуском, — обычное состояние. Дата
   была только в aria графика, на экране её не было нигде. Строка безусловная
   (даже «замер сегодня»): появляясь через раз, она меняла бы высоту карточки и
   ломала сетку 2x2. Цвет --ink-3 на поверхности карточки (--wh-card ->
   --dv2-surface -> --sand-surface = --paper): контраст 5.27 днём / 4.51 ночью,
   посчитано по WCAG 2.1, норма для текста 4.5. */
.wh-trend-when { font-size: 10.5px; line-height: 1.25; color: var(--ink-3); margin-bottom: 2px; }
/* Карточка «замеров нет / один замер» держит ту же высоту, что карточка с
   графиком: строка даты (13) + мини-график (28) + отступ (2) = 43. Иначе ряд
   сетки 2x2 с такой карточкой становился заметно ниже соседнего. */
.wh-trend-empty .wh-trend-none {
  box-sizing: border-box; min-height: 43px; padding: 12px 0 0; margin: 0;
}

/* ── Пустой график не занимает место графика ──────────────────────────────
   .vvch--sheet держит пол 200 px, чтобы лист не дёргался при переключении
   периода. Под единственной строкой «Замеров за этот период нет» этот же пол
   оставлял 145 px пустоты — а это состояние по умолчанию у «Веса» (0 замеров
   из 90). Модификатор ставит рисовальщик, класс на контейнере — _metricSheetLoad.
   Специфичность (0,2,0) — чтобы не зависеть от порядка правил. */
.vvch--sheet.vvch--empty, .vvch--card.vvch--empty, .vvch--mini.vvch--empty { min-height: 0; }
.vv-sheet-chart.is-empty { min-height: 0; }
/* В мини-карточке текст короткий и в одну-две строки — высота близка к высоте
   самого мини-графика (28 px), сетка главной не едет. */
.vvch--mini .vvch-empty { padding: 6px 2px; font-size: 11px; line-height: 1.3; }

/* ── Полая точка на мини-графике ──────────────────────────────────────────
   ⚠ ИСКЛЮЧЕНИЕ ИЗ ПРАВИЛА non-scaling-stroke ВЫШЕ, и вот почему. Замер: svg
   карточки — 141 CSS-px при viewBox 320, масштаб 0.44. Круг r=3 давал диаметр
   2.64 CSS-px, а кольцо полой точки — фиксированные 1.6 px с каждой стороны:
   дырка выходила 1.04 px, у последней точки (кольцо 2 px) — 0.64 px. То есть
   «ниже цели» выглядело той же кляксой, что и «хорошо», и канал доступности
   «форма вместо цвета» не работал ПО ГЕОМЕТРИИ. Здесь толщину отпускаем
   масштабироваться вместе с радиусом (r=5.2 задаёт vvchart.js): диаметр
   4.58 CSS-px, кольцо 0.79 -> дырка 3.0 px, её видно. Ломаной это не касается:
   у неё толщина по-прежнему фиксирована в CSS-пикселях. */
.vvch--mini .vvch-svg .vvch-dot { vector-effect: none; }
.vvch--mini .vvch-svg .vvch-dot--hollow { stroke-width: 1.8; }
.vvch--mini .vvch-svg .vvch-dot--hollow.vvch-dot--last { stroke-width: 2.2; }
.vvch--mini .vvch-svg .vvch-dot--last:not(.vvch-dot--hollow) { stroke-width: 2.4; }

/* ── Подпись цели читается поверх чего угодно ─────────────────────────────
   Замер: бокс подписи 79.5..93.2 по Y, линия сетки стоит на y=90 — ВНУТРИ
   букв, пунктир цели в 1.1 ед. под ними, а ломаная в тех же x идёт сквозь.
   Подложку-прямоугольник не ставим: ширину текста в строковой разметке не
   измерить, промахнувшийся прямоугольник хуже пересечения. Обводка цветом
   поверхности под заливкой (paint-order) даёт ореол ровно по форме букв.
   non-scaling-stroke — чтобы ореол был 3 CSS-px и в листе, и в карточке. */
.vvch-target-lbl {
  paint-order: stroke; stroke: var(--vvch-dot-ring); stroke-width: 3;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}


/* ── Верхняя полоса под часами (safe-area) ─────────────────────────────────
   Данил со скриншота айфона: «сверху белая полоска, как её убрать, сделать в
   тот же цвет что и приложение».

   ⚠ ЧТО ЗДЕСЬ МОЖЕТ ВЕБ, А ЧТО НЕТ. Замер показал: viewport-fit=cover в мете
   уже стоит, фон <html> уже песочный (rgb(241,234,221)), НО env(safe-area-inset-top)
   в проекте не использовался НИГДЕ — только -bottom. Значит про верх никто не
   думал вообще.

   Если обёртка растягивает webview на весь экран, страница обязана сама
   отодвинуть шапку от часов — иначе логотип уедет под них. Это и делает
   правило ниже. Если же webview прижат к safe-area (похоже на случай Данила:
   полоса РОВНО высотой статус-бара и чисто белая), то env(safe-area-inset-top)
   внутри webview равен НУЛЮ, правило ничего не добавляет, и полосу рисует
   нативный фон. Тогда правка нужна на маке — docs/ios_statusbar_prompt.md.

   Поэтому правило безопасно в обоих случаях: там, где вставки нет, оно = 0. */
header.app-header {
  padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
}
/* Фон под полосой — тот же, что у шапки, чтобы при «растянутом» webview
   верх не оказался прозрачным окном в белый нативный фон. */
html { background: var(--bg, #F1EADD); }
html.vv-theme-night { background: #131C18; }


/* ── Сон · Восстановление · Нагрузка: три полосы одним блоком ──────────────
   Со встречи 11.08: вместо трёх карточек-чисел один график, «чтобы видеть, как
   что на что влияет». Полосы идут стопкой без промежуточных рамок — рамка между
   ними разрезала бы блок на три отдельных графика и убила саму идею сравнения
   по вертикали. Разделяет их тонкая линия, а не отступ. */
.wh-bands {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 14px);
  padding: 12px 13px 6px;
  margin-top: 12px;
}
.wh-bands-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.wh-bands-t { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
/* Кнопка «Прогресс» — 44px по касанию, но визуально тихая: она уводит со
   страницы, и кричать ей не о чем. */
.wh-bands-more {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 0 2px 0 10px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--vv-green-dark);
  -webkit-tap-highlight-color: transparent;
}
.wh-bands-more svg { width: 15px; height: 15px; }
.wh-bands-more:active { opacity: .6; }

/* —— Шапка блока: название, «i», выбор показателей, переход в «Прогресс» ——
   Правила трёх полос (.wh-band, .wh-band-h, .wh-band-lbl, .wh-band-val,
   .wh-band-tap) удалены 14.08 вместе с самими полосами: мёртвый селектор в
   10-килобайтном файле живёт годами и потом отвечает на вопрос «почему не
   применяется» неправильно. Осталась только .wh-band-none — она нужна новому
   блоку для честной надписи «не загрузилось». */
.wh-hc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 2px;
}
.wh-hc-acts { display: inline-flex; align-items: center; gap: 2px; }
/* ⚠ САМА КНОПКА 44 px, А ПОДСВЕТКА 30 px. Первый заход делал кнопку 30 px и
   добирал зону псевдоэлементом (30 + 7 + 7). Зона по указателю выходила честные
   44,5 px, но приёмка scripts/shoot_screens.py меряет КОРОБКУ ЭЛЕМЕНТА и писала
   «целей меньше 44px: wh-hc-ib [30x30]». Спорить с собственной приёмкой хуже,
   чем сделать кнопку настоящей: теперь 44 px это сам элемент, а кружок подсветки
   рисует ::before на 30 px — иконка в шапке не должна выглядеть главным
   действием, она тут не главное. */
.wh-hc-ib {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-2);
  -webkit-tap-highlight-color: transparent;
}
.wh-hc-ib::before {
  content: ''; position: absolute; width: 30px; height: 30px; border-radius: 999px;
}
.wh-hc-ib svg { position: relative; width: 17px; height: 17px; }
.wh-hc-ib.is-on { color: var(--vv-green-dark); }
.wh-hc-ib.is-on::before { background: var(--vv-green-tint); }
:root.vv-theme-night .wh-hc-ib.is-on,
.vv-theme-night .wh-hc-ib.is-on { color: var(--vv-green); }

/* Пояснение по кнопке «i». Текст, а не всплывашка: на телефоне тост живёт
   3,5 секунды и обрезается, а объяснение двух шкал в него не помещается. */
.wh-hc-info {
  margin: 2px 0 8px; padding: 10px 12px; border-radius: var(--r-sm, 10px);
  background: var(--bg-warm); font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
/* ⚠ ВОЗДУХ МЕЖДУ АБЗАЦАМИ — 8px, А НЕ 6. Отзыв «этот текст плохо читается»
   был про семь абзацев подряд (их убрали, VVELL-346), но и на трёх строках
   6px при line-height 1.45 даёт межабзацный интервал МЕНЬШЕ межстрочного:
   абзацы визуально слипались в один кусок. Теперь интервал больше строки, и
   три мысли читаются как три. */
.wh-hc-info p { margin: 0 0 8px; }
.wh-hc-info p:last-child { margin-bottom: 0; }

/* «Подробнее» — раскрытие механики графика (VVELL-346). Кнопка, а не ссылка:
   она ничего не открывает наружу, только доращивает этот же блок.
   44px — норма касания; фон не берём, чтобы раскрытие не спорило по весу с
   самим пояснением, ради краткости которого всё и затевалось. */
.wh-hc-more {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; margin: 2px 0 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--vv-green-dark);
  -webkit-tap-highlight-color: transparent;
}
:root.vv-theme-night .wh-hc-more,
.vv-theme-night .wh-hc-more { color: var(--vv-green); }
/* Значок из общего набора смотрит ВНИЗ — это и есть «раскрыть». Раскрытому
   состоянию поворачиваем его вверх: стрелка обязана показывать, что случится. */
.wh-hc-more .wh-ic { width: 15px; height: 15px; transition: transform .15s ease; }
.wh-hc-more.is-on .wh-ic { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .wh-hc-more .wh-ic { transition: none; } }
/* Раскрытая механика отделена чертой и приглушена на ступень: это справка к
   справке, и выглядеть она обязана тише того, что человек читает всегда. */
.wh-hc-more-body {
  margin-top: 2px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--ink-3);
}
.wh-hc-more-body p { margin: 0 0 8px; }
.wh-hc-more-body p:last-child { margin-bottom: 0; }

/* Выбор показателей. Чипы переносятся на несколько строк намеренно: горизонтальная
   прокрутка прячет половину списка за краем, и человек не знает, что там есть. */
.wh-hc-pick {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 2px 0 10px;
}
.wh-hc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  /* ⚠ 44 px ЗДЕСЬ ЧЕСТНЫЕ, БЕЗ ПСЕВДОЭЛЕМЕНТА: чипы стоят сеткой вплотную
     друг к другу, и раздутая невидимая зона перекрыла бы соседний чип — палец
     попадал бы не туда, куда целится. */
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.wh-hc-chip.is-on {
  background: var(--vv-green-tint); border-color: transparent; color: var(--vv-green-dark);
}
:root.vv-theme-night .wh-hc-chip.is-on,
.vv-theme-night .wh-hc-chip.is-on { color: var(--vv-green); }
/* Номер выбранного: он объясняет, какая шкала чья. Круг, а не просто цифра, —
   иначе «1» слипается с первой буквой названия.
   ⚠ КОЛЬЦО, А НЕ ЗАЛИВКА. Заливка --vv-green-dark с бумагой внутри давала бы
   контраст 2,97 при норме 4,5 для текста: цифра мелкая и жирная, но всё равно
   текст. На currentColor цифра наследует цвет самого чипа, а он уже посчитан. */
.wh-hc-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  border: 1.4px solid currentColor; color: inherit; background: none;
  font-size: 10.5px; font-weight: 800; font-style: normal; line-height: 1;
}
.wh-hc-hint { flex: 1 0 100%; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }

.wh-band-none {
  padding: 10px 1px 12px;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.35;
}

/* Ночью бумага темнее тёплого фона (в отличие от дня) — поэтому цвет поверхности
   берём токеном, а не «на ступень светлее». */
.vv-theme-night .wh-bands { background: var(--paper); border-color: var(--line-soft); }


/* ── Единый ритм блоков на «Сегодня» ───────────────────────────────────────
   Данил по скриншотам с айфона: «разрыв снизу очень маленький между блоками»,
   «разрывы разные, где-то слишком близко блоки между друг другом, где-то меньше».

   ⚠ ЭТО НЕ ПРИДИРКА, А ФАКТ. Замер зазоров между соседними блоками главной
   сверху вниз дал: 8, 16, 0, 14, 13, -1, 14, 14, 14, 22, 10, 22, 10, 12, 18.
   Два места слиплись насмерть: блок полос упирался в «Питание» (0), а «Корзина
   собрана» заезжала на следующий блок (-1). Причина — у каждого блока свои
   margin-top и margin-bottom, накопленные по мере появления блоков; соседние
   поля то складывались, то схлопывались, и общего ритма не было ни у кого.

   Вместо того чтобы править полтора десятка margin-ов по одному (и получить тот
   же разнобой через месяц), задаём ритм ОДНИМ правилом: расстояние принадлежит
   ПРОМЕЖУТКУ между блоками, а не самим блокам. Нижние поля гасим, верхнее ставим
   соседу. 14px — та величина, которая и так встречалась чаще всего.

   ⚠ !important нужен: у большинства блоков margin прописан в design_v2.css с
   !important, и без него правило проиграет. */
.wh-home > * { margin-bottom: 0 !important; }
.wh-home > * + * { margin-top: 14px !important; }

/* Перед заголовком раздела («Журнал») пауза больше — это смена темы, а не
   очередная карточка. После заголовка, наоборот, меньше: подпись и её
   содержимое должны читаться одним блоком. */
.wh-home > * + .wh-myday-h { margin-top: 24px !important; }
.wh-home > .wh-myday-h + * { margin-top: 10px !important; }

/* Дисклеймер внизу отделяем сильнее: он не часть ленты, а сноска. */
.wh-home > .wh-disclaimer { margin-top: 24px !important; }


/* ── «За 7 дней»: убираем рамку вокруг каждого графика ─────────────────────
   Данил: «они в доп рамке, значит эту рамку давай уберём просто».

   ⚠ ЗАМЕР, ЧТО ОН УВИДЕЛ. Сетка .wh-trends прозрачная, а КАЖДАЯ карточка —
   --paper #FBF7EF с обводкой #E0D6C3 на песочной странице. Четыре почти белых
   прямоугольника с рамками читаются как «графики в доп. рамках».

   ⚠ ПЕРВАЯ ПОПЫТКА БЫЛА ХУЖЕ БОЛЕЗНИ. Я собрал все четыре в один блок: дал
   .wh-trends фон и рамку, а карточкам — свои отступы и row-gap: 0. Строки сетки
   стали тесными, горизонтальные линии сетки самого графика легли вплотную к
   границе строки, и блоки стали выглядеть ОБРЕЗАННЫМИ. Данил увидел это сразу.
   Урок: просили убрать рамку — надо убрать рамку, а не перестраивать раскладку.

   Поэтому здесь ровно одно: у карточек снят фон и обводка. Сетку, отступы и
   зазоры НЕ ТРОГАЕМ — они работали. Графики ложатся прямо на страницу. */
.wh-trend {
  background: transparent !important;
  border-color: transparent !important;
}


/* ── ДВЕ ЛИНИИ В ОДНОМ ПОЛЕ (14.08) ────────────────────────────────────────
   Здесь было ДВА блока стилей подряд, писанных 11.08 в два захода: второй
   перебивал первый по специфичности, а первый продолжал объявлять .vvch-m3
   (третью линию), которой в разметке уже нет — рисовальщик режет список до двух.
   Сведены в один: два источника правды на один экран это ровно та болезнь,
   от которой заводился единый рисовальщик.

   ⚠ ЦВЕТ — ПОСЛЕДНИЙ ИЗ ЧЕТЫРЁХ КАНАЛОВ РАЗЛИЧЕНИЯ. Замер попарного контраста
   фирменных тонов: 1.02..1.27, то есть они отличаются ОТТЕНКОМ, а не яркостью,
   и при дальтонизме и в чёрно-белом виде сливаются. Поэтому ряды различаются
   ещё и формой точки (кольцо / квадрат), рисунком штриха (сплошная /
   штриховая) и стороной оси. Легенда повторяет форму и штрих настоящими
   фигурами, а не цветным квадратиком. */
:root {
  --vvm-1: #177652;  /* первый ряд — фирменный зелёный, 5.24 на бумаге */
  --vvm-2: #A8572B;  /* второй ряд — глина, как у кольца восстановления, 4.84 */
}
:root.vv-theme-night, .vv-theme-night {
  --vvm-1: #3FC08B;
  --vvm-2: #E09A55;
}

/* ⚠ ЛИНИЯ ТИШЕ ТОЧКИ НАМЕРЕННО. Приём из образца: линия говорит, ЧЕЙ это ряд,
   точка говорит, КАКОЕ значение. Если красить линию в полную силу, два смысла
   спорят в одном канале и читать нечего. Приглушаем прозрачностью, а не вторым
   набором цветов: так ночная тема достаётся бесплатно и разъехаться нечему. */
.vvch--multi .vvch-mline {
  fill: none; stroke-width: 2.2; stroke-opacity: .55;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.vvch--multi .vvch-m1 { stroke: var(--vvm-1); }
.vvch--multi .vvch-m2 { stroke: var(--vvm-2); stroke-dasharray: 6 3.5; }

/* Точки. Первый ряд — КОЛЬЦО (заливка цветом поверхности), второй — КВАДРАТ
   с заливкой тоном и тонкой обводкой поверхностью, чтобы он не слипался с
   линией и сеткой. Форму видно и в чёрно-белой печати, и при любой форме
   дальтонизма — это и есть главный канал различения рядов. */
.vvch--multi .vvch-mdot { vector-effect: non-scaling-stroke; }
.vvch--multi .vvch-mdot--s1 { fill: var(--vvch-dot-ring); stroke-width: 2.4; }
.vvch--multi .vvch-mdot--s2 {
  stroke: var(--vvch-dot-ring); stroke-width: 1.4; paint-order: stroke;
}
/* ⚠ КОЛЬЦО ПЕРВОГО РЯДА ОСТАЁТСЯ ПОЛЫМ ПРИ ЛЮБОМ ТОНЕ. Правило --s1 выше
   специфичнее (0,2,0) любого .vvch-t-* (0,1,0), поэтому заливка кольца — цвет
   поверхности, а тон уходит в обводку. Здесь стояли ещё два правила под тон
   'm1' (ровный фирменный зелёный для всего первого ряда) — они удалены вместе
   с самим тоном: первый ряд теперь красится по значению, как и второй. */

/* Число у точки. Обводка цветом поверхности (paint-order: stroke — обводка
   ложится ПОД заливку) отрывает число от линии и подложки под ним. */
.vvch--multi .vvch-mval {
  font-size: 10.5px; font-weight: 800;
  paint-order: stroke; stroke: var(--vvch-dot-ring); stroke-width: 3.6px;
  stroke-linejoin: round;
}
/* ⚠ ЧИСЛО — ТЕКСТ, А НЕ ГРАФИКА: норма контраста 4.5, а не 3.0. Тона выше
   считались для линии и точки, и днём sup/warn/mid давали 4.08 / 3.79 / 3.99.
   Здесь берём текстовые варианты тех же тонов (см. --vvch-*-t в блоке токенов).
   Специфичность (0,3,0) бьёт и .vvch-t-* (0,1,0), и .vvch--multi .vvch-mval. */
.vvch--multi .vvch-mval.vvch-t-sup  { fill: var(--vvch-sup-t); }
.vvch--multi .vvch-mval.vvch-t-good { fill: var(--vvch-good-t); }
.vvch--multi .vvch-mval.vvch-t-warn { fill: var(--vvch-warn-t); }
.vvch--multi .vvch-mval.vvch-t-mid  { fill: var(--vvch-mid-t); }
.vvch--multi .vvch-mval.vvch-t-low  { fill: var(--vvch-low-t); }
.vvch--multi .vvch-mval.vvch-t-flat { fill: var(--vvch-flat-t); }

/* Подложка поля: очерчивает кадр, ничего не обещая. */
.vvch-mfield { fill: var(--ink); opacity: .028; }
:root.vv-theme-night .vvch-mfield,
.vv-theme-night .vvch-mfield { fill: #FFFFFF; opacity: .04; }

/* ── СЕТКА ДВОЙНОГО ГРАФИКА (16.08.2026) ──────────────────────────────────
   ⚠ ЭТИ ЛИНИИ ИМЕЮТ ПРАВО СУЩЕСТВОВАТЬ ТОЛЬКО ПОТОМУ, ЧТО ОБЕ ОСИ ИДУТ ОТ
   НУЛЯ И ИМЕЮТ ОДИНАКОВОЕ ЧИСЛО ИНТЕРВАЛОВ (vvchart.js, zeroScale +
   ZERO_TICKS). До этого сетки здесь не было НАМЕРЕННО: замер ловил линию,
   проходившую сквозь подпись «60» правой оси и означавшую при этом 58.6 %.
   Вернёте осям независимые деления — эти правила надо снимать вместе с ними.

   Толщину фиксируем в CSS-пикселях (vector-effect), иначе на карточке шириной
   174 px линия 1 превращается в 0.54 px и местами пропадает. */
.vvch-mgrid, .vvch-mgridv, .vvch-mzero { fill: none; vector-effect: non-scaling-stroke; }
.vvch-mgrid  { stroke: var(--vvch-grid);      stroke-width: 1; }
.vvch-mgridv { stroke: var(--vvch-grid-soft); stroke-width: 1; }
/* Нулевая линия заметнее остальных: она опора всего графика и ответ на просьбу
   «от показателя ноль снизу». Среди одинаковых полосок ноль терялся бы. */
.vvch-mzero  { stroke: var(--vvch-gap);       stroke-width: 1.2; }

/* Засечка у подписи оси — короткая и на СВОЕЙ стороне, в цвет своего ряда.
   Через всё поле её тянуть нельзя ровно по той же причине, что и сетку. */
.vvch-mtick { stroke-width: 1.4; fill: none; vector-effect: non-scaling-stroke; }
.vvch--multi .vvch-mtick.vvch-m1 { stroke: var(--vvm-1); }
.vvch--multi .vvch-mtick.vvch-m2 { stroke: var(--vvm-2); stroke-dasharray: none; }

/* Подпись оси — ИМЯ ПОКАЗАТЕЛЯ И ЕДИНИЦА, один раз над своей стороной поля
   («Сон, ч» слева, «Восстановление, %» справа). Здесь стояла голая единица
   (.vvch-munit) в жёлобе под шкалой: она отвечала на «в чём измеряется», но не
   на «чья это шкала», а у пары HRV + Пульс покоя единица у обоих рядов одна и
   та же, и жёлоб молчал. Цвет приходит от .vvch-m1-t / .vvch-m2-t ниже. */
.vvch-mtitle { font-size: 9.5px; font-weight: 800; letter-spacing: .01em; }
/* Подписи осей окрашены в цвет своего ряда: без этого непонятно, какое число
   к какой линии относится. Контраст на бумаге 5.24 и 4.84 при норме 4.5. */
.vvch--multi text.vvch-m1-t { fill: var(--vvm-1); }
.vvch--multi text.vvch-m2-t { fill: var(--vvm-2); }

/* Полоса «сегодня» — очень тихая: она ориентир, а не акцент. */
.vvch-today { fill: var(--ink); opacity: .05; }
:root.vv-theme-night .vvch-today,
.vv-theme-night .vvch-today { fill: #FFFFFF; opacity: .06; }
.vvch-axis.is-today { font-weight: 800; fill: var(--ink); }

/* Легенда. Метка — настоящая фигура (линия своим штрихом плюс точка своей
   формы), а не цветной квадратик: иначе легенда объясняла бы ряды через тот
   самый канал, который мы признали ненадёжным. */
.vvch-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 6px; font-size: 12px; color: var(--ink-2);
}
.vvch-leg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.vvch-leg-ic { width: 26px; height: 13px; flex: 0 0 auto; overflow: visible; }


/* ── Читаемость нижней навигации и кнопок шапки (VVELL-148) ────────────────
   Замер по фактически отрисованным цветам, а не по токенам:
   неактивные подписи «Корзина/Здоровье/Знания» давали 3.12 днём и 3.88 ночью
   при норме 4.5. Активная вкладка проходила (5.58/5.08) — то есть проблема
   ровно у тех трёх надписей, на которые человек смотрит, когда ИЩЕТ, куда пойти.

   ⚠ ПОЧЕМУ ЭТО ВАЖНЕЕ, ЧЕМ КАЖЕТСЯ. Нижняя навигация — единственный способ
   перемещаться по приложению. Подпись, которую плохо видно, человек не читает,
   а угадывает по иконке. При сотне тестировщиков это превращается в «я не понял,
   куда нажимать».

   Посчитано: день #565F57 = 5.54 на фоне бара #F1EADD; ночь #93A096 = 6.39
   на #131C18. Взяты с запасом, а не впритык: фон бара полупрозрачный, и под
   ним может оказаться светлая карточка. */
#bottom-nav-v2 button:not(.active):not(.nav2-ai) span { color: #565F57 !important; }
.vv-theme-night #bottom-nav-v2 button:not(.active):not(.nav2-ai) span { color: #93A096 !important; }

/* ⚠ КНОПКИ ШАПКИ БЫЛИ 40x40 ПРИ НОРМЕ 44. Тема и настройки — то, что человек
   жмёт чаще всего после самой навигации. Размер кружка не трогаем (он держит
   вид шапки), зону касания добираем псевдоэлементом: 40 + 2 + 2 = 44.
   Тот же приём уже применён к кнопкам периода в листе метрики. */
.vv-theme-toggle, .pill-icon-btn { position: relative; }
.vv-theme-toggle::after, .pill-icon-btn::after {
  /* ⚠ -3px, А НЕ -2px. При -2px зона выходила 44 по расчёту, но замер указателем
     дал 42: зона круглая, и по самому краю окружности попадание уже не
     засчитывается. Считать надо не по формуле, а тыкая указателем — что и
     сделано. При -3px остаётся 46 по геометрии и 44+ по факту.
     Больше не берём: кнопки темы и настроек стоят рядом, и слишком широкая
     зона начнёт воровать нажатия у соседа. */
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   ЧАТ: панель разговора, подсказки под ответом, предложение привычки
   (VVELL-186 / 187 / 188, 13.08.2026)

   Касание везде >= 44px — проверено getComputedStyle, а не на глаз.
   Цвета только токенами: у чата две темы, и захардкоженная плашка ночью
   превращается в светлое пятно (этим уже болели «Практические советы»).
   ───────────────────────────────────────────────────────────────────────── */
.vv-chat-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 4px 0 10px;
}
.vv-chat-bar-btn {
  min-height: 44px; padding: 0 14px;
  border-radius: 999px; border: 1.3px solid var(--line-soft);
  background: var(--paper); color: var(--ink-2);
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.vv-chat-bar-btn:hover { border-color: var(--vv-green); color: var(--vv-green); }

/* Подсказки идут ВНУТРИ последнего ответа, а не отдельной панелью внизу:
   иначе они спорили бы за место с полем ввода и перекрывали его на коротких
   экранах (та же ловушка, что с --vv-nav-h в VVELL-112). */
/* ⚠ «ПОЧЕМУ ЭТОТ ТОВАР» БЫЛО НЕВИДИМЫМ (VVELL-331, 18.08.2026). Причину
   считают три места сразу — `product_nutrient_reason` («много селена, 41 %
   нормы за порцию»), `product_explanation` и правила `_auto_reason`, — она
   уезжает на фронт полем `reason` в каждой карточке подборки, И НИ ОДИН
   шаблон её не рисовал. Человек видел ккал и цену, спрашивал «почему ты
   выбрал именно эти товары» — и ответ приходилось писать заново словами,
   хотя он уже был посчитан и лежал в карточке. */
.vv-ai-cart-why {
  margin-top: 2px;
  font-family: var(--font-body); font-size: 11.5px; line-height: 1.35;
  color: var(--ink-2);
}

.vv-chat-suggests {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
/* ⚠ ДНЁМ ПИЛЮЛИ БЫЛИ НЕВИДИМЫ (13.08.2026). Заливка стояла --vv-green-tint,
   а пузырь ответа под ними красится --dv2-ai-bubble; в песочной палитре ОБА
   токена указывают на один --sand-green-tint = #E4EFE5. Замер по готовому
   снимку: внутри пилюли, в промежутке между пилюлями и на фоне пузыря —
   три точки, один цвет rgb(228,239,229). Человек видел три строки зелёного
   текста внутри абзаца, а не кнопки. Ночью совпадения не было только потому,
   что там тинт полупрозрачный и складывался сам с собой.
   Своя поверхность (--paper) + зелёная рамка: фигура кнопки не зависит от
   того, на чём она лежит, и работает в обеих темах. Зелёный не берём заливкой
   — под ним зелёный текст. */
.vv-chat-sugg {
  /* Подсказку теперь пишет модель (VVELL-333), и длина её фразы нам не
     подвластна — пилюля обязана переносить текст, а не вылезать за экран. */
  min-height: 44px; padding: 8px 14px; max-width: 100%; line-height: 1.3;
  border-radius: 999px; border: 1.3px solid var(--vv-green);
  background: var(--paper); color: var(--vv-green-dark);
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  cursor: pointer; text-align: left;
}
.vv-chat-sugg:hover { filter: brightness(.96); }
/* Ночью --vv-green-dark на поверхности даёт ровно 4,50 — впритык к порогу,
   любое округление уводит ниже. Тот же тон светлее: замер 6,70. */
.vv-theme-night .vv-chat-sugg { color: var(--vv-green); }

/* Предложение завести привычку. Отдельный блок с рамкой, а не ещё один чип:
   это действие, которое ЧТО-ТО СОЗДАЁТ у человека в дневнике, и выглядеть оно
   обязано иначе, чем подсказка «спроси дальше». */
.vv-habit-offer {
  margin-top: 12px; padding: 12px;
  border: 1.3px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--bg-warm);
}
/* ⚠ НОЧЬЮ ЭТА ПОДПИСЬ НЕ ДОБИРАЛА ДО НОРМЫ. --ink-3 ночью = #818E84, и он
   рассчитан на карточку (4,51), а плашка стоит на --bg-warm = #232F28, что
   светлее: замер на живом экране дал 4,07:1 при норме 4,5 и размере 12 px,
   то есть послабление для крупного текста не применимо. --ink-2 проходит на
   обоих фонах и в обеих темах (день 4,88 · ночь ~7). */
.vv-habit-offer-t { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.vv-habit-offer-n {
  margin: 4px 0 10px; font-size: 15px; font-weight: 800; color: var(--ink);
}
.vv-habit-offer-btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: none;
  background: var(--vv-green); color: var(--paper);
  font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer;
}
.vv-habit-offer.is-done .vv-habit-offer-btn { display: none; }
.vv-habit-offer-done { font-size: 13px; font-weight: 700; color: var(--vv-green); }

/* Листы «История» и «Память обо мне» */
.vv-chat-thread {
  display: block; width: 100%; text-align: left;
  min-height: 44px; padding: 12px 4px;
  border: none; border-bottom: 1px solid var(--line-soft);
  background: transparent; cursor: pointer;
}
.vv-chat-thread-t { font-size: 15px; font-weight: 700; color: var(--ink); }
.vv-chat-thread-m { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.vv-chat-mem-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.vv-chat-mem-text { flex: 1; font-size: 14px; color: var(--ink); }
.vv-chat-mem-src { font-size: 11px; color: var(--ink-3); display: block; margin-top: 2px; }
.vv-chat-mem-del {
  min-width: 44px; min-height: 44px; border-radius: var(--r-sm);
  border: 1.3px solid var(--line-soft); background: transparent;
  color: var(--ink-2); font-size: 13px; font-weight: 700; cursor: pointer;
}
.vv-chat-mem-add { display: flex; gap: 8px; margin-top: 14px; }
.vv-chat-mem-add input {
  flex: 1; min-height: 44px; padding: 0 12px;
  border: 1.3px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); font-size: 14px;
}
.vv-chat-mem-add button {
  min-height: 44px; padding: 0 16px; border-radius: var(--r-sm); border: none;
  background: var(--vv-green); color: var(--paper);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.vv-chat-empty { padding: 18px 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.vv-chat-hist-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }

/* Что чат делает с записями памяти — сказано над списком, а не подразумевается.
   Строка объясняющая, поэтому --ink-2 (проходит 4,5 в обеих темах), а не --ink-3:
   у неё же 12 px, а на 12 px послабление для крупного текста не действует. */
.vv-chat-mem-lead {
  margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2);
}

/* Запись памяти, которая спорит с типом питания из профиля (дефект 16).
   Цвет текста — --ink-2: он единственный из «тихих» токенов проходит 4,5:1
   в ОБЕИХ темах на 12 px, а на 12 px послабления для крупного текста нет.
   Ягодным красим только полоску: --vv-berry-solid заведён именно потому, что
   ночная палитра осветляет ягодный и текстом он ночью не проходит. */
.vv-chat-mem-conflict {
  margin-top: 6px; padding: 6px 0 6px 8px;
  border-left: 2px solid var(--vv-berry-solid);
  font-size: 12px; line-height: 1.45; color: var(--ink-2);
}

/* Полоска «пишешь в прошлый разговор». Стоит НАД лентой и живёт, пока выбран
   прошлый разговор: раньше об этом говорила строка в конце ленты, которую
   первое же новое сообщение отправляло в середину переписки. */
/* ⚠ ПОЛОСКА СТОИТ ВНУТРИ `.chat-input-wrap` (он `position: fixed`), а не первым
   элементом ленты: `position: sticky` там не держится — у предка свой скроллпорт,
   и в разговоре на 324 сообщения полоска уезжала на −52 000 px. */
.vv-chat-threadbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 8px; padding: 6px 8px 6px 12px;
  border: 1.3px solid var(--vv-green); border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.vv-chat-threadbar button {
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.3px solid var(--vv-green); background: transparent;
  color: var(--vv-green-dark);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer;
}
/* Тот же случай, что у пилюль-подсказок: ночью --vv-green-dark даёт ровно
   порог, светлее тот же тон — с запасом. */
.vv-theme-night .vv-chat-threadbar button { color: var(--vv-green); }
/* Полоска выросла над полем ввода — последнее сообщение не должно под неё уйти.
   ⚠ Отдельного числа здесь больше НЕ ДЕРЖИМ: полоска стоит ВНУТРИ
   `.chat-input-wrap`, и измеренная `--vv-chat-input-h` её уже включает.
   Второе число тут только спорило бы с замером (08.09.2026, VVELL-724). */
#screen-chat.vv-has-threadbar .chat-list {
  padding-bottom: calc(var(--vv-nav-h, 76px) + var(--vv-chat-input-h, 96px) + 16px) !important;
}

/* ── Плашка-надзаголовок ночью (13.08.2026) ────────────────────────────────
   ⚠ .eyebrow.tint красит текст в --vv-green-dark (premium.css:128, !important),
   а фон берёт полупрозрачным --vv-green-tint. Ночью тинт складывается с фоном
   экрана в rgb(25,51,40), и #249D6F на нём даёт 3,96:1 при норме 4,5 — замер
   на «ТВОЙ ПРОГНОЗ» в шапке экрана возраста, размер 11 px, послабления нет.
   Днём та же плашка проходит, поэтому правило только ночное.
   --vv-green (#3FC08B) на том же фоне даёт 5,90:1 и остаётся тем же тоном. */
.vv-theme-night .eyebrow.tint { color: var(--vv-green) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   ЗНАЧОК «ЛУЧШИЙ В ПОЛКЕ» (дефект 18, 14.08.2026)
   В Дневнике стоял типографский символ «★» литералом — единственный такой знак
   на всех десяти экранах. Заменён на _ic('star'); размер задаём здесь, иначе
   общий `.wh-ic` дал бы 20 px рядом с 12-пиксельной подписью «куплено».
   ───────────────────────────────────────────────────────────────────────── */
.vv-grade-star .wh-ic { width: 12px; height: 12px; vertical-align: -2px; }

/* ─────────────────────────────────────────────────────────────────────────
   ЦЕЛИ КАСАНИЯ ВНЕ `.screen` (дефект 15, 14.08.2026)
   Приёмка снимками обходила только `.screen.active`, а шапка живёт снаружи —
   и десять прогонов подряд писали «замечаний 0» про кнопки 40×40. Зона у них
   добиралась псевдоэлементом (`inset: -3px` выше по файлу), но замер это
   подтвердить не смог: соседняя кнопка стоит вплотную и перехватывает точку.
   Поэтому растёт сама кнопка — 40 → 44. Кружок в шапке от этого не «раздулся»:
   иконка внутри осталась 20/22 px, изменился только диаметр подложки.
   ───────────────────────────────────────────────────────────────────────── */
.vv-theme-toggle, .pill-icon-btn,
/* ⚠ ДВОЙНОЙ КЛАСС ОБЯЗАТЕЛЕН. design_v2.css:282 держит `.pill-icon-btn.vv-settings-btn
   { width: 40px !important }` — специфичность (0,2,0), и одиночный `.pill-icon-btn`
   с !important её не перебивает. Первый прогон приёмки после правки это и показал:
   кнопка темы стала 44, а настройки остались 40. */
.pill-icon-btn.vv-settings-btn {
  width: 44px !important; height: 44px !important;
}
/* «Пропустить» в обучающем туре — текстовая кнопка 20 px высотой. */
.wh-tour-skip { min-height: 44px; padding: 11px 4px; }
/* Кнопка «Далее» в обучающем туре Вводной — 36 px, единственный выход из шага. */
.wh-tour-next { min-height: 44px; padding: 11px 18px; }

/* ═════════════════════════════════════════════════════════════════════════
   КОНТРАСТ РАЗДЕЛА «ЗДОРОВЬЕ» (16.08.2026)

   Все числа ниже — ЗАМЕР со смешиванием альфы подложки на живой странице, при
   классе `vv-theme-night` на <html> (не на выдуманном `vv-theme-dark`: класса с
   таким именем в проекте нет, и «ночная» проверка через него шла по светлой теме).
   Норма WCAG AA для мелкого текста — 4.5.

   ⚠ ПОЧЕМУ ПРАВИЛА СТОЯТ ЗДЕСЬ И С !important. Исходные объявления живут в
   design_v2.css уже с `!important` и специфичностью (0,2,0) — например
   `#screen-stats .wkb-tab-label { color: var(--ink-3) !important }`. Перебить их
   можно только большей специфичностью И тоже с !important; premium.css грузится
   последним. Это та самая ловушка каскада, на которой в этом файле спотыкались
   уже дважды (полосы `.vv-rd-*` и `.vv-hz-fill` через `#screen-age`).
   ═════════════════════════════════════════════════════════════════════════ */

/* Подписи НЕАКТИВНЫХ вкладок «Что трекаем? / Динамика / Цели» и тумблер
   «День · Неделя». Ночью: rgb(129,142,132) на rgb(35,47,40) → 4.07 при 11px/700.
   Днём те же элементы дают 4.91-6.25, поэтому правим только ночь: --ink-2. */
:root.vv-theme-night #screen-stats .wkb-tab-label,
.vv-theme-night #screen-stats .wkb-tab-label,
:root.vv-theme-night #screen-stats .vv-itog-toggle-btn,
.vv-theme-night #screen-stats .vv-itog-toggle-btn,
:root.vv-theme-night #screen-progress .vv-itog-toggle-btn,
.vv-theme-night #screen-progress .vv-itog-toggle-btn { color: var(--ink-2) !important; }

/* Заголовок ОТМЕЧЕННОЙ строки образа жизни. Ночью зелёный на зелёном тинте:
   rgb(36,157,111) на rgb(26,53,42) → 3.85. --vv-green ночью #32D06A — светлее и
   на том же тинте читается. Днём тёмный зелёный оставлен: он там даёт 5.65. */
:root.vv-theme-night .vv-itog-life-item.is-done .vv-itog-life-title,
.vv-theme-night .vv-itog-life-item.is-done .vv-itog-life-title { color: var(--vv-green) !important; }

/* Галочка в кружке отмеченной строки: белая на ярко-зелёном — 2.30.
   Тёмный знак на светлой заливке даёт 6.8. Токен --dv2-bg это и есть тёмная
   подложка ночной темы, поэтому знак остаётся «цветом фона», а не хардкодом. */
:root.vv-theme-night .vv-itog-life-item.is-done .vv-itog-life-status,
.vv-theme-night .vv-itog-life-item.is-done .vv-itog-life-status { color: var(--dv2-bg) !important; }

/* Календарь «Отмечался в N днях из 30» на вкладке «Что трекаем?».
   Ночь: '23' rgb(237,229,214) на зелёной заливке rgb(63,192,139) → 1.84.
   День: неотмеченные дни rgb(124,135,125) на rgb(245,239,227) → 3.26 (12 ячеек).
   Ячейка 10px — самый мелкий текст экрана, ему норма нужна тем более. */
.wkb-cal-cell { color: var(--ink-2); font-size: 11px; }
:root.vv-theme-night .wkb-cal-cell.wkb-cal-full,
.vv-theme-night .wkb-cal-cell.wkb-cal-full { color: var(--dv2-bg); }
:root.vv-theme-night .wkb-cal-cell.wkb-cal-partial,
.vv-theme-night .wkb-cal-cell.wkb-cal-partial { color: var(--dv2-bg); }
/* «Пропущено» задано хардкодом #FFE3DC/#B14C20 ещё в app.css — светло-розовая
   плашка ночью остаётся светлой, поэтому тёмный текст на ней верен в обеих темах
   и трогать его не нужно. Записано, чтобы никто не «починил» это следом. */

/* ══════════════════════════════════════════════════════════════════════════
   ЗАМОК ФОНА ПОД ЛИСТАМИ (VVELL-340)
   Механику держит JS (static/js/vv_scroll_lock.js: body → position:fixed
   со смещением на сохранённый scrollY). Здесь — вторая половина: чтобы
   докрутка ВНУТРИ листа не «пробивала» в фон. Без overscroll-behavior свайп,
   доехавший до конца списка в листе, продолжает прокручивать страницу под
   ним — на Android это видно особенно хорошо.
   ══════════════════════════════════════════════════════════════════════════ */
.vv-sheet-card,
.vv-modal-card,
.vv-modal-content,
#vv-checkout-sheet .cosheet,
#vv-missing-pop .misspop-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Сам оверлей ничего не прокручивает — гасим и на нём. */
.vv-modal-bg,
.vv-modal-backdrop,
.wkb-modal-overlay,
.vv-coach-backdrop,
.wh-cust-overlay,
#vv-checkout-sheet .cosheet-bg,
#vv-missing-pop .misspop-bg {
  overscroll-behavior: none;
}
/* ⚠ touch-action: none здесь НЕ ставим. Соблазн большой, но он наследуется
   внутрь оверлея, и у панелей, которым положено прокручиваться пальцем
   (.wkb-modal, .wh-cust-*), пришлось бы возвращать auto поимённо — первый же
   новый лист про это забудет. Фон и так неподвижен: body переведён в
   position:fixed, прокручивать под листом просто нечего. */


/* ══════════════════════════════════════════════════════════════════════════
   НИЖНИЕ ЛИСТЫ ПО MATERIAL DESIGN 3 (VVELL-344, 19.08.2026)

   Отзыв тестировщика: «Я бы добавил более гайдлайновый дизайн окон (можно
   глянуть у Гугла)». Меняем ГЕОМЕТРИЮ И ПОВЕДЕНИЕ — палитру, шрифты и
   размеры текста не трогаем ни в одном правиле ниже: фирменный стиль остаётся
   наш, по гайдлайну выравниваются пропорции.

   Что именно разошлось с MD3 (замер на снимке листа «Меню», 390×880):
     скругление  20px   → 28px   (Corner Extra Large Top)
     ручка       38×4   → 32×4   в полосе 22px (у нас была 4+6+10 = 20)
     отступы     8/16   → 0/16 сверху ручка, снизу 24 + безопасная зона
     тень        0 -8px 28px .18  → Elevation Level 1, зеркально вверх
     подложка    55%    → 32%    (MD3 Scrim)
     поля вокруг 16px со всех сторон → 0: модальный лист MD3 прижат к низу
                 и растянут во всю ширину, а не висит карточкой над баром
     высота      88vh   → экран минус 72px сверху
     ширина      без потолка → 640px (BottomSheetDefaults.SheetMaxWidth)
     перетаскивание — не было вовсе → static/js/vv_sheet_drag.js

   ⚠ ЛИСТ ПРИЖИМАЕТСЯ К НИЗУ, И ЭТО НЕ КОСМЕТИКА. `.vv-modal-bg` даёт
   padding:16px со всех сторон — он писался под ЦЕНТРАЛЬНУЮ модалку. У нижнего
   листа он оставлял 16px пустоты снизу и по бокам: лист висел карточкой,
   скруглённой сверху, а снизу упирался в воздух. На снимке это видно как
   полоса фона между листом и нижним баром.

   ⚠ ТЕНЬ СТАЛА ТИШЕ НАМЕРЕННО. В MD3 модальный лист сидит на Elevation Level 1,
   а отделяет его от фона подложка, а не тень. Прежние `0 -8px 28px` — это
   уровень 3-4: лист выглядел тяжелее диалога, лежащего выше него по смыслу.
   ══════════════════════════════════════════════════════════════════════════ */

/* Подложка: MD3 Scrim = 32%. Прижимаем лист к низу и убираем поля модалки. */
.vv-modal-bg.vv-sheet-bg {
  padding: 0;
  background: rgba(0, 0, 0, .32);
}

.vv-sheet-card {
  /* 640px — потолок ширины модального листа в MD3. На телефоне не виден,
     на планшете и в браузере лист перестаёт растягиваться на весь экран. */
  width: 100%; max-width: 640px; margin: 0 auto;
  /* Экран минус 72px: MD3 не даёт листу закрыть верх экрана целиком — по
     оставшейся полосе видно, что под листом что-то есть и лист закрывается.
     dvh, а не vh: на мобильных vh считается по РАЗВЁРНУТОМУ окну, и при
     видимой адресной строке лист вылезал бы за нижний край. */
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  /* Сверху ноль: полосу под ручкой держит сама ручка (22px по MD3).
     Снизу 24px + безопасная зона айфона. */
  padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .30), 0 -1px 3px 1px rgba(0, 0, 0, .15);
}

/* Ручка: 32×4 в полосе 22px — размеры MD3 Drag handle.
   ⚠ ЦВЕТ ЧЕРЕЗ opacity, А НЕ ТОКЕНОМ ЛИНИИ. `--line-soft` — это цвет
   разделителя, он светлее ручки: на снимке ручка почти не читалась, то есть
   единственный намёк на «меня можно тянуть» был невидим. В MD3 ручка — это
   On Surface Variant на 40%; `--ink-3` на .4 даёт ровно такой вес и остаётся
   палитровым в обеих темах. */
.vv-sheet-grip {
  width: 32px; height: 4px; margin: 9px auto;
  background: var(--ink-3); opacity: .4; border-radius: 2px;
}

/* ⚠ ЗА ЭТИ МЕСТА ЛИСТ ТЯНУТ ВСЕГДА, поэтому браузеру запрещено забирать
   вертикальный жест себе под прокрутку. Без `touch-action: none` тело листа
   уезжало бы вместо листа. На тело листа это НЕ ставим: там прокрутка нужна,
   и жест перехватывается только когда список уже наверху (см. vv_sheet_drag.js). */
.vv-sheet-grip, .vv-sheet-head,
#vv-checkout-sheet .cosheet-grip, #vv-checkout-sheet .cosheet-title {
  touch-action: none;
}
/* Зона нажатия ручки — 22px полосы мало для пальца. Дотягиваем прозрачным
   псевдоэлементом до 44px, не меняя вид самой полоски: тем же приёмом в этом
   файле добраны крестик листа и кнопки шапки графика. */
.vv-sheet-grip { position: relative; }
.vv-sheet-grip::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 96px; height: 44px; transform: translate(-50%, -50%);
}

/* ⚠ НОЧЬЮ КРАЙ ЛИСТА НАДО ОБОЗНАЧИТЬ ЯВНО. Замер по пикселям снимка
   (проверка сравнивает поверхность листа с затемнённым фоном на 6 px выше
   его края): днём граница даёт 2,24 — видно сразу; ночью 1,15, то есть
   верхнего края листа фактически нет, лист сливается с экраном под собой.
   Причина ровно та, из-за которой в этом проекте уже обязали рамку карточкам
   настроек: ночью `--paper` почти совпадает с фоном, а тень MD3 (Elevation 1)
   на тёмном не читается вовсе — в Material её роль там берёт на себя более
   светлая поверхность, которой у нас нет.
   Это ГЕОМЕТРИЯ, а не палитра: добавляется линия в 1 px цветом `--line`,
   тем же токеном, что у всех карточек. Днём линию не ставим — там граница и
   так вдвое выше, а лишний контур утяжелил бы лист.
   Замер после правки (ночь): сама линия rgb(44,58,50) против фона rgb(19,26,22)
   даёт 1,48 — край перестал совпадать с поверхностью листа (1,15) и читается
   как отдельная черта. */
:root.vv-theme-night .vv-sheet-card,
.vv-theme-night .vv-sheet-card,
:root.vv-theme-night #vv-checkout-sheet .cosheet,
.vv-theme-night #vv-checkout-sheet .cosheet {
  border-top: 1px solid var(--line);
}

/* Пока лист едет за пальцем — никаких переходов и плавностей: они дают
   задержку между пальцем и листом, и лист кажется «залипающим».
   ⚠ `will-change` ЖИВЁТ ТОЛЬКО ЗДЕСЬ. Постоянный composited-слой под каждым
   открытым листом — плата ни за что: листы стоят на экране минутами, а едут
   доли секунды. */
.vv-sheet-card.vv-sheet-dragging,
#vv-checkout-sheet .cosheet.vv-sheet-dragging { animation: none; will-change: transform; }

/* ── Лист оформления покупки: та же геометрия ────────────────────────────────
   Он свёрстан отдельно ещё в design_v2.css (position:fixed, свой grip, свои
   скругления). Второй внешности у одной и той же вещи быть не должно —
   приводим к тем же числам. Селектор с id, потому что исходные правила там
   тоже с id: иначе они бы победили. */
#vv-checkout-sheet .cosheet-bg { background: rgba(0, 0, 0, .32); }
#vv-checkout-sheet .cosheet {
  max-width: 640px;
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .30), 0 -1px 3px 1px rgba(0, 0, 0, .15);
}
#vv-checkout-sheet .cosheet-grip {
  position: relative;
  width: 32px; height: 4px; margin: 9px auto;
  background: var(--ink-3, rgba(17, 24, 39, .5)); opacity: .4; border-radius: 2px;
}
#vv-checkout-sheet .cosheet-grip::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 96px; height: 44px; transform: translate(-50%, -50%);
}


/* ══════════════════════════════════════════════════════════════════════════
   ФАЗЫ СНА — .vvch-slp-*  (VVELL-393, 23.08.2026)
   Разметку строит vvChartNightHtml / vvChartNightsHtml в static/js/vvchart.js.

   ПОЧЕМУ ЭТО ПОРЯДКОВАЯ ШКАЛА ОДНОГО ТОНА, А НЕ ЧЕТЫРЕ РАЗНЫХ ЦВЕТА.
   Глубокий → быстрый → лёгкий — это ГЛУБИНА, у неё есть порядок. Четыре
   независимых оттенка на упорядоченном признаке — приём для КАТЕГОРИЙ, и
   читатель начинает искать смысл в самих оттенках. Ступени одного тона
   читаются как «глубже — насыщеннее», то есть кодируют ровно то, что есть.
   «Без сна» стоит ВНЕ этой шкалы намеренно: это не фаза сна, а перерыв, и
   тёплый тон отделяет его от трёх зелёных ступеней.

   ЧИСЛА НЕ НА ГЛАЗ — ПРОГНАНЫ ВАЛИДАТОРОМ ПАЛИТРЫ (scripts/validate_palette.js
   из скилла dataviz), режим ordinal, поверхность = --paper соответствующей темы:
     день  #0F5B3E · #3C8F6B · #86B7A0 — монотонная светлота, шаги ΔL ≥ 0.06,
                     единый тон (разброс 2°), светлый край 2.11:1 к бумаге;
     ночь  #93D6BB · #59C096 · #2E9E70 — то же, светлый край 4.58:1.
   Пара «без сна ↔ лёгкий» проверена отдельно на различимость при дальтонизме:
     день ΔE 16.5 (дейтан) / 19.9 (обычное зрение);
     ночь ΔE 12.3 / 17.8. Порог — 8 и 15 соответственно.
   Самая светлая ступень днём даёт 2.11:1, ниже графической нормы 3.0 — это
   ДОПУСТИМО ровно потому, что цвет здесь не единственный носитель: под полосой
   стоит легенда с именем фазы, её минутами и долей, то есть тот самый
   «видимый ярлык», которым это послабление и оплачивается.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --vvch-slp-deep:  #0F5B3E;
  --vvch-slp-rem:   #3C8F6B;
  --vvch-slp-light: #86B7A0;
  --vvch-slp-awake: #B0701C;   /* тот же тёплый, что у --vvch-warn: 3.79 */
}
:root.vv-theme-night,
.vv-theme-night {
  /* Ночью порядок светлоты ПЕРЕВЁРНУТ: на тёмной бумаге «сильнее» = светлее.
     Смысл сохраняется — самая глубокая фаза остаётся самой заметной. */
  --vvch-slp-deep:  #93D6BB;
  --vvch-slp-rem:   #59C096;
  --vvch-slp-light: #2E9E70;
  --vvch-slp-awake: #E09A55;
}

.vvch-slp--deep  { fill: var(--vvch-slp-deep); }
.vvch-slp--rem   { fill: var(--vvch-slp-rem); }
.vvch-slp--light { fill: var(--vvch-slp-light); }
.vvch-slp--awake { fill: var(--vvch-slp-awake); }

/* Полоса состава ночи. preserveAspectRatio="none" здесь допустим и нужен:
   в этом графике нет ни точек, ни текста внутри поля — только прямоугольники,
   растяжение которых по ширине ничего не искажает. */
.vvch--night .vvch-night-svg { height: 34px; }

.vvch-slp-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px;
}
.vvch-slp-leg {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12.5px; color: var(--ink-2);
}
.vvch-slp-leg b { font-weight: 600; color: var(--ink); }
.vvch-slp-num { color: var(--ink-3); }
/* Образец в легенде — квадрат, а не круг: он повторяет форму куска на полосе. */
.vvch-slp-sw {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
  align-self: center;
}
i.vvch-slp--deep  { background: var(--vvch-slp-deep); }
i.vvch-slp--rem   { background: var(--vvch-slp-rem); }
i.vvch-slp--light { background: var(--vvch-slp-light); }
i.vvch-slp--awake { background: var(--vvch-slp-awake); }

/* Ночь без разбивки: точка на нулевой линии. Не нулевой столбик — нулевая
   высота читается как «не спал», а мы всего лишь не знаем состав. */
.vvch-nights-miss { fill: var(--vvch-gap); }
.vvch--nights { margin-top: 6px; }


/* ── ЛЕНТА СУТОК (05.09.2026, VVELL-531) ──────────────────────────────────
   Рисует vvDayBandHtml в static/js/vvchart.js; заменила круг-циферблат
   «Когда были приёмы». Правило файла соблюдено: из SVG цвета приходят ТОЛЬКО
   классами, презентационных атрибутов с var() нет.
   ⚠ Цвет кружка приёма — та же шкала грейда, что на карточке товара
   (--vv-grade-N объявлены в design_v2.css, он грузится раньше premium).
   Классы .vv-grade-lN написаны для плашек и ставят background — в SVG это
   не работает вовсе, кружок вышел бы чёрным. Поэтому здесь ровно те же
   токены, но через fill (та же ловушка была у циферблата). */
:root       { --vvband-sleep: #C8D6E4; }
:root.vv-theme-night,
.vv-theme-night { --vvband-sleep: #3A5068; }

.vvch--band { margin-top: 4px; }
.vvband-svg { height: auto; overflow: visible; }
/* Толщина рисок не масштабируется вместе с viewBox — то же правило, что у
   остальных графиков (см. .vvch-line выше). */
.vvband-lead, .vvband-now, .vvband-tick { vector-effect: non-scaling-stroke; }

.vvband-bg    { fill: var(--line-soft, #EFE7D7); }
/* Окно сна — заливка внутри ленты, не отдельная полоса: сон и еда живут на
   одной оси, и разносить их на два ряда значит заставить сверять время
   глазами. Контраст к ленте 1.35 — это фон, а не носитель смысла: окно
   названо словами в легенде («Сон 00:54–06:22»). */
.vvband-sleep { fill: var(--vvband-sleep); }
.vvband-tick  { stroke: var(--paper, #FBF7EF); stroke-width: 1; opacity: .75; }

.vvband-ax { fill: var(--ink-3, #7C877D); font-size: 9.5px; font-weight: 600;
             font-variant-numeric: tabular-nums; }
.vvband-nm { fill: var(--ink-2, #5E6B62); font-size: 9px; font-weight: 600; }
.vvband-tm { fill: var(--ink, #23302A);   font-size: 9.5px; font-weight: 700;
             font-variant-numeric: tabular-nums; }
.vvband-lead { fill: none; stroke: var(--line, #E0D6C3); stroke-width: 1; }

/* Кружок приёма. Обводка цветом бумаги отделяет совпавшие по времени приёмы
   друг от друга — иначе верхний закрывает нижний целиком. */
.vvband-dot { stroke: var(--paper, #FBF7EF); stroke-width: 1.6; }
.vvband-dot.vv-grade-l1 { fill: var(--vv-grade-1, #90441C); }
.vvband-dot.vv-grade-l2 { fill: var(--vv-grade-2, #7F630B); }
.vvband-dot.vv-grade-l3 { fill: var(--vv-grade-3, #527E2E); }
.vvband-dot.vv-grade-l4 { fill: var(--vv-grade-4, #008573); }
/* Приём без оценки — серый, а не невидимый и не нулевой: мы просто не знаем. */
.vvband-dot.is-nolvl    { fill: var(--ink-4, #B9C0B6); }
.vvband-hit { fill: transparent; cursor: pointer; }
.vvband-hit.is-picked   { fill: rgba(0, 0, 0, .05); }

/* «Сейчас» — тонкая риска поперёк ленты. Тёплый тон тот же, что у целевой
   линии графиков: он уже значит «ориентир», а не «значение». */
.vvband-now     { fill: none; stroke: var(--vvch-target, #9C562C); stroke-width: 1.5; }
.vvband-now-cap { fill: var(--vvch-target, #9C562C); }

/* Легенда — она же крупная зона касания: кружок на ленте 12 px, пальцем в него
   не попасть, а правило приложения — 44 px (docs/FRONTEND.md). */
.vvband-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vvband-leg {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 4px 12px 4px 10px;
  border: 1px solid var(--line-soft, #EFE7D7); border-radius: var(--r-pill, 999px);
  background: none; font: inherit; font-size: 12.5px; color: var(--ink-2, #5E6B62);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.vvband-leg.is-static { cursor: default; }
.vvband-leg:not(.is-static):active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .vvband-leg:active { transform: none; } }
.vvband-leg.is-picked { border-color: var(--ink-3, #7C877D); }
.vvband-leg b { font-weight: 700; color: var(--ink, #23302A);
                font-variant-numeric: tabular-nums; }
.vvband-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.vvband-leg-dot.is-nolvl { background: var(--ink-4, #B9C0B6); }
.vvband-leg-dot.is-sleep { background: var(--vvband-sleep); }

/* Строка под лентой: до тапа — подсказка, после — что было в приёме.
   min-height, чтобы блок не подпрыгивал на первом же касании. */
.vvband-pick {
  margin-top: 8px; min-height: 18px;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-2, #5E6B62);
}



/* ── КНОПКИ-ПОДСКАЗКИ В ЧАТЕ КОРЗИНЫ (31.08.2026, VVELL-546) ──────────────
   Две породы кнопок, и разница видна глазом: обычная СПРАШИВАЕТ, зелёная
   МЕНЯЕТ корзину. До этой правки все кнопки выглядели одинаково и все
   возвращали текст — человек не мог отличить вопрос от действия. */
.vv-wish-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 2px;
}
.vv-wish-chip {
  border: 1px solid var(--line, #e6e2d8);
  background: var(--surface, #fbfaf7);
  color: var(--ink, #23301f);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.1;
  cursor: pointer;
}
.vv-wish-chip.is-do {
  border-color: var(--accent, #1f8a4c);
  color: var(--accent, #1f8a4c);
  font-weight: 600;
}
.vv-wish-chip:active { transform: scale(0.97); }


/* ── ЗАМОК ВИДЕН ВСЕГДА (01.09.2026, VVELL-529) ───────────────────────────
   Закреплено — обычный значок; не закреплено — бледный, но нажимаемый.
   Раньше значка не было вовсе, пока человек не догадается про свайп. */
.vv-lock-mark {
  background: none;
  border: 0;
  padding: 2px 4px;
  line-height: 1;
  cursor: pointer;
  color: var(--accent, #1f8a4c);
}
.vv-lock-mark.is-off { opacity: .32; color: var(--ink-3, #8a8a80); }
.vv-lock-mark.is-off:hover,
.vv-lock-mark.is-off:focus-visible { opacity: .7; }
.vv-lock-mark:active { transform: scale(.9); }

/* ============================================================
   ГОТОВИМ: карточка рецепта ВкусВилла с фотографией
   VVELL-636, 05.09.2026. Владелец: «добавить эти вместе с фотками,
   с этапами приготовления».

   ⚠ ПРАВИМ ЗДЕСЬ, А НЕ В design_v2.css, И ЭТО НЕ ЛЕНЬ. Каскад проекта —
   app.css → design_v2.css → premium.css → palette_sand.css, и premium.css
   идёт ПОЗЖЕ: правка в design_v2 при равной специфичности была бы перебита
   старым правилом отсюда же и «не применилась» без единой ошибки в консоли.

   ⚠ ШАПКА КАРТОЧКИ ПЕРЕВЕДЕНА С GRID НА FLEX. В design_v2 у неё сетка
   `1fr auto` с ЯВНЫМИ `grid-column` у заголовка, бейджей и шеврона. С фото
   колонок стало три, но фотографии может и не быть (файл не отдался — тег
   снимает себя сам), и жёсткие номера колонок оставляли бы в такой карточке
   дыру на месте снимка. Во flex номера колонок просто не действуют.
   ============================================================ */
#screen-cook .cook-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  column-gap: 12px;
  row-gap: 0;
  margin-bottom: 10px;
}
#screen-cook .cook-card-photo {
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-warm);
  align-self: flex-start;
}
#screen-cook .cook-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#screen-cook .cook-card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#screen-cook .cook-card-main .cook-card-badges { margin: 0; }
#screen-cook .cook-caret { flex: 0 0 auto; align-self: center; }
/* «6 порций · 1 ч 10 мин · 230 ккал/100 г» — числа из карточки рецепта, а не
   наши оценки: пустые значения строка не показывает вовсе. */
#screen-cook .cook-card-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.3;
}
#screen-cook .cook-descr {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 4px;
}
/* Ингредиенты: то, что уже лежит в корзине, помечено — человеку сразу видно,
   ради чего идти к плите, и что придётся докупить. */
#screen-cook .cook-ings { padding-left: 0; list-style: none; }
#screen-cook .cook-ings li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}
#screen-cook .cook-ings li > span:first-child { min-width: 0; }
#screen-cook .cook-ing-mark {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--vv-green-dark, #2E5D00);
}
#screen-cook .cook-ing-mark .wh-ic { width: 12px; height: 12px; vertical-align: -2px; }
#screen-cook .cook-ing-have > span:first-child { color: var(--ink); }
#screen-cook .cook-ing-miss > span:first-child { color: var(--ink-3); }
/* ⚠ ДЛИННОЕ СЛОВО ЛОМАЕТСЯ, А НЕ ВЫЛЕЗАЕТ ЗА КАРТОЧКУ. Замер на 400 px:
   «Карамелизированные яблоки для сырников» рядом с фотографией 92 px давало
   первой строке ~200 px при доступных ~180 — заголовок уезжал под правый край
   карточки. Названий такой длины в выгрузке много («Гратинированный сибас
   по-средиземноморски»), поэтому это правило, а не частный случай. */
/* Перенос по слогам (html lang=ru): «Карамелизированные» ломалось посреди слова
   без дефиса — снимок прода 04.09.2026 21:45. break-word остаётся страховкой. */
#screen-cook .cook-card-title { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }


/* ── ЛИСТ «ПЕРЕНЕСТИ В…» (05.09.2026, VVELL-635) ───────────────────────────
   Кнопка на позиции корзины и записи дневника вместо перетаскивания.
   Фон размыт, блоки приёмов появляются каскадом и показывают, что в приёме
   лежит сейчас (VVELL-640, без значков); текущий приём — пунктиром и «сейчас здесь». После
   переноса строка в новом приёме вспыхивает, чтобы глаз нашёл её сразу.
   Все цвета текста и подложек — из токенов темы; градиенты кружков одни
   и те же в день и ночь (на них белый значок). */
.vv-meal-btn-move {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: none; background: transparent; color: var(--ink-3); cursor: pointer;
  border-radius: 50%; transition: background .12s, color .12s;
}
.vv-meal-btn-move svg { width: 18px; height: 18px; }
.vv-meal-btn-move:hover, .vv-meal-btn-move:focus-visible { color: var(--ink); background: var(--line-soft); outline: none; }
#screen-cart .vv-meal-btn-move { min-width: 44px; min-height: 44px; }

.vv-move-bg {
  background: rgba(16, 20, 14, .34);
  -webkit-backdrop-filter: blur(14px) saturate(.55);
  backdrop-filter: blur(14px) saturate(.55);
  animation: vvMoveFade .2s ease-out;
}
.vv-move-bg.is-leaving { animation: vvMoveFadeOut .18s ease-in forwards; }
.vv-move-bg.is-leaving .vv-move-card { animation: vvSheetDown .18s ease-in forwards; }
@keyframes vvMoveFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vvMoveFadeOut { to { opacity: 0; } }
@keyframes vvSheetDown { to { transform: translateY(12%); opacity: 0; } }
.vv-move-card {
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .22);
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.vv-move-what {
  margin: -2px 0 12px; font-size: 13px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Блоки приёмов (05.09.2026, VVELL-640): без значков и градиентов — название
   приёма и то, что в нём лежит сейчас. Текущий приём — пунктиром, не нажимается. */
.vv-move-stack { display: flex; flex-direction: column; gap: 8px; }
.vv-move-block {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 13px 16px; text-align: left;
  border-radius: var(--r-md); border: 1px solid var(--line-soft);
  background: var(--paper); color: var(--ink); cursor: pointer;
  transition: transform .14s cubic-bezier(.2, .8, .2, 1), background .15s, border-color .15s;
  animation: vvMoveIn .3s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.vv-move-block:hover { background: var(--line-soft); }
.vv-move-block:active { transform: scale(.985); }
.vv-move-block:focus-visible { outline: 2px solid var(--green, #2F7A4E); outline-offset: 2px; }
.vv-move-block.is-now { cursor: default; background: transparent; border-style: dashed; }
.vv-move-block.is-now .vv-move-lbl { color: var(--ink-3); }
.vv-move-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vv-move-lbl { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.vv-move-badge { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vv-move-block.is-now .vv-move-badge { color: var(--green, #2F7A4E); font-weight: 600; }
.vv-move-list {
  font-size: 13px; line-height: 1.35; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vv-move-list.is-empty { font-style: italic; }
@keyframes vvMoveIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Кнопка переноса у позиции покупки в дневнике — компактнее, чем в корзине. */
#screen-progress .vv-dg-item .vv-meal-btn-move { width: 36px; height: 36px; flex: none; margin-right: -2px; }
#screen-progress .vv-dg-item .vv-meal-btn-move svg { width: 16px; height: 16px; }
#screen-progress .vv-dg-item.is-moved { animation: vvMovedGlow 1.5s ease-out; border-radius: var(--r-sm); }

/* Вода, чай, кофе в дневнике питания (VVELL-623). */
#screen-progress .vv-dg-fluids {
  margin: 12px 0 4px; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--paper);
}
#screen-progress .vv-dg-fl-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#screen-progress .vv-dg-fl-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
#screen-progress .vv-dg-fl-title svg { width: 16px; height: 16px; }
#screen-progress .vv-dg-fl-val { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
#screen-progress .vv-dg-fl-bar { height: 6px; border-radius: 3px; background: var(--line-soft); margin: 8px 0 10px; overflow: hidden; }
#screen-progress .vv-dg-fl-fill { height: 100%; border-radius: 3px; background: var(--green, #2F7A4E); transition: width .3s; }
/* VVELL-836: карточка «Тело» в дневнике (Сегодня → Дневник → Образ жизни) — у неё своего правила не было,
   кнопки шли inline и четвёртая переносилась; общая сетка на все места, где рисуется блок воды */
.vv-dg-fl-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }   /* карточка 290 px: 4 × 66 */
.vv-dg-fl-btn {
  min-height: 40px; padding: 8px 2px; border-radius: var(--r-sm); white-space: nowrap;
  border: 1px solid var(--line-soft); background: transparent; color: var(--ink);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .12s, background .15s;
}
.vv-dg-fl-btn:active { transform: scale(.97); }
/* VVELL-836 (10.09.2026): «кнопки не в одной строке» — четыре кнопки ровной сеткой, на 390 px в один ряд */
#screen-progress .vv-dg-fl-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }   /* дневник «Образ жизни» живёт внутри #screen-progress: карточка 290 px */
#screen-progress .vv-dg-fl-btn {
  min-height: 40px; padding: 8px 2px; white-space: nowrap; border-radius: var(--r-sm);
  border: 1px solid var(--line-soft); background: transparent; color: var(--ink);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .12s, background .15s;
}
#screen-progress .vv-dg-fl-btn:hover { background: var(--line-soft); }
#screen-progress .vv-dg-fl-btn:active { transform: scale(.97); }
#screen-progress .vv-dg-fl-hint { margin-top: 8px; font-size: 12px; color: var(--ink-3); }

.vv-meal-item.is-moved { animation: vvMovedGlow 1.5s ease-out; border-radius: var(--r-md); }
@keyframes vvMovedGlow {
  0%   { box-shadow: 0 0 0 0 rgba(47, 122, 78, .55); background: var(--vv-green-tint); }
  60%  { box-shadow: 0 0 0 14px rgba(47, 122, 78, 0); }
  100% { box-shadow: 0 0 0 14px rgba(47, 122, 78, 0); background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .vv-move-block, .vv-move-bg, .vv-move-bg.is-leaving, .vv-move-bg.is-leaving .vv-move-card, .vv-meal-item.is-moved, #screen-progress .vv-dg-item.is-moved { animation: none; }
  .vv-move-block:hover, .vv-move-block:active { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   «ЧТО КУПИЛ» — секция Дневника (VVELL-631, 05.09.2026)
   Владелец: «должно быть накоплено, что я купил, в трекинге, либо крестик,
   чтобы удалил — мало ли что-то испортилось».
   Сетка карточек, а не список строк: две недели покупок — это 70–90 позиций,
   и списком экран уходит на десять высот телефона (та же ошибка, из-за которой
   пересобирали «Фундамент»).
   ═══════════════════════════════════════════════════════════════════════ */
#screen-progress .vv-pn { margin-top: 22px; }
#screen-progress .vv-pn-head { margin-bottom: 10px; }
#screen-progress .vv-pn-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 17px; font-weight: 800; color: var(--ink);
}
#screen-progress .vv-pn-sub { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
#screen-progress .vv-pn-empty {
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line-soft);
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
}
#screen-progress .vv-pn-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
#screen-progress .vv-pn-card {
  position: relative;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  overflow: hidden;
}
/* Тело карточки — кнопка целиком: тап открывает карточку товара, как в дневнике */
#screen-progress .vv-pn-body {
  display: block; width: 100%; padding: 10px 10px 12px; cursor: pointer;
  border: none; background: transparent; font: inherit; text-align: left;
}
/* ⚠ СТРОКА ТОВАРА ОБЪЯВЛЕНА БЕЗ `#screen-progress`, И ЭТО НЕ НЕБРЕЖНОСТЬ.
   Те же классы рисует лист возврата, а лист живёт в `body`, а не внутри экрана.
   Пока эти правила были под `#screen-progress`, в листе картинка растягивалась
   без `object-fit`, имя не обрезалось, а подпись «испортилось» шла тем же
   кеглем, что и название, и читалась как часть имени товара. */
.vv-pn-img {
  display: block; width: 100%; height: 96px; border-radius: var(--r-xs); object-fit: cover;
  background: var(--line-soft);
}
/* Две строки, а не сколько получится: у товаров ВкусВилла названия длиной в
   предложение («Говядина томленая в гранатовом соке с картофельным пюре и
   стручковой фасолью»), и без обрезки карточки в сетке разъезжаются по высоте
   втрое. Полное имя человек видит в карточке товара — она открывается тапом. */
.vv-pn-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.3;
  color: var(--ink);
}
#screen-progress .vv-pn-card .vv-pn-name { min-height: 34px; }
.vv-pn-meta { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); }
.vv-pn-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vv-pn-eaten {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--vv-green-dark);
}
.vv-pn-eaten svg { width: 12px; height: 12px; }
.vv-pn-again { font-size: 11px; color: var(--ink-3); }
/* Крестик: 44×44 — норма касания. Промах здесь стирает товар из списка, а не
   красит кнопку, поэтому поблажки по размеру тут быть не может. */
#screen-progress .vv-pn-x {
  position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: none; background: transparent; color: var(--ink-3);
  font-size: 22px; line-height: 1;
}
#screen-progress .vv-pn-more,
#screen-progress .vv-pn-gone {
  width: 100%; min-height: 44px; margin-top: 8px; padding: 11px 16px; cursor: pointer;
  background: transparent; border: 1px dashed var(--line); border-radius: var(--r-md);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3);
}
/* Лист «Убрать из купленного»: причины — крупные кнопки в столбик, а не мелкий
   выбор в строке. Ответов два, и оба одинаково законны. */
.vv-pn-reasons { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vv-pn-reasons .vv-pn-reason { min-height: 48px; font-size: 14px; }
.vv-pn-why { margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.vv-pn-gone-list { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.vv-pn-gone-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.vv-pn-gone-row:last-child { border-bottom: none; }
.vv-pn-gone-row .vv-pn-img { width: 40px; height: 40px; flex: none; border-radius: var(--r-xs); }
.vv-pn-gone-body { flex: 1; min-width: 0; }
.vv-pn-gone-body .vv-pn-name { margin-top: 0; }
.vv-pn-back { flex: none; min-height: 44px; padding: 9px 14px; font-size: 13px; }


/* ── Срок отказа вышел — вопрос «Возвращаем?» (VVELL-569, 05.09.2026) ── */
.vv-rule-ask { margin: 10px 0 2px; display: flex; flex-direction: column; gap: 8px; }
.vv-rule-ask-row { background: var(--vv-surface-2, #f6f4ef); border: 1px solid var(--vv-line, #e6e2da);
  border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.vv-rule-ask-t { font-size: 14px; line-height: 1.4; color: var(--ink, #1f1d1a); }
.vv-rule-ans { display: flex; flex-wrap: wrap; gap: 8px; }
.vv-rule-ans button { min-height: 36px; padding: 0 12px; border-radius: var(--r-xs); font-size: 13px;
  border: 1px solid var(--vv-line, #e6e2da); background: var(--vv-surface, #fff); color: var(--ink, #1f1d1a); }
.vv-rule-ans button.is-main { background: var(--ink, #1f1d1a); color: #fff; border-color: var(--ink, #1f1d1a); }
.vv-wish-rule.is-expired .vv-wish-rule-t { display: flex; flex-direction: column; gap: 6px; }

/* ═══ КОМПАКТНАЯ СТРОКА КОРЗИНЫ (05.09.2026, вечер; владелец: «в самой корзине
   продукты — какие-то блоки огромные, много пустого пространства») ═══
   Было 199 px на строку: столбик из четырёх значков задавал высоту, счётчик,
   цена и чипы шли четырьмя строками. Стало: фото 56, две строки названия,
   строка роли, ОДНА строка «счётчик · вес · цена · чипы», справа два значка
   («заменить», «убрать») и маленький замок (VVELL-529 — он остаётся видимым);
   «перенести» и «закрепить» — в листе товара. Файл грузится после design_v2,
   поэтому здесь снимаются его min-height и раскладка блока VVELL-327. */
#screen-cart .vv-meal-item { min-height: 0 !important; padding: 10px 14px !important; gap: 12px !important; }
#screen-cart .vv-meal-img { width: 56px !important; height: 56px !important; align-self: flex-start; }
#screen-cart .vv-meal-name { min-height: 0 !important; font-size: 13.5px !important; }
#screen-cart .vv-meal-role { min-height: 0; margin-top: 0; flex: 0 1 auto; min-width: 0; }
/* роль и чипы — одной строкой: «Фрукт  ✓ Беру» */
#screen-cart .vv-meal-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; margin-top: 2px; }
#screen-cart .vv-meal-sub:empty { display: none; }
#screen-cart .vv-chips { margin: 0; flex: 0 0 auto; }
/* счётчик · подпись · цена — одной строкой без переноса; длинная подпись
   («упак 250 г · ~2 порц.») переносится ВНУТРИ своей колонки, а не вниз */
#screen-cart .vv-meal-line { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 8px; margin-top: 6px; }
#screen-cart .vv-meal-line .vv-qty { margin: 0; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
/* «−/+» подальше от замочка на углу фото (VVELL-743, владелец 07.09.2026: «минус плюс
   подвинуть правее, так как она близко к замочку»): счётчик прижат к цене справа,
   слева под названием остаётся воздух, промахов по замку нет */
#screen-cart .vv-meal-line { justify-content: flex-end; }
#screen-cart .vv-meal-line .vv-qty { flex: 0 1 auto !important; margin-left: auto !important; justify-content: flex-end; }
#screen-cart .vv-meal-line .vv-meal-price { margin-left: 10px !important; }
/* подпись не рвём по словам: короткая («200 г») стоит рядом с кнопками, длинная
   («упак 100 г · ~3 порц.») целиком уходит под кнопки — 3 строки-обрывка хуже */
#screen-cart .vv-qty-lab { flex: 0 0 auto !important; margin-left: 4px !important; white-space: nowrap !important; line-height: 1.2; }
#screen-cart .vv-meal-price { margin: 0 0 0 auto !important; flex: 0 0 auto; font-size: 13.5px; line-height: 24px; white-space: nowrap; }
#screen-cart .vv-meal-actions { flex-direction: column; gap: 8px; align-self: flex-start; align-items: center; }
/* обе кнопки — одинаковые кружки с тонкой обводкой; раньше «заменить» была голым значком, а «убрать» — в кружке */
#screen-cart .vv-meal-btn-swap, #screen-cart .vv-meal-btn-del, #screen-cart .vv-meal-btn-move {
  width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; position: relative;
  border: 1px solid var(--line, #E8E1D4) !important; border-radius: 50% !important; background: var(--dv2-surface, #fff) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; }
#screen-cart .vv-meal-btn-swap { color: var(--dv2-green-dark, #1F6B45) !important; }
#screen-cart .vv-meal-btn-del { color: var(--ink-3, #8a8a80) !important; }
#screen-cart .vv-meal-btn-swap .wh-ic, #screen-cart .vv-meal-btn-del .wh-ic { width: 16px !important; height: 16px !important; }
/* зона нажатия 48 px при значке 36 — как у кнопок счётчика */
#screen-cart .vv-meal-btn-swap::after, #screen-cart .vv-meal-btn-del::after, #screen-cart .vv-meal-btn-move::after { content: ''; position: absolute; inset: -6px; }
/* «→ Перенести» в строке вместо «×» (VVELL-658): тот же кружок, что у «заменить» */
#screen-cart .vv-meal-btn-move { color: var(--dv2-green-dark, #1F6B45) !important; margin: 0 !important; }
#screen-cart .vv-meal-btn-move svg { width: 17px !important; height: 17px !important; }
/* «−» при одной упаковке = убрать: чуть заметнее, чем обычный минус */
#screen-cart .vv-qty-b-rm { opacity: 1 !important; color: var(--ink-3, #8a8a80) !important; }
/* замок — на углу фото (VVELL-529: виден всегда), а не третьим значком в столбике: столбик задавал высоту строки */
#screen-cart .vv-meal-pic { position: relative; flex: 0 0 56px; width: 56px; height: 56px; align-self: flex-start; }
#screen-cart .vv-meal-pic .vv-meal-img { display: block; }
#screen-cart .vv-lock-mark { position: absolute; right: -7px; bottom: -7px; width: 24px; height: 24px; min-width: 24px !important; min-height: 24px !important;
  padding: 0; border-radius: 50%; background: var(--dv2-surface, #fff); border: 1px solid var(--line, #E8E1D4);
  display: inline-flex; align-items: center; justify-content: center; }
#screen-cart .vv-lock-mark::after { content: ''; position: absolute; inset: -10px; }
#screen-cart .vv-lock-mark svg { width: 13px; height: 13px; }
#screen-cart .vv-lock-mark.is-off { opacity: .55; }
#screen-cart .vv-lock-mark:not(.is-off) { color: var(--dv2-green-dark, #1F6B45); border-color: var(--dv2-green-dark, #1F6B45); opacity: 1; }
/* Лист товара: действия со строкой */
.pc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.pc-act { font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--dv2-border, #E8E1D4); background: var(--dv2-surface, #fff); color: var(--dv2-text, #10170F); cursor: pointer; min-height: 40px; }
.pc-act-danger { color: var(--dv2-berry, #D7144B); }

/* ═══ НАПРАВЛЕНИЕ Б — ГЕОМЕТРИЧЕСКОЕ, НА ВСЕ ЭКРАНЫ (05.09.2026, VVELL-650) ═══
   Токены пресета переключены в design_v2.css (--dv2-font-heading = Unbounded).
   Здесь — то, что пресет не покрывает: экраны без своих правил заголовка
   (Готовим, Возраст, Анализы, Симптомы, VVellness+) шли по app.css .h-1
   30 px/500; и eyebrow, который на Корзине/Знаниях/Дневнике/Прогрессе был
   разжат до голого капса — Б возвращает пилюлю на зелёной подложке. */
.chat-header .h-1 {
  font-family: var(--dv2-font-heading, var(--font-display)) !important;
  font-size: var(--dv2-h1-size, 23px) !important;
  font-weight: var(--dv2-h1-wt, 600) !important;
  letter-spacing: var(--dv2-h1-ls, -0.02em) !important;
  line-height: 1.15 !important;
  text-wrap: balance;
}
.chat-header .h-1 em { color: var(--vv-green) !important; font-style: normal !important; }
.chat-header .eyebrow, .chat-header .eyebrow.tint,
#screen-cart > .chat-header .eyebrow, #screen-lifehacks > .chat-header .eyebrow,
#screen-progress > .chat-header .eyebrow, #screen-stats > .chat-header .eyebrow {
  display: inline-flex !important; align-items: center !important;
  font-family: var(--font-body) !important; font-size: 10.5px !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: 0.07em !important;
  color: var(--vv-green-dark) !important; background: var(--vv-green-tint) !important;
  padding: 5px 10px !important; border-radius: 999px !important; margin-bottom: 8px !important;
}

/* ═══ ЮЗЕР-СТОРИ (05.09.2026, VVELL-650): цели одним местом, семья листом,
   один шаг после заказа ═══ */
.vv-goals-card { max-height: 88vh; display: flex; flex-direction: column; }
.vv-goals-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 8px; }
.vv-goals-grid { margin-bottom: 8px; }
.vv-goals-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft, #EFE7D7); }
.vv-fam-sheet-card { height: 88vh; display: flex; flex-direction: column; padding: 8px 0 0 !important; }
.vv-fam-sheet-card .vv-sheet-head { padding-left: 16px; padding-right: 16px; }
.vv-fam-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; background: transparent; }
.vv-fam-who { flex: 0 0 44px; min-height: 44px; width: 44px; border-radius: 999px; border: 1.5px solid var(--line, #E8E6DC);
  background: var(--card, #fff); color: var(--vv-green-dark, #1F6B45); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.vv-fam-who svg { width: 20px; height: 20px; }
.vv-os-acts-one { flex-direction: column; gap: 4px; }
.vv-os-act.is-primary { background: var(--vv-green-dark, #1F6B45) !important; border-color: transparent !important; color: #fff; }
.vv-os-act.is-primary b, .vv-os-act.is-primary span { color: #fff; }
.vv-os-act.is-primary span { opacity: .85; }
.vv-os-act.is-quiet { min-height: 40px; background: none !important; border: 0 !important; font-weight: 700; font-size: 13px;
  color: var(--vv-green-dark, #1F6B45); padding: 6px; }

/* ═══ ЗАКРЕПЛЁННЫЕ СТРОКИ НЕ СЛИПАЮТСЯ (05.09.2026, владелец: «когда несколько
   подряд блокирую — слипаются некрасиво в синей обводке; идея обводки
   интересная») ═══ Было: синяя обводка outline на каждой строке плюс общая
   линия-разделитель — соседние закреплённые сливались в одну синюю колбасу с
   двойными линиями. Стало: закреплённая строка — карточка в цвете приложения
   (зелёный, а не чужой синий): мягкая заливка, тонкая рамка внутрь, зазор
   6 px до соседей, разделитель под ней спрятан; замок на фото заливается. */
#screen-cart .vv-meal-item.is-locked {
  background: var(--vv-green-tint, #E7F7E9) !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1.5px rgba(21, 145, 69, .45);
  border-radius: 16px !important;
  margin: 6px 0 !important;
  border-bottom-color: transparent !important;
}
#screen-cart .vv-meal-item.is-locked + .vv-meal-item.is-locked { margin-top: 0 !important; }
#screen-cart .vv-meal-item.is-locked .vv-lock-mark {
  background: var(--vv-green-dark, #159145) !important; border-color: var(--vv-green-dark, #159145) !important;
  color: #fff !important; opacity: 1 !important; }

/* ═══ ВОЗРАСТ А + КРИВАЯ ДНЯ (05.09.2026 ночь, VVELL-661 / VVELL-629) ═══ */
#screen-age .vv-age-hero-a { text-align: center; }
#screen-age .vv-age-hero-a .vv-age-k { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
#screen-age .vv-age-hero-a .vv-age-num { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -.02em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
#screen-age .vv-age-line { font-size: 13px; color: var(--ink-3); }
#screen-age .vv-age-pill { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; opacity: 0; transform: translateY(4px); transition: opacity .5s, transform .5s; }
#screen-age .vv-age-pill.is-in { opacity: 1; transform: none; }
#screen-age .vv-age-pill.is-good { background: var(--vv-green-tint); color: var(--vv-green-dark); }
#screen-age .vv-age-pill.is-warn { background: #FBE3E9; color: #B0123D; }
#screen-age .vv-age-scale { width: 100%; max-width: 300px; height: auto; margin: 10px auto 2px; display: block; }
#screen-age .vv-age-recalc { font-size: 12px; color: var(--ink-3); margin-top: 6px; display: flex; gap: 6px; align-items: center; justify-content: center; }
#screen-age .vv-age-info { border: 0; background: var(--bg-warm, #F1EAD9); color: var(--ink-3); width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
#screen-age .vv-age-info svg { width: 14px; height: 14px; }
#screen-age .vv-age-stale { display: none; }
#screen-age .vv-age-fx-bar { position: relative; height: 8px; border-radius: 999px; background: var(--bg-warm, #EFE7D6); margin: 8px 0 4px; overflow: hidden; }
#screen-age .vv-age-fx-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
#screen-age .vv-age-fx-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
#screen-age .vv-age-fx-fill.is-good { background: var(--vv-green-dark); }
#screen-age .vv-age-fx-fill.is-warn { background: var(--vv-berry); }
#screen-age .vv-age-hist { width: 100%; height: auto; display: block; }
.vvcurve { width: 100%; }
.vvcurve-svg { width: 100%; height: auto; display: block; overflow: visible; }
.vvcurve-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: vvcurveDraw 1.8s ease-out forwards; }
@keyframes vvcurveDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .vvcurve-line { animation: none; stroke-dashoffset: 0; } }
.vvcurve-cap { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.vvcurve-note { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* ═══ ДНЕВНИК А — одна лента дня (06.09.2026 ночь, VVELL-661) ═══ */
#screen-progress .vv-dt { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 12px 14px 10px; margin-bottom: 12px; }
#screen-progress .vv-dt-line { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
#screen-progress .vv-dt-line b { color: var(--ink); font-weight: 800; }
#screen-progress .vv-dt-pill { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
#screen-progress .vv-dt-pill.is-good { background: var(--vv-green-tint); color: var(--vv-green-dark); }
#screen-progress .vv-dt-pill.is-mid { background: #F5EBD2; color: #8A6A1F; }
#screen-progress .vv-dt-pill.is-warn { background: #FBE3E9; color: #B0123D; }
#screen-progress .vv-tl .vv-dg-rows { position: relative; }
#screen-progress .vv-tl .vv-dg-rows::before { content: ''; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: var(--line-soft, #EFE7D6); border-radius: 2px; }
#screen-progress .vv-tl .vv-dg-row-head, #screen-progress .vv-tl .vv-dg-ask-head { display: flex; align-items: center; gap: 8px; }
#screen-progress .vv-tl-t { flex: 0 0 44px; font-size: 11px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; position: relative; z-index: 1; text-align: center; background: var(--card); border-radius: 999px; padding: 2px 0; }
#screen-progress .vv-tl-sleep .vv-dg-row-name { font-weight: 700; }
#screen-progress .vv-tl-sleep .vv-dg-row-meta { margin-left: auto; font-size: 12px; color: var(--ink-3); }
#screen-progress .vv-tl-add { width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; border: 1px dashed var(--line); background: transparent; cursor: pointer; font: inherit; color: var(--ink); }
#screen-progress .vv-tl-add .vv-tl-t { color: var(--vv-green-dark); font-size: 16px; }
#screen-progress .vv-tl-add .vv-dg-row-meta { margin-left: auto; font-size: 12px; color: var(--ink-3); }
#screen-progress .vv-body { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 12px 14px; margin: 12px 0; }
#screen-progress .vv-body-head { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; padding: 0 0 8px; cursor: pointer; font: inherit; color: var(--ink); }
#screen-progress .vv-body-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
#screen-progress .vv-body-more { font-size: 12px; color: var(--vv-green-dark); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
#screen-progress .vv-body-more svg { width: 14px; height: 14px; }
#screen-progress .vv-body-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
#screen-progress .vv-body-tile { background: var(--bg-warm, #F7F0E4); border-radius: 14px; padding: 8px 6px; text-align: center; font-size: 11px; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 2px; }
#screen-progress .vv-body-tile b { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }
#screen-progress .vv-body-ic svg { width: 16px; height: 16px; color: var(--vv-green-dark); }
#screen-progress .vv-body .vv-dg-fluids { margin: 0; }
#screen-progress .vv-pcard { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 12px 14px; margin: 0 0 12px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
#screen-progress .vv-pcard-ic { flex: 0 0 36px; height: 36px; border-radius: 12px; background: var(--vv-green-tint); color: var(--vv-green-dark); display: inline-flex; align-items: center; justify-content: center; }
#screen-progress .vv-pcard-ic svg { width: 18px; height: 18px; }
#screen-progress .vv-pcard-txt { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-3); }
#screen-progress .vv-pcard-txt b { display: block; font-size: 14px; color: var(--ink); }
#screen-progress .vv-pcard-chev svg { width: 16px; height: 16px; color: var(--ink-3); }
.vv-body-sheet-card, .vv-pantry-sheet-card { max-height: 88vh; overflow-y: auto; }

/* ═══ ЛИСТЫ «ТЕЛО» И «ЧТО КУПИЛ» (Дневник А, 06.09.2026): те же правила, что у
   #screen-progress, — листы живут в body, и экранная привязка до них не доезжала.
   Сгенерировано скриптом из design_v2.css и premium.css, править — там. ═══ */
#vv-body-sheet .vv-ld-header, #vv-pantry-sheet .vv-ld-header {
  padding: 0 0 12px !important;
}
#vv-body-sheet .vv-ld-h1, #vv-pantry-sheet .vv-ld-h1 {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
#vv-body-sheet .vv-ld-sub, #vv-pantry-sheet .vv-ld-sub {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
}
#vv-body-sheet .vv-ld-summary, #vv-pantry-sheet .vv-ld-summary {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important;
  margin: 0 0 16px !important;
  box-shadow: var(--sh-1) !important;
}
#vv-body-sheet .vv-ld-line, #vv-pantry-sheet .vv-ld-line {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
}
#vv-body-sheet .vv-ld-line span:first-child, #vv-pantry-sheet .vv-ld-line span:first-child {
  font-weight: 700 !important;
  color: var(--ink) !important;
}
#vv-body-sheet .vv-ld-ok, #vv-pantry-sheet .vv-ld-ok {
  color: var(--vv-green) !important;
  font-weight: 700 !important;
}
#vv-body-sheet .vv-ld-section, #vv-pantry-sheet .vv-ld-section {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
  border-top: none !important;
  box-shadow: var(--sh-1) !important;
}
#vv-body-sheet .vv-ld-stitle, #vv-pantry-sheet .vv-ld-stitle {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: 12px !important;
}
#vv-body-sheet .vv-ld-bar, #vv-pantry-sheet .vv-ld-bar {
  height: 6px !important;
  background: var(--line-soft) !important;
  border-radius: var(--r-pill) !important;
}
#vv-body-sheet .vv-ld-bar-fill, #vv-pantry-sheet .vv-ld-bar-fill {
  border-radius: var(--r-pill) !important;
  background: var(--vv-green) !important;
}
#vv-body-sheet .vv-ld-pval, #vv-pantry-sheet .vv-ld-pval {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-3) !important;
}
#vv-body-sheet .vv-ld-qbtn, #vv-pantry-sheet .vv-ld-qbtn {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--line) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  transition: all .15s !important;
}
#vv-body-sheet .vv-ld-qbtn:hover, #vv-pantry-sheet .vv-ld-qbtn:hover {
  background: var(--vv-green-tint) !important;
  border-color: var(--vv-green) !important;
  color: var(--vv-green-dark) !important;
}
#vv-body-sheet .vv-ld-qbtn:active, #vv-pantry-sheet .vv-ld-qbtn:active {
  transform: scale(.96) !important;
  background: var(--vv-green-tint) !important;
}
#vv-body-sheet .vv-ld-coffee, #vv-pantry-sheet .vv-ld-coffee {
  color: var(--ink-3) !important;
  border-style: dashed !important;
}
#vv-body-sheet .vv-ld-hint, #vv-pantry-sheet .vv-ld-hint {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--ink-3) !important;
}
#vv-body-sheet .vv-ld-habit, #vv-pantry-sheet .vv-ld-habit {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  transition: all .15s !important;
}
#vv-body-sheet .vv-ld-habit.is-done, #vv-pantry-sheet .vv-ld-habit.is-done {
  border-color: rgba(45,190,100,.25) !important;
  background: var(--vv-green-tint) !important;
}
#vv-body-sheet .vv-ld-htitle, #vv-pantry-sheet .vv-ld-htitle {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
#vv-body-sheet .vv-ld-hstreak, #vv-pantry-sheet .vv-ld-hstreak {
  font-size: 11px !important;
  color: var(--vv-orange, #E8731A) !important;
  font-weight: 700 !important;
}
#vv-body-sheet .vv-ld-hbtn, #vv-pantry-sheet .vv-ld-hbtn {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: var(--r-pill) !important;
  border: 1.5px solid var(--vv-green) !important;
  background: transparent !important;
  color: var(--vv-green-dark) !important;
}
#vv-body-sheet .vv-ld-hbtn:hover, #vv-pantry-sheet .vv-ld-hbtn:hover {
  background: var(--vv-green-tint) !important;
}
#vv-body-sheet .vv-ld-hbtn.is-done, #vv-pantry-sheet .vv-ld-hbtn.is-done {
  background: var(--vv-green) !important;
  color: white !important;
  border-color: var(--vv-green) !important;
}
#vv-body-sheet .vv-ld-empty, #vv-pantry-sheet .vv-ld-empty {
  text-align: center !important;
  padding: 28px 20px !important;
}
#vv-body-sheet .vv-ld-empty-msg, #vv-pantry-sheet .vv-ld-empty-msg {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}
#vv-body-sheet .vv-ld-empty .btn, #vv-pantry-sheet .vv-ld-empty .btn {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
}
#vv-body-sheet .vv-ld-habit-btn, #vv-pantry-sheet .vv-ld-habit-btn, #vv-body-sheet .vv-ld-section button, #vv-pantry-sheet .vv-ld-section button {
  min-height: 44px !important;
  padding: 9px 14px !important;
}
#vv-body-sheet .wkb-food-day-totals, #vv-pantry-sheet .wkb-food-day-totals, #vv-body-sheet .wkb-food-meal-block, #vv-pantry-sheet .wkb-food-meal-block, #vv-body-sheet .vv-ld-summary, #vv-pantry-sheet .vv-ld-summary, #vv-body-sheet .vv-ld-section, #vv-pantry-sheet .vv-ld-section {
  padding: 14px 16px !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: 12px !important;
}
#vv-body-sheet .wkb-pane-title, #vv-pantry-sheet .wkb-pane-title, #vv-body-sheet .vv-ld-h1, #vv-pantry-sheet .vv-ld-h1 {
  font-family: var(--font-display, var(--font-body)) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}
#vv-body-sheet .wkb-food-meal-all.is-done, #vv-pantry-sheet .wkb-food-meal-all.is-done, #vv-body-sheet .vv-meal-item.is-eaten .vv-meal-btn-eat, #vv-pantry-sheet .vv-meal-item.is-eaten .vv-meal-btn-eat, #vv-body-sheet .vv-ld-hbtn.is-done, #vv-pantry-sheet .vv-ld-hbtn.is-done {
  color: var(--paper) !important;
}
#vv-body-sheet .vv-ld-habit.is-done, #vv-pantry-sheet .vv-ld-habit.is-done { border-color: var(--vv-green) !important; }
#vv-body-sheet .vv-ld-line-l, #vv-pantry-sheet .vv-ld-line-l { display: inline-flex; align-items: center; gap: 7px; }
#vv-body-sheet .vv-ld-line-l svg, #vv-pantry-sheet .vv-ld-line-l svg { width: 15px; height: 15px; color: var(--ink-3); }
#vv-body-sheet .vv-ld-src, #vv-pantry-sheet .vv-ld-src {
  display: block; font-style: normal; font-size: 10px; font-weight: 700;
  color: var(--ink-3); text-align: right; margin-top: 1px;
}
#vv-body-sheet .vv-ld-sleep, #vv-pantry-sheet .vv-ld-sleep {
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
#vv-body-sheet .vv-ld-sleep-q, #vv-pantry-sheet .vv-ld-sleep-q {
  font-family: var(--font-display, var(--font-body));
  font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 10px;
}
#vv-body-sheet .vv-ld-sleep-pills, #vv-pantry-sheet .vv-ld-sleep-pills { display: flex; gap: 6px; }
#vv-body-sheet .vv-ld-sleep-pill, #vv-pantry-sheet .vv-ld-sleep-pill {
  flex: 1; min-height: 56px; padding: 8px 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  font: inherit; color: var(--ink);
}
#vv-body-sheet .vv-ld-sleep-pill b, #vv-pantry-sheet .vv-ld-sleep-pill b { font-size: 14px; font-weight: 800; }
#vv-body-sheet .vv-ld-sleep-pill span, #vv-pantry-sheet .vv-ld-sleep-pill span { font-size: 11px; color: var(--ink-3); }
#vv-body-sheet .vv-ld-sleep-pill:active, #vv-pantry-sheet .vv-ld-sleep-pill:active { background: var(--vv-green-tint); border-color: var(--vv-green); }
#vv-body-sheet .vv-ld-stitle, #vv-pantry-sheet .vv-ld-stitle {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display, var(--font-body));
  font-size: 15px; font-weight: 800; color: var(--ink);
}
#vv-body-sheet .vv-ld-stitle svg, #vv-pantry-sheet .vv-ld-stitle svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
#vv-body-sheet .vv-ld-overall, #vv-pantry-sheet .vv-ld-overall {
  font-family: var(--font-display, var(--font-body));
  font-size: 16px; font-weight: 800; color: var(--ink);
}
#vv-body-sheet .vv-ld-overall-sub, #vv-pantry-sheet .vv-ld-overall-sub { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--ink-3); }
#vv-body-sheet .vv-ld-auto, #vv-pantry-sheet .vv-ld-auto {
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-warm); color: var(--ink-3);
  font-size: 12px; line-height: 1.35;
}
#vv-body-sheet .vv-ld-qbtns, #vv-pantry-sheet .vv-ld-qbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#vv-body-sheet .vv-ld-qbtn, #vv-pantry-sheet .vv-ld-qbtn { min-height: 44px; padding: 11px 14px; font-size: 13px; }
#vv-body-sheet .vv-ld-auto, #vv-pantry-sheet .vv-ld-auto {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; width: 100%;
}
#vv-body-sheet .vv-ld-auto.is-manual, #vv-pantry-sheet .vv-ld-auto.is-manual { color: var(--vv-clay); font-weight: 600; }
#vv-body-sheet .vv-ld-src-btn, #vv-pantry-sheet .vv-ld-src-btn {
  min-height: 36px; padding: 7px 14px; border: none; border-radius: 999px;
  background: var(--paper); color: var(--vv-green-dark);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
#vv-body-sheet .vv-ld-manual-hidden, #vv-pantry-sheet .vv-ld-manual-hidden { display: none; width: 100%; gap: 8px; margin-top: 8px; }
#vv-body-sheet .vv-ld-manual-hidden.is-open, #vv-pantry-sheet .vv-ld-manual-hidden.is-open { display: flex; flex-wrap: wrap; }
#vv-body-sheet .wkb-found-card, #vv-pantry-sheet .wkb-found-card { cursor: pointer; }
#vv-body-sheet .wkb-found-card:not(.is-done):active, #vv-pantry-sheet .wkb-found-card:not(.is-done):active { transform: scale(.99); }
#vv-body-sheet .wkb-found-sum, #vv-pantry-sheet .wkb-found-sum { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); margin: 4px 0 8px; }
#vv-body-sheet .wkb-found-state, #vv-pantry-sheet .wkb-found-state { display: flex; align-items: center; gap: 8px; min-height: 24px; }
#vv-body-sheet .wkb-found-on, #vv-pantry-sheet .wkb-found-on { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--vv-green-dark); }
#vv-body-sheet .wkb-found-add, #vv-pantry-sheet .wkb-found-add { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
#vv-body-sheet .wkb-found-on .wh-ic, #vv-pantry-sheet .wkb-found-on .wh-ic, #vv-body-sheet .wkb-found-add .wh-ic, #vv-pantry-sheet .wkb-found-add .wh-ic { width: 14px; height: 14px; vertical-align: 0; }
#vv-body-sheet .wkb-found-golink, #vv-pantry-sheet .wkb-found-golink {
  min-height: 32px; padding: 4px 0; border: none; background: transparent;
  color: var(--vv-green-dark); font: inherit; font-size: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
#vv-body-sheet .wkb-mine .vv-ld-hbtn .wh-ic, #vv-pantry-sheet .wkb-mine .vv-ld-hbtn .wh-ic { width: 16px; height: 16px; vertical-align: 0; }
#vv-body-sheet .wkb-mine .vv-ld-htitle, #vv-pantry-sheet .wkb-mine .vv-ld-htitle {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; text-overflow: clip; line-height: 1.3;
}
#vv-body-sheet .wkb-mine .vv-ld-hstreak::after, #vv-pantry-sheet .wkb-mine .vv-ld-hstreak::after { content: ' дн. подряд'; font-weight: 600; }
#vv-body-sheet .vv-dg-fluids, #vv-pantry-sheet .vv-dg-fluids {
  margin: 12px 0 4px; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--paper);
}
#vv-body-sheet .vv-dg-fl-head, #vv-pantry-sheet .vv-dg-fl-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#vv-body-sheet .vv-dg-fl-title, #vv-pantry-sheet .vv-dg-fl-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
#vv-body-sheet .vv-dg-fl-title svg, #vv-pantry-sheet .vv-dg-fl-title svg { width: 16px; height: 16px; }
#vv-body-sheet .vv-dg-fl-val, #vv-pantry-sheet .vv-dg-fl-val { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
#vv-body-sheet .vv-dg-fl-bar, #vv-pantry-sheet .vv-dg-fl-bar { height: 6px; border-radius: 3px; background: var(--line-soft); margin: 8px 0 10px; overflow: hidden; }
#vv-body-sheet .vv-dg-fl-fill, #vv-pantry-sheet .vv-dg-fl-fill { height: 100%; border-radius: 3px; background: var(--green, #2F7A4E); transition: width .3s; }
#vv-body-sheet .vv-dg-fl-btns, #vv-pantry-sheet .vv-dg-fl-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }   /* VVELL-836 */
#vv-body-sheet .vv-dg-fl-btn, #vv-pantry-sheet .vv-dg-fl-btn {
  min-height: 40px; padding: 8px 2px; white-space: nowrap; border-radius: var(--r-sm);
  border: 1px solid var(--line-soft); background: transparent; color: var(--ink);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .12s, background .15s;
}
#vv-body-sheet .vv-dg-fl-btn:hover, #vv-pantry-sheet .vv-dg-fl-btn:hover { background: var(--line-soft); }
#vv-body-sheet .vv-dg-fl-btn:active, #vv-pantry-sheet .vv-dg-fl-btn:active { transform: scale(.97); }
#vv-body-sheet .vv-dg-fl-hint, #vv-pantry-sheet .vv-dg-fl-hint { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
#vv-body-sheet .vv-pn-head, #vv-pantry-sheet .vv-pn-head { margin-bottom: 10px; }
#vv-body-sheet .vv-pn-title, #vv-pantry-sheet .vv-pn-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 17px; font-weight: 800; color: var(--ink);
}
#vv-body-sheet .vv-pn-sub, #vv-pantry-sheet .vv-pn-sub { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
#vv-body-sheet .vv-pn-empty, #vv-pantry-sheet .vv-pn-empty {
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line-soft);
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
}
#vv-body-sheet .vv-pn-grid, #vv-pantry-sheet .vv-pn-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
#vv-body-sheet .vv-pn-card, #vv-pantry-sheet .vv-pn-card {
  position: relative;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  overflow: hidden;
}
#vv-body-sheet .vv-pn-body, #vv-pantry-sheet .vv-pn-body {
  display: block; width: 100%; padding: 10px 10px 12px; cursor: pointer;
  border: none; background: transparent; font: inherit; text-align: left;
}
#vv-body-sheet .vv-pn-card .vv-pn-name, #vv-pantry-sheet .vv-pn-card .vv-pn-name { min-height: 34px; }
#vv-body-sheet .vv-pn-x, #vv-pantry-sheet .vv-pn-x {
  position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: none; background: transparent; color: var(--ink-3);
  font-size: 22px; line-height: 1;
}
#vv-body-sheet .vv-pn-more, #vv-pantry-sheet .vv-pn-more, #vv-body-sheet .vv-pn-gone, #vv-pantry-sheet .vv-pn-gone {
  width: 100%; min-height: 44px; margin-top: 8px; padding: 11px 16px; cursor: pointer;
  background: transparent; border: 1px dashed var(--line); border-radius: var(--r-md);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3);
}
#vv-body-sheet .vv-body .vv-dg-fluids, #vv-pantry-sheet .vv-body .vv-dg-fluids { margin: 0; }
#vv-body-sheet .vv-ld-header { display: none; }
#vv-pantry-sheet .vv-pn-head { display: none; }

#screen-progress #vv-progress-strip[hidden] { display: none !important; }
/* Подблоки Дневника «Питание / Образ жизни» снова видны (VVELL-719, 07.09.2026) */
#screen-progress #vv-diary-sections { display: flex; gap: 6px; margin: 4px 0 12px; }
#screen-progress #vv-diary-sections .vv-dsec { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 12px; border: 1px solid var(--line, #E6E0D2); background: var(--paper, #fff); color: var(--ink-2, #454A40); font-weight: 600; font-size: 14px; }
#screen-progress #vv-diary-sections .vv-dsec.is-on { background: var(--vv-green-tint, #E7F6EC); border-color: var(--vv-green, #1E9E59); color: var(--vv-green-dark, #0F6E3E); }
#screen-progress #vv-diary-sections .vv-dsec-icon svg { width: 18px; height: 18px; }
#screen-progress .vv-diary-curve-card { margin-top: 10px; }
#screen-progress #vv-diary-life[hidden], #screen-progress #vv-diary-top[hidden], #screen-progress #vv-diary-body[hidden], #screen-progress #vv-diary-pantry[hidden] { display: none !important; }

/* ═══ ПРОГРЕСС А (06.09.2026 ночь, VVELL-661 / VVELL-302) ═══ */
#screen-stats .vv-seg { display: flex; background: var(--bg-warm, #EFE7D6); border-radius: 14px; padding: 3px; margin-bottom: 10px; }
#screen-stats .vv-seg button { flex: 1; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 8px 0; border-radius: 11px; cursor: pointer; min-height: 36px; }
#screen-stats .vv-seg button.is-on { background: var(--paper, #fff); color: var(--ink); font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
#screen-stats .vv-ate-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
#screen-stats .vv-ate-num { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1; }
#screen-stats .vv-ate-sub { font-size: 13px; color: var(--ink-3); }
#screen-stats .vv-ate-svg { width: 100%; height: auto; display: block; }
#screen-stats .vv-ate-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--ink-3); margin-top: 4px; align-items: center; }
#screen-stats .vv-ate-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
#screen-stats .vv-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#screen-stats .vv-ring { border: 0; background: transparent; padding: 4px 2px; cursor: pointer; font: inherit; color: var(--ink); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 14px; }
#screen-stats .vv-ring:active { background: var(--bg-warm, #EFE7D6); }
#screen-stats .vv-ring svg { width: 76px; height: 76px; }
#screen-stats .vv-ring-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
#screen-stats .vv-ring-sub { font-size: 11px; color: var(--ink-3); }
#screen-stats .vv-rings-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }
#screen-stats .vv-rings-edit { border: 0; background: var(--vv-green-tint); color: var(--vv-green-dark); font: inherit; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
#screen-stats .vv-rings-more { width: 100%; margin-top: 10px; border: 1px dashed var(--line); background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--vv-green-dark); border-radius: 12px; padding: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 4px; }
#screen-stats .vv-rings-more svg { width: 14px; height: 14px; transition: transform .2s; }
#screen-stats .vv-rings-more.is-open svg { transform: rotate(90deg); }
#screen-stats #stats-goals-detail { margin-top: 10px; }
#screen-stats #stats-strip[hidden], #screen-stats #stats-tab-content[hidden] { display: none !important; }
.vv-found-sheet-card { max-height: 88vh; overflow-y: auto; }
#vv-found-sheet .wkb-pane {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important;
  box-shadow: var(--sh-1) !important;
}
#vv-found-sheet .wkb-pane-head {
  margin-bottom: 14px !important;
}
#vv-found-sheet .wkb-pane-icon {
  font-size: 28px !important;
}
#vv-found-sheet .wkb-pane-title {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}
#vv-found-sheet .wkb-pane-sub {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
}
#vv-found-sheet .wkb-pane {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important;
  box-shadow: var(--sh-1) !important;
}
#vv-found-sheet .wkb-pane-title {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}
#vv-found-sheet .wkb-pane-sub {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
}
#vv-found-sheet .wkb-pane-action {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--vv-green-dark) !important;
}
#vv-found-sheet .wkb-found-card.is-done {
  border-color: var(--vv-green) !important;
  background: linear-gradient(180deg, var(--vv-green-tint) 0%, var(--paper) 60%) !important;
}
#vv-found-sheet .wkb-found-title {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
}
#vv-found-sheet .wkb-found-streak-badge {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
}
#vv-found-sheet .wkb-found-streak-badge.has-streak {
  background: #FFF3E0 !important;
  color: #E65100 !important;
}
#vv-found-sheet .wkb-found-card .btn-berry {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
  font-size: 12px !important;
  padding: 5px 14px !important;
  background: var(--vv-green) !important;
  border-color: var(--vv-green) !important;
  color: white !important;
}
#vv-found-sheet .wkb-found-card .btn-berry:hover {
  background: var(--vv-green-dark) !important;
  border-color: var(--vv-green-dark) !important;
}
#vv-found-sheet .wkb-empty {
  font-family: var(--font-body) !important;
  text-align: center !important;
  padding: 28px 20px !important;
  color: var(--ink-3) !important;
}
#vv-found-sheet .wkb-loading {
  font-family: var(--font-body) !important;
  color: var(--ink-3) !important;
}
#vv-found-sheet .wkb-tab-icon, #vv-found-sheet .wkb-tab-icon, #vv-found-sheet .wkb-pane-icon, #vv-found-sheet .wkb-pane-icon {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  color: currentColor;
}
#vv-found-sheet .wkb-pane-icon svg, #vv-found-sheet .wkb-pane-icon svg { width: 22px !important; height: 22px !important; }
#vv-found-sheet .wkb-pane {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#vv-found-sheet .wkb-pane-title, #vv-found-sheet .vv-ld-h1 {
  font-family: var(--font-display, var(--font-body)) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}
#vv-found-sheet .wkb-found-card .btn, #vv-found-sheet .wkb-btn-sm {
  min-height: 44px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
}
#vv-found-sheet .wkb-tab-icon, #vv-found-sheet .wkb-tab-icon, #vv-found-sheet .wkb-pane-icon, #vv-found-sheet .wkb-pane-icon { color: inherit !important; }
#vv-found-sheet .wkb-pane-icon .wh-ic, #vv-found-sheet .wkb-pane-icon .wh-ic {
  width: 20px; height: 20px; vertical-align: 0; color: var(--vv-green-dark);
}
#vv-found-sheet .wkb-found-card, #vv-found-sheet .wkb-found-card { cursor: pointer; }
#vv-found-sheet .wkb-found-card:not(.is-done):active, #vv-found-sheet .wkb-found-card:not(.is-done):active { transform: scale(.99); }
#vv-found-sheet .wkb-found-sum, #vv-found-sheet .wkb-found-sum { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); margin: 4px 0 8px; }
#vv-found-sheet .wkb-found-state, #vv-found-sheet .wkb-found-state { display: flex; align-items: center; gap: 8px; min-height: 24px; }
#vv-found-sheet .wkb-found-on, #vv-found-sheet .wkb-found-on { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--vv-green-dark); }
#vv-found-sheet .wkb-found-add, #vv-found-sheet .wkb-found-add { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
#vv-found-sheet .wkb-found-on .wh-ic, #vv-found-sheet .wkb-found-add .wh-ic, #vv-found-sheet .wkb-found-on .wh-ic, #vv-found-sheet .wkb-found-add .wh-ic { width: 14px; height: 14px; vertical-align: 0; }
#vv-found-sheet .wkb-found-golink, #vv-found-sheet .wkb-found-golink {
  min-height: 32px; padding: 4px 0; border: none; background: transparent;
  color: var(--vv-green-dark); font: inherit; font-size: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

/* ═══ ЧАТ ИИ — ВИЗУАЛ (06.09.2026 ночь, VVELL-663, владелец: «полностью переделать
   визуал: окно, сообщения ИИ, кнопки на выбор, текст без абзацев») ═══
   Ответ ИИ — не «пузырь в рамке», а текст с маленьким аватаром слева, как в
   мессенджерах; человек — зелёный пузырь справа; подсказки — контурные пилюли
   под ответом; сценарии на старте — две колонки плиток; поле ввода — овал с
   тенью и зелёной кнопкой. Направление Б: крупные радиусы, Unbounded только
   в заголовке листа. */
#screen-chat .vv-chat-bar { gap: 6px; padding: 2px 0 10px; }
#screen-chat .vv-chat-bar-btn { min-height: 34px; padding: 0 12px; font-size: 12px; border-radius: 999px; }
#screen-chat .msg.ai {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 2px 0 2px 40px !important; max-width: 100% !important; position: relative; margin: 6px 0 10px !important; }
#screen-chat .msg.ai .bot { position: absolute !important; left: 0 !important; top: 0 !important; margin: 0 !important;
  font-size: 0 !important; letter-spacing: 0 !important; gap: 0 !important; }
#screen-chat .msg.ai .bot .dot { width: 30px !important; height: 30px !important; border-radius: 50% !important; }
#screen-chat .msg.ai .bot .dot::after { font-size: 12px; }
#screen-chat .msg.ai .vv-ai-text, #screen-chat #vv-chat-greeting { font-size: 15px !important; line-height: 1.6 !important; color: var(--ink) !important; }
#screen-chat .vv-ai-text p { margin: 0 0 9px; } #screen-chat .vv-ai-text p:last-child { margin-bottom: 0; }
#screen-chat .vv-ai-text ul, #screen-chat .vv-ai-text ol { margin: 2px 0 9px; padding-left: 20px; }
#screen-chat .vv-ai-text li { margin: 0 0 4px; }
#screen-chat .vv-ai-text li::marker { color: var(--vv-green-dark); font-weight: 700; }
#screen-chat .vv-ai-text strong { font-weight: 800; color: var(--ink); }
#screen-chat .vv-ai-text .vv-md-h { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; margin: 4px 0 6px; }
#screen-chat .vv-ai-text em { font-style: italic; color: var(--ink-2); }
#screen-chat .vv-ai-sources, #screen-chat .vv-ai-disclaimer { font-size: 12px; color: var(--ink-3); margin-top: 8px; display: flex; gap: 6px; align-items: flex-start; }
#screen-chat .vv-ai-sources svg, #screen-chat .vv-ai-disclaimer svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
#screen-chat .msg.user {
  background: var(--vv-green-dark, #159145) !important; color: #fff !important;
  border-radius: 20px 20px 6px 20px !important; padding: 10px 14px !important;
  max-width: 82% !important; margin: 8px 0 8px auto !important; font-weight: 500 !important; font-size: 15px !important; line-height: 1.5 !important;
  box-shadow: none !important; }
#screen-chat .vv-chat-suggests { gap: 8px; margin: 10px 0 4px 40px; }
#screen-chat .vv-chat-sugg {
  border: 1.5px solid var(--vv-green-dark) !important; color: var(--vv-green-dark) !important; background: var(--paper) !important;
  border-radius: 999px !important; padding: 9px 13px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: left; }
#screen-chat .vv-chat-sugg:active { background: var(--vv-green-tint) !important; }
#screen-chat .quick-replies { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0 8px 0; }
#screen-chat .qr-chip {
  display: flex; align-items: center; gap: 8px; background: var(--vv-green-tint); border: 0; border-radius: 16px;
  padding: 12px 12px; font-size: 13px; font-weight: 700; color: var(--vv-green-dark); text-align: left; min-height: 48px; }
#screen-chat .qr-chip svg { width: 18px; height: 18px; flex: 0 0 auto; }
#screen-chat .msg.ai.vv-msg-thinking { padding-left: 40px !important; }
/* Приветствие — в том же стиле, что ответы (в design_v2 у него свой селектор с двумя id,
   поэтому здесь тоже два id + ночная тема). */
#screen-chat #vv-chat-greeting, .vv-theme-night #screen-chat #vv-chat-greeting {
  background: transparent !important; border: 0 !important; padding: 4px 0 2px 40px !important; border-radius: 0 !important; }
#screen-chat .chat-input { border: 0; border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: 0 8px 24px rgba(16, 23, 15, .10); background: var(--paper); }
#screen-chat .chat-input input { font-size: 15px; }
#screen-chat .chat-input .send { background: var(--vv-green-dark) !important; width: 42px; height: 42px; }
#screen-chat .chat-input-wrap { padding: 12px 16px 10px; }
/* Прогресс А · «Что вышло» на длинных окнах */
#screen-stats .vv-out-card { padding: 8px 0 6px; border-top: 1px solid var(--line-soft); }
#screen-stats .vv-out-card:first-child { border-top: 0; padding-top: 0; }
#screen-stats .vv-out-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
#screen-stats .vv-out-head span { font-weight: 800; font-size: 14px; }
#screen-stats .vv-out-head b { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
#screen-stats .vv-out-head b.is-muted { font-family: var(--font-body); font-weight: 600; color: var(--ink-3); font-size: 13px; }
#screen-stats .vv-out-head i { font-style: normal; font-size: 11.5px; color: var(--ink-3); flex-basis: 100%; margin-top: -2px; }

/* ═══ ВОЗРАСТ: ФАКТОРЫ КОМПАКТНО (06.09.2026, VVELL-664) ═══
   Строка — имя, значение, вклад, полоска; объяснение и «Как менялось» — по тапу. */
#screen-age .vv-age-fx.is-fold { cursor: pointer; padding: 9px 0; -webkit-tap-highlight-color: transparent; }
#screen-age .vv-age-fx.is-fold:active { opacity: .7; }
#screen-age .vv-age-fx-fold { display: none; }
#screen-age .vv-age-fx.is-open .vv-age-fx-fold { display: block; margin-top: 6px; }
#screen-age .vv-age-fx-chev { display: inline-flex; color: var(--ink-4, #B8B0A0); flex: none; margin-left: 2px; }
#screen-age .vv-age-fx-chev svg { width: 14px; height: 14px; transition: transform .2s; }
#screen-age .vv-age-fx.is-open .vv-age-fx-chev svg { transform: rotate(180deg); }
#screen-age button.vv-age-fx-more { background: none; border: 0; padding: 4px 0 0; cursor: pointer; font: inherit;
  display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--vv-green-dark); }
#screen-age .vv-age-fx.is-fold .vv-age-fx-bar { margin: 7px 0 0; }
#screen-age .vv-age-fx.is-fold .vv-age-fx-why { margin-top: 0; font-size: 12.5px; color: var(--ink-2); }

/* ═══ ПРОГРЕСС: ЦЕЛИ СТРОКАМИ (06.09.2026, VVELL-665) ═══ */
#screen-stats .vv-goal-rows { display: flex; flex-direction: column; gap: 6px; }
#screen-stats .vv-goal-row { width: 100%; text-align: left; border: 0; background: var(--bg-2, #F4EFE5); border-radius: 16px;
  padding: 11px 14px; font: inherit; color: var(--ink); cursor: pointer; display: block; -webkit-tap-highlight-color: transparent; }
#screen-stats .vv-goal-row.is-static { cursor: default; }
#screen-stats .vv-goal-row:active { background: var(--bg-warm, #EFE7D6); }
#screen-stats .vv-goal-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#screen-stats .vv-goal-row-name { font-weight: 700; font-size: 14px; }
#screen-stats .vv-goal-row-num { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
#screen-stats .vv-goal-row-num b { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
#screen-stats .vv-goal-row-num.is-muted { color: var(--ink-4, #B8B0A0); }
#screen-stats .vv-goal-row-bar { height: 7px; border-radius: 999px; background: var(--paper); overflow: hidden; margin-top: 8px; }
#screen-stats .vv-goal-row-bar i { display: block; height: 100%; border-radius: 999px; background: var(--vv-green-dark); }
#screen-stats .vv-goal-row-bar i.is-mid { background: #D9A441; }
#screen-stats .vv-goal-row-bar i.is-low { background: var(--ink-4, #B8B0A0); }
#screen-stats .vv-goal-row-sub { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
#screen-stats .vv-goal-note { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
#screen-stats .vv-goal-empty { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
#screen-stats .vv-goal-foot { display: flex; gap: 8px; margin-top: 10px; }
#screen-stats .vv-rings-edit.is-quiet { background: var(--bg-warm, #EFE7D6); color: var(--ink-2); }

/* ═══ ПРОГРЕСС: ФИЛЬТР ПЕРИОДА НА ВИДУ И ГРАФИКИ ДЛЯ ЛЮДЕЙ (06.09.2026, VVELL-666) ═══
   Фильтр «Неделя · Месяц · 3 месяца» липнет под полосу сегментов, пока листаешь
   четыре графика; сам крупнее. Графики — .vvtr-* из vvTrendHtml (vvchart.js),
   цвета — те же токены --vvch-*, что у остальных графиков (день и ночь). */
#screen-stats .vv-stats-period { position: sticky; top: calc(var(--vv-hdr-h, 67px) + var(--vv-seg-h, 61px)); z-index: 6;
  margin: 0 0 12px; padding: 4px; border-radius: 16px; background: var(--bg-warm, #EFE7D6);
  box-shadow: 0 0 0 6px var(--card, var(--paper, #FBF7EF)), 0 10px 16px -12px rgba(16, 23, 15, .45); }
#screen-stats .vv-stats-period button { font-size: 14px; min-height: 40px; font-weight: 700; }
#screen-stats .vv-stats-period button.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 23, 15, .12); }
#screen-stats .vv-out-card { padding: 10px 0 8px; }
#screen-stats .vv-out-head b { font-size: 18px; }
#screen-stats .vv-out-head i { font-size: 12px; }
.vvtr { position: relative; margin-top: 2px; }
.vvtr-svg { display: block; width: 100%; height: auto; overflow: visible; }
.vvtr-svg text { font-family: inherit; }
.vvtr-grid { stroke: var(--vvch-grid); stroke-width: 1; }
.vvtr-axis, .vvtr-xl { fill: var(--vvch-axis); font-size: 11px; }
.vvtr-xl--now { font-weight: 800; fill: var(--ink); }
.vvtr-bar--under { opacity: .38; }
.vvtr-bar--last { opacity: 1; }
.vvtr-line { fill: none; stroke: var(--vvch-good); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vvtr-line--raw { stroke: var(--vvch-flat); stroke-width: 1.2; opacity: .45; }
.vvtr-avg { stroke: var(--vvch-flat); stroke-width: 1; stroke-dasharray: 1.5 3; opacity: .8; }
.vvtr-target { stroke: var(--vvch-target); stroke-width: 1.3; stroke-dasharray: 5 4; }
.vvtr-target-lbl { fill: var(--vvch-target); font-size: 10.5px; font-weight: 700; }
.vvtr-avg-lbl { fill: var(--vvch-flat); font-size: 10px; font-weight: 600; opacity: .9; }   /* подпись линии среднего (10.09.2026) */
.vvtr-dot { fill: var(--vvch-good); stroke: var(--vvch-dot-ring); stroke-width: 1.6; }
.vvtr-dot--under { fill: var(--vvch-dot-ring); stroke: var(--vvch-good); stroke-width: 2.2; }
.vvtr-dot--last { fill: var(--vvch-sup); stroke: var(--vvch-dot-ring); }
.vvtr-val { fill: var(--ink-2); font-size: 10.5px; font-weight: 700; }
.vvtr-val--last { fill: var(--ink); font-size: 11.5px; font-weight: 800; }
.vvtr .vvch-note { margin-top: 2px; }

/* ═══ ДНЕВНИК: ЛЕНТА БЕЗ ПОЛОСКИ, «НЕ ИЗ ПЛАНА» СТРОКОЙ, КРИВАЯ ДНЯ (06.09.2026, VVELL-668/669) ═══
   Полоска-рельс ленты проходила слева от фото товаров во всех приёмах (фото владельца) — снята.
   «Не из плана» — одна строка: круглый плюс, название, «фото · штрих-код · поиск». */
#screen-progress .vv-tl .vv-dg-rows::before { display: none; }
#screen-progress .vv-tl-t { background: transparent; }
#screen-progress .vv-tl-add { flex-direction: row; align-items: center; gap: 10px; border: 1.5px dashed var(--vv-green-dark);
  border-radius: 16px; background: var(--vv-green-tint, #E7F7E9); padding: 10px 14px; min-height: 56px; }
#screen-progress .vv-tl-add .vv-tl-t { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--vv-green-dark);
  color: #fff; font-size: 22px; line-height: 34px; padding: 0; text-align: center; }
#screen-progress .vv-tl-add .vv-dg-row-name { font-weight: 700; color: var(--vv-green-dark); flex: 1; }
#screen-progress .vv-tl-add .vv-dg-row-meta { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.vvcurve-cap { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.vvcurve-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.vvcurve-leg span { display: inline-flex; align-items: center; gap: 5px; }
.vvcurve-leg i { display: inline-block; width: 12px; height: 8px; border-radius: 3px; }
.vvcurve-leg i.is-sleep { background: #C8D6E4; }
.vvcurve-leg i.is-dip { background: rgba(217, 164, 65, .35); }
.vvcurve-leg i.is-meal { width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--vv-green-dark); }
.vvcurve-tip { margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.45; padding: 10px 12px; border-radius: 14px; background: rgba(217, 164, 65, .12); }
.vvcurve-tip b { color: var(--ink); }
.vvcurve-tip .is-quiet { color: var(--ink-3); }
.vvcurve-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.vvcurve-q.is-done { color: var(--ink-3); font-size: 12px; }
.vvcurve-btn { border: 0; background: var(--vv-green-tint, #E7F7E9); color: var(--vv-green-dark); font: inherit; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.vvcurve-btn.is-quiet { background: var(--bg-warm, #EFE7D6); color: var(--ink-2); }

/* ═══ ВОЗРАСТ: ИСТОРИЯ И «ЧТО ТЕЛО ПОТЯНЕТ» (06.09.2026, VVELL-669) ═══ */
#screen-age .vv-age-hist { width: 100%; height: auto; display: block; overflow: visible; }
#screen-age .vv-hz-acts { margin: 6px 0 4px; }
#screen-age .vv-hz-details { margin-top: 8px; }
#screen-age .vv-hz-details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--vv-green-dark); padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 6px; }
#screen-age .vv-hz-details summary::-webkit-details-marker { display: none; }
#screen-age .vv-hz-details summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-right: 4px; transition: transform .2s; }
#screen-age .vv-hz-details[open] summary::before { transform: rotate(45deg); }

/* ═══ ЖИВЫЕ ГРАФИКИ: ЛУПА, ГРАДИЕНТЫ, ПОЯВЛЕНИЕ (06.09.2026, ночь) ═══ */
svg[data-lens] { touch-action: pan-y; cursor: crosshair; }
.vv-lens-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: .45; }
.vv-lens-dot { fill: var(--paper); stroke: var(--vvch-good); stroke-width: 2.5; }
.vv-lens-bg { fill: var(--ink); opacity: .92; }
.vv-lens-t { fill: var(--paper); font-size: 11px; font-weight: 800; }
.vv-lens-s { fill: var(--paper); font-size: 9.5px; opacity: .85; }
.vvtr-gs-top { stop-color: var(--vvch-sup); }
.vvtr-gs-bot { stop-color: var(--vvch-good); }
.vvtr-as-top { stop-color: var(--vvch-good); stop-opacity: .26; }
.vvtr-as-top.vvtr-as-warn { stop-color: var(--vvch-low); }
.vvtr-as-bot { stop-color: var(--vvch-good); stop-opacity: 0; }
.vvtr-area { stroke: none; }
.vvtr-line--warn { stroke: var(--vvch-low); }
.vvtr-dot--warn { fill: var(--vvch-low); }
.vvtr-dot--good { fill: var(--vvch-good); }
.vvtr-pulse { fill: none; stroke: var(--vvch-good); stroke-width: 1.2; opacity: .35; animation: vvtrPulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes vvtrPulse { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(1.8); opacity: 0; } }
.vvtr-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: vvtrGrow .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vvtrGrow { from { transform: scaleY(0); } }
.vvtr-line--draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vvtrDraw 1s ease-out .1s forwards; }
@keyframes vvtrDraw { to { stroke-dashoffset: 0; } }
.vvtr-dot, .vvtr-val, .vvtr-area { animation: vvtrFade .5s ease-out .55s both; }
@keyframes vvtrFade { from { opacity: 0; } }
.vvtr-svg:hover .vvtr-bar, .vvtr-svg:hover .vvtr-dot { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .vvtr-bar, .vvtr-line--draw, .vvtr-dot, .vvtr-val, .vvtr-area, .vvtr-pulse { animation: none !important; stroke-dashoffset: 0; }
}
#screen-age .vv-age-hist-sum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; }
#screen-age .vv-age-hist-sum b { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
#screen-age .vv-age-hist-sum b.is-good { color: var(--vv-green-dark); }
#screen-age .vv-age-hist-sum b.is-warn { color: var(--vv-berry); }
#screen-age .vv-age-hist-sum span { font-size: 12.5px; color: var(--ink-2); }
.vvcurve-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.vvcurve-head span:first-child { font-weight: 800; font-size: 14px; color: var(--ink); }
.vvcurve-hint { font-size: 11px; color: var(--ink-3); }
.vvcurve-leg i.is-now { width: 9px; height: 9px; border-radius: 50%; background: var(--vv-green-dark); }
.vvcurve-line { stroke-dasharray: 1400; }

/* ═══ ВОЗРАСТ · ВАРИАНТ А (06.09.2026, VVELL-670): рычаг, чип тренда, строки «Ещё про тело» ═══ */
#screen-age .vv-age-trendline { margin-top: 8px; min-height: 14px; }
#screen-age .vv-age-trend-chip { border: 0; font: inherit; font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 6px 12px; cursor: pointer;
  background: var(--bg-warm, #EFE7D6); color: var(--ink-2); }
#screen-age .vv-age-trend-chip.is-good { background: var(--vv-green-tint, #E7F7E9); color: var(--vv-green-dark); }
#screen-age .vv-age-trend-chip.is-warn { background: rgba(215, 20, 75, .1); color: var(--vv-berry); }
#screen-age .vv-age-lever { margin: 12px 0 4px; padding: 12px 14px; border-radius: 18px; background: rgba(217, 164, 65, .14); border: 1px solid rgba(217, 164, 65, .35); }
#screen-age .vv-age-lever.is-good { background: var(--vv-green-tint, #E7F7E9); border-color: rgba(21, 145, 69, .25); }
#screen-age .vv-age-lever-t { font-weight: 800; font-size: 14px; color: var(--ink); }
#screen-age .vv-age-lever-x { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
#screen-age .vv-age-lever-s { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
#screen-age .vv-age-more { margin: -4px 0; }
#screen-age .vv-age-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#screen-age .vv-age-row:last-child { border-bottom: 0; }
#screen-age .vv-age-row:active { opacity: .7; }
#screen-age .vv-age-row-ic { display: inline-flex; color: var(--vv-green-dark); flex: none; }
#screen-age .vv-age-row-ic svg { width: 18px; height: 18px; }
#screen-age .vv-age-row-tx { flex: 1; min-width: 0; }
#screen-age .vv-age-row-tx b { display: block; font-size: 14px; }
#screen-age .vv-age-row-tx small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
#screen-age .vv-age-row-chev { display: inline-flex; color: var(--ink-4, #B8B0A0); }
#screen-age .vv-age-row-chev svg { width: 16px; height: 16px; transform: rotate(270deg); }
#screen-age .vv-age-sheet-body { padding: 4px 0 12px; }
#screen-age .vv-age-sheet-body .vv-age-block { border: 0; padding: 0; background: transparent; box-shadow: none; }
/* В листе «Ещё про тело» заголовок блока дублировал заголовок листа */
#screen-age .vv-age-sheet-body .vv-age-block-h { display: none; }

/* Проход по Настройкам и «Готовим» (06.09.2026, VVELL-671) */
#screen-settings #s-phone.is-readonly { color: var(--ink); background: var(--bg-warm, #EFE7D6); border-style: dashed; }
#screen-settings .settings-hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }
#screen-cook .cook-card-title { font-size: 14.5px; font-weight: 700; hyphens: manual; -webkit-hyphens: manual; }


/* ═══════════════════════════════════════════════════════════════════════════
   ГОТОВЛЮ САМ: БЛЮДО ГРУППОЙ В КОРЗИНЕ, ЛИСТ «КАК ГОТОВИТЬ», «СЕГОДНЯ ПО ПЛАНУ»,
   ПРИЁМ = БЛЮДО В ДНЕВНИКЕ (06.09.2026, VVELL-678, эпик VVELL-672)
   Цвета — только токенами палитры (--sand-*, --vv-green, --ink-*), ночная тема
   подхватывает их сама.
   ═══════════════════════════════════════════════════════════════════════════ */
#cart-list .vv-dish-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 10px 0 2px;
  border-radius: var(--r-md, 12px);
  background: var(--sand-surface-2, var(--vv-green-tint, #EDF5EE));
  border: 1px solid var(--sand-line-soft, var(--line-soft, #EBE3D5));
  cursor: pointer;
}
#cart-list .vv-dish-head.vv-day-off { display: none !important; }
#cart-list .vv-dish-photo {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
  background: var(--sand-line-soft, var(--line-soft, #EBE3D5));
}
#cart-list .vv-dish-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#cart-list .vv-dish-main { flex: 1; min-width: 0; }
#cart-list .vv-dish-kicker {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--vv-green, #177652);
}
#cart-list .vv-dish-title {
  font-size: 14.5px; font-weight: 700; color: var(--ink, #23302A); line-height: 1.25; margin-top: 1px;
  display: flex; align-items: center; gap: 6px;
}
#cart-list .vv-dish-title .vv-day-pill { flex: 0 0 auto; }
#cart-list .vv-dish-meta { font-size: 12px; color: var(--ink-3, #606A61); margin-top: 2px; }
#cart-list .vv-dish-how {
  flex: 0 0 auto; min-height: 36px; padding: 7px 11px; border-radius: 999px;
  border: 1.5px solid var(--vv-green, #177652); background: transparent;
  color: var(--vv-green, #177652); font-size: 12.5px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
#cart-list .vv-dish-how:active { opacity: .75; }
#cart-list .vv-meal-item.is-ingredient { padding-left: 22px !important; }
#cart-list .vv-meal-item.is-ingredient .vv-meal-pic { flex-basis: 44px; width: 44px; height: 44px; }
#cart-list .vv-meal-item.is-ingredient .vv-meal-name { font-weight: 500; }

/* сегмент дней на 7 дней — прокрутка, а не 8 кнопок в 390 px */
#cart-list .dayseg.is-many { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
#cart-list .dayseg.is-many::-webkit-scrollbar { display: none; }
#cart-list .dayseg.is-many .dayseg-tab { flex: 0 0 auto; min-width: 76px; }
#vv-sticky-checkout .stky-detail { overflow-x: auto; scrollbar-width: none; }
#vv-sticky-checkout .stky-detail::-webkit-scrollbar { display: none; }

/* лист «Как готовить» */
.vv-dish-sheet .vv-sheet-card { max-height: 90vh; overflow-y: auto; }
.vv-dish-hero {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: var(--sand-line-soft, var(--line-soft, #EBE3D5)); margin: 4px 0 10px;
}
.vv-dish-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vv-dish-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.vv-dish-chip {
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: var(--sand-surface-2, var(--vv-green-tint, #EDF5EE)); color: var(--ink-2, #5E6B62);
}
.vv-dish-h {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3, #606A61); margin: 16px 0 6px;
}
.vv-dish-ing {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--sand-line-soft, var(--line-soft, #EBE3D5));
  font-size: 13.5px; color: var(--ink, #23302A);
}
.vv-dish-ing:last-child { border-bottom: none; }
.vv-dish-ing-g { color: var(--ink-3, #606A61); }
.vv-dish-ing-state { font-size: 12px; color: var(--ink-3, #606A61); white-space: nowrap; }
.vv-dish-ing-state.is-home { color: var(--vv-green, #177652); font-weight: 600; }
.vv-dish-ing-state.is-left { color: var(--ink-2, #5E6B62); }
.vv-dish-steps { margin: 0; padding-left: 20px; }
.vv-dish-steps li { font-size: 13.5px; line-height: 1.55; margin-bottom: 8px; color: var(--ink, #23302A); }

/* «Готовим» → «Сегодня по плану» */
#screen-cook .cook-today { margin: 0 0 18px; }
#screen-cook .cook-today-h {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--vv-green, #177652); margin: 0 0 2px;
}
#screen-cook .cook-today-sub { font-size: 12.5px; color: var(--ink-3, #606A61); margin: 0 0 10px; }
#screen-cook .cook-today-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper, var(--card, #FBF7EF)); border: 1px solid var(--line, #E0D6C3);
  border-radius: var(--r-lg, 16px); padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
}
#screen-cook .cook-today-card:active { opacity: .8; }
#screen-cook .cook-today-photo {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
  background: var(--sand-line-soft, var(--line-soft, #EBE3D5));
}
#screen-cook .cook-today-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-cook .cook-today-main { flex: 1; min-width: 0; }
#screen-cook .cook-today-meal {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-3, #606A61);
}
#screen-cook .cook-today-name { font-size: 14.5px; font-weight: 700; color: var(--ink, #23302A); line-height: 1.25; }
#screen-cook .cook-today-meta { font-size: 12px; color: var(--ink-3, #606A61); margin-top: 2px; }
#screen-cook .cook-today-go { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--vv-green, #177652); white-space: nowrap; }

/* дневник: приём = блюдо */
#screen-progress .vv-dg-item.is-dish .vv-dg-item-name { font-weight: 700; }
#screen-progress .vv-dg-item.is-dish .vv-dg-item-meta { font-size: 12px; color: var(--ink-3, #606A61); margin-top: 1px; }
/* VVELL-1173 (30.09.2026, вариант D владельца): под товаром — полоска упаковки с отмеченной порцией и подпись
   «на завтрак — 150 г из 700 г»; полоска с подписью — одна кнопка (лист «Сколько съедено»). Высота касания ≥ 40 px:
   кнопка стоит внутри строки, которая сама открывает карточку товара (ловушка iOS «касание уходит на соседнюю строку»).
   Цвет подписи — от строки (светлая и тёмная тема), дорожка полоски — полупрозрачная. */
#screen-progress .vv-dg-item .vv-dg-amt { display: block; width: 100%; min-height: 40px; margin: 6px 0 0; padding: 4px 0;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
#screen-progress .vv-dg-item .vv-dg-pack { display: block; position: relative; height: 8px; max-width: 240px;
  margin-bottom: 6px; border-radius: 5px; background: rgba(127, 127, 127, .28); overflow: hidden; }
#screen-progress .vv-dg-item .vv-dg-pack i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px;
  background: var(--vv-green, #2E9E5B); }
#screen-progress .vv-dg-item .vv-dg-amt-t { display: inline; font-size: 12.5px; line-height: 1.35; }
#screen-progress .vv-dg-item .vv-dg-amt-go { opacity: .6; font-size: 12.5px; }
/* Строка состояния после отметки: «съедено · 396 ккал · изменить» не влезала и наезжала на значок «→|» —
   кнопка правки не переносится (white-space: nowrap), а строка была без переноса. Разрешаем перенос строке. */
#screen-progress .vv-dg-item .vv-dg-item-state { flex-wrap: wrap; row-gap: 2px; }
#screen-progress .vv-dg-item.is-dish .vv-meal-img { border-radius: 10px; }

/* ═══ КНОПКА «ИИ»: ЖИВОЙ ГРАДИЕНТ ВНУТРИ (06.09.2026, VVELL-685) ═══════════
   Данил: «внутри самой кнопки движение в разные стороны волнами». Движутся ДВА
   пятна под иконкой и подписью — не сама кнопка (палец целится в неподвижную
   цель). Пятна только затемняют и чуть высветляют наш зелёный: белая подпись
   на самой светлой ступени #1A865D даёт 4,55 — светлее нельзя, поэтому белое
   пятно не ярче 5 %, а тёмное до 22 %. Ритм 9–13 с — медленное дыхание, а не
   мигание. В чате (.active) и при prefers-reduced-motion — стоит на месте. */
/* overflow: hidden снят 08.09.2026 — свечение снаружи (см. блок «аврора» выше); волны ::after ограничены своим inset. */
#bottom-nav-v2 .nav2-ai { overflow: hidden; } /* внутреннее цветное колесо ::after (VVELL-685) обрезается по пилюле; свечение снаружи — box-shadow, его overflow не режет */
#bottom-nav-v2 .nav2-ai > svg, #bottom-nav-v2 .nav2-ai > span { position: relative; z-index: 2; }
#bottom-nav-v2 .nav2-ai::after {
  content: ''; position: absolute; inset: -40%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 30% 35%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(42% 52% at 72% 70%, rgba(4, 38, 26, .22) 0%, rgba(4, 38, 26, 0) 72%),
    radial-gradient(30% 40% at 55% 25%, rgba(4, 38, 26, .16) 0%, rgba(4, 38, 26, 0) 70%);
  animation: vvAiWaveA 11s ease-in-out infinite;
  will-change: transform;
}
#bottom-nav-v2 .nav2-ai.active::after { animation: none; transform: none; }
@keyframes vvAiWaveA {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(9%, -6%) rotate(8deg) scale(1.08); }
  50%  { transform: translate(-6%, 7%) rotate(-6deg) scale(1.02); }
  75%  { transform: translate(-9%, -5%) rotate(5deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #bottom-nav-v2 .nav2-ai::after { animation: none; }
}


/* ═══ ВОЗРАСТ: ШКАЛА «МОЛОЖЕ — СТАРШЕ» И КРИВАЯ ДНЯ ВЕРНУЛИСЬ (06.09.2026, VVELL-683) ═══
   По снимку владельца: тонкая цветная полоса под пилюлей, белый кружок, подписи снизу. */
#screen-age .vv-age-scale-wrap { max-width: 300px; margin: 14px auto 6px; }
#screen-age .vv-age-scale-bar {
  position: relative; height: 7px; border-radius: 999px;
  background: linear-gradient(90deg, var(--vv-green, #177652) 0%, #6FBF97 30%, var(--sand-line-soft, #EBE3D5) 50%, #F0A9B8 72%, var(--vv-berry, #B0123D) 100%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);
}
#screen-age .vv-age-scale-mid { position: absolute; left: 50%; top: -6px; width: 1.5px; height: 10px; margin-left: -1px; border-radius: 2px; background: var(--ink-3, #606A61); opacity: .7; }
#screen-age .vv-age-scale-marker {
  position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: #fff; border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(35, 48, 42, .18), 0 3px 8px rgba(0, 0, 0, .22);
  transition: left 1.5s cubic-bezier(.2, .8, .2, 1);
}
#screen-age .vv-age-scale-marker::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink-3, #606A61); opacity: .0; }
#screen-age .vv-age-scale-lbl { position: relative; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3, #606A61); margin: 8px 0 0; }
#screen-age .vv-age-scale-lbl span:nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); top: -2px; font-size: 10px; }
#screen-age .vv-age-curve-block { padding-top: 6px; }
.vv-theme-night #screen-age .vv-age-scale-marker { background: #F4F1EA; border-color: #F4F1EA; }

/* «есть дома?» в листе «Как готовить» (06.09.2026, VVELL-682) */
.vv-dish-ing-ask { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.vv-dish-ing-btn {
  border: 1.5px solid var(--vv-green, #177652); background: transparent; color: var(--vv-green, #177652);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 30px;
}
.vv-dish-ing-btn:active { opacity: .75; }
.vv-dish-ing-state.is-added { color: var(--vv-green, #177652); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.vv-dish-ing-state.is-added svg { width: 12px; height: 12px; }

/* ═══ КНОПКА «ИИ»: РАЗНОЦВЕТНЫЙ ЖИВОЙ ГРАДИЕНТ, КАК У GEMINI (06.09.2026, VVELL-685, владелец) ═══
   Данил: «сделать цветную, как у Gemini — разные цвета плавают, движутся»; после первой
   версии: «вижу только зелёный и синий, и не плывёт — добавь цвета». Причина: кнопка 62 px,
   а полотно градиента было 320 % — в кадр попадали два цвета, и за 9 с сдвиг почти не виден.
   Теперь два слоя: плотный градиент из шести цветов (полотно 200 %, 4,5 с) и ВРАЩАЮЩЕЕСЯ
   размытое цветное колесо поверх (6 с) — цвета сменяются на глазах. Ступени тёмные, белая
   подпись «ИИ» держит контраст ≥ 4,5. В чате и при prefers-reduced-motion — стоит. */
/* Цвета кнопки — ПЕРЕМЕННЫМИ (23.09.2026 вечер): тот же перелив нужен подсказке «Хочешь поменять
   словами?» в корзине. Одно место для цветов на обе — иначе при перекраске кнопки подсказка отстала бы.
   Светлая тема переопределяет их ниже (VVELL-782). */
:root {
  --vv-ai-grad: linear-gradient(115deg, #177652 0%, #1D6FD1 20%, #6D3AE6 40%, #C9307F 58%, #C2571B 76%, #177652 100%);
  --vv-ai-wheel: conic-gradient(from 0deg,
    rgba(29, 111, 209, .75), rgba(109, 58, 230, .75), rgba(201, 48, 127, .75),
    rgba(194, 87, 27, .65), rgba(23, 118, 82, .75), rgba(29, 111, 209, .75));
}
#bottom-nav-v2 .nav2-ai,
.vv-theme-night #bottom-nav-v2 .nav2-ai {
  background: var(--vv-ai-grad) !important;
  background-size: 200% 200% !important;
  animation: vvAiFlow 4.5s ease-in-out infinite;
  box-shadow: 0 4px 14px -3px rgba(80, 60, 200, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}
#bottom-nav-v2 .nav2-ai::after {
  content: ''; position: absolute; inset: -70%; z-index: 1; pointer-events: none;
  background: var(--vv-ai-wheel);
  filter: blur(9px);
  animation: vvAiSpin 6s linear infinite;
  will-change: transform;
}
#bottom-nav-v2 .nav2-ai.active,
.vv-theme-night #bottom-nav-v2 .nav2-ai.active {
  animation: none;
  background-position: 50% 50% !important;
  filter: saturate(.85) brightness(.88);
}
#bottom-nav-v2 .nav2-ai.active::after { animation: none; transform: none; }
@keyframes vvAiFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes vvAiSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #bottom-nav-v2 .nav2-ai, .vv-theme-night #bottom-nav-v2 .nav2-ai { animation: none; }
  #bottom-nav-v2 .nav2-ai::after { animation: none; }
}

/* Кнопка «ИИ» без подписи (06.09.2026, владелец: «может убрать надпись ИИ?»): искра — принятый
   знак помощника, а название остаётся в aria-label «ИИ-помощник» для программ чтения экрана.
   Искра крупнее, по центру; без белого текста ограничение контраста снято, но цвета оставлены. */
#bottom-nav-v2 .nav2-ai > span { display: none !important; }
#bottom-nav-v2 .nav2-ai > svg { width: 30px !important; height: 30px !important; }
#bottom-nav-v2 .nav2-ai { justify-content: center !important; align-items: center !important; gap: 0 !important; }

/* Лист «Как готовить»: товар и оценка под ингредиентом (06.09.2026, VVELL-688) */
.vv-dish-ing.has-prod { align-items: flex-start; }
.vv-dish-ing-prod { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--ink-3, #606A61); }
.vv-dish-ing-prod .vv-dish-ing-grade:empty { display: none; }
.vv-dish-ing-prod .vv-grade { flex: 0 0 auto; }

/* «Заменить блюдо» (06.09.2026, VVELL-689) */
#cart-list .vv-dish-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: 0 0 auto; }
#cart-list .vv-dish-swap {
  width: 36px; height: 30px; border-radius: 999px; border: 1.5px solid var(--sand-line, var(--line, #E0D6C3));
  background: var(--card, #FBF7EF); color: var(--ink-2, #5E6B62); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
#cart-list .vv-dish-swap svg { width: 16px; height: 16px; }
.vv-dish-alt-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sand-line-soft, var(--line-soft, #EBE3D5));
}
.vv-dish-alt-row:last-child { border-bottom: none; }
.vv-dish-alt-row .vv-dish-photo { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--sand-line-soft, #EBE3D5); }
.vv-dish-alt-row .vv-dish-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vv-dish-alt-row .vv-dish-main { flex: 1; min-width: 0; }
.vv-dish-alt-row .vv-dish-title { font-size: 14px; font-weight: 700; color: var(--ink, #23302A); line-height: 1.25; }
.vv-dish-alt-row .vv-dish-meta { font-size: 12px; color: var(--ink-3, #606A61); margin-top: 2px; }
.vv-dish-alt-row .vv-dish-how {
  flex: 0 0 auto; min-height: 36px; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--vv-green, #177652);
  background: var(--vv-green, #177652); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* Оценка блюда (06.09.2026, VVELL-691): та же плашка .vv-grade, что у товара */
#cart-list .vv-dish-meta .vv-grade, .cook-today-meta .vv-grade, .vv-dish-alt-row .vv-dish-meta .vv-grade,
.vv-dg-item-meta .vv-grade { margin-right: 6px; vertical-align: middle; }
.vv-dish-grade { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: 13px; color: var(--ink-3, #606A61); }
.vv-dish-grade .vv-grade { flex: 0 0 auto; }
.vv-dish-grade-why { min-width: 0; line-height: 1.3; }

/* «Под цель …» у блюда (06.09.2026, VVELL-694) */
.vv-dish-goal { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--vv-green, #177652); font-weight: 600; }
.vv-dish-goal svg { width: 14px; height: 14px; flex: 0 0 auto; }
.vv-dish-goals { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.vv-dish-goal.is-full { font-weight: 500; color: var(--ink-2, #5E6B62); font-size: 13px; }
.vv-dish-goal.is-full b { color: var(--vv-green, #177652); font-weight: 700; }

/* «По анализам» (06.09.2026, VVELL-693) */
.labs-adv { background: var(--card, #FBF7EF); border: 1px solid var(--sand-line, var(--line, #E0D6C3)); border-radius: 16px; padding: 14px 14px 10px; margin: 0 0 14px; }
.labs-adv-title { font-size: 17px; font-weight: 800; color: var(--ink, #23302A); }
.labs-adv-sub { font-size: 12.5px; color: var(--ink-3, #606A61); margin: 2px 0 8px; }
.labs-adv-h { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #606A61); margin: 10px 0 4px; font-weight: 700; }
.labs-adv-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--sand-line-soft, var(--line-soft, #EBE3D5)); }
.labs-adv-main { flex: 1; min-width: 0; }
.labs-adv-name { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--ink, #23302A); }
.labs-adv-name svg { width: 18px; height: 18px; }
.labs-adv-why { font-size: 12.5px; color: var(--ink-3, #606A61); margin-top: 2px; line-height: 1.3; }
.labs-adv-btn { flex: 0 0 auto; min-height: 36px; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--vv-green, #177652); background: var(--vv-green, #177652); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.labs-adv-btn.is-warn { background: transparent; color: var(--vv-green, #177652); }
.labs-adv-state { flex: 0 0 auto; font-size: 12px; color: var(--ink-3, #606A61); }

/* Замены двумя ярусами (06.09.2026, VVELL-697) */
.vv-dish-alt-h { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #606A61); font-weight: 700; margin: 12px 0 2px; }
.vv-dish-alt-row .vv-dish-goal { margin-top: 2px; }

/* Подсказки и постоянные правила разговора про корзину (06.09.2026, VVELL-700;
   переехали в общий чат 07.09.2026, VVELL-724). Лист панели просьб снят вместе с
   самой панелью — остались две вещи, которые он держал: подсказки одной
   прокручиваемой строкой и правила, свёрнутые в строку-заголовок. Теперь они
   стоят над полем ввода чата. */
.vv-wish-chips { flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0 8px; margin: 0; gap: 8px; }
.vv-wish-chips::-webkit-scrollbar { display: none; }
.vv-wish-chip { flex: 0 0 auto; white-space: nowrap; }
.vv-wish-rules { order: 3; flex: 0 0 auto; margin: 0 0 6px; max-height: 32vh; overflow-y: auto; }
/* ⚠ У БЛОКА ПРАВИЛ СВОЙ СПЛОШНОЙ ФОН (08.09.2026, раунд 2 VVELL-724). Фон
   `.chat-input-wrap` — растяжка от прозрачного к --bg (design_v2), и она была
   рассчитана на одно поле ввода. С правилами внутри сквозь них просвечивал
   разговор: на живом снимке кнопка-подсказка «Собери овощной гарнир на ужин»
   читалась прямо через строку правил — текст на тексте. */
#screen-chat .vv-wish-rules { background: var(--bg); }
#screen-chat .vv-wish-rules:not(:empty) { padding-top: 2px; }
.vv-wish-rules-ttl { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; padding: 6px 0; margin: 0; cursor: pointer; text-align: left; font-family: inherit; }
.vv-wish-rules-ttl::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-left: 2px; transition: transform .15s; }
.vv-wish-rules.is-open .vv-wish-rules-ttl::after { transform: rotate(45deg); }
.vv-wish-rules:not(.is-open) .vv-wish-rule { display: none; }

/* ── Лист «Мои правила корзины» (20.09.2026, владелец: отдельное окно, удалять и корректировать) ── */
.vv-rules-sheet-card { max-height: 86vh; display: flex; flex-direction: column; }
.vv-rules-sub { font-size: 13px; line-height: 1.45; color: var(--ink-3); margin: -4px 0 12px; }
#vv-rules-sheet-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.vv-rules-row { background: var(--vv-surface-2, #f6f4ef); border: 1px solid var(--vv-line, #e6e2da); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.vv-rules-row-t { font-size: 14px; line-height: 1.4; color: var(--ink); font-weight: 600; }
.vv-rules-row-t .vv-wish-cnt { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.vv-rules-row-act { display: flex; gap: 8px; }
.vv-rules-row-act button { min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--vv-green, #1E9E59); background: transparent; color: var(--vv-green-dark, #0F6E3E); }
.vv-rules-row-act button.is-danger { border-color: var(--vv-line, #e6e2da); color: var(--ink-3); }
.vv-rules-row.is-expired { border-color: var(--vv-berry, #E34B76); }
.vv-rules-empty { font-size: 14px; line-height: 1.45; color: var(--ink-2, var(--ink)); }
.vv-rules-ex { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vv-rules-ex-chip { min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--vv-line, #e6e2da); background: var(--vv-surface, #fff); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.vv-rules-add { display: flex; gap: 8px; margin-top: 12px; flex: 0 0 auto; }
.vv-rules-add input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--vv-line, #e6e2da); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.vv-rules-add input:focus { border-color: var(--vv-green, #1E9E59); box-shadow: 0 0 0 4px rgba(30,158,89,.16); }
.vv-rules-add .btn { flex: 0 0 auto; min-height: 48px; padding: 0 16px; }
.vv-rules-add-hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; min-height: 16px; }
html.vv-theme-night .vv-rules-row { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
html.vv-theme-night .vv-rules-ex-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }

/* Дневник одним тапом, этап 1 (06.09.2026, VVELL-704) */
.vv-dg-ask-actions.vv-dg-three { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.vv-dg-ask-actions.vv-dg-three .btn { min-height: 44px; padding: 8px 6px; font-size: 14px; white-space: nowrap; }
.vv-dg-move { display: block; width: 100%; margin-top: 8px; padding: 8px 4px; border: 0; background: transparent; color: var(--vv-green, #177652); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; font-family: inherit; }
.vv-dg-opts { display: flex; flex-direction: column; }
.vv-dg-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid var(--sand-line-soft, var(--line-soft, #EBE3D5)); background: transparent; text-align: left; cursor: pointer; font-family: inherit; color: var(--ink, #23302A); }
.vv-dg-opt:first-child { border-top: 0; }
.vv-dg-opt-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--vv-green-tint, #E3F0E8); color: var(--vv-green, #177652); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.vv-dg-opt-ic svg { width: 18px; height: 18px; }
.vv-dg-opt-main { display: flex; flex-direction: column; min-width: 0; }
.vv-dg-opt-t { font-size: 15px; font-weight: 700; }
.vv-dg-opt-s { font-size: 12.5px; color: var(--ink-3, #606A61); margin-top: 1px; }


/* ── Семья в «Готовлю сам» (VVELL-680): кому сколько порций блюда ─────────────── */
.vv-dish-members { gap: 4px 12px !important; margin-top: 5px !important; }
.vv-dish-members .vv-dish-mrow { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.vv-dish-members .vv-dish-mp { font-weight: 500; color: var(--ink-3, #606A61); }
.vv-dish-sheet .vv-dish-members { padding: 0 2px; margin: 8px 0 2px !important; font-size: 13px; }


/* ── Скор сна: составляющие по цвету балла (VVELL-716) ───────────────────────── */
.slp-sc-bar.is-bad > i { background: #D7144B; }
.slp-sc-bar.is-mid > i { background: #E8A32D; }
.slp-sc-bar.is-good > i { background: var(--vv-green, #177652); }
.slp-sc-word { font-style: normal; font-weight: 600; font-size: 12px; margin-left: 2px; }
.slp-sc-row.is-bad .slp-sc-word { color: #D7144B; }
.slp-sc-row.is-mid .slp-sc-word { color: #B8791C; }
.slp-sc-row.is-good .slp-sc-word { color: var(--vv-green, #177652); }

/* ═══ «ЧТО КУПИЛ» КОМПАКТНО + ОСТАТКИ НА ЗАВТРА (07.09.2026, VVELL-741) ═══
   Владелец: «Что купил — слишком гигантские картинки». Лист живёт в body, а
   сетка карточек была объявлена под #screen-progress — в листе строки не имели
   раскладки вовсе, и картинка тянулась на всю ширину. Здесь лист получает
   СТРОКИ: фото 44 px, имя в две строки, крестик справа. */
#vv-pantry-sheet .vv-pn-grid { display: flex; flex-direction: column; gap: 6px; }
#vv-pantry-sheet .vv-pn-card { position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
#vv-pantry-sheet .vv-pn-body { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: center; width: 100%; padding: 8px 44px 8px 10px; border: none; background: transparent; font: inherit; text-align: left; cursor: pointer; }
#vv-pantry-sheet .vv-pn-body .vv-pn-img { grid-row: 1 / span 3; }
#vv-pantry-sheet .vv-pn-img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--r-xs); object-fit: cover; }
#vv-pantry-sheet .vv-pn-body > span { display: block; grid-column: 2; }
#vv-pantry-sheet .vv-pn-card .vv-pn-name { margin-top: 0; min-height: 0; font-size: 13px; }
#vv-pantry-sheet .vv-pn-meta { margin-top: 1px; }
#vv-pantry-sheet .vv-pn-marks { margin-top: 2px; }
/* правило «> span { display:block }» выше делало метки текстом без промежутков («покупок: 2из чека», VVELL-867) */
#vv-pantry-sheet .vv-pn-body > span.vv-pn-marks { display: flex; flex-wrap: wrap; gap: 6px; }
.vv-pn-nb { font-size: 12px; color: var(--ink-3); margin: 2px 0 10px; line-height: 1.35; }
#vv-pantry-sheet .vv-pn-x { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; }
#vv-pantry-sheet .vv-pn-more, #vv-pantry-sheet .vv-pn-gone { width: 100%; min-height: 44px; margin-top: 8px; padding: 11px 16px; cursor: pointer;
  background: transparent; border: 1px dashed var(--line); border-radius: var(--r-md); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3); }
/* Остатки — первым блоком, с кнопкой «Съел» */
.vv-pn-left { margin-bottom: 14px; }
.vv-pn-left-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.vv-pn-left-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 44px 8px 10px; margin-bottom: 6px;
  background: var(--paper); border: 1px solid var(--vv-green, #177652); border-radius: var(--r-md); }
.vv-pn-left-img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--r-xs); object-fit: cover; background: var(--line-soft); }
.vv-pn-left-body { flex: 1 1 auto; min-width: 0; }
.vv-pn-left-name { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vv-pn-left-meta { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.vv-pn-left-eat { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; font-size: 13px; }
.vv-pn-left-x { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; }
/* Дневник: карточка «Осталось со вчера» и кнопка «Съел не всё» */
#screen-progress .vv-pcard-left { border-color: var(--vv-green, #177652); }
#screen-progress .vv-dg-partial { display: block; width: 100%; margin-top: 8px; padding: 10px 6px; min-height: 44px; background: transparent; border: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--vv-green-dark, #1F6B45); text-align: center; cursor: pointer; }
/* Лист «съел не всё» */
.vv-partial-sheet-card { max-height: 88vh; overflow-y: auto; }
.vv-pl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vv-pl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.vv-pl-row img, .vv-pl-row .vv-meal-img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--r-xs); object-fit: cover; }
.vv-pl-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vv-pl-toggle { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.vv-pl-opt { min-height: 36px; padding: 6px 10px; border: none; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.vv-pl-opt.is-on { background: var(--vv-green, #177652); color: #fff; }
.vv-pl-actions { margin-top: 14px; }
.vv-pl-actions .btn { width: 100%; min-height: 48px; }

/* ═══ КРИВЫЕ ЭНЕРГИИ ПО СВОИМ ДАННЫМ (07.09.2026, VVELL-745) ═══ */
.vvcurve-leg i.is-today { background: var(--vv-green-dark, #159145); }
.vvcurve-leg i.is-usual { background: transparent; border-top: 2px dashed var(--ink-4, #B8B0A0); height: 0; border-radius: 0; }
.vvcurve-leg i.is-best { background: transparent; border-top: 2px dashed #D9A441; height: 0; border-radius: 0; }
.vvcurve-why { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.vvcurve-why summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.vvcurve-why summary::before { content: '›'; display: inline-block; transition: transform .15s ease; color: var(--ink-3); }
.vvcurve-why[open] summary::before { transform: rotate(90deg); }
.vvcurve-why ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.45; }
.vvcurve-why li { margin: 3px 0; }
.vvcurve-why-sub { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.vvcurve-improve { margin-top: 8px; font-size: 13px; color: var(--ink-2); padding: 9px 12px; border-radius: 12px; background: var(--mint, #E4F3EA); }
.vvcurve-improve b { color: var(--vv-green-dark, #159145); }

/* ═══ МОИ РЕЦЕПТЫ в «Готовим» (07.09.2026, VVELL-744) ═══ */
#screen-cook .cook-mine { margin: 0 0 14px; }
#screen-cook .cook-mine-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
#screen-cook .cook-mine-title { font-size: 15px; font-weight: 700; color: var(--ink); }
#screen-cook .cook-mine-add { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--vv-green, #177652); background: transparent; color: var(--vv-green-dark, #1F6B45); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
#screen-cook .cook-mine-empty { padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r-md); font-size: 13px; color: var(--ink-3); line-height: 1.45; }
#screen-cook .cook-mine-card { border-color: var(--vv-green, #177652); }
#screen-cook .cook-mine-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
#screen-cook .cook-own-chip.is-danger { color: var(--vv-berry, #D7144B); }
#screen-cook .cook-badge-lvl4 { background: var(--vv-green-dark, #159145); color: #fff; }
#screen-cook .cook-badge-lvl3 { background: var(--vv-green, #2DBE64); color: #fff; }
#screen-cook .cook-badge-lvl2 { background: #E0B45A; color: #fff; }
#screen-cook .cook-badge-lvl1 { background: var(--vv-berry, #D7144B); color: #fff; }
.vv-own-sheet-card { max-height: 90vh; overflow-y: auto; }
.vv-own-label { display: block; font-size: 12px; color: var(--ink-3); margin: 12px 0 4px; }
.vv-own-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font: inherit; font-size: 15px; color: var(--ink); }
.vv-own-text { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font: inherit; font-size: 15px; line-height: 1.45; color: var(--ink); resize: vertical; }
.vv-own-row { display: flex; align-items: center; gap: 10px; }
.vv-own-row .vv-own-label { margin: 0; }
.vv-own-serv { width: 90px; }
.vv-own-found { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.vv-own-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--paper); font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; }
.vv-own-pick img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: 0 0 36px; background: var(--line-soft); }
.vv-own-pick span { flex: 1 1 auto; min-width: 0; }
.vv-own-pick b { flex: 0 0 auto; color: var(--ink-2); }
.vv-own-none { font-size: 12.5px; color: var(--ink-3); padding: 6px 2px; }
.vv-own-acts { margin-top: 16px; }
.vv-own-acts .btn { width: 100%; min-height: 48px; }

/* ═══ «Прогресс»: переключатель «Еда · Образ жизни» (07.09.2026, VVELL-746) ═══ */
#screen-stats .vv-stats-sec { margin: 0 0 14px; }
#screen-stats .vv-pc-svg { display: block; width: 100%; height: auto; margin: 6px 0 2px; }
#screen-stats .vv-stats-sec button { flex: 1; min-height: 40px; border: none; background: transparent; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-3); cursor: pointer; }
#screen-stats .vv-stats-sec button.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 23, 15, .12); }

/* ── Свои рецепты: фото блюда и оценка по фото (VVELL-748, 08.09.2026) ── */
#screen-cook .cook-mine-photo, #vv-own-sheet .cook-mine-photo {
  width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; margin-right: 10px;
  background: var(--vv-line, #E6E1D6);
}
#screen-cook .cook-own-photo, #vv-own-sheet .cook-own-photo { position: relative; cursor: pointer; display: inline-flex; align-items: center; }
#screen-cook .cook-own-photo input[type=file], #vv-own-sheet .cook-own-photo input[type=file] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
#vv-own-sheet .vv-own-photo-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }

/* «Под твою цель» в листе «О товаре» (VVELL-735, 08.09.2026) */
.pc-goal-fit { color: var(--ink-2, #565F57); }
.pc-goal-fit.is-strong { color: var(--vv-green, #177652); font-weight: 600; }

/* «За 14 дней» на Сводке в языке «Прогресса» (VVELL-673, 08.09.2026): те же карточки тренда */
.wh-bands .wh-hc-card { padding: 10px 0 6px; border-top: 1px solid var(--line-soft, #E6E1D6); }
.wh-bands .wh-hc-card:first-of-type { border-top: 0; padding-top: 4px; }
.wh-bands .wh-hc-card .vv-out-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.wh-bands .wh-hc-card .vv-out-head span { font-weight: 800; font-size: 14px; }
.wh-bands .wh-hc-card .vv-out-head b { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.wh-bands .wh-hc-card .vv-out-head b.is-muted { font-family: var(--font-body); font-weight: 600; color: var(--ink-3); font-size: 13px; }
.wh-bands .wh-hc-card .vv-out-head i { font-style: normal; font-size: 11.5px; color: var(--ink-3); flex-basis: 100%; margin-top: -2px; }

/* «Память обо мне» — группы по теме (08.09.2026) */
#vv-chat-memory .vv-chat-mem-group { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3, #7A8479); margin: 16px 0 4px; }
#vv-chat-memory .vv-chat-mem-group:first-of-type { margin-top: 8px; }

/* Две кривые на одном поле — «За 14 дней» на Сводке (VVELL-673, 08.09.2026). Второй ряд — тёплый, чтобы отличался и без легенды. */
.vvtr-line--b { stroke: var(--vv-orange, #C2571B); stroke-width: 2.1; }
.vvtr-dot--b { fill: var(--vv-orange, #C2571B); stroke: var(--vvch-dot-ring, #fff); stroke-width: 1.6; }
.vvtr-axis--b, .vvtr-val--b { fill: var(--vv-orange, #C2571B); }
.vvtr-val--b { font-size: 10.5px; font-weight: 700; }
.vvtr-duo-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); margin: 4px 0 2px; }
.vvtr-duo-leg i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: 3px; margin-right: 5px; }
.vvtr-duo-leg .vvtr-duo-a { background: var(--vvch-good, #177652); }
.vvtr-duo-leg .vvtr-duo-b { background: var(--vv-orange, #C2571B); }

/* ═══ ДНЕВНИК БЕЗ ДУБЛЕЙ + «КУХНЯ» (VVELL-761, 08.09.2026). Цвета только токенами. ═══ */
#screen-progress .vv-dg-invite { margin-bottom: 12px; }
#screen-progress .vv-dg-invite .vv-dg-status { margin-bottom: 6px; }
#screen-progress .vv-dg-invite .vv-dg-stale { margin-bottom: 8px; background: transparent; padding: 0 2px; }
#screen-progress .vv-dg-allday { margin-top: 4px; }
#screen-progress .vv-dg-goals .vv-dg-title { width: 100%; display: flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 2px 0; text-align: left; cursor: pointer; }
#screen-progress .vv-dg-goals .vv-dg-goals-chev { margin-left: auto; display: inline-flex; transition: transform .2s; }
#screen-progress .vv-dg-goals .vv-dg-goals-chev svg { width: 16px; height: 16px; color: var(--ink-3); }
#screen-progress .vv-dg-goals.is-open .vv-dg-goals-chev { transform: rotate(180deg); }
#screen-progress .vv-dg-goals .vv-dg-goals-body { margin-top: 8px; }
#screen-progress .vv-kt { padding: 14px 14px 12px; }
#screen-progress .vv-kt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
#screen-progress .vv-kt-title { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; color: var(--ink); }
#screen-progress .vv-kt-title svg { width: 18px; height: 18px; color: var(--vv-green-dark); }
#screen-progress .vv-kt-sub { font-size: 12px; color: var(--ink-3); }
#screen-progress .vv-kt-sec { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 12px 0 6px; }
#screen-progress .vv-kt-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line-soft); }
#screen-progress .vv-kt-row:first-of-type { border-top: 0; }
#screen-progress .vv-kt-row.is-done .vv-kt-name { color: var(--ink-3); }
#screen-progress .vv-kt-img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--bg-warm); }
#screen-progress .vv-kt-img.is-empty { display: block; }
#screen-progress .vv-kt-body { flex: 1; min-width: 0; }
#screen-progress .vv-kt-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
#screen-progress .vv-kt-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
#screen-progress .vv-kt-meta svg { width: 13px; height: 13px; color: var(--vv-green-dark); }
#screen-progress .vv-kt-acts { display: flex; gap: 8px; margin-top: 8px; }
#screen-progress .vv-kt-btn { padding: 8px 14px; font-size: 13px; border-radius: 999px; }
#screen-progress .vv-kt-line { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2); }
#screen-progress .vv-kt-line:first-of-type { border-top: 0; }
#screen-progress .vv-kt-line-txt { flex: 1; min-width: 0; }
#screen-progress .vv-kt-line-txt b { color: var(--ink); font-weight: 700; }
#screen-progress .vv-kt-mini { border: 1px solid var(--line); background: var(--paper); color: var(--vv-green-dark); font-weight: 700; font-size: 12px; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
#screen-progress .vv-kt-link { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line-soft); background: var(--paper); border-radius: var(--r-md, 12px); font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
#screen-progress .vv-kt-link svg { width: 16px; height: 16px; color: var(--ink-3); }
#screen-progress .vv-kt-until { margin-top: 10px; font-size: 12px; color: var(--ink-3); }
#screen-progress .vv-kt-build { margin-top: 8px; }
.vv-rm-why { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); margin-top: 2px; }

/* ── «Я заболел» (VVELL-770, 09.09.2026): баннер на «Сегодня», пометки в запасе хода и кривой, набор в чате ── */
.wh-ill { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--warn, #d97706) 10%, var(--card, #fff)); border: 1px solid color-mix(in srgb, var(--warn, #d97706) 35%, transparent); }
.wh-ill-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--warn, #d97706) 18%, transparent); color: var(--warn, #d97706); }
.wh-ill-ic svg { width: 16px; height: 16px; }
.wh-ill-body { flex: 1 1 auto; min-width: 0; }
.wh-ill-t { font-weight: 700; font-size: 15px; color: var(--ink, #111); }
.wh-ill-s { font-size: 13px; line-height: 1.45; color: var(--ink-2, #444); margin-top: 3px; }
.wh-ill-s .is-quiet { color: var(--ink-3, #777); }
.wh-ill-a { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wh-ill-a .btn-sm { padding: 6px 12px; font-size: 13px; min-height: 36px; }
#screen-age .vv-rd-top, #screen-stats .vv-rd-top { flex-wrap: wrap; }
.vv-rd-sick { flex: 1 1 100%; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-2, #444); padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--warn, #d97706) 10%, transparent); }
.vv-rd-sick svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--warn, #d97706); }
.vvcurve-ill { background: color-mix(in srgb, var(--warn, #d97706) 10%, transparent); }
.vvcurve-ill svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--warn, #d97706); }
.vv-ai-care { flex-direction: column; align-items: stretch; }
.vv-ai-care-note { font-size: 12px; color: var(--ink-3, #777); text-align: center; margin-top: 6px; }
.vv-ai-open { margin: 8px 0 2px; }

/* ── Дневник 09.09.2026: холодильник с фото, история приёмов, цели без обещаний (VVELL-774/775) ── */
#screen-progress .vv-kt-line { display: flex; align-items: center; gap: 10px; }
#screen-progress .vv-kt-img.is-sm { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
#screen-progress .vv-kt-line-txt { flex: 1 1 auto; min-width: 0; }
.vv-tl-hist .vv-tl-t svg { width: 16px; height: 16px; }
.vv-hs-day { padding: 10px 0 8px; border-bottom: 1px solid var(--line, #e6e3dc); }
.vv-hs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.vv-hs-head b { font-size: 15px; } .vv-hs-head span { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.vv-hs-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; }
.vv-hs-meal { flex: 0 0 62px; font-size: 12px; color: var(--ink-3); }
.vv-hs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-hs-dish { font-size: 11px; color: var(--ink-3); border: 1px solid var(--line, #e6e3dc); border-radius: 999px; padding: 0 6px; }
.vv-hs-kcal { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vv-hs-add { margin-top: 6px; }
.vv-hs-empty { color: var(--ink-3); font-size: 14px; padding: 8px 0; }
.vv-hs-meals { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.vv-hs-q { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line, #e6e3dc); background: var(--card, #fff); color: var(--ink); }
.vv-hs-res { margin-top: 8px; }
.vv-hs-pick { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 14px; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line, #e6e3dc); background: transparent; color: var(--ink); cursor: pointer; }
.vv-hs-pick img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.vv-hs-pick .vv-hs-kcal { margin-left: auto; }
.vv-hs-note { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.vv-dg-goal .vv-dg-name svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; color: var(--vv-green-dark, #2E5D00); }
.vv-dg-goal .vv-dg-when { font-size: 11px; color: var(--ink-3); background: var(--bg-2, #f2efe8); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.vv-dg-goals-note { font-size: 12px; line-height: 1.45; color: var(--ink-3); padding: 8px 10px; border-radius: 10px; background: var(--bg-2, #f2efe8); margin-top: 6px; }
.vv-dg-goals-note svg { width: 13px; height: 13px; vertical-align: -2px; }

/* ── VVELL-779 (09.09.2026): остатки покупки, черновик, история и цели «как корзина» ── */
#screen-progress .vv-dg-lp { padding: 14px 14px 12px; }
#screen-progress .vv-dg-lp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#screen-progress .vv-dg-lp-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--font-display, var(--font-body)); font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--ink); text-wrap: balance; }
#screen-progress .vv-dg-lp-title svg { width: 18px; height: 18px; flex: none; color: var(--vv-green-dark); }
#screen-progress .vv-dg-lp-age { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
#screen-progress .vv-dg-lp-sub { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin: 4px 0 4px; }
#screen-progress .vv-dg-lp-meal { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 12px 0 4px; }
#screen-progress .vv-dg-lp .vv-dg-items { display: flex; flex-direction: column; gap: 2px; }
/* Перенос в остатках покупки (VVELL-910, 15.09.2026): кнопка была спрятана целиком,
   и еду, съеденную не в тот приём, нельзя было переложить. Показываем там, где есть
   что править на сервере — у покупки, оформленной в приложении (класс `can-move`). */
#screen-progress .vv-dg-lp .vv-meal-btn-move { display: none; }
#screen-progress .vv-dg-lp.can-move .vv-meal-btn-move { display: inline-flex; }
#screen-progress .vv-dg-lp .vv-kt-link { margin-top: 12px; }
#screen-progress .vv-dg-draft { padding: 14px; margin-bottom: 12px; border-radius: var(--r-lg); background: var(--paper); border: 1px dashed var(--line); }
#screen-progress .vv-dg-draft-h { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--ink); }
#screen-progress .vv-dg-draft-h svg { width: 16px; height: 16px; color: var(--vv-green-dark); }
#screen-progress .vv-dg-draft-t { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin: 4px 0 12px; }
#screen-progress .vv-dg-build { margin-bottom: 12px; }
#screen-progress .vv-dg-rows-noplan { margin-bottom: 12px; }
#screen-progress .vv-dg-empty { margin-bottom: 12px; }
#screen-progress .vv-kt-hint { font-size: 12px; line-height: 1.4; color: var(--ink-3); margin: 0 0 6px; }
/* история приёмов — карточки как в корзине */
.vv-hs-day { padding: 12px 0 10px; }
.vv-hs-head b { font-size: 16px; font-weight: 800; }
.vv-hs-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft, #F0EEE6); }
.vv-hs-row:first-of-type { border-top: 0; }
.vv-hs-img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--bg-warm, #FBFAF6); border: 1px solid var(--line-soft, #F0EEE6); flex: 0 0 44px; }
.vv-hs-img.is-empty { display: block; }
.vv-hs-body { flex: 1 1 auto; min-width: 0; }
.vv-hs-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-overflow: clip; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.vv-hs-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.vv-hs-x { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line, #e6e3dc); background: var(--paper, #fff); color: var(--ink-3); font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.vv-hs-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--line, #e6e3dc); background: transparent; color: var(--vv-green-dark, #2E5D00); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vv-hs-add svg { width: 14px; height: 14px; }
/* цели — строка на цель */
#screen-progress .vv-gl-row { padding: 10px 0; border-top: 1px solid var(--line-soft); }
#screen-progress .vv-gl-row:first-child { border-top: 0; padding-top: 4px; }
#screen-progress .vv-gl-head { display: flex; align-items: center; gap: 8px; }
#screen-progress .vv-gl-name { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
#screen-progress .vv-gl-name svg { width: 16px; height: 16px; flex: none; color: var(--vv-green-dark); }
#screen-progress .vv-gl-when { font-size: 11px; color: var(--ink-3); background: var(--bg-warm); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
#screen-progress .vv-gl-text { font-size: 13px; line-height: 1.4; color: var(--ink-2); margin-top: 3px; }
#screen-progress .vv-gl-num, #screen-progress .vv-gl-lab { font-size: 12px; color: var(--ink-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
#screen-progress .vv-gl-num b, #screen-progress .vv-gl-lab b { color: var(--ink); }
#screen-progress .vv-gl-note { font-size: 12px; line-height: 1.45; color: var(--ink-3); padding: 8px 10px; border-radius: 10px; background: var(--bg-warm); margin-top: 8px; }
#screen-progress .vv-gl-note svg { width: 13px; height: 13px; vertical-align: -2px; }

/* Пунктирные строки «Не из плана» / «История приёмов» (Данил 09.09: «тут кривовато» — имя ломалось на две строки) */
#screen-progress .vv-tl-add .vv-dg-row-name { flex: 0 0 auto; white-space: nowrap; }
#screen-progress .vv-tl-add .vv-dg-row-meta { flex: 1 1 auto; min-width: 0; text-align: right; line-height: 1.3; }

/* VVELL-786 (09.09.2026): «Журнал» на главной — две кнопки перехода вместо счётчиков */
.wh-myday-nav { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.wh-myday-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--r-md, 14px); border: 1px solid var(--line-soft, #F0EEE6); background: var(--paper, #fff); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.wh-myday-btn > svg:first-child { width: 18px; height: 18px; flex: none; color: var(--vv-green-dark, #2E5D00); }
.wh-myday-btn > span { flex: 1 1 auto; }
.wh-myday-btn > svg:last-child { width: 16px; height: 16px; flex: none; color: var(--ink-3); transform: rotate(-90deg); }

/* VVELL-784 (09.09.2026): подсказка в корзине — пожелания словами в чат */
#screen-cart .vv-cart-chat-hint { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; padding: 10px 12px; border-radius: var(--r-md, 14px); background: var(--vv-green-tint, #E7F6EC); border: 1px solid var(--line-soft, #F0EEE6); }
#screen-cart .vv-cart-chat-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--paper, #fff); color: var(--vv-green-dark, #2E5D00); }
#screen-cart .vv-cart-chat-ic svg { width: 16px; height: 16px; }
#screen-cart .vv-cart-chat-txt { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
#screen-cart .vv-cart-chat-txt b { color: var(--ink); }
#screen-cart .vv-cart-chat-btn { flex: none; min-height: 36px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--vv-green-dark, #2E5D00); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* VVELL-785 (09.09.2026): цветная крутилка сборки корзины — просто крутится, без процентов */
.vv-build-spin { position: relative; width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--vv-green-dark, #2E5D00) 0deg, #4CAF6E 90deg, #F2B84B 180deg, #E8734A 250deg, var(--vv-green-dark, #2E5D00) 360deg);
  animation: vvBuildSpin 1.1s linear infinite; }
.vv-build-spin::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--card, #fff); }
.vv-build-spin > span { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 8%, rgba(255,255,255,.55), transparent 22%); }
@keyframes vvBuildSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vv-build-spin { animation-duration: 3s; } }

/* VVELL-782 (09.09.2026, Данил: «кнопка снизу на светлом режиме — сделать посветлее именно тона; в тёмной
   она выглядит отлично»). Светлая тема: те же оттенки по кругу (зелёный → синий → фиолетовый → розовый →
   оранжевый), но светлее и мягче; свечение тише. Ночная тема (.vv-theme-night) не трогается — там прежние
   тёмные ступени. Селектор с :not на html и body, чтобы сработать при любом носителе класса темы. */
html:not(.vv-theme-night) body:not(.vv-theme-night) {
  --vv-ai-grad: linear-gradient(115deg, #2E9A70 0%, #4C8FEA 20%, #8A6BEA 40%, #D96FAA 58%, #E58C52 76%, #2E9A70 100%);
  --vv-ai-wheel: conic-gradient(from 0deg,
    rgba(76, 143, 234, .55), rgba(138, 107, 234, .55), rgba(217, 111, 170, .55),
    rgba(229, 140, 82, .5), rgba(46, 154, 112, .55), rgba(76, 143, 234, .55));
}
html:not(.vv-theme-night) body:not(.vv-theme-night) #bottom-nav-v2 .nav2-ai {
  background: var(--vv-ai-grad) !important;
  box-shadow: -4px -3px 12px 1px rgba(76, 143, 234, .38),
               5px -3px 12px 1px rgba(138, 107, 234, .38),
               5px  5px 12px 1px rgba(217, 111, 170, .34),
              -5px  5px 12px 1px rgba(229, 140, 82, .34),
               0 0 3px rgba(46, 154, 112, .45) !important;
}
html:not(.vv-theme-night) body:not(.vv-theme-night) #bottom-nav-v2 .nav2-ai::after {
  background: var(--vv-ai-wheel);
}
html:not(.vv-theme-night) body:not(.vv-theme-night) #bottom-nav-v2 .nav2-ai.active {
  box-shadow: 0 0 8px 1px rgba(138, 107, 234, .28), 0 0 8px 1px rgba(76, 143, 234, .24) !important;
}

/* ── VVELL-794 (09.09.2026): «Нутриенты · примерно от нормы» на экране «Качество питания».
   Чипы-фильтр по группам (Основное / Минералы / Витамины), подпись покрытия. Чипы — те же
   .fqd-chip из design_v2.css, здесь только раскладка рядов. ── */
.fqn-card { margin-top: 18px; }
.fqn-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; }
.fqn-gl { flex: 0 0 66px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3, #7C877D); }
.fqn-row .fqd-chips { flex: 1 1 auto; min-width: 0; padding-bottom: 0; }
.fqn-sub { font-size: 12.5px; color: var(--ink-3, #7C877D); margin: 2px 0 8px;
  font-variant-numeric: tabular-nums; }

/* ── VVELL-795 (09.09.2026): примерные КБЖУ из состава под списком составляющих на листе фото ── */
.vv-ph-est { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink, #23302A);
  font-variant-numeric: tabular-nums; }
.vv-ph-est:empty { display: none; }
.vv-ph-est span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--ink-3, #7C877D); }
/* ── VVELL-1133 (28.09.2026): свои ккал и БЖУ — свёрнутая правка под итогом состава; раскрывается по тапу ── */
.vv-ph-manual { margin-top: 8px; }
.vv-ph-manual > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--vv-green, #1E9E59);
  padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; }
.vv-ph-manual > summary::-webkit-details-marker { display: none; }
.vv-ph-manual > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; }
.vv-ph-manual[open] > summary::before { transform: rotate(45deg); }
.vv-ph-manual-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.vv-ph-manual-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vv-ph-manual-f span { font-size: 11px; color: var(--ink-3, #7C877D); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-ph-manual-f input { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 6px; border-radius: 10px; font: inherit; font-size: 16px;
  border: 1px solid var(--line-soft, #E6DFD2); background: var(--paper, #fff); color: var(--ink, #23302A); text-align: center;
  font-variant-numeric: tabular-nums; }
.vv-ph-manual-hint { margin-top: 6px; font-size: 11.5px; color: var(--ink-3, #7C877D); }
.od-manual { margin-top: 8px; font-size: 12.5px; color: var(--ink-3, #7C877D); }
/* ── VVELL-1137 (28.09.2026): «N ккал · изменить» у записи дневника и лист правки веса и КБЖУ ── */
.vv-hs-edit { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: inherit; color: var(--vv-green, #1E9E59);
  cursor: pointer; font-weight: 600; white-space: nowrap; }
.vv-hs-edit:hover { text-decoration: underline; }
.vv-meal-meta .vv-hs-edit { font-size: inherit; }
.vv-en-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.vv-en-grid .vv-en-f:first-child { grid-column: 1 / -1; }
.vv-en-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vv-en-f span { font-size: 12px; color: var(--ink-3, #7C877D); }
.vv-en-f input { width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 12px; border-radius: var(--r-xs, 8px); font: inherit; font-size: 16px;
  border: 1px solid var(--line-soft, #E6DFD2); background: var(--paper, #fff); color: var(--ink, #23302A); font-variant-numeric: tabular-nums; }
.vv-en-hint { font-size: 12px; color: var(--ink-3, #7C877D); margin: 2px 0 12px; }

/* ── VVELL-797 (09.09.2026): метка тренировки в легенде кривой энергии — терракот, как точка на графике ── */
.vvcurve-leg i.is-workout { border-color: var(--sand-clay, #9C562C); }

/* ── VVELL-797 (09.09.2026): тренировки дня в секции «Движение» дневника образа жизни ── */
.vv-ld-wk { margin: 8px 0 6px; }
.vv-ld-wk-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--line-soft, #EFE7D7); font-size: 13.5px; color: var(--ink, #23302A); }
.vv-ld-wk-row:first-child { border-top: 0; }
.vv-ld-wk-m { color: var(--ink-3, #7C877D); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── VVELL-799 (09.09.2026): переключатель периода у столбиков нутриентов ── */
.fqn-pers { margin: 6px 0 4px; }

/* ── VVELL-809 (10.09.2026): «Убрать блюдо» рядом с «Заменить» и в листе замены ── */
#cart-list .vv-dish-del { color: var(--vv-red, #C0392B); }
.vv-dish-remove-btn { margin: 6px 14px 4px; width: calc(100% - 28px); color: var(--vv-red, #C0392B) !important; border-color: var(--vv-red, #C0392B) !important; }

/* ── VVELL-812 (10.09.2026): поиск с полкой и корзина в нескольких ссылках ── */
.vv-addmore-shelfnote { padding: 8px 14px 4px; font-size: 12.5px; color: var(--ink-3); }
.vv-addmore-item.is-offshelf .vv-addmore-img { opacity: .6; }
.vv-addmore-item .vv-item-offshelf { margin: 1px 0 2px; }
.vv-links-note { margin: 4px 14px 10px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.vv-link-btn { margin: 6px 14px; width: calc(100% - 28px); }
#vv-links-sheet .vv-sheet-card { padding-bottom: 18px; }

/* VVELL-815: развес в степпере — граммы вместо штук */
.vv-qty-loose .vv-qty-n { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }

/* VVELL-826: «Сюда возят курьеры» в листе магазина */
.vv-ss-hint-b { font-weight: 700; color: var(--ink); margin-top: 6px; }
.vv-ss-item.is-dark { border-color: var(--vv-green, #159145); }

/* VVELL-833: техническая кнопка «Логика подбора» под блоком магазина (только владелец и Игорь) */
.vv-trace-btn { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 6px 10px; border-radius: 10px;
  border: 1px dashed var(--line-soft); background: transparent; color: var(--ink-3); font-size: 12px; font-weight: 600; cursor: pointer; }
.vv-trace-btn svg { width: 14px; height: 14px; }
.vv-trace-btn .vv-trace-tech { font-weight: 500; opacity: .7; }

/* ═══ ИГРА (VVELL-843, 10.09.2026): экран «Здоровье → Игра» и плашка на «Сегодня» ═══ */
.vg-hero { background: var(--surface, #fff); border: 1px solid var(--line-soft); border-radius: var(--r-lg, 18px); padding: 18px 18px 14px; margin: 0 0 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; }
.vg-hero-join { grid-template-columns: 1fr; }
.vg-hero-num { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.vg-hero-cap { color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.vg-streak { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--bg-warm, #F3EEE3); color: var(--ink-3); font-size: 11px; min-width: 84px; }
.vg-streak b { font-size: 22px; color: var(--ink); }
.vg-streak.is-on { background: linear-gradient(160deg, #FFE3B3, #FFD3A8); color: #7A2E0E; }
.vg-streak.is-on b { color: #7A2E0E; }
.vg-flame { display: inline-block; animation: vg-flame 1.3s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes vg-flame { 0%,100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.12) rotate(3deg); } }
.vg-parts { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.vg-parts li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
.vg-parts li b { color: var(--vv-green-dark, #159145); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vg-hero-foot { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.vg-card { background: var(--surface, #fff); border: 1px solid var(--line-soft); border-radius: var(--r-lg, 18px); padding: 14px 16px; margin: 0 0 12px; }
.vg-h { font-weight: 700; font-size: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.vg-h svg { width: 18px; height: 18px; }
.vg-muted { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.vg-seg { display: flex; gap: 6px; margin: 6px 0; }
.vg-seg button { flex: 1; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--line-soft); background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.vg-seg button.is-on { background: var(--vv-green-dark, #159145); border-color: var(--vv-green-dark, #159145); color: #fff; }
.vg-lb { list-style: none; margin: 8px 0 0; padding: 0; }
.vg-lb-cap { font-size: 12px; color: var(--ink-3); }
.vg-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 12px; border-bottom: 1px solid var(--line-soft); }
.vg-row.is-me { background: var(--accent-soft, #D9EBE0); border-color: transparent; }
.vg-row.is-top .vg-rank { background: linear-gradient(135deg, #FFE47A, #C9A227); color: #5A4200; }
.vg-rank { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-warm, #F3EEE3); font-weight: 800; font-size: 12px; }
.vg-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vg-name.has-frame { padding: 2px 8px; border-radius: 999px; box-shadow: 0 0 0 2px #F2A93B, 0 0 0 4px #FFE47A; background: #FFF6DC; }
.vg-pts { font-variant-numeric: tabular-nums; font-size: 15px; }
.vg-mini { display: inline-flex; gap: 2px; }
.vg-badges { display: grid; gap: 10px; }
.vg-badge-row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; opacity: .55; }
.vg-badge-row.is-on { opacity: 1; }
.vg-badge-row b { display: block; font-size: 14px; } .vg-badge-row span { font-size: 12.5px; color: var(--ink-3); }
.vg-badge { display: inline-block; width: 48px; height: 48px; position: relative; overflow: hidden; border-radius: 50%; }
.vg-badge svg { width: 100%; height: 100%; display: block; }
.vg-badge.is-off svg { filter: grayscale(1); opacity: .55; }
.vg-badge.is-on::after { content: ''; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); animation: vg-shine 2.6s ease-in-out infinite; }
@keyframes vg-shine { 0% { transform: translateX(-60%); } 60%,100% { transform: translateX(60%); } }
.vg-badge.is-on { animation: vg-pop .5s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes vg-pop { from { transform: scale(.6); } to { transform: scale(1); } }
.vg-badge-xs { width: 18px; height: 18px; } .vg-badge-xs.is-on::after { display: none; }
.vg-join { display: grid; gap: 8px; margin-top: 12px; }
.vg-join-btn { width: 100%; padding: 12px; border-radius: 12px; font-weight: 700; }
.vg-privacy { font-size: 12px; color: var(--ink-3); margin-top: 10px; line-height: 1.4; }
.vg-team .vg-invite { font-size: 14px; } .vg-team .vg-invite b { font-size: 18px; letter-spacing: .08em; } .vg-copy { padding: 6px 10px; margin-left: 8px; font-size: 12px; }
.vg-rules summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.vg-foot { display: grid; gap: 8px; margin: 6px 0 24px; } .vg-leave { background: transparent; border: 1px solid var(--line-soft); color: var(--ink-3); padding: 10px; border-radius: 12px; }
.vg-sheet-body { display: grid; gap: 10px; padding: 4px 0 12px; } .vg-sheet-body label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-3); }
.vg-sheet-body input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--surface, #fff); color: var(--ink); font-size: 15px; }
.vg-or { text-align: center; color: var(--ink-3); font-size: 12px; }
.vg-home .vg-home-ic { background: linear-gradient(135deg, #FFE47A, #F2A93B); color: #5A4200; }
.vg-home-off { opacity: .92; }
.vg-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 400; }
@media (prefers-reduced-motion: reduce) { .vg-flame, .vg-badge.is-on, .vg-badge.is-on::after { animation: none; } }
/* игра, шаг 2: вызовы недели и дуэли (VVELL-843) */
.vg-ch { border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px 14px; margin: 0 0 10px; display: grid; gap: 8px; }
.vg-ch.is-in { border-color: rgba(122,74,42,.35); background: color-mix(in srgb, var(--surface, #fff) 92%, #FFE47A); }
.vg-ch-top, .vg-duel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vg-ch-top b, .vg-duel-top b { font-size: 15px; line-height: 1.25; }
.vg-ch-btn { justify-self: start; padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.vg-chip { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--line-soft); color: var(--ink-2, var(--ink)); white-space: nowrap; }
.vg-chip-ok { background: #DDF3E4; color: #1F6B3A; }
.vg-chip-bad { background: #FBE0DC; color: #A33628; }
.vg-bar { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.vg-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F2A93B, #FFE47A); transition: width .4s ease; }
.vg-bar i.is-ok { background: linear-gradient(90deg, #2E9E5B, #7ED8A0); }
.vg-bar i.is-bad { background: linear-gradient(90deg, #C0392B, #F19C8F); }
.vg-duel { border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px 14px; margin: 0 0 10px; display: grid; gap: 8px; }
.vg-duel.is-pending { border-style: dashed; }
.vg-duel.is-done { opacity: .8; }
.vg-duel-score { display: flex; align-items: baseline; justify-content: center; gap: 12px; font-variant-numeric: tabular-nums; }
.vg-duel-score b { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.vg-duel-score span { font-size: 22px; color: var(--ink-3); }
.vg-duel-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vg-duel-btns .btn { flex: 1 1 auto; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 700; }
.vg-duel .vg-invite { font-size: 14px; } .vg-duel .vg-invite b { font-size: 18px; letter-spacing: .08em; }
/* лига (VVELL-845, 11.09.2026): цель недели с кольцом, вход одной кнопкой, живые значки и экран «Новый значок» */
.vg-goal .vg-h .vg-chip { margin-left: auto; }
.vg-goal-row { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.vg-goal-name { font-size: 17px; font-weight: 800; line-height: 1.2; margin-bottom: 4px; }
.vg-goal-body { display: grid; gap: 4px; }
.vg-goal.is-done { border-color: #9BD3AE; background: linear-gradient(180deg, #F2FAF4, var(--surface, #fff)); }
.vg-ring { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.vg-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.vg-ring-bg { fill: none; stroke: var(--line-soft); stroke-width: 8; }
.vg-ring-fg { fill: none; stroke: #F2A93B; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); animation: vg-ring-in 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vg-ring-in { from { stroke-dashoffset: 100; } }
.vg-goal.is-done .vg-ring-fg { stroke: #2E9E5B; }
.vg-ring b { position: relative; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.vg-team-note { margin-top: 10px; font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vg-team-note svg { width: 16px; height: 16px; } .vg-team-note b { color: var(--ink); }
.vg-more summary .vg-chip { margin-left: 8px; } .vg-more-cap { margin: 4px 0 10px; }
.vg-parts-join li { border-bottom: 0; padding: 4px 0; } .vg-parts-join li span { display: flex; gap: 10px; align-items: center; } .vg-parts-join svg { width: 18px; height: 18px; color: var(--vv-green-dark, #159145); flex: 0 0 auto; }
.vg-join-link { background: transparent; border: 0; color: var(--vv-green-dark, #159145); font-weight: 700; padding: 8px; }
.vg-badges-grid { grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
.vg-badge-cell { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 11px; color: var(--ink-3); line-height: 1.2; }
/* живые значки: заработанные дышат и покачиваются, тап — повтор «получения» */
.vg-badge-row.is-on .vg-badge svg { animation: vg-breathe 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); transform-origin: 50% 50%; }
@keyframes vg-breathe { 0%,100% { transform: translateY(0) rotate(-2deg) scale(1); } 50% { transform: translateY(-2px) rotate(2deg) scale(1.04); } }
.vg-badge.is-on { cursor: pointer; }
.vg-badge.is-replay { animation: vg-replay .8s cubic-bezier(.2,.9,.3,1.4) both; }
.vg-badge.is-replay::after { animation-duration: .8s; }
@keyframes vg-replay { 0% { transform: scale(.7) rotate(-12deg); } 45% { transform: scale(1.22) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
/* экран «Новый значок» */
.vg-unlock { position: fixed; inset: 0; z-index: 390; display: grid; place-items: center; background: rgba(20, 30, 24, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; }
.vg-unlock.is-in { opacity: 1; }
.vg-unlock-rays { position: absolute; width: 140vmax; height: 140vmax; left: 50%; top: 50%; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, rgba(255,228,122,0) 0deg, rgba(255,228,122,.35) 12deg, rgba(255,228,122,0) 24deg, rgba(255,228,122,0) 36deg, rgba(255,228,122,.35) 48deg, rgba(255,228,122,0) 60deg, rgba(255,228,122,0) 72deg, rgba(255,228,122,.35) 84deg, rgba(255,228,122,0) 96deg, rgba(255,228,122,0) 108deg, rgba(255,228,122,.35) 120deg, rgba(255,228,122,0) 132deg, rgba(255,228,122,0) 144deg, rgba(255,228,122,.35) 156deg, rgba(255,228,122,0) 168deg, rgba(255,228,122,0) 180deg, rgba(255,228,122,.35) 192deg, rgba(255,228,122,0) 204deg, rgba(255,228,122,0) 216deg, rgba(255,228,122,.35) 228deg, rgba(255,228,122,0) 240deg, rgba(255,228,122,0) 252deg, rgba(255,228,122,.35) 264deg, rgba(255,228,122,0) 276deg, rgba(255,228,122,0) 288deg, rgba(255,228,122,.35) 300deg, rgba(255,228,122,0) 312deg, rgba(255,228,122,0) 324deg, rgba(255,228,122,.35) 336deg, rgba(255,228,122,0) 348deg, rgba(255,228,122,0) 360deg); -webkit-mask: radial-gradient(circle, #000 0, #000 22%, transparent 62%); mask: radial-gradient(circle, #000 0, #000 22%, transparent 62%); animation: vg-rays 14s linear infinite; opacity: 0; transition: opacity .6s ease .15s; }
.vg-unlock.is-in .vg-unlock-rays { opacity: 1; }
@keyframes vg-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.vg-unlock-card { position: relative; width: min(88vw, 340px); padding: 34px 22px 22px; border-radius: 26px; background: var(--surface, #fff); text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.35); transform: translateY(24px) scale(.94); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.vg-unlock.is-in .vg-unlock-card { transform: none; }
.vg-unlock-badge { position: relative; width: 132px; height: 132px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; transform: scale(.2) rotate(-40deg); opacity: 0; }
.vg-unlock.is-in .vg-unlock-badge { animation: vg-unlock-in .9s cubic-bezier(.2,.9,.3,1.35) .12s both, vg-breathe 3.4s ease-in-out 1.1s infinite; }
@keyframes vg-unlock-in { 0% { transform: scale(.2) rotate(-40deg); opacity: 0; } 55% { transform: scale(1.18) rotate(6deg); opacity: 1; } 75% { transform: scale(.96) rotate(-2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.vg-unlock-badge svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
.vg-unlock-badge::after { content: ''; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%); animation: vg-shine 2.2s ease-in-out .9s infinite; }
.vg-unlock-ring { position: absolute; left: 50%; top: 100px; width: 132px; height: 132px; margin-left: -66px; border-radius: 50%; border: 3px solid #FFD966; opacity: 0; pointer-events: none; }
.vg-unlock.is-in .vg-unlock-ring { animation: vg-burst 1s ease-out .45s both; }
@keyframes vg-burst { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.vg-unlock-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.vg-unlock-name { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 6px; }
.vg-unlock-how { font-size: 14px; color: var(--ink-3); line-height: 1.4; margin-bottom: 18px; }
.vg-unlock-btn { width: 100%; padding: 13px; border-radius: 14px; font-weight: 800; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .vg-unlock-rays, .vg-unlock-ring, .vg-ring-fg, .vg-badge-row.is-on .vg-badge svg, .vg-badge.is-replay, .vg-unlock-badge::after { animation: none !important; } .vg-unlock.is-in .vg-unlock-badge { animation: none; transform: none; opacity: 1; } }

/* Ещё есть дома с прошлой покупки (VVELL-856) — строка под шапкой приёма */
.vv-meal-athome { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--ink-3); margin: -2px 0 8px; line-height: 1.35; }
.vv-meal-athome svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; color: var(--vv-green, #177652); }

/* «Из рецептов» в листе добавления (VVELL-859): вход в «Готовим · Докупить» из любого режима */
.vv-addmore-recipes { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 10px; padding: 10px 12px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--paper); font: inherit; font-size: 13px; font-weight: 600;
  color: var(--vv-green, #177652); cursor: pointer; text-align: left; }
.vv-addmore-recipes span { flex: 1 1 auto; }
.vv-addmore-recipes svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* ══ Лига: лицо и лента команды (VVELL-864) ══ */
.vg-hero-ava { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.vg-hero-ava b { display: block; font-size: 15px; }
.vg-link { border: none; background: transparent; color: var(--vv-green, #177652); font: inherit; font-size: 12.5px; font-weight: 600; padding: 0; cursor: pointer; }
.vg-ava { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; flex: 0 0 auto; vertical-align: middle; background: var(--bg-warm, #F3EEE3); }
.vg-ava img, .vg-ava-ic { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; border-radius: 50%; }
.vg-ava-ic svg { width: 62%; height: 62%; color: var(--ink); }
.vg-ava-xs { width: 22px; height: 22px; } .vg-ava-sm { width: 34px; height: 34px; } .vg-ava-md { width: 52px; height: 52px; } .vg-ava-lg { width: 64px; height: 64px; }
.vg-ava.is-edit { cursor: pointer; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--line); }
.vg-ava-now { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.vg-ava-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.vg-ava-pick { aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; padding: 0; background: transparent; cursor: pointer; }
.vg-ava-pick .vg-ava-ic { border-radius: 50%; }
.vg-ava-pick.is-on { border-color: var(--vv-green-dark, #159145); }
.vg-ava-up { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.vg-ava-up svg { width: 18px; height: 18px; }
.vg-stories { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; }
.vg-story { display: grid; justify-items: center; gap: 4px; border: none; background: transparent; padding: 0; font: inherit; font-size: 11px; color: var(--ink-2); cursor: pointer; }
.vg-story .vg-ava { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--vv-green, #177652); }
.vg-compose { display: grid; gap: 8px; margin: 8px 0 12px; }
.vg-compose textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 12px; font: inherit; font-size: 14px; background: var(--paper); resize: vertical; }
.vg-compose-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vg-compose-photo { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-soft); cursor: pointer; }
.vg-compose-photo svg { width: 18px; height: 18px; }
.vg-compose-row .btn { min-height: 40px; padding: 8px 14px; }
.vg-story-btn { border: 1px solid var(--line-soft); background: transparent; }
.vg-posts { display: grid; gap: 10px; }
.vg-post { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.vg-post-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vg-post-head .vg-x { margin-left: auto; border: none; background: transparent; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.vg-post-text { font-size: 14px; line-height: 1.4; margin-top: 2px; white-space: pre-wrap; }
.vg-post-img { display: block; max-width: 100%; border-radius: 12px; margin-top: 8px; }
.vg-like { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; border: 1px solid var(--line-soft); background: transparent; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.vg-like svg { width: 14px; height: 14px; } .vg-like.is-on { color: #D7144B; border-color: #F3C2CE; background: #FCE9EE; }
.vg-story-view { position: fixed; inset: 0; z-index: 1200; background: rgba(20, 24, 22, .96); color: #fff; display: grid; grid-template-rows: auto 1fr auto; padding: 16px; box-sizing: border-box; }
.vg-story-view img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 14px; align-self: center; }
.vg-story-top { display: flex; align-items: center; gap: 8px; font-size: 13px; } .vg-story-top span { color: #cfd6d1; }
.vg-story-text { align-self: center; font-size: 18px; line-height: 1.4; text-align: center; padding: 12px; }
.vg-story-foot { display: flex; justify-content: center; }

/* План из чата по дням (VVELL-869) */
.vv-ai-plan-day { margin: 12px 0 4px; font-size: 14px; color: var(--vv-ink, #1f2a22); }
.vv-ai-plan-day span { color: #6b746f; font-weight: 500; }
.vv-ai-plan-meal { margin: 6px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b746f; }
.vv-ai-plan-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.vv-ai-plan-tag { font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 8px; background: #eef2ec; color: #3d4a41; }
.vv-ai-plan-tag.vv-ai-plan-new { background: #fff3d6; color: #7a5200; }
.vv-ai-plan-tag.vv-ai-plan-pf { background: #e3efe0; color: #2e5d00; }

/* Страница ИИ-чата по логике ИИ-чатов (VVELL-871, 12.09.2026) */
#screen-chat .vv-chat-top { display: flex; justify-content: space-between; align-items: center; padding: 2px 0 6px; }
#screen-chat .vv-chat-top-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-2); font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; }
#screen-chat .vv-chat-top-btn:active { background: var(--vv-green-tint); }
#screen-chat .vv-chat-top-btn.is-new { color: var(--vv-green-dark); }
#screen-chat .vv-chat-top-ic { display: inline-flex; } #screen-chat .vv-chat-top-ic svg { width: 18px; height: 18px; }
/* Примеры просьб в приветствии чата (владелец, 15.09.2026). Были вставками внутри предложения —
   стали кнопками под ним: своя строка, своя форма, видно, что нажимается. */
#screen-chat .vv-chat-hi { line-height: 1.5; }
#screen-chat .vv-chat-eg-lbl { margin: 12px 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); }
#screen-chat .vv-chat-egs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#screen-chat .vv-chat-eg { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line, rgba(0,0,0,.1));
  background: var(--bg-2, #f2efe8); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600;
  line-height: 1.35; text-align: left; cursor: pointer; transition: transform .12s ease, background .12s ease; }
#screen-chat .vv-chat-eg:hover { background: var(--line-soft, #eae6dd); }
#screen-chat .vv-chat-eg:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { #screen-chat .vv-chat-eg { transition: none; } }
#screen-chat .vv-chat-context:empty { display: none; }
#screen-chat .vv-chat-context .vv-wish-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 0 0 8px; margin: 0; scrollbar-width: none; }
#screen-chat .vv-chat-context .vv-wish-chips::-webkit-scrollbar { display: none; }
#screen-chat .vv-chat-ctx-label { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px;
  background: var(--vv-green-dark); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
#screen-chat .vv-chat-ctx-label svg { width: 14px; height: 14px; }
#screen-chat .vv-chat-context .vv-wish-chip { flex: 0 0 auto; min-height: 32px; font-size: 12px; }
.vv-chat-mem-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 12px; border: 1.3px solid var(--line-soft); border-radius: 999px;
  background: var(--paper); color: var(--vv-green-dark); font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; }
.vv-chat-mem-link svg { width: 16px; height: 16px; }
#screen-chat .vv-ai-tools { margin: 4px 0 0 40px; }
#screen-chat .vv-ai-tool { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 4px 6px; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 8px; }
#screen-chat .vv-ai-tool svg { width: 14px; height: 14px; }
#screen-chat .vv-ai-tool:active { background: var(--vv-green-tint); color: var(--vv-green-dark); }

/* ── Lottie-анимации (VVELL-873, 12.09.2026) ─────────────────────────────────────────────────────── */
.vv-build-anim { width: 120px; height: 120px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.vv-build-anim > .vv-build-spin { margin: 0; }
.vv-build-anim.vv-anim-on svg { display: block; }
.vv-chat-spin.vv-think-anim { width: 44px; height: 16px; border: 0 !important; animation: none !important; border-radius: 0; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 8px; }
.vv-chat-spin.vv-think-anim svg { display: block; width: 44px !important; height: 16px !important; }
.vv-empty-anim { width: 112px; height: 112px; margin: 0 auto 4px; }
.vv-empty-anim:empty { display: none; }
#vv-anim-success { position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
#vv-anim-success.is-in { opacity: 1; }
#vv-anim-success.is-out { opacity: 0; }
.vv-anim-success-lottie { width: 128px; height: 128px; filter: drop-shadow(0 12px 24px rgba(16, 23, 15, .18)); }
.vv-anim-success-text { margin-top: 2px; padding: 8px 14px; border-radius: 999px; background: var(--paper, #fff); color: var(--ink, #161A13); font-weight: 700; font-size: 14px; box-shadow: 0 8px 24px rgba(16, 23, 15, .12); }
.vg-unlock-lottie { position: absolute; left: 50%; top: 100px; width: 320px; height: 320px; margin-left: -160px; margin-top: -94px; pointer-events: none; z-index: 0; }
.vg-unlock-card .vg-unlock-badge, .vg-unlock-card .vg-unlock-ring { z-index: 1; }

/* ── Проявление графиков слева направо (VVELL-873, 12.09.2026) ─────────────────────────────────────
   Класс .vvch-svg--pending ставит vvchart.js только при загруженном vv_anim.js; наблюдатель снимает его и ставит
   .is-anim, когда график в кадре. Группа .vvch-anim — заливка/линии/точки/столбики; сетка и оси не прячутся. */
.vvch-svg--pending .vvch-anim { clip-path: inset(-6px 100% -6px -6px); }
.vvch-svg.is-anim .vvch-anim { animation: vvch-reveal 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes vvch-reveal { from { clip-path: inset(-6px 100% -6px -6px); } to { clip-path: inset(-6px -6px -6px -6px); } }
.vvch-svg.is-anim .vvch-dot--last { transform-box: fill-box; transform-origin: center; animation: vvch-pop .45s cubic-bezier(.2, .9, .3, 1.4) 1s both; }
@keyframes vvch-pop { from { transform: scale(.3); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vvch-svg--pending .vvch-anim, .vvch-svg.is-anim .vvch-anim { clip-path: none; animation: none; }
  .vvch-svg.is-anim .vvch-dot--last { animation: none; }
}

/* столбики растут снизу по очереди (VVELL-873, волна 3): svg.vv-reveal-pending → is-anim по кадру */
.vv-reveal-pending .vv-grow { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
svg.is-anim .vv-grow { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%;
  animation: vv-grow-y .8s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes vv-grow-y { to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .vv-reveal-pending .vv-grow, svg.is-anim .vv-grow { transform: none; animation: none; }
}

/* значок «новый» в списке (VVELL-873, волна 4): подпись + пульсирующее кольцо до первого тапа */
.vg-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; font-style: normal; letter-spacing: .02em; line-height: 1.5; background: #FBE4EC; color: #B3134F; vertical-align: 2px; }
.vg-badge-row.is-new .vg-badge.is-on { animation: vg-pop .5s cubic-bezier(.2,.9,.3,1.4) both, vg-new-ring 1.8s ease-out .6s infinite; }
@keyframes vg-new-ring { 0% { box-shadow: 0 0 0 0 rgba(194, 24, 91, .55); } 70% { box-shadow: 0 0 0 11px rgba(194, 24, 91, 0); } 100% { box-shadow: 0 0 0 11px rgba(194, 24, 91, 0); } }
@media (prefers-reduced-motion: reduce) { .vg-badge-row.is-new .vg-badge.is-on { animation: none; box-shadow: 0 0 0 3px rgba(194, 24, 91, .35); } }

/* набор из чата: «давно не брал» — брал регулярно, но давно не было (VVELL-870) */
.vv-ai-plan-tag.vv-ai-plan-back { background: #e6f0fb; color: #1f4e79; }

/* набор из чата: «уже дома» под заголовком дня (VVELL-869) */
.vv-ai-plan-home { margin: 0 0 6px; padding: 2px 8px; border-radius: 8px; background: #eaf3ec; font-size: 12.5px; color: #2f5d43; }

/* шапка карточки набора в чате (VVELL-869): длинная цель переносится, сумма стоит своей колонкой сверху —
   раньше «до 6 000 ₽» рвалось, и «5184 ₽ · 30 шт» вставало в ту же строку: читалось «до 65184 ₽» */
.vv-ai-cart-head { gap: 12px; align-items: flex-start; }
.vv-ai-cart-goal { flex: 1 1 auto; min-width: 0; }
.vv-ai-cart-total { flex: none; white-space: nowrap; }

/* «вода дня» (VVELL-873, волна 6): капля над числом воды в Дневнике */
.vv-dg-fl-head { position: relative; }
.vv-dg-fl-drop { position: absolute; right: -8px; top: -30px; width: 52px; height: 52px; pointer-events: none; }
.vv-dg-fl-drop svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .vv-dg-fl-drop { display: none; } }

/* экран «Восстановление» с кольца на «Сегодня» (VVELL-874) */
/* ⚠ ЦВЕТ ЧИСЛА — ТОЛЬКО ИЗ ПАЛИТРЫ (VVELL-937, 16.09.2026). Здесь стояла переменная
   `--green`, которой в палитре приложения НЕТ ВОВСЕ — ни в дневной, ни в ночной. Браузер
   молча брал запасное значение #2F7A4E, и под небом главное число экрана (самое крупное,
   ради которого сюда и заходят) рисовалось тёмно-зелёным по тёмному стеклу: контраст 2,61
   при норме 3,0 — владелец прислал снимок именно из-за него. Жёлтый и оранжевый рядом
   были не лучше: #B7791F и #C2410C подобраны для белого фона.
   Теперь цвета берутся из палитры, которая сама меняется вместе с темой: ночью мятный,
   песочный и лососевый, днём — тёмные. Запасные значения оставлены дневные — на случай,
   если файл палитры не загрузится. */
.rcvd .rcv-num.is-good { color: var(--vv-green-dark, #2F7A4E); }
.rcvd .rcv-num.is-mid { color: var(--vv-yellow-ink, #B7791F); }
.rcvd .rcv-num.is-warn { color: var(--vv-berry, #C2410C); }
.rcvd .rcv-num span { font-size: .5em; margin-left: 2px; }
.rcvd .rcv-dash { color: var(--ink-3, #8a928c); }
.rcvd .rcv-word { font-weight: 700; }
.rcvd .rcv-word.is-good { color: var(--vv-green-dark, #2F7A4E); }
.rcvd .rcv-word.is-mid { color: var(--vv-yellow-ink, #B7791F); }
.rcvd .rcv-word.is-warn { color: var(--vv-berry, #C2410C); }
.rcvd .rcv-ill { color: #C2410C; }
.rcvd .rcv-text { font-size: 14px; line-height: 1.5; color: var(--ink-2, #3d4a41); }
.rcvd .rcv-rows { padding: 0; }
.rcvd .rcv-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border: 1px solid var(--line-soft, #e3e5df); border-radius: 14px; background: var(--surface, #fff); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink, #1f2a22); cursor: pointer; }

/* строки сигналов на экране «Восстановление» — те же, что у «Запаса хода» (VVELL-874) */
.rcvd .vv-rd-sig {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 0;
  /* Разделитель — СВЕРХУ, а не снизу. Строки бывают двух типов (кнопка с историей
     и плоская без неё), поэтому :last-of-type врал бы: он считает по типу тега, и
     линия пропадала бы не у последней строки, а у последней кнопки. Верхняя граница
     снимается у первой строки соседним селектором и не зависит от типов вовсе. */
  border: 0; border-top: 1px solid var(--line-soft);
  background: transparent; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rcvd .vv-rd-why-note + .vv-rd-sig { border-top: none; }
.rcvd .vv-rd-sig.is-flat { cursor: default; }
.rcvd .vv-rd-sig.is-flat:active { opacity: 1; }
.rcvd .vv-rd-sig-nohist {
  flex: 0 0 auto; font-size: 11px; color: var(--ink-3); white-space: nowrap;
}
.rcvd .vv-rd-sig:active { opacity: .65; }
.rcvd .vv-rd-sig-name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.rcvd .vv-rd-sig-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.rcvd .vv-rd-sig-sub.is-good { color: var(--vv-green-dark, #2E5D00); }
.rcvd .vv-rd-sig-sub.is-warn { color: var(--vv-berry); }
.rcvd .vv-rd-sig-src {
  display: block; margin-top: 2px; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .01em; opacity: .85;
}
.rcvd .vv-rd-sig-val { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.rcvd .vv-rd-sig-chev { display: inline-flex; flex: 0 0 auto; }
.rcvd .vv-rd-sig-chev .wh-ic {
  width: 16px; height: 16px; vertical-align: 0; color: var(--ink-3);
  transform: rotate(-90deg);
}

/* «Словами» в листе «Добавить в дневник» (VVELL-875) */
.vv-tx-area { display: block; width: 100%; min-height: 64px; resize: vertical; font: inherit; line-height: 1.4; margin-bottom: 8px; }
.vv-tx-note { display: block; margin: 8px 2px 10px; font-size: 12.5px; color: var(--ink-3, #8a928c); }
.vv-tx-wait { color: var(--ink-2, #3d4a41); }

/* «Словами» голосом (19.10.2026): микрофон справа от поля, во время записи — красный с пульсом, таймер строкой ниже.
   Цвета — токенами (--vv-green-tint, --vv-red, --ink-*), поэтому ночь и «небо» получают своё без отдельных правил. */
.vv-tx-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.vv-tx-row .vv-tx-area { flex: 1 1 auto; min-width: 0; width: auto; margin-bottom: 0; }
.vv-tx-mic {
  position: relative; flex: 0 0 52px; width: 52px; min-height: 52px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); border-radius: var(--r-xs, 8px);
  background: var(--vv-green-tint, rgba(46, 160, 90, .12)); color: var(--vv-green-dark, #1f7a45);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s;
}
.vv-tx-mic .wh-ic { width: 24px; height: 24px; }
.vv-tx-mic:active { transform: scale(.96); }
.vv-tx-mic:focus-visible { outline: 2px solid var(--vv-green, #2ea05a); outline-offset: 2px; }
.vv-tx-mic.is-rec { background: var(--vv-red, #FF3C3C); color: #fff; border-color: transparent; }
.vv-tx-mic.is-rec::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--vv-red, #FF3C3C); animation: vvMicPulse 1.3s ease-out infinite;
}
.vv-tx-mic.is-busy { opacity: .55; cursor: progress; }
@keyframes vvMicPulse { from { transform: scale(1); opacity: .85; } to { transform: scale(1.22); opacity: 0; } }
.vv-tx-voice { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2, #3d4a41); }
.vv-tx-voice[hidden] { display: none; }
.vv-tx-voice.is-err { color: var(--ink-2, #3d4a41); }
.vv-tx-voice.is-ok { color: var(--ink-3, #8a928c); }
.vv-tx-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--vv-red, #FF3C3C); animation: vvDgPulse 1s ease-in-out infinite; }
.vv-tx-clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink, #1d2a22); min-width: 2.6em; }
.vv-tx-spin {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line, rgba(0, 0, 0, .12)); border-top-color: var(--vv-green, #2ea05a); animation: vvMicSpin .8s linear infinite;
}
@keyframes vvMicSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vv-tx-mic.is-rec::after { animation: none; opacity: .5; transform: scale(1.08); }
  .vv-tx-dot, .vv-tx-spin { animation: none; }
}

/* ═══ Серия и лига как в трекере (VVELL-877, 12.09.2026) ═══ */
:root { --vg-fire: #F28C28; --vg-fire-deep: #D9541E; --vg-fire-light: #FFD166; }
.vg-strk { position: relative; overflow: hidden; border-radius: var(--r-lg, 18px); padding: 18px 18px 14px; margin: 0 0 12px; color: #fff;
  background: linear-gradient(160deg, #F6A21C 0%, #F28C28 55%, #E8734A 100%); box-shadow: 0 10px 30px rgba(242, 140, 40, .25); }
/* ⚠ БЕЗ ДИАГОНАЛЬНОЙ ШТРИХОВКИ (владелец 15.09.2026: «почему ты решил сделать такие полоски?
   сделай что-то другое, но точно не эти полоски и не шахматную доску»). Вместо повторяющихся
   линий — мягкое свечение от пламени: два размытых пятна, тёплое сверху справа (там, где огонь)
   и холоднее слева внизу. Оно не рисует узор и не спорит с числом. */
.vg-strk::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 82% 8%, rgba(255,214,140,.38) 0%, rgba(255,190,90,.14) 38%, transparent 68%),
              radial-gradient(90% 70% at 8% 100%, rgba(255,255,255,.14) 0%, transparent 60%); }
.vg-strk-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vg-strk-num { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.02em; text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.vg-strk-cap { font-size: 20px; font-weight: 800; margin-top: 2px; }
.vg-strk-best { margin-top: 6px; font-size: 13px; opacity: .92; }
.vg-strk-flame { width: 108px; height: 108px; flex: none; filter: drop-shadow(0 8px 16px rgba(0,0,0,.18)); }
.vg-strk-flame svg { width: 100%; height: 100%; display: block; }
.vg-strk-flame:not(.vv-anim-on) svg { color: #fff; }
.vg-strk-safe { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.92); color: #6B3A10; font-size: 13.5px; font-weight: 600; }
.vg-strk-safe svg { width: 18px; height: 18px; flex: none; }
.vg-strk-safe.is-safe { color: #1F6B47; }
.vg-strk-add { margin-left: auto; padding: 6px 12px; border: 0; border-radius: 10px; background: var(--vg-fire-deep); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vg-week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.vg-wd { display: grid; justify-items: center; gap: 4px; font-size: 12px; font-weight: 700; opacity: .9; }
.vg-wd-c { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.28); display: grid; place-items: center; color: var(--vg-fire-deep); }
.vg-wd-c svg { width: 16px; height: 16px; }
.vg-wd.is-on .vg-wd-c { background: #fff; }
.vg-wd.is-today .vg-wd-c { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.vg-wd.is-today:not(.is-on) .vg-wd-c { animation: vg-wd-pulse 1.6s ease-in-out infinite; }
@keyframes vg-wd-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(255,255,255,.55); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,.2); } }
.vg-hero-pts { grid-template-columns: 1fr auto; }
/* моменты */
.vg-moment { position: fixed; inset: 0; z-index: 392; display: grid; place-items: center; padding: 20px; background: linear-gradient(160deg, #F6A21C, #F28C28 55%, #E8734A); opacity: 0; transition: opacity .25s ease; }
.vg-moment.is-in { opacity: 1; }
.vg-mo-card { width: min(92vw, 360px); text-align: center; color: #fff; transform: translateY(20px) scale(.96); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.vg-moment.is-in .vg-mo-card { transform: none; }
.vg-mo-lottie { width: 160px; height: 160px; margin: 0 auto 6px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.2)); }
.vg-mo-lottie svg { width: 100%; height: 100%; display: block; }
.vg-mo-num { font-size: 96px; font-weight: 800; line-height: 1; text-shadow: 0 4px 0 rgba(0,0,0,.12); }
.vg-mo-kicker { font-size: 20px; font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.12); margin-bottom: 4px; }
.vg-mo-title { font-size: 28px; font-weight: 800; margin: 6px 0 10px; text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.vg-mo-text { font-size: 16px; line-height: 1.45; margin: 0 8px 14px; }
.vg-mo-text b { font-weight: 800; }
.vg-moment .vg-week { margin: 0 4px 18px; }
.vg-mo-btn { width: 100%; padding: 14px; border: 0; border-radius: 16px; background: #fff; color: var(--vg-fire-deep); font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.vg-mo-best .vg-mo-card { padding-top: 10px; }
/* календарь */
.vg-cal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.vg-cal-stat { padding: 10px 8px; border: 1px solid var(--line-soft); border-radius: 14px; text-align: center; }
.vg-cal-stat b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.vg-cal-stat span { font-size: 11.5px; color: var(--ink-3); }
.vg-cal-stat.is-on { background: #FFF1E0; border-color: #F6C89B; color: #B4531A; }
.vg-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; }
.vg-cal-wd { font-size: 11px; color: var(--ink-3); text-align: center; padding-bottom: 2px; }
.vg-cal-d { position: relative; height: 34px; display: grid; place-items: center; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.vg-cal-d i { font-style: normal; position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; }
.vg-cal-d.is-on::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: 2px; right: 2px; background: var(--vg-fire); border-radius: 15px; }
.vg-cal-d.is-on.is-run-l::before { left: -3px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.vg-cal-d.is-on.is-run-r::before { right: -3px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.vg-cal-d.is-on i { color: #fff; }
.vg-cal-d.is-today i { box-shadow: 0 0 0 2px var(--vg-fire-deep) inset; }
.vg-cal-d.is-on.is-today i { box-shadow: 0 0 0 2px #fff inset; }
.vg-cal-d.is-future { color: var(--ink-3); opacity: .55; }
.vg-cal-note { margin-top: 8px; }
/* задания */
.vg-q { padding: 10px 0 8px; border-top: 1px solid var(--line-soft); }
.vg-q:first-of-type { border-top: 0; }
.vg-q-top { display: flex; align-items: center; gap: 8px; }
.vg-q-name { flex: 1; font-size: 14px; font-weight: 600; }
.vg-q-pts { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.vg-q-star, .vg-q-medal { width: 24px; height: 24px; color: #D9D2C4; flex: none; }
.vg-q-star svg, .vg-q-medal svg { width: 100%; height: 100%; }
.vg-q-star.is-done { color: var(--vg-fire-light); filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); animation: vg-pop .5s cubic-bezier(.2,.9,.3,1.4) both; }
.vg-q-medal { color: var(--vg-fire); }
.vg-q-bar { height: 10px; margin-top: 8px; border-radius: 6px; background: #EEE9DE; overflow: hidden; }
.vg-q-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--vv-blue, #3C6E8F), #5A93B8); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.vg-q.is-done .vg-q-bar i { background: linear-gradient(90deg, #2F7A4E, #4FBF8C); }
.vg-q-bar-m i { background: linear-gradient(90deg, var(--vg-fire-deep), var(--vg-fire)); }
.vg-q-sub { margin-top: 5px; font-size: 12px; color: var(--ink-3); }
.vg-q-month { margin-top: 6px; padding-top: 12px; border-top: 2px dashed var(--line-soft); }
/* лига: зона */
.vg-zone { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: #E9F5EC; color: #1F6B47; font-size: 12.5px; font-weight: 700; }
.vg-zone svg { width: 16px; height: 16px; flex: none; }
.vg-zone-week { background: #FFF1E0; color: #B4531A; }
/* плашка на «Сегодня» */
.vg-home-strk .vg-home-flame { width: 44px; height: 44px; color: var(--vg-fire); }
.vg-home-strk .vg-home-flame svg { width: 100%; height: 100%; display: block; }
.vg-home-strk.is-safe .wh-cart-sub { color: #1F6B47; }
.vg-home-pts { color: var(--vg-fire-deep); }
@media (prefers-reduced-motion: reduce) { .vg-wd.is-today:not(.is-on) .vg-wd-c, .vg-q-star.is-done { animation: none; } }

/* нулевая серия: огонь притушен (VVELL-877) */
.vg-strk.is-zero .vg-strk-flame, .vg-home-strk.is-zero .vg-home-flame { filter: grayscale(.6) opacity(.55); }

/* подмена ради суммы в плане чата (13.09.2026) */
.vv-ai-plan-tag.vv-ai-plan-swap { background: #FFF1E0; color: #8A4B12; }


/* ═══ Утренний вопрос о самочувствии (VVELL-895, 15.09.2026) ═══
   Пять уровней в столбик: палец попадает без прицеливания, а порядок сверху вниз
   от лучшего к худшему — чтобы частый ответ был ближе к большому пальцу. */
.vv-feel-card { padding-bottom: 18px; }
.vv-feel-list { display: flex; flex-direction: column; gap: 8px; padding: 6px 16px 4px; }
.vv-feel-btn {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--vv-line, rgba(0,0,0,.12)); border-radius: 14px;
  background: var(--vv-card, #fff); color: inherit; font: inherit; text-align: left;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
/* ⚠ 14.10.2026: у .vv-feel-btn подсветка ТОЛЬКО классом .is-on (ставит клик). :active и :hover на iPhone (iOS 18.7) зажигали СОСЕДНЮЮ строку —
   касание приходит на строку ниже пальца (ловушка 18.09, VVELL-985). Наведение — только для мыши. */
@media (hover: hover) and (pointer: fine) { .vv-feel-btn:hover { border-color: var(--vv-accent, #2f6b4f); } }
.vv-feel-btn { -webkit-tap-highlight-color: transparent; }
.vv-feel-btn.is-on { background: rgba(47,107,79,.14); border-color: var(--vv-accent, #2f6b4f); box-shadow: inset 0 0 0 1px var(--vv-accent, #2f6b4f); }
.vv-feel-btn:disabled { opacity: .7; }
.vv-feel-name { font-size: 16px; font-weight: 700; }
.vv-feel-hint { font-size: 13px; opacity: .65; }
/* VVELL-1153 (29.09.2026): второй шаг утреннего листа — энергия 1–10 сеткой 5×2 и вес в дни замеров.
   Кнопки — тот же .vv-feel-btn (тема «небо» подхватывает их сама), сетка — чтобы палец попадал без прицеливания. */
.vv-feel-list.vv-feel-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
  flex: 0 0 auto; align-content: start; }   /* в полноэкранном листе .vv-feel-list растягивается — сетке это не нужно */
.vv-feel-grid .vv-feel-btn { justify-content: center; align-items: center; text-align: center; padding: 0;
  min-height: 52px; font-size: 18px; font-weight: 700; }
.vv-feel-scale { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; opacity: .65; padding: 2px 16px 0; }
.vv-feel-extra { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 0; }
.vv-feel-actions { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 0; }


/* ═══ Небо над человеком: время суток и погода (VVELL-876, на проде с 15.09.2026) ═══
   Оттенок фона и шапки по фазе дня и погоде. Ночью — обычная ночная тема (класс vv-theme-night ставит vv_sky.js).
   Специфичность (0,2,0) — как у :root.vv-theme-night; :not(.vv-theme-night) — чтобы днёвные оттенки не лезли в ночь. */
/* шапка: мягкий отсвет по фазе */
html.vv-sky-dawn:not(.vv-theme-night) header.app-header { background-image: radial-gradient(120% 90% at 0% 0%, rgba(255,190,150,.35), transparent 60%), radial-gradient(80% 80% at 100% 0%, rgba(255,222,140,.28), transparent 60%); }
html.vv-sky-evening:not(.vv-theme-night) header.app-header { background-image: radial-gradient(120% 90% at 100% 0%, rgba(255,170,90,.32), transparent 60%), radial-gradient(80% 90% at 0% 0%, rgba(200,120,150,.16), transparent 60%); }
html.vv-sky-day.vv-wx-clear:not(.vv-theme-night) header.app-header { background-image: radial-gradient(80% 80% at 100% 0%, rgba(255,214,102,.28), transparent 60%); }
html.vv-wx-rain:not(.vv-theme-night) header.app-header, html.vv-wx-storm:not(.vv-theme-night) header.app-header { background-image: linear-gradient(180deg, rgba(120,140,160,.12), transparent); }
html.vv-sky-night header.app-header { background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.55), transparent 60%), radial-gradient(1.5px 1.5px at 35% 70%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1.5px 1.5px at 62% 25%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1.5px 1.5px at 48% 55%, rgba(255,255,255,.35), transparent 60%), radial-gradient(90% 90% at 100% 0%, rgba(90,110,180,.18), transparent 60%); }
/* значок в шапке */
.vv-sky { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--dv2-btn-surface, var(--paper)); color: var(--ink-2); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vv-sky-ic { width: 22px; height: 22px; display: block; overflow: visible; }
.vv-sky.is-day .vv-sky-sun, .vv-sky.is-day .vv-sky-rays, .vv-sky.is-dawn .vv-sky-sun, .vv-sky.is-dawn .vv-sky-rays, .vv-sky.is-evening .vv-sky-sun, .vv-sky.is-evening .vv-sky-rays { color: #E8A317; }
.vv-sky.is-evening .vv-sky-sun { color: #E0782E; }
.vv-sky .vv-sky-sun { fill: currentColor; stroke: none; }
.vv-sky .vv-sky-cloud { fill: rgba(140,150,160,.22); color: #7F8A94; }
.vv-sky .vv-sky-moon { fill: rgba(232,200,90,.25); color: #C9A227; }
.vv-sky .vv-sky-stars circle { fill: #C9A227; stroke: none; }
.vv-sky .vv-sky-drops { color: #5A8FC4; }
.vv-sky .vv-sky-flakes circle { fill: #7FA7CF; stroke: none; }
.vv-sky .vv-sky-horizon { color: #B08A5A; }
.vv-sky-rays { transform-origin: 12px 12px; animation: vv-sky-spin 40s linear infinite; }
.vv-sky-rays-dawn { animation: none; transform-origin: 12px 15px; }
.vv-sky-sun-dawn { animation: vv-sky-rise 1.6s cubic-bezier(.2,.8,.2,1) both; transform-origin: 12px 15px; }
.vv-sky-cloud { animation: vv-sky-drift 6s ease-in-out infinite alternate; }
.vv-sky-cloud-2 { animation-duration: 8s; }
.vv-sky-drops path { animation: vv-sky-drop 1.4s linear infinite; }
.vv-sky-drops path:nth-child(2) { animation-delay: .45s; }
.vv-sky-drops path:nth-child(3) { animation-delay: .9s; }
.vv-sky-flakes circle { animation: vv-sky-drop 2.6s linear infinite; }
.vv-sky-flakes circle:nth-child(2) { animation-delay: .8s; }
.vv-sky-flakes circle:nth-child(3) { animation-delay: 1.7s; }
.vv-sky-stars circle { animation: vv-sky-twinkle 2.2s ease-in-out infinite; }
.vv-sky-stars circle:nth-child(2) { animation-delay: .7s; }
.vv-sky-stars circle:nth-child(3) { animation-delay: 1.3s; }
@keyframes vv-sky-spin { to { transform: rotate(360deg); } }
@keyframes vv-sky-drift { from { transform: translateX(-.8px); } to { transform: translateX(.8px); } }
@keyframes vv-sky-drop { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(3px); opacity: 0; } }
@keyframes vv-sky-twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes vv-sky-rise { from { transform: translateY(4px); opacity: .3; } to { transform: none; opacity: 1; } }
/* строка под приветствием на «Сегодня» */
.vv-sky-line { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.vv-sky-line .vv-sky-ic { width: 16px; height: 16px; }
.vv-sky-line .vv-sky-sun { fill: currentColor; stroke: none; color: #E8A317; }
.vv-sky-line .vv-sky-rays { color: #E8A317; animation: none; }
.vv-sky-line .vv-sky-cloud { fill: rgba(140,150,160,.22); color: #7F8A94; animation: none; }
.vv-sky-line .vv-sky-moon { fill: rgba(232,200,90,.25); color: #C9A227; }
.vv-sky-line .vv-sky-stars circle, .vv-sky-line .vv-sky-flakes circle { fill: currentColor; stroke: none; animation: none; }
.vv-sky-line .vv-sky-drops path { animation: none; color: #5A8FC4; }
/* ═══ «Сводка»: стрелки у даты и прошлые дни (VVELL-1210, 01.10.2026) ═══════════════════════════════════
   Стрелки — у самой даты, а не по краям шапки: правый угол занят «Настроить вводную». Цель касания 44×44,
   видимый значок 18 px (общий _ic('chevron'), повёрнутый), отрицательные поля — шапка почти не растёт.
   Недоступная стрелка прячется (visibility), а не исчезает: дата не скачет у сегодняшнего и последнего дня.
   «Сегодня» есть только в прошлом дне — на месте строки погоды: погода про «сейчас», в прошлом её нет.
   Шапке touch-action: pan-y — горизонтальный свайп листает дни, вертикаль остаётся прокрутке. */
#screen-dashboard .wh-head { touch-action: pan-y; }
/* Шапка не «всплывает» вместе с блоками (whFadeUp у .wh-home > *): при листании её стрелка под пальцем и дата
   должны стоять на месте, а не исчезать и проявляться заново на каждом касании. Блоки дня всплывают, как раньше. */
#screen-dashboard .wh-home > .wh-head { animation: none; }
#screen-dashboard .wh-day-nav { display: inline-flex; align-items: center; justify-content: center; margin: -8px 0 -8px; }
#screen-dashboard .wh-day-arr { width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 14px;
  background: transparent; color: var(--wh-ink-2); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
#screen-dashboard .wh-day-arr .wh-ic { width: 18px; height: 18px; }
#screen-dashboard .wh-day-prev .wh-ic { transform: rotate(90deg); }
#screen-dashboard .wh-day-next .wh-ic { transform: rotate(-90deg); }
#screen-dashboard .wh-day-arr:active { background: var(--wh-card-2); }
#screen-dashboard .wh-day-arr[disabled] { visibility: hidden; }
#screen-dashboard .wh-day-nav .wh-head-date { min-width: 92px; }
#screen-dashboard .wh-head.is-past .vv-sky-line { display: none; }
#screen-dashboard .wh-day-today { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; min-height: 44px;
  padding: 0 12px 0 18px; border-radius: 999px; border: 1px solid var(--wh-line); background: var(--wh-card);
  color: var(--dv2-green-dark); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
#screen-dashboard .wh-day-today .wh-ic { width: 16px; height: 16px; transform: rotate(-90deg); }
/* Пока едут числа нового дня — прежние блоки приглушены и не нажимаются. animation: none обязательно: всплытие
   whFadeUp идёт с заливкой both, и его последний кадр (opacity 1) перебивал бы приглушение — проверено снимком. */
#screen-dashboard .wh-home.wh-day-busy > :not(.wh-head) { animation: none; opacity: .45; pointer-events: none; }
#screen-dashboard .wh-day-fail { margin: 18px 0; padding: 18px 16px; text-align: center; font-size: 14px; line-height: 1.5;
  color: var(--wh-ink-2); background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: 16px; }
#screen-dashboard .wh-day-fail .btn { display: block; margin: 12px auto 0; }
html.vv-sky-live.vv-sky-glass #screen-dashboard .wh-day-arr { color: rgba(255,255,255,.92); }
html.vv-sky-live.vv-sky-glass #screen-dashboard .wh-day-arr:active { background: rgba(255,255,255,.12); }
html.vv-sky-live.vv-sky-glass #screen-dashboard .wh-day-today,
html.vv-sky-live.vv-sky-glass #screen-dashboard .wh-day-fail {
  background: rgba(10,16,24,.68) !important; border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(20px) saturate(.55); -webkit-backdrop-filter: blur(20px) saturate(.55); }
html.vv-sky-live.vv-sky-glass #screen-dashboard .wh-day-today { color: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass #screen-dashboard .wh-day-fail { color: rgba(255,255,255,.92) !important; }
/* Узкий экран (320 px), прошлый день: стрелка «›» и «Настроить вводную» стояли в 6 px друг от друга — обе цели по 44 px,
   легко промахнуться (проверка 01.10.2026). В прошлом дне у шапки есть нижний ряд — кнопка «Сегодня» по центру, — и
   «Настроить вводную» спускается в него, к правому краю: до «›» — целый ряд, до «Сегодня» — больше 40 px. */
@media (max-width: 359px) {
  #screen-dashboard .wh-head.is-past .wh-customize { top: auto; bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { #screen-dashboard .wh-home.wh-day-busy > :not(.wh-head) { transition: none; } }
@media (prefers-reduced-motion: reduce) { .vv-sky-rays, .vv-sky-cloud, .vv-sky-drops path, .vv-sky-flakes circle, .vv-sky-stars circle, .vv-sky-sun-dawn { animation: none; } }

/* ═══ Живое небо на весь фон (стенд, вторая версия по уточнению владельца) ═══
   <html> несёт переливающийся градиент, body прозрачен, между карточками фон полупрозрачен, холст с погодой — позади контента. */
html.vv-sky-live { background-attachment: fixed !important; background-size: 220% 220% !important; background-repeat: no-repeat !important; animation: vv-sky-flow 48s ease-in-out infinite alternate; }
html.vv-sky-live body { background: transparent !important; }
#vv-sky-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
@keyframes vv-sky-flow { 0% { background-position: 0% 0%; } 50% { background-position: 100% 60%; } 100% { background-position: 30% 100%; } }
/* фон между карточками и шапка — полупрозрачные, чтобы небо просвечивало; карточки остаются плотными */
html.vv-sky-live:not(.vv-theme-night) { --bg: rgba(246,244,238,.52); --dv2-bg: rgba(246,244,238,.52); --dv2-glass: rgba(246,244,238,.66); --bg-warm: rgba(252,251,247,.8); }
html.vv-sky-live.vv-theme-night { --bg: rgba(16,22,34,.5); --dv2-bg: rgba(16,22,34,.5); --dv2-glass: rgba(16,22,34,.66); }
/* ⚠ У ШАПКИ НЕТ РАЗМЫТИЯ (15.09.2026). Здесь оно и оставалось, перебивая правило ниже: у
   backdrop-filter резкий край, и низ шапки читался отрезанной полосой поперёк экрана. */
html.vv-sky-live header.app-header { background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* градиенты неба: фаза, затем погода */
html.vv-sky-live.vv-sky-dawn:not(.vv-theme-night) { background-image: linear-gradient(160deg, #F9D3BE 0%, #F7E3CF 35%, #E3ECF3 70%, #F3F1E9 100%) !important; }
html.vv-sky-live.vv-sky-day:not(.vv-theme-night) { background-image: linear-gradient(160deg, #BFDCF6 0%, #DDEDF9 40%, #EEF3F1 75%, #F3F1E9 100%) !important; }
html.vv-sky-live.vv-sky-evening:not(.vv-theme-night) { background-image: linear-gradient(160deg, #F7C58F 0%, #EFB59F 40%, #CDBDD9 75%, #E9E4EA 100%) !important; }
html.vv-sky-live.vv-wx-cloudy:not(.vv-theme-night), html.vv-sky-live.vv-wx-fog:not(.vv-theme-night) { background-image: linear-gradient(160deg, #CDD5D9 0%, #DEE3E4 45%, #ECEEEA 100%) !important; }
html.vv-sky-live.vv-wx-rain:not(.vv-theme-night), html.vv-sky-live.vv-wx-storm:not(.vv-theme-night) { background-image: linear-gradient(160deg, #A9B8C5 0%, #C6D1DA 45%, #DDE3E8 100%) !important; }
html.vv-sky-live.vv-wx-snow:not(.vv-theme-night) { background-image: linear-gradient(160deg, #D5DFE9 0%, #E6ECF2 50%, #F2F4F7 100%) !important; }
html.vv-sky-live.vv-theme-night { background-image: linear-gradient(160deg, #070B1C 0%, #0F1730 40%, #172538 80%, #1A2A34 100%) !important; }
html.vv-sky-live.vv-theme-night.vv-wx-rain, html.vv-sky-live.vv-theme-night.vv-wx-storm, html.vv-sky-live.vv-theme-night.vv-wx-cloudy { background-image: linear-gradient(160deg, #0B0F1A 0%, #161C28 45%, #1E2630 100%) !important; }
@media (prefers-reduced-motion: reduce) { html.vv-sky-live { animation: none; } }
/* контейнеры экранов красят свой фон градиентом — под живым небом делаем их почти прозрачными */
html.vv-sky-live .wh-home, html.vv-sky-live .screen { background: transparent !important; }
html.vv-sky-live:not(.vv-theme-night) .wh-home { background: rgba(246,244,238,.28) !important; }
html.vv-sky-live.vv-theme-night .wh-home { background: rgba(16,22,34,.32) !important; }

/* ═══ Тёмное стекло над насыщенным небом (стенд, третья версия — выбор владельца) ═══ */
/* небо: глубокие градиенты по фазе и погоде; палитра всегда ночная */
html.vv-sky-live.vv-sky-glass { background-image: linear-gradient(175deg, #3E8DE0 0%, #7BB8F0 45%, #CFE6FA 100%) !important; }
html.vv-sky-live.vv-sky-glass.vv-sky-dawn { background-image: linear-gradient(175deg, #6B4B8C 0%, #E08A8A 45%, #F7C89A 100%) !important; }
html.vv-sky-live.vv-sky-glass.vv-sky-evening { background-image: linear-gradient(175deg, #4B2F6B 0%, #C2506B 45%, #F6A25B 100%) !important; }
html.vv-sky-live.vv-sky-glass.vv-sky-night { background-image: linear-gradient(175deg, #060A1E 0%, #0F1B3D 45%, #17324A 100%) !important; }
html.vv-sky-live.vv-sky-glass.vv-wx-cloudy, html.vv-sky-live.vv-sky-glass.vv-wx-fog { background-image: linear-gradient(175deg, #56697C 0%, #8296A8 45%, #B7C5D0 100%) !important; }
html.vv-sky-live.vv-sky-glass.vv-wx-rain, html.vv-sky-live.vv-sky-glass.vv-wx-storm { background-image: linear-gradient(175deg, #3A4A5C 0%, #5E7288 45%, #98A9B8 100%) !important; }
html.vv-sky-live.vv-sky-glass.vv-wx-snow { background-image: linear-gradient(175deg, #6E8299 0%, #A6B8C9 50%, #DDE6EE 100%) !important; }
html.vv-sky-live.vv-sky-glass.vv-sky-night.vv-wx-rain, html.vv-sky-live.vv-sky-glass.vv-sky-night.vv-wx-storm, html.vv-sky-live.vv-sky-glass.vv-sky-night.vv-wx-cloudy, html.vv-sky-live.vv-sky-glass.vv-sky-night.vv-wx-snow { background-image: linear-gradient(175deg, #070A16 0%, #131A2A 45%, #1D2735 100%) !important; }
/* пятна цвета: аврора за холстом */
#vv-sky-blobs { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
/* ⚠ ЭТО И БЫЛИ «ПОЛОСЫ» (владелец 15.09.2026: «я вижу прям полосы, которые разделяют "Сводку"
   и "Дневник" от VVellness и от часов с зарядом»; на ПК то же самое). Пятна фона размывались
   всего на 48 px при размере в пол-экрана — их края читались как горизонтальные границы между
   шапкой, вкладками и содержимым. Размытие втрое сильнее и пятна тише: переход растягивается
   на треть экрана, и границы не видно. */
#vv-sky-blobs i { position: absolute; display: block; border-radius: 50%; filter: blur(150px); opacity: .5; animation: vv-blob 22s ease-in-out infinite alternate; }
#vv-sky-blobs .b1 { width: 80vw; height: 45vh; left: -18vw; top: -10vh; }
#vv-sky-blobs .b2 { width: 70vw; height: 40vh; left: 48vw; top: 6vh; animation-duration: 27s; }
#vv-sky-blobs .b3 { width: 95vw; height: 38vh; left: -8vw; top: 46vh; animation-duration: 31s; }
#vv-sky-blobs .b4 { width: 65vw; height: 34vh; left: 36vw; top: 72vh; animation-duration: 25s; }
@keyframes vv-blob { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 4vh) scale(1.08); } }
html.vv-sky-glass #vv-sky-blobs .b1 { background: #2E7BD6; } html.vv-sky-glass #vv-sky-blobs .b2 { background: #8FC8FF; } html.vv-sky-glass #vv-sky-blobs .b3 { background: #9CD1FF; } html.vv-sky-glass #vv-sky-blobs .b4 { background: #FFFFFF; }
html.vv-sky-glass.vv-sky-dawn #vv-sky-blobs .b1 { background: #8A5A9C; } html.vv-sky-glass.vv-sky-dawn #vv-sky-blobs .b2 { background: #FFB08A; } html.vv-sky-glass.vv-sky-dawn #vv-sky-blobs .b3 { background: #F08AA0; } html.vv-sky-glass.vv-sky-dawn #vv-sky-blobs .b4 { background: #FFE0B0; }
html.vv-sky-glass.vv-sky-evening #vv-sky-blobs .b1 { background: #7A3E8C; } html.vv-sky-glass.vv-sky-evening #vv-sky-blobs .b2 { background: #FF8B5C; } html.vv-sky-glass.vv-sky-evening #vv-sky-blobs .b3 { background: #F04E7A; } html.vv-sky-glass.vv-sky-evening #vv-sky-blobs .b4 { background: #FFD08A; }
html.vv-sky-glass.vv-sky-night #vv-sky-blobs .b1 { background: #1B2E6E; } html.vv-sky-glass.vv-sky-night #vv-sky-blobs .b2 { background: #0F6C7A; } html.vv-sky-glass.vv-sky-night #vv-sky-blobs .b3 { background: #2A2F7A; } html.vv-sky-glass.vv-sky-night #vv-sky-blobs .b4 { background: #0B3B4A; }
html.vv-sky-glass.vv-wx-rain #vv-sky-blobs .b1, html.vv-sky-glass.vv-wx-storm #vv-sky-blobs .b1, html.vv-sky-glass.vv-wx-cloudy #vv-sky-blobs .b1 { background: #26333F; }
html.vv-sky-glass.vv-wx-rain #vv-sky-blobs .b2, html.vv-sky-glass.vv-wx-storm #vv-sky-blobs .b2, html.vv-sky-glass.vv-wx-cloudy #vv-sky-blobs .b2 { background: #6F8AA1; }
html.vv-sky-glass.vv-wx-rain #vv-sky-blobs .b3, html.vv-sky-glass.vv-wx-storm #vv-sky-blobs .b3, html.vv-sky-glass.vv-wx-cloudy #vv-sky-blobs .b3 { background: #3E5D71; }
html.vv-sky-glass.vv-wx-rain #vv-sky-blobs .b4, html.vv-sky-glass.vv-wx-storm #vv-sky-blobs .b4, html.vv-sky-glass.vv-wx-cloudy #vv-sky-blobs .b4 { background: #B8C7D2; }
/* токены: поверхности — тёмное стекло, фон между ними — почти прозрачный, текст светлый */
html.vv-sky-live.vv-sky-glass.vv-theme-night { --paper: rgba(10,16,24,.68); --card: rgba(10,16,24,.68); --surface: rgba(10,16,24,.68); --bg: rgba(6,10,18,.22); --bg-warm: rgba(10,16,24,.38);
  --dv2-bg: rgba(6,10,18,.22); --dv2-surface: rgba(10,16,24,.68); --dv2-surface-2: rgba(16,24,34,.55); --dv2-glass: rgba(10,16,24,.68); --dv2-glass-nav: rgba(10,16,24,.68); --dv2-btn-surface: rgba(255,255,255,.08);
  --sand-bg: rgba(6,10,18,.22); --sand-bg-top: rgba(6,10,18,.22); --sand-bg-bottom: rgba(6,10,18,.22); --sand-surface: rgba(10,16,24,.68); --sand-surface-2: rgba(16,24,34,.55);
  --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.08); --sand-line: rgba(255,255,255,.12); --sand-line-soft: rgba(255,255,255,.08); --dv2-border: rgba(255,255,255,.12); --dv2-border-soft: rgba(255,255,255,.08);
  --ink: #F2F5F0; --ink-2: #D7DED8; --ink-3: #A9B4AC; --sand-ink: #F2F5F0; --sand-ink-2: #D7DED8; --sand-ink-3: #A9B4AC; --dv2-text: #F2F5F0; --dv2-text-2: #D7DED8; --dv2-muted: #A9B4AC;
  --sand-green: #5FE0A6; --sand-green-deep: #34D48A; --vv-green: #34D48A; --vv-green-dark: #5FE0A6; --dv2-green: #34D48A; --dv2-green-dark: #5FE0A6;  --bg-2: rgba(255,255,255,.07); --dv2-bg-2: rgba(255,255,255,.07); --surface-2: rgba(16,24,34,.55); --vv-surface: rgba(10,16,24,.68); --vv-surface-2: rgba(16,24,34,.55); --ink-line: rgba(255,255,255,.12); --vv-line: rgba(255,255,255,.12); --vv-green-line: rgba(95,224,166,.3); --mint: rgba(95,224,166,.16); --accent-soft: rgba(95,224,166,.16); --vv-send-fg: #062A18; --ink-3: #B9C3BC; --sand-ink-3: #B9C3BC; --dv2-muted: #B9C3BC; --ink-4: rgba(255,255,255,.8); --dv2-muted-2: rgba(255,255,255,.72); --wh-ink-2: rgba(255,255,255,.94); --wh-ink-3: rgba(255,255,255,.88); }
html.vv-sky-live.vv-sky-glass .wh-home, html.vv-sky-live.vv-sky-glass .screen { background: transparent !important; }
/* стекло: размытие, обводка, блик по верхней кромке — на карточках и панелях */
html.vv-sky-live.vv-sky-glass .wh-nutr, html.vv-sky-live.vv-sky-glass .wh-fq, html.vv-sky-live.vv-sky-glass .wh-cart, html.vv-sky-live.vv-sky-glass .wh-bands, html.vv-sky-live.vv-sky-glass .wh-insight,
html.vv-sky-live.vv-sky-glass .wh-age, html.vv-sky-live.vv-sky-glass .wh-mon, html.vv-sky-live.vv-sky-glass .wh-trends, html.vv-sky-live.vv-sky-glass .wh-myday-btn, html.vv-sky-live.vv-sky-glass .wh-customize,
html.vv-sky-live.vv-sky-glass .vg-card, html.vv-sky-live.vv-sky-glass .vg-hero, html.vv-sky-live.vv-sky-glass .card, html.vv-sky-live.vv-sky-glass .vv-sheet-card, html.vv-sky-live.vv-sky-glass .nav2-seg-track,
html.vv-sky-live.vv-sky-glass .vv-theme-toggle, html.vv-sky-live.vv-sky-glass .vv-settings-btn, html.vv-sky-live.vv-sky-glass #vv-sky, html.vv-sky-live.vv-sky-glass header.app-header, html.vv-sky-live.vv-sky-glass .bottom-nav {
  background: rgba(10,16,24,.68) !important; background-image: none !important;
  backdrop-filter: blur(20px) saturate(.55); -webkit-backdrop-filter: blur(20px) saturate(.55);
  border: 1px solid rgba(255,255,255,.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 34px rgba(0,0,0,.28) !important; }
html.vv-sky-live.vv-sky-glass header.app-header { border-width: 0 0 1px 0 !important; box-shadow: none !important; }
html.vv-sky-live.vv-sky-glass .bottom-nav { border-width: 1px 0 0 0 !important; }
html.vv-sky-live.vv-sky-glass .nav2-seg-btn.is-on { background: rgba(255,255,255,.12) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important; }
html.vv-sky-live.vv-sky-glass .nav2-seg-btn { color: rgba(255,255,255,.7); }
html.vv-sky-live.vv-sky-glass .wh-cart .wh-cart-ic { background: rgba(95,224,166,.16) !important; color: #5FE0A6 !important; }
/* приветствие — белым по небу */
html.vv-sky-live.vv-sky-glass .wh-head-title { color: #fff !important; text-shadow: 0 1px 14px rgba(0,0,0,.25); }
html.vv-sky-live.vv-sky-glass .wh-head-date { color: rgba(255,255,255,.75) !important; }
html.vv-sky-live.vv-sky-glass .vv-sky-line { color: rgba(255,255,255,.85); }
/* главные кнопки — светящаяся мята с тёмным текстом */
html.vv-sky-live.vv-sky-glass .nav2-addfood, html.vv-sky-live.vv-sky-glass .btn-green, html.vv-sky-live.vv-sky-glass .btn.btn-green {
  background: linear-gradient(135deg, #34D48A, #12B36E) !important; color: #062A18 !important; border: 0 !important;
  box-shadow: 0 12px 32px rgba(52,212,138,.45), inset 0 1px 0 rgba(255,255,255,.55) !important; }
html.vv-sky-live.vv-sky-glass .nav2-addfood * { color: #062A18 !important; }
html.vv-sky-live.vv-sky-glass .nav2-addfood .nav2-addfood-ic, html.vv-sky-live.vv-sky-glass .nav2-addfood .plus { background: rgba(6,42,24,.14) !important; }
html.vv-sky-live.vv-sky-glass .bottom-nav button.active { background: rgba(95,224,166,.16) !important; color: #5FE0A6 !important; }
/* небо выключено луной — обычная ночная палитра, без стекла */
html.vv-sky-off { background: #131C18 !important; }
@media (prefers-reduced-motion: reduce) { #vv-sky-blobs i { animation: none; } }

/* ═══ Тёмное стекло: доводка по аудиту контраста (стенд, четвёртый патч) ═══ */
/* подписи прямо на небе — белые с мягкой тенью (серый --ink-3 на дневном небе давал 2,4:1) */
html.vv-sky-live.vv-sky-glass .wh-ring-label, html.vv-sky-live.vv-sky-glass .wh-ring-sub, html.vv-sky-live.vv-sky-glass .wh-disclaimer, html.vv-sky-live.vv-sky-glass .lh-tab-note, html.vv-sky-live.vv-sky-glass .labs-del, html.vv-sky-live.vv-sky-glass .cook-mine-empty, html.vv-sky-live.vv-sky-glass .cook-empty-sub, html.vv-sky-live.vv-sky-glass .plus-note, html.vv-sky-live.vv-sky-glass #screen-stats .vv-goal-empty, html.vv-sky-live.vv-sky-glass #screen-stats .wkb-empty, html.vv-sky-live.vv-sky-glass #screen-age .vv-age-group span, html.vv-sky-live.vv-sky-glass #screen-stats .vv-age-group span, html.vv-sky-live.vv-sky-glass #screen-progress .vv-dg-row.vv-tl-add .vv-dg-row-meta, html.vv-sky-live.vv-sky-glass #screen-dashboard .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-cart .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-chat .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-stats .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-lifehacks .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-age .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-progress .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-labs .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-symptoms .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-game .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-cook .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-plus .chat-header .sub, html.vv-sky-live.vv-sky-glass #screen-welcome .chat-header .sub { color: rgba(255,255,255,.94) !important; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
html.vv-sky-live.vv-sky-glass #screen-age .vv-age-group i, html.vv-sky-live.vv-sky-glass #screen-stats .vv-age-group i { background: rgba(255,255,255,.28) !important; }
html.vv-sky-live.vv-sky-glass .wh-head-date { color: rgba(255,255,255,.92) !important; } html.vv-sky-live.vv-sky-glass .vv-sky-line { color: rgba(255,255,255,.96); }
/* зелёные акценты на небе — светлее мяты, с тенью */
html.vv-sky-live.vv-sky-glass #screen-dashboard .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-cart .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-chat .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-stats .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-lifehacks .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-age .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-progress .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-labs .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-symptoms .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-game .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-cook .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-plus .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #screen-welcome .chat-header .h-1 em, html.vv-sky-live.vv-sky-glass #vv-chat-greeting .bot, html.vv-sky-live.vv-sky-glass #screen-cook .cook-mine-add, html.vv-sky-live.vv-sky-glass #screen-progress .vv-dg-row.vv-tl-add .vv-dg-row-name { color: #8DF3C4 !important; text-shadow: 0 1px 12px rgba(0,0,0,.3); }
html.vv-sky-live.vv-sky-glass #screen-dashboard .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-cart .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-chat .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-stats .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-lifehacks .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-age .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-progress .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-labs .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-symptoms .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-game .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-cook .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-plus .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass #screen-welcome .chat-header .eyebrow, html.vv-sky-live.vv-sky-glass .eyebrow.tint { background: rgba(10,16,24,.68) !important; color: #5FE0A6 !important; border: 1px solid rgba(255,255,255,.12) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* мятные кнопки и фишки — тёмный текст (белый на мяте 1,7–1,9:1) */
html.vv-sky-live.vv-sky-glass #screen-cart .vv-cart-chat-btn, html.vv-sky-live.vv-sky-glass .labs-adv-btn, html.vv-sky-live.vv-sky-glass #screen-cook .cook-dish-chip.active, html.vv-sky-live.vv-sky-glass #screen-cook .cook-add-all, html.vv-sky-live.vv-sky-glass #vv-fam-toggle button.is-on, html.vv-sky-live.vv-sky-glass #vv-fam-toggle button.active, html.vv-sky-live.vv-sky-glass #vv-fam-toggle button[aria-pressed="true"], html.vv-sky-live.vv-sky-glass #vv-fam-toggle button[aria-selected="true"], html.vv-sky-live.vv-sky-glass #vv-fam-toggle button[style*="var(--vv-green"], html.vv-sky-live.vv-sky-glass #screen-chat .chat-input .send, html.vv-sky-live.vv-sky-glass .vv-os-act.is-primary, html.vv-sky-live.vv-sky-glass .wh-cta, html.vv-sky-live.vv-sky-glass .wh-cart-cta, html.vv-sky-live.vv-sky-glass .gcard-cta, html.vv-sky-live.vv-sky-glass .ckb-cta, html.vv-sky-live.vv-sky-glass .stky-cta, html.vv-sky-live.vv-sky-glass #vv-checkout-sheet .cosheet-cta, html.vv-sky-live.vv-sky-glass .vv-ai-btn-primary, html.vv-sky-live.vv-sky-glass #screen-chat .vv-ai-btn-primary, html.vv-sky-live.vv-sky-glass .vv-cart-cta-btn-primary, html.vv-sky-live.vv-sky-glass #screen-lifehacks .lh-chip-active, html.vv-sky-live.vv-sky-glass .lh-chip-active, html.vv-sky-live.vv-sky-glass .vv-filter-chip.on, html.vv-sky-live.vv-sky-glass .vg-seg button.is-on, html.vv-sky-live.vv-sky-glass .vv-pl-opt.is-on, html.vv-sky-live.vv-sky-glass .wh-tour-next, html.vv-sky-live.vv-sky-glass .vv-habit-offer-btn, html.vv-sky-live.vv-sky-glass .vv-chat-mem-add button, html.vv-sky-live.vv-sky-glass .lh-prod-add, html.vv-sky-live.vv-sky-glass #screen-chat .msg.user, html.vv-sky-live.vv-sky-glass .wkb-btn-secondary, html.vv-sky-live.vv-sky-glass .wkb-chip-on, html.vv-sky-live.vv-sky-glass .wkb-energy-btn.is-on, html.vv-sky-live.vv-sky-glass .wkb-check-on, html.vv-sky-live.vv-sky-glass .dv2-sticky-checkout > button:last-child, html.vv-sky-live.vv-sky-glass #vv-undo-bar .vv-undo-btn, html.vv-sky-live.vv-sky-glass .wh-eat.on, html.vv-sky-live.vv-sky-glass .vv-habit-mark, html.vv-sky-live.vv-sky-glass .wkb-found-cta.is-done, html.vv-sky-live.vv-sky-glass .vv-ld-hbtn.is-done, html.vv-sky-live.vv-sky-glass #screen-progress .vv-ld-hbtn.is-done, html.vv-sky-live.vv-sky-glass #screen-stats .wkb-mine .vv-ld-hbtn.is-done, html.vv-sky-live.vv-sky-glass #screen-progress .vv-tl-add .vv-tl-t, html.vv-sky-live.vv-sky-glass .vv-ai-pick.checked, html.vv-sky-live.vv-sky-glass #screen-chat .vv-ai-pick.checked, html.vv-sky-live.vv-sky-glass .wkb-found-mini-item.is-done .wkb-found-mini-check, html.vv-sky-live.vv-sky-glass .vv-addmore-plus, html.vv-sky-live.vv-sky-glass #screen-progress .vv-dg-item.is-done .vv-dg-check, html.vv-sky-live.vv-sky-glass .vv-dish-alt-row .vv-dish-how { color: #062A18 !important; }
html.vv-sky-live.vv-sky-glass #screen-chat .msg.user *, html.vv-sky-live.vv-sky-glass .vv-cart-cta-btn-primary *, html.vv-sky-live.vv-sky-glass .vv-ai-btn-primary * { color: #062A18 !important; }
html.vv-sky-live.vv-sky-glass #screen-lifehacks .lh-ev.is-strong, html.vv-sky-live.vv-sky-glass #vv-lifehack-modal .lh-ev.is-strong { background: rgba(95,224,166,.18) !important; color: #8DF3C4 !important; border-color: rgba(95,224,166,.3) !important; }
/* тёмный текст на стекле → светлый; тусклые цветные метки → ярче */
html.vv-sky-live.vv-sky-glass #screen-progress .vv-dg-goals .vv-dg-title, html.vv-sky-live.vv-sky-glass .vv-dg-goals-toggle, html.vv-sky-live.vv-sky-glass .vv-wish-rules-ttl { color: var(--ink) !important; }
html.vv-sky-live.vv-sky-glass .vv-wish-chip.is-do { background: rgba(95,224,166,.16) !important; color: #5FE0A6 !important; border-color: rgba(95,224,166,.35) !important; }
html.vv-sky-live.vv-sky-glass #screen-lifehacks .lh-themes-btn .lh-themes-n { color: var(--ink-2) !important; }
html.vv-sky-live.vv-sky-glass .lh-pe-badge.is-caveat, html.vv-sky-live.vv-sky-glass .lh-pe-ev.is-early { color: #F5B98A !important; }
html.vv-sky-live.vv-sky-glass #screen-age .vv-age-fx-contrib.is-warn, html.vv-sky-live.vv-sky-glass #screen-age .vv-age-delta.is-warn, html.vv-sky-live.vv-sky-glass #screen-age .vv-rd-num.is-warn { color: #F7A797 !important; }
/* светлые и тонированные плашки → стекло */
html.vv-sky-live.vv-sky-glass #screen-age .vv-age-lever { background: rgba(10,16,24,.68) !important; border: 1px solid rgba(240,178,122,.45) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-cart-chat-hint { background: rgba(10,16,24,.68) !important; border: 1px solid rgba(255,255,255,.12) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html.vv-sky-live.vv-sky-glass .qr-chip, html.vv-sky-live.vv-sky-glass #screen-chat .qr-chip, html.vv-sky-live.vv-sky-glass .vv-theme-night #screen-chat .qr-chip { background: rgba(10,16,24,.68) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass .btn-ghost, html.vv-sky-live.vv-sky-glass #screen-cart #cart-list .btn-ghost, html.vv-sky-live.vv-sky-glass #screen-labs .labs-actions .btn-ghost { background: rgba(10,16,24,.42) !important; color: #F2F5F0 !important; border: 1px solid rgba(255,255,255,.14) !important; }
html.vv-sky-live.vv-sky-glass #screen-stats .vv-goal-row { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.1) !important; }
html.vv-sky-live.vv-sky-glass #screen-stats .vv-goal-row:active { background: rgba(255,255,255,.14) !important; }
html.vv-sky-live.vv-sky-glass #screen-stats .vv-goal-row-bar { background: rgba(255,255,255,.14) !important; }
html.vv-sky-live.vv-sky-glass #screen-progress .vv-dg-row.vv-tl-add { background: rgba(10,16,24,.68) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 14px; }
/* вкладки и переключатели — подписи ярче, активная белая */
html.vv-sky-live.vv-sky-glass #screen-stats .vv-seg button, html.vv-sky-live.vv-sky-glass .vv-seg button, html.vv-sky-live.vv-sky-glass .lh-tab, html.vv-sky-live.vv-sky-glass #screen-lifehacks .lh-tab, html.vv-sky-live.vv-sky-glass body.vv-nav-v2 #screen-lifehacks .lh-tab, html.vv-sky-live.vv-sky-glass .cook-tabs button, html.vv-sky-live.vv-sky-glass #screen-cook .cook-tabs button, html.vv-sky-live.vv-sky-glass .vv-dsec-label, html.vv-sky-live.vv-sky-glass .vv-dsec:not(.is-primary) .vv-dsec-label, html.vv-sky-live.vv-sky-glass .wkb-tab, html.vv-sky-live.vv-sky-glass #screen-stats .wkb-tab, html.vv-sky-live.vv-sky-glass #screen-progress .wkb-tab { color: rgba(255,255,255,.8) !important; }
html.vv-sky-live.vv-sky-glass #screen-stats .vv-seg button.is-on, html.vv-sky-live.vv-sky-glass .vv-seg button.is-on, html.vv-sky-live.vv-sky-glass .lh-tab.is-on, html.vv-sky-live.vv-sky-glass #screen-lifehacks .lh-tab.is-on, html.vv-sky-live.vv-sky-glass .cook-tabs button.is-on, html.vv-sky-live.vv-sky-glass .vv-dsec.is-on .vv-dsec-label, html.vv-sky-live.vv-sky-glass .wkb-tab.is-on, html.vv-sky-live.vv-sky-glass #screen-stats .wkb-tab.is-on { color: #fff !important; }
/* нижняя панель плотнее, подписи ярче (серые давали 2,6:1 на дневном небе) */
html.vv-sky-live.vv-sky-glass .bottom-nav { background: rgba(10,16,24,.64) !important; }
html.vv-sky-live.vv-sky-glass .bottom-nav button, html.vv-sky-live.vv-sky-glass .bottom-nav button span { color: rgba(255,255,255,.82) !important; }
html.vv-sky-live.vv-sky-glass .bottom-nav button.active, html.vv-sky-live.vv-sky-glass .bottom-nav button.active span { color: #5FE0A6 !important; }

/* ═══ Тёмное стекло: доводка, второй круг (стенд, пятый патч) ═══ */
/* нижняя панель: «Песок» красит её за #bottom-nav-v2 — перебиваем тем же id */
html.vv-sky-live.vv-sky-glass nav#bottom-nav-v2, html.vv-sky-live.vv-sky-glass .bottom-nav.bottom-nav-v2, html.vv-sky-live.vv-sky-glass .bottom-nav.wkb-bottom-nav { background: rgba(10,16,24,.72) !important; background-image: none !important; border-top: 1px solid rgba(255,255,255,.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter: blur(20px) saturate(.55) !important; -webkit-backdrop-filter: blur(20px) saturate(.55) !important; }
html.vv-sky-live.vv-sky-glass nav#bottom-nav-v2 button, html.vv-sky-live.vv-sky-glass nav#bottom-nav-v2 button span { color: rgba(255,255,255,.86) !important; }
html.vv-sky-live.vv-sky-glass nav#bottom-nav-v2 button.active, html.vv-sky-live.vv-sky-glass nav#bottom-nav-v2 button.active span { color: #5FE0A6 !important; }
/* «Готовим»: заголовок и подпись лежат на небе */
html.vv-sky-live.vv-sky-glass #screen-cook .cook-head .h-1 em { color: #8DF3C4 !important; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
html.vv-sky-live.vv-sky-glass #screen-cook .cook-head .sub, html.vv-sky-live.vv-sky-glass #screen-cart #cart-list .vv-trace-btn, html.vv-sky-live.vv-sky-glass #screen-cart #cart-list .vv-trace-btn .vv-trace-tech { color: rgba(255,255,255,.94) !important; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
/* мятные надписи на небе → стеклянные фишки */
html.vv-sky-live.vv-sky-glass #screen-cart #cart-list .vvw-help-btn, html.vv-sky-live.vv-sky-glass .vvw-help-btn { background: rgba(10,16,24,.68) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #8DF3C4 !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html.vv-sky-live.vv-sky-glass #screen-chat #vv-chat-greeting .bot, html.vv-sky-live.vv-sky-glass #screen-chat .msg.ai .bot { color: #8DF3C4 !important; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
html.vv-sky-live.vv-sky-glass #screen-chat .vv-wish-chip.is-do, html.vv-sky-live.vv-sky-glass .vv-wish-chip.is-do { background: rgba(10,16,24,.68) !important; color: #8DF3C4 !important; border: 1px solid rgba(95,224,166,.35) !important; }
/* имя бота и «+ Свой рецепт» лежат на небе — белым и стеклянной фишкой */
html.vv-sky-live.vv-sky-glass #screen-chat #vv-chat-greeting .bot, html.vv-sky-live.vv-sky-glass #screen-chat .msg.ai .bot { color: rgba(255,255,255,.96) !important; }
html.vv-sky-live.vv-sky-glass #screen-cook .cook-mine-add { background: rgba(10,16,24,.68) !important; border: 1px solid rgba(141,243,196,.45) !important; color: #8DF3C4 !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }


/* ═══ Небо: контраст на экранах, до которых стекло не доехало (15.09.2026) ═══
   Обход всех 25 экранов под дневным ясным небом дал 788 мест с нечитаемым текстом.
   Здесь закрыты все они. Правила живут только под небом: `html.vv-sky-live.vv-sky-glass`. */

/* Утренний вопрос о самочувствии (VVELL-895): лист белый, а стоит на тёмном стекле. */
html.vv-sky-live.vv-sky-glass .vv-feel-card { background: rgba(10,16,24,.62) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12) !important; }
html.vv-sky-live.vv-sky-glass .vv-feel-card .vv-sheet-title,
html.vv-sky-live.vv-sky-glass .vv-feel-card .vv-sheet-sub { color: rgba(255,255,255,.94) !important; }
html.vv-sky-live.vv-sky-glass .vv-feel-btn { background: rgba(10,16,24,.68) !important; border: 1px solid rgba(255,255,255,.16) !important; color: rgba(255,255,255,.96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (hover: hover) and (pointer: fine) { html.vv-sky-live.vv-sky-glass .vv-feel-btn:hover { border-color: rgba(141,243,196,.55) !important; } }
html.vv-sky-live.vv-sky-glass .vv-feel-btn.is-on { background: rgba(141,243,196,.18) !important; border-color: rgba(141,243,196,.6) !important; }
html.vv-sky-live.vv-sky-glass .vv-feel-name { color: rgba(255,255,255,.96) !important; }
html.vv-sky-live.vv-sky-glass .vv-feel-hint { color: rgba(255,255,255,.7) !important; }

/* Игра: серия, момент, календарь, таблица, дуэли. */
/* ⚠ `.vg-strk` СЮДА НЕ ВХОДИТ (15.09.2026). Карточка серии — единственное тёплое пятно экрана,
   в ней смысл: огонь, число дней подряд. Под небом её перекрашивало в серое стекло, и от карточки
   оставалась одна штриховка — владелец увидел «шахматную доску». Огонь остаётся огнём. */
html.vv-sky-live.vv-sky-glass .vg-card,
html.vv-sky-live.vv-sky-glass #vg-lb, html.vv-sky-live.vv-sky-glass #vg-arena .vg-card,
html.vv-sky-live.vv-sky-glass .vg-mo-card { background: rgba(10,16,24,.68) !important; border: 1px solid rgba(255,255,255,.12) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html.vv-sky-live.vv-sky-glass .vg-strk { border: 0 !important; box-shadow: 0 12px 34px rgba(242,140,40,.3) !important; }
html.vv-sky-live.vv-sky-glass .vg-wd-l, html.vv-sky-live.vv-sky-glass .vg-strk-cap,
html.vv-sky-live.vv-sky-glass .vg-strk-best, html.vv-sky-live.vv-sky-glass .vg-mo-title,
html.vv-sky-live.vv-sky-glass .vg-mo-text, html.vv-sky-live.vv-sky-glass .vg-home-pts,
html.vv-sky-live.vv-sky-glass .vg-zone, html.vv-sky-live.vv-sky-glass .vg-cal-stat,
html.vv-sky-live.vv-sky-glass .vg-q-bar { color: rgba(255,255,255,.92) !important; }
html.vv-sky-live.vv-sky-glass .vg-mo-btn, html.vv-sky-live.vv-sky-glass .vg-duel-btns .btn { background: linear-gradient(135deg, #8DF3C4, #5FE0A6) !important; color: #06281C !important; border: none !important; box-shadow: 0 6px 20px rgba(95,224,166,.35); }
html.vv-sky-live.vv-sky-glass .vg-q-bar { background: rgba(255,255,255,.14) !important; }
html.vv-sky-live.vv-sky-glass .vg-cal-stat.is-on, html.vv-sky-live.vv-sky-glass .vg-strk-safe.is-safe { background: rgba(141,243,196,.18) !important; color: #8DF3C4 !important; border: 1px solid rgba(141,243,196,.4) !important; }
html.vv-sky-live.vv-sky-glass #vg-moment { background: rgba(6,12,20,.72) !important; }

/* Кольца и подписи карточек на «Сегодня». */
html.vv-sky-live.vv-sky-glass .wh-ring-big { color: rgba(255,255,255,.97) !important; }
html.vv-sky-live.vv-sky-glass .wh-ring-sub, html.vv-sky-live.vv-sky-glass .wh-cart-sub { color: rgba(255,255,255,.78) !important; }

/* Чат: кнопки над полем ввода и примеры просьб. */
html.vv-sky-live.vv-sky-glass #vv-chat-history-btn, html.vv-sky-live.vv-sky-glass #vv-chat-new-btn,
html.vv-sky-live.vv-sky-glass .vv-chat-ctx-label,
html.vv-sky-live.vv-sky-glass .vv-cart-chat-btn { background: rgba(10,16,24,.68) !important; color: rgba(255,255,255,.94) !important; border: 1px solid rgba(255,255,255,.16) !important; }

/* Корзина: выбранный чип семьи. Готовка: значок «подходит». */
html.vv-sky-live.vv-sky-glass .vv-fam-chip.on { background: rgba(141,243,196,.18) !important; color: #8DF3C4 !important; border: 1px solid rgba(141,243,196,.45) !important; }
html.vv-sky-live.vv-sky-glass .cook-badge.cook-badge-ok { background: rgba(141,243,196,.16) !important; color: #8DF3C4 !important; border: 1px solid rgba(141,243,196,.4) !important; }


/* ═══ Небо: убираем швы между слоями и поднимаем шапку (15.09.2026) ═══
   Владелец: «убрать эти полосы резкого перехода цвета совсем», «объекты сидят низко, сверху
   много пространства». Правила действуют только под небом. */

/* 1. Шапка — градиент, а не заливка с границей. Вверху плотно, внизу совсем прозрачно. */
html.vv-sky-live.vv-sky-glass header.app-header {
  /* ⚠ ШАПКА И ПОЛОСА ВКЛАДОК — ОДИН НЕПРЕРЫВНЫЙ ПЕРЕХОД (владелец 15.09.2026: «4 блока и 4
     разных цвета»). Шапка НЕ уходит в полную прозрачность к своему низу: иначе под ней начинался
     новый тон, и граница читалась ступенькой. Она заканчивается там же, где начинается полоса
     вкладок (.55), а до нуля градиент доводит уже полоса. */
  /* ⚠ У ШАПКИ НЕТ СВОЕГО ФОНА (владелец 15.09.2026: «почему ты не можешь сделать фон у всех
     один и нет отдельных этих блоков? я вижу прям полосы, которые разделяют "Сводку" и "Дневник"
     от VVellness и от часов с зарядом»). Любая заливка, даже полупрозрачная, рисует поперёк
     экрана полосу со своими границами. Фон один — небо. Читаемость держит тень под буквами. */
  background: transparent !important;
  background-image: none !important;
  border: 0 !important; box-shadow: none !important;
  /* ⚠ БЕЗ РАЗМЫТИЯ (владелец 15.09.2026). Именно размытие и давало ту самую границу: у
     backdrop-filter резкий край, и низ шапки читался отрезанным блоком поверх неба. Небо и так
     мягкое, текст на нём читается, а плотности градиента хватает под системной строкой. */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  /* ⚠ МАСКИ НЕТ (15.09.2026). Она гасила низ шапки до нуля — и там, где шапка исчезала, а полоса
     вкладок ещё не началась, появлялась светлая щель: это и был один из «четырёх цветов». Плавность
     теперь делает сам градиент фона, он же продолжается в полосе вкладок. */
}

/* 2. Полоса вкладок: сплошной подложки нет — стеклянная только капсула. Но совсем прозрачной
   полоса быть не может: она липкая, и содержимое уезжает ПОД неё, просвечивая между капсулами
   (владелец, 15.09.2026: «начинает заходить за камеру и заходит на время»). Поэтому вместо
   плашки со швом — мягкое затухание сверху вниз плюс размытие: уезжающий текст гаснет, а
   границы у полосы нет. */
html.vv-sky-live.vv-sky-glass .nav2-seg-track {
  background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* Сама липкая полоса (#nav2-seg): затухание сверху вниз вместо плашки с кромкой.
   Граница осталась бы швом — тем самым, который владелец просил убрать, — а полная
   прозрачность пропускает уезжающий текст между капсулами. */
html.vv-sky-live.vv-sky-glass #nav2-seg {
  /* Полоса вкладок тоже без фона: видимыми остаются только сами капсулы. */
  background: transparent !important;
  border: 0 !important; box-shadow: none !important;
  /* Размытия нет по той же причине, что и у шапки: его край — это полоса. */
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding-bottom: 10px !important;
}
html.vv-sky-live.vv-sky-glass .nav2-seg-btn.is-on {
  background: rgba(255,255,255,.14) !important; color: #fff !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* 3. Шапка поднимается — но не за счёт безопасной зоны телефона.
   ⚠ БЫЛО: `max(6px, env(safe-area-inset-top) * .5)` — половина зоны. На айфоне с вырезом это
   ~29 точек вместо ~59, и содержимое заезжало под часы и камеру (владелец, 15.09.2026).
   Уменьшать можно ТОЛЬКО своё число (14 → 6); зона выреза складывается с ним целиком. */
html.vv-sky-live.vv-sky-glass header.app-header {
  padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 6px !important;
}
html.vv-sky-live.vv-sky-glass header.app-header .app-header-inner,
html.vv-sky-live.vv-sky-glass header.app-header > div { margin-top: 0 !important; }

/* 3б. ⚠ ПОД НЕБОМ ОТДЕЛЬНОЙ ПОЛОСЫ НЕТ (владелец 15.09.2026: «вверху 4 блока и 4 разных цвета»).
   Плотная полоса под статус-баром читалась чёрной плашкой поверх неба — четвёртым цветом сверху.
   Небо нарисовано фиксированным слоем на всю высоту экрана, а системную строку закрывает плотный
   верх самой шапки: её отступ сверху уже включает безопасную зону. Полоса остаётся только в
   обычной теме, где фон непрозрачный. */
html.vv-sky-live.vv-sky-glass body::before { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* 4. Между шапкой и содержимым не должно быть второй кромки. */
html.vv-sky-live.vv-sky-glass .screen > .vv-scroll-top,
html.vv-sky-live.vv-sky-glass .wh-home > :first-child { border-top: 0 !important; }


/* ═══ Небо: чат и корзина по замечаниям владельца (15.09.2026) ═══ */

/* Примеры просьб под небом — одно правило вместо трёх споривших (15.09.2026). Тёмное стекло,
   мятная обводка: на фоне неба читается и как текст, и как действие. */
html.vv-sky-live.vv-sky-glass .vv-chat-eg-lbl { color: rgba(255,255,255,.62) !important; }
html.vv-sky-live.vv-sky-glass .vv-chat-eg {
  background: rgba(10,16,24,.68) !important;
  /* Обводка НЕЙТРАЛЬНАЯ, не мятная: ниже идут зелёные сценарии — главные действия экрана,
     и примеры не должны спорить с ними за внимание (15.09.2026). */
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
}
html.vv-sky-live.vv-sky-glass .vv-chat-eg:hover { background: rgba(255,255,255,.1) !important; }

/* Поле ввода: один ровный контур, без второго поверх. */
html.vv-sky-live.vv-sky-glass #screen-chat .chat-input,
html.vv-sky-live.vv-sky-glass .chat-input-wrap .chat-input {
  background: rgba(10,16,24,.55) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 22px !important; box-shadow: none !important;
  outline: none !important;
}
html.vv-sky-live.vv-sky-glass #screen-chat .chat-input input,
html.vv-sky-live.vv-sky-glass #screen-chat .chat-input textarea {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: rgba(255,255,255,.95) !important;
}
html.vv-sky-live.vv-sky-glass #screen-chat .chat-input input::placeholder,
html.vv-sky-live.vv-sky-glass #screen-chat .chat-input textarea::placeholder { color: rgba(255,255,255,.55) !important; }
html.vv-sky-live.vv-sky-glass .chat-input-wrap { background: transparent !important; border: 0 !important; }

/* Кнопки «Разговоры» и «Новый» — ровные капсулы без второй кромки. */
html.vv-sky-live.vv-sky-glass #vv-chat-history-btn,
html.vv-sky-live.vv-sky-glass #vv-chat-new-btn {
  border: 1px solid rgba(255,255,255,.14) !important; box-shadow: none !important;
}

/* Корзина: кнопка оформления в общий мятный градиент, свечение мягче. */
html.vv-sky-live.vv-sky-glass .dv2-sticky-checkout > button:last-child,
html.vv-sky-live.vv-sky-glass .stky-cta,
html.vv-sky-live.vv-sky-glass #screen-cart .vv-cart-cta-btn-primary {
  background: linear-gradient(135deg, #7FE9BC, #4FD39A) !important;
  color: #06281C !important; border: 0 !important;
  box-shadow: 0 10px 26px rgba(79,211,154,.28) !important;
}

/* Пустая корзина: подпись и подсказка читаемы на стекле. */
html.vv-sky-live.vv-sky-glass #screen-cart .vv-empty-title,
html.vv-sky-live.vv-sky-glass #screen-cart .vv-empty-sub { color: rgba(255,255,255,.9) !important; }


/* ═══ Небо: последние нечитаемые места и нижняя панель (15.09.2026) ═══ */

/* Подпись под кольцом («7:24 сна») — самая частая: она на «Сегодня», а он лежит под всеми. */
html.vv-sky-live.vv-sky-glass .wh-ring-sub { color: rgba(255,255,255,.88) !important; }

/* Корзина: кнопка «В чат» была почти сливающейся (контраст 1.04). */
html.vv-sky-live.vv-sky-glass #screen-cart .vv-cart-chat-btn,
html.vv-sky-live.vv-sky-glass .vv-cart-chat-btn {
  background: rgba(141,243,196,.18) !important; color: #8DF3C4 !important;
  border: 1px solid rgba(141,243,196,.45) !important; box-shadow: none !important;
}
html.vv-sky-live.vv-sky-glass .vv-fam-chip.on { color: #06281C !important; background: #8DF3C4 !important; border: 0 !important; }

/* Игра: подписи, значок недели, служебные строки. */
html.vv-sky-live.vv-sky-glass .vg-muted,
html.vv-sky-live.vv-sky-glass .vg-privacy,
html.vv-sky-live.vv-sky-glass .vg-leave { color: rgba(255,255,255,.82) !important; }
html.vv-sky-live.vv-sky-glass .vg-zone.vg-zone-week {
  background: rgba(10,16,24,.55) !important; color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
html.vv-sky-live.vv-sky-glass .vg-strk span,
html.vv-sky-live.vv-sky-glass .vg-card span { color: inherit; }

/* Готовим: заголовок дня и подпись. */
html.vv-sky-live.vv-sky-glass .cook-today-h { color: rgba(255,255,255,.95) !important; }
html.vv-sky-live.vv-sky-glass .cook-today-sub { color: rgba(255,255,255,.8) !important; }

/* Нижняя панель — градиент вместо заливки с кромкой: тот же шов, только снизу. */
html.vv-sky-live.vv-sky-glass .bottom-nav {
  background: linear-gradient(to top, rgba(8,14,22,.78) 0%, rgba(8,14,22,.6) 55%, rgba(8,14,22,.12) 92%, rgba(8,14,22,0) 100%) !important;
  background-image: linear-gradient(to top, rgba(8,14,22,.78) 0%, rgba(8,14,22,.6) 55%, rgba(8,14,22,.12) 92%, rgba(8,14,22,0) 100%) !important;
  border: 0 !important; box-shadow: none !important;
  backdrop-filter: blur(16px) saturate(.55); -webkit-backdrop-filter: blur(16px) saturate(.55);
  -webkit-mask-image: linear-gradient(to top, #000 74%, rgba(0,0,0,.4) 92%, transparent 100%);
  mask-image: linear-gradient(to top, #000 74%, rgba(0,0,0,.4) 92%, transparent 100%);
}


/* ═══ Небо: переключатель корзины мягче (15.09.2026) ═══
   Владелец: «тут цвет корзины менять наверно нужно». Кнопка задана прямо в разметке
   (`background:var(--vv-green)`), поэтому перебиваем её тем же мятным градиентом, что и у
   остальных главных кнопок под небом: кислотная заливка спорила с приглушённым небом. */
html.vv-sky-live.vv-sky-glass #vv-fam-toggle button[style*="var(--vv-green"] {
  background: linear-gradient(135deg, #7FE9BC, #4FD39A) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(79,211,154,.26) !important;
}


/* ═══ Небо: вкладки читаемы без подложки (15.09.2026) ═══
   Подложку под вкладками убрали, чтобы не было полосы, — и текст остался стоять прямо на небе
   с контрастом 3,4–3,9 при норме 4,5. Возвращать полосу нельзя: владелец просил её убрать.
   Поэтому плотность и мягкая тень под буквами: контраст даёт сам текст, а не поверхность. */
html.vv-sky-live.vv-sky-glass .nav2-seg-btn {
  color: rgba(255,255,255,.88) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.35) !important;
  font-weight: 700 !important;
}
html.vv-sky-live.vv-sky-glass .nav2-seg-btn.is-on {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
}
/* Подписи под кольцами — та же причина, тот же приём. */
html.vv-sky-live.vv-sky-glass .wh-ring-sub,
html.vv-sky-live.vv-sky-glass .wh-ring-label {
  color: rgba(255,255,255,.95) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
}


/* ═══ Небо: у каждой вкладки своя капсула (15.09.2026) ═══
   Тень под буквами читаемость даёт, но контраст к фону не меняет: проверка контраста видит
   только цвет текста и цвет под ним. Поэтому не полоса во всю ширину (её владелец просил
   убрать), а отдельная мягкая капсула под каждой вкладкой — шва нет, контраст настоящий. */
/* ⚠ КАПСУЛЫ СВЕТЛЕЮТ, А НЕ ЧЕРНЕЮТ (владелец 15.09.2026: «4 блока и 4 разных цвета»).
   Тёмная заливка .42/.66 на вечернем небе читалась чёрными плашками — ещё одним чужим цветом.
   Стекло делаем светлым: выбранная вкладка ярче фона, остальные едва заметны. Так капсула
   выглядит частью неба, а не наклейкой поверх. */
html.vv-sky-live.vv-sky-glass .nav2-seg-btn {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.86) !important;
}
html.vv-sky-live.vv-sky-glass .nav2-seg-btn.is-on {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.3) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
}
/* (Примеры просьб описаны выше одним правилом: тёмное стекло с мятной обводкой. Прежняя белая
   «наклейка» убрана 15.09.2026 — она и давала серые пилюли посреди фразы.) */
/* Последние три строки: выход из лиги, приписка о приватности, подпись плана готовки. */
html.vv-sky-live.vv-sky-glass .vg-leave,
html.vv-sky-live.vv-sky-glass .vg-privacy,
html.vv-sky-live.vv-sky-glass .cook-today-sub { color: rgba(255,255,255,.92) !important; }


/* ═══ Пламя серии: дыхание без анимационного движка (VVELL-902, 15.09.2026) ═══ */
.vg-flame-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vg-flame-body { transform-origin: 50% 85%; animation: vg-flame-breathe 2.6s ease-in-out infinite; }
.vg-flame-core { transform-origin: 50% 88%; animation: vg-flame-core 1.9s ease-in-out infinite; }
@keyframes vg-flame-breathe {
  0%, 100% { transform: scale(1) }
  45%      { transform: scale(1.045) translateY(-1px) }
}
@keyframes vg-flame-core {
  0%, 100% { transform: scale(1); opacity: .92 }
  50%      { transform: scale(.93); opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .vg-flame-body, .vg-flame-core { animation: none !important; }
}


/* ═══ Небо: разборы и графики (15.09.2026) ═══
   Карточки разборов собираются своими классами и не попали под общее правило стекла:
   заголовки, оси и подписи оставались тёмными на светлом полупрозрачном фоне поверх неба. */
/* ⚠ `.wh-detail` — КОНТЕЙНЕР ЭКРАНА, А НЕ КАРТОЧКА (владелец 15.09.2026: «качество питания как
   будто бы весь обрезан, разные цвета там ещё»). Он растянут во всю ширину отрицательными полями,
   поэтому плотная заливка превращала его в прямоугольную плашку с обрезанными краями, а при
   коротком содержимом — в огрызок посреди экрана. Стеклянными остаются блоки ВНУТРИ него. */
html.vv-sky-live.vv-sky-glass .wh-detail {
  background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html.vv-sky-live.vv-sky-glass .fqd-block,
html.vv-sky-live.vv-sky-glass .fqt-card,
html.vv-sky-live.vv-sky-glass .fqt-ins,
html.vv-sky-live.vv-sky-glass .vv-rd,
html.vv-sky-live.vv-sky-glass .slp-block,
html.vv-sky-live.vv-sky-glass .vv-nutr-card,
html.vv-sky-live.vv-sky-glass .wkb-card {
  background: rgba(10,16,24,.7) !important; background-image: none !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(18px) saturate(.55); -webkit-backdrop-filter: blur(18px) saturate(.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 30px rgba(0,0,0,.26) !important;
}

/* Заголовки блоков и служебные строки. */
html.vv-sky-live.vv-sky-glass .fqd-h,
html.vv-sky-live.vv-sky-glass .fqt-h,
html.vv-sky-live.vv-sky-glass .slp-h,
html.vv-sky-live.vv-sky-glass .wh-detail-title,
html.vv-sky-live.vv-sky-glass .fqt-big { color: rgba(255,255,255,.96) !important; }
html.vv-sky-live.vv-sky-glass .fqt-cap,
html.vv-sky-live.vv-sky-glass .fqt-note,
html.vv-sky-live.vv-sky-glass .fqd-per,
html.vv-sky-live.vv-sky-glass .fqt-now,
html.vv-sky-live.vv-sky-glass .fqt-ins-t,
html.vv-sky-live.vv-sky-glass .rcv-text,
html.vv-sky-live.vv-sky-glass .slp-hero-sub { color: rgba(255,255,255,.82) !important; }

/* Сам график: подписи осей, сетка, площадь под линией. */
html.vv-sky-live.vv-sky-glass .fqd-block svg text,
html.vv-sky-live.vv-sky-glass .wh-detail svg text,
html.vv-sky-live.vv-sky-glass .wkb-card svg text { fill: rgba(255,255,255,.88) !important; }
html.vv-sky-live.vv-sky-glass .fqd-block svg line,
html.vv-sky-live.vv-sky-glass .wh-detail svg line,
html.vv-sky-live.vv-sky-glass .fqd-block svg .grid,
html.vv-sky-live.vv-sky-glass .wh-detail svg .grid { stroke: rgba(255,255,255,.18) !important; }
html.vv-sky-live.vv-sky-glass .fqd-block svg rect[fill="#fff"],
html.vv-sky-live.vv-sky-glass .wh-detail svg rect[fill="#fff"],
html.vv-sky-live.vv-sky-glass .fqd-block svg rect[fill="white"] { fill: rgba(8,14,22,.35) !important; }

/* Чипы периодов под графиком. */
html.vv-sky-live.vv-sky-glass .fqd-chip {
  background: rgba(10,16,24,.68) !important; color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
html.vv-sky-live.vv-sky-glass .fqd-chip.is-on {
  background: rgba(141,243,196,.18) !important; color: #8DF3C4 !important;
  border-color: rgba(141,243,196,.45) !important;
}


/* ═══ Качество питания: прошлый день свёрнут (VVELL-906, 15.09.2026) ═══ */
.fqd-past { padding: 0 !important; }
.fqd-past-h { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; list-style: none; padding: 14px 16px; }
.fqd-past-h::-webkit-details-marker { display: none; }
.fqd-past-chev { opacity: .6; transition: transform .18s ease; }
.fqd-past[open] .fqd-past-chev { transform: rotate(90deg); }


/* ═══ Дневник под небом: значок, подписи, кружок отметки (VVELL-909, 15.09.2026) ═══ */

/* 1. Значок часов внутри круглой кнопки — по центру, а не по базовой линии текста. */
.vv-tl-hist .vv-tl-t,
#screen-progress .vv-tl-hist .vv-tl-t {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  line-height: 0 !important; padding: 0 !important;
}
.vv-tl-hist .vv-tl-t svg { display: block; margin: 0; }

/* 2. Подписи под названием еды: серый для выключенных состояний на стекле не читается. */
html.vv-sky-live.vv-sky-glass .vv-dg-item-state,
html.vv-sky-live.vv-sky-glass .vv-meal-meta,
html.vv-sky-live.vv-sky-glass .vv-dg-row-meta,
html.vv-sky-live.vv-sky-glass .vv-kt-sub,
html.vv-sky-live.vv-sky-glass .vv-dg-draft-t,
html.vv-sky-live.vv-sky-glass .vv-dg-empty-text { color: rgba(255,255,255,.82) !important; }

/* 3. Кружок «отметить съеденным»: видимая обводка и различимая галочка. */
html.vv-sky-live.vv-sky-glass .vv-dg-check,
html.vv-sky-live.vv-sky-glass .vv-meal-check {
  border: 1.5px solid rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.9) !important;
}
html.vv-sky-live.vv-sky-glass .vv-dg-item.is-done .vv-dg-check,
html.vv-sky-live.vv-sky-glass .vv-meal-item.is-done .vv-meal-check {
  background: #8DF3C4 !important; border-color: #8DF3C4 !important; color: #06281C !important;
}

/* ══ Экран «Серия»: разделы и достижения (VVELL-917, 15.09.2026) ══════════════
   Один длинный свиток разрезан на четыре раздела. Переключатель — тот же
   сегмент, что и внутри карточек, чтобы не заводить третий вид вкладок. */
/* ⚠ ВКЛАДКИ ЛИПНУТ ПОД ШАПКОЙ, А НЕ К ВЕРХУ ЭКРАНА (VVELL-1192, 30.09.2026). Было `top: 0`, а шапка сама липкая
   (z-index 40): при прокрутке вкладки вставали на её место. Под небом шапка прозрачная — капсулы «Серия · Лига ·
   Команда · Профиль» ложились прямо на «VVellness», погоду и кнопки (снимок владельца); в дневной теме уходили под
   её стекло и не нажимались — касание попадало в шапку. Замер в WebKit, 393 px, прокрутка 520: шапка 0–56,
   вкладки 0–44. `top` — измеренная высота шапки (--vv-hdr-h пишет _vvSyncHeaderH), как у полосы сегментов и
   фильтра периода на «Прогрессе». Фон — цвет страницы: у липкого элемента прозрачный фон значит, что содержимое
   проезжает сквозь подписи невыбранных капсул. Под небом общей подложки нет по-прежнему (правило ниже): там у
   каждой капсулы своё стекло. */
#screen-game .vg-tabs { margin: 0 0 14px; position: sticky; top: var(--vv-hdr-h, 67px); z-index: 5; gap: 8px; padding: 2px 0;
  background: var(--bg); }
/* Переключение раздела из прокрученного места: draw() зовёт #game-content.scrollIntoView({block: 'start'}), и верх
   раздела вставал к верху экрана — под шапку, а с вкладками под шапкой ещё и под них (замер: первая карточка закрыта
   на 42 px). Отступ прокрутки = высота шапки: раздел встаёт сразу под ней, вкладки — на своём месте над карточкой. */
#game-content { scroll-margin-top: var(--vv-hdr-h, 67px); }
#screen-game .vg-tabs button { border-radius: 999px; padding: 9px 8px; font-weight: 700; min-height: 44px; }   /* 44 — под палец: было 40 (проверка VVELL-1192) */
#screen-game .vg-tab-body { display: flex; flex-direction: column; gap: 12px; }
#screen-game .vg-ach { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
#screen-game .vg-ach-row { display: flex; flex-direction: column; gap: 6px; }
#screen-game .vg-ach-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#screen-game .vg-ach-top b { font-size: 14px; }
#screen-game .vg-ach-bar { height: 6px; border-radius: 999px; background: var(--line-soft, rgba(0,0,0,.08)); overflow: hidden; }
#screen-game .vg-ach-bar i { display: block; height: 100%; border-radius: 999px; background: var(--vv-green, #2E7D52); transition: width .4s ease; }
#screen-game .vg-ach-row.is-done .vg-ach-bar i { background: var(--vv-green-dark, #1F6B45); }
#screen-game .vg-ach-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
#screen-game .vg-ach-steps { display: inline-flex; gap: 4px; }
#screen-game .vg-ach-step { width: 8px; height: 8px; border-radius: 50%; background: var(--line, rgba(0,0,0,.14)); }
#screen-game .vg-ach-step.is-on { background: var(--vv-green, #2E7D52); }
#screen-game .vg-ach-fact { font-size: 12px; }
#screen-game .vg-lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06)); }
#screen-game .vg-lb-row:last-child { border-bottom: 0; }
#screen-game .vg-lb-pos { width: 22px; text-align: center; font-weight: 800; color: var(--ink-3); }
#screen-game .vg-lb-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#screen-game .vg-lb-name b { font-size: 14px; }
#screen-game .vg-lb-name span { font-size: 12px; }
#screen-game .vg-lb-pts { font-variant-numeric: tabular-nums; }
#screen-game .vg-lb-row.is-me { background: var(--bg-2, rgba(0,0,0,.03)); border-radius: 10px; padding-left: 6px; padding-right: 6px; }
@media (prefers-reduced-motion: reduce) { #screen-game .vg-ach-bar i { transition: none; } }

/* Под небом: полоска и ступени достижений — светлые, подложка строки «это ты» — стеклянная. */
html.vv-sky-live.vv-sky-glass #screen-game .vg-ach-bar { background: rgba(255,255,255,.14) !important; }
html.vv-sky-live.vv-sky-glass #screen-game .vg-ach-bar i { background: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass #screen-game .vg-ach-step { background: rgba(255,255,255,.2) !important; }
html.vv-sky-live.vv-sky-glass #screen-game .vg-ach-step.is-on { background: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass #screen-game .vg-lb-row { border-bottom-color: rgba(255,255,255,.1) !important; }
html.vv-sky-live.vv-sky-glass #screen-game .vg-lb-row.is-me { background: rgba(141,243,196,.12) !important; }
/* ⚠ У ПОЛОСЫ РАЗДЕЛОВ НЕТ ОБЩЕЙ ПОДЛОЖКИ (владелец 15.09.2026: «Серия, Лига, Команда, Профиль
   закрыты в одном большом прямоугольнике, а должны быть отдельными сущностями»). Подложка была
   у контейнера — четыре кнопки читались как один блок. Теперь стекло у каждой кнопки своё. */
html.vv-sky-live.vv-sky-glass #screen-game .vg-tabs { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.vv-sky-live.vv-sky-glass #screen-game .vg-tabs button {
  background: rgba(10,16,24,.68) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html.vv-sky-live.vv-sky-glass #screen-game .vg-tabs button.is-on {
  background: #8DF3C4 !important; border-color: #8DF3C4 !important; color: #0C1A14 !important;
  box-shadow: 0 6px 18px rgba(141,243,196,.28) !important;
}

/* Галочки в полосе недели (VVELL-917, 15.09.2026). Под небом общее правило «текст светлый»
   красило и значок внутри белого кружка — галочка становилась белой на белом, и дни выглядели
   пустыми, хотя еда была отмечена. Цвет возвращён тот же, что у огня. */
html.vv-sky-live.vv-sky-glass .vg-wd-c,
html.vv-sky-live.vv-sky-glass .vg-wd-c svg { color: var(--vg-fire-deep, #D9541E) !important; }
html.vv-sky-live.vv-sky-glass .vg-wd:not(.is-on) .vg-wd-c,
html.vv-sky-live.vv-sky-glass .vg-wd:not(.is-on) .vg-wd-c svg { color: rgba(255,255,255,.55) !important; }

/* ══ Щит серии (VVELL-921, 15.09.2026) ═══════════════════════════════════════
   Щит срабатывает сам, поэтому на экране он не кнопка, а спокойная строка
   «страховка есть». День, спасённый щитом, помечается в календаре своим знаком:
   он честно остаётся пропущенным, но серия жива. */
.vg-shield { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px;
  border-radius: 12px; background: rgba(255,255,255,.16); font-size: 12.5px; line-height: 1.35; }
.vg-shield-ic { width: 18px; height: 18px; flex: none; color: #7FD3F7; display: block; }
.vg-shield-ic.is-off { opacity: .45; }
.vg-shield-ic svg { width: 100%; height: 100%; display: block; }
.vg-shield-saved { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; opacity: .9; }
.vg-shield-saved svg { width: 14px; height: 14px; }
.vg-cal-d.is-shield i { box-shadow: 0 0 0 2px #7FD3F7 inset; border-radius: 50%; }
.vg-cal-d.is-shield { position: relative; }
.vg-cal-d.is-shield::after { content: ''; position: absolute; right: 2px; top: 2px; width: 6px; height: 6px;
  border-radius: 50%; background: #7FD3F7; }
html.vv-sky-live.vv-sky-glass .vg-shield { background: rgba(10,16,24,.68) !important; color: rgba(255,255,255,.94) !important; }

/* ══ Итоги закрытых периодов (VVELL-920, 15.09.2026) ═════════════════════════ */
#screen-game .vg-hist-gr { margin: 10px 0 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
#screen-game .vg-hist-row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06)); }
#screen-game .vg-hist-row:last-of-type { border-bottom: 0; }
#screen-game .vg-hist-when { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#screen-game .vg-hist-when b { font-size: 14px; }
#screen-game .vg-hist-when span { font-size: 12px; }
#screen-game .vg-hist-pts { font-variant-numeric: tabular-nums; }
#screen-game .vg-hist-cup svg { width: 16px; height: 16px; color: #E8B84B; }
#screen-game .vg-hist-row.is-win .vg-hist-when b { color: var(--vv-green-dark, #1F6B45); }
html.vv-sky-live.vv-sky-glass #screen-game .vg-hist-row { border-bottom-color: rgba(255,255,255,.1) !important; }
html.vv-sky-live.vv-sky-glass #screen-game .vg-hist-row.is-win .vg-hist-when b { color: #8DF3C4 !important; }

/* ══ Карточка серии: всё внутри неё — тёплое (15.09.2026) ═══════════════════
   Карточка перестала быть серым стеклом и снова оранжевая. Плашки внутри
   остались от тёмной темы: мятный текст и коричневое стекло на оранжевом
   читаются грязно. Внутри огня работает только белое стекло. */
html.vv-sky-live.vv-sky-glass .vg-strk .vg-strk-safe,
html.vv-sky-live.vv-sky-glass .vg-strk .vg-strk-safe.is-safe {
  background: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  color: #fff !important;
}
html.vv-sky-live.vv-sky-glass .vg-strk .vg-strk-safe svg,
html.vv-sky-live.vv-sky-glass .vg-strk .vg-strk-safe.is-safe svg { color: #fff !important; }
html.vv-sky-live.vv-sky-glass .vg-strk .vg-shield {
  background: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  color: #fff !important;
}
html.vv-sky-live.vv-sky-glass .vg-strk .vg-shield-ic { color: #fff !important; }
html.vv-sky-live.vv-sky-glass .vg-strk .vg-shield-saved { color: rgba(255,255,255,.92) !important; }
/* Подписи дней и «лучшая серия» на оранжевом — белые, а не светло-серые. */
html.vv-sky-live.vv-sky-glass .vg-strk .vg-wd-l,
html.vv-sky-live.vv-sky-glass .vg-strk .vg-strk-best,
html.vv-sky-live.vv-sky-glass .vg-strk .vg-strk-cap { color: #fff !important; }

/* ══ Шапка: мягкий низ вместо ступеньки (владелец 15.09.2026) ═══════════════
   «Вверху 4 блока и 4 разных цвета». Последняя граница — резкий низ шапки:
   она кончается одной плотностью, а то, что под ней, начинается другой.
   Затухание рисует сама шапка своим хвостом высотой 22 px — тогда переход
   не зависит от того, что идёт следом: вкладки, заголовок или карточка. */
html.vv-sky-live.vv-sky-glass header.app-header { position: sticky; }
/* Хвоста под шапкой тоже нет: он смягчал границу, но границы больше нет вовсе. */
html.vv-sky-live.vv-sky-glass header.app-header::after { content: none; }

/* ══ Разборы под небом: секции становятся карточками целиком (15.09.2026) ═════
   `.fqd-block` и его соседи задуманы как секции с верхней чертой: фон им дала
   тема неба, а скруглений и полей у них нет — получились прямоугольники во всю
   ширину с обрезанными краями (владелец: «как будто бы весь обрезан»).
   Раз уж фон есть, доводим до карточки: радиус, поля, без лишней черты сверху. */
html.vv-sky-live.vv-sky-glass .fqd-block,
html.vv-sky-live.vv-sky-glass .fqt-card,
html.vv-sky-live.vv-sky-glass .slp-block,
html.vv-sky-live.vv-sky-glass .vv-nutr-card {
  border-radius: var(--r-lg, 18px) !important;
  padding: 14px !important;
  margin: 12px 0 0 !important;
  border-top: 0 !important;
}
/* Строки внутри разбора не должны быть второй карточкой поверх первой. */
html.vv-sky-live.vv-sky-glass .fqd-block .fqd-meal,
html.vv-sky-live.vv-sky-glass .fqd-block .fqd-items { background: transparent !important; }

/* ══ Стекло не должно красить карточки цветом неба (владелец 15.09.2026) ═════
   «3 блока каких-то и разные цвета». На закатном небе — розовом и оранжевом —
   тёмное стекло пропускало цвет фона, и карточки становились бурыми, а на
   дневном голубом — синеватыми. Один и тот же блок выглядел по-разному в
   разное время суток. Лечится не плотностью, а гашением насыщенности фона
   под карточкой: `saturate(.55)` в backdrop-filter. Небо остаётся цветным,
   карточки — одинаково нейтральными. */
html.vv-sky-live.vv-sky-glass .vg-card,
html.vv-sky-live.vv-sky-glass .wh-cart,
html.vv-sky-live.vv-sky-glass .wh-mon,
html.vv-sky-live.vv-sky-glass .wh-metric,
html.vv-sky-live.vv-sky-glass .fqd-block,
html.vv-sky-live.vv-sky-glass .card,
html.vv-sky-live.vv-sky-glass .vv-dt {
  backdrop-filter: blur(16px) saturate(.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(.5) !important;
}

/* ══ Верх без полос: фон один — небо (владелец 15.09.2026) ═══════════════════
   Ни у шапки, ни у полосы вкладок нет своей заливки: любая полупрозрачная
   плашка рисует поперёк экрана границу. Читаемость держим тенью под буквами
   и значками — она не создаёт краёв. */
html.vv-sky-live.vv-sky-glass header.app-header,
html.vv-sky-live.vv-sky-glass header.app-header * {
  text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.3);
}
html.vv-sky-live.vv-sky-glass header.app-header svg {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
html.vv-sky-live.vv-sky-glass #nav2-seg { box-shadow: none !important; border: 0 !important; }

/* ══ «Что изменилось» списком (владелец 15.09.2026) ══════════════════════════
   Сплошной абзац с процентами не читается. Пункты, у каждого своя строка,
   число в заливке: зелёной, если стало больше, красноватой — если меньше.
   Заливка мягкая: это сводка о питании, а не предупреждение об опасности. */
.vv-ins-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vv-ins-li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.5; }
.vv-ins-li::before { content: '•'; position: absolute; left: 2px; top: 0; color: var(--ink-3); }
.vv-ins-li.is-up::before { color: var(--vv-green-dark, #1F6B45); }
.vv-ins-li.is-down::before { color: #C2603C; }
.vv-ins-k { font-weight: 700; }
.vv-ins-n { padding: 1px 6px; border-radius: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vv-ins-n.is-up { background: rgba(47,125,75,.16); color: #1F6B45; }
.vv-ins-n.is-down { background: rgba(194,96,60,.16); color: #A64A2A; }
html.vv-sky-live.vv-sky-glass .vv-ins-li { color: rgba(255,255,255,.92) !important; }
html.vv-sky-live.vv-sky-glass .vv-ins-k { color: #fff !important; }
html.vv-sky-live.vv-sky-glass .vv-ins-n.is-up { background: rgba(141,243,196,.22) !important; color: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass .vv-ins-n.is-down { background: rgba(255,150,110,.2) !important; color: #FFB08A !important; }
html.vv-sky-live.vv-sky-glass .vv-ins-li.is-up::before { color: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass .vv-ins-li.is-down::before { color: #FFB08A !important; }

/* ══ Монитор здоровья: период у графиков (15.09.2026) ═══════════════════════ */
.wh-hm-pers { display: inline-flex; gap: 6px; }
.wh-hm-per { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line, rgba(0,0,0,.12));
  background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.wh-hm-per.is-on { background: var(--vv-green-dark, #1F6B45); border-color: var(--vv-green-dark, #1F6B45); color: #fff; }
html.vv-sky-live.vv-sky-glass .wh-hm-per { border-color: rgba(255,255,255,.16) !important; color: rgba(255,255,255,.82) !important; }
html.vv-sky-live.vv-sky-glass .wh-hm-per.is-on { background: #8DF3C4 !important; border-color: #8DF3C4 !important; color: #0C1A14 !important; }

/* ══ Резиновая прокрутка вверх (владелец 15.09.2026) ═════════════════════════
   «Когда на телефоне я проворачиваю её вверх, она позволяет прокрутить выше, и
   это вызывает ещё один доп. блок другого цвета».

   Это overscroll — оттяжка за край страницы. За краем показывается фон
   документа, а он не совпадает с живым небом: небо нарисовано с
   background-attachment: fixed и в зону оттяжки не попадает. Отсюда чужая
   полоса сверху.

   Запрещаем оттяжку по вертикали. `contain` вместо `none` выбран сознательно:
   он оставляет обычную прокрутку внутри страницы и внутри листов, но не даёт
   тянуть за край. Прокрутка страницы и жест «потянуть, чтобы обновить» в
   приложении не используются, так что терять нечего. */
html, body { overscroll-behavior-y: contain; }
html.vv-sky-live, html.vv-sky-live body { overscroll-behavior: none; }

/* ══ Полоска под шапкой: настоящая причина (владелец 15.09.2026) ═════════════
   «Тут всё равно осталась полоска». Искал её в фоне и в размытии, а это была
   ГРАНИЦА: в design_v2.css у `header.app-header` стоит
   `border-bottom: 1px solid var(--line-soft) !important` — линия во всю ширину
   под шапкой. Плюс оттуда же приходило `backdrop-filter: blur(20px)`, которое
   перебивало мои правила: у него пометка «важно», а у моих её не было.

   Снимаем и границу, и размытие, и стеклянный фон — с той же пометкой, иначе
   правило снова проиграет файлу, который грузится раньше. */
html.vv-sky-live header.app-header,
html.vv-sky-live.vv-sky-glass header.app-header {
  background: transparent !important;
  background-image: none !important;
  border-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ══ «Осталось с прошлых дней» (VVELL-937, 16.09.2026) ══════════════════════
   Свёрнутая строка: сегодняшний план главнее, но купленное вчера не должно
   пропадать из виду. */
#screen-progress .vv-dg-past { padding: 12px 14px; }
#screen-progress .vv-dg-past-head { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
#screen-progress .vv-dg-past-t { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; }
#screen-progress .vv-dg-past-t svg { width: 16px; height: 16px; color: var(--vv-green-dark); }
#screen-progress .vv-dg-past-n { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
#screen-progress .vv-dg-past-ch svg { width: 16px; height: 16px; transition: transform .15s ease; }
#screen-progress .vv-dg-past-ch.is-open svg { transform: rotate(180deg); }
#screen-progress .vv-dg-past-sub { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
#screen-progress .vv-dg-past.is-open .vv-dg-items { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { #screen-progress .vv-dg-past-ch svg { transition: none; } }
html.vv-sky-live.vv-sky-glass #screen-progress .vv-dg-past-n { color: rgba(255,255,255,.7) !important; }

/* ══ «Из чего сложилось» на экране восстановления (VVELL-937, 16.09.2026) ════
   Владелец прислал снимок: строки разбора — пульс покоя, сон, ответ о
   самочувствии — читались тёмным по тёмному.

   Причина: `.vv-rd` попал в общий список стеклянных карточек, а лежит он
   ВНУТРИ карточки `.slp-block`, которая уже стеклянная. Получилась карточка
   в карточке: два тёмных слоя друг на друге и строки без контраста.
   Внутренний слой делаем прозрачным — остаются только разделители. */
html.vv-sky-live.vv-sky-glass .slp-block .vv-rd,
html.vv-sky-live.vv-sky-glass .rcvd .vv-rd {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}
html.vv-sky-live.vv-sky-glass .slp-block .vv-rd-row,
html.vv-sky-live.vv-sky-glass .rcvd .vv-rd-row {
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  background: transparent !important;
}
html.vv-sky-live.vv-sky-glass .slp-block .vv-rd-row:last-child,
html.vv-sky-live.vv-sky-glass .rcvd .vv-rd-row:last-child { border-bottom: 0 !important; }


/* ⚠ КНОПКА «ЗАПАС ХОДА И ИСТОРИЯ» — НЕ ВТОРАЯ КАРТОЧКА (VVELL-937, 16.09.2026).
   Кнопка лежит внутри `.slp-block`, а под небом этот блок — стеклянная карточка.
   Своя заливка и рамка у кнопки давали тёмную плашку внутри тёмной плашки: два
   почти одинаковых прямоугольника с двойной обводкой. Внутри стекла кнопка
   становится прозрачной, а видимой её делают поля и стрелка справа. */
html.vv-sky-live.vv-sky-glass .rcvd .rcv-link {
  background: transparent !important;
  border: 0 !important;
  padding: 2px 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   ЛИСТЫ ПОВЕРХ ЭКРАНА — ПЛОТНЫЕ, А НЕ ПОЛУПРОЗРАЧНЫЕ (VVELL-944, 16.09.2026)

   Владелец про лист «Добавить в дневник»: «неудобно, что она сильно прозрачная
   вся история с добавлением еды по фото, шк и тд».

   Причина: под небом все поверхности берут стеклянный фон rgba(10,16,24,.68) —
   он рассчитан на карточки НА экране, где за ними небо и размытие. У листа
   размытия нет вовсе (замер: backdrop-filter = none), и сквозь него просвечивал
   сам экран: заголовки, кнопки, суммы. Текст листа ложился поверх чужого текста.

   Лист — не элемент экрана, а слой поверх него, и видно должно быть только его.
   Плотность 0,96 оставляет намёк на стекло по краям и полностью гасит подложку.
   ══════════════════════════════════════════════════════════════════════════ */
html.vv-sky-live.vv-sky-glass .vv-modal-card,
html.vv-sky-live.vv-sky-glass .vv-sheet-card,
html.vv-sky-live.vv-sky-glass .vv-modal-content {
  background: rgba(12,18,28,.96) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
/* Затемнение под листом плотнее обычного: лист теперь непрозрачный, и слабая
   подложка оставляла бы яркий экран прямо у его края. */
html.vv-sky-live.vv-sky-glass .vv-modal-bg { background: rgba(4,8,14,.72) !important; }

/* Выбранная вкладка листа («Фото · Штрих-код · По названию · Словами»). В светлой теме
   это бледно-зелёная плашка #EAF3EC — на плотном тёмном листе она читалась как белая
   заплатка из другой темы. Тот же приём, что у чипов периода: мятная надпись на
   прозрачно-мятной подложке. */
html.vv-sky-live.vv-sky-glass .vv-scan-tab.is-on {
  background: rgba(141,243,196,.18) !important;
  color: #8DF3C4 !important;
  border-color: rgba(141,243,196,.45) !important;
}



/* ⚠ НЕАКТИВНАЯ КНОПКА ДОЛЖНА ВЫГЛЯДЕТЬ НЕАКТИВНОЙ. Пока ни одна привычка не отмечена,
   «Записать» ничего не делает — и на снимке она была такой же яркой, как рабочая.
   Кнопка, которая не отвечает на нажатие и никак этого не показывает, читается как
   поломка приложения. */
.vv-hbq-save:disabled { opacity: .4; box-shadow: none; }
html.vv-sky-live.vv-sky-glass .vv-hbq-save:disabled { opacity: .4 !important; }


/* ══════════════════════════════════════════════════════════════════════════
   ПОКУПКИ ПО ДНЯМ в блоке «Что купил» (VVELL-941, 16.09.2026)
   Шапка дня — та же роль, что у шапки дня в «Истории приёмов»: дата слева,
   счётчик справа. Плитки товаров остаются прежними, у них лишь пропала дата.
   ══════════════════════════════════════════════════════════════════════════ */
.vv-pn-day { margin-top: 14px; }
.vv-pn-day:first-of-type { margin-top: 8px; }
.vv-pn-day-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 2px 6px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px;
}
.vv-pn-day-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.vv-pn-day-n { flex: 0 0 auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
html.vv-sky-live.vv-sky-glass .vv-pn-day-t { color: rgba(255,255,255,.96) !important; }
html.vv-sky-live.vv-sky-glass .vv-pn-day-h { border-bottom-color: rgba(255,255,255,.12) !important; }


/* ══════════════════════════════════════════════════════════════════════════
   ПРИВЫЧКИ ПО ДНЯМ: лента дней и галочки (VVELL-946, 16.09.2026)
   Галочка одна на строку: серая — не отмечено, зелёная — было. Вся строка и есть
   кнопка: попасть в кружок пальцем на ходу трудно, а в строку высотой 52 — легко.
   ══════════════════════════════════════════════════════════════════════════ */
.vv-hb-body { padding: 2px 0 6px; }
.vv-hb-strip {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 16px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.vv-hb-strip::-webkit-scrollbar { display: none; }
.vv-hb-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 58px; min-height: 44px; padding: 7px 10px; border-radius: 14px;
  border: 1px solid var(--line); background: transparent; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--ink-2); cursor: pointer; scroll-snap-align: start;
}
.vv-hb-chip.is-on { background: var(--vv-green-tint); border-color: var(--vv-green-dark); color: var(--vv-green-dark); }
.vv-hb-chip-d { width: 5px; height: 5px; border-radius: 50%; background: var(--vv-yellow, #E3B85C); }
.vv-hb-chip-d.is-done { background: transparent; }
.vv-hb-sub { padding: 0 16px 8px; font-size: 13px; color: var(--ink-3); }
.vv-hb-list { display: flex; flex-direction: column; padding: 0 16px; }
.vv-hb-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 8px 0; border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.vv-hb-row:last-child { border-bottom: 0; }
.vv-hb-name { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; color: var(--ink); }
.vv-hb-auto { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.vv-hb-tick {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink-4);
}
.vv-hb-tick .wh-ic { width: 17px; height: 17px; vertical-align: 0; }
.vv-hb-row.is-on .vv-hb-tick {
  background: var(--vv-green-dark); border-color: var(--vv-green-dark); color: #06301C;
}
.vv-hb-foot { padding: 12px 16px 4px; }
.vv-hb-note { margin-top: 6px; text-align: center; font-size: 12px; color: var(--ink-3); }
.vv-hb-empty { padding: 10px 16px 18px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
html.vv-sky-live.vv-sky-glass .vv-hb-name { color: rgba(255,255,255,.96) !important; }
html.vv-sky-live.vv-sky-glass .vv-hb-chip { color: rgba(255,255,255,.88) !important; border-color: rgba(255,255,255,.18) !important; }
html.vv-sky-live.vv-sky-glass .vv-hb-chip.is-on {
  background: rgba(141,243,196,.18) !important; border-color: rgba(141,243,196,.45) !important; color: #8DF3C4 !important;
}
html.vv-sky-live.vv-sky-glass .vv-hb-tick { border-color: rgba(255,255,255,.28) !important; color: rgba(255,255,255,.55) !important; }
html.vv-sky-live.vv-sky-glass .vv-hb-row.is-on .vv-hb-tick {
  background: #8DF3C4 !important; border-color: #8DF3C4 !important; color: #06301C !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   ОПРОСЫ ВО ВЕСЬ ЭКРАН (VVELL-948, 16.09.2026)

   Владелец: «как раз на полный экран, чтобы он выскакивал вот этот опрос, как и
   опрос про состояние — тоже пусть на полный экран выходит».

   Оба опроса — утренние: человек открыл приложение, чтобы ответить про себя, и лист
   на треть экрана делает вопрос необязательным на вид. На полном экране отвечают, а не
   пролистывают мимо. Крестик и «Потом» на месте: запертых окон мы не делаем.

   ⚠ ВЫРЕЗ КАМЕРЫ И ПОЛОСА ЖЕСТОВ. Полноэкранная карточка упирается в края телефона,
   поэтому заголовок отодвигаем сверху на safe-area, а подвал — снизу; без этого
   крестик уезжает под часы, а кнопка «Готово» — под полосу жестов.
   ══════════════════════════════════════════════════════════════════════════ */
.vv-modal-bg.vv-sheet-bg:has(> .vv-sheet-full) { align-items: stretch; padding: 0; }
/* ⚠ ФОН ТАКОЙ ЖЕ, КАК У ПРИЛОЖЕНИЯ (VVELL-949, 16.09.2026). Владелец: «что-то уж слишком
   чёрный экран, пусть у него будет фон же как у приложения». Плотная заливка была верна
   для листа на треть экрана — он лежит ПОВЕРХ страницы и должен её перекрыть. Развёрнутый
   на весь экран, тот же цвет превращается в чёрный прямоугольник, не похожий ни на один
   экран приложения. Здесь лист САМ становится экраном: небо видно сквозь него, размытие
   гасит содержимое под ним, и получается та же поверхность, что у остальных экранов. */
html.vv-sky-live.vv-sky-glass .vv-modal-bg.vv-sheet-bg:has(> .vv-sheet-full) {
  background: rgba(6,10,18,.30) !important;
}
html.vv-sky-live.vv-sky-glass .vv-sheet-card.vv-sheet-full {
  background: rgba(10,16,24,.58) !important;
  border: 0 !important;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}
/* ⚠ ПОД КНОПКОЙ НЕ ДОЛЖНА ЧИТАТЬСЯ НИЖНЯЯ ПАНЕЛЬ. Экран под листом размыт, но подписи
   «Сегодня · Корзина · Здоровье» у самого низа всё равно угадывались и спорили с
   «Готово». Гасим их плавным затемнением снизу — не полосой, чтобы край не был виден. */
html.vv-sky-live.vv-sky-glass .vv-sheet-full .vv-hb-foot,
html.vv-sky-live.vv-sky-glass .vv-sheet-full .vv-feel-list {
  background: linear-gradient(to bottom, rgba(8,12,20,0) 0%, rgba(8,12,20,.55) 45%, rgba(8,12,20,.8) 100%);
}
.vv-sheet-card.vv-sheet-full {
  width: 100%; max-width: none; height: 100dvh; max-height: 100dvh;
  margin: 0; border-radius: 0;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Прокручивается только середина: шапка с крестиком и подвал с кнопкой стоят на месте. */
.vv-sheet-full .vv-sheet-head { flex: 0 0 auto; }
.vv-sheet-full .vv-hb-body,
.vv-sheet-full .vv-feel-list { flex: 1 1 auto; overflow-y: auto; }
.vv-sheet-full .vv-hb-foot { flex: 0 0 auto; padding-bottom: 16px; }
/* Полоску-«ручку» на полном экране не показываем: тянуть нечего. */
.vv-sheet-full .vv-sheet-grip { display: none; }
/* Список настроений раздвигаем: на полном экране кнопки не должны липнуть друг к другу. */
.vv-sheet-full .vv-feel-list { gap: 10px; padding-top: 4px; }
.vv-sheet-full .vv-feel-btn { min-height: 64px; }

/* На полном экране кнопка живёт ВНИЗУ, а не сразу под списком: у человека с двумя
   привычками список занимает четверть экрана, и «Готово» висело посреди пустоты, а
   палец тянется к низу телефона. Список растёт сверху, подвал прижат книзу. */
.vv-sheet-full .vv-hb-body { display: flex; flex-direction: column; }
.vv-sheet-full .vv-hb-list { flex: 0 1 auto; overflow-y: auto; }
.vv-sheet-full .vv-hb-foot { margin-top: auto; }
/* У вопроса о самочувствии кнопок пять и они одинаковые — их ставим ПО ЦЕНТРУ, а не
   к низу: прижатый к краю список на снимке читался как обрезанный, а последняя кнопка
   («Разбит») оказывалась у самой полосы жестов. */
.vv-sheet-full .vv-feel-list { justify-content: center; padding-bottom: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   ЛЕНТА ДНЕЙ В ДНЕВНИКЕ (VVELL-953, VVELL-954, 16.09.2026)

   Та же лента, что в утреннем опросе привычек (.vv-hb-strip), только живёт на экране,
   а не в листе: без внешних полей листа и с меткой, смысл которой зависит от секции —
   зелёная «в этот день есть записи еды», жёлтая «есть неотмеченные привычки».
   ══════════════════════════════════════════════════════════════════════════ */
#vv-diary-days { margin: 2px 0 10px; }
.vv-dd-strip {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.vv-dd-strip::-webkit-scrollbar { display: none; }
.vv-dd-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 58px; min-height: 44px; padding: 7px 10px; border-radius: 14px;
  border: 1px solid var(--line, #E6E0D2); background: var(--paper, #fff); font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--ink-2, #454A40); cursor: pointer; scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
.vv-dd-chip.is-on { background: var(--vv-green-tint, #E7F6EC); border-color: var(--vv-green, #1E9E59); color: var(--vv-green-dark, #0F6E3E); }
.vv-dd-chip-d { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.vv-dd-chip-d.has-food { background: var(--vv-green, #1E9E59); }
.vv-dd-chip-d.has-open { background: var(--vv-yellow, #E3B85C); }
.vv-dd-past .vv-hs-day { border-bottom: 0; padding: 4px 0 2px; }
.vv-dd-past .vv-hs-head { margin-bottom: 8px; }
.vv-dd-habits { display: flex; flex-direction: column; }
.vv-dd-past .vv-hb-foot { padding: 12px 0 2px; }
html.vv-sky-live.vv-sky-glass .vv-dd-chip {
  background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.88) !important; border-color: rgba(255,255,255,.18) !important;
}
html.vv-sky-live.vv-sky-glass .vv-dd-chip.is-on {
  background: rgba(141,243,196,.18) !important; border-color: rgba(141,243,196,.45) !important; color: #8DF3C4 !important;
}
html.vv-sky-live.vv-sky-glass .vv-dd-chip-d.has-food { background: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass .vv-dd-chip-d.has-open { background: #F1C94A !important; }
.vv-theme-night .vv-dd-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }


/* ══════════════════════════════════════════════════════════════════════════
   «В ЭТОМ МАГАЗИНЕ НЕ ХВАТИЛО» (VVELL-951, 16.09.2026)
   Плашка под строкой магазина в корзине: день собран частично, движок назвал
   незакрытые места. Тон предупреждающий, не ошибка: магазин настоящий, просто маленький.
   ══════════════════════════════════════════════════════════════════════════ */
.vv-store-thin {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 8px 0 4px; padding: 11px 12px; border-radius: 14px;
  background: var(--vv-yellow-tint, rgba(227,184,92,.16)); border: 1px solid rgba(227,184,92,.35);
  font-size: 13px; line-height: 1.4; color: var(--ink, #1E1F1B);
}
.vv-store-thin .wh-ic { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--vv-yellow-dark, #9A6B00); vertical-align: 0; }
.vv-store-thin b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.vv-store-thin span { display: block; color: var(--ink-2, #454A40); }
html.vv-sky-live.vv-sky-glass .vv-store-thin {
  background: rgba(241,201,74,.14) !important; border-color: rgba(241,201,74,.32) !important; color: #fff !important;
}
html.vv-sky-live.vv-sky-glass .vv-store-thin .wh-ic { color: #F1C94A !important; }
html.vv-sky-live.vv-sky-glass .vv-store-thin span { color: rgba(255,255,255,.78) !important; }
.vv-theme-night .vv-store-thin { background: rgba(241,201,74,.12); border-color: rgba(241,201,74,.28); color: var(--ink); }
.vv-theme-night .vv-store-thin span { color: var(--ink-2); }


/* ══════════════════════════════════════════════════════════════════════════
   ЗАМЕНЫ (VVELL-952, вторая редакция 16.09.2026)

   1. Окно замены — столбик строк, как было, но имя/цена/оценка своими классами:
      `.vv-meal-name` из корзины в листе под небом было не видно вовсе.
   2. В карточке товара в корзине — лента миниатюр «вместо», тап меняет товар на месте.
      Владелец: «прокрут, никуда не залезая, просто в корзине, аккуратно и красиво».
   ══════════════════════════════════════════════════════════════════════════ */
.vv-alt-group { margin-top: 4px; }
.vv-alt-group + .vv-alt-group { margin-top: 12px; }
.vv-alt-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #6F746A); margin: 0 0 6px; }
.vv-alt-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px;
  padding: 8px 6px 8px 8px; margin-bottom: 6px; border-radius: 14px; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--line, #E6E0D2); background: var(--paper, #fff); color: var(--ink, #1E1F1B);
  -webkit-tap-highlight-color: transparent;
}
.vv-alt-row:active { transform: scale(.99); }
.vv-alt-row .vv-meal-img { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; background: #fff; flex: 0 0 48px; margin: 0; }
.vv-alt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vv-alt-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vv-alt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--ink-2, #454A40); }
.vv-alt-meta b { font-weight: 700; color: var(--ink, #1E1F1B); font-variant-numeric: tabular-nums; }
.vv-alt-grade { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg-warm, #F5F2EA); color: var(--ink-2, #454A40); }
.vv-alt-grade.is-a, .vv-alt-grade.is-b { background: var(--vv-green-tint, #E7F6EC); color: var(--vv-green-dark, #0F6E3E); }
.vv-alt-grade.is-d, .vv-alt-grade.is-e, .vv-alt-grade.is-f { background: rgba(227,75,118,.12); color: var(--vv-berry, #C4324F); }
.vv-alt-why { font-size: 11.5px; color: var(--ink-3, #6F746A); }
.vv-alt-chev { flex: 0 0 auto; display: inline-flex; color: var(--ink-4, #8E8A82); }
.vv-alt-chev .wh-ic { width: 16px; height: 16px; transform: rotate(-90deg); vertical-align: 0; }
html.vv-sky-live.vv-sky-glass .vv-alt-row { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; color: #fff !important; }
html.vv-sky-live.vv-sky-glass .vv-alt-name { color: rgba(255,255,255,.96) !important; }
html.vv-sky-live.vv-sky-glass .vv-alt-meta { color: rgba(255,255,255,.72) !important; }
html.vv-sky-live.vv-sky-glass .vv-alt-meta b { color: #fff !important; }
html.vv-sky-live.vv-sky-glass .vv-alt-grade { background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.85) !important; }
html.vv-sky-live.vv-sky-glass .vv-alt-grade.is-a, html.vv-sky-live.vv-sky-glass .vv-alt-grade.is-b { background: rgba(141,243,196,.18) !important; color: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass .vv-alt-grade.is-d, html.vv-sky-live.vv-sky-glass .vv-alt-grade.is-e, html.vv-sky-live.vv-sky-glass .vv-alt-grade.is-f { background: rgba(255,120,150,.16) !important; color: #FFB3C6 !important; }
html.vv-sky-live.vv-sky-glass .vv-alt-why { color: rgba(255,255,255,.6) !important; }
html.vv-sky-live.vv-sky-glass .vv-alt-head { color: rgba(255,255,255,.55) !important; }
html.vv-sky-live.vv-sky-glass .vv-alt-chev { color: rgba(255,255,255,.45) !important; }
.vv-theme-night .vv-alt-row { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--ink); }


/* ══════════════════════════════════════════════════════════════════════════
   КАРТОЧКА ТОВАРА ЛИСТАЕТСЯ ВБОК (VVELL-957, 16.09.2026)
   Первый слайд — карточка как есть; следующие — варианты того же места. Слайд 88 %
   ширины, край следующего виден. Дорожка выходит за поля списка, чтобы край не
   обрезался ровно по границе — иначе это читалось бы как ошибка вёрстки.
   ══════════════════════════════════════════════════════════════════════════ */
#screen-cart .vv-item-wrap { position: relative; }
#screen-cart .vv-item-track {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-right: 14px;
}
#screen-cart .vv-item-track::-webkit-scrollbar { display: none; }
#screen-cart .vv-item-slide { flex: 0 0 91%; min-width: 0; scroll-snap-align: start; }
/* Внутри дорожки карточка на 9 % уже, и строка «− 1 + · 200 г · 190 ₽» ломалась пополам.
   Две кнопки действий ставим столбиком — это возвращает строке 40 px ширины. */
#screen-cart .vv-item-slide .vv-meal-actions { flex-direction: column !important; gap: 6px !important; }
#screen-cart .vv-item-slide .vv-meal-item { padding-right: 10px !important; gap: 10px !important; }
#screen-cart .vv-item-slide .vv-meal-item { border-bottom: 0 !important; }
#screen-cart .vv-item-slide:not(.is-cur) .vv-meal-item {
  border-radius: 14px; background: rgba(255,255,255,.04); border: 1px dashed var(--dv2-border, #E6E0D2);
  margin: 4px 0;
}
#screen-cart .vv-item-wrap { border-bottom: 1px solid var(--dv2-border-soft, #EDE9DF); }
#screen-cart .vv-item-dots { display: flex; gap: 4px; justify-content: flex-end; padding: 0 14px 8px; }
#screen-cart .vv-item-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--dv2-border, #E6E0D2); transition: width .18s, background .18s; }
#screen-cart .vv-item-dots i.is-on { width: 12px; border-radius: 3px; background: var(--vv-green, #1E9E59); }
#screen-cart .vv-meal-alt .vv-meal-sub { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
#screen-cart .vv-alt-mark { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--dv2-muted, #6F746A); }
#screen-cart .vv-meal-alt .vv-alt-grade { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg-warm, #F5F2EA); color: var(--ink-2, #454A40); }
#screen-cart .vv-meal-alt .vv-alt-grade.is-a, #screen-cart .vv-meal-alt .vv-alt-grade.is-b { background: var(--vv-green-tint, #E7F6EC); color: var(--vv-green-dark, #0F6E3E); }
#screen-cart .vv-meal-alt .vv-alt-grade.is-d, #screen-cart .vv-meal-alt .vv-alt-grade.is-e, #screen-cart .vv-meal-alt .vv-alt-grade.is-f { background: rgba(227,75,118,.12); color: var(--vv-berry, #C4324F); }
#screen-cart .vv-meal-alt .vv-alt-why { font-size: 11px; color: var(--dv2-muted, #6F746A); }
#screen-cart .vv-meal-btn-take {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--vv-green, #1E9E59); color: #fff;
}
html.vv-sky-live.vv-sky-glass #screen-cart .vv-item-slide:not(.is-cur) .vv-meal-item { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.22) !important; }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-item-dots i { background: rgba(255,255,255,.22) !important; }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-item-dots i.is-on { background: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-meal-btn-take { background: #8DF3C4 !important; color: #06301C !important; }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-alt-mark, html.vv-sky-live.vv-sky-glass #screen-cart .vv-meal-alt .vv-alt-why { color: rgba(255,255,255,.6) !important; }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-meal-alt .vv-alt-grade { background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.85) !important; }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-meal-alt .vv-alt-grade.is-a, html.vv-sky-live.vv-sky-glass #screen-cart .vv-meal-alt .vv-alt-grade.is-b { background: rgba(141,243,196,.18) !important; color: #8DF3C4 !important; }

/* VVELL-969 (17.09.2026, владелец по снимку): точки карусели замен — по центру; строка товара не тянется под высоту
   карточки замены (дорожка — flex со stretch, замена выше карточки → пустота под товаром). Карточка замены компактная:
   имя в две строки, без «почему», не выше 124 px. */
#screen-cart .vv-item-track { align-items: flex-start; }
#screen-cart .vv-item-slide:not(.is-cur) .vv-meal-item { max-height: 104px; overflow: hidden; margin: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; }
#screen-cart .vv-item-slide:not(.is-cur) .vv-meal-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#screen-cart .vv-item-slide:not(.is-cur) .vv-alt-why { display: none; }
#screen-cart .vv-item-dots { justify-content: center; padding: 0 14px 5px; margin-top: -2px; }

/* VVELL-969 (17.09.2026, решения владельца по артефакту) — ПРОД (владелец: правки сразу на прод, потом прод → стенд).
   3) подписи мест («Каша», «Первое к обеду») убраны, «Второй вариант · на выбор» остаётся;
   5) пилюли целей — в карточку товара, в строке нет; «Беру» остаётся;
   2) кнопки «Заменить»/«Перенести» аккуратнее: меньше, легче, без тяжёлой заливки;
   4) строка упаковки мельче и спокойнее; 7) шапка «Дополнение к …» мельче основной;
   8) верх экрана: описание под заголовком скрыто, подсказка чата — одна строка, адрес магазина компактнее. */
#screen-cart .vv-meal-role:not(.is-alt) { display: none; }
#screen-cart .vv-meal-item .vv-chip-goal { display: none; }
#screen-cart .vv-meal-btn-swap, #screen-cart .vv-meal-btn-move { width: 30px !important; height: 30px !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: none !important; }
#screen-cart .vv-meal-btn-swap svg, #screen-cart .vv-meal-btn-move svg { width: 14px; height: 14px; }
#screen-cart .vv-qty-lab { font-size: 11.5px; opacity: .8; letter-spacing: 0; }
#screen-cart .vv-meal-bf-extra .vv-meal-head { padding-top: 6px; padding-bottom: 6px; }
#screen-cart .vv-meal-bf-extra .vv-meal-title { font-size: 11px; letter-spacing: .06em; opacity: .85; }
#screen-cart .vv-meal-bf-extra .vv-meal-total { font-size: 12px; padding: 2px 8px; }
#screen-cart .chat-header .sub { display: none; }
#screen-cart .vv-cart-chat-hint { padding: 8px 12px; align-items: center; }
#screen-cart .vv-cart-chat-txt { font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-cart .vv-store-row { padding-top: 8px; padding-bottom: 8px; }
#screen-cart .vv-store-cap { display: none; }
#screen-cart .vv-store-addr { font-size: 13px; }

/* VVELL-969f (17.09.2026, владелец по снимкам прода): карусель — без «ВМЕСТО» и оценки, кнопка «Заменить» по центру,
   карточка замены по содержимому (не вылезает за пунктир); имя товара держит две строки — счётчик не скачет;
   строка упаковки справа, под ценой; пометка «необязательно · Убрать»; лист «Почему корзина такая большая». */
#screen-cart .vv-item-slide:not(.is-cur) .vv-meal-item { max-height: none; overflow: visible; align-items: center !important; padding: 8px 10px !important; }
#screen-cart .vv-meal-alt .vv-alt-mark, #screen-cart .vv-meal-alt .vv-alt-grade, #screen-cart .vv-meal-alt .vv-alt-why { display: none !important; }
#screen-cart .vv-meal-alt .vv-meal-sub { display: none; }
#screen-cart .vv-meal-alt .vv-meal-actions { align-self: center !important; flex-direction: row !important; }
#screen-cart .vv-meal-btn-take { padding: 9px 14px !important; border-radius: 12px !important; font-size: 13px !important; white-space: nowrap; }
#screen-cart .vv-meal-item .vv-meal-name { min-height: 2.5em; }
#screen-cart .vv-meal-item .vv-qty-lab { display: block; width: 100%; text-align: right; padding-right: 4px; margin-top: 2px; }
#screen-cart .vv-opt-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--dv2-muted, #6F746A); margin: 4px 6px 0 0; }
#screen-cart .vv-opt-rm { display: inline-block; font: inherit; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--vv-green, #1E9E59); color: var(--vv-green, #1E9E59); background: transparent; margin-top: 4px; cursor: pointer; }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-opt-tag { color: rgba(255,255,255,.72); }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-opt-rm { border-color: #8DF3C4; color: #8DF3C4; }
#screen-cart .vv-extra-sub { font-size: 11.5px; color: var(--dv2-muted, #6F746A); padding: 0 4px 8px; line-height: 1.4; }
#screen-cart .vv-extra-why { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--vv-green, #1E9E59); background: none; border: 0; padding: 0; cursor: pointer; }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-extra-sub { color: rgba(255,255,255,.7); }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-extra-why { color: #8DF3C4; }
#vv-price-explain { position: fixed; inset: 0; z-index: 960; }
#vv-price-explain .cosheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
#vv-price-explain .cosheet { position: absolute; left: 0; right: 0; bottom: 0; }
#vv-price-explain .vv-pe-row { font-size: 14px; line-height: 1.45; margin: 0 0 10px; }
#vv-price-explain .vv-pe-link { display: block; width: 100%; margin-top: 8px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--vv-green, #1E9E59); padding: 10px; cursor: pointer; }
html.vv-sky-live.vv-sky-glass #vv-price-explain .vv-pe-link { color: #8DF3C4; }
/* Строка «Скрыто необязательное: …» (VVELL-1120) снята в VVELL-1189 — число теперь в переключателе наверху корзины. */
.vv-pe-flash { outline: 2px solid #8DF3C4; outline-offset: 2px; transition: outline-color 1.2s; }

/* 969f-2: пометка и «Убрать» в одну строку; лист «Почему корзина такая большая» — свои стили панели (классов листа оформления на проде нет) */
#screen-cart .vv-opt-wrap { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
#screen-cart .vv-opt-wrap .vv-opt-tag, #screen-cart .vv-opt-wrap .vv-opt-rm { margin: 0; }
#vv-price-explain .cosheet { background: var(--card, #FBF7EF); color: var(--ink, #23302A); border-radius: 22px 22px 0 0; padding: 12px 18px 24px; max-height: 80vh; overflow: auto; box-shadow: 0 -10px 40px rgba(0,0,0,.35); }
#vv-price-explain .cosheet-grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(128,128,128,.5); margin: 0 auto 12px; }
#vv-price-explain .cosheet-title { font-size: 18px; font-weight: 800; margin: 0 0 10px; line-height: 1.25; }
#vv-price-explain .cosheet-cta { display: block; width: 100%; margin-top: 8px; padding: 14px; border-radius: 16px; border: 0; background: var(--vv-green, #1E9E59); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
html.vv-sky-live.vv-sky-glass #vv-price-explain .cosheet, .vv-theme-night #vv-price-explain .cosheet { background: #17324A !important; color: #EEF5F1 !important; }
html.vv-sky-live.vv-sky-glass #vv-price-explain .cosheet-cta { background: #8DF3C4 !important; color: #06301C !important; }

/* 969h (владелец 17.09): карточка замены по центру строки, а не прижата к верху */
#screen-cart .vv-item-track { align-items: center; }
#screen-cart .vv-opt-tag { margin-top: 4px; }

/* 969i (владелец 17.09): модалки в теме «стекло» не чёрные, а как карточки; затемнение мягче */
html.vv-sky-live.vv-sky-glass .vv-modal-card { background: #17324A !important; color: #EEF5F1 !important; }
html.vv-sky-live.vv-sky-glass .vv-modal-bg { background: rgba(6, 20, 34, .55) !important; }

/* 969j (ОС коллег 17.09): выключенный приём не показываем; имя товара до трёх строк; фото и имя кликабельны;
   плитка каталога после добавления — с галочкой */
#screen-cart .vv-meal-block.vv-meal-disabled { display: none !important; }
#screen-cart .vv-meal-item .vv-meal-name { -webkit-line-clamp: 3; cursor: pointer; }
#screen-cart .vv-meal-item .vv-meal-pic { cursor: pointer; }
.vv-addmore-item.is-added { outline: 1px solid var(--vv-green, #1E9E59); outline-offset: -1px; }
.vv-addmore-plus.is-done { color: var(--vv-green, #1E9E59); }

/* VVELL-972f: окно выбора магазина — режимы «Доставка» / «Самовывоз» */
.vv-ss-modes { display: flex; gap: 8px; margin: 6px 0 8px; }
.vv-ss-mode { flex: 1; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line, #E0D6C3); background: transparent; color: var(--ink, #23302A); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.vv-ss-mode.is-on { background: var(--vv-green, #1E9E59); border-color: var(--vv-green, #1E9E59); color: #fff; }
html.vv-sky-live.vv-sky-glass .vv-ss-mode { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.9); }
html.vv-sky-live.vv-sky-glass .vv-ss-mode.is-on { background: #8DF3C4; border-color: #8DF3C4; color: #06301C; }
.vv-ss-item.is-dark .vv-ss-item-km { color: var(--vv-green, #1E9E59); font-weight: 600; }

/* VVELL-972f-2 (владелец 17.09: «окно выбора адреса прозрачное, ничего не видно»): панель непрозрачная, затемнение плотнее */
#vv-store-sheet .vv-ss { background: var(--card, #FBF7EF) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; }
html.vv-sky-live.vv-sky-glass #vv-store-sheet .vv-ss, .vv-theme-night #vv-store-sheet .vv-ss { background: #17324A !important; }
#vv-store-sheet .vv-ss-bg { background: rgba(0, 0, 0, .6) !important; }
#vv-store-sheet .vv-ss-list .vv-ss-item { background: rgba(255,255,255,.06); }

/* VVELL-973/971 (17.09): ряд приёмов над списком; остаток дома строкой */
#screen-cart .vv-meal-row { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 2px 0 10px; margin-top: -2px; scrollbar-width: none; }
#screen-cart .vv-meal-row::-webkit-scrollbar { display: none; }
#screen-cart .vv-meal-row-cap { font-size: 12px; color: var(--ink-3, #6F746A); white-space: nowrap; margin-right: 2px; }
#screen-cart .vv-meal-chip { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line, #E0D6C3); background: transparent; color: var(--ink-2, #5E6B62); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
#screen-cart .vv-meal-chip.is-on { background: var(--vv-green, #1E9E59); border-color: var(--vv-green, #1E9E59); color: #fff; }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-meal-row-cap { color: rgba(255,255,255,.7); }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-meal-chip { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-meal-chip.is-on { background: #8DF3C4; border-color: #8DF3C4; color: #06301C; }
#screen-cart .vv-meal-item.is-home .vv-qty, #screen-cart .vv-meal-item.is-home .vv-meal-actions, #screen-cart .vv-meal-item.is-home .vv-qty-lab { display: none !important; }
#screen-cart .vv-meal-item.is-home .vv-meal-pic { opacity: .8; }
#screen-cart .vv-meal-item.is-home .vv-meal-price { opacity: .7; }
#screen-cart .vv-opt-tag.is-home { color: var(--vv-green, #1E9E59); background: rgba(30,158,89,.12); }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-opt-tag.is-home { color: #8DF3C4; background: rgba(141,243,196,.14); }

/* 18.09: дорожка замен прячется вместе со строкой другого дня */
#cart-list .vv-item-wrap.vv-day-off { display: none !important; }


/* ── ВСЕ РЕЦЕПТЫ: поиск и страницы (18.09.2026, VVELL-978) ──────────────────── */
#screen-cook .cook-cat-search { margin: 10px 0 8px; }
#screen-cook .cook-cat-search input {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 1px solid var(--line, #E8E6DC); border-radius: 12px;
  background: var(--card, #fff); color: var(--ink, #161A13);
  font-family: inherit; font-size: 15px; }
#screen-cook .cook-cat-search input::placeholder { color: var(--ink-4, #A7AC9D); }
#screen-cook .cook-pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px; margin: 16px 0 6px; }
#screen-cook .cook-pg, #screen-cook .cook-pg-arrow {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line, #E8E6DC); background: var(--card, #fff);
  color: var(--ink-2, #454A40); font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; }
#screen-cook .cook-pg.active {
  background: var(--vv-green, #1E9E59); border-color: var(--vv-green, #1E9E59); color: #fff; }
#screen-cook .cook-pg-arrow[disabled] { opacity: .35; cursor: default; }
#screen-cook .cook-pg-gap { color: var(--ink-4, #A7AC9D); padding: 0 2px; }

/* Три вкладки на экране «Готовим» — в одну строку, без переноса слов (VVELL-978). */
#screen-cook .cook-tabs { display: flex; gap: 4px; }
#screen-cook .cook-tab {
  flex: 1 1 0; min-width: 0; white-space: nowrap;
  padding-left: 8px; padding-right: 8px; font-size: 13.5px; }

/* «Беру такое» — попали в привычную полку человека, артикул другой (18.09.2026). Тише, чем
   «Беру» у точного совпадения: это правда помягче, и путать их нельзя. */
.vv-chip.vv-chip-shelf { background: var(--line-soft, #EFEAE0); color: var(--ink-3, #6B6257); }
html.vv-theme-night .vv-chip.vv-chip-shelf { background: rgba(255,255,255,.10); color: rgba(255,255,255,.72); }

/* ⚠ ПЛАШКА «МОИ ПРАВИЛА КОРЗИНЫ» — ВИДНАЯ (18.09.2026, владелец: «сделай её цветастее и цветной,
   может быть обводкой, чтобы было видно»). Была мелкая серая надпись прописными с прозрачностью
   0,6 над полем ввода: читалась как служебная подпись, хотя за ней правила, которые человек задал
   сам и которые меняют каждую его корзину. */
#screen-chat .vv-wish-rules-ttl {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; margin: 0 0 6px;
  border: 1.5px solid var(--vv-green, #177652); border-radius: 999px;
  background: var(--vv-green-tint, #E4F6EB);
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--vv-green-dark, #1F6B45); opacity: 1;
}
#screen-chat .vv-wish-rules-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  background: var(--vv-green, #177652); color: #fff; }
#screen-chat .vv-wish-rules-ic svg { width: 13px; height: 13px; }
#screen-chat .vv-wish-rules-nm { flex: 1 1 auto; text-align: left; }
#screen-chat .vv-wish-rules-n { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--vv-green, #177652); color: #fff;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Раскрыто — плашка ярче: видно, что список открыт. */
#screen-chat .vv-wish-rules.is-open .vv-wish-rules-ttl {
  background: var(--vv-green, #177652); color: #fff; }
#screen-chat .vv-wish-rules.is-open .vv-wish-rules-ic { background: rgba(255, 255, 255, .22); }
#screen-chat .vv-wish-rules.is-open .vv-wish-rules-n { background: rgba(255, 255, 255, .22); }
/* Ночью и по «стеклу»: тот же смысл, свои цвета — зелёный на тёмном, не выжигая экран. */
html.vv-theme-night #screen-chat .vv-wish-rules-ttl {
  background: rgba(63, 192, 139, .16); border-color: rgba(95, 224, 166, .75); color: var(--vv-green, #5FE0A6); }
html.vv-theme-night #screen-chat .vv-wish-rules-ic,
html.vv-theme-night #screen-chat .vv-wish-rules-n { background: var(--vv-green, #5FE0A6); color: #0B1B14; }
html.vv-theme-night #screen-chat .vv-wish-rules.is-open .vv-wish-rules-ttl {
  background: rgba(63, 192, 139, .30); color: #fff; }

/* ── «Покупки» в листе добавления: лента дней (21.09.2026) ─────────────────────── */
.vv-buys-days { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px 6px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.vv-buys-days::-webkit-scrollbar { display:none; }
.vv-buys-day { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  min-width:118px; padding:9px 12px; border-radius:14px; border:1px solid var(--vv-line, rgba(255,255,255,.14));
  background:var(--vv-card, rgba(255,255,255,.04)); color:inherit; font:inherit; text-align:left; cursor:pointer; }
.vv-buys-day b { font-size:15px; font-weight:700; line-height:1.15; }
.vv-buys-day small { font-size:11.5px; opacity:.72; line-height:1.2; white-space:nowrap; }
.vv-buys-day.is-on { border-color:var(--vv-green, #3ddc97); background:rgba(61,220,151,.14); }
.vv-buys-day.is-on b { color:var(--vv-green, #3ddc97); }
.vv-buys-sep { font-size:12px; font-weight:700; opacity:.7; margin:12px 2px 6px; text-transform:capitalize; }
/* Блюда из корзины «Готовлю сам» над продуктами дня покупки (VVELL-1190, 30.09.2026). Строки — те же .vv-find-row,
   что у товаров (подсветка касания по координате, VVELL-1052); здесь только подписи и отметки. Только токены. */
.vv-buys-dishes { margin: 0 0 2px; }
.vv-buys-subh { margin: 2px 2px 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2, #3F3B33); }
.vv-buys-dishes + .vv-buys-subh { margin-top: 12px; }
.vv-buys-dish .vv-mine-noimg { width: 44px; height: 44px; }
.vv-find-sub.vv-buys-dish-done { font-weight: 600; color: var(--vv-green-dark, #2E7D32); }
.vv-buys-day small.vv-buys-day-dish { opacity: 1; font-weight: 600; color: var(--vv-green-dark, #2E7D32); }
/* Ночь без неба: тёмно-зелёный на тёмной карточке давал 3,3 : 1 (замер 30.09) — берём светлый зелёный ночной темы. */
html.vv-theme-night .vv-find-sub.vv-buys-dish-done,
html.vv-theme-night .vv-buys-day small.vv-buys-day-dish { color: var(--vv-green, #5FE0A6); }
html.vv-sky-live.vv-sky-glass .vv-buys-subh { color: rgba(255,255,255,.86); }
html.vv-sky-live.vv-sky-glass .vv-find-sub.vv-buys-dish-done,
html.vv-sky-live.vv-sky-glass .vv-buys-day small.vv-buys-day-dish { color: #8DF3C4; }

/* ── Уведомление сверху (VVELL-1054, 23.09.2026). Владелец: «снизу чёрное окно… должно сверху
   выходить аккуратно плашка красивая, на несколько секунд, и не чёрная». Одна функция vvNotice,
   вид — здесь. День — токенами, ночь — тёмно-зелёная карточка, небо — стекло. ─────────────── */
.vv-notice {
  position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 10px);
  margin: 0 auto; max-width: 480px; z-index: 9999; pointer-events: none;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px 12px 14px; border-radius: 16px;
  background: var(--card, #FFFFFF); color: var(--ink, #161A13);
  border: 1px solid var(--line-soft, #F0EEE6);
  box-shadow: 0 12px 32px rgba(22, 26, 19, .16), 0 2px 6px rgba(22, 26, 19, .08);
  font-size: 14px; line-height: 1.35; font-weight: 500;
  opacity: 0; transform: translateY(-14px);
  transition: opacity .22s ease-out, transform .22s ease-out;
}
.vv-notice.is-on { opacity: 1; transform: translateY(0); }
.vv-notice-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--vv-green, #1E9E59); }
.vv-notice-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
html.vv-theme-night .vv-notice { background: #F4F1EA; color: #161A13; border-color: rgba(255,255,255,.55); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
html.vv-sky-live.vv-sky-glass .vv-notice { background: rgba(255,255,255,.94); color: #161A13; border-color: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (prefers-reduced-motion: reduce) { .vv-notice { transition: none; transform: none; } }

/* Время приёма в сводке дня — видно, что оно правится (VVELL-1051, 23.09.2026). */
.fqd-time-edit { font-size: 11px; font-weight: 500; color: var(--ink-3, #787E71); }
input.vv-when { text-align: center; }

/* ── Баланс калорий на «Сегодня» (VVELL-1067, 23.09.2026): третья карточка ряда мониторов на всю ширину. */
.wh-balance { grid-column: 1 / -1; }
.wh-bal-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.wh-bal-main { flex: 1 1 auto; min-width: 0; }
.wh-bal-bars { display: flex; flex-direction: column; gap: 4px; margin: 7px 0 6px; }
.wh-bal-bar { display: block; height: 6px; border-radius: 3px; background: var(--wh-line, rgba(0,0,0,.08)); overflow: hidden; }
.wh-bal-bar i { display: block; height: 100%; border-radius: 3px; background: var(--wh-teal, #1E9E59); }
.wh-bal-bar.burn i { background: var(--wh-yellow, #FA5F0A); opacity: .85; }
.wh-bal-diff { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; padding: 8px 10px; border-radius: var(--r-sm, 12px); background: var(--wh-card-2, rgba(0,0,0,.04)); }
.wh-bal-diff b { font-size: 18px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wh-bal-diff small { font-size: 11px; color: var(--wh-ink-3); margin-top: 2px; }
.wh-bal-lead { margin-top: -4px; }

/* ═══ ВЕЧЕРНЯЯ ПАЧКА 23.09.2026 (batch2) ═══════════════════════════════════════════════════════
   1. Поиск в «Покупках»; 2. выбранный товар виден; 3. время приёма в дневнике; 4. баланс по дням;
   5. цветное кручение у подсказки чата в корзине; 6. вкладка «Моё»; 7. «БАДы». Только токены. */

/* 1–2. Поиск в «Покупках» и выбранная строка. Список над формой сворачивается в одну строку. */
.vv-buys-q { margin-bottom: 8px; }
.vv-find-row.is-picked {
  border-color: var(--vv-green, #1E9E59); background: var(--vv-green-tint, #E7F6EC);
  box-shadow: inset 0 0 0 1px var(--vv-green, #1E9E59);
}
.vv-picked-bar { display: none; }
#vv-scan-bg [id^="vv-pane-"].is-collapsed > *:not(.vv-picked-bar) { display: none !important; }
#vv-scan-bg [id^="vv-pane-"].is-collapsed > .vv-picked-bar {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 10px 12px; margin: 0 0 10px; border: 1px dashed var(--line, #E0D6C3); border-radius: var(--r-sm, 12px);
  background: transparent; font: inherit; font-size: 13.5px; color: var(--ink-2, #3F3B33); text-align: left; cursor: pointer;
}
.vv-picked-bar .vv-picked-k { flex: none; color: var(--ink-3, #756C5D); }
.vv-picked-bar b { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink, #161A13); font-weight: 600; }
.vv-picked-bar .vv-picked-edit { flex: none; color: var(--vv-green-dark, #2E7D32); font-weight: 700; }
.vv-scan-found.is-picked { border-color: var(--vv-green, #1E9E59); background: var(--vv-green-tint, #E7F6EC); }
.vv-scan-found-k { margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vv-green-dark, #2E7D32); }
html.vv-sky-live.vv-sky-glass .vv-find-row.is-picked,
html.vv-sky-live.vv-sky-glass .vv-scan-found.is-picked { background: rgba(95,224,166,.16) !important; border-color: rgba(95,224,166,.65) !important; box-shadow: none !important; }
html.vv-sky-live.vv-sky-glass .vv-scan-found-k,
html.vv-sky-live.vv-sky-glass .vv-picked-bar .vv-picked-edit { color: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass #vv-scan-bg [id^="vv-pane-"].is-collapsed > .vv-picked-bar { border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.86); }
html.vv-sky-live.vv-sky-glass .vv-picked-bar b { color: #FFFFFF; }
html.vv-sky-live.vv-sky-glass .vv-picked-bar .vv-picked-k { color: rgba(255,255,255,.72); }
/* ═══ конец блока 1–2 ═══ */

/* 3. Время приёма в дневнике — кнопка «13:50 · изменить» (тот же лист, что в сводке дня). */
.vv-dg-time-btn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 10px;
  border: 1px solid var(--line-soft, #F0EEE6); border-radius: 999px; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--ink-2, #3F3B33); cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.vv-dg-time-btn svg { width: 13px; height: 13px; flex: none; color: var(--ink-3, #756C5D); }
.vv-dg-time-btn b { font-weight: 700; color: var(--ink, #161A13); font-variant-numeric: tabular-nums; }
.vv-dg-time-btn span { color: var(--vv-green-dark, #2E7D32); font-weight: 600; }
.vv-dg-time-btn:active { opacity: .7; }
.vv-dg-row-time { padding: 2px 0 6px; }
.vv-dg-ask .vv-dg-row-time { padding: 6px 0 2px; }
.vv-extra-block .wkb-food-meal-right { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vv-hs-meal { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; font-size: 12px; font-weight: 700; color: var(--ink-3, #756C5D); text-transform: uppercase; letter-spacing: .05em; }
.vv-hs-meal .vv-dg-time-btn { text-transform: none; letter-spacing: 0; font-weight: 500; }
html.vv-sky-live.vv-sky-glass .vv-dg-time-btn { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.86); }
html.vv-sky-live.vv-sky-glass .vv-dg-time-btn b { color: #FFFFFF; }
html.vv-sky-live.vv-sky-glass .vv-dg-time-btn svg { color: rgba(255,255,255,.72); }
html.vv-sky-live.vv-sky-glass .vv-dg-time-btn span { color: #8DF3C4; }
html.vv-sky-live.vv-sky-glass .vv-hs-meal { color: rgba(255,255,255,.72); }
/* ═══ конец блока 3 ═══ */

/* 4. Баланс по дням в «Питание сегодня»: съел / покой / активность, период 7·14·30. */
.vv-bal-days { margin: 10px 0 12px; }
.vv-bal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vv-bal-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--wh-card-2, rgba(0,0,0,.05)); }
.vv-bal-seg-b { min-height: 32px; min-width: 52px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--wh-ink-3, var(--ink-3)); cursor: pointer; }
.vv-bal-seg-b.is-on { background: var(--wh-card, var(--card, #fff)); color: var(--wh-ink, var(--ink)); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.vv-bal-chart { display: flex; align-items: stretch; gap: 3px; margin: 12px 0 6px; }
.vv-bal-n30 { gap: 1px; }
.vv-bal-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.vv-bal-col.is-empty { cursor: default; }
.vv-bal-bars { position: relative; height: 96px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 1px; border-radius: 6px; }
.vv-bal-col.is-on .vv-bal-bars { background: var(--wh-card-2, rgba(0,0,0,.05)); }
.vv-bal-eat, .vv-bal-burn { display: block; width: 42%; max-width: 12px; border-radius: 3px 3px 1px 1px; }
.vv-bal-eat { background: var(--wh-green, #1E9E59); }
/* Покой — нейтральным серым: в бренде нет синего (--wh-blue и --wh-teal — тоже зелёные), а три зелёных не различить. */
.vv-bal-burn { position: relative; overflow: hidden; background: var(--wh-ink-3, #8E8A82); }
.vv-bal-act { position: absolute; left: 0; right: 0; top: 0; display: block; background: var(--wh-yellow, #FA5F0A); }
.vv-bal-burn.is-est::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.34) 0 3px, rgba(255,255,255,0) 3px 6px); }
.vv-bal-none { display: block; width: 60%; max-width: 14px; height: 2px; border-radius: 1px; background: var(--wh-line, rgba(0,0,0,.12)); }
.vv-bal-diff { font-size: 10.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wh-ink-3, var(--ink-3)); letter-spacing: -.02em; }
/* Плюс и минус — без «хорошо/плохо» цветом: дефицит хорош для похудения и плох для набора, цель у всех своя. */
.vv-bal-diff.is-plus, .vv-bal-diff.is-minus { color: var(--wh-ink-2, var(--ink-2)); }
.vv-bal-lab { min-height: 14px; font-size: 11px; text-align: center; color: var(--wh-ink-3, var(--ink-3)); white-space: nowrap; }
.vv-bal-col.is-today .vv-bal-lab { font-weight: 800; color: var(--wh-ink, var(--ink)); }
.vv-bal-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--wh-ink-3, var(--ink-3)); }
.vv-bal-keys span { display: inline-flex; align-items: center; gap: 5px; }
.vv-bal-keys i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.vv-bal-k-eat { background: var(--wh-green, #1E9E59); }
.vv-bal-k-rest { background: var(--wh-ink-3, #8E8A82); }
.vv-bal-k-act { background: var(--wh-yellow, #FA5F0A); }
.vv-bal-pick { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--wh-ink-2, var(--ink-2)); }
.vv-bal-pick b { color: var(--wh-ink, var(--ink)); }
.vv-bal-pick .is-plus, .vv-bal-pick .is-minus { font-weight: 700; }
.vv-bal-est { display: block; font-size: 11.5px; color: var(--wh-ink-3, var(--ink-3)); }
.vv-bal-sum { margin-top: 6px; font-size: 12px; color: var(--wh-ink-3, var(--ink-3)); }
html.vv-sky-live.vv-sky-glass .vv-bal-seg { background: rgba(255,255,255,.08); }
html.vv-sky-live.vv-sky-glass .vv-bal-seg-b { color: rgba(255,255,255,.72); }
html.vv-sky-live.vv-sky-glass .vv-bal-seg-b.is-on { background: rgba(255,255,255,.18); color: #FFFFFF; box-shadow: none; }
html.vv-sky-live.vv-sky-glass .vv-bal-col.is-on .vv-bal-bars { background: rgba(255,255,255,.08); }
html.vv-sky-live.vv-sky-glass .vv-bal-lab, html.vv-sky-live.vv-sky-glass .vv-bal-keys, html.vv-sky-live.vv-sky-glass .vv-bal-sum, html.vv-sky-live.vv-sky-glass .vv-bal-est, html.vv-sky-live.vv-sky-glass .vv-bal-diff { color: rgba(255,255,255,.72); }
html.vv-sky-live.vv-sky-glass .vv-bal-pick { color: rgba(255,255,255,.86); }
html.vv-sky-live.vv-sky-glass .vv-bal-pick b, html.vv-sky-live.vv-sky-glass .vv-bal-col.is-today .vv-bal-lab { color: #FFFFFF; }
html.vv-sky-live.vv-sky-glass .vv-bal-diff.is-minus, html.vv-sky-live.vv-sky-glass .vv-bal-diff.is-plus { color: rgba(255,255,255,.86); }
html.vv-sky-live.vv-sky-glass .vv-bal-pick .is-plus, html.vv-sky-live.vv-sky-glass .vv-bal-pick .is-minus { color: #FFFFFF; }
html.vv-sky-live.vv-sky-glass .vv-bal-none { background: rgba(255,255,255,.22); }
/* ═══ конец блока 4 ═══ */

/* 5. «Хочешь поменять словами? … В чат» — тот же перелив, что у круглой кнопки ИИ в нижней панели.
   Цвета — переменные --vv-ai-grad / --vv-ai-wheel (объявлены у .nav2-ai, светлая тема — там же),
   движение — те же @keyframes vvAiFlow и vvAiSpin. Своих цветов здесь нет. */
#screen-cart .vv-cart-chat-hint {
  border: 1.5px solid transparent !important;
  /* Тинт ночью полупрозрачный — под ним непрозрачная карточка, иначе перелив рамки залил бы всю плашку. */
  background: linear-gradient(var(--vv-green-tint, #E7F6EC), var(--vv-green-tint, #E7F6EC)) padding-box,
              linear-gradient(var(--card, #FFFFFF), var(--card, #FFFFFF)) padding-box,
              var(--vv-ai-grad) border-box !important;
  background-size: 100% 100%, 100% 100%, 200% 200% !important;
  animation: vvAiFlow 4.5s ease-in-out infinite;
}
#screen-cart .vv-cart-chat-ic {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--vv-ai-grad) !important; background-size: 200% 200% !important;
  color: #FFFFFF !important; animation: vvAiFlow 4.5s ease-in-out infinite;
  box-shadow: 0 2px 10px -2px rgba(80, 60, 200, .45);
}
#screen-cart .vv-cart-chat-ic::after {
  content: ''; position: absolute; inset: -70%; z-index: -1; pointer-events: none;
  background: var(--vv-ai-wheel); filter: blur(6px);
  animation: vvAiSpin 6s linear infinite; will-change: transform;
}
#screen-cart .vv-cart-chat-ic svg { position: relative; z-index: 1; }
body #screen-cart .vv-cart-chat-btn,
html.vv-sky-live.vv-sky-glass body #screen-cart .vv-cart-chat-btn {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--vv-ai-grad) !important; background-size: 200% 200% !important;
  color: #FFFFFF !important; border: 0 !important;
  animation: vvAiFlow 4.5s ease-in-out infinite;
  box-shadow: 0 4px 12px -4px rgba(80, 60, 200, .5) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
/* Небо: стекло подсказки остаётся, рамка переливается. Селектор с body — тяжелее правила неба выше. */
html.vv-sky-live.vv-sky-glass body #screen-cart .vv-cart-chat-hint {
  background: linear-gradient(rgba(10,16,24,.86), rgba(10,16,24,.86)) padding-box,
              var(--vv-ai-grad) border-box !important;
  background-size: 100% 100%, 200% 200% !important;
  border: 1.5px solid transparent !important;
}
@media (prefers-reduced-motion: reduce) {
  #screen-cart .vv-cart-chat-hint, #screen-cart .vv-cart-chat-ic,
  body #screen-cart .vv-cart-chat-btn, html.vv-sky-live.vv-sky-glass body #screen-cart .vv-cart-chat-btn { animation: none; }
  #screen-cart .vv-cart-chat-ic::after { animation: none; }
}
/* ═══ конец блока 5 ═══ */

/* 6. «Моё»: свои записи, частые сверху; строка «Уже ел это?» под рамкой снимка. */
.vv-mine-noimg { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-xs, 8px); background: var(--bg-warm, #F7F0E4); color: var(--ink-3, #756C5D); }
.vv-mine-noimg svg { width: 20px; height: 20px; }
.vv-scan-found .vv-mine-noimg { width: 52px; height: 52px; }
.vv-mine-strip { margin: 12px 0 0; }
.vv-mine-strip[hidden], .vv-ph-drop.has-photo ~ .vv-mine-strip { display: none !important; }
.vv-mine-strip-h { margin: 0 2px 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2, #3F3B33); }
.vv-mine-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vv-mine-chips::-webkit-scrollbar { display: none; }
.vv-mine-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; max-width: 210px; min-height: 44px;
  padding: 5px 12px 5px 5px; border: 1px solid var(--line-soft, #F0EEE6); border-radius: 999px;
  background: var(--paper, #FFFFFF); font: inherit; font-size: 13px; color: var(--ink, #161A13); cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.vv-mine-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vv-mine-chip-img, .vv-mine-chip .vv-mine-noimg { flex: none; width: 32px !important; height: 32px !important; border-radius: 50% !important; object-fit: cover; }
.vv-mine-chip .vv-mine-noimg svg { width: 15px; height: 15px; }
.vv-mine-chip-all { padding: 5px 14px; font-weight: 700; color: var(--vv-green-dark, #2E7D32); }
.vv-mine-chip:active { opacity: .7; }
html.vv-sky-live.vv-sky-glass .vv-mine-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #FFFFFF; }
html.vv-sky-live.vv-sky-glass .vv-mine-chip-all { color: #8DF3C4; }
html.vv-sky-live.vv-sky-glass .vv-mine-strip-h { color: rgba(255,255,255,.86); }
html.vv-sky-live.vv-sky-glass .vv-mine-noimg { background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); }
/* ═══ конец блока 6 ═══ */

/* ── Баланс по дням: столбик без разбивки (правка после оценки 23.09). У WHOOP полный расход бывает меньше
   обмена покоя — разбить нельзя; такой столбик не «покой», а весь расход: полосы покоя и активности вперемешку. */
.vv-bal-burn.is-total { background: repeating-linear-gradient(0deg, var(--wh-yellow, #FA5F0A) 0 3px, var(--wh-ink-3, #8E8A82) 3px 6px); }
.vv-bal-k-total { background: repeating-linear-gradient(0deg, var(--wh-yellow, #FA5F0A) 0 2px, var(--wh-ink-3, #8E8A82) 2px 4px); }

/* ── «Ужин и сон» (VVELL-1078, 23.09.2026): блок в разборе «Сон» и строка в дневнике вечером.
   Только токены — светлая, ночная тема и «небо» перекрашивают их сами. ── */
.vv-lm-block .vv-lm-p { font-size: 14px; line-height: 1.45; color: var(--ink); margin: 8px 0 0; }
.vv-lm-block .vv-lm-night { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-warm); border: 1px solid var(--line-soft); }
.vv-lm-block .vv-lm-night svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--ink-3); }
.vv-lm-block .vv-lm-night.is-late svg { color: var(--vv-clay); }
.vv-lm-block .vv-lm-note { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); margin-top: 10px; }
/* правка после оценки: от 5 / 5 — все три показателя списком, ничего не выбирая */
.vv-lm-block .vv-lm-list { margin: 6px 0 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.vv-lm-block .vv-lm-list li { margin: 2px 0; }
.vv-lm-block .vv-lm-foot { color: var(--ink-2); font-size: 13px; }
.vv-lm-line { display: flex; gap: 10px; align-items: flex-start; margin: -4px 0 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--bg-warm); border: 1px solid var(--line-soft); color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.vv-lm-line-ic { flex: 0 0 auto; display: inline-flex; }
.vv-lm-line-ic svg { width: 18px; height: 18px; color: var(--vv-blue); }
.vv-lm-fix { border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--vv-green-dark);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ── «Выбери 2 привычки» на главной (VVELL-1085, 23.09.2026) — только у человека без единой привычки ── */
.wh-myday-card.vv-hsg { margin-top: 10px; padding: 14px 14px 10px; }
.vv-hsg-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--ink); }
.vv-hsg-h svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--vv-green-dark); }
.vv-hsg-s { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 10px; line-height: 1.4; }
.vv-hsg-list { display: flex; flex-direction: column; gap: 8px; }
.vv-hsg-b { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; text-align: left; padding: 10px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.vv-hsg-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vv-hsg-t { font-weight: 700; font-size: 14px; line-height: 1.3; }
.vv-hsg-m { font-size: 12px; color: var(--ink-3); }
.vv-hsg-plus { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-warm); border: 1px solid var(--line); color: var(--ink-2); }
.vv-hsg-plus svg { width: 16px; height: 16px; }
.vv-hsg-b.is-on { border-color: var(--vv-green); }
.vv-hsg-b.is-on .vv-hsg-plus { background: var(--vv-green); border-color: var(--vv-green); color: #fff; }
.vv-hsg-b.is-busy { opacity: .6; }
.vv-hsg-more { margin-top: 10px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.vv-hsg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vv-hsg-later { margin-top: 10px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px;
  color: var(--ink-3); cursor: pointer; min-height: 32px; }
.vv-hsg-more svg { width: 14px; height: 14px; transform: rotate(-90deg); }

/* VVELL-1153 (29.09.2026): сетка энергии в ПОЛНОЭКРАННОМ утреннем листе. Общие правила .vv-sheet-full .vv-feel-list
   растягивают список на всю высоту (flex: 1) и заливают его затемнением в теме «небо» — у сетки из десяти кнопок
   получалась пустая тёмная панель на весь экран. Сетка — по размеру содержимого, без заливки; кнопки внизу, как у привычек. */
.vv-sheet-full .vv-feel-list.vv-feel-grid { flex: 0 0 auto; overflow: visible; align-content: start; padding-top: 8px; }
html.vv-sky-live.vv-sky-glass .vv-sheet-full .vv-feel-list.vv-feel-grid { background: none; }
.vv-sheet-full .vv-feel-actions { margin-top: auto; padding-bottom: 16px; }

/* ═══ Энергия словами во втором шаге утреннего листа (VVELL-1235, 05.10.2026) — вместо ползунка VVELL-1191 ═══════════════
   Пять строк `.vv-feel-btn` — те же, что у первого вопроса, но без подсказки второй строкой. Цвета и «небо» они берут у
   первого вопроса (правила выше), своих токенов нет; ночь — см. ниже. Середина листа `.vv-feel-mid` — список и поле веса по центру; прокручивается
   внутри себя, если экран низкий (360×640 в день замера веса), а «Готово» и «Пропустить» остаются внизу на месте.
   ⚠ Общее правило `.vv-sheet-full .vv-feel-list` растягивает список на весь экран и в «небе» заливает его затемнением — это для
   пяти строк первого вопроса; у списка внутри `.vv-feel-mid` свой размер и без заливки. */
.vv-feel-mid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.vv-feel-mid > :first-child { margin-top: auto; }
.vv-feel-mid > :last-child { margin-bottom: auto; }
.vv-sheet-full .vv-feel-list.vv-feel-words { flex: 0 0 auto; overflow: visible; padding-bottom: 4px; }
html.vv-sky-live.vv-sky-glass .vv-sheet-full .vv-feel-list.vv-feel-words { background: none; }
.vv-feel-words .vv-feel-btn { -webkit-tap-highlight-color: transparent; align-items: center; }   /* одна строка текста — по центру высоты, а не у верхнего края */
/* ⚠ НОЧЬ. У `.vv-feel-btn` фон был `var(--vv-card, #fff)`, а токена `--vv-card` в проекте нет, — ночью строки (первого вопроса тоже) были БЕЛЫМИ с песочным
   текстом и не читались. Ночные значения — числами (правило DESIGN_CODE): поверхность #1C2721, линия #2C3A32, текст #EDE5D6, мята #3FC08B — из ночной
   палитры. «Небо» эти правила перебивает своими (`html.vv-sky-live.vv-sky-glass .vv-feel-btn`, !important). */
.vv-theme-night .vv-feel-btn { background: #1C2721; border-color: #2C3A32; color: #EDE5D6; }
@media (hover: hover) and (pointer: fine) { .vv-theme-night .vv-feel-btn:hover { border-color: #3FC08B; } }
.vv-theme-night .vv-feel-btn.is-on { background: rgba(63, 192, 139, .16); border-color: #3FC08B; }
@media (max-height: 700px) {
  .vv-sheet-full .vv-feel-list.vv-feel-words { gap: 8px; }
  .vv-sheet-full .vv-feel-words .vv-feel-btn { min-height: 54px; }
}
/* Заголовок получает фокус сам (чтение с экрана), рамка вокруг него не нужна */
.vv-feel-card .vv-sheet-title:focus { outline: none; }
/* «Готово» в дни веса, пока записывать нечего: бледная, но живая — касание отвечает подсказкой (кнопка не «мёртвая») */
.vv-feel-card .vv-feel-done.is-off { opacity: .45; box-shadow: none !important; }
html.vv-sky-live.vv-sky-glass .vv-feel-card .vv-feel-done.is-off { opacity: .45; box-shadow: none !important; }
/* Подсказка в поле веса — ПРОШЛЫЙ замер («77,4»), а не вписанное значение. Под небом она была почти белой и читалась
   как уже введённый вес: человек жал «Готово», и замер для цели «Вес» молча не записывался. */
html.vv-sky-live.vv-sky-glass .vv-feel-card .vv-scan-input::placeholder { color: rgba(255, 255, 255, .38) !important; opacity: 1; }

/* ═══ «Добавить необязательное» — переключатель наверху корзины (VVELL-1189, 30.09.2026) ═════════════════════════
   Переехал из капсулы над «Оформить» (VVELL-1162, её стили стояли здесь) в шапку экрана — под ряд «Моя корзина /
   На семью», — и смысл перевёрнут: выключен — необязательного в корзине нет, включён — оно в корзине, сумме и заказе.
   Поверхность и скругление — как у строки «Настройки» (.cfgv2: --dv2-surface, --dv2-border-soft, --r-lg), ползунок —
   как в iOS, справа; вся строка — одна цель касания 48 px (норма iOS ≥ 44). Под небом — мятный акцент, как у
   «Моя корзина» и главных кнопок; днём и ночью — токены темы. */
#screen-cart .vv-opt-top {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 48px; box-sizing: border-box;
  margin: 12px 0 -10px; padding: 6px 8px 6px 18px;   /* −10: до «Настроек» 20 px, а не 30 (низ шапки 12 + 18); 18 — текст в линию с «Настройками» */
  border-radius: var(--r-lg, 24px); border: 1px solid var(--dv2-border-soft, rgba(17, 24, 39, .07));
  background: var(--dv2-surface, #fff); color: var(--dv2-text, #1c2b2b);
  box-shadow: 0 1px 3px rgba(17, 24, 39, .04);
  font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .1s ease;
}
#screen-cart .vv-opt-top:active { transform: scale(.985); }
#screen-cart .vv-opt-top:focus-visible { outline: 2px solid var(--vv-green); outline-offset: 2px; }
/* подпись не режется «…»: на 360 px при сумме в тысячи она встаёт в две строки, строка остаётся 48 px */
#screen-cart .vv-opt-top-t { flex: 1 1 auto; min-width: 0; }
#screen-cart .vv-opt-top-v { flex: 0 0 auto; font-weight: 800; white-space: nowrap; color: var(--vv-green, #1E9E59); }
#screen-cart .vv-opt-top-sw {
  position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px;
  background: rgba(120, 120, 128, .32); transition: background .2s ease;
}
#screen-cart .vv-opt-top-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s ease;
}
#screen-cart .vv-opt-top.is-on .vv-opt-top-sw { background: var(--vv-green, #1E9E59); }
#screen-cart .vv-opt-top.is-on .vv-opt-top-sw::after { transform: translateX(18px); }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-opt-top-v { color: #8DF3C4; }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-opt-top-sw { background: rgba(255, 255, 255, .18); }
html.vv-sky-live.vv-sky-glass #screen-cart .vv-opt-top.is-on .vv-opt-top-sw { background: linear-gradient(135deg, #7FE9BC, #4FD39A); }
@media (prefers-reduced-motion: reduce) {
  #screen-cart .vv-opt-top, #screen-cart .vv-opt-top-sw, #screen-cart .vv-opt-top-sw::after { transition: none; }
}

/* ── Игра · «рамка у имени» (топ-10 месяца), 02.10.2026 ── */
/* У рамки свой светлый (кремовый) фон — значит, и текст в ней свой, тёмный. Без этого ночью и в «небе» белое имя
   пропадало на кремовом (скриншот владельца 02.10: строки 1–6 «Лиги» без имён). Ночь и «небо» красят текст игры
   через !important, поэтому и здесь !important — только внутри рамки. */
.vg-name.has-frame { color: #3A2A08; }
.vg-name.has-frame .vg-muted { color: #6E5524; }
html.vv-theme-night .vg-name.has-frame,
html.vv-sky-live.vv-sky-glass .vg-name.has-frame { color: #3A2A08 !important; }
html.vv-theme-night .vg-name.has-frame .vg-muted,
html.vv-sky-live.vv-sky-glass .vg-name.has-frame .vg-muted { color: #6E5524 !important; }
/* Ночная тема БЕЗ «неба»: --surface объявлен только для «неба» (стекло), поэтому карточки игры брали запасной #fff —
   белая карточка со светлым ночным текстом (найдено при проверке 02.10). Берём ночной --card. В «небе» --surface
   объявлен и выигрывает — там ничего не меняется; днём правило не действует. */
html.vv-theme-night .vg-hero,
html.vv-theme-night .vg-card,
html.vv-theme-night .vg-unlock-card,
html.vv-theme-night .vg-sheet-body input { background: var(--surface, var(--card)); }
html.vv-theme-night .vg-ch.is-in { background: color-mix(in srgb, var(--surface, var(--card)) 86%, #FFE47A); }
html.vv-theme-night .vg-goal.is-done { background: linear-gradient(180deg, color-mix(in srgb, var(--surface, var(--card)) 86%, #9BD3AE), var(--surface, var(--card))); }
/* ── /рамка у имени ── */

/* ── Игра · контраст ночью и в «небе», вторая правка 02.10.2026 ── */
/* 1. Значок аватарки: цвет задаёт сама аватарка (vv_game.js aviInk — по светлоте её фона), тема не перекрашивает. */
.vg-ava-ic > svg { color: inherit !important; }
/* 2. «Небо»: метки «выполнена / победа / поражение / сорвалась» — своя светлая заливка, а «.vg-card span { color: inherit }»
   красил их текст в белый карточки. Даём стекло в духе «неба». */
html.vv-sky-live.vv-sky-glass .vg-chip-ok { background: rgba(141,243,196,.18) !important; color: #8DF3C4 !important; }
html.vv-sky-live.vv-sky-glass .vg-chip-bad { background: rgba(255,138,122,.20) !important; color: #FFB4A8 !important; }
/* 3. «Небо»: «Зона суперзначка» — белый текст был на светло-мятной заливке; как у недельной плашки — тёмное стекло. */
html.vv-sky-live.vv-sky-glass .vg-zone:not(.vg-zone-week) { background: rgba(10,16,24,.55) !important; border: 1px solid rgba(255,255,255,.14) !important; }
/* 4. Ночь без «неба»: своя строка таблицы брала светлый запасной --accent-soft (#D9EBE0) под светлым текстом. */
html.vv-theme-night:not(.vv-sky-glass) .vg-row.is-me { background: rgba(141,243,196,.13); }
/* 5. «Дней серии»: подпись серым на светло-оранжевом (ночью 3,1) — в тон цифре. В «небе» его правило сильнее. */
.vg-cal-stat.is-on span { color: #8A4A1E; }
/* ── /контраст ночью и в «небе» ── */

/* ── Игра · фон аватарки через --ava (02.10.2026) ── */
/* Цвет аватарки приходит переменной --ava (не «background:#…» во встроенном стиле): ночное правило design_v2.css
   [style*="background:#FFF"] по подстроке красило светло-жёлтые аватарки в --paper, и значок пропадал. */
.vg-ava-ic { background: var(--ava, #E6F4E6); }
/* ── /фон аватарки ── */

/* ═══ ИГРА, ЭТАП 1 (11.10.2026, VV_GAME_STAGE1): «Три первых дня», лесенка серии, знаки ачивок ═══
   Рисуется только когда сервер прислал `stage1` в /api/game/me; выключено — этих блоков в разметке нет. Цвета знаков — свои
   (плашка у каждого знака своя), поэтому день/ночь/«небо» им не мешают; тексты — на переменных карточки `.vg-card`. */
#screen-game .vg-start-row { display: flex; align-items: flex-start; gap: 0; margin: 10px 0 8px; }
#screen-game .vg-start-st { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
#screen-game .vg-start-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800;
  background: var(--line-soft, rgba(0,0,0,.08)); color: var(--ink-3, #6B7A72); border: 2px solid transparent; }
#screen-game .vg-start-dot svg { width: 18px; height: 18px; }
#screen-game .vg-start-t { font-size: 12px; font-weight: 700; color: var(--ink-3, #6B7A72); line-height: 1.2; }
#screen-game .vg-start-st.is-done .vg-start-dot { background: var(--vv-green, #2E7D52); color: #fff; }
#screen-game .vg-start-st.is-done .vg-start-t { color: var(--ink, #22302A); }
#screen-game .vg-start-st.is-next .vg-start-dot { background: transparent; color: var(--vv-green, #2E7D52); border-color: var(--vv-green, #2E7D52); animation: vg-start-pulse 2.2s ease-in-out infinite; }
#screen-game .vg-start-st.is-next .vg-start-t { color: var(--ink, #22302A); }
#screen-game .vg-start-line { flex: 0 0 18px; height: 2px; margin-top: 16px; border-radius: 2px; background: var(--line, rgba(0,0,0,.14)); }
#screen-game .vg-start-line.is-done { background: var(--vv-green, #2E7D52); }
#screen-game .vg-start-hint { font-size: 13px; color: var(--ink-2, var(--ink)); line-height: 1.35; }
#screen-game .vg-start-hint.is-done { color: var(--vv-green-dark, #1F6B45); font-weight: 700; }
@keyframes vg-start-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(46,125,82,.35); } 50% { box-shadow: 0 0 0 6px rgba(46,125,82,0); } }
#screen-game .vg-lad-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 10px 0 6px; }
#screen-game .vg-lad-st { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; -webkit-tap-highlight-color: transparent; }
#screen-game .vg-lad-ic { display: block; width: 100%; max-width: 44px; aspect-ratio: 1; border-radius: 50%; }
#screen-game .vg-lad-ic svg { width: 100%; height: 100%; display: block; }
#screen-game .vg-lad-st b { font-size: 12px; font-weight: 800; color: var(--ink, #22302A); }
#screen-game .vg-lad-st.is-off .vg-lad-ic svg { filter: grayscale(1); opacity: .38; }
#screen-game .vg-lad-st.is-off b { color: var(--ink-3, #6B7A72); font-weight: 700; }
#screen-game .vg-lad-st.is-next .vg-lad-ic { outline: 2px dashed var(--vv-green, #2E7D52); outline-offset: 2px; }
#screen-game .vg-lad-st.is-next .vg-lad-ic svg { filter: grayscale(.55); opacity: .75; }
#screen-game .vg-lad-st.is-on .vg-lad-ic { box-shadow: 0 3px 8px rgba(0,0,0,.16); }
#screen-game .vg-lad-cap { font-size: 12.5px; }
#screen-game .vg-ach-ttl { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
#screen-game .vg-ach-ic { flex: none; width: 34px; height: 34px; display: block; border-radius: 50%; }
#screen-game .vg-ach-ic svg { width: 100%; height: 100%; display: block; }
#screen-game .vg-ach-ic.is-off svg { filter: grayscale(1); opacity: .42; }
#screen-game .vg-ach-row.is-hidden .vg-ach-top b { color: var(--ink-3, #6B7A72); }
@media (prefers-reduced-motion: reduce) { #screen-game .vg-start-st.is-next .vg-start-dot { animation: none; } }

/* ═══ ИГРА, ЭТАП 2 «15 ЛИГ» (12.10.2026, VV_GAME_STAGE2): вкладка «Лига», лестница, значок у имени, «Моя неделя», окно повышения ═══
   Рисуется только когда сервер прислал `league` в /api/game/me; выключено — этих блоков в разметке нет. Значки рисует модуль
   static/js/vv_leagues.js (грузится лениво); здесь только раскладка. Цвета текста — переменные карточки `.vg-card` (день, ночь, «небо»). */
html.vv-theme-night, html.vv-sky-glass:not(.vv-sky-light) { --lg-halo: rgba(255,255,255,.16); --lg-glow: .42; --lg-shadow: .35; }
#screen-game .vl-hero { display: flex; align-items: center; gap: 14px; }
#screen-game .vl-hero-ic { flex: none; width: 92px; display: grid; place-items: center; }
#screen-game .vl-hero-ic svg { display: block; width: 92px; height: 110px; }
#screen-game .vl-hero-ic.is-dim svg { opacity: .55; filter: grayscale(.6); }
#screen-game .vl-hero-body { min-width: 0; }
#screen-game .vl-hero-t { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; }
#screen-game .vl-hero-s { font-size: 13.5px; line-height: 1.4; color: var(--ink-2, var(--ink)); margin-top: 4px; }
#screen-game .vl-hero-peak { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
#screen-game .vl-hero-peak svg { width: 16px; height: 19px; flex: none; }
#screen-game .vl-path-t { font-size: 15px; font-weight: 700; line-height: 1.35; }
#screen-game .vl-path.is-met .vl-path-t { color: var(--vv-green-dark, #1F6B45); }
#screen-game .vl-bars { display: grid; gap: 8px; margin: 12px 0 6px; }
#screen-game .vl-bar { height: 10px; border-radius: 6px; background: var(--line-soft, rgba(0,0,0,.08)); overflow: hidden; }
#screen-game .vl-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--vv-green-dark, #159145), #7BD389); transition: width .5s cubic-bezier(.2,.7,.2,1); }
#screen-game .vl-dots { display: flex; gap: 6px; }
#screen-game .vl-dots i { flex: 1 1 0; max-width: 30px; height: 8px; border-radius: 4px; background: var(--line-soft, rgba(0,0,0,.08)); }
#screen-game .vl-dots i.is-on { background: var(--vv-green-dark, #159145); }
#screen-game .vl-path-meta { font-size: 12.5px; color: var(--ink-3); }
#screen-game .vl-path-fast, #screen-game .vl-path-fc { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-2, var(--ink)); }
#screen-game .vl-quiet { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--vv-green, #2E7D52) 11%, transparent); color: var(--ink-2, var(--ink)); font-size: 13.5px; line-height: 1.4; }
#screen-game .vl-lad-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; margin: 10px 0 12px; }
#screen-game .vl-lad-st { appearance: none; border: 0; background: none; padding: 6px 0 4px; margin: 0; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 2px; border-radius: 12px; -webkit-tap-highlight-color: transparent; min-width: 0; }
#screen-game .vl-lad-ic { position: relative; display: block; width: 40px; height: 48px; }
#screen-game .vl-lad-ic svg { display: block; width: 40px; height: 48px; }
#screen-game .vl-lad-n { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
#screen-game .vl-lad-st.is-far .vl-lad-ic svg { opacity: .66; filter: saturate(.5); }
#screen-game .vl-lad-st.is-cur { box-shadow: inset 0 0 0 2px var(--vv-green, #2E9E5B); background: color-mix(in srgb, var(--vv-green, #2E9E5B) 9%, transparent); }
#screen-game .vl-lad-st.is-sel { outline: 1px solid var(--ink, #22302A); outline-offset: 1px; }
#screen-game .vl-lad-st:focus-visible { outline: 2px solid var(--vv-green, #2E9E5B); outline-offset: 2px; }
#screen-game .vl-star { position: absolute; right: -6px; top: -4px; font-size: 13px; line-height: 1; color: #E5A100; text-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 1px rgba(0,0,0,.35); }
#screen-game .vl-pick { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg-warm, rgba(0,0,0,.04)); }
#screen-game .vl-pick-ic { flex: none; width: 72px; }
#screen-game .vl-pick-ic svg { display: block; width: 72px; height: 86px; }
#screen-game .vl-pick-body { min-width: 0; }
#screen-game .vl-pick-t { font-weight: 800; font-size: 16px; }
#screen-game .vl-pick-a { font-size: 13px; line-height: 1.45; color: var(--ink-2, var(--ink)); margin-top: 4px; }
#screen-game .vl-pick-nx { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); margin-top: 8px; }
#screen-game .vl-pick-nx b { color: var(--ink-2, var(--ink)); }
.vl-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap; vertical-align: middle; }
.vl-tag svg { display: block; width: 18px; height: 22px; flex: none; }
.vl-tag i { font-style: normal; }
@media (max-width: 359px) { .vl-tag i { display: none; } }
#screen-game .vl-nb.is-me .vg-name { font-weight: 800; }
#screen-game .vl-shadow-t { font-size: 14px; line-height: 1.4; color: var(--ink-2, var(--ink)); }
#screen-game .vl-shadow-d { font-size: 16px; font-weight: 800; margin-top: 6px; }
#screen-game .vl-shadow-d.is-up { color: var(--vv-green-dark, #1F6B45); }
#screen-game .vl-month { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft, rgba(0,0,0,.08)); }
#screen-game .vl-month:first-of-type { border-top: 0; }
#screen-game .vl-month-t { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
#screen-game .vl-seal { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed var(--vv-green, #2E7D52);
  background: color-mix(in srgb, var(--vv-green, #2E7D52) 10%, transparent); transform: rotate(-8deg); }
#screen-game .vl-seal svg { display: block; width: 28px; height: 34px; }
#screen-game .vl-rules-l { margin: 8px 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2, var(--ink)); }
#screen-game .vl-wk-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; width: 100%; text-align: left; }
#screen-game button.vl-wk-row { appearance: none; border: 0; border-top: 1px solid var(--line-soft, rgba(0,0,0,.08)); background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#screen-game .vl-wk-ic { flex: none; width: 34px; display: grid; place-items: center; }
#screen-game .vl-wk-ic svg { display: block; width: 30px; height: 36px; }
#screen-game .vl-wk-row:first-of-type .vl-wk-ic svg { width: 24px; height: 24px; }
#screen-game .vl-wk-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
#screen-game .vl-wk-body b { font-size: 14px; }
#screen-game .vl-wk-body .vl-bar { margin-top: 6px; }
#screen-game .vl-wk-go { flex: none; font-size: 22px; line-height: 1; color: var(--ink-3); }
/* окно повышения: оболочка `.vg-unlock` (затемнение, лучи, карточка), внутри — анимация из vv_leagues.js */
.vl-promo { --vl-ink: var(--ink, #22302A); --vl-ink2: var(--ink-2, #4A5A52); --vl-accent: var(--vv-green-dark, #177652); }
.vl-promo-card { padding: 14px 16px 20px; overflow: visible; }
.vl-promo-host { margin: 0 auto 6px; }
.vl-promo-extra { display: grid; gap: 4px; margin: 6px 0 16px; }
.vl-promo-line { font-size: 13.5px; line-height: 1.4; color: var(--ink-2, var(--ink)); }
.vl-promo-line.is-ach { font-weight: 700; color: var(--ink, #22302A); }
@media (prefers-reduced-motion: reduce) { #screen-game .vl-bar i { transition: none; } }
/* «Небо» (тёмное стекло) и ночь: плашки внутри карточек чуть светлее фона карточки */
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) .vl-pick { background: rgba(255,255,255,.07); }
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) .vl-bar,
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) .vl-dots i { background: rgba(255,255,255,.14); }
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) .vl-dots i.is-on { background: #7FE9BC; }
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) .vl-bar i { background: linear-gradient(90deg, #4FD39A, #7FE9BC); }
html.vv-theme-night:not(.vv-sky-glass) .vl-pick { background: rgba(255,255,255,.06); }
/* ── /ИГРА, ЭТАП 2 ── */