/* ============================================================
   Design V2.2B — Visual polish to match Compose/APK reference.
   Loaded ONLY on /vv012dias1okdapwiq-design (after app.css).

   Changes vs V2.2:
   - Serif font for greeting (Noto Serif)
   - Aurora gradient ring on VV logo
   - White plan card (not green tint)
   - Floating pill bottom nav
   - "Why in plan" block in meal card
   - Bigger goal chips, better spacing
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --vv-green:        #2DBE64;
  --vv-green-dark:   #159145;
  --vv-green-soft:   #52F79B;
  --vv-green-tint:   #E7F7E9;
  --vv-green-tint-2: #EAF9EE;
  --vv-berry:        #D7144B;
  --vv-yellow:       #FFD508;
  --vv-orange:       #FA5F0A;

  --ink:        #10170F;
  --ink-2:      #3F3B33;
  --ink-3:      #756C5D;
  --ink-4:      #9A927F;
  --line:       #E8E1D4;
  --line-soft:  #EDE7DA;
  --paper:      #FFFFFF;
  --bg:         #FFF9EF;
  --bg-warm:    #F7F0E4;
  --card:       #FFFFFF;

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body:    'Manrope', -apple-system, system-ui, sans-serif;
  --font-serif:   'Noto Serif', Georgia, 'Times New Roman', serif;

  --fs-hero:    31px;
  --fs-title:   22px;
  --fs-body:    14px;
  --fs-section: 13px;
  --fs-cap:     11px;

  /* ЕДИНАЯ ШКАЛА СКРУГЛЕНИЙ (05.09.2026, владелец: «привести к единому дизайну») */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* Б: крупнее (05.09.2026) */

  --sh-1: 0 1px 3px rgba(20,14,0,.05);
  --sh-2: 0 6px 20px rgba(20,14,0,.07);
  --sh-3: 0 14px 40px rgba(20,14,0,.10);

  --ease: cubic-bezier(.2,.8,.2,1);

  /* ── Theme-aware aliases (day defaults) ── */
  --dv2-bg:         #FFF9EF;
  --dv2-surface:    #FFFFFF;
  --dv2-surface-2:  #F7F0E4;
  --dv2-text:       #10170F;
  --dv2-text-2:     #3F3B33;
  --dv2-muted:      #756C5D;
  --dv2-muted-2:    #9A927F;
  --dv2-border:     #E8E1D4;
  --dv2-border-soft:#EDE7DA;
  --dv2-green:      #2DBE64;
  --dv2-green-dark: #159145;
  --dv2-green-tint: #E7F7E9;
  --dv2-berry:      #D7144B;
  --dv2-yellow:     #FFD508;
  --dv2-chip-bg:    rgba(0,0,0,.04);
  --dv2-shadow:     0 1px 3px rgba(20,14,0,.05);
  --dv2-glass:      rgba(255,249,239,.88);
  --dv2-glass-nav:  rgba(255,249,239,.86);
  --dv2-icon-color: #596250;
  --dv2-ai-bubble:  #E7F7E9;
  --dv2-ai-border:  #CDEDD6;
  --dv2-status-col: #4C4A42;
  --dv2-btn-surface:rgba(255,255,255,.92);
  --dv2-kbju-macro: rgba(255,255,255,.65);
  --dv2-warn-bg:    #FFF5E6;
  --dv2-energy-bg:  #FFF0D5;
  --dv2-green-chip-text: #137C39;
  --dv2-meal-text:  #172017;
  --dv2-meal-sub:   #4F604C;
  --dv2-meal-meta:  #8A917D;
  --dv2-meal-time:  #5F584C;
  --dv2-meal-badge: #327247;
  --dv2-toggle-bg:  #F8F3EA;
  --dv2-toggle-text:#766B59;

  /* ── Typography preset: Б — Геометрический (05.09.2026, решение владельца,
     VVELL-650). Было A «Editorial Soft»: сериф Noto Serif в заголовках половины
     экранов (Дневник, Прогресс, Знания, Чат, Корзина, «Привет, Данил», словесный
     знак), а Настройки/Возраст/Анализы/Семья/Готовим уже шли гротеском
     Unbounded — два приложения в одном. Владелец выбрал Б: Unbounded везде,
     зелёное второе слово, пилюли-eyebrow, крупные радиусы. Все серифные места
     читают ЭТИ токены — менять здесь, а не по экранам. Unbounded широкий:
     31 px серифа ≈ 26 px гротеска по длине строки, вес 600 вместо 700. ── */
  --dv2-font-hero:    var(--font-display);
  --dv2-font-heading: var(--font-display);
  --dv2-font-ui:      var(--font-body);
  --dv2-hero-size:    26px;
  --dv2-hero-wt:      600;
  --dv2-hero-lh:      1.15;
  --dv2-hero-ls:      -0.02em;
  --dv2-h1-size:      23px;
  --dv2-h1-wt:        600;
  --dv2-h1-ls:        -0.02em;
  --dv2-section-size: 13px;
  --dv2-section-wt:   700;
  --dv2-card-size:    16px;
  --dv2-card-wt:      700;
  --dv2-body-size:    14px;
  --dv2-body-wt:      400;
  --dv2-meta-size:    11px;
  --dv2-meta-wt:      500;
  --dv2-btn-size:     14px;
  --dv2-btn-wt:       700;
  --dv2-chip-size:    12px;
  --dv2-chip-wt:      700;
}

/* ── Night theme ── */
.vv-theme-night {
  --bg:             #1F2228;
  --bg-warm:        #282C33;
  --paper:          #2A2D34;
  --card:           #2A2D34;
  --ink:            #F4F1EA;
  --ink-2:          #D8D4CC;
  --ink-3:          #B9B6AD;
  --ink-4:          #8E8A82;
  --line:           rgba(255,255,255,.10);
  --line-soft:      rgba(255,255,255,.07);
  --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);
  --dv2-glass:      rgba(31,34,40,.92);
  --dv2-glass-nav:  rgba(31,34,40,.92);
  --dv2-icon-color: #B9B6AD;
  --dv2-ai-bubble:  rgba(50,208,106,.12);
  --dv2-ai-border:  rgba(50,208,106,.20);
  --dv2-status-col: #B9B6AD;
  --dv2-btn-surface:rgba(42,45,52,.92);
  --dv2-kbju-macro: rgba(255,255,255,.08);
  --dv2-warn-bg:    rgba(241,201,74,.12);
  --dv2-energy-bg:  rgba(241,201,74,.15);
  --dv2-green-chip-text: #3FE07A;
  --dv2-meal-text:  #F4F1EA;
  --dv2-meal-sub:   #D8D4CC;
  --dv2-meal-meta:  #B9B6AD;
  --dv2-meal-time:  #B9B6AD;
  --dv2-meal-badge: #3FE07A;
  --dv2-toggle-bg:  #30343D;
  --dv2-toggle-text:#B9B6AD;
}


/* ─── BODY / APP SHELL ───────────────────────────────────── */
html, body {
  background: var(--bg) !important;
}
body {
  font-family: var(--font-body) !important;
}

.screen {
  padding-bottom: 130px !important;
}

/* ── Welcome hero — override Unbounded → serif preset ── */
#screen-welcome .h-hero {
  font-family: var(--dv2-font-hero) !important;
  font-size: var(--dv2-hero-size) !important;
  font-weight: var(--dv2-hero-wt) !important;
  line-height: var(--dv2-hero-lh) !important;
  letter-spacing: var(--dv2-hero-ls) !important;
}
#screen-welcome .h-hero em {
  font-style: normal !important;
  color: var(--vv-green) !important;
}


/* ═══════════════════════════════════════════════════════════
   HEADER — Aurora logo + serif brand
   ═══════════════════════════════════════════════════════════ */
header.app-header {
  background: var(--dv2-glass) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--line-soft) !important;
  padding: 14px 20px 16px !important;
}

/* Aurora ring around VV logo */
.brand-mark {
  width: 42px !important;
  height: 42px !important;
  font-size: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
/* ⚠ ШАРИК БОЛЬШЕ НЕ КРУТИТСЯ (05.09.2026, владелец: «крутящийся градиентный
   шарик с vv даёт приложению детскость — убрать или сделать по-другому»).
   Радужный conic-gradient с вращением снят; метка — спокойный тёмно-зелёный
   круг с тонким кольцом цвета фона, «vv» курсивом внутри. */
.brand-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dv2-green-dark, #159145);
  opacity: .16;
}
.brand-mark::after {
  content: 'vv';
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vv-green-dark);
  color: white;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.5px;
  line-height: 1;
}

@keyframes aurora-spin {   /* оставлено для старых ссылок; нигде не запускается */
  to { transform: rotate(360deg); }
}

/* Brand text — Unbounded (Б, 05.09.2026): серифный знак спорил с гротеском экранов */
.brand-text {
  font-family: var(--dv2-font-heading) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.brand-text .brand-ness {
  color: var(--vv-green) !important;
  /* «ness» курсивом — владелец 07.09.2026 (VVELL-740): «сверху VVellness сделать ness курсивом» */
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* Settings button — circle with border */
.pill-icon-btn.vv-settings-btn {
  border: 1px solid var(--line) !important;
  background: var(--dv2-btn-surface) !important;
  box-shadow: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  color: var(--dv2-icon-color) !important;
}
.pill-icon-btn.vv-settings-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--dv2-icon-color) !important;
}

/* Header actions container */
.vv-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Theme toggle button */
.vv-theme-toggle {
  border: 1px solid var(--line) !important;
  background: var(--dv2-btn-surface) !important;
  box-shadow: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  color: var(--dv2-icon-color) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transition: transform .2s var(--ease), background .2s !important;
  flex-shrink: 0 !important;
}
.vv-theme-toggle:active {
  transform: scale(.9) !important;
}


/* ═══════════════════════════════════════════════════════════
   DV2 — Compose TodayScreen components
   ═══════════════════════════════════════════════════════════ */

/* ── 1. STATUS LINE ── */
.dv2-status-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--dv2-status-col);
  letter-spacing: 0.12em;
  padding: 10px 0 16px;
  flex-wrap: wrap;
}
.dv2-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vv-green);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(45,190,100,.45);
}
.dv2-status-sep {
  color: var(--dv2-status-col);
  font-size: 11px;
  font-weight: 700;
  opacity: .65;
}
.dv2-status-streak {
  color: var(--vv-berry);
  font-weight: 800;
}


/* ── 2. GOAL CHIPS ── */
.dv2-goal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 14px;
}
.dv2-goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--dv2-meal-text);
}
.dv2-chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── 3. HERO GREETING (serif) ── */
.dv2-greeting {
  padding: 8px 0 28px;
}
.dv2-greeting-line {
  font-family: var(--dv2-font-hero);
  font-size: var(--dv2-hero-size);
  font-weight: var(--dv2-hero-wt);
  line-height: var(--dv2-hero-lh);
  letter-spacing: var(--dv2-hero-ls);
  color: var(--ink);
  margin-bottom: 4px;
}
.dv2-greeting-meal {
  font-family: var(--dv2-font-hero);
  font-size: var(--dv2-hero-size);
  font-weight: var(--dv2-hero-wt);
  line-height: var(--dv2-hero-lh);
  letter-spacing: var(--dv2-hero-ls);
  color: var(--ink);
}
.dv2-greeting-meal em {
  font-style: italic;
  color: var(--vv-green);
}


/* ── 4. PLAN BRIEF CARD (white, not green tint) ── */
.dv2-plan-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px 16px;
  margin-bottom: 20px;
  position: relative;
}
.dv2-plan-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.dv2-plan-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.dv2-plan-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--vv-green);
  flex: 1;
}
.dv2-plan-toggle {
  background: var(--vv-green-tint-2);
  border: 1.5px solid var(--vv-green);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--vv-green-dark);
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  transition: background .15s, border-color .15s, color .15s;
}
.dv2-plan-toggle:hover {
  background: var(--vv-green);
  border-color: var(--vv-green);
  color: #fff;
}
.dv2-plan-short {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.dv2-plan-full {
  display: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.dv2-plan-full p {
  margin: 0 0 10px;
}
.dv2-plan-full a {
  color: var(--vv-green-dark);
  font-weight: 600;
  text-decoration: none;
}
.dv2-plan-full strong,
.dv2-plan-section strong {
  font-weight: 700;
  color: var(--vv-green-dark);
}
.dv2-plan-card.expanded .dv2-plan-short {
  display: none;
}
.dv2-plan-card.expanded .dv2-plan-full {
  display: block;
}
.dv2-plan-section {
  margin-bottom: 14px;
}
.dv2-plan-section:last-child {
  margin-bottom: 0;
}
.dv2-plan-section-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vv-green-dark);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.dv2-plan-section p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
}
.dv2-plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dv2-plan-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--vv-green-tint-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--dv2-green-chip-text);
}


/* ── 5. NEXT MEAL HERO CARD ── */
.dv2-meal-card {
  background: #E7F7E9;
  border: 1px solid #CDEDD6;
  border-radius: var(--r-xl);
  padding: 24px;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(20,80,40,.06);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.dv2-meal-card:active {
  transform: scale(0.98);
}
/* Static mint circle — top-right, partially clipped */
.dv2-meal-card::before {
  content: '';
  position: absolute;
  top: -62px;
  right: -58px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(85,233,140,.22);
  pointer-events: none;
  z-index: 0;
}
.dv2-meal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.dv2-meal-source {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dv2-font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.dv2-meal-source em {
  font-style: normal;
  color: var(--vv-green);
  font-weight: 800;
}
.dv2-meal-source .dv2-src-time {
  font-weight: 500;
  color: var(--dv2-meal-time);
}
.dv2-meal-vv-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vv-green-dark);
  color: white;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}
.dv2-meal-badge {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--paper);
  font-family: var(--dv2-font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--dv2-meal-badge);
  position: relative;
  z-index: 2;
}
.dv2-meal-next {
  font-family: var(--dv2-font-ui);
  font-size: 13px;
  font-weight: 800;
  color: #159145;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
.dv2-meal-title {
  font-family: var(--dv2-font-ui);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--dv2-meal-text);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.dv2-meal-why {
  font-family: var(--dv2-font-ui);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--dv2-meal-sub);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.dv2-meal-macros {
  font-family: var(--dv2-font-ui);
  font-size: 14px;
  font-weight: 800;
  color: var(--dv2-meal-text);
  letter-spacing: 0.01em;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.dv2-meal-macros .dv2-macro-unit {
  font-weight: 600;
  color: var(--dv2-meal-meta);
}

/* "Why in plan" inset block */
.dv2-why-block {
  background: rgba(255,255,255,.52);
  border: 1px solid #B9DCC3;
  border-radius: var(--r-lg);
  padding: 16px;
  position: relative;
  z-index: 1;
}
.dv2-why-title {
  font-family: var(--dv2-font-ui);
  font-size: 13px;
  font-weight: 800;
  color: #159145;
  margin-bottom: 10px;
}
.dv2-why-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dv2-why-chip {
  display: inline-block;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: #EAF9EE;
  font-family: var(--dv2-font-ui);
  font-size: 12px;
  font-weight: 800;
  color: #137C39;
}


/* ── 6. ENERGY CARD ── */
.dv2-energy-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: var(--sh-1);
}
.dv2-energy-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dv2-energy-bg);
  border-radius: var(--r-md);
}
.dv2-energy-body {
  flex: 1;
  min-width: 0;
}
.dv2-energy-label {
  font-family: var(--font-body);
  font-size: var(--fs-cap);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.dv2-energy-value {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.dv2-energy-note {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--vv-green-tint);
  color: var(--vv-green-dark);
  font-size: 11px;
  font-weight: 700;
}
.dv2-energy-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-4);
  margin-top: 4px;
}


/* ── DAILY RECS (shared with old render, override styles) ── */
#screen-dashboard .vv-daily-recs {
  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;
  margin-bottom: 20px !important;
}
#screen-dashboard .vv-recs-tabs {
  background: var(--bg-warm) !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line-soft) !important;
  padding: 3px !important;
}
#screen-dashboard .vv-recs-tab {
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
#screen-dashboard .vv-recs-tab.is-on {
  background: var(--paper) !important;
  color: var(--vv-green-dark) !important;
  box-shadow: var(--sh-1) !important;
  font-weight: 700 !important;
}
#screen-dashboard .vv-daily-rec-card {
  border-radius: var(--r-md) !important;
  border-color: var(--line) !important;
  padding: 14px 16px !important;
}
#screen-dashboard .vv-daily-rec-card.featured {
  background: var(--vv-green-tint) !important;
  border-color: rgba(45,190,100,.2) !important;
}


/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV — Floating pill (Compose BottomNavBar)
   ═══════════════════════════════════════════════════════════ */
.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;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom)) !important;
}
/* Inner pill container */
.bottom-nav {
  display: flex !important;
}
.bottom-nav button {
  font-family: var(--font-body) !important;
  gap: 3px !important;
  color: var(--ink-4) !important;
  position: relative !important;
  border-radius: var(--r-lg) !important;
  padding: 7px 2px 5px !important;
  transition: background 0.22s var(--ease), color 0.22s var(--ease) !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.bottom-nav button svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.6 !important;
}
.bottom-nav button span {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--ink-4) !important;
}
.bottom-nav button.active {
  color: var(--vv-green-dark) !important;
  background: var(--vv-green-tint) !important;
}
.bottom-nav button.active span {
  font-weight: 800 !important;
  color: var(--vv-green-dark) !important;
}
.bottom-nav button.active svg {
  stroke: var(--vv-green-dark) !important;
  filter: drop-shadow(0 0 3px rgba(45,190,100,.2)) !important;
}

/* ИИ — яркая тёмно-зелёная таблетка с белыми текстом и иконкой.
   Перебиваем общий nav-цвет --ink-4 (он !important, поэтому здесь тоже !important + #id). */
.bottom-nav #nav-chat,
.bottom-nav #nav-chat span,
.bottom-nav #nav-chat.active,
.bottom-nav #nav-chat.active span {
  color: #fff !important;
}
.bottom-nav #nav-chat { background: #0E9E4E !important; }
.bottom-nav #nav-chat.active { background: #0A7C3C !important; }
.bottom-nav #nav-chat svg,
.bottom-nav #nav-chat.active svg {
  stroke: #fff !important;
  filter: none !important;
}


/* ─── WKB TIP-OF-DAY ────────────────────────────────────── */
.wkb-tip-of-day-wrap {
  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;
  margin-top: 20px !important;
}


/* ═══════════════════════════════════════════════════════════
   CART SCREEN — V2.3 Compose-style cart
   ═══════════════════════════════════════════════════════════ */

/* ── Cart title area ── */
#screen-cart > .chat-header {
  border: none !important;
  padding: 4px 0 12px !important;
}
#screen-cart > .chat-header .eyebrow {
  font-family: var(--font-body) !important;
  font-size: var(--fs-cap) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--vv-green-dark) !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}
#screen-cart > .chat-header .h-1 {
  font-family: var(--dv2-font-heading) !important;
  font-size: var(--dv2-h1-size) !important;
  font-weight: var(--dv2-h1-wt) !important;
  letter-spacing: var(--dv2-h1-ls) !important;
  color: var(--ink) !important;
  line-height: var(--dv2-hero-lh) !important;
}
#screen-cart > .chat-header .sub {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}


/* ── Cook mode — segmented control ── */
#screen-cart .cook-mode {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
}
#screen-cart .cook-mode-title {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-3) !important;
  margin-bottom: 8px !important;
}
#screen-cart .cook-mode-buttons {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  background: var(--bg-warm) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 3px !important;
  overflow: hidden !important;
}
#screen-cart .cook-mode-btn {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: var(--r-xs) !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--font-body) !important;
  padding: 7px 4px !important;
  cursor: pointer !important;
  transition: all .18s var(--ease) !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-height: 62px !important;
  padding: 9px 5px !important;
}
#screen-cart .cook-mode-btn.active {
  background: var(--paper) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}
#screen-cart .cook-mode-btn .cm-emoji {
  font-size: 14px !important;
  line-height: 1 !important;
}
#screen-cart .cook-mode-btn .cm-title {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink-3) !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
  white-space: normal !important;
}
#screen-cart .cook-mode-btn.active .cm-title {
  color: var(--vv-green-dark) !important;
}
#screen-cart .cook-mode-btn .cm-row {
  display: contents !important;
}
#screen-cart .cook-mode-btn .cm-desc {
  display: none !important;
}
#screen-cart .cook-mode-desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-4);
  margin-top: 6px;
  padding-left: 2px;
}

/* ── Horizon mode — «На сколько закупаемся» (segmented, 4 compact buttons) ── */
#screen-cart .horizon-mode {
  background: transparent !important;
  margin-bottom: 12px !important;
}
#screen-cart .horizon-mode-title {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-3) !important;
  margin-bottom: 8px !important;
}
#screen-cart .horizon-buttons {
  display: flex !important;
  gap: 0 !important;
  background: var(--bg-warm) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 3px !important;
  overflow: hidden !important;
}
#screen-cart .horizon-btn {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--r-xs) !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink-3) !important;
  padding: 8px 4px !important;
  cursor: pointer !important;
  transition: all .18s var(--ease) !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
#screen-cart .horizon-btn.active {
  background: var(--paper) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
  color: var(--vv-green-dark) !important;
}
#screen-cart .horizon-mode-desc {
  font-family: var(--font-body);
  color: var(--ink-4);
}


/* ── Budget mode — V2 style ── */
#screen-cart .budget-mode {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
#screen-cart .budget-mode-title {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-3) !important;
}
/* Строка вместо трёх кнопок (см. комментарий в _mvp_body_design.html).
   Правила .budget-btn убраны вместе с самими кнопками, чтобы не оставлять мёртвый CSS.
   Цвет --ink-2: днём #5E6B62 = 5,23:1 на карточке, ночью #B3BEB4 = 8,04:1 — обе темы
   выше нормы 4,5:1. --ink-3 днём дал бы 5,27, но ночью только 4,51 — впритык. */
#screen-cart .budget-mode-note {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  margin-top: 6px !important;
  line-height: 1.35 !important;
}


/* ── Day selector — compact chips ── */
#screen-cart .vv-day-selector {
  padding: 2px 0 8px !important;
}
#screen-cart .vv-day-selector-title {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-3) !important;
}
#screen-cart .vv-day-btn {
  border-radius: var(--r-md) !important;
  border: 1.5px solid var(--line) !important;
  background: var(--paper) !important;
  font-family: var(--font-body) !important;
  padding: 8px 10px !important;
  transition: all .2s var(--ease) !important;
}
#screen-cart .vv-day-btn.active {
  border-color: var(--vv-green) !important;
  background: var(--vv-green-tint) !important;
}
#screen-cart .vv-day-btn-label {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
#screen-cart .vv-day-btn.active .vv-day-btn-label {
  color: var(--vv-green-dark) !important;
}
#screen-cart .vv-day-btn-date {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--ink-4) !important;
}


/* ── Meal toggles — V2 pills ── */
#screen-cart .vv-meal-toggles {
  padding: 2px 0 8px !important;
}
#screen-cart .vv-meal-toggles-title {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-3) !important;
}
#screen-cart .vv-meal-toggle-pill {
  border-radius: var(--r-pill) !important;
  border: 1.5px solid var(--line) !important;
  background: var(--paper) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  transition: all .2s var(--ease) !important;
}
#screen-cart .vv-meal-toggle-pill.active {
  border-color: var(--vv-green) !important;
  background: var(--vv-green-tint) !important;
  color: var(--vv-green-dark) !important;
}


/* ── Cart content header (dynamic div with inline styles) ── */
.dv2-cart-header {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
}
.dv2-cart-header .eyebrow {
  font-family: var(--font-body) !important;
  font-size: var(--fs-cap) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--vv-green-dark) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.dv2-cart-header > div:nth-child(2) {
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.dv2-cart-header > div:nth-child(3) {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ink-2) !important;
}


/* ── "Почему такая корзина?" — clean V2 card ── */
#screen-cart .vv-why-cart {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
}
#screen-cart .vv-why-toggle {
  font-family: var(--font-body) !important;
  padding: 14px 16px !important;
}
#screen-cart .vv-why-title {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
#screen-cart .vv-why-body {
  font-family: var(--font-body) !important;
  padding: 0 16px 14px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}


/* ── Store selector — clean card ── */
#screen-cart #store-selector > div {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
  margin: 0 0 14px !important;
}
#screen-cart #store-selector input {
  font-family: var(--font-body) !important;
  border-radius: var(--r-sm) !important;
  border: 1.5px solid var(--line) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: border-color .15s !important;
}
#screen-cart #store-selector input:focus {
  border-color: var(--vv-green) !important;
  outline: none !important;
}
#screen-cart #store-selector .btn {
  font-family: var(--font-body) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
}


/* ── Meal blocks — Compose-style product cards ── */
#screen-cart .vv-meal-block {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  box-shadow: var(--sh-1) !important;
}
#screen-cart .vv-meal-head {
  border-bottom: 1px solid var(--line-soft) !important;
  padding: 0 0 10px !important;
  margin-bottom: 10px !important;
}
#screen-cart .vv-meal-head .vv-meal-title {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--vv-green-dark) !important;
}
#screen-cart .vv-meal-head .vv-meal-total {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
#screen-cart .vv-meal-item {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  gap: 12px !important;
  align-items: center !important;
}
#screen-cart .vv-meal-item:last-of-type {
  border-bottom: none !important;
}
#screen-cart .vv-meal-img.vv-meal-emoji {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: var(--dv2-surface-2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}
#screen-cart .vv-meal-name {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
}
#screen-cart .vv-meal-meta {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 3px !important;
}
#screen-cart .vv-meal-meta b {
  color: var(--vv-green) !important;
  font-weight: 800 !important;
}
#screen-cart .vv-meal-reason {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--ink-4) !important;
  font-style: italic !important;
  margin-top: 3px !important;
}
#screen-cart .vv-meal-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
#screen-cart .vv-meal-btn-swap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background .12s !important;
}
#screen-cart .vv-meal-btn-swap:hover {
  background: var(--bg-warm) !important;
}
#screen-cart .vv-meal-btn-del {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  font-size: 16px !important;
  color: var(--ink-4) !important;
  cursor: pointer !important;
  transition: border-color .12s, color .12s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#screen-cart .vv-meal-btn-del:hover {
  border-color: var(--vv-berry) !important;
  color: var(--vv-berry) !important;
}
#screen-cart .vv-meal-add-more {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--vv-green-dark) !important;
  background: transparent !important;
  border: 1.5px solid var(--dv2-ai-border) !important;
  border-radius: var(--r-md) !important;
  padding: 12px !important;
  width: 100% !important;
  text-align: center !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  transition: background .15s var(--ease) !important;
}
#screen-cart .vv-meal-add-more:hover {
  background: var(--vv-green-tint) !important;
}


/* ── Cart action buttons ── */
#screen-cart #cart-list .btn {
  font-family: var(--font-body) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: all .15s var(--ease) !important;
}
#screen-cart #cart-list .btn-green-outline {
  border: 1.5px solid var(--vv-green) !important;
  color: var(--vv-green-dark) !important;
  background: transparent !important;
  border-radius: var(--r-pill) !important;
}
#screen-cart #cart-list .btn-green-outline:hover {
  background: var(--vv-green-tint) !important;
}
#screen-cart #cart-list .btn-outline {
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
}
#screen-cart #cart-list .btn-ghost {
  border-radius: var(--r-pill) !important;
}


/* ── Sticky checkout bar — Compose StickyCheckoutBar ── */
.dv2-sticky-checkout {
  background: var(--dv2-glass) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid var(--line) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  padding: 12px 20px 14px !important;
  box-shadow: 0 -4px 20px rgba(20,14,0,.06) !important;
  bottom: 72px !important;
}
.dv2-sticky-checkout > div:first-child {
  gap: 6px !important;
  margin-bottom: 10px !important;
}
.dv2-sticky-checkout > div:first-child button {
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  transition: all .15s var(--ease) !important;
}
.dv2-sticky-checkout > div:nth-child(2) {
  margin-bottom: 10px !important;
}
.dv2-sticky-checkout > div:nth-child(2) span:first-child {
  font-family: var(--font-body) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
.dv2-sticky-checkout > div:nth-child(2) span:last-child {
  font-family: var(--font-body) !important;
}
.dv2-sticky-checkout > button:last-child {
  background: var(--vv-green) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  border: none !important;
  color: white !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: transform .1s, opacity .1s !important;
}
.dv2-sticky-checkout > button:last-child:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}


/* ═══════════════════════════════════════════════════════════
   VVILLIAM CHAT — V2.4 Compose-style
   ═══════════════════════════════════════════════════════════ */

/* ── Chat header — centered, serif title, status pill ── */
#screen-chat > .chat-header {
  border: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
  padding: 8px 0 16px !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}
#screen-chat > .chat-header .h-1 {
  font-family: var(--dv2-font-heading) !important;
  font-size: var(--dv2-h1-size) !important;
  font-weight: var(--dv2-h1-wt) !important;
  letter-spacing: var(--dv2-h1-ls) !important;
  color: var(--ink) !important;
  line-height: var(--dv2-hero-lh) !important;
}
#screen-chat > .chat-header .h-1 em {
  color: var(--vv-green) !important;
  font-style: normal !important;
}
#screen-chat > .chat-header .sub {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}


/* ── Chat list — extra bottom padding for fixed input ── */
#screen-chat .chat-list {
  padding-bottom: 140px !important;
}
#screen-chat .spacer-lg {
  display: none !important;
}


/* ── AI messages — mint card (Compose #E7F7E9 / #CDEDD6) ── */
#screen-chat .msg.ai {
  background: var(--dv2-ai-bubble) !important;
  border: 1px solid var(--dv2-ai-border) !important;
  border-radius: 16px 16px 16px 4px !important;
  padding: 14px 16px !important;
  max-width: 88% !important;
  font-family: var(--font-body) !important;
}

/* Bot header — avatar circle + label */
#screen-chat .msg.ai .bot {
  gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: var(--vv-green-dark) !important;
  margin-bottom: 6px !important;
}
/* Transform dot into 22px avatar circle with "V" */
#screen-chat .msg.ai .bot .dot {
  width: 22px !important;
  height: 22px !important;
  background: var(--vv-green-dark) !important;
  animation: none !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
#screen-chat .msg.ai .bot .dot::after {
  content: 'V';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
}

/* AI text content */
#screen-chat .msg.ai .vv-ai-text {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
}


/* ── User messages — green bubble ── */
#screen-chat .msg.user {
  background: var(--vv-green) !important;
  color: white !important;
  border-radius: 16px 16px 4px 16px !important;
  max-width: 82% !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}


/* ── Greeting message — warm white welcome card ── */
#screen-chat #vv-chat-greeting {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  max-width: 100% !important;
  padding: 18px 20px !important;
}


/* ⚠ ЗДЕСЬ ЛЕЖАЛИ ПРАВИЛА `.vv-chat-stop-btn` — УДАЛЕНЫ 12.08.2026 КАК МЁРТВЫЕ.
   Они описывали ПРЕЖНИЙ вид кнопки остановки: пилюля с зелёной рамкой,
   padding 7px 18px, шрифт 12px/700. Такого класса нет ни в разметке, ни в JS:
   поиск по `static/` и `app/` находил только сам этот файл (два блока).
   Живая кнопка — `class="chat-stop" id="vv-chat-stop"`
   (app/templates/_mvp_body_design.html), JS берёт её по id
   (static/js/bindings.js), стили — `.chat-input .chat-stop` в app.css,
   и она сплошной диск, а не пилюля с рамкой.
   Опасность была не в лишних байтах: следующий, кто пойдёт править кнопку
   поиском по слову «stop», попадал сюда и правил не то.
   Ночной блок этих же правил удалён ниже по файлу. */


/* ── Product cards in AI messages ── */
#screen-chat .vv-ai-cart {
  background: var(--paper) !important;
  border: 1px solid var(--dv2-ai-border) !important;
  border-radius: var(--r-md) !important;
  padding: 14px !important;
  margin-top: 12px !important;
}
#screen-chat .vv-ai-cart-head {
  border-bottom: 1px solid var(--dv2-ai-border) !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}
#screen-chat .vv-ai-cart-goal {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--vv-green-dark) !important;
}
#screen-chat .vv-ai-cart-total {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
#screen-chat .vv-ai-cart-item {
  border-bottom-color: var(--dv2-ai-border) !important;
  gap: 10px !important;
  padding: 8px 0 !important;
}
#screen-chat .vv-ai-cart-item .vv-meal-img.vv-meal-emoji {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: var(--dv2-surface-2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}
#screen-chat .vv-ai-cart-name {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
#screen-chat .vv-ai-cart-meta {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--ink-3) !important;
}
#screen-chat .vv-ai-cart-meta b {
  color: var(--vv-green-dark) !important;
  font-weight: 800 !important;
}

/* Pick button — pill style (Compose: 34dp height) */
#screen-chat .vv-ai-pick {
  width: auto !important;
  height: 34px !important;
  border-radius: var(--r-pill) !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  border: 1.5px solid var(--vv-green) !important;
  background: var(--paper) !important;
  color: var(--vv-green) !important;
  transition: all .15s var(--ease) !important;
}
#screen-chat .vv-ai-pick.checked {
  background: var(--vv-green) !important;
  color: white !important;
  border-color: var(--vv-green) !important;
}

/* Action buttons — pill style */
#screen-chat .vv-ai-btn {
  font-family: var(--font-body) !important;
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
  transition: all .15s var(--ease) !important;
}
#screen-chat .vv-ai-btn-primary {
  background: var(--vv-green) !important;
  color: white !important;
}
#screen-chat .vv-ai-btn-ghost {
  background: var(--paper) !important;
  border: 1.5px solid var(--vv-green) !important;
  color: var(--vv-green-dark) !important;
}

/* Sources / disclaimer */
#screen-chat .vv-ai-sources {
  background: var(--vv-green-tint-2) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
}
#screen-chat .vv-ai-disclaimer {
  background: var(--dv2-warn-bg) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
}


/* ── Quick reply chips — V2 green pills ── */
#screen-chat .quick-replies {
  padding: 8px 0 !important;
  gap: 8px !important;
}
#screen-chat .qr-chip {
  background: var(--vv-green-tint) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--vv-green-dark) !important;
  padding: 9px 16px !important;
  transition: all .15s var(--ease) !important;
}
#screen-chat .qr-chip:hover {
  background: var(--dv2-ai-bubble) !important;
  border: none !important;
}


/* ── Chat input — adjusted bottom for V2 nav, green send ── */
#screen-chat .chat-input-wrap {
  bottom: 72px !important;
  background: linear-gradient(to bottom, transparent, var(--bg) 35%) !important;
  padding: 14px 20px 10px !important;
}
#screen-chat .chat-input {
  background: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: var(--sh-2) !important;
}
#screen-chat .chat-input input {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
}
#screen-chat .chat-input input::placeholder {
  color: var(--ink-4) !important;
}
/* Send button — green (Compose style, not berry) */
#screen-chat .chat-input .send {
  background: var(--vv-green) !important;
  color: white !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}
#screen-chat .chat-input .send:active {
  transform: scale(.88) !important;
}


/* ═══════════════════════════════════════════════════════════
   LIFEHACKS — V2.5 Compose-style
   ═══════════════════════════════════════════════════════════ */

/* ── Header — serif title, clean subtitle ── */
#screen-lifehacks > .chat-header {
  border: none !important;
  padding: 4px 0 12px !important;
  text-align: left !important;
}
#screen-lifehacks > .chat-header .eyebrow {
  font-family: var(--font-body) !important;
  font-size: var(--fs-cap) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--vv-green-dark) !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}
#screen-lifehacks > .chat-header .h-1 {
  font-family: var(--dv2-font-heading) !important;
  font-size: var(--dv2-h1-size) !important;
  font-weight: var(--dv2-h1-wt) !important;
  letter-spacing: var(--dv2-h1-ls) !important;
  color: var(--ink) !important;
  line-height: var(--dv2-hero-lh) !important;
}
#screen-lifehacks > .chat-header .h-1 em {
  color: var(--vv-green) !important;
  font-style: normal !important;
}
#screen-lifehacks > .chat-header .sub {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}


/* ── Tabs — segmented control (Compose style) ── */
#screen-lifehacks .lh-tabs {
  background: var(--bg-warm) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 3px !important;
  gap: 0 !important;
  margin-bottom: 14px !important;
}
#screen-lifehacks .lh-tab {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--ink-3) !important;
  border-radius: var(--r-xs) !important;
  padding: 10px 14px !important;
  transition: all .18s var(--ease) !important;
}
#screen-lifehacks .lh-tab.active {
  background: var(--paper) !important;
  color: var(--vv-green-dark) !important;
  box-shadow: 0 1px 4px rgba(20,14,0,.08) !important;
}


/* ── Filter chips — V2 pills ── */
#screen-lifehacks .lh-subfilters {
  margin-bottom: 16px !important;
}
#screen-lifehacks .lh-chip {
  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-2) !important;
  box-shadow: none !important;
  transition: all .15s var(--ease) !important;
}
#screen-lifehacks .lh-chip:hover:not(.lh-chip-active) {
  background: var(--bg-warm) !important;
  transform: none !important;
  box-shadow: none !important;
}
#screen-lifehacks .lh-chip-active {
  background: var(--vv-green) !important;
  color: white !important;
  border-color: var(--vv-green) !important;
  box-shadow: none !important;
}
#screen-lifehacks .lh-chip-goals {
  background: var(--vv-green-tint) !important;
  color: var(--vv-green-dark) !important;
  border-color: rgba(45,190,100,.25) !important;
}
#screen-lifehacks .lh-chip-goals.lh-chip-active {
  background: var(--vv-green) !important;
  color: white !important;
  border-color: var(--vv-green) !important;
}
#screen-lifehacks .lh-chip-count {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: var(--dv2-chip-bg) !important;
  border-radius: var(--r-pill) !important;
  padding: 1px 6px !important;
}
#screen-lifehacks .lh-chip-active .lh-chip-count {
  background: rgba(255,255,255,.25) !important;
  color: white !important;
}
#screen-lifehacks .lh-chip-more {
  border-style: dashed !important;
  border-color: var(--ink-4) !important;
  background: transparent !important;
  color: var(--ink-3) !important;
}
#screen-lifehacks .lh-row-extra {
  border-top: 1px dashed var(--line) !important;
}


/* ── Grouped blocks — warm white cards ── */
#screen-lifehacks #lifehacks-content > div {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--sh-1) !important;
}

/* Group title row — with "Все →" pseudo */
#screen-lifehacks #lifehacks-content > div > div:first-child {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--line-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
/* ⚠ УДАЛЕНО 03.08.2026: здесь был ::after с текстом «Все →». Он выглядел ссылкой,
   но content не ловит клики — нажать было физически нельзя. Человек видел обещание
   действия и упирался в него. Теперь «Все N» — настоящая кнопка .lh-group-more,
   она раскрывает остаток группы на месте (см. premium.css и renderLifehacks). */
/* «Практические советы» — самостоятельная карточка, НЕ группа: заголовок обычный,
   без flex-строки и без псевдо-ссылки «Все →» (иначе всё содержимое уезжало в колонки). */
#screen-lifehacks #lifehacks-content > div.lh-practical > div:first-child {
  display: block !important;
}
#screen-lifehacks #lifehacks-content > div.lh-practical > div:first-child::after {
  content: none !important;
}

/* Row items — touch-friendly */
#screen-lifehacks #lifehacks-content > div > div[onclick] {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  gap: 10px !important;
  align-items: center !important;
  border-radius: 0 !important;
  transition: background .12s !important;
}
#screen-lifehacks #lifehacks-content > div > div[onclick]:last-child {
  border-bottom: none !important;
  padding-bottom: 2px !important;
}
#screen-lifehacks #lifehacks-content > div > div[onclick]:active {
  background: var(--bg-warm) !important;
  border-radius: var(--r-sm) !important;
  margin: 0 -6px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Row title */
#screen-lifehacks #lifehacks-content > div > div[onclick] > div:first-child > div:first-child {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.35 !important;
}

/* Row subtitle */
#screen-lifehacks #lifehacks-content > div > div[onclick] > div:first-child > div:nth-child(2) {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 3px !important;
  line-height: 1.35 !important;
}

/* Row chevron */
#screen-lifehacks #lifehacks-content > div > div[onclick] > svg {
  stroke: var(--ink-4) !important;
  opacity: .6 !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}


/* ── Empty state card ── */
.dv2-lh-empty {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 24px;
  text-align: center;
  margin-top: 8px;
}
.dv2-lh-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
}
.dv2-lh-empty-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.dv2-lh-empty-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}


/* ── Modal — V2 warm white ── */
#vv-lifehack-modal .vv-modal-content {
  background: var(--paper) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}
@media (min-width: 600px) {
  #vv-lifehack-modal .vv-modal-content {
    border-radius: var(--r-xl) !important;
  }
}
#vv-lifehack-modal .vv-modal-close {
  background: var(--bg-warm) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
  width: 36px !important;
  height: 36px !important;
}
#vv-lifehack-modal .vv-modal-close:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
#vv-lifehack-modal .lh-modal-head {
  padding: 24px 20px 16px !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
#vv-lifehack-modal .lh-modal-title {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.25 !important;
}
#vv-lifehack-modal .lh-modal-body {
  padding: 18px 20px 28px !important;
}
#vv-lifehack-modal .lh-section {
  margin-top: 18px !important;
}
#vv-lifehack-modal .lh-section:first-child {
  margin-top: 0 !important;
}
#vv-lifehack-modal .lh-section-title {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--vv-green-dark) !important;
  margin-bottom: 8px !important;
}
#vv-lifehack-modal .lh-effect-text {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--ink-2) !important;
}
#vv-lifehack-modal .lh-goal-chip {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: var(--r-pill) !important;
  background: var(--vv-green-tint) !important;
  color: var(--vv-green-dark) !important;
}


/* ═══════════════════════════════════════════════════════════
   DIARY — V2.6 Compose-style
   ═══════════════════════════════════════════════════════════ */

/* ── Header — serif title, clean subtitle ── */
#screen-progress > .chat-header {
  border: none !important;
  padding: 4px 0 12px !important;
  text-align: left !important;
}
#screen-progress > .chat-header .eyebrow {
  font-family: var(--font-body) !important;
  font-size: var(--fs-cap) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--vv-green-dark) !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}
#screen-progress > .chat-header .h-1 {
  font-family: var(--dv2-font-heading) !important;
  font-size: var(--dv2-h1-size) !important;
  font-weight: var(--dv2-h1-wt) !important;
  letter-spacing: var(--dv2-h1-ls) !important;
  color: var(--ink) !important;
  line-height: var(--dv2-hero-lh) !important;
}
#screen-progress > .chat-header .h-1 em {
  color: var(--vv-green) !important;
  font-style: normal !important;
}
#screen-progress > .chat-header .sub {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}


/* ── Section tabs — segmented control (Питание / Образ жизни) ── */
#screen-progress #vv-diary-sections {
  background: var(--bg-warm) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 3px !important;
  gap: 0 !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
}
#screen-progress #vv-diary-sections button,
#screen-progress #vv-diary-sections .vv-dsec {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--ink-3) !important;
  border-radius: var(--r-xs) !important;
  padding: 10px 14px !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  transition: all .18s var(--ease) !important;
}
/* Было button[style*="berry"] / [style*="700"] — селекторы по ПОДСТРОКЕ инлайн-стиля.
   06.08.2026 инлайны убрали ради токенов, и подсветка активной секции молча отвалилась.
   Правило держится на классе .is-on, который ставит _renderDiarySections. */
#screen-progress #vv-diary-sections .vv-dsec.is-on {
  background: var(--paper) !important;
  color: var(--vv-green-dark) !important;
  box-shadow: 0 1px 4px rgba(20,14,0,.08) !important;
}


/* ── Tab strip — hide when single tab (auto), but style when visible ── */
#screen-progress .wkb-tab-strip {
  padding: 0 0 8px !important;
  margin-bottom: 10px !important;
}


/* ── Food diary wrapper (wkb-pane) ── */
#screen-progress .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;
}
#screen-progress .wkb-pane-head {
  margin-bottom: 14px !important;
}
#screen-progress .wkb-pane-icon {
  font-size: 28px !important;
}
#screen-progress .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;
}
#screen-progress .wkb-pane-sub {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
}


/* ── KBJU summary card ── */
#screen-progress .wkb-food-day-totals {
  background: var(--vv-green-tint) !important;
  border: 1px solid rgba(45,190,100,.18) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px 18px !important;
}
#screen-progress .wkb-food-plan-label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--vv-green-dark) !important;
  opacity: 1 !important;
}
#screen-progress .wkb-food-total-num {
  font-family: var(--font-body) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--vv-green-dark) !important;
}
#screen-progress .wkb-food-total-of {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--ink-3) !important;
}
#screen-progress .wkb-food-total-lbl {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
}
#screen-progress .wkb-food-progress-bar {
  height: 6px !important;
  border-radius: var(--r-pill) !important;
  background: var(--dv2-kbju-macro) !important;
  margin-top: 8px !important;
}
#screen-progress .wkb-food-progress-fill {
  border-radius: var(--r-pill) !important;
  background: var(--vv-green-dark) !important;
}
#screen-progress .wkb-food-macro-col {
  background: var(--dv2-kbju-macro) !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 12px !important;
  font-family: var(--font-body) !important;
}
#screen-progress .wkb-food-total-kbju b {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
#screen-progress .wkb-food-total-kbju span {
  font-family: var(--font-body) !important;
}
#screen-progress .wkb-food-total-remain {
  color: var(--vv-green-dark) !important;
  font-weight: 600 !important;
}


/* ── Meal blocks ── */
#screen-progress .wkb-food-meal-block {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: var(--sh-1) !important;
}
#screen-progress .wkb-food-meal-title {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
#screen-progress .wkb-food-meal-total {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--vv-green-dark) !important;
}
#screen-progress .wkb-food-meal-all {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
  padding: 5px 12px !important;
  border: 1.5px solid var(--vv-green) !important;
  background: transparent !important;
  color: var(--vv-green-dark) !important;
}
#screen-progress .wkb-food-meal-all:hover {
  background: var(--vv-green-tint) !important;
}
#screen-progress .wkb-food-meal-all.is-done {
  background: var(--vv-green) !important;
  color: white !important;
  border-color: var(--vv-green) !important;
}


/* ── Food rows — compact, touch-friendly ── */
#screen-progress .vv-diary-context .vv-meal-item {
  border-left: 3px solid var(--line-soft) !important;
  border-bottom: none !important;
  padding: 10px 8px 10px 12px !important;
  margin-bottom: 4px !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  gap: 10px !important;
  transition: all .15s !important;
  align-items: center !important;
}
#screen-progress .vv-diary-context .vv-meal-item.is-eaten {
  border-left-color: var(--vv-green) !important;
  background: var(--vv-green-tint) !important;
}
#screen-progress .vv-diary-context .vv-meal-item:not(.is-eaten) {
  opacity: 1 !important;
}
#screen-progress .vv-meal-emoji {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--r-sm) !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#screen-progress .vv-meal-name {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
#screen-progress .vv-meal-meta {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--ink-3) !important;
}
#screen-progress .vv-meal-btn-eat {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--r-sm) !important;
  background: var(--bg-warm) !important;
  color: var(--ink-4) !important;
  border: 1px solid var(--line) !important;
  transition: all .15s !important;
}
#screen-progress .vv-meal-btn-eat:hover {
  background: var(--vv-green-tint) !important;
  color: var(--vv-green-dark) !important;
  border-color: var(--vv-green) !important;
}
#screen-progress .vv-meal-item.is-eaten .vv-meal-btn-eat {
  background: var(--vv-green) !important;
  color: white !important;
  border-color: var(--vv-green) !important;
}
#screen-progress .vv-meal-item.is-eaten .vv-meal-name {
  text-decoration: line-through !important;
  text-decoration-color: var(--vv-green) !important;
  opacity: 0.75 !important;
}


/* ── Stale plan warning ── */
#screen-progress .wkb-food-stale {
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
}


/* ── Food empty state ── */
#screen-progress .wkb-food-empty {
  background: var(--paper) !important;
  border: 1px dashed var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 32px 20px !important;
}
#screen-progress .wkb-food-empty-icon {
  font-size: 40px !important;
}
#screen-progress .wkb-food-empty-title {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
#screen-progress .wkb-food-empty-sub {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--ink-3) !important;
}


/* ══════════════════════════════════════════════════════
   LIFESTYLE DIARY — V2.6
   ══════════════════════════════════════════════════════ */

/* ── Lifestyle header ── */
#screen-progress .vv-ld-header {
  padding: 0 0 12px !important;
}
#screen-progress .vv-ld-h1 {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
#screen-progress .vv-ld-sub {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
}


/* ── Summary card ── */
#screen-progress .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;
}
#screen-progress .vv-ld-line {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
}
#screen-progress .vv-ld-line span:first-child {
  font-weight: 700 !important;
  color: var(--ink) !important;
}
#screen-progress .vv-ld-ok {
  color: var(--vv-green) !important;
  font-weight: 700 !important;
}


/* ── Sections (water, steps, sleep, habits) — separate cards ── */
#screen-progress .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;
}
#screen-progress .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;
}


/* ── Progress bars ── */
#screen-progress .vv-ld-bar {
  height: 6px !important;
  background: var(--line-soft) !important;
  border-radius: var(--r-pill) !important;
}
#screen-progress .vv-ld-bar-fill {
  border-radius: var(--r-pill) !important;
  background: var(--vv-green) !important;
}
#screen-progress .vv-ld-pval {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-3) !important;
}


/* ── Quick-add buttons — V2 pills ── */
#screen-progress .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;
}
#screen-progress .vv-ld-qbtn:hover {
  background: var(--vv-green-tint) !important;
  border-color: var(--vv-green) !important;
  color: var(--vv-green-dark) !important;
}
#screen-progress .vv-ld-qbtn:active {
  transform: scale(.96) !important;
  background: var(--vv-green-tint) !important;
}
#screen-progress .vv-ld-coffee {
  color: var(--ink-3) !important;
  border-style: dashed !important;
}
#screen-progress .vv-ld-hint {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--ink-3) !important;
}


/* ── Tracked habits ── */
#screen-progress .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;
}
#screen-progress .vv-ld-habit.is-done {
  border-color: rgba(45,190,100,.25) !important;
  background: var(--vv-green-tint) !important;
}
#screen-progress .vv-ld-htitle {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
#screen-progress .vv-ld-hstreak {
  font-size: 11px !important;
  color: var(--vv-orange, #E8731A) !important;
  font-weight: 700 !important;
}
#screen-progress .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;
}
#screen-progress .vv-ld-hbtn:hover {
  background: var(--vv-green-tint) !important;
}
#screen-progress .vv-ld-hbtn.is-done {
  background: var(--vv-green) !important;
  color: white !important;
  border-color: var(--vv-green) !important;
}


/* ── Empty state — lifestyle ── */
#screen-progress .vv-ld-empty {
  text-align: center !important;
  padding: 28px 20px !important;
}
#screen-progress .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;
}
#screen-progress .vv-ld-empty .btn {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
}


/* ── Spacer fix ── */
#screen-progress .spacer-lg {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   PROGRESS / STATS — V2.7 Compose-style
   ═══════════════════════════════════════════════════════════ */

/* ── Header — serif title ── */
#screen-stats > .chat-header {
  border: none !important;
  padding: 4px 0 12px !important;
  text-align: left !important;
}
#screen-stats > .chat-header .eyebrow {
  font-family: var(--font-body) !important;
  font-size: var(--fs-cap) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--vv-green-dark) !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}
#screen-stats > .chat-header .h-1 {
  font-family: var(--dv2-font-heading) !important;
  font-size: var(--dv2-h1-size) !important;
  font-weight: var(--dv2-h1-wt) !important;
  letter-spacing: var(--dv2-h1-ls) !important;
  color: var(--ink) !important;
  line-height: var(--dv2-hero-lh) !important;
}
#screen-stats > .chat-header .h-1 em {
  color: var(--vv-green) !important;
  font-style: normal !important;
}
#screen-stats > .chat-header .sub {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}


/* ── Tab strip — V2 segmented control ── */
#screen-stats .wkb-tab-strip {
  background: var(--bg-warm) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 3px !important;
  gap: 0 !important;
  margin-bottom: 14px !important;
  overflow: visible !important;
  display: flex !important;
  flex-wrap: wrap !important;
}
#screen-stats .wkb-tab {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 9px 6px !important;
  border: none !important;
  border-radius: var(--r-xs) !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-direction: row !important;
  gap: 4px !important;
  justify-content: center !important;
  transition: all .18s var(--ease) !important;
}
#screen-stats .wkb-tab:hover {
  transform: none !important;
  box-shadow: none !important;
}
#screen-stats .wkb-tab.is-on {
  background: var(--paper) !important;
  box-shadow: 0 1px 4px rgba(20,14,0,.08) !important;
  border-color: transparent !important;
}
#screen-stats .wkb-tab-icon {
  font-size: 15px !important;
  line-height: 1 !important;
}
#screen-stats .wkb-tab-label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink-3) !important;
}
#screen-stats .wkb-tab.is-on .wkb-tab-label {
  color: var(--vv-green-dark) !important;
}
#screen-stats .wkb-tab-val {
  display: none !important;
}


/* ══════════════════════════════════════════════════════
   ИТОГ ДНЯ — V2.7
   ══════════════════════════════════════════════════════ */

#screen-stats .vv-itog-title {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}
#screen-stats .vv-itog-date {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--ink-3) !important;
}

/* Day/Week toggle */
#screen-stats .vv-itog-toggle {
  background: var(--bg-warm) !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line) !important;
  padding: 3px !important;
  gap: 0 !important;
}
#screen-stats .vv-itog-toggle-btn {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--r-xs) !important;
  color: var(--ink-3) !important;
  background: transparent !important;
  box-shadow: none !important;
}
#screen-stats .vv-itog-toggle-btn.is-active {
  background: var(--paper) !important;
  color: var(--vv-green-dark) !important;
  box-shadow: 0 1px 4px rgba(20,14,0,.08) !important;
}

/* Readiness card */
#screen-stats .vv-itog-readiness {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-1) !important;
}
#screen-stats .vv-itog-readiness-label {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}
#screen-stats .vv-itog-readiness-val {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
#screen-stats .vv-itog-readiness-bar {
  height: 6px !important;
  border-radius: var(--r-pill) !important;
}
#screen-stats .vv-itog-readiness-fill {
  border-radius: var(--r-pill) !important;
}

/* Section heads */
#screen-stats .vv-itog-section-title {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-2) !important;
}

/* Nutrition card */
#screen-stats .vv-itog-nutrition-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-1) !important;
}
#screen-stats .vv-itog-kcal-num {
  font-family: var(--font-body) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--vv-green-dark) !important;
}
#screen-stats .vv-itog-kcal-label {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  color: var(--ink-3) !important;
}
#screen-stats .vv-itog-macro-bar-wrap {
  border-radius: var(--r-pill) !important;
}
#screen-stats .vv-itog-macro-bar {
  border-radius: var(--r-pill) !important;
}
#screen-stats .vv-itog-macro-val {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}
#screen-stats .vv-itog-macro-lbl {
  font-family: var(--font-body) !important;
}

/* Meal rows */
#screen-stats .vv-itog-meal-row {
  font-family: var(--font-body) !important;
  border-radius: var(--r-sm) !important;
}
#screen-stats .vv-itog-meal-name {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}

/* Lifestyle grid */
#screen-stats .vv-itog-life-item {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  transition: all .15s !important;
}
#screen-stats .vv-itog-life-item.is-done {
  background: var(--vv-green-tint) !important;
  border-color: rgba(45,190,100,.2) !important;
}
#screen-stats .vv-itog-life-title {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
#screen-stats .vv-itog-life-value {
  font-family: var(--font-body) !important;
}
#screen-stats .vv-itog-life-status {
  border: 1.5px solid var(--line) !important;
}
#screen-stats .vv-itog-life-item.is-done .vv-itog-life-status {
  background: var(--vv-green) !important;
  border-color: var(--vv-green) !important;
}

/* Quick actions */
#screen-stats .vv-itog-qbtn {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
  border: 1.5px solid var(--line) !important;
  background: var(--paper) !important;
  color: var(--ink-2) !important;
}
#screen-stats .vv-itog-qbtn:hover {
  background: var(--vv-green-tint) !important;
  border-color: var(--vv-green) !important;
  color: var(--vv-green-dark) !important;
}

/* Week strip & placeholder */
#screen-stats .vv-itog-week-day {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line) !important;
}
#screen-stats .vv-itog-week-day.is-today {
  border-color: var(--vv-green) !important;
  background: var(--vv-green-tint) !important;
}

/* ══════════════════════════════════════════════════════
   ЦЕЛИ — V2.7
   ══════════════════════════════════════════════════════ */

#screen-stats .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;
}
#screen-stats .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;
}
#screen-stats .wkb-pane-sub {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
}
#screen-stats .wkb-pane-action {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--vv-green-dark) !important;
}
#screen-stats .wkb-goal-card {
  background: var(--vv-green-tint) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
  border: 1px solid rgba(45,190,100,.15) !important;
}
#screen-stats .wkb-goal-title {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
#screen-stats .wkb-goal-link {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--vv-green-dark) !important;
}
#screen-stats .wkb-goal-prog-row {
  font-family: var(--font-body) !important;
}
#screen-stats .wkb-goal-prog-bar {
  border-radius: var(--r-pill) !important;
}
#screen-stats .wkb-goal-prog-bar > div {
  border-radius: var(--r-pill) !important;
}
#screen-stats .wkb-goal-sum {
  font-family: var(--font-body) !important;
}


/* ══════════════════════════════════════════════════════
   БИОМАРКЕРЫ — V2.7
   ══════════════════════════════════════════════════════ */

#screen-stats .biomarker-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
  box-shadow: var(--sh-1) !important;
}
#screen-stats .biomarker-card .bm-name {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
#screen-stats .biomarker-card .bm-delta {
  font-family: var(--font-body) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}
#screen-stats .biomarker-card .bm-values {
  font-family: var(--font-body) !important;
}
#screen-stats .biomarker-card .bm-bar-wrap {
  border-radius: var(--r-pill) !important;
}
#screen-stats .biomarker-card .bm-bar-fill {
  border-radius: var(--r-pill) !important;
}


/* ══════════════════════════════════════════════════════
   ФУНДАМЕНТ — V2.7
   ══════════════════════════════════════════════════════ */

/* Section eyebrow */
#screen-stats .wkb-section-eyebrow {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--vv-green-dark) !important;
}
#screen-stats .wkb-section-title {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
}
#screen-stats .wkb-progress-meta {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--ink-3) !important;
}

/* Habit cards */
#screen-stats .wkb-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
  box-shadow: var(--sh-1) !important;
}
#screen-stats .wkb-found-card.is-done {
  border-color: var(--vv-green) !important;
  background: linear-gradient(180deg, var(--vv-green-tint) 0%, var(--paper) 60%) !important;
}
#screen-stats .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;
}
#screen-stats .wkb-found-streak-badge {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
}
#screen-stats .wkb-found-streak-badge.has-streak {
  background: #FFF3E0 !important;
  color: #E65100 !important;
}

/* Difficulty/tracking pills inline */
#screen-stats .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;
}
#screen-stats .wkb-found-card .btn-berry:hover {
  background: var(--vv-green-dark) !important;
  border-color: var(--vv-green-dark) !important;
}

/* Progress bar */
#screen-stats .wkb-bar {
  border-radius: var(--r-pill) !important;
}
#screen-stats .wkb-bar-fill {
  border-radius: var(--r-pill) !important;
}

/* Level rows */
#screen-stats .wkb-level-row {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 12px 14px !important;
}
#screen-stats .wkb-level-expandable:hover {
  border-color: var(--vv-green) !important;
}
#screen-stats .wkb-level-expandable.is-open {
  border-color: var(--vv-green) !important;
  background: var(--vv-green-tint) !important;
}
#screen-stats .wkb-level-num {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  border-radius: var(--r-sm) !important;
}
#screen-stats .wkb-level-title {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
#screen-stats .wkb-level-sub {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
}
#screen-stats .wkb-level-theses {
  border-left: 2px solid rgba(45,190,100,.25) !important;
}

/* Calendar */
#screen-stats .wkb-cal-cell {
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
#screen-stats .wkb-cal-legend {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
}
#screen-stats .wkb-cal-swatch {
  border-radius: 4px !important;
}


/* ── Empty states ── */
#screen-stats .wkb-empty {
  font-family: var(--font-body) !important;
  text-align: center !important;
  padding: 28px 20px !important;
  color: var(--ink-3) !important;
}
#screen-stats .wkb-loading {
  font-family: var(--font-body) !important;
  color: var(--ink-3) !important;
}


/* ── Spacer fix ── */
#screen-stats .spacer-lg {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   NIGHT THEME — V2.8 comprehensive overrides
   ═══════════════════════════════════════════════════════════ */

.vv-theme-night .screen {
  color: var(--ink) !important;
}

.vv-theme-night .chat-header {
  color: var(--ink) !important;
}

.vv-theme-night input,
.vv-theme-night textarea,
.vv-theme-night select {
  background: var(--dv2-surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.vv-theme-night input::placeholder,
.vv-theme-night textarea::placeholder {
  color: var(--ink-4) !important;
}

.vv-theme-night .btn-outline,
.vv-theme-night .btn-ghost {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .btn-green {
  background: var(--vv-green) !important;
  color: white !important;
}

.vv-theme-night .btn-berry {
  background: var(--vv-berry) !important;
  color: white !important;
}

.vv-theme-night .wkb-card,
.vv-theme-night .wkb-pane,
.vv-theme-night .biomarker-card {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .wkb-found-card.is-done {
  background: linear-gradient(180deg, var(--vv-green-tint) 0%, var(--paper) 60%) !important;
}

.vv-theme-night .wkb-goal-card {
  background: var(--vv-green-tint) !important;
  border-color: rgba(50,208,106,.20) !important;
}

.vv-theme-night .wkb-tab-strip {
  background: var(--dv2-surface-2) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .wkb-tab.is-on {
  background: var(--dv2-surface) !important;
}

.vv-theme-night .dv2-status-line {
  color: var(--dv2-status-col) !important;
}

.vv-theme-night .dv2-status-sep {
  color: var(--dv2-status-col) !important;
}

.vv-theme-night .dv2-goal-chip {
  background: var(--dv2-chip-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .dv2-plan-card,
.vv-theme-night .dv2-next-meal-card {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.vv-theme-night .dv2-plan-body {
  color: var(--ink-2) !important;
}

.vv-theme-night .dv2-meal-hero {
  background: var(--dv2-surface) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .dv2-sticky-checkout {
  background: var(--dv2-glass) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-ld-section {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-ld-summary {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-ld-habit {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-ld-qbtn {
  background: var(--dv2-surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-lh-group {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-lh-row {
  border-bottom-color: var(--line) !important;
  color: var(--ink) !important;
}

.vv-theme-night .lh-chip {
  background: var(--dv2-chip-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .lh-chip-active {
  background: var(--vv-green) !important;
  color: white !important;
  border-color: var(--vv-green) !important;
}

.vv-theme-night .vv-modal-overlay {
  background: rgba(0,0,0,.7) !important;
}
.vv-theme-night .vv-modal-content,
.vv-theme-night .vv-lh-modal {
  background: var(--dv2-surface) !important;
  color: var(--ink) !important;
}
.vv-theme-night .vv-modal-close {
  background: var(--dv2-surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .wkb-level-row {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .wkb-found-streak-badge.has-streak {
  background: rgba(230,81,0,.18) !important;
  color: #FFB74D !important;
}

.vv-theme-night .vv-itog-toggle {
  background: var(--dv2-surface-2) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-itog-readiness,
.vv-theme-night .vv-itog-nutrition-card {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-itog-life-item {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-itog-qbtn {
  background: var(--dv2-surface) !important;
  color: var(--ink-2) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-itog-week-day {
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.vv-theme-night #vv-diary-sections {
  background: var(--dv2-surface-2) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .wkb-food-day-totals {
  background: var(--vv-green-tint) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .wkb-food-meal-block {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .vv-meal-btn-eat {
  background: var(--dv2-surface-2) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .wkb-food-empty {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.vv-theme-night .wkb-cal-cell {
  color: var(--ink) !important;
}

.vv-theme-night .wkb-empty,
.vv-theme-night .wkb-loading {
  color: var(--ink-3) !important;
}

.vv-theme-night .wkb-tip-of-day-wrap {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* Cart inline styles overrides */
.vv-theme-night #screen-cart [style*="background:#f"] {
  background: var(--paper) !important;
}
.vv-theme-night #screen-cart [style*="background: #f"] {
  background: var(--paper) !important;
}
/* ⚠ ЦВЕТ ЕДОКА — ОСМЫСЛЕННЫЙ, ЕГО НЕ ГАСИМ (18.09.2026, VVELL-980).
   Владелец прислал снимок строки «для: Арина · Ктокто»: имена белые, хотя выше в чипах у
   каждого свой цвет — «там должно дублироваться же цвет кружка». Разметка была верной
   (`style="color:#4C8DC4"`), но это правило с `!important` перекрашивало ЛЮБОЙ инлайн-цвет
   внутри корзины в ночной теме — оно писалось против тёмных инлайн-цветов, которые на тёмном
   фоне становились нечитаемыми, и заодно убивало цвета семьи.
   Исключения перечислены поимённо: это те места, где цвет несёт смысл, а не остался от вёрстки. */
.vv-theme-night #screen-cart [style*="color:#"]:not(.vv-fam-name):not(.vv-dish-mrow):not(.vv-fam-chip) {
  color: var(--ink) !important;
}

/* Generic overrides for inline-styled elements */
.vv-theme-night [style*="background:#fff"],
.vv-theme-night [style*="background: #fff"],
.vv-theme-night [style*="background:#FFF"],
.vv-theme-night [style*="background: #FFF"],
.vv-theme-night [style*="background:white"],
.vv-theme-night [style*="background: white"] {
  background: var(--paper) !important;
}
.vv-theme-night [style*="color:#10170F"],
.vv-theme-night [style*="color: #10170F"],
.vv-theme-night [style*="color:#3F3B33"],
.vv-theme-night [style*="color: #3F3B33"] {
  color: var(--ink) !important;
}
.vv-theme-night [style*="border-color:#E8E1D4"],
.vv-theme-night [style*="border-color: #E8E1D4"],
.vv-theme-night [style*="border:1px solid #E8"],
.vv-theme-night [style*="border: 1px solid #E8"] {
  border-color: var(--line) !important;
}

/* ═══════════════════════════════════════════════════════════
   V2.8B — Dark contrast fixes
   ═══════════════════════════════════════════════════════════ */

/* Shadows: day-mode rgba(20,14,0,.08) invisible on dark — use darker */
.vv-theme-night #screen-cart .cook-mode-btn.active,
.vv-theme-night #screen-lifehacks .lh-tab.active,
.vv-theme-night #screen-stats .wkb-tab.is-on,
.vv-theme-night .vv-itog-toggle-btn.is-active,
.vv-theme-night #screen-progress #vv-diary-sections .vv-dsec.is-on,
.vv-theme-night #screen-dashboard .vv-recs-tab.is-on {
  box-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
}

/* Meal card — full dark adaptation */
.vv-theme-night .dv2-meal-card {
  background: rgba(50,208,106,.10) !important;
  border-color: rgba(50,208,106,.20) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}
.vv-theme-night .dv2-meal-card::before {
  background: rgba(50,208,106,.15) !important;
}
.vv-theme-night .dv2-meal-next {
  color: #3FE07A !important;
}
.vv-theme-night .dv2-meal-badge {
  background: var(--dv2-surface-2) !important;
  color: #3FE07A !important;
}
.vv-theme-night .dv2-why-block {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(50,208,106,.18) !important;
}
.vv-theme-night .dv2-why-title {
  color: #3FE07A !important;
}
.vv-theme-night .dv2-why-chip {
  background: rgba(50,208,106,.12) !important;
  color: #3FE07A !important;
}

/* Plan section title — night */
.vv-theme-night .dv2-plan-section-title {
  color: #3FE07A !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Plan toggle — night */
.vv-theme-night .dv2-plan-toggle {
  background: rgba(50,208,106,.12) !important;
  border-color: var(--vv-green) !important;
  color: #3FE07A !important;
}
.vv-theme-night .dv2-plan-toggle:hover {
  background: var(--vv-green) !important;
  border-color: var(--vv-green) !important;
  color: #fff !important;
}

/* Checkout bar shadow */
.vv-theme-night .dv2-sticky-checkout {
  box-shadow: 0 -4px 20px rgba(0,0,0,.25) !important;
}

/* Chat greeting card in night */
.vv-theme-night #screen-chat #vv-chat-greeting {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

/* Ночной блок `.vv-chat-stop-btn` удалён 12.08.2026 вместе с дневным —
   класса не существует, см. комментарий выше по файлу. */

/* Chat AI cart product cards */
.vv-theme-night #screen-chat .vv-ai-cart {
  background: var(--paper) !important;
  border-color: var(--dv2-ai-border) !important;
}

/* Chat AI pick button */
.vv-theme-night #screen-chat .vv-ai-pick {
  background: var(--paper) !important;
  border-color: var(--vv-green) !important;
  color: var(--vv-green) !important;
}

/* Chat AI ghost button */
.vv-theme-night #screen-chat .vv-ai-btn-ghost {
  background: var(--paper) !important;
  color: var(--vv-green) !important;
}

/* Quick reply chips */
.vv-theme-night #screen-chat .qr-chip {
  background: var(--vv-green-tint) !important;
  color: var(--vv-green-dark) !important;
}

/* Chat input */
.vv-theme-night #screen-chat .chat-input {
  background: var(--dv2-surface) !important;
  border-color: var(--line) !important;
}

/* Lifehack empty state */
.vv-theme-night .dv2-lh-empty {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* Lifehack modal */
.vv-theme-night #vv-lifehack-modal .vv-modal-content {
  background: var(--dv2-surface) !important;
}
.vv-theme-night #vv-lifehack-modal .vv-modal-close {
  background: var(--dv2-surface-2) !important;
  color: var(--ink) !important;
}

/* Diary lifestyle progress bar track */
.vv-theme-night #screen-progress .vv-ld-bar {
  background: var(--dv2-surface-2) !important;
}

/* Diary food progress bar track */
.vv-theme-night #screen-progress .wkb-food-progress-bar {
  background: rgba(255,255,255,.10) !important;
}

/* Budget mode card */
.vv-theme-night #screen-cart .budget-mode {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* Day selector buttons */
.vv-theme-night #screen-cart .vv-day-btn {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* Meal toggle pills */
.vv-theme-night #screen-cart .vv-meal-toggle-pill {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* Store selector input */
.vv-theme-night #screen-cart #store-selector input {
  background: var(--dv2-surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Inline-styled elements from JS */
.vv-theme-night [style*="color:#756C5D"],
.vv-theme-night [style*="color: #756C5D"],
.vv-theme-night [style*="color:#766B59"],
.vv-theme-night [style*="color: #766B59"],
.vv-theme-night [style*="color:#9A927F"],
.vv-theme-night [style*="color: #9A927F"] {
  color: var(--ink-3) !important;
}

.vv-theme-night [style*="color:#159145"],
.vv-theme-night [style*="color: #159145"],
.vv-theme-night [style*="color:#137C39"],
.vv-theme-night [style*="color: #137C39"] {
  color: var(--vv-green-dark) !important;
}

.vv-theme-night [style*="background:#F8F"],
.vv-theme-night [style*="background: #F8F"],
.vv-theme-night [style*="background:#F7F"],
.vv-theme-night [style*="background: #F7F"],
.vv-theme-night [style*="background:#EDE"],
.vv-theme-night [style*="background: #EDE"],
.vv-theme-night [style*="background:#f5f"],
.vv-theme-night [style*="background: #f5f"] {
  background: var(--dv2-surface-2) !important;
}

.vv-theme-night [style*="border-color:#E8E"],
.vv-theme-night [style*="border-color: #E8E"],
.vv-theme-night [style*="border-bottom:1px solid #f5"],
.vv-theme-night [style*="border-bottom: 1px solid #f5"],
.vv-theme-night [style*="border-bottom:1px solid #E8"],
.vv-theme-night [style*="border-bottom: 1px solid #E8"] {
  border-color: var(--line) !important;
}


/* ── Store selector dark theme ── */
.vv-theme-night #vv-store-search {
  color: var(--ink) !important;
  background: var(--dv2-surface) !important;
  border-color: var(--dv2-border) !important;
}
.vv-theme-night #vv-store-search::placeholder {
  color: var(--ink-4) !important;
}
.vv-theme-night #vv-store-results button {
  color: var(--ink) !important;
  border-color: var(--dv2-border-soft) !important;
}
.vv-theme-night #vv-store-results button:hover {
  background: var(--dv2-surface-2) !important;
  color: var(--vv-green) !important;
}
.vv-theme-night #store-selector [style*="background:var(--card)"],
.vv-theme-night #store-selector > div {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.vv-theme-night #vv-stock-result {
  color: var(--ink-2) !important;
}

/* ── Store stock check & rebuild ── */
.vv-stock-ok {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #27ae60;
  padding: 8px 0;
}
.vv-stock-ok-icon { font-size: 16px; }

.vv-stock-partial {
  padding: 10px 0;
}
.vv-stock-partial-status {
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.vv-stock-partial-missing {
  font-size: 12px; color: var(--ink-3);
  margin-bottom: 10px;
  line-height: 1.4;
}
.vv-rebuild-btn {
  width: 100%;
  padding: 10px 0;
  font-size: 14px; font-weight: 600;
  border-radius: var(--r-xs);
  margin-bottom: 6px;
}
.vv-rebuild-hint {
  font-size: 11px; color: var(--ink-3);
  text-align: center;
}

.vv-stock-rebuilt {
  padding: 10px 0;
}
.vv-stock-rebuilt-status {
  font-size: 13px; font-weight: 600;
  color: #27ae60;
  margin-bottom: 4px;
}
.vv-stock-rebuilt-details {
  font-size: 12px; color: var(--ink-2);
  margin-bottom: 2px;
}
.vv-rebuild-warnings {
  font-size: 11px; color: #e67e22;
  margin-top: 4px;
  line-height: 1.4;
}

/* Night overrides — stock */
.vv-theme-night .vv-stock-partial-status { color: var(--ink) !important; }
.vv-theme-night .vv-stock-rebuilt-status { color: #2ecc71 !important; }

/* ── Foundation themes ── */
.vv-themes-list { display: flex; flex-direction: column; gap: 10px; }
.vv-theme-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  transition: border-color .15s;
}
.vv-theme-card.is-open { border-color: var(--vv-green); }
.vv-theme-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vv-theme-icon { font-size: 22px; flex-shrink: 0; }
.vv-theme-info { flex: 1; min-width: 0; }
.vv-theme-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.vv-theme-desc { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.vv-theme-count { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.vv-theme-badge {
  font-size: 11px; font-weight: 700; color: var(--vv-green);
  background: var(--vv-green-tint, rgba(45,190,100,.1));
  padding: 2px 8px; border-radius: var(--r-xs); white-space: nowrap;
}
.vv-theme-chevron {
  width: 16px; height: 16px; max-width: 16px; max-height: 16px;
  flex-shrink: 0; flex-grow: 0;
  color: var(--ink-3);
  transition: transform .2s;
  display: block;
}
.vv-theme-card.is-open .vv-theme-chevron { transform: rotate(90deg); }
.vv-theme-habits {
  padding: 0 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
/* ⚠ Парная строка к такой же в app.css: без неё атрибут hidden на списке
   привычек не работает — `display:flex` авторского стиля перебивает
   `[hidden]{display:none}` браузера. Дублируется намеренно: app.css
   объявляет свою копию `.vv-theme-habits`, и одного правила мало. */
.vv-theme-habits[hidden] { display: none; }

/* ── Фундамент: ступени сложности внутри темы (16.08.2026) ──
   Градация про УСИЛИЕ, а не про пользу: «стакан воды утром» и «ложиться
   до 23:00» одинаково полезны, но стоят человеку разного. */
.vv-found-step { margin: 6px 0 2px; }
.vv-found-step:first-child { margin-top: 0; }
.vv-found-step-name {
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--ink-2, #3d4a3a);
  display: flex; align-items: center; gap: 7px;
}
.vv-found-step-dots { display: inline-flex; gap: 3px; }
.vv-found-step-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line, #E8E1D4); display: block;
}
.vv-found-step-dots i.is-on { background: var(--vv-green, #2DBE64); }
.vv-found-step-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.3; }

/* ── Фундамент: «лесенка» — группа привычек, где выбирается ОДНА (VVELL-1299, 09.10.2026) ──
   Шаги 8 000 / 10 000: рамка с заголовком, внутри карточки обычного вида без внешней тени
   («карточка в карточке» не нужна), у каждой своя метка уровня. Цвета — только токенами,
   поэтому светлая и ночная тема (.vv-theme-night) меняются сами. Цель касания карточки ≥ 44px. */
.vv-ladder {
  margin: 8px 0 6px; padding: 10px 10px 8px;
  border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  display: flex; flex-direction: column; gap: 8px;
}
.vv-ladder-head { font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.vv-ladder-hint { font-size: 12px; color: var(--ink-3); line-height: 1.35; margin-top: -4px; }
.vv-ladder-both {
  font-size: 12px; line-height: 1.35; color: var(--ink-2, var(--ink-3));
  padding: 8px 10px; border-radius: 10px; background: var(--line-soft, rgba(0,0,0,.04));
}
.vv-ladder-both[hidden] { display: none; }
#screen-stats .vv-ladder .wkb-found-card,
#screen-progress .vv-ladder .wkb-found-card,
.vv-ladder .wkb-found-card { box-shadow: none !important; margin: 0 !important; min-height: 44px; }
.vv-ladder-level {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; line-height: 1.3;
  padding-top: 1px;
}
.wkb-found-swap {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--vv-green-dark, #0F6E3E);
}
.wkb-found-swap .wh-ic { width: 14px; height: 14px; vertical-align: 0; }
/* ⚠ Ночью — светлый зелёный, как у чипов выше: тёмный на ночном фоне даёт контраст ниже 4.5. */
.vv-theme-night .wkb-found-swap { color: var(--vv-green, #3FC08B); }

/* ── «Ты отмечаешь»: чипы выбранного (16.08.2026) ──
   Заменили блок отметки: тап по чипу СНИМАЕТ привычку. Цель касания 44px —
   правило проекта, а не украшение: чип это боевая кнопка, а не подпись. */
.vv-found-chosen:empty { display: none; }
.vv-found-chosen { margin: 2px 0 12px; }
.vv-found-chosen-head {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.vv-found-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vv-found-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--vv-green, #2DBE64);
  background: var(--vv-green-tint, rgba(45,190,100,.1));
  color: var(--vv-green-dark, #0F6E3E);
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vv-found-chip:active { transform: scale(.98); }
.vv-found-chip-x { flex: 0 0 auto; opacity: .7; }
/* ⚠ НОЧЬЮ БЕРЁМ СВЕТЛЫЙ ЗЕЛЁНЫЙ, А НЕ ТЁМНЫЙ. Замер со смешиванием альфы
   подложки: --vv-green-dark на тинте поверх ночного фона даёт 3.96 — ниже
   порога 4.5 для 13px, --vv-green даёт 5.90. Днём тёмный оставляем: там
   он даёт 5.65 на светлом тинте. */
.vv-theme-night .vv-found-chip { color: var(--vv-green, #3FC08B); }
.vv-found-chosen-note { font-size: 12px; color: var(--ink-3); margin-top: 8px; line-height: 1.35; }
.vv-theme-diff {
  font-size: 11px; padding: 2px 8px; border-radius: 6px;
  font-weight: 600;
  background: var(--ink-5, #f0f0f0); color: var(--ink-3);
}
.vv-diff-easy { background: #e8f5e9; color: #2e7d32; }
.vv-diff-medium { background: #fff3e0; color: #e65100; }
.vv-diff-hard { background: #fce4ec; color: #c62828; }

/* Night overrides — themes */
.vv-theme-night .vv-theme-card { background: var(--paper) !important; border-color: var(--line) !important; }
.vv-theme-night .vv-theme-card.is-open { border-color: var(--vv-green) !important; }
.vv-theme-night .vv-theme-name { color: var(--ink) !important; }
.vv-theme-night .vv-diff-easy { background: rgba(46,125,50,.15); color: #66bb6a; }
.vv-theme-night .vv-diff-medium { background: rgba(230,81,0,.15); color: #ffb74d; }
.vv-theme-night .vv-diff-hard { background: rgba(198,40,40,.15); color: #ef9a9a; }

/* Scrollbar in night mode */
.vv-theme-night ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15) !important;
}
.vv-theme-night ::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ── Ночная тема: добивка поверхностей на хардкод-градиентах + фон страницы ── */
.vv-theme-night body { background: var(--bg); }
.vv-theme-night .wkb-widget-foundation,
.vv-theme-night .wkb-widget-spheres,
.vv-theme-night .wkb-widget-diary { background: var(--card); }

/* ── Экран «Что приготовить» (Блок 2) ── */
#screen-cook .cook-head { margin-bottom: 16px; }
#screen-cook #cook-list { display: flex; flex-direction: column; gap: 12px; }
#screen-cook .cook-empty { text-align: center; padding: 40px 20px; color: var(--ink-3); font-family: var(--font-body); font-size: 14px; }
#screen-cook .cook-empty-emoji { font-size: 40px; margin-bottom: 12px; }
#screen-cook .cook-empty-title { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
#screen-cook .cook-empty-sub { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
#screen-cook .cook-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
/* Заголовок рецепта в приоритете: раньше бейджи с фиксированной шириной выдавливали
   название на 2-3 строки («Творог с ягодами и мёдом» ломался трижды). Теперь шапка
   в две строки — название на всю ширину, бейджи под ним, шеврон прижат вправо. */
#screen-cook .cook-card-head {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  column-gap: 10px; row-gap: 6px; margin-bottom: 10px;
}
#screen-cook .cook-card-title {
  font-family: var(--font-display, var(--font-body)); font-size: 16px; font-weight: 800;
  color: var(--ink); line-height: 1.25; grid-column: 1; text-wrap: balance;
}
#screen-cook .cook-card-badges {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  grid-column: 1 / -1; grid-row: 2;
}
#screen-cook .cook-caret { grid-column: 2; grid-row: 1; }
#screen-cook .cook-badge { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--bg-warm); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
#screen-cook .cook-badge-ok { color: #fff; background: var(--vv-green); border-color: var(--vv-green); }
#screen-cook .cook-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#screen-cook .cook-chip-label { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
#screen-cook .cook-chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; border: 1px solid transparent; white-space: nowrap; }
#screen-cook .cook-chip-have { background: var(--vv-green-tint, #EAF5E1); color: var(--vv-green-dark, #2E5D00); }
#screen-cook .cook-chip-miss { background: var(--bg-warm); color: var(--ink-3); border-color: var(--line); }
#screen-cook .cook-steps { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-2); line-height: 1.5; }
#screen-cook .cook-card-head { cursor: pointer; }
/* Иконки вместо эмодзи (принцип из ресёрча корзины: эмодзи не тонируются
   тёмной темой и читаются как промо). Размер выровнен по строке бейджа. */
#screen-cook .cook-badge .wh-ic,
#screen-cook .cook-own-chip .wh-ic,
#screen-cook .cook-add-all .wh-ic { width: 13px; height: 13px; vertical-align: -2px; }
#screen-cook .cook-badge,
#screen-cook .cook-own-chip,
#screen-cook .cook-add-all { display: inline-flex; align-items: center; gap: 5px; }
#screen-cook .cook-caret { color: var(--ink-3); transition: transform .2s; align-self: center; display: inline-flex; }
#screen-cook .cook-caret .wh-ic { width: 15px; height: 15px; }
/* Возврат того, что отметили «есть дома»: без этой строки отметка необратима из карточки. */
#screen-cook .cook-own-back-row { display: flex; flex-wrap: wrap; gap: 6px; }
#screen-cook .cook-own-back {
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 11px;
  border: 1px dashed var(--line); background: transparent; color: var(--ink-3);
  cursor: pointer; white-space: nowrap;
}
#screen-cook .cook-own-back:hover { border-style: solid; color: var(--ink-2); }
#screen-cook .cook-card-open .cook-caret { transform: rotate(180deg); }
#screen-cook .cook-detail { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
#screen-cook .cook-detail-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--vv-green-dark, #2E5D00); margin: 12px 0 6px; }
#screen-cook .cook-detail > .cook-detail-label:first-child { margin-top: 0; }
#screen-cook .cook-ings { margin: 0; padding-left: 18px; }
#screen-cook .cook-ings li { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
#screen-cook .cook-steps-list { margin: 0; padding-left: 20px; }
#screen-cook .cook-steps-list li { font-size: 13.5px; color: var(--ink); line-height: 1.55; margin-bottom: 8px; }
#screen-cook .cook-add-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#screen-cook .cook-add-chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 11px; border: 1px solid var(--vv-green); background: var(--paper); color: var(--vv-green-dark, #2E5D00); cursor: pointer; }
#screen-cook .cook-add-chip:active { background: var(--vv-green-tint, #EAF5E1); }
#screen-cook .cook-add-all { width: 100%; padding: 11px; border-radius: var(--r-sm); border: none; background: var(--vv-green); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 10px; }
#screen-cook .cook-miss-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
#screen-cook .cook-miss-row:last-of-type { border-bottom: none; }
#screen-cook .cook-miss-name { font-size: 13px; color: var(--ink-2); flex: 1; min-width: 0; }
#screen-cook .cook-miss-btns { display: flex; gap: 6px; flex-shrink: 0; }
#screen-cook .cook-own-chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 10px; border: 1px solid var(--line); background: var(--bg-warm); color: var(--ink-3); cursor: pointer; white-space: nowrap; }

/* ── Полоска «Из этого можно приготовить» в Корзине (ОС #4) ── */

/* ── Готовим: вкладки (Под корзину / Докупить) ── */
#screen-cook .cook-tabs { display: flex; gap: 0; background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; margin-bottom: 14px; }
/* ⚠ min-height 44 — НЕ украшение. Замерено скриншотером 07.08: вкладка была 38px,
   чип 33px при норме касания 44 (Apple HIG) / 48 (Material). Промах пальцем по
   главному фильтру экрана читается как «приложение не отвечает». */
#screen-cook .cook-tab { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; border: none; background: transparent; border-radius: var(--r-xs); padding: 9px 6px; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--ink-3); cursor: pointer; transition: all .18s var(--ease); }
#screen-cook .cook-tab.active { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--vv-green-dark, #2E5D00); }
#screen-cook #cook-tab-cart, #screen-cook #cook-tab-add { display: flex; flex-direction: column; gap: 12px; }
/* gap 8, а не 6: между соседними целями касания нужно минимум 8px, иначе на
   горизонтальной ленте палец задевает соседний фильтр (Apple HIG, Material). */
#screen-cook .cook-dish-filter { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#screen-cook .cook-dish-filter::-webkit-scrollbar { display: none; }
#screen-cook .cook-dish-chip { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
#screen-cook .cook-dish-chip.active { background: var(--vv-green); border-color: var(--vv-green); color: #fff; }

/* ── Всплывашка «Из корзины приготовишь» ── */
.vv-cookpop .vv-cookpop-note { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; line-height: 1.4; }
.vv-cookpop .vv-cookpop-dishes { display: flex; flex-direction: column; gap: 8px; }
.vv-cookpop .vv-cookpop-dish { background: var(--vv-green-tint, #EAF5E1); border-radius: var(--r-sm); padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--ink); }

/* ============================================================
   WHOOP-СТИЛЬ ВВОДНАЯ (эксперимент, тумблер) — тёмный, самодостаточный
   ============================================================ */
.wh-home, .wh-detail {
  /* Тема-aware: строимся на токенах приложения (--dv2-*), флипают день/ночь */
  --wh-card: var(--dv2-surface); --wh-card-2: var(--dv2-surface-2); --wh-line: var(--dv2-border);
  --wh-ink: var(--dv2-text); --wh-ink-2: var(--dv2-muted); --wh-ink-3: var(--dv2-muted-2);
  --wh-green: var(--dv2-green); --wh-yellow: var(--vv-orange, #FA5F0A); --wh-red: var(--dv2-berry); /* mid=бренд-оранжевый */
  --wh-blue: var(--dv2-green); --wh-teal: var(--dv2-green-dark); /* сон/нагрузка — бренд-зелёные (teal/blue в бренде нет) */
  background: var(--dv2-bg); color: var(--dv2-text);
  margin: -8px -16px 0; padding: 10px 16px 40px;
  font-family: var(--dv2-font-ui, inherit);
  font-variant-numeric: tabular-nums;
}
.wh-loading { padding: 60px 0; text-align: center; color: var(--dv2-muted); }

.vv-home-toggle {
  position: fixed; right: 14px; bottom: calc(var(--vv-nav-h, 76px) + 8px); z-index: 60;
  background: var(--dv2-surface); color: var(--dv2-text-2); border: 1px solid var(--dv2-border);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; box-shadow: var(--dv2-shadow);
}
.vv-home-toggle:hover { border-color: var(--dv2-green); color: var(--dv2-green-dark); }

.wh-head { text-align: center; margin-bottom: 6px; position: relative; }
.wh-customize { position: absolute; top: 0; right: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--wh-card); border: 1px solid var(--wh-line); color: var(--wh-ink-2);
  font-size: 15px; cursor: pointer; font-family: inherit; line-height: 1; }
.wh-customize:hover { border-color: var(--dv2-green); color: var(--dv2-green-dark); }

/* Панель настройки вводной */
.wh-cust-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center; }
.wh-cust-panel { width: 100%; max-width: 480px; background: var(--dv2-surface); color: var(--dv2-text);
  border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,.25); max-height: 80vh; overflow-y: auto; }
.wh-cust-head { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--dv2-font-heading); font-size: 18px; font-weight: 700; }
.wh-cust-x { background: none; border: none; color: var(--dv2-muted); font-size: 20px; cursor: pointer; padding: 4px; }
.wh-cust-note { font-size: 12.5px; color: var(--dv2-muted); margin: 4px 0 12px; }
.wh-cust-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 4px; border-bottom: 1px solid var(--dv2-border-soft); font-size: 14px; cursor: pointer; }
.wh-cust-row:last-child { border-bottom: none; }
.wh-cust-row input { width: 20px; height: 20px; accent-color: var(--dv2-green); cursor: pointer; flex-shrink: 0; }
.wh-head-date { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #7b8494; }
.wh-head-title { font-family: var(--dv2-font-heading); font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }

/* Кольца */
.wh-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 18px 0 20px; }
.wh-ring-wrap { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.wh-ring { width: 100%; max-width: 116px; aspect-ratio: 1; transform: rotate(-90deg); }
.wh-ring-bg { fill: none; stroke: var(--wh-line); stroke-width: 9; }
.wh-ring-fg { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.wh-ring-wrap { position: relative; }
.wh-ring-center { position: absolute; top: 0; left: 0; right: 0; bottom: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.wh-ring-big { font-size: 26px; font-weight: 800; line-height: 1; }
.wh-ring-sub { font-size: 10px; color: var(--wh-ink-3); margin-top: 3px; }
.wh-ring-label { font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--wh-ink-2); margin-top: 5px; text-align: center; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wh-ring-fg { transition: none; } }

/* Инсайт */
.wh-insight { background: var(--wh-card); border: 1px solid var(--wh-line); border-left: 3px solid;
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px; }
.wh-insight-title { font-weight: 750; font-size: 15px; margin-bottom: 5px; }
.wh-insight-text { font-size: 13px; color: var(--wh-ink-2); line-height: 1.5; }

/* 2 монитора */
.wh-monitors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.wh-mon { background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--r-md); padding: 13px 14px; cursor: pointer; }
.wh-mon:hover { border-color: #38414f; }
.wh-mon-top { display: flex; align-items: center; justify-content: space-between; }
.wh-mon-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wh-ink-2); }
.wh-mon-chev { color: var(--wh-ink-3); font-size: 18px; }
.wh-mon-body { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.wh-mon-badge { width: 30px; height: 30px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; flex-shrink: 0; }
.wh-mon-badge.ok { background: rgba(22,209,127,.16); color: var(--wh-green); }
.wh-mon-badge.warn { background: rgba(242,128,43,.15); color: var(--wh-yellow); }
/* Плашка «Монитора здоровья» держит либо ЧИСЛО (позиции в дневнике), либо значок
   из общего набора (17.08.2026: раньше на его месте стоял символ «✓»). Базовые
   20 px значка в кружке 30×30 смотрятся распёртыми, а vertical-align:-3px из
   общего правила .wh-ic (ниже по файлу) сдвинул бы картинку вниз — во flex-центре
   он не нужен. Число этим правилом не задевается: оно не .wh-ic. */
.wh-mon-badge .wh-ic { width: 17px; height: 17px; vertical-align: 0; }
.wh-mon-status { font-size: 15px; font-weight: 750; }
.wh-mon-sub { font-size: 12px; color: var(--wh-ink-3); margin-top: 1px; }
.wh-mon-empty { color: var(--wh-ink-3); font-size: 13px; }

/* Мой день */
.wh-myday-h { font-family: var(--dv2-font-heading); font-size: 17px; font-weight: 600; margin: 22px 0 10px; }
.wh-myday { background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--r-md); overflow: hidden; }
.wh-myday-row { display: flex; align-items: center; gap: 11px; padding: 14px 15px; cursor: pointer; border-bottom: 1px solid var(--wh-line); }
.wh-myday-row:last-child { border-bottom: none; }
.wh-myday-row:hover { background: var(--wh-card-2); }
.wh-myday-ic { font-size: 18px; }
.wh-myday-lbl { flex: 1; font-size: 14px; font-weight: 600; }
.wh-myday-val { font-size: 13px; color: var(--wh-ink-2); }
.wh-disclaimer { font-size: 11px; color: var(--wh-ink-3); text-align: center; margin-top: 18px; line-height: 1.4; }

/* Детальный экран (проваливание) */
.wh-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wh-back { background: none; border: none; color: var(--wh-ink); font-size: 30px; line-height: 1; cursor: pointer; padding: 0 6px 4px 0; font-family: inherit; }
.wh-detail-title { font-family: var(--dv2-font-heading); font-size: 19px; font-weight: 600; }
.wh-detail-lead { font-size: 13px; color: var(--wh-ink-2); margin-bottom: 16px; line-height: 1.5; }
.wh-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wh-metric { background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--r-md); padding: 14px; }
.wh-metric-empty { opacity: .6; }
.wh-metric-top { font-size: 12px; font-weight: 700; color: var(--wh-ink-2); display: flex; align-items: center; gap: 6px; }
.wh-metric-val { font-size: 28px; font-weight: 800; margin: 8px 0 4px; }
.wh-metric-unit { font-size: 13px; font-weight: 600; color: var(--wh-ink-3); }
.wh-metric-range { font-size: 11px; color: var(--wh-ink-3); }
/* VVELL-1298: пустой показатель с причиной («не приходит с 16 сентября» и пояснение под ней) */
.wh-metric-wide { grid-column: 1 / -1; }
.wh-metric-gap { opacity: 1; grid-column: 1 / -1; }   /* пояснение читается в полную ширину, а не в узкой половинке */
.wh-metric-gap .wh-metric-val { opacity: .45; }
.wh-metric-gap .wh-metric-range { font-weight: 700; color: var(--wh-ink-2); }
.wh-metric-why { margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--wh-ink-3); }
.wh-metric-hint { display: block; margin-top: 5px; }
.wh-chip { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-xs); }
.wh-chip.ok { background: rgba(22,209,127,.16); color: var(--wh-green); }
.wh-chip.warn { background: rgba(239,92,92,.16); color: var(--wh-red); }
.wh-bar { height: 7px; background: var(--wh-line); border-radius: 5px; overflow: hidden; margin-top: 9px; }
.wh-bar i { display: block; height: 100%; border-radius: 5px; }
.wh-cta { width: 100%; margin-top: 16px; background: var(--dv2-green); color: #fff; border: none;
  border-radius: var(--r-sm); padding: 14px; font-size: 15px; font-weight: 750; cursor: pointer; font-family: inherit; }
.wh-cta:hover { filter: brightness(1.06); }

/* Ряд статов (шаги/актив/нагрузка) */
.wh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.wh-stat { background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--r-md); padding: 12px 10px; text-align: center; }
.wh-stat-ic { font-size: 17px; }
.wh-stat-val { font-size: 16px; font-weight: 800; margin-top: 3px; }
.wh-stat-lbl { font-size: 11px; color: var(--wh-ink-3); margin-top: 2px; }

/* Питание · цель дня (компактное кольцо) */
.wh-nutr { display: flex; align-items: center; gap: 12px; background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--r-md); box-shadow: var(--wh-elev); padding: 12px 14px; margin-bottom: 14px; cursor: pointer; transition: transform .16s ease; }
.wh-nutr:active { transform: scale(.985); }
.wh-nutr-body { flex: 1; min-width: 0; }
.wh-nutr-t { font-size: 14px; font-weight: 700; }
.wh-nutr-s { font-size: 12.5px; color: var(--wh-ink-3); margin-top: 2px; }
/* ── Качество питания за день (16.08.2026) ──
   Карточка отвечает на вопрос «какая у меня сегодня еда», соседняя .wh-nutr — на
   вопрос «сколько её». Поэтому рамка и отступы у них общие: два ответа на один
   вопрос человека не должны выглядеть блоками из разных приложений.
   ⚠ ЦВЕТА ЗДЕСЬ НЕ ЗАДАЮТСЯ НИ ОДНОГО. И плашка слова, и сегменты полосы носят
   классы .vv-grade-lN — те же, что на карточке товара. Свой набор оттенков
   означал бы, что одна и та же еда на двух экранах разного цвета. */
.wh-fq { background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--r-md);
         box-shadow: var(--wh-elev); padding: 12px 14px; margin-bottom: 14px; cursor: pointer;
         transition: transform .16s ease; }
.wh-fq:active { transform: scale(.985); }
.wh-fq-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px;
             font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
             color: var(--wh-ink-2); margin-bottom: 9px; }
.wh-fq-lbl { display: inline-flex; align-items: center; gap: 6px; }
.wh-fq-lbl .wh-ic { width: 15px; height: 15px; }
.wh-fq-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Плашка слова крупнее товарной: на карточке товара она подпись к названию,
   здесь — главный ответ карточки. */
.wh-fq-main .vv-grade { height: 22px; padding: 0 10px; font-size: 12.5px; margin-right: 0; vertical-align: 0; }
.wh-fq-num { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.wh-fq-num i { font-size: 12.5px; font-weight: 600; font-style: normal; color: var(--wh-ink-3); }
/* «часть дня» — не тревога, а оговорка: нейтральная рамка, не жёлтая заливка.
   Жёлтым мы красим «ниже цели», а здесь человек ничего не нарушил. */
.wh-fq-flag { font-size: 11px; font-weight: 700; color: var(--wh-ink-2);
              border: 1px solid var(--wh-line); border-radius: var(--r-xs); padding: 2px 7px; }
.wh-fq-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; margin-top: 10px; gap: 2px; }
.wh-fq-bar i { display: block; height: 100%; }
.wh-fq-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; }
.wh-fq-k { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--wh-ink-2); }
.wh-fq-k i { width: 8px; height: 8px; border-radius: 2px; }
.wh-fq-note { font-size: 12.5px; color: var(--wh-ink-2); margin-top: 9px; }
.wh-fq-cov { font-size: 11.5px; color: var(--wh-ink-3); margin-top: 3px; }
.wh-fq-none { font-size: 12.5px; color: var(--wh-ink-3); }

.wh-mini { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.wh-mini svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.wh-mini-bg { fill: none; stroke: var(--wh-line); stroke-width: 5; }
.wh-mini-fg { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.wh-mini-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: -.02em; color: var(--dv2-green-dark); }
@media (prefers-reduced-motion: reduce) { .wh-mini-fg { transition: none; } }

/* ============================================================
   Премиум-редизайн корзины (в стиле новой главной) — тема-aware
   ============================================================ */
#screen-cart #cart-list .vv-meal-block {
  background: var(--dv2-surface); border: 1px solid var(--dv2-border);
  border-radius: var(--r-lg); padding: 0 0 6px; margin-bottom: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,14,0,.05), 0 10px 24px -8px rgba(20,14,0,.10);
}
.vv-theme-night #screen-cart #cart-list .vv-meal-block { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -8px rgba(0,0,0,.5); }
#screen-cart .vv-meal-head { border-bottom: none; padding: 14px 16px 10px; margin-bottom: 0; }
#screen-cart .vv-meal-title { font-family: var(--dv2-font-heading); font-size: 15px; font-weight: 600; color: var(--dv2-text); }
#screen-cart .vv-meal-total { font-size: 12.5px; font-weight: 700; color: var(--dv2-green-dark); background: var(--dv2-green-tint); padding: 4px 11px; border-radius: 999px; }
#screen-cart .vv-meal-item { padding: 13px 16px; gap: 14px; align-items: center; border-bottom: 1px solid var(--dv2-border-soft); transition: background .15s; }
#screen-cart .vv-meal-item:active { background: var(--dv2-surface-2); }
/* ⚠ 64, А НЕ 88 (28.08.2026, VVELL-481). Снимок товара в 88 px съедал
   четверть строки шириной 316 и оставлял тексту 110 — см. разбор в
   premium.css. На 64 px товар по-прежнему узнаётся, а высоту строки
   картинка не задаёт: текстовый блок и так выше. */
#screen-cart .vv-meal-img { width: 64px; height: 64px; border-radius: var(--r-md); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 27px; flex: 0 0 auto; border: 1px solid var(--dv2-border-soft); }
#screen-cart img.vv-meal-img { object-fit: cover; overflow: hidden; padding: 5px; }
#screen-cart .vv-meal-body { min-width: 0; align-self: center; }
#screen-cart .vv-meal-name { font-size: 14px; font-weight: 600; color: var(--dv2-text); white-space: normal; overflow: hidden; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#screen-cart .vv-meal-meta { font-size: 11.5px; color: var(--dv2-muted); margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* ЦЕНА — ОТДЕЛЬНЫМ УЗЛОМ, БЕЗ ОБРЕЗКИ. Раньше цена была хвостом .vv-meal-meta,
   а тот обрезан -webkit-line-clamp:2. Колонка текста в карточке всего 110px, строка
   «пачка 900 г · ~16 порц. · 350 ккал/100г · 80 ₽» требовала scrollHeight 54 при
   clientHeight 36 — третья строка пряталась, и первой уезжала именно ЦЕНА (она в конце).
   Порядок слов подкрутить мало: любой длинный ярлык количества или четырёхзначная цена
   снова столкнули бы её за обрез. Поэтому цена вынесена из обрезаемого блока — ни clamp,
   ни overflow здесь нет, и обрезать её нечем ни при каких данных. */
#screen-cart .vv-meal-price { font-size: 13px; font-weight: 700; color: var(--dv2-text); margin-top: 3px; line-height: 1.25; }
#screen-cart .vv-meal-reason { color: var(--dv2-green-dark); font-style: normal; font-size: 11px; margin-top: 3px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#screen-cart .vv-meal-actions { flex-direction: row; gap: 7px; align-self: center; }
#screen-cart .vv-meal-btn-swap, #screen-cart .vv-meal-btn-del { width: 34px; height: 34px; border-radius: var(--r-xs); }
#screen-cart .vv-meal-btn-swap { background: var(--dv2-green-tint); color: var(--dv2-green-dark); font-size: 15px; }
#screen-cart .vv-meal-btn-del { background: var(--dv2-surface-2); color: var(--dv2-muted); font-size: 18px; }
#screen-cart .vv-meal-add-more { display: block; width: calc(100% - 32px) !important; box-sizing: border-box !important; margin: 8px 16px 4px !important; border-radius: var(--r-sm); border: 1px dashed var(--dv2-border); background: transparent; color: var(--dv2-green-dark); font-weight: 600; padding: 11px; font-size: 13px; }
#screen-cart .vv-meal-add-more:hover { background: var(--dv2-green-tint); border-color: var(--dv2-green); }
#screen-cart .vv-meal-item.is-eaten { background: var(--dv2-green-tint); border-color: transparent; }
#screen-cart .vv-fv-subhead { padding: 10px 16px 2px !important; }
#screen-cart .vv-meal-btn-swap .wh-ic, #screen-cart .vv-meal-btn-del .wh-ic { width: 16px; height: 16px; vertical-align: 0; }
#screen-cart .vv-meal-actions { flex-direction: row; gap: 7px; align-items: center; }

/* ── Cart config v2 — компактный аккордеон (тест, value-first) ── */
#cfg-v2-root { margin: 0 0 14px; }
.cfgv2 { background: var(--dv2-surface, #fff); border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.07)); border-radius: var(--r-lg); padding: 2px 4px; box-shadow: 0 1px 3px rgba(17,24,39,.04); }
.cfgv2-row { border-bottom: 1px solid var(--dv2-border-soft, rgba(17,24,39,.06)); }
.cfgv2-row:last-of-type { border-bottom: none; }
.cfgv2-head { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 14px 14px; cursor: pointer; text-align: left; }
.cfgv2-label { font-size: 13.5px; font-weight: 600; color: var(--dv2-text, #1c2b2b); }
.cfgv2-val { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--vv-green, #159145); }
.cfgv2-chev { font-size: 19px; line-height: 1; color: var(--dv2-muted, #9aa5a5); transition: transform .2s ease; transform: rotate(90deg); }
.cfgv2-row.open .cfgv2-chev { transform: rotate(-90deg); }
.cfgv2-body { display: none; padding: 0 12px 12px; gap: 8px; flex-wrap: wrap; }
.cfgv2-row.open .cfgv2-body { display: flex; }
.cfgv2-opt { flex: 1 1 30%; min-width: 92px; min-height: 44px; padding: 10px 8px; border-radius: var(--r-sm); border: 1px solid var(--dv2-border, rgba(17,24,39,.1)); background: var(--dv2-surface-2, #f6f8f7); color: var(--dv2-text, #1c2b2b); font-size: 12.5px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; text-align: center; transition: border-color .15s, background .15s; }
.cfgv2-opt small { font-weight: 500; font-size: 10.5px; color: var(--dv2-muted, #9aa5a5); }
.cfgv2-opt.active { border-color: var(--vv-green, #159145); background: var(--dv2-green-tint, #eaf6ee); color: var(--vv-green, #159145); }
.cfgv2-opt.active small { color: var(--vv-green, #159145); }
.cfgv2-opt:disabled { opacity: .5; cursor: default; }
.cfgv2-base { padding: 4px 14px 10px; font-size: 11px; font-weight: 500; color: var(--dv2-muted, #9aa5a5); line-height: 1.35; }
.cfgv2-view { display: flex; justify-content: flex-end; padding: 2px 12px 8px; }
.cfgv2-view button { background: none; border: none; color: var(--dv2-muted, #9aa5a5); font-size: 11.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cfgv2-view button:hover { color: var(--vv-green, #159145); }
/* cfg-v2: унификация остальных блоков корзины под единый card-ритм */
#screen-cart.cfg-v2 #store-selector > div { border-radius: var(--r-lg) !important; border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.07)) !important; background: var(--dv2-surface, #fff) !important; box-shadow: 0 1px 3px rgba(17,24,39,.04); padding: 16px !important; margin: 0 0 14px !important; }
#screen-cart.cfg-v2 #vv-fam-toggle { margin-bottom: 14px; }

/* ── Готовые корзины под цель — горизонтальный стрип (value-first, наш стиль) ── */
#gcarts-strip { margin: 0 0 16px; }
.gcarts-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gcarts-title { font-size: 13.5px; font-weight: 700; color: var(--dv2-text, #1c2b2b); margin: 2px 2px 3px; }
.gcarts-sub { font-size: 11.5px; color: var(--dv2-muted, #9aa5a5); margin: 0 2px; }
.gcarts-arrow { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.08)); background: var(--dv2-surface, #fff); color: var(--vv-green, #159145); font-size: 19px; line-height: 1; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(17,24,39,.05); }
.gcarts-arrow:active { background: var(--dv2-green-tint, #eaf6ee); }
.gcarts-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
.gcard { scroll-snap-align: start; }
.gcarts-scroll::-webkit-scrollbar { display: none; }
.gcarts-load { padding: 14px; font-size: 12px; color: var(--dv2-muted, #9aa5a5); }
.gcard { flex: 0 0 auto; width: 206px; background: var(--dv2-surface, #fff); border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.07)); border-radius: var(--r-lg); box-shadow: 0 1px 3px rgba(17,24,39,.04); padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.gcard-goal { font-size: 14px; font-weight: 700; color: var(--dv2-text, #1c2b2b); }
.gcard-meta { font-size: 11.5px; color: var(--dv2-muted, #9aa5a5); margin-top: 2px; }
.gcard-photos { display: flex; gap: 6px; }
.gcard-photos img { width: 42px; height: 42px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.06)); background: #fff; padding: 2px; }
.gcard-more { width: 42px; height: 42px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--dv2-muted, #9aa5a5); background: var(--dv2-surface-2, #f4f6f5); }
.gcard-cta { margin-top: auto; background: var(--vv-green, #159145); color: #fff; border: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 700; padding: 11px; cursor: pointer; transition: opacity .15s; }
.gcard-cta:active { opacity: .9; }

/* ── Плашка «Из корзины можно приготовить» — ненавязчивая, сворачиваемая (не модалка) ── */
#vv-cookbanner.ckb { background: var(--dv2-green-tint, #eaf6ee); border: 1px solid rgba(21,145,69,.18); border-radius: var(--r-md); margin: 0 0 14px; overflow: hidden; }
.ckb-head { display: flex; align-items: center; gap: 9px; padding: 12px; cursor: pointer; }
.ckb-icon { display: inline-flex; color: var(--vv-green, #159145); }
.ckb-icon svg { width: 17px; height: 17px; }
.ckb-title { font-size: 13px; font-weight: 700; color: var(--vv-green-dark, #127a3a); }
.ckb-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--vv-green, #159145); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ckb-chev { margin-left: auto; font-size: 18px; line-height: 1; color: var(--vv-green, #159145); transition: transform .2s ease; transform: rotate(90deg); }
.ckb:not(.collapsed) .ckb-chev { transform: rotate(-90deg); }
.ckb-x { background: none; border: none; color: var(--vv-green-dark, #127a3a); opacity: .55; font-size: 19px; line-height: 1; cursor: pointer; padding: 0; width: 44px; height: 44px; margin: -12px -10px -12px 0; display: flex; align-items: center; justify-content: center; }
.ckb-x:hover { opacity: 1; }
.ckb-body { padding: 0 12px 12px; }
.ckb.collapsed .ckb-body { display: none; }
.ckb-note { font-size: 11.5px; color: var(--vv-green-dark, #127a3a); margin-bottom: 8px; line-height: 1.35; }
.ckb-dishes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ckb-dish { font-size: 12px; font-weight: 600; color: var(--dv2-text, #1c2b2b); background: var(--dv2-surface, #fff); border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.07)); border-radius: 999px; padding: 5px 11px; }
.ckb-cta { width: 100%; min-height: 44px; background: var(--vv-green, #159145); color: #fff; border: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 700; padding: 12px; cursor: pointer; }

/* ── МЕТКА ДНЯ У ПОЗИЦИИ (VVELL-338) ──
   Цифра 1/2/3 перед названием товара в многодневной корзине. Ставится ВНУТРЬ
   .vv-meal-name, поэтому inline-block: строка названия переносится как раньше,
   а цифра не уезжает на свою строку. Показывается только при >1 дне —
   на обычной корзине её нет вовсе (решение владельца 18.08.2026). */
.vv-day-pill {
  display: inline-block; min-width: 16px; height: 16px; line-height: 16px;
  margin-right: 6px; padding: 0 4px; border-radius: 5px;
  background: var(--dv2-green-tint, #eaf6ee); color: var(--vv-green-dark, #127a3a);
  font-size: 10.5px; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums; vertical-align: 1px;
}
#screen-cart .vv-day-pill { font-size: 10.5px !important; font-weight: 800 !important;
  color: var(--vv-green-dark, #127a3a) !important; }
/* ⚠ `.dayhint` / `.dayhint-btn` СНЯТЫ (05.09.2026, VVELL-612). Это была строка
   «Корзина на 3 дня · смотреть по дням» над корзиной — единственный вход во
   всплывающий лист «Что на какой день». Лист удалён: день теперь переключает
   сам список, а не открывает окно поверх него. Класса в `bindings.js` не
   осталось, и правила ушли следом — мёртвые стили этот проект уже дважды
   уводили не туда (`.vv-days-btn`, `premium.css` поверх `design_v2`). */

/* ══════════════════════════════════════════════════════════════════════════
   ПЕРЕКЛЮЧАТЕЛЬ ДНЕЙ НАД ПРИЁМАМИ (05.09.2026, VVELL-612)

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

   ⚠ ИМЕНА КЛАССОВ НЕ НОВЫЕ. `.dayseg*` уже лежали здесь с VVELL-56 («единый
   сегмент дней над товарами») и осиротели 18.08.2026, когда прежний сегмент
   сняли: он собирал КАЖДЫМ нажатием вторую корзину в соседний ключ. Новый
   переключатель ничего не собирает — он только меняет показ одной корзины,
   поэтому старая беда не возвращается, а пятый набор имён для той же полоски
   заводить незачем.
   ══════════════════════════════════════════════════════════════════════════ */
.dayseg { display: flex; gap: 6px; margin: 0 0 14px; }
/* ⚠ 48, а не 40: это кнопка, и она обязана держать норму касания 44 px.
   `font: inherit` обязателен: без него <button> берёт шрифт браузера, и
   полоска выпадает из типографики экрана (на этом уже ловились `.stky-day`). */
.dayseg-tab { flex: 1 1 0; min-width: 0; min-height: 48px; display: flex;
  flex-direction: column; gap: 2px; align-items: center; justify-content: center;
  padding: 8px 4px; border-radius: var(--r-sm);
  border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.08));
  background: var(--dv2-surface, #fff); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background .15s; }
.dayseg-label { font-size: 12.5px; font-weight: 700; line-height: 1.15;
  color: var(--dv2-text, #1c2b2b); white-space: nowrap; }
.dayseg-sum { font-size: 11px; font-weight: 600; line-height: 1.15;
  color: var(--dv2-muted, #9aa5a5); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.dayseg-tab.active { border-color: var(--vv-green, #159145);
  background: var(--dv2-green-tint, #eaf6ee); }
.dayseg-tab.active .dayseg-label, .dayseg-tab.active .dayseg-sum { color: var(--vv-green-dark, #127a3a); }
.dayseg-tab:active { opacity: .75; }
/* ⚠ НОЧЬЮ ЗЕЛЁНЫЙ НА ЗЕЛЁНОЙ ПОДЛОЖКЕ НЕ ЧИТАЕТСЯ. Замер: подпись
   rgb(36,157,111) на смешанном фоне rgb(33,60,48) = 3,5:1 при норме 4,5.
   Днём та же пара даёт 5,65:1 — поэтому правится ТОЛЬКО ночь. Метка
   выбранного дня остаётся: её несут рамка и подложка, а текст берёт обычный
   цвет экрана (тем же приёмом чинили .vv-itog-toggle-btn в premium.css). */
.vv-theme-night .dayseg-tab.active .dayseg-label { color: var(--ink); }
.vv-theme-night .dayseg-tab.active .dayseg-sum { color: var(--ink-2); }

/* Позиция чужого дня уходит ИЗ ПОТОКА, а не гаснет прозрачностью: на трёх днях
   в корзине 95 строк и 21 641 px высоты — ради этого день и переключаем.
   `!important` нужен: `#screen-cart .vv-meal-item` в этом же файле приезжает
   с `!important`, и без него строка осталась бы видимой. */
#cart-list .vv-meal-item.vv-day-off { display: none !important; }
/* Цифра дня у товара — только в общем списке: внутри одного дня она у всех
   строк одна и та же и превращается в шум. */
#cart-list.vv-day-one .vv-day-pill { display: none !important; }

/* ── Sticky-чекаут: одна зелёная кнопка + инфострока-расшифровка ── */
.stky-detail { display: flex; justify-content: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--dv2-muted, #9aa5a5); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.stky-dot { color: var(--dv2-border, rgba(17,24,39,.2)); }
/* Бюджет — подпись ВПЛОТНУЮ к деньгам (VVELL-353). Цвет берём токеном
   `--dv2-muted`: он переопределён в `.vv-theme-night`, поэтому строка читается
   в обеих темах. Переносы разрешены — на узком экране фраза длиннее одной
   строки, и обрезать её нельзя: она объясняет разницу между чеком и днём еды. */
.stky-budget { text-align: center; font-size: 12px; font-weight: 600; line-height: 1.35;
  color: var(--dv2-muted, #756C5D); margin-bottom: 7px; font-variant-numeric: tabular-nums; }
/* Вторая строка подписи — мостик между «едой на день» и суммой чека
   (20.08.2026, VVELL-353). Отдельный класс, а не второй `.stky-budget` подряд:
   между ними нужен воздух меньше, чем до кнопки, иначе две строки читаются как
   два разных сообщения. Цвет и размер те же — это продолжение одной мысли. */
.stky-budget-note { margin-top: -3px; margin-bottom: 7px; font-weight: 500; }
.stky-cta { width: 100%; padding: 15px 20px; border-radius: var(--r-md); border: none; background: var(--vv-green, #159145); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; letter-spacing: .01em; transition: opacity .15s; }
.stky-cta:active { opacity: .9; }

/* «Сбалансированный день» внутри «Почему такая корзина?» (VVELL-56 шаг 2) */
.vv-why-lead { padding: 4px 4px 14px; margin-bottom: 12px; border-bottom: 1px solid var(--dv2-border-soft, rgba(17,24,39,.07)); }
/* Моя/Семья в шапке экрана корзины */
#screen-cart .chat-header #vv-fam-toggle { margin: 12px 0 2px; }

/* ── Конфигуратор строкой-сводкой (VVELL-56 шаг 3) ── */
.cfgv2-summary { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 14px; cursor: pointer; text-align: left; }
.cfgv2-sum-label { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--dv2-text, #1c2b2b); }
.cfgv2-sum-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--vv-green, #159145); }
.cfgv2-summary .cfgv2-chev { margin-left: auto; }
.cfgv2-summary .cfgv2-chev.up { transform: rotate(-90deg); }
.cfgv2-group { padding: 4px 14px 12px; border-top: 1px solid var(--dv2-border-soft, rgba(17,24,39,.06)); }
.cfgv2-group-label { font-size: 11px; font-weight: 500; letter-spacing: .05em; color: var(--dv2-muted, #9aa5a5); margin: 8px 0 8px; }
.cfgv2-group-body { display: flex; gap: 8px; flex-wrap: wrap; }
/* Группа «Добавленный сахар» — четыре варианта. При flex 1 1 30% они легли бы 3+1,
   и четвёртая растянулась бы на всю ширину. Сетка 2×2 держит ряды ровными. */
.cfgv2-group-body.cfgv2-sugar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cfgv2-group-body.cfgv2-sugar .cfgv2-opt { flex: none; min-width: 0; }
.cfgv2-group-body.cfgv2-meals { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
.cfgv2-group-body.cfgv2-meals::-webkit-scrollbar { display: none; }
.cfgv2-meal { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--dv2-border, rgba(17,24,39,.1)); background: var(--dv2-surface-2, #f6f8f7); color: var(--dv2-text, #1c2b2b); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cfgv2-meal.active { border-color: var(--vv-green, #159145); background: var(--dv2-green-tint, #eaf6ee); color: var(--vv-green-dark, #127a3a); }
.cfgv2-info { padding: 10px 14px; border-top: 1px solid var(--dv2-border-soft, rgba(17,24,39,.06)); font-size: 12px; font-weight: 600; color: var(--dv2-muted, #9aa5a5); }

/* ── Меню «⋯» в шапке корзины (VVELL-56 шаг 6) ── */
.cart-menu-btn { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.08)); background: var(--dv2-surface, #fff); color: var(--dv2-muted, #6d7a76); font-size: 19px; line-height: 1; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* ── Обновление корзины рядом с «⋯» (VVELL-402) ──
   Тот же круг 44x44, что у «⋯», и стоит ЛЕВЕЕ его на ширину кнопки с зазором:
   44 + 8. Значок — стрелка по кругу (SVG, как везде в проекте), она же крутится,
   пока сборка идёт (`.is-busy`). Прячем из скринридера дважды: aria-label на
   кнопке, `aria-hidden` на самой картинке. */
.cart-refresh-btn { position: absolute; top: 0; right: 52px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.08)); background: var(--dv2-surface, #fff); color: var(--dv2-muted, #6d7a76); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cart-refresh-btn:disabled { opacity: .55; cursor: default; }
.cart-refresh-btn svg { width: 19px; height: 19px; display: block; }
.cart-refresh-btn.is-busy svg { animation: vv-cart-refresh-spin .9s linear infinite; transform-origin: 50% 50%; }
@keyframes vv-cart-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cart-refresh-btn.is-busy svg { animation: none; } }
.cart-menu { position: absolute; top: 44px; right: 0; z-index: 60; min-width: 190px; background: var(--dv2-surface, #fff); border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.08)); border-radius: var(--r-md); box-shadow: 0 8px 28px rgba(17,24,39,.13); padding: 6px; display: none; flex-direction: column; }
.cart-menu.show { display: flex; }
.cart-menu button { background: none; border: none; text-align: left; min-height: 44px; padding: 11px 13px; border-radius: var(--r-xs); font-size: 13.5px; font-weight: 600; color: var(--dv2-text, #1c2b2b); cursor: pointer; }
.cart-menu button:hover { background: var(--dv2-surface-2, #f4f6f5); }
.cart-menu button.danger { color: #C94F35; }

/* ── Фикс: тело свёрнутого «Почему» не должно просвечивать (зелёный обрезок) ── */
#screen-cart .vv-why-cart { overflow: hidden; }
#screen-cart .vv-why-cart:not(.open) .vv-why-body { display: none; }

/* ── «Почему такая корзина?» повеселее (cfg-v2) ── */
#screen-cart.cfg-v2 .vv-why-cart { background: linear-gradient(135deg, var(--dv2-green-tint, #eaf6ee) 0%, var(--dv2-surface, #fff) 55%); border: 1px solid rgba(21,145,69,.14); border-radius: var(--r-md); }
#screen-cart.cfg-v2 .vv-why-toggle { padding: 15px 16px; }
#screen-cart.cfg-v2 .vv-why-title { color: var(--vv-green-dark, #127a3a); font-weight: 800; font-size: 14px; }
#screen-cart.cfg-v2 .vv-why-chev { color: var(--vv-green, #159145); }

/* ── Полоса «Добавить ещё» под товарами (VVELL-56 шаг 9) ── */
#addmore-strip { margin: 0 0 14px; }
#addmore-strip .am-title { font-size: 12.5px; font-weight: 700; color: var(--dv2-text, #1c2b2b); margin: 2px 2px 9px; }
#addmore-strip .am-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; -ms-overflow-style: none; }
#addmore-strip .am-scroll::-webkit-scrollbar { display: none; }
#addmore-strip .am-card { flex: 0 0 auto; width: 128px; background: var(--dv2-surface, #fff); border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.07)); border-radius: var(--r-md); padding: 10px; display: flex; flex-direction: column; gap: 7px; }
#addmore-strip .am-card img { width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.06)); background: #fff; padding: 3px; align-self: center; }
#addmore-strip .am-name { font-size: 11.5px; font-weight: 600; color: var(--dv2-text, #1c2b2b); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 29px; }
#addmore-strip .am-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
#addmore-strip .am-price { font-size: 12.5px; font-weight: 700; color: var(--dv2-text, #1c2b2b); font-variant-numeric: tabular-nums; }
#addmore-strip .am-add { width: 44px; height: 44px; border-radius: var(--r-sm); border: none; background: var(--dv2-green-tint, #eaf6ee); color: var(--vv-green-dark, #127a3a); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
#addmore-strip .am-add:active { background: var(--vv-green, #159145); color: #fff; }

/* ── Чекаут-шит (VVELL-56 шаг 11) ── */
#vv-checkout-sheet .cosheet-bg { position: fixed; inset: 0; background: rgba(17,24,39,.42); z-index: 950; }
/* Центрирование через margin, а не transform (20.09.2026): скрипт смахивания пишет свой translateY и затирал
   translateX(-50%) — лист во время протяжки уезжал вправо на половину ширины. */
#vv-checkout-sheet .cosheet { position: fixed; left: 0; right: 0; margin: 0 auto; bottom: 0; z-index: 951; width: 100%; max-width: 430px; background: var(--dv2-surface, #fff); border-radius: 22px 22px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(17,24,39,.2); animation: cosheetUp .24s ease; }
@keyframes cosheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#vv-checkout-sheet .cosheet-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: none; padding: 0; background: var(--dv2-border-soft, rgba(17,24,39,.07)); color: var(--dv2-text, #1c2b2b); font-size: 22px; line-height: 34px; text-align: center; cursor: pointer; }
#vv-checkout-sheet .cosheet-x:active { background: var(--dv2-border, rgba(17,24,39,.14)); }
@media (prefers-reduced-motion: reduce) { #vv-checkout-sheet .cosheet { animation: none; } }
#vv-checkout-sheet .cosheet-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--dv2-border, rgba(17,24,39,.14)); margin: 4px auto 12px; }
#vv-checkout-sheet .cosheet-title { font-size: 17px; font-weight: 800; color: var(--dv2-text, #1c2b2b); margin-bottom: 12px; }
#vv-checkout-sheet .cosheet-days { border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.07)); border-radius: var(--r-md); padding: 4px 14px; margin-bottom: 12px; }
#vv-checkout-sheet .cosheet-day { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--dv2-border-soft, rgba(17,24,39,.06)); font-size: 13.5px; color: var(--dv2-text, #1c2b2b); font-variant-numeric: tabular-nums; }
#vv-checkout-sheet .cosheet-day:last-child { border-bottom: none; }
/* День можно исключить из заказа: кнопка, а не строка. Касание — вся строка целиком. */
#vv-checkout-sheet .cosheet-day-btn { width: 100%; min-height: 48px; gap: 10px; background: none; border: none; border-bottom: 1px solid var(--dv2-border-soft, rgba(17,24,39,.06)); font: inherit; font-size: 13.5px; color: var(--dv2-muted, #9aa5a5); cursor: pointer; text-align: left; }
#vv-checkout-sheet .cosheet-day-btn > span:nth-of-type(2) { flex: 1; }
#vv-checkout-sheet .cosheet-day-btn.on { color: var(--dv2-text, #1c2b2b); }
#vv-checkout-sheet .cosheet-check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--dv2-border, rgba(17,24,39,.2)); display: inline-block; position: relative; }
#vv-checkout-sheet .cosheet-day-btn.on .cosheet-check { background: var(--vv-green, #159145); border-color: var(--vv-green, #159145); }
#vv-checkout-sheet .cosheet-day-btn.on .cosheet-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#vv-checkout-sheet .cosheet-total { font-weight: 800; }
/* Выбор магазина уехал в НАЧАЛО корзины (п.16 владельца) — в шите осталась
   строка-напоминание, а не контрол. Правило для #store-selector оставлено:
   узла с таким id в шите больше нет, но правило безвредно и страхует откат. */
#vv-checkout-sheet #store-selector { margin-bottom: 4px; }
#vv-checkout-sheet .cosheet-store { font-size: 12.5px; line-height: 1.4; color: var(--dv2-muted, #9aa5a5); padding: 10px 0 2px; }
#vv-checkout-sheet .cosheet-store b { color: var(--dv2-text, #1c2b2b); font-weight: 700; }
#vv-checkout-sheet .cosheet-cta { width: 100%; padding: 15px; border-radius: var(--r-md); border: none; background: var(--vv-green, #159145); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; margin-top: 6px; }
#vv-checkout-sheet .cosheet-note { text-align: center; font-size: 11px; color: var(--dv2-muted, #9aa5a5); margin-top: 9px; line-height: 1.4; }
/* «Еда на» (VVELL-956 → VVELL-1168, 30.09.2026): ВЫБРАННЫЙ ДЕНЬ ВИДЕН. У переключателя не было ни одного правила —
   кнопки рисовал браузер, и какой день выбран, не было видно; с третьей кнопкой («послезавтра», «сб, 3 окт») это стало
   заметно. Сегменты-таблетки, выбранный — зелёный, как галочка дня ниже. Цвета — токенами темы (день/ночь/песок). */
#vv-checkout-sheet .cosheet-shift { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
#vv-checkout-sheet .cosheet-shift-cap { font-size: 13px; color: var(--dv2-muted, #9aa5a5); margin-right: 2px; }
#vv-checkout-sheet .cosheet-shift button { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--dv2-border, rgba(17,24,39,.14)); background: transparent; color: var(--dv2-text, #1c2b2b); font: inherit; font-size: 13.5px; cursor: pointer; }
#vv-checkout-sheet .cosheet-shift button.on { background: var(--vv-green, #159145); border-color: var(--vv-green, #159145); color: #fff; font-weight: 700; }
html.vv-sky-live.vv-sky-glass #vv-checkout-sheet .cosheet-shift button.on { background: #8DF3C4 !important; border-color: #8DF3C4 !important; color: #06301C !important; }
/* Ночная палитра БЕЗ «неба» (седьмой круг сведения, 02.10.2026): заливка выбранной кнопки там светло-зелёная
   (rgb(63,192,139)), а текст оставался белым — контраст 2,3:1. Тёмный текст, как в «небе»: около 6:1. День и «небо» не трогаем. */
.vv-theme-night #vv-checkout-sheet .cosheet-shift button.on { color: #06301C; }

/* ── Undo-снекбар «убрали · Вернуть» (VVELL-56 шаг 8) ── */
#vv-undo-bar { position: fixed; left: 50%; bottom: calc(var(--vv-nav-h, 76px) + 74px); min-height: 60px; transform: translateX(-50%) translateY(16px); z-index: 900; display: flex; align-items: center; gap: 14px; background: #22312B; color: #E9F2EC; border-radius: 999px; padding: 11px 12px 11px 18px; box-shadow: 0 8px 26px rgba(17,24,39,.28); font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; max-width: min(92vw, 400px); }
#vv-undo-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#vv-undo-bar .vv-undo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vv-undo-bar .vv-undo-btn { flex: 0 0 auto; min-height: 44px; background: var(--vv-green, #159145); color: #fff; border: none; border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* ── Кнопка VVILLIAM — тихая вторичная, современная (cfg-v2, чистый класс без inline) ── */
.vvw-help-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; background: var(--dv2-green-tint, #eaf6ee); color: var(--vv-green-dark, #127a3a); border-radius: var(--r-md); padding: 14px; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: opacity .15s; }
.vvw-help-btn:active { opacity: .88; }
.vvw-help-btn .wh-ic, .vvw-help-btn svg { width: 16px; height: 16px; }
/* монолайн-иконки в нижних кнопках корзины */
#cart-list .wh-ic { width: 18px; height: 18px; vertical-align: 0; }

/* Стадии сна */
/* ⚠ .wh-stages* УДАЛЕНЫ (VVELL-393, 23.08.2026). Это была полоса «Стадии сна»
   на «Сегодня»: её сняли с главной, разбор ночи живёт на отдельном экране и
   рисуется единым рисовальщиком (.vvch-slp-* в premium.css). Мёртвые правила
   опаснее живых — по ним копируют, считая рабочим образцом. Имена классов
   остались в двух перечислениях ниже и в palette_sand.css: убирать их оттуда
   отдельной правкой чужих строк не стали, они безвредны. */

/* Возраст здоровья */
.wh-age { background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px; cursor: pointer; }
.wh-age:hover { border-color: var(--dv2-green); }
.wh-age-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wh-ink-2); margin-bottom: 8px; }
.wh-age-big { font-family: var(--dv2-font-heading); font-size: 28px; font-weight: 600; line-height: 1; }
.wh-age-big span { font-size: 15px; color: var(--wh-ink-3); font-weight: 600; }
.wh-age-sub { font-size: 12.5px; color: var(--wh-ink-2); margin-top: 5px; }

/* Тренды 7 дней */
.wh-trends { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wh-trend { background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--r-md); padding: 12px 13px; }
.wh-trend-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.wh-trend-lbl { font-size: 12px; font-weight: 700; color: var(--wh-ink-2); }
.wh-trend-val { font-size: 15px; font-weight: 800; }
/* .wh-spark удалён вместе с _whSpark: рисовальщик в проекте теперь один
   (static/js/vvchart.js) и размечает свой SVG классом .vvch-svg. Правило без
   селектора оставлять нельзя — на него рано или поздно повесят стиль вслепую. */
.wh-trend-arw { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.wh-trend-empty { opacity: .65; }
/* Было --wh-ink-3, а он маппится на --dv2-muted-2 (:3777) — это НЕ-ТЕКСТОВЫЙ
   уровень: 3.50 днём и 3.44 ночью при норме 4.5. Держалось только на заплатке
   palette_sand.css:300, которая чинит --wh-ink-3 внутри предка .wh-home; вынеси
   карточку тренда из него — и «мало данных» снова проваливается ниже нормы.
   --ink-3 даёт 5.27 / 4.51 сам по себе, без оглядки на предка. */
.wh-trend-none { font-size: 12px; color: var(--ink-3); padding: 8px 0; }

/* Моя семья */
.wh-family { display: flex; align-items: center; gap: 12px; background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--r-md); padding: 13px 15px; margin-top: 14px; cursor: pointer; }
.wh-family:hover { border-color: var(--dv2-green); }
.wh-family-av { font-size: 24px; line-height: 1; flex-shrink: 0; }
.wh-family-body { flex: 1; min-width: 0; }
.wh-family-title { font-weight: 700; font-size: 15px; }
.wh-family-sub { font-size: 12px; color: var(--wh-ink-3); margin-top: 2px; }

/* ══ Дизайн-полировка: глубина · тинт · иконки · движение ══ */
.wh-home { --wh-elev: 0 1px 2px rgba(20,14,0,.05), 0 12px 26px -8px rgba(20,14,0,.12); }
.vv-theme-night .wh-home { --wh-elev: 0 1px 2px rgba(0,0,0,.35), 0 12px 30px -10px rgba(0,0,0,.55); }
.wh-mon, .wh-stat, .wh-stages, .wh-age, .wh-trend, .wh-myday, .wh-insight, .wh-metric, .wh-family { box-shadow: var(--wh-elev); }

/* кольца: выравнивание по верху, компактный отступ (без фонового тинта) */
.wh-rings { align-items: start; padding: 2px 4px; margin: 8px 0 16px; }

/* монолайн-иконки */
.wh-ic { width: 20px; height: 20px; display: inline-block; vertical-align: -3px; }
.wh-stat-ic { color: var(--dv2-green); line-height: 0; }
.wh-stat-ic .wh-ic { width: 22px; height: 22px; vertical-align: middle; }
.wh-myday-ic { color: var(--dv2-green); display: inline-flex; }
.wh-metric-ic { color: var(--wh-ink-3); display: inline-flex; }
.wh-metric-ic .wh-ic { width: 17px; height: 17px; }
.wh-age-lbl { display: inline-flex; align-items: center; gap: 6px; }
.wh-age-lbl .wh-ic { width: 16px; height: 16px; }
.wh-customize .wh-ic { width: 17px; height: 17px; vertical-align: middle; }

/* движение: появление секций + отклик на тап */
@keyframes whFadeUp { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.wh-home > * { animation: whFadeUp .4s cubic-bezier(.2,.8,.2,1) both; }
.wh-home > *:nth-child(2){ animation-delay: .04s; }
.wh-home > *:nth-child(3){ animation-delay: .08s; }
.wh-home > *:nth-child(4){ animation-delay: .12s; }
.wh-home > *:nth-child(5){ animation-delay: .16s; }
.wh-home > *:nth-child(6){ animation-delay: .20s; }
.wh-home > *:nth-child(n+7){ animation-delay: .24s; }
.wh-mon, .wh-stat, .wh-age, .wh-family, .wh-trend, .wh-myday-row, .wh-ring-wrap, .wh-customize {
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.wh-mon:hover, .wh-age:hover, .wh-family:hover, .wh-trend:hover { transform: translateY(-2px); }
.wh-mon:active, .wh-stat:active, .wh-age:active, .wh-family:active, .wh-myday-row:active { transform: scale(.985); }
.wh-ring-wrap:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .wh-home > * { animation: none; }
  .wh-ring-fg { transition: none; }
  .wh-mon, .wh-stat, .wh-age, .wh-family, .wh-trend, .wh-ring-wrap { transition: none; }
  .wh-tour-hole { transition: none; }
}

/* стрелка «кликабельно» на кольцах */
.wh-ring-chev { color: var(--wh-ink-3); font-weight: 400; }

/* обучающий тур (spotlight) */
/* ⚠ pointer-events: none НА ОВЕРЛЕЕ — ЭТО И ЕСТЬ ПОЧИНКА «КНОПКИ НЕ НАЖИМАЮТСЯ».
   Оверлей лежит на весь экран поверх всего (inset:0, z-index:300) и, будучи
   кликабельным, съедал КАЖДЫЙ тап приложения: нижний бар, вкладки, карточки.
   Замер: document.elementFromPoint по центру вкладки возвращал DIV.wh-tour,
   а клик по кнопке «Здоровье» падал по таймауту с «intercepts pointer events».
   Затемнение рисует .wh-tour-hole тенью и оно остаётся на месте — прозрачность
   для касаний вида не меняет. Нажимается только сама подсказка. */
.wh-tour { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.wh-tour-tip { pointer-events: auto; }
.wh-tour-hole { position: fixed; border-radius: var(--r-lg); box-shadow: 0 0 0 9999px rgba(10,8,0,.62);
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease; pointer-events: none; }
.wh-tour-tip { position: fixed; left: 14px; right: 14px; max-width: 460px; margin: 0 auto;
  background: var(--dv2-surface); color: var(--dv2-text); border-radius: var(--r-md); padding: 16px 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.32); animation: whFadeUp .25s ease both; }
.wh-tour-title { font-family: var(--dv2-font-heading); font-size: 16px; font-weight: 600; }
.wh-tour-text { font-size: 13.5px; color: var(--dv2-muted); margin-top: 5px; line-height: 1.5; }
.wh-tour-dots { display: flex; gap: 6px; margin: 12px 0; }
.wh-tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--dv2-border); transition: all .2s; }
.wh-tour-dots i.on { background: var(--dv2-green); width: 18px; border-radius: 4px; }
.wh-tour-btns { display: flex; gap: 8px; align-items: center; }
.wh-tour-skip { margin-right: auto; background: none; border: none; color: var(--dv2-muted); font-size: 13px; cursor: pointer; font-family: inherit; }
.wh-tour-back { background: none; border: 1px solid var(--dv2-border); color: var(--dv2-text-2); border-radius: var(--r-xs); padding: 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit; }
.wh-tour-next { background: var(--dv2-green); color: #fff; border: none; border-radius: var(--r-xs); padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.wh-cust-tour { width: 100%; margin-top: 14px; background: none; border: 1px solid var(--dv2-border);
  color: var(--dv2-text-2); border-radius: var(--r-sm); padding: 12px; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.wh-cust-tour:hover { border-color: var(--dv2-green); color: var(--dv2-green-dark); }

/* Живая карточка корзины (собери → оформи → готово) */
.wh-cart { display: flex; align-items: center; gap: 13px; border-radius: var(--r-md); padding: 15px 16px;
  margin-top: 14px; cursor: pointer; border: 1px solid var(--wh-line); background: var(--wh-card);
  box-shadow: var(--wh-elev); transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
.wh-cart:active { transform: scale(.985); }
.wh-cart-ic { width: 42px; height: 42px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wh-cart-ic .wh-ic { width: 22px; height: 22px; }
.wh-cart-body { flex: 1; min-width: 0; }
.wh-cart-title { font-weight: 750; font-size: 15px; }
.wh-cart-sub { font-size: 12.5px; color: var(--wh-ink-3); margin-top: 2px; line-height: 1.4; }
.wh-cart-chev { color: var(--wh-ink-3); font-size: 20px; flex-shrink: 0; }
.wh-cart-build, .wh-cart-checkout { border-color: rgba(45,190,100,.45); }
.wh-cart-build .wh-cart-ic, .wh-cart-checkout .wh-cart-ic, .wh-cart-done .wh-cart-ic {
  background: var(--dv2-green-tint); color: var(--dv2-green-dark); }
.wh-cart-done .wh-cart-chev { color: var(--dv2-green); }

/* «Дыхание» — мягкий зелёный пульс + лёгкое масштабирование, темп дыхания */
@keyframes whBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(45,190,100,0), 0 6px 16px -6px rgba(20,14,0,.12); }
  50% { transform: scale(1.014); box-shadow: 0 0 0 6px rgba(45,190,100,.10), 0 10px 26px -6px rgba(45,190,100,.30); }
}
/* ⚠ ПУЛЬСАЦИЯ СНЯТА (05.09.2026, владелец: «где-то визуально совсем ужасно и
   броско»). Карточка «Собери корзину» дышала зелёным свечением каждые 3,6 с —
   единственный анимированный блок на «Сегодня», он и был броским. Обводка
   осталась, движения нет. */
.wh-cart.breathe { animation: none; }
.wh-cart.breathe:active { animation: none; transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .wh-cart.breathe { animation: none; } }

/* Живой «Мой день»: привычки-отметки + приёмы с кнопкой «съел» */
.wh-myday-card { background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--r-md); box-shadow: var(--wh-elev); margin-bottom: 12px; overflow: hidden; }
.wh-myday-cardh { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wh-ink-2); }
.wh-myday-cardh .wh-ic { width: 17px; height: 17px; color: var(--dv2-green); }
.wh-myday-cnt { margin-left: auto; color: var(--dv2-green-dark); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.wh-hab { display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer; border-top: 1px solid var(--dv2-border-soft); transition: background .15s; }
.wh-hab:hover { background: var(--wh-card-2); }
.wh-hab-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--dv2-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; transition: background .18s, border-color .18s; }
.wh-hab-check .wh-ic { width: 15px; height: 15px; }
.wh-hab.done .wh-hab-check { background: var(--dv2-green); border-color: var(--dv2-green); }
.wh-hab-lbl { flex: 1; font-size: 14px; }
.wh-hab.done .wh-hab-lbl { color: var(--wh-ink-3); text-decoration: line-through; }
.wh-hab-streak { font-size: 12px; color: var(--wh-ink-3); }
/* ⚠ .wh-hab-grp УДАЛЁН 16.08.2026 вместе с заголовками «Утро/День/Вечер» в Журнале.
   Разбивку по времени суток (VVELL-133, 11.08) сменила разбивка по НАПРАВЛЕНИЯМ
   (.wh-jr-row ниже): время суток отвечало на вопрос «когда», а владелец спросил
   «что с целью». Порядок внутри направления по-прежнему временной (_whHabitWhen
   в bindings.js), заголовков нет — внутри одной темы их максимум девять строк,
   и подзаголовки над двумя пунктами были бы шумом. Правил не оставляем: мёртвый
   стиль с осмысленным именем рано или поздно переиспользуют «как рабочий образец». */
.wh-meal-grp { border-top: 1px solid var(--dv2-border-soft); }
.wh-meal-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; }
.wh-meal-h { font-size: 12px; font-weight: 700; color: var(--wh-ink-2); text-transform: uppercase; letter-spacing: .03em; }
.wh-meal-sub { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--wh-ink-3); }
.wh-meal-chev { color: var(--wh-ink-3); font-size: 18px; transition: transform .15s; }
.wh-meal-grp.open .wh-meal-chev { transform: rotate(90deg); }
.wh-meal-items { display: none; padding: 0 14px 10px; }
.wh-meal-grp.open .wh-meal-items { display: block; }
.wh-meal-current { background: var(--dv2-green-tint); }
.wh-meal-current .wh-meal-h, .wh-meal-current .wh-meal-sub { color: var(--dv2-green-dark); }
.wh-meal-past .wh-meal-head { opacity: .55; }
.wh-meal-future .wh-meal-head { opacity: .72; }
.wh-meal-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.wh-meal-name { flex: 1; font-size: 13.5px; }
.wh-meal-item.logged .wh-meal-name { color: var(--wh-ink-3); }
/* ⚠ ВЫСОТА, А НЕ ШИРИНА. Замер отдаёт пару как [высота x ширина], и «31x56»
   я сперва прочитал наоборот. Кнопка была 56 px широкой и 31 px низкой при
   норме Apple HIG 44. Ширины хватало и без правки. */
.wh-eat { flex-shrink: 0; min-height: 44px; background: var(--dv2-green-tint); color: var(--dv2-green-dark); border: none; border-radius: var(--r-xs); padding: 6px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.wh-eat:hover { filter: brightness(.97); }
.wh-eat.on { background: var(--dv2-green); color: #fff; }
.wh-myday-link { padding: 13px 14px; font-size: 13.5px; font-weight: 700; color: var(--dv2-green-dark); cursor: pointer; border-top: 1px solid var(--dv2-border-soft); display: flex; align-items: center; gap: 9px; background: var(--dv2-green-tint); }
.wh-myday-link:hover { filter: brightness(.97); }
.wh-myday-link .wh-ic { width: 18px; height: 18px; color: var(--dv2-green-dark); }
.wh-myday-link-c { margin-left: auto; font-weight: 600; color: var(--dv2-green); }
.wh-myday-link .wh-mon-chev { color: var(--dv2-green-dark); font-size: 18px; }
.wh-myday-empty { padding: 14px; font-size: 13.5px; color: var(--wh-ink-2); cursor: pointer; border-top: 1px solid var(--dv2-border-soft); }
.wh-myday-empty:hover { color: var(--dv2-green-dark); }

/* ── Свёрнутый Журнал: строка направления + разворот в трекинг (16.08.2026) ──
   Пункт = направление привычек или еда дня. Кольцо слева отвечает на вопрос
   «что тут с целью» одним числом, разворот даёт подробную отметку да/нет.
   Оформление наше: те же токены, что у карточек «Сегодня», обе темы. */
.wh-jr-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; min-height: 60px;
  background: transparent; border: none; border-top: 1px solid var(--dv2-border-soft);
  font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.wh-myday-cardh + .wh-jr-row { border-top: 0; }
.wh-jr-row:hover { background: var(--wh-card-2); }
.wh-jr-row .wh-mini { width: 44px; height: 44px; }
.wh-jr-row .wh-mini svg { width: 44px; height: 44px; }
.wh-jr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wh-jr-t { font-size: 14px; font-weight: 700; color: var(--wh-ink); }
.wh-jr-s { font-size: 12px; color: var(--wh-ink-3); }
.wh-jr-chev { flex: none; display: inline-flex; color: var(--wh-ink-3); transition: transform .15s; }
.wh-jr-chev .wh-ic { width: 18px; height: 18px; }
/* Шеврон «вниз» → «вверх». 180deg, а не 90: при 90° он разворачивается вбок
   (ловушка со строк приёмов в Дневнике, 2026-08). */
.wh-jr-row.open .wh-jr-chev { transform: rotate(180deg); }
/* ⚠ ЯВНОЕ ПРАВИЛО ДЛЯ [hidden]. Без него аккордеон не сворачивается вовсе:
   авторский display у потомков перебивает браузерный стиль скрытия. На этом
   уже падала вкладка «Что трекаем?» — там пять тем стояли hidden и видимыми. */
.wh-jr-open { display: block; background: var(--wh-card-2); }
.wh-jr-open[hidden] { display: none; }
/* Отступ слева — единственный признак «это внутри пункта». Без него раскрытые
   строки идут от края до края и читаются как соседние пункты, а не как их
   содержимое. Ширина отступа = ширина кольца в свёрнутой строке, чтобы имя
   привычки встало ровно под именем направления. */
.wh-jr-open .wh-hab { padding-left: 26px; }
.wh-jr-open .wh-hab:first-child { border-top: 0; }
.wh-jr-open .wh-meal-grp:first-child { border-top: 0; }
/* «3/7» справа у привычки — дробь, а не голое число серии */
.wh-hab-week {
  flex: none; font-size: 12px; font-weight: 700; color: var(--wh-ink-3);
  font-variant-numeric: tabular-nums;
  /* Зазор до кнопки «Не делал?»: с общим gap 11 px строка читалась «Не делал 5/7»
     одной фразой. Кнопке — контур, числу — воздух. */
  margin-left: 6px;
}
.wh-hab.done .wh-hab-week { color: var(--dv2-green-dark); }

/* ── «Не делал»: вторая, ВТОРОСТЕПЕННАЯ кнопка строки (VVELL-720, 07.09.2026) ──
   Текстом, без заливки и без рамки в покое: главное действие строки — «сделал»,
   и отрицательный ответ не должен спорить с ним за внимание. Площадь касания
   держим полноценную (44 px по высоте за счёт отрицательных полей), иначе на
   телефоне кнопка станет ловушкой промахов рядом с кликабельной строкой. */
/* ⚠ ШИРИНА КНОПКИ ЗАМЕРЕНА, А НЕ ПРИКИНУТА. Строка привычки — 348 px, и в ней
   уже стоят кружок отметки, метка «по часам» и дробь «5/7». Первый вариант
   кнопки (12 px, поля 8 px, обычные зазоры) занимал 80 px вместе с зазором и
   ронял название на вторую строку у шести привычек из двадцати одной; у
   «Сон 7–9 часов» слова рвались посреди фразы. Здесь кнопка ужата до 62 px и
   поджата отрицательными полями к соседям — порог переноса названия уехал со
   180 до ~197 px, и на живом экране двухстрочными остались только длинные
   названия, которые переносились и до этой задачи.
   ⚠ ВЫСОТА 36 px, А НЕ 44. Строка целиком — 46 px и сама кликабельна; кнопка
   в 44 px вылезла бы за её края и перехватывала бы касания у соседних привычек.
   Это хуже, чем чуть меньшая площадь: промах по чужой привычке — испорченная
   отметка, а не неудобство. */
/* ⚠ КОНТУР В ПОКОЕ ОБЯЗАТЕЛЕН (правка 07.09.2026 по разбору). Здесь стояла
   голая серая надпись без рамки и подчёркивания, в одном ряду с плашкой «по
   часам» и дробью «5/7». На живом экране она читалась не кнопкой, а колонкой
   состояния — и на уже отмеченной привычке строка спорила сама с собой:
   «✓ Сон 7–9 часов · по часам · Не делал · 5/7». Теперь пилюля с постоянным
   лёгким контуром + знак вопроса в надписи (bindings.js, _whHabRow).
   ⚠ ЗАЗОР ДО ДРОБИ БОЛЬШЕ, ЧЕМ ДО КНОПКИ: управление и число не должны
   склеиваться в одну фразу «Не делал 5/7». */
.wh-hab-skip {
  position: relative; flex: none; margin: 0 0 0 -2px; padding: 4px 7px;
  border: 1px solid var(--dv2-border); background: none;
  font: inherit; font-size: 11px; line-height: 1.25; color: var(--wh-ink-3);
  cursor: pointer; border-radius: 999px; white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
}
/* Площадь касания растим невидимо: строка привычки 46 px и сама кликабельна,
   видимая кнопка в 44 px вылезла бы за её края и перехватывала бы касания у
   соседних привычек. */
.wh-hab-skip::after { content: ''; position: absolute; inset: -10px -3px; }
.wh-hab-skip:hover { color: var(--wh-ink-2, var(--wh-ink-3)); background: var(--wh-card-2); }
.wh-hab-skip.on {
  color: var(--wh-ink); font-weight: 700;
  border-color: var(--wh-ink-3); background: var(--wh-card-2);
}
/* Строка в состоянии «не делал»: приглушена, но НЕ зачёркнута — зачёркивание
   у нас означает «сделано», и два разных смысла одним приёмом читаться не должны. */
.wh-hab.skipped { opacity: .62; }
.wh-hab.skipped .wh-hab-check { border-style: dashed; }

/* Цветная точка члена семьи в линзе (вместо эмодзи-аватара, новый вид) */
.vv-fam-chip-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* ── Наличие в магазине: ссылка «Чего нет», кнопка пересборки, попап (ОС 07-23) ── */
.vv-stock-miss-link { background: none; border: none; color: #C9722E; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0 0 0 8px; }
.vv-rebuild-btn2 { width: 100%; margin-top: 10px; padding: 13px; border-radius: var(--r-sm); border: none; background: var(--dv2-green-tint, #eaf6ee); color: var(--vv-green-dark, #127a3a); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.vv-rebuild-btn2:active { opacity: .9; }
#vv-missing-pop .misspop-bg { position: fixed; inset: 0; background: rgba(17,24,39,.45); z-index: 980; }
#vv-missing-pop .misspop { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 981; width: min(92vw, 380px); max-height: 70vh; display: flex; flex-direction: column; background: var(--dv2-surface, #fff); border-radius: var(--r-lg); box-shadow: 0 16px 48px rgba(17,24,39,.25); overflow: hidden; }
#vv-missing-pop .misspop-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px 11px; font-size: 14.5px; font-weight: 800; color: var(--dv2-text, #1c2b2b); border-bottom: 1px solid var(--dv2-border-soft, rgba(17,24,39,.07)); }
#vv-missing-pop .misspop-x { background: none; border: none; font-size: 21px; line-height: 1; color: var(--dv2-muted, #9aa5a5); cursor: pointer; padding: 0 2px; }
#vv-missing-pop .misspop-list { overflow-y: auto; padding: 6px 16px 14px; }
#vv-missing-pop .misspop-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--dv2-border-soft, rgba(17,24,39,.05)); font-size: 13px; font-weight: 600; color: var(--dv2-text, #1c2b2b); }
#vv-missing-pop .misspop-item:last-child { border-bottom: none; }
#vv-missing-pop .misspop-item img { width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.06)); background: #fff; padding: 2px; flex: 0 0 auto; }
/* «Проверить наличие» в шите — в новом стиле */
#vv-checkout-sheet .btn-outline { border: 1px solid var(--dv2-border, rgba(17,24,39,.12)) !important; border-radius: var(--r-sm) !important; color: var(--dv2-text, #1c2b2b) !important; font-weight: 600 !important; background: var(--dv2-surface, #fff) !important; }

/* ── Карточка пары нутриентов с реальными товарами (VVELL-53) ── */
.nut-card { display: flex; gap: 13px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--dv2-border-soft, rgba(17,24,39,.06)); }
.nut-card:last-child { border-bottom: none; }
.nut-visual { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.nut-side { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; }
.nut-side img { width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: cover; background: #fff; border: 1px solid var(--dv2-border-soft, rgba(17,24,39,.07)); padding: 2px; }
.nut-side span { font-size: 9px; line-height: 1.15; color: var(--dv2-muted, #9aa5a5); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nut-plus { font-size: 15px; font-weight: 700; color: var(--nut-accent, var(--vv-green, #159145)); flex: 0 0 auto; margin-bottom: 14px; }
.nut-body { min-width: 0; }
.nut-title { font-size: 13px; font-weight: 700; color: var(--nut-accent, var(--vv-green, #159145)); margin-bottom: 3px; }
.nut-advice { font-size: 12px; line-height: 1.4; color: var(--dv2-text-2, #4a5652); }

/* ============================================================
   КАТАЛОГ В КОРЗИНЕ (VVELL-20)
   Устройство повторяет приложение ВкусВилла: плитки категорий с фотографией,
   внутри — лента отобранных товаров и подгруппы строками.
   Фотографии проксируются через /img/cat/, к чужому CDN браузер не ходит.
   ============================================================ */
.vv-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vv-cat-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 116px; padding: 10px; border: none; border-radius: var(--r-md); cursor: pointer;
  background: var(--dv2-surface-2, #f6f8f7); overflow: hidden; text-align: left;
}
.vv-cat-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* ⚠ ГРАДИЕНТ ПОД НАЗВАНИЕМ УБРАН. Это и есть «чёрный текст и градиент» из жалобы
   владельца. Две отдельные поломки сошлись в одной подложке:

   1) её перекрашивал @media (prefers-color-scheme: dark) — единственный медиазапрос
      на всё приложение. Подложка слушалась ОС, а цвет букв идёт от --dv2-text, то есть
      от темы ПРИЛОЖЕНИЯ (класс .vv-theme-night, localStorage vv_design_theme). Тёмная
      ОС + дневная тема = тёмная подложка под почти чёрными буквами #23302A: замер по
      пикселям дал 8 плиток из 10 ниже нормы, худшая «Овощи и зелень» 1,96:1 при 4,5:1;
   2) сама идея «полупрозрачная полоса поверх фото» не держит контраст в принципе:
      итоговый цвет зависит от ФОТО, а фото у категорий разной светлоты. Ночная полоса
      (.48 в середине) поверх светлых предметных фото ВВ давала серый #878E84 — светлый
      текст на нём 2,69:1. То есть ночью было сломано ровно так же, просто наоборот.

   Теперь подпись сидит на СВОЕЙ плашке --dv2-glass, и фото в расчёт не входит вообще.
   Худший случай считается арифметикой, а не удачей: днём (плашка .88 поверх чёрного
   фото) 9,3:1, ночью (.92 поверх белого фото) 11,1:1 — обе темы с запасом выше 4,5:1.
   Плашка размером со строку, поэтому фотография остаётся яркой — ради этого и
   отказывались когда-то от заливки на 62% высоты.
   Медиазапрос по системной теме сюда не возвращать: тему задаёт КЛАСС. */
.vv-cat-tile-title {
  position: relative; z-index: 2; font-size: 13px; font-weight: 600; line-height: 1.2;
  color: var(--dv2-text, #1c2b2b);
  align-self: flex-start; max-width: 100%;
  padding: 5px 8px; border-radius: var(--r-xs);
  background: var(--dv2-glass, rgba(255,255,255,.88));
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
}

/* ── Значок грейда полезности ──
   Цвет идёт от зелёного к терракоте. Но одним цветом смысл не передаём: внутри
   значка стоит СЛОВО и читается без различения оттенков — это требование
   доступности, у 8% мужчин нарушено цветовосприятие.
   ⚠ Раньше здесь была буква A-F в квадратике 17×17. Буква ничего не значила
   рядом с товаром (VVELL-102), поэтому значок стал словом и, соответственно,
   плашкой переменной ширины. Ширину не задаём — слова разной длины. */
.vv-grade {
  display: inline-flex; align-items: center; justify-content: center;
  height: 17px; padding: 0 7px; border-radius: var(--r-xs); margin-right: 5px;
  font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff;
  letter-spacing: .01em; white-space: nowrap; vertical-align: -3px;
}
/* Четыре ступени (10.08.2026). Классы по УРОВНЮ, а не по букве: A и B дают одно
   слово, и два оттенка под ним читались бы как ошибка.
   Нижний уровень намеренно НЕ красный: «среднее» — это про состав еды, а не
   предупреждение об опасности. Красный тут стыдил бы за ужин.
   ⚠ Имя нижней ступени менялось трижды («скромно» -> «умеренно» -> «среднее»,
   13.08.2026, решение владельца), а класс всё это время один — `vv-grade-l1`.
   Так и надо: слово живёт в одном месте (app/core/food_grade.LEVEL_LABEL),
   и CSS переименований не замечает. Цвет тут — вторая опора порядка ступеней
   после подсказки, потому что «среднее» и «обычно» словами друг друга
   не упорядочивают. */
/* ⚠ ЦВЕТА ЗАТЕМНЕНЫ РАДИ ЧИТАЕМОСТИ, А НЕ ДЛЯ КРАСОТЫ. Замер контраста белого
   текста на прежних фонах: питательно 5,02:1 (норма), хорошо 3,48:1,
   обычно 2,42:1, нижняя 3,75:1 — три плашки из четырёх ниже нормы WCAG 4,5:1,
   а плашка уровня это одна из двух вещей, ради которых фича существует.
   Новые значения проверены тем же расчётом, все четыре ≥ 4,5:1. */

/* ══ ЦВЕТА ПЕРЕБРАНЫ: СТУПЕНИ БЫЛИ НЕОТЛИЧИМЫ ДРУГ ОТ ДРУГА (VVELL-396, 23.08.2026)
   Владелец: «так плохо очень видно, умеренно и средне почти одинаковые цвета».

   ⚠ ПРЕДЫДУЩАЯ ПРАВКА ПРОВЕРЯЛА НЕ ТО. Она мерила контраст БЕЛОГО ТЕКСТА НА
   плашке (и добилась ≥ 4,5:1 — это верно и сохранено), но ни разу не померила
   контраст ПЛАШЕК МЕЖДУ СОБОЙ. А на полосе оценки четыре цвета лежат встык, и
   различать надо именно их. Замер прежнего набора #8C5A28 / #8A6B12 / #3B7A3A /
   #1B7F4B (CIEDE2000, соседние ступени):
       умеренно ↔ неплохо      ΔE00 11,6
       неплохо  ↔ хорошо       ΔE00 26,1
       хорошо   ↔ питательно   ΔE00  5,4   ← два зелёных, глазом одно и то же
   Светлота L* при этом стояла плато 42,8 / 46,9 / 45,8 / 46,9 — то есть ступени
   НЕ УПОРЯДОЧЕНЫ по яркости вовсе, и в оттенках серого лестница исчезала.

   НОВЫЙ НАБОР. Тон разведён по кругу (57° → 86° → 132° → 176°), а светлота
   сделана МОНОТОННОЙ — она единственный канал, который остаётся при любом типе
   цветовосприятия. Замер того же расчёта:
       белый текст:  6,93 / 5,69 / 4,79 / 4,56 : 1   — все четыре ≥ 4,5 (WCAG AA)
       ΔE00 соседних:      20,4 / 22,0 / 19,5        — худшая пара 5,4 → 19,5
       L* по ступеням:  38,1 → 43,4 → 48,1 → 49,5    — теперь по возрастанию
       протанопия, худшая пара: 4,0 → 7,6 (симуляция Viénot 1999)
   Дейтеранопия остаётся слабым местом (охра ↔ зелень, ΔE00 4,7): красно-зелёная
   ось там отсутствует физически, добрать её цветом нельзя. Поэтому на полосе
   ступени дополнительно разделены светлым волоском (см. `.pc-scale i` в
   bindings.js) — четыре участка можно ПЕРЕСЧИТАТЬ, не различая цвета, — а в
   плашке смысл несёт слово внутри неё, как и было задумано выше.

   ⚠ ВЕРХНЯЯ СТУПЕНЬ УШЛА В СИНЕ-ЗЕЛЁНЫЙ НАМЕРЕННО. Держать «хорошо» и
   «питательно» в одном зелёном семействе — это и есть та самая пара с ΔE00 5,4.
   Синяя составляющая у #008573 — единственное, что разводит их для дальтоника.
   ⚠ НИЖНЯЯ ПО-ПРЕЖНЕМУ НЕ КРАСНАЯ: #90441C — жжёная глина (тон 52°), а не
   сигнал тревоги. Правило «не стыдить за ужин» не тронуто. */
/* ══ УЧАСТОК ТОНУЛ В НОЧНОМ ЛИСТЕ (VVELL-407, 24.08.2026)
   Вчерашняя правка мерила белый текст НА плашке и ступени МЕЖДУ собой — и то и
   другое верно. Не мерил никто третьего: контраста участка К ФОНУ ЛИСТА, на
   котором он лежит (WCAG 1.4.11, нетекстовый, порог 3:1). Днём лист светлый
   (#FBF7EF) и всё проходит с запасом (худшее 4,27:1), а ночью лист тёмный
   (#1C2721), и две нижние ступени об него разбились:
       умеренно #90441C → 2,23:1     неплохо #7F630B → 2,71:1
   Замер снят с ЖИВОГО DOM стенда, а не из этого файла:
   `scripts/shot_grade_scale_20260824.py`.

   ⚠ ПОЭТОМУ ЦВЕТА СТУПЕНЕЙ СТАЛИ ТОКЕНАМИ. Тех же четыре значения лежали в
   ТРЁХ местах — здесь, в `_ensureFqdCss` (fill у кружков часов питания) и в
   `_PC_STEP_BAD/_PC_STEP_GOOD` (точки в разборе карточки). Ночная правка,
   сделанная только здесь, развела бы полосу и точки под ней в разные палитры —
   ровно то, чего этот блок и добивался не допустить. Теперь значение одно.

   ⚠ ЧТО ДЕРЖИТ ОКНО НОЧНЫХ ЗНАЧЕНИЙ — АРИФМЕТИКА, А НЕ ВКУС. Снизу порог 3:1 к
   ночному листу (светимость ≥ 0,1542 → L* ≥ 46,2), сверху 4,5:1 для белого
   текста на плашке (≤ 0,1833 → L* ≤ 49,9). На ЧЕТЫРЕ ступени остаётся 3,7
   единицы L*. «Хорошо» (48,1) и «питательно» (49,5) в окно уже попадают и
   НЕ ТРОГАЮТСЯ; поднимаем только две нижние, и им остаётся отрезок 46,2…48,1.
   Тон и насыщенность сохранены — ночная ступень должна читаться как та же
   глина и та же охра, только светлее, а не как вторая палитра.

   Ночной набор (тот же расчёт, `scripts/grade_scale_contrast_20260824.py`):
       к листу:      3,04 / 3,13 / 3,22 / 3,38 : 1   — все четыре ≥ 3 (было 2,23)
       белый текст:  5,07 / 4,92 / 4,79 / 4,56 : 1   — все четыре ≥ 4,5 (WCAG AA)
       ΔE00 соседних:     19,6 / 24,9 / 19,5         — порог 19 держится
       L* по ступеням: 46,6 → 47,4 → 48,1 → 49,5     — по возрастанию
       дихромат, худшая пара: протан 5,6 · дейтеран 5,8 (днём 7,6 и 4,3)
   ⚠ ИЗ ДВУХ ГОДНЫХ ПАР ВЗЯТА НЕ САМАЯ КОНТРАСТНАЯ. Пара #A35D34/#886F0E даёт
   к листу 3,06/3,18 — на сотую больше, — но роняет различимость для протанопа
   до 4,3 (это уровень, с которого VVELL-396 и уходил). Взятая пара платит 0,02
   контраста и получает 5,6: обе величины выше своих порогов, а вторая — та,
   ради которой вчера переставляли всю шкалу.
   Нижняя по-прежнему НЕ красная: #A65A39 — тон 49°, C* 43, та же жжёная глина.
   ⚠ У красного тон в Lab тоже ≈ 40°, то есть одной рамкой по тону «не красный»
   не задаётся: первый прогон подбора выдал #E1091E — формально «тон 41°», а на
   экране сигнал тревоги. Разводит их НАСЫЩЕННОСТЬ (у глины C* 43, у красного
   105), поэтому в отборе стоят обе рамки.
   Верхняя по-прежнему сине-зелёная и НЕ МЕНЯЛАСЬ — она единственное, что
   разводит «хорошо» и «питательно» для дальтоника.

   ⚠ ЧЕГО ЭТА ПРАВКА НЕ ЧИНИТ, И ЭТО НЕ ЗАБЫТО. Полоса лежит не прямо на листе,
   а внутри блока вердикта с фоном --bg-warm (#232F28 ночью), и к НЕМУ числа
   ниже: 2,75 / 2,83 / 2,90 / 3,05. Довести до 3:1 и их ЦВЕТОМ НЕЛЬЗЯ: порог
   3:1 к #232F28 требует светимости ≥ 0,1763 (L* ≥ 48,9), а потолок белого
   текста — 0,1833 (L* ≤ 49,9); в 1,0 единицу L* четыре ступени с ΔE00 19 не
   укладываются. Это развилка для владельца (сделать ночной блок вердикта
   «колодцем» темнее листа — тогда проходят все четыре), а не то, что можно
   решить подбором цвета. */
:root {
  --vv-grade-1: #90441C;   /* умеренно   — белый текст 6,93:1, к листу 6,49:1, L* 38,1 */
  --vv-grade-2: #7F630B;   /* неплохо    — белый текст 5,69:1, к листу 5,32:1, L* 43,4 */
  --vv-grade-3: #527E2E;   /* хорошо     — белый текст 4,79:1, к листу 4,48:1, L* 48,1 */
  --vv-grade-4: #008573;   /* питательно — белый текст 4,56:1, к листу 4,27:1, L* 49,5 */
}
.vv-theme-night {
  --vv-grade-1: #A65A39;   /* умеренно   — белый текст 5,07:1, к листу 3,04:1, L* 46,6 */
  --vv-grade-2: #916A00;   /* неплохо    — белый текст 4,92:1, к листу 3,13:1, L* 47,4 */
  /* ступени 3 и 4 в ночном окне уже лежат — не трогаем */
}

/* ⚠ РАЗВИЛКА ИЗ КОММЕНТАРИЯ ВЫШЕ РЕШЕНА (24.08.2026): темнеет ФОН, а не ступени.
   Полоса лежит не на листе, а внутри блока вердикта, и к его ночному фону
   (--bg-warm, #232F28) ступени давали 2,75 / 2,83 / 2,90 / 3,05 — три из четырёх
   ниже порога 3:1 для нетекстового контраста (WCAG 1.4.11). Цветом это
   не чинится: снизу порог, сверху потолок белого текста 4,5:1, между ними
   1,0 единица L* на четыре ступени.
   Поэтому у блока свой токен `--pc-well`, и ночью он темнее листа — «колодец».
   Замер на этих же цветах (scripts/grade_scale_contrast_20260824.py):
       к фону блока: 3,36 / 3,46 / 3,56 / 3,74 : 1  — все четыре ≥ 3 (было 2,75)
       фон блока к листу: 1,11:1 — блок читается как углубление, а не как заплата
   Днём блок не трогаем: там ступени дают к нему 6,05 / 4,97 / 4,18 / 3,98.
   ⚠ Волосок между участками красится ТЕМ ЖЕ токеном: он изображает просвет
   до фона, и разойдись они — на полосе появилась бы светлая линия. */
:root       { --pc-well: var(--bg-warm, #F7F0E4); }
.vv-theme-night { --pc-well: #151E19; }
.vv-grade-l4 { background: var(--vv-grade-4); }
.vv-grade-l3 { background: var(--vv-grade-3); }
.vv-grade-l2 { background: var(--vv-grade-2); }
.vv-grade-l1 { background: var(--vv-grade-1); }
/* Старые классы по буквам оставлены на один релиз: если где-то остался
   невыловленный вызов со старым именем, значок будет серым, а не невидимым. */
.vv-grade-A, .vv-grade-B, .vv-grade-C,
.vv-grade-D, .vv-grade-E, .vv-grade-F { background: #8A8A8A; }
/* Звезда «лучший в полке» — отдельный сигнал, не цвет: работает и в ч/б. */
.vv-grade-star { color: #C9A227; font-size: 12px; margin-right: 4px; vertical-align: -1px; }

/* Лента «Стоит внимания» — отбор по числу сильных плюсов за продукт, не по продажам. */
.vv-cat-strip-title { font-size: 13px; font-weight: 600; margin: 2px 0 8px; color: var(--dv2-text, #1c2b2b); }
.vv-cat-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; scrollbar-width: none; }
.vv-cat-strip::-webkit-scrollbar { display: none; }
.vv-cat-strip-item { flex: 0 0 104px; cursor: pointer; }
.vv-cat-strip-item img { width: 104px; height: 104px; object-fit: cover; border-radius: var(--r-sm); background: var(--dv2-surface-2, #f6f8f7); }
.vv-cat-strip-name { font-size: 11.5px; line-height: 1.25; margin-top: 5px; color: var(--dv2-text, #1c2b2b);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vv-cat-strip-price { font-size: 12px; font-weight: 600; color: var(--vv-green, #159145); margin-top: 2px; }

/* Подгруппы строками: в категории их до 41, плитками получилась бы мозаика. */
.vv-cat-rows { display: flex; flex-direction: column; }
.vv-cat-row {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 4px;
  background: none; border: none; border-bottom: 1px solid var(--dv2-border-soft, rgba(17,24,39,.07));
  cursor: pointer; text-align: left; font: inherit;
}
.vv-cat-row:last-child { border-bottom: none; }
.vv-cat-row-name { font-size: 14px; color: var(--dv2-text, #1c2b2b); }
.vv-cat-row-count { margin-left: auto; font-size: 12.5px; color: var(--dv2-muted, #9aa5a5); }
.vv-cat-row-chev { font-size: 17px; line-height: 1; color: var(--dv2-muted, #9aa5a5); }

/* Строка про ТВОИ товары — главная в карточке, поэтому крупнее и контрастнее общего
   совета. До VVELL-61 было наоборот: общий совет шёл первым и противоречил фотографиям. */
.nut-incart { font-size: 12px; font-weight: 600; line-height: 1.35;
              color: var(--dv2-text, #1d2b26); margin-bottom: 6px; }
/* «Вообще:» — метка, что дальше идёт общий совет, а не про товары из корзины. */
.nut-advice-label { font-weight: 600; color: var(--dv2-muted, #9aa5a5); }

/* Палитра «Песок» переехала в static/css/palette_sand.css и стала базовой
   для всего приложения (VVELL-59). Тестовый слой .wh-sand и тумблер сняты. */

/* Привычка, засчитанная автоматически по данным часов (VVELL-60) */
.wh-hab.auto .wh-hab-check { opacity: .85; }
.wh-hab-auto { font-size: 9.5px; font-weight: 600; color: var(--wh-ink-3); background: rgba(127,140,132,.13);
  border-radius: 999px; padding: 2px 7px; margin-left: auto; white-space: nowrap; }
.wh-hab.auto .wh-hab-streak { margin-left: 6px; }

/* ── Отметки привычек из фразы в чате (VVELL-60) ───────────────────────────
   Каждая отметка отменяемая: человек видит, что именно записано с его слов. */
.vv-habit-log { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.vv-habit-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--vv-green-soft, #eef4e6);
  border: 1px solid var(--vv-green-line, #d5e4c4);
  font-size: 13px;
}
.vv-habit-chip.undone { background: var(--ink-6, #f4f4f4); border-color: var(--ink-5, #e4e4e4); opacity: .7; }
.vv-habit-mark {
  flex: 0 0 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vv-green, #2E5D00); color: #fff; font-size: 12px; font-weight: 700;
}
.vv-habit-chip.undone .vv-habit-mark { background: var(--ink-4, #aaa); }
.vv-habit-name { flex: 1 1 auto; color: var(--ink, #1a1a1a); font-weight: 600; }
.vv-habit-undo {
  flex: 0 0 auto; padding: 4px 10px; border-radius: var(--r-xs); cursor: pointer;
  background: transparent; border: 1px solid var(--ink-4, #ccc);
  color: var(--ink-2, #666); font-size: 12px; font-weight: 600;
}
.vv-habit-undo:hover { background: var(--ink-6, #f0f0f0); }
.vv-habit-undo:disabled { opacity: .5; cursor: default; }
.vv-habit-undone-note { flex: 0 0 auto; font-size: 12px; color: var(--ink-3, #888); }

/* Чип-фильтр в модалке поиска товаров (VVELL-74, «На сахзаме») */
.vv-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-warm); color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.vv-filter-chip:hover { border-color: var(--vv-green); color: var(--vv-green-dark); }
.vv-filter-chip.on {
  background: var(--vv-green); border-color: var(--vv-green); color: #fff;
}

/* ⚠ ЗАКРЫТЫЙ РЕЖИМ ГОТОВКИ (17.08.2026). «С нуля» отключён до тех пор, пока он
   собирает список закупки вместо тарелки. Плитка обязана ЧИТАТЬСЯ как закрытая
   с одного взгляда: бледная, без рамки выбора, курсор не «палец».
   ⚠ Общая `.tbd-plate` тут не годится — она позиционируется absolute в правом
   верхнем углу, а в плитке шириной 100 px ей негде встать: на снимке её не было
   видно вовсе. Слово «скоро» стоит подписью вместо «свежие продукты». */
.cfgv2-opt.is-tbd { opacity: .45; cursor: default; }
.cfgv2-opt.is-tbd small { font-weight: 700; letter-spacing: .04em; }


/* ══════════════════════════════════════════════════════════════════════════
   ЭКРАНЫ «СОН» И «НАГРУЗКА» + ПОДПИСЬ ИСТОЧНИКА
   VVELL-393 / 394 / 404, 23.08.2026. Разметку строят vvWhOpenSleep и
   vvWhOpenLoad в static/js/bindings.js.

   Цвета — ТОЛЬКО через существующие токены темы (--wh-*, --ink-*, --vvch-*).
   Своей палитры здесь нет ни одного литерала: у проекта две темы, и любой hex,
   объявленный вне парных блоков :root / .vv-theme-night, ночью достаётся
   дневным. На этих граблях проект уже стоял (см. шапку блока .vvch-*).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Подпись источника (VVELL-404) ─────────────────────────────────────────
   Мелкая и приглушённая: это сноска к числу, а не второе число. --wh-ink-3 —
   тот же тон, которым в проекте набраны все пояснения под значениями. */
.vv-src {
  margin-top: 4px;
  font-size: 11px; line-height: 1.35;
  color: var(--wh-ink-3);
  letter-spacing: .01em;
}
/* Подпись, общая на весь блок: отделена от последней строки волосяной линией,
   иначе она читается как продолжение подписи под последним числом. */
.vv-src-block {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--wh-line);
}

/* ── Общее для обоих экранов ───────────────────────────────────────────── */
/* ⚠ --wh-elev ОБЪЯВЛЕН НА .wh-home И ТОЛЬКО ТАМ (см. выше по файлу), а эти
   экраны живут в .wh-detail — без своей строки тень у карточек была бы пустой
   и блоки читались бы плоскими наклейками рядом с объёмными карточками главной.
   Значения ТЕ ЖЕ, что у .wh-home, обе темы — иначе ночью карточка получила бы
   дневную тень. */
.wh-detail { --wh-elev: 0 1px 2px rgba(20,14,0,.05), 0 12px 26px -8px rgba(20,14,0,.12); }
.vv-theme-night .wh-detail { --wh-elev: 0 1px 2px rgba(0,0,0,.35), 0 12px 30px -10px rgba(0,0,0,.55); }

.slp-load {
  padding: 28px 4px; text-align: center;
  font-size: 13px; color: var(--wh-ink-3);
}
.slp-empty { padding: 22px 2px; text-align: center; }
.slp-empty-t { font-size: 16px; font-weight: 700; color: var(--wh-ink); margin-bottom: 6px; }
.slp-empty-s { font-size: 13px; color: var(--wh-ink-2); line-height: 1.5; margin-bottom: 16px; }

.slp-block {
  background: var(--wh-card); border: 1px solid var(--wh-line);
  border-radius: var(--r-md); padding: 14px; margin-bottom: 12px;
  box-shadow: var(--wh-elev);
}
.slp-h {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--wh-ink-2); margin-bottom: 10px;
}
.slp-hint { font-size: 11.5px; color: var(--wh-ink-3); line-height: 1.4; margin-top: 4px; }
.slp-src-note {
  margin-top: 10px; font-size: 11px; color: var(--wh-ink-3); line-height: 1.4;
}

/* ── Ночь крупно ──────────────────────────────────────────────────────── */
.slp-hero {
  background: var(--wh-card); border: 1px solid var(--wh-line);
  border-radius: var(--r-md); padding: 18px 14px; margin-bottom: 12px;
  text-align: center; box-shadow: var(--wh-elev);
}
.slp-hero-big {
  font-size: 40px; font-weight: 700; line-height: 1;
  color: var(--wh-ink); letter-spacing: -.02em;
}
.slp-hero-big span { font-size: 17px; font-weight: 600; color: var(--wh-ink-3); }
.slp-hero-sub { margin-top: 7px; font-size: 13px; color: var(--wh-ink-2); line-height: 1.45; }
.slp-hero-when { margin-top: 3px; font-size: 12px; color: var(--wh-ink-3); }
.slp-hero .vv-src { margin-top: 8px; }

/* Перерывы ночи — строкой под полосой состава, а не куском внутри неё:
   доли фаз считаются от времени СНА, и перерыв в этот знаменатель не входит. */
.slp-awake {
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--wh-line);
  font-size: 12.5px; color: var(--wh-ink-2);
}
.slp-awake i { flex: none; }

/* ── Строки «что влияет» ──────────────────────────────────────────────── */
.slp-rows > .slp-row + .slp-row {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wh-line);
}
.slp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.slp-name { font-size: 13.5px; font-weight: 600; color: var(--wh-ink); }
.slp-val  { font-size: 13.5px; font-weight: 700; color: var(--wh-ink); white-space: nowrap; }

/* Дорожка: серый фон = вся шкала, светлая полоса = ориентир, точка = эта ночь.
   ⚠ ВЫСОТА 6 px, А НЕ 12. Дорожка здесь — контекст под числом, а не сам
   показатель: толстая полоса перетягивала бы внимание с числа на себя, а
   правило проекта для графики — тонкие марки. */
.slp-track {
  position: relative; height: 6px; margin-top: 9px;
  background: var(--wh-line); border-radius: 3px;
}
.slp-zone {
  position: absolute; top: 0; height: 100%;
  background: var(--vvch-grid); border-radius: 3px;
}
/* Своё среднее — тонкая засечка. Не точка: две точки на одной дорожке
   спорят между собой, а засечка читается как «отсюда ты обычно». */
.slp-own {
  position: absolute; top: -3px; width: 2px; height: 12px;
  margin-left: -1px; background: var(--wh-ink-3); border-radius: 1px; opacity: .75;
}
/* Точка «эта ночь» — в кольце цвета поверхности, иначе на своём же цвете
   зоны она пропадает. Тот же приём, что у точек в vvchart. */
.slp-dot {
  position: absolute; top: 50%; width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  border: 2px solid var(--wh-card);
}
.slp-dot.slp-ok  { background: var(--vvch-good); }
.slp-dot.slp-mid { background: var(--vvch-mid); }
.slp-dot.slp-low { background: var(--vvch-low); }

.slp-word { margin-top: 7px; font-size: 12px; font-weight: 600; }
.slp-word.slp-ok  { color: var(--vvch-good-t); }
.slp-word.slp-mid { color: var(--vvch-mid-t); }
.slp-word.slp-low { color: var(--vvch-low-t); }

.slp-legend-note {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px;
  font-size: 11px; color: var(--wh-ink-3);
}
.slp-legend-note span { display: inline-flex; align-items: center; gap: 5px; }
.slp-lg-zone { width: 14px; height: 6px; border-radius: 3px; background: var(--vvch-grid); }
.slp-lg-own  { width: 2px;  height: 11px; border-radius: 1px; background: var(--wh-ink-3); }
.slp-lg-dot  {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--vvch-good); border: 2px solid var(--wh-card);
}

/* ── Экран «Нагрузка» ─────────────────────────────────────────────────── */
.lod-when {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--wh-ink-2); margin-bottom: 8px;
}
.lod-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.lod-tile {
  background: var(--wh-card); border: 1px solid var(--wh-line);
  border-radius: var(--r-md); padding: 13px 14px; box-shadow: var(--wh-elev);
}
.lod-tile-l {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wh-ink-2);
}
.lod-tile-v {
  margin-top: 6px; font-size: 24px; font-weight: 700; line-height: 1.1;
  color: var(--wh-ink); letter-spacing: -.01em;
}
.lod-tile-v span { font-size: 13px; font-weight: 600; color: var(--wh-ink-3); }

.lod-week-top {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 14px; font-weight: 700; color: var(--wh-ink); margin-bottom: 4px;
}
.lod-week-pct { color: var(--wh-ink-2); font-weight: 600; }
/* Тренировки записями на экране «Нагрузка» (VVELL-410) */
.lod-wk-sum { font-size: 13px; color: var(--wh-ink-2); margin: 2px 0 6px; }
.lod-wk { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--wh-line); }
.lod-wk:first-child { border-top: 0; }
.lod-wk-t b { display: block; font-size: 14px; font-weight: 600; color: var(--wh-ink); }
.lod-wk-t span { font-size: 12px; color: var(--wh-ink-3); }
.lod-wk-n { font-size: 12.5px; color: var(--wh-ink-2); text-align: right; flex-shrink: 0; max-width: 55%; }

.lod-tip {
  border: 1px solid var(--wh-line); border-left: 3px solid var(--vvch-good);
  background: var(--wh-card); border-radius: var(--r-sm); padding: 13px 14px;
  font-size: 13px; line-height: 1.5; color: var(--wh-ink-2); margin-bottom: 12px;
}
.lod-tip.lod-mid { border-left-color: var(--vvch-mid); }

.lod-age {
  position: relative; padding-right: 22px; cursor: pointer;
}
.lod-age-v { font-size: 20px; font-weight: 700; color: var(--wh-ink); }
.lod-age-s { margin-top: 3px; font-size: 12.5px; color: var(--wh-ink-2); }
.lod-age .wh-mon-chev { position: absolute; right: 0; top: 0; }

.lod-chart + .lod-chart { margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   МАГАЗИН ЧЕЛОВЕКА: СТРОКА В КОРЗИНЕ И ШТОРКА ВЫБОРА (VVELL-426, 26.08.2026)

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

   Место найдено НЕ в шапке: там два круглых значка по 44 px и заголовок, а
   адрес — строка переменной длины, третий значок ужал бы заголовок до
   многоточия. Магазин встал в тот же ряд, что «Настройки», и повторяет её
   геометрию (та же карточка, тот же шеврон, та же высота касания).
   ═══════════════════════════════════════════════════════════════════════════ */
.vv-store-row {
  width: 100%; display: flex; align-items: center; gap: 11px;
  min-height: 56px; padding: 12px 14px; margin: 0 0 12px;
  background: var(--dv2-surface, #fff);
  border: 1px solid var(--dv2-border, rgba(17, 24, 39, .1));
  border-radius: var(--r-md); cursor: pointer; text-align: left;
}
.vv-store-ico { flex: 0 0 auto; display: flex; color: var(--vv-green, #159145); }
.vv-store-ico svg { width: 20px; height: 20px; }
.vv-store-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vv-store-cap {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--dv2-muted, #9aa5a5);
}
.vv-store-addr {
  font-size: 13.5px; font-weight: 650; color: var(--dv2-text, #1c2b2b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vv-store-row.is-empty { border-color: var(--vv-green, #159145); }
.vv-store-row.is-empty .vv-store-addr { color: var(--vv-green, #159145); }
.vv-store-chev {
  margin-left: auto; flex: 0 0 auto; font-size: 20px; line-height: 1;
  color: var(--dv2-muted, #9aa5a5);
}

/* Позиция, которой в выбранном магазине нет. Не тревога: обычная еда, которой
   нет в ОДНОМ магазине. Поэтому приглушённая подпись, а не красная плашка. */
.vv-item-offshelf {
  display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600;
  color: var(--sand-clay, #9C562C);
}

/* ── Шторка выбора магазина ─────────────────────────────────────────────── */
#vv-store-sheet { position: fixed; inset: 0; z-index: 1200; }
#vv-store-sheet .vv-ss-bg {
  position: absolute; inset: 0; background: rgba(12, 20, 16, .42);
  opacity: 0; transition: opacity .2s ease;
}
#vv-store-sheet.open .vv-ss-bg { opacity: 1; }
#vv-store-sheet .vv-ss {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--dv2-surface, #fff);
  border-radius: 22px 22px 0 0;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px;
  max-height: 86vh; overflow-y: auto;
  transform: translateY(102%); transition: transform .22s ease;
}
#vv-store-sheet.open .vv-ss { transform: translateY(0); }
.vv-ss-grip {
  width: 42px; height: 4px; border-radius: 3px; margin: 2px auto 6px;
  background: var(--dv2-border, rgba(17, 24, 39, .16));
}
.vv-ss-title { font-size: 19px; font-weight: 730; color: var(--dv2-text, #1c2b2b); }
.vv-ss-sub { font-size: 13px; color: var(--dv2-muted, #9aa5a5); margin-top: -4px; }
/* адрес человека на плашке и «сейчас выбрано» в шторке (20.09.2026) */
.vv-store-sub { display: block; font-size: 12px; color: var(--dv2-muted, #9aa5a5); margin-top: 2px; }
.vv-ss-now { font-size: 13px; color: var(--dv2-muted, #9aa5a5); margin: -2px 0 10px; line-height: 1.35; }
.vv-ss-now b { color: var(--dv2-text, #1c2b2b); font-weight: 600; }
.vv-ss-geo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--vv-green, #159145);
  background: var(--dv2-green-tint, #eaf6ee);
  color: var(--vv-green-dark, #127a3a); font-size: 14.5px; font-weight: 700;
}
.vv-ss-geo svg { width: 18px; height: 18px; }
.vv-ss-geo.is-busy { opacity: .6; }
.vv-ss-input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px;
  border-radius: var(--r-md); font-size: 15px;
  border: 1px solid var(--dv2-border, rgba(17, 24, 39, .12));
  background: var(--dv2-surface-2, #f6f8f7); color: var(--dv2-text, #1c2b2b);
}
.vv-ss-list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; }
.vv-ss-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 11px 12px; cursor: pointer; text-align: left;
  background: none; border: none;
  border-bottom: 1px solid var(--dv2-border-soft, rgba(17, 24, 39, .06));
  font-size: 14px; color: var(--dv2-text, #1c2b2b);
}
.vv-ss-item-addr { min-width: 0; flex: 1; }
.vv-ss-item-km {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 650;
  color: var(--vv-green, #159145); font-variant-numeric: tabular-nums;
}
.vv-ss-hint { padding: 12px 4px; font-size: 13px; color: var(--dv2-muted, #9aa5a5); }
.vv-ss-skip {
  min-height: 46px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--dv2-border, rgba(17, 24, 39, .12));
  background: none; color: var(--dv2-muted, #7b8686);
  font-size: 14px; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   РАЗБОР СКОРА СНА (26.08.2026)

   Владелец: «нужно не % просто перевыполнения плана, а именно % восстановления,
   составленный из фаз сна, времени [засыпания] и вставания». Число крупно — это
   вердикт; строки ниже — то, из чего он собран, чтобы вердикт можно было
   проверить, а не принимать на веру.

   Токены — экрана «Сон» (--wh-*), своих цветов не заводим: у экрана есть ночная
   тема, и захардкоженный цвет её бы не увидел.
   ═══════════════════════════════════════════════════════════════════════════ */
.slp-score-rows { display: flex; flex-direction: column; gap: 12px; }
.slp-sc-row { display: flex; flex-direction: column; gap: 5px; }
.slp-sc-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.slp-sc-name { font-size: 13.5px; font-weight: 600; color: var(--wh-ink); }
.slp-sc-val {
  font-size: 13.5px; font-weight: 700; color: var(--wh-ink-2);
  font-variant-numeric: tabular-nums;
}
.slp-sc-bar {
  height: 6px; border-radius: 4px; overflow: hidden;
  background: var(--wh-line, rgba(17, 24, 39, .1));
}
.slp-sc-bar > i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--wh-blue, #4a7fd0);
}
.slp-sc-note { font-size: 11.5px; color: var(--wh-ink-3); line-height: 1.4; }
.slp-sc-scale {
  margin-top: 12px; font-size: 11.5px; color: var(--wh-ink-3); line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════════
   РАЗБОР ОФОРМЛЕННОГО ЗАКАЗА (VVELL-428, 26.08.2026)

   Карточка НАД корзиной, а не вместо неё: снятый холодильник замещал экран
   целиком и мешал человеку, вернувшемуся с vkusvill.ru продолжить работу
   со списком. Здесь короткая сводка, которую можно закрыть.
   ═══════════════════════════════════════════════════════════════════════════ */
.vv-os {
  position: relative;
  background: var(--dv2-green-tint, #eaf6ee);
  border: 1px solid var(--vv-green, #159145);
  border-radius: var(--r-md); padding: 16px 44px 16px 16px; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.vv-os-x {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3, #7C877D);
}
.vv-os-x svg { width: 16px; height: 16px; }
.vv-os-cap {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--vv-green-dark, #127a3a);
}
.vv-os-title {
  font-size: 18px; font-weight: 740; letter-spacing: -.01em;
  color: var(--ink, #23302A);
}
.vv-os-line { font-size: 13.5px; color: var(--ink-2, #5E6B62); }
.vv-os-line b { color: var(--ink, #23302A); font-weight: 700; }
.vv-os-grade .ok { color: var(--vv-green-dark, #127a3a); font-weight: 700; }
.vv-os-grade .soft { color: var(--sand-clay, #9C562C); font-weight: 700; }

.vv-os-goals { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.vv-os-goal {
  background: var(--card, #FBF7EF); border-radius: var(--r-sm); padding: 9px 11px;
}
.vv-os-goal-n {
  font-size: 12.5px; font-weight: 700; color: var(--vv-green-dark, #127a3a);
}
.vv-os-goal-p {
  font-size: 12px; color: var(--ink-2, #5E6B62); line-height: 1.4; margin-top: 2px;
}
.vv-os-streak {
  font-size: 13px; font-weight: 650; color: var(--ink, #23302A);
}
.vv-os-prev { font-size: 12.5px; color: var(--ink-2, #5E6B62); line-height: 1.4; }

/* ── Динамика качества питания: «что ты покупаешь» (26.08.2026) ───────────── */
.fqt-now { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fqt-big {
  font-size: 32px; font-weight: 760; line-height: 1;
  color: var(--wh-ink, #1c2b2b); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fqt-cap { font-size: 12.5px; color: var(--wh-ink-2, #5E6B62); line-height: 1.35; }
.fqt-delta {
  margin-top: 5px; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fqt-delta.up { color: var(--vv-green-dark, #127a3a); }
.fqt-delta.down { color: var(--sand-clay, #9C562C); }
.fqt-note {
  margin-top: 8px; font-size: 11.5px; color: var(--wh-ink-3, #7C877D);
  line-height: 1.4;
}

/* ── «Это наш товар» на разборе фото (26.08.2026) ────────────────────────── */
.vv-ph-known {
  background: var(--dv2-green-tint, #eaf6ee);
  border: 1px solid var(--vv-green, #159145);
  border-radius: var(--r-sm); padding: 11px 13px; margin: 10px 0 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.vv-ph-known-t { font-size: 14px; font-weight: 700; color: var(--ink, #23302A); }
.vv-ph-known-s { font-size: 12.5px; color: var(--ink-2, #5E6B62); }
.vv-ph-known-btn {
  align-self: flex-start; margin-top: 5px; min-height: 38px; padding: 8px 14px;
  border-radius: var(--r-xs); cursor: pointer; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--vv-green, #159145); background: transparent;
  color: var(--vv-green-dark, #127a3a);
}

/* ── Карточка динамики: кликабельность, зоны, подробный экран (26.08.2026) ── */
.fqt-card { cursor: pointer; }
.fqt-h { display: flex; align-items: center; justify-content: space-between; }
.fqt-chev { font-size: 20px; line-height: 1; color: var(--wh-ink-3, #9aa5a5); }
.fqt-more {
  margin-top: 10px; font-size: 13px; font-weight: 650;
  color: var(--vv-green-dark, #127a3a);
}
.fqt-keys {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 8px; font-size: 11.5px; color: var(--wh-ink-3, #7C877D);
}
.fqt-keyi { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fqt-key { width: 14px; height: 9px; border-radius: 3px; display: inline-block;
  flex: 0 0 auto; }
.fqt-key--good { background: var(--vvch-good, #159145); opacity: .30; }
.fqt-key--risk { background: var(--vvch-low, #9C562C); opacity: .26; }
.fqt-ins-t { font-size: 14px; line-height: 1.5; color: var(--wh-ink, #1c2b2b); }

.fqd-chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; }
.fqd-chips::-webkit-scrollbar { display: none; }
.fqd-chip, .fqd-per {
  flex: 0 0 auto; min-height: 36px; padding: 7px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--dv2-border, rgba(17, 24, 39, .1));
  background: var(--dv2-surface-2, #f6f8f7); color: var(--dv2-text, #1c2b2b);
}
.fqd-chip.active, .fqd-per.active {
  border-color: var(--vv-green, #159145);
  background: var(--dv2-green-tint, #eaf6ee);
  color: var(--vv-green-dark, #127a3a);
}
.fqd-pers { display: flex; gap: 7px; margin: 9px 0 4px; }
.fqd-empty {
  padding: 22px 4px; font-size: 13.5px; line-height: 1.5;
  color: var(--wh-ink-2, #5E6B62);
}

/* Качество товара на карточке скана (26.08.2026). Плашка — общая .vv-grade,
   здесь только отступ и подпись «лучший в своей полке» рядом с ней. */
.vv-scan-grade { display: flex; align-items: center; gap: 6px; margin: 3px 0 2px; }

/* Еда не из каталога ВкусВилла (26.08.2026, VVELL-440). Ссылка стоит ПОД
   результатами поиска и в пустом результате — это выход, а не главный путь. */
.vv-own-link {
  display: block; width: 100%; margin: 10px 0 2px; padding: 10px 12px;
  border: 1px dashed var(--dv2-border-soft, rgba(17, 24, 39, .18));
  border-radius: var(--r-sm); background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--vv-green, #008573);
  text-align: center;
}
.vv-own { margin-top: 10px; }
.vv-own-h {
  font-size: 15px; font-weight: 700; color: var(--ink, #111827); margin-bottom: 6px;
}


/* ══════════════════════════════════════════════════════════════════════════
   КОЛИЧЕСТВО И ЗАМОК У ПОЗИЦИИ (28.08.2026, VVELL-474 и VVELL-463)

   ⚠ ПОЧЕМУ ЗДЕСЬ, А НЕ В app.css. Правила дважды оказывались бессильны:
   сначала лежали в `_ensureFqdCss()` — её вызывает только экран питания, на
   корзине она не выполняется вовсе; потом в app.css — но `design_v2.css`
   грузится ПОСЛЕ и содержит `#screen-cart .vv-meal-meta{display:-webkit-box;
   -webkit-line-clamp:2}`, перебивая и по файлу, и по весу селектора (там id).
   Замер в браузере показал `display: flow-root` вместо `flex` — кнопки «−»,
   «1», «+» вставали столбиком.

   Класс `vv-meal-meta` у переключателя снят: это управление, а не текстовый
   блок, и обрезка по двум строкам ему не нужна.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠ ПЕРЕНОС РАЗРЕШЁН, НО ТОЛЬКО ПОДПИСИ (28.08.2026, VVELL-481).
   Здесь стояло `flex-wrap: nowrap`, и подпись «упак 350 г · ~4 порц.»
   обрезалась в «упак…» — то есть человек не видел, СКОЛЬКО он берёт.
   Разрешить перенос всему нельзя: тогда «−», число и «+» встают столбиком,
   это уже проверено 27.08. Поэтому сами кнопки жёстко `flex: 0 0 auto`
   (см. `.vv-qty-b`), а на перенос уходит только подпись. */
#screen-cart .vv-qty { display: flex; align-items: center; gap: 3px 4px;
  flex-wrap: wrap; min-width: 0; margin-top: 3px; }
#screen-cart .vv-qty-b { position: relative; width: 24px; height: 24px;
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft, #EFE7D7); border-radius: var(--r-xs);
  background: var(--paper, #FFF); font: inherit; font-size: 15px;
  line-height: 1; color: var(--ink, #23302A); cursor: pointer; padding: 0; }
/* ⚠ 24 px меньше рекомендованных 44: в строке рядом стоят ещё три действия,
   и в 390 px иначе не поместиться. Промах смягчён невидимой областью
   нажатия — она честные 40 px. */
#screen-cart .vv-qty-b::after { content: ''; position: absolute; inset: -8px; }
#screen-cart .vv-qty-b:disabled { opacity: .35; cursor: default; }
#screen-cart .vv-qty-n { flex: 0 0 auto; min-width: 16px; text-align: center; font-size: 13px;
  font-weight: 700; color: var(--vv-green-dark, #2E7D32);
  font-variant-numeric: tabular-nums; }
#screen-cart .vv-qty-lab { font-size: 11.5px; color: var(--ink-3, #7C877D);
  margin-left: 4px; min-width: 0; flex: 0 1 auto; white-space: nowrap; }
/* ⚠ ПОЛОСЫ СЛЕВА БОЛЬШЕ НЕТ. Владелец: «слева синяя полоска закрывается
   фотом товара» — фотография позиции стоит вплотную к краю и перекрывала её.
   Метку даёт мягкая заливка плюс тонкая рамка: она видна целиком и не спорит
   с изображением. */
#screen-cart .vv-meal-item.is-locked { background: linear-gradient(90deg,
  rgba(59,130,246,.13), rgba(59,130,246,.02)); border-radius: var(--r-sm);
  outline: 1px solid rgba(59,130,246,.35); outline-offset: -1px; }
/* Значок замка стоит рядом с заменой и удалением — там, где человек и ищет
   действия над позицией, а не внутри её названия. */
#screen-cart .vv-lock-mark { display: inline-flex; align-items: center;
  justify-content: center; min-width: 28px; min-height: 28px; color: #3B82F6; }
#screen-cart .vv-lock-mark svg { width: 15px; height: 15px; }
#screen-cart .vv-meal-btn-lock { min-width: 32px; min-height: 32px; border: 0;
  background: none; cursor: pointer; color: var(--ink-3, #7C877D); opacity: .5;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: opacity .15s, color .15s; }
#screen-cart .vv-meal-btn-lock svg { width: 16px; height: 16px; }
#screen-cart .vv-meal-btn-lock.is-on { opacity: 1; color: #3B82F6; }


/* ⚠ ПРАВИЛА ЛИСТА «ЧТО НА КАКОЙ ДЕНЬ» СНЯТЫ (05.09.2026, VVELL-612).
   Здесь лежал блок `#vv-days-sheet .vd-*` — всплывающий лист со сводкой дня.
   Лист удалён из `bindings.js`: день переключает сам список корзины, править
   и добавлять можно прямо в нём. Стили ушли тем же коммитом, что и код. */

/* Полоса дней внизу корзины — кнопки, а не подписи (VVELL-461).

   ⚠ СЕЛЕКТОР ИДЁТ ОТ САМОЙ ПАНЕЛИ, А НЕ ОТ ЭКРАНА. Панель создаётся как
   `document.body.appendChild(stickyBar)` — она НЕ внутри `#screen-cart`, и
   правила `#screen-cart .stky-day` не совпадали ни разу. Кнопки оставались
   без стилей: синие, слипшиеся, «1 день4705 ₽» одной строкой (снимок
   владельца 28.08). Это уже третий случай за сутки, когда стиль лежал не там,
   где элемент, — сначала в `_ensureFqdCss`, потом в `app.css` под чужим
   селектором, теперь здесь. */
#vv-sticky-checkout .stky-detail { display: flex; gap: 8px;
  margin: 0 0 10px; justify-content: stretch; }
#vv-sticky-checkout .stky-day { flex: 1 1 0; min-width: 0; min-height: 46px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; padding: 6px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--dv2-border, rgba(17,24,39,.12));
  background: var(--card, #FFF); font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s; }
#vv-sticky-checkout .stky-day:active { background: var(--line-soft, #EFE7D7); }
/* Выбранный день (VVELL-612): нижняя полоса и верхний сегмент — один выбор,
   значит и вид у выбранной кнопки один. */
#vv-sticky-checkout .stky-day.is-on { border-color: var(--vv-green, #159145);
  background: var(--dv2-green-tint, #eaf6ee); }
#vv-sticky-checkout .stky-day.is-on b,
#vv-sticky-checkout .stky-day.is-on span { color: var(--vv-green-dark, #127a3a); }
.vv-theme-night #vv-sticky-checkout .stky-day.is-on b { color: var(--ink); }
.vv-theme-night #vv-sticky-checkout .stky-day.is-on span { color: var(--ink-2); }
#vv-sticky-checkout .stky-day b { font-size: 13px; font-weight: 600;
  color: var(--ink, #23302A); white-space: nowrap; line-height: 1.15; }
#vv-sticky-checkout .stky-day span { font-size: 11.5px;
  color: var(--dv2-muted, #9aa5a5); font-variant-numeric: tabular-nums;
  line-height: 1.15; }


/* ── Запрос «разрешить класть еду в мой дневник» (VVELL-466, 28.08.2026) ──
   Карточка просит решение о личных данных человека, поэтому она заметна
   рамкой, но НЕ кричит цветом: это не тревога и не ошибка.
   Обе кнопки одного размера — согласие не должно быть легче отказа. */
#vv-family-invite:not(:empty) { margin: 0 0 14px; }
#vv-family-invite .vv-inv { padding: 16px; border-radius: var(--r-md);
  background: var(--dv2-surface, #FBF7EF);
  border: 1px solid var(--dv2-border, #E7DFCE); }
#vv-family-invite .vv-inv + .vv-inv { margin-top: 10px; }
#vv-family-invite .vv-inv-h { font-size: 15px; font-weight: 700;
  color: var(--dv2-text, #23302A); line-height: 1.3; }
#vv-family-invite .vv-inv-t { font-size: 13px; margin-top: 6px;
  color: var(--dv2-muted, #7C877D); line-height: 1.4; }
#vv-family-invite .vv-inv-b { display: flex; gap: 8px; margin-top: 14px; }
#vv-family-invite .vv-inv-b .btn { flex: 1 1 0; min-height: 44px; }


/* Предупреждение «не умеем проверять» (VVELL-501, 28.08.2026).
   Это ПРЕДУПРЕЖДЕНИЕ, а не ошибка: корзина собрана и годится, не проверено
   ровно одно названное свойство. Поэтому янтарный, а не красный. */
#screen-cart .cartwarn { margin: 0 16px 10px; padding: 10px 12px;
  border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.4;
  color: #7A5A12; background: #FDF4E0; border: 1px solid #F0DFB6; }


/* Отказ загрузки (VVELL-498, 28.08.2026). Отличается от пустого состояния
   намеренно: пустота — это «сделай что-нибудь», отказ — «мы не смогли».
   Спокойный, не красный: паниковать человеку не из-за чего, надо просто
   повторить. */
.vv-errbox { margin: 12px 16px; padding: 16px; border-radius: var(--r-md);
  text-align: center; background: var(--dv2-surface-2, #F2EDE3);
  border: 1px dashed var(--dv2-border, #E3DACA); }
.vv-errbox-t { font-size: 14px; color: var(--dv2-muted, #7C877D);
  margin-bottom: 10px; }
.vv-errbox .btn { min-height: 44px; padding: 0 18px; }


/* Действия после заказа (VVELL-468/478, 30.08.2026).
   Две равные кнопки: ни одна не «главная». Человек только что заплатил —
   подталкивать его к чему-то одному незачем, оба пути одинаково уместны.
   Подпись под названием отвечает на «а что там?» до нажатия. */
.vv-os-acts { display: flex; gap: 8px; margin-top: 14px; }
.vv-os-act { flex: 1 1 0; min-height: 56px; padding: 10px 12px;
  border-radius: var(--r-md); text-align: left; cursor: pointer;
  background: var(--dv2-surface, #FBF7EF);
  border: 1px solid var(--dv2-border, #E7DFCE); }
.vv-os-act b { display: block; font-size: 13.5px; font-weight: 700;
  color: var(--dv2-text, #23302A); line-height: 1.25; }
.vv-os-act span { display: block; margin-top: 3px; font-size: 11.5px;
  color: var(--dv2-muted, #7C877D); line-height: 1.3; }
.vv-os-act:active { background: var(--dv2-surface-2, #F2EDE3); }


/* Перенос позиции в другой приём (VVELL-464, 30.08.2026).
   Призрак — копия строки под пальцем. Оригинал остаётся на месте
   полупрозрачным: человек должен видеть, откуда взял, чтобы вернуть. */
.vv-drag-ghost { position: fixed; z-index: 400; pointer-events: none;
  opacity: .95; transform: rotate(-1.5deg) scale(1.02);
  border-radius: var(--r-md); padding: 8px 10px;
  background: var(--dv2-surface, #FBF7EF);
  box-shadow: 0 12px 28px rgba(0,0,0,.22); }
#screen-cart .vv-meal-item.vv-drag-src { opacity: .35; }

/* Куда упадёт. Подсветка на блоке приёма, а не на строке: цель — приём. */
#screen-cart .vv-meal-block.is-drop { outline: 2px dashed var(--dv2-green, #2E7D32);
  outline-offset: -3px; border-radius: var(--r-md);
  background: var(--dv2-green-tint, #EAF4EC); }

/* ⚠ ПОКА ТАЩИМ, СТРАНИЦУ ДВИГАЕМ МЫ, А НЕ ПАЛЕЦ.
   `overflow: hidden` здесь стоял и был ошибкой: он запрещает прокрутку и
   НАМ ТОЖЕ, а до дальнего приёма иначе не дотянуться — на телефоне видно два
   блока из пяти. Палец прокручивать не должен (иначе список едет вместо
   переноса), поэтому остаётся только `touch-action`. */
body.vv-drag-lock { touch-action: none; }


/* ═══════════════════════════════════════════════════════════
   РАЗГОВОР ПРО КОРЗИНУ — ЖИВЁТ В ОБЩЕМ ЧАТЕ (VVELL-724, 07.09.2026)
   ═══════════════════════════════════════════════════════════
   Стили плавающей кнопки «Сказать словами» (vv-wish-fab*), подложки и
   листа (vv-wish-back, vv-wish-sheet, vv-wish-head, vv-wish-x)
   удалены вместе с панелью: разговор идёт репликами общего чата.
   ⚠ ОСТАВЛЕНЫ И ПЕРЕЕХАЛИ В ЧАТ: vv-wish-undo («Вернуть как было»),
   vv-wish-chips / vv-wish-chip (подсказки), vv-wish-rules*
   (постоянные правила) и vv-wish-var* (другие варианты). */

/* «Вернуть как было» под ответом про корзину — теперь в ленте чата. */
.vv-wish-undo { display: block; margin-top: 7px; padding: 0; border: 0;
  background: none; cursor: pointer; font: 600 13px/1 inherit;
  color: var(--vv-green-dark, #2E7D32); text-decoration: underline; }

.vv-wish-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.vv-wish-chip { min-height: 36px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .14); background: transparent; cursor: pointer;
  font-size: 13px; color: var(--ink, #1D2A21); }

.vv-wish-rules:empty { display: none; }
.vv-wish-rules { margin-top: 18px; }
.vv-wish-rules-ttl { font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; opacity: .6; margin-bottom: 8px; }
.vv-wish-rule { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.vv-wish-rule-t { font-size: 14px; }
.vv-wish-cnt { margin-left: 8px; font-size: 12px; opacity: .55; }
.vv-wish-rule-x { width: 36px; height: 36px; flex: 0 0 36px; border: 0;
  border-radius: 50%; background: rgba(0, 0, 0, .06); cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink, #1D2A21); }

/* Предложение в ответе чата: «Поставить: вегетарианский» / «Включить набор «Кето»» (VVELL-1179, VVELL-1180) — две кнопки
   в ряд, на узком экране переносятся; готовый вид кнопок — `.vv-ai-btn` чата. */
.vv-wish-offer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vv-wish-offer .vv-ai-btn { min-height: 40px; padding: 9px 16px; font-size: 14px; cursor: pointer; border: 0; }
.vv-wish-offer .vv-ai-btn[disabled] { opacity: .6; cursor: default; }

/* Позиция, которая лежит в корзине по постоянному правилу человека. */
#screen-cart .vv-meal-item.by-rule { position: relative; }
#screen-cart .vv-rule-mark { display: inline-flex; align-items: center;
  margin-left: 6px; font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; color: var(--vv-green-dark, #2E7D32);
  background: var(--dv2-green-tint, #EAF4EC); }


/* ═══ ВАРИАНТЫ НА ВЫБОР В ДИАЛОГЕ КОРЗИНЫ (31.08.2026, VVELL-505) ═══
   Владелец: «попросил кефир — дал 5 вариантов». Лежат прямо под ответом,
   прокручиваются вбок: вертикальный список из семи строк съел бы окно
   диалога целиком и спрятал поле ввода. */
.vv-wish-vars { margin-top: 10px; }
.vv-wish-vars-t {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3, #8E8A82); margin-bottom: 6px;
}
.vv-wish-vars-row {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.vv-wish-vars-row::-webkit-scrollbar { display: none; }
.vv-wish-var {
  flex: 0 0 auto; max-width: 190px; display: flex; align-items: center;
  gap: 6px; padding: 8px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line, #E3DFD6); background: var(--surface, #FFFDF9);
  color: var(--ink, #23201C); font: inherit; font-size: 13px; line-height: 1.25;
  cursor: pointer; text-align: left;
}
.vv-wish-var:hover { border-color: var(--green-line, rgba(31,122,66,.34)); }
.vv-wish-var:active { transform: scale(.98); }
.vv-wish-var-n {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vv-wish-var-p { color: var(--ink-3, #8E8A82); white-space: nowrap; }
.vv-wish-var-g {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; background: #8E8A82;
}
.vv-wish-var-g.g-A { background: #2F9E5E; }
.vv-wish-var-g.g-B { background: #6BAE4A; }
.vv-wish-var-g.g-C { background: #D9A441; }
.vv-wish-var-g.g-D { background: #DE774B; }
.vv-wish-var-g.g-E, .vv-wish-var-g.g-F { background: #C9503F; }

/* ═══ СТРОКА ТОВАРА В КОРЗИНЕ — ВАРИАНТ А (05.09.2026, решение владельца) ═══
   Под названием одна строка роли («Белок к обеду · 200 г») и чипы без текста
   («Белок», «Беру», «по вашему правилу», «остаток со дня 1»). Всё «почему» —
   в листе «О товаре». Владелец: «очень много информации под товарами, ужасно
   для юзер стори и дизайна — подумай, куда спрятать». */
#screen-cart .vv-meal-role, .vv-meal-role {
  font-size: 11.5px; line-height: 1.3; color: var(--dv2-muted, #756C5D);
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.vv-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px;
  color: var(--dv2-text-2, #3F3B33); background: var(--dv2-bg-2, #F1EEE6);
  border: 1px solid transparent; max-width: 100%; }
.vv-chip svg { width: 10px; height: 10px; flex: 0 0 auto; }
.vv-chip-goal { color: var(--dv2-green-dark, #159145); background: var(--dv2-green-tint, #E7F7E9); }
.vv-chip-mine { color: var(--dv2-green-dark, #159145); background: transparent;
  border-color: var(--dv2-green-dark, #159145); }
.vv-chip-rule { color: var(--dv2-green-dark, #159145); background: var(--dv2-green-tint, #E7F7E9); }
.vv-chip-carry { color: var(--dv2-muted, #756C5D); }
#screen-cart .vv-meal-name .vv-rule-mark { display: none; }

/* ── VVELL-327: строка не разъезжается по высоте ──────────────────────────
   Владелец 18.08.2026: «блоки у всех разные». Замер в браузере (390 px,
   корзина Игоря, 34 строки, 05.09.2026): ВЫСОТА строк как раз одинаковая —
   198…199 px, её задаёт столбик из четырёх кнопок справа. Разъезжалось
   СОДЕРЖИМОЕ: `.vv-meal-body` стоял `align-self: center`, и у строки с
   однострочным названием весь текст опускался на 30 px ниже, чем у соседней
   с двухстрочным (верх названия 29 / 38 / 41 / 48 / 51 / 59 px от верха
   строки). Фото при этом висело на 67 px, кнопки начинались с 10 px — три
   колонки строки стартовали в трёх разных местах.
   Лечим ВЫРАВНИВАНИЕМ, а не новой разметкой (вариант А, журнал №254, не
   тронут): содержимое от верха; название резервирует ДВЕ строки (обрезка
   `-webkit-line-clamp: 2` уже стоит выше и остаётся); строка роли — одну;
   подпись количества уходит своей строкой (разбор ниже). После этого верх
   названия, счётчик, цена и чипы стоят у всех строк на одной высоте.
   ⚠ Столбик кнопок в ДВЕ КОЛОНКИ не сворачиваем, хотя это укоротило бы
   строку со 199 до ~150: замер показал, что текстовая колонка при этом
   падает со 184 до ~134 px — ровно та теснота, из-за которой 28.08 кнопки
   и поставили столбиком (разбор в premium.css у `.vv-meal-actions`).
   ⚠ `min-height` у названия — в пикселях, а не в `em`: у `.vv-meal-name`
   стоит `display: -webkit-box`, и высота коробки считается по строкам
   (13 px × 1.3 × 2 = 33.8).
   ⚠ ЛОВУШКА: `align-items` у самой строки трогать бесполезно — выше в этом же
   файле стоит `#screen-cart .vv-meal-item { align-items: center !important }`
   (правило дизайна v2, строка ~1274), и обычное правило ниже по файлу его не
   перебивает. Поэтому равнение задаётся `align-self` У КАЖДОГО ребёнка: фото,
   тело, столбик действий (последний — в premium.css, он грузится позже).
   Первая попытка была именно через `align-items` и молча не сработала: текст
   встал по верху (у него своё `align-self`), а фото осталось висеть на 67 px. */
/* Одинаковая минимальная высота строки — НАМЕРЕННО, а не по случаю. Сегодня
   высоту всё равно задаёт столбик значков (замок + три кнопки по 44 = ~178 px
   с полями), но стоит убрать оттуда хоть один значок — например замок, его
   владелец просил перерисовать отдельно (VVELL-529) — и строки без чипов
   стали бы ниже строк с чипами. 166 = полный скелет текста (название 34 +
   роль 16 + счётчик с подписью 47 + цена 20 + чипы 29) плюс поля 20. */
#screen-cart .vv-meal-item { min-height: 166px; }
#screen-cart .vv-meal-img { align-self: flex-start; }
#screen-cart .vv-meal-body { align-self: flex-start; }
/* Две строки названия: 13 px × 1.3 × 2 = 33.8 (размер и интерлиньяж названия
   тоже приезжают с `!important` из блока ~1292 этого файла). */
#screen-cart .vv-meal-name { min-height: 34px; }
#screen-cart .vv-meal-role { min-height: 15px; }
/* Подпись количества («упак 250 г · ~2 порц.», «240 г») — ВСЕГДА своей строкой
   под кнопками «−/+». Разрешение 28.08 переносить её (VVELL-481) оставляло
   строку в двух видах: у длинной подписи она переносилась, у короткой стояла
   рядом — и цена под ней вставала на 20 px выше или ниже, чем у соседей.
   Сравнил три способа замером и глазами (05.09.2026, корзина Игоря, 34 строки):
     подпись как есть            — разброс цены 20 px, счётчик 24 или 44 px;
     резерв места счётчику 42 px — разброс 2 px, но в 23 строках из 34 между
                                   счётчиком и ценой зияла дыра ~18 px;
     подпись своей строкой       — разброс 0, счётчик у всех 44 px, дыр нет.
   Взят третий. Кнопки «−/+» при этом не переносятся — у них `flex: 0 0 auto`. */
#screen-cart .vv-qty-lab { flex: 0 0 100%; margin-left: 0; }
/* Лист «О товаре»: блок «Почему в корзине». */
.pc-why { margin: 10px 0 2px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--dv2-green-tint, #E7F7E9); }
.pc-why-t { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dv2-green-dark, #159145); margin-bottom: 4px; }
.pc-why-l { font-size: 13px; line-height: 1.45; color: var(--dv2-text, #10170F); }
.pc-why-l + .pc-why-l { margin-top: 3px; }

/* Второй вариант второго — «на выбор» (VVELL-755, 08.09.2026): зелёным, чтобы читалось как выбор, а не как ещё одно блюдо */
#screen-cart .vv-meal-role.is-alt, .vv-meal-role.is-alt { color: var(--vv-green-dark, #12694A); font-weight: 600; }