/* Гиппократ — мини-приложение. Светлая тема — светлый шалфей, тёмная — ночной зелёный, золото — только акцент.
   Заголовки — GK Serif (подмножество Lora), текст — Inter; оба под лицензией SIL OFL 1.1, см. fonts/OFL.txt. */
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-700.woff") format("woff"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "GK Serif"; src: url("fonts/gkserif-400.woff") format("woff"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "GK Serif"; src: url("fonts/gkserif-600.woff") format("woff"); font-weight: 600 700; font-display: swap; }

:root, html[data-theme="light"] {
  --fs: 1; --fs-h: 1;
  --bg: #EDF1EC; --surf: #FFFFFF; --surf2: #F4F7F3; --ink: #17241E; --mute: #66726B; --faint: #8E9A93; --line: #DCE3DC;
  --brand: #1F5A44; --brand-ink: #FFFFFF; --gold: #B98B2E; --gold-ink: #1A1407; --gold-soft: #F3E8CF; --gold-text: #7E5A12; --leaf-off: #D5DED6;
  --sleep: #6A6ED2; --water: #2F8DC0; --steps: #4F8A39; --food: #D0882C; --danger: #B3402E; --shade: rgba(20, 30, 25, .45);
  --rose: #C24F69; --rose-ink: #FFFFFF; --rose-soft: #F8E4E8; --rose-mid: #E7A2B1; --ph-f: #9CC9B6; --ph-o: #3E8E86; --ph-l: #D9CFA2; --ph-p: #E8C08A;
  --cline: #C3CDC5; --cshadow: 0 1px 2px rgba(23, 36, 30, .08); --tabmute: #5F6C65;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #13201A; --surf: #1B2C24; --surf2: #22362D; --ink: #E7EEE8; --mute: #9BAAA1; --faint: #74857B; --line: #2C4237;
  --brand: #7FC4A0; --brand-ink: #0F1E17; --gold: #D9B25C; --gold-ink: #1A1407; --gold-soft: #3A3220; --gold-text: #D9B25C; --leaf-off: #2C4237;
  --sleep: #A3A6F2; --water: #6EC1EA; --steps: #93C877; --food: #F0B45F; --danger: #F08C78; --shade: rgba(0, 0, 0, .55);
  --rose: #EE8FA4; --rose-ink: #2A1218; --rose-soft: #3B2329; --rose-mid: #9E5466; --ph-f: #3F7A66; --ph-o: #66BDB3; --ph-l: #6E6A4B; --ph-p: #8D6B3D;
  --cline: #3A5347; --cshadow: none; --tabmute: var(--mute);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #13201A; --surf: #1B2C24; --surf2: #22362D; --ink: #E7EEE8; --mute: #9BAAA1; --faint: #74857B; --line: #2C4237;
    --brand: #7FC4A0; --brand-ink: #0F1E17; --gold: #D9B25C; --gold-ink: #1A1407; --gold-soft: #3A3220; --gold-text: #D9B25C; --leaf-off: #2C4237;
    --sleep: #A3A6F2; --water: #6EC1EA; --steps: #93C877; --food: #F0B45F; --danger: #F08C78; --shade: rgba(0, 0, 0, .55);
  --rose: #EE8FA4; --rose-ink: #2A1218; --rose-soft: #3B2329; --rose-mid: #9E5466; --ph-f: #3F7A66; --ph-o: #66BDB3; --ph-l: #6E6A4B; --ph-p: #8D6B3D;
    --cline: #3A5347; --cshadow: none; --tabmute: var(--mute);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--ink); }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: calc(15px * var(--fs, 1)); line-height: 1.4;
  -webkit-font-smoothing: antialiased; min-height: 100vh; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hidden { display: none !important; }

#app { max-width: 520px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
body { overflow-x: hidden; }   /* сдвиг при переходе между экранами не должен расширять страницу */
.top { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; position: sticky; top: 0; z-index: 5;
  background: var(--bg); }
.top b { flex: 1; text-align: center; font-size: calc(16px * var(--fs, 1)); font-weight: 600; }
.ib { width: 38px; height: 38px; border-radius: 19px; background: var(--surf); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink); flex: none; }
.ib.ghost { visibility: hidden; }
.main { flex: 1; padding: 2px 18px calc(66px + env(safe-area-inset-bottom) + 32px); display: flex; flex-direction: column; gap: 14px; }
.date { font-size: calc(13.5px * var(--fs, 1)); color: var(--mute); }
.h1 { font-family: "GK Serif", Georgia, serif; font-weight: 600; font-size: calc(28px * var(--fs-h, 1)); line-height: 1.12; letter-spacing: -.01em; }
.h2 { font-family: "GK Serif", Georgia, serif; font-weight: 600; font-size: calc(20px * var(--fs-h, 1)); line-height: 1.2; }
.p { font-size: calc(14.5px * var(--fs, 1)); line-height: 1.45; color: var(--mute); }
.s { font-size: calc(13px * var(--fs, 1)); color: var(--mute); line-height: 1.35; }
.c { text-align: center; }
.panel { background: var(--surf); border-radius: 22px; padding: 6px 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.btn { min-height: 52px; border-radius: 16px; background: var(--brand); color: var(--brand-ink); font-size: calc(16px * var(--fs, 1)); font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex: none; padding: 0 18px; width: 100%; }
.btn:disabled { opacity: .45; }
.btn .lk { width: 22px; height: 22px; border-radius: 11px; background: var(--gold-soft); display: flex; align-items: center;
  justify-content: center; font-style: normal; margin-left: -2px; }
.btn.line { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.gold { background: var(--gold); color: var(--gold-ink); }
.btn.sm { min-height: 42px; font-size: calc(14.5px * var(--fs, 1)); border-radius: 13px; }
.btn.danger { background: transparent; color: var(--danger); border: 1.5px solid var(--line); }
.duo { display: flex; gap: 8px; }
.duo .btn { flex: 1; width: auto; min-width: 0; }
.row > .inp { min-width: 0; }
.link { color: var(--brand); font-weight: 600; font-size: calc(14px * var(--fs, 1)); padding: 8px 0; }
.chip { flex: none; min-height: 36px; padding: 0 13px; border-radius: 18px; border: 1px solid var(--line); background: var(--surf2);
  font-size: calc(13.5px * var(--fs, 1)); font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prem { flex: none; font-size: calc(12px * var(--fs, 1)); font-weight: 700; color: var(--gold-text); background: var(--gold-soft); padding: 4px 9px; border-radius: 10px; }
span.done { flex: none; width: 32px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.track { height: 5px; border-radius: 3px; background: var(--leaf-off); margin-top: 7px; overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 3px; transition: width .35s ease; }

/* нижние вкладки */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; height: calc(66px + env(safe-area-inset-bottom)); display: flex;
  justify-content: center; background: var(--surf); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 24px rgba(20, 35, 28, .07); }
/* контент мягко уходит под меню, а не обрезается линией */
.tabs::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg)); }
html[data-theme="dark"] .tabs { box-shadow: 0 -10px 28px rgba(0, 0, 0, .28); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .tabs { box-shadow: 0 -10px 28px rgba(0, 0, 0, .28); } }
.tabs .in { display: flex; justify-content: space-around; align-items: flex-start; width: 100%; max-width: 520px; padding-top: 8px; }
.tabs button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); font-weight: 500;
  width: 64px; }
.tabs button.on { color: var(--brand); font-weight: 700; }

/* венок дня */
.wreath { display: flex; align-items: center; gap: 14px; }
.wreath svg { flex: none; }
.legend { display: flex; flex-direction: column; gap: 9px; font-size: calc(13.5px * var(--fs, 1)); }
.legend div { display: flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 5px; flex: none; }
.week { display: flex; justify-content: space-between; padding: 6px 0 10px; }
.week div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: calc(12px * var(--fs, 1)); color: var(--mute); }
.week div.now { color: var(--ink); font-weight: 700; }
.leaf { transition: fill .4s ease; }

.hrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; width: 100%; text-align: left; }
.hrow + .hrow { border-top: 1px solid var(--line); }
.hrow .t { flex: 1; min-width: 0; }
.hrow .t b { display: block; font-size: calc(15.5px * var(--fs, 1)); font-weight: 600; }
.hrow .t span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
.tip { background: var(--gold-soft); border-radius: 18px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start;
  font-size: calc(14px * var(--fs, 1)); line-height: 1.4; }

/* питание */
.kcal { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kcal b { font-family: "GK Serif", Georgia, serif; font-size: calc(40px * var(--fs-h, 1)); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.mac { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 4px 0 14px; }
.mac div { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.mac div b { display: block; color: var(--ink); font-size: calc(14px * var(--fs, 1)); font-weight: 600; margin-bottom: 1px; }
.adds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adds button { height: 66px; border-radius: 16px; background: var(--surf); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; position: relative; }
.adds button em { position: absolute; top: 7px; right: 7px; font-style: normal; width: 18px; height: 18px; border-radius: 9px;
  background: var(--gold-soft); display: flex; align-items: center; justify-content: center; }
.meal { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; width: 100%; text-align: left; }
.meal + .meal { border-top: 1px solid var(--line); }
.meal .tm { width: 42px; flex: none; font-size: calc(13px * var(--fs, 1)); color: var(--mute); padding-top: 2px; font-variant-numeric: tabular-nums; }
.meal .t { flex: 1; min-width: 0; }
.meal .t b { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.meal .t span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.meal .k { font-weight: 700; font-size: calc(15px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.empty { padding: 18px 4px; text-align: center; color: var(--mute); font-size: calc(14px * var(--fs, 1)); }

/* шаги */
.big { font-family: "GK Serif", Georgia, serif; font-size: calc(44px * var(--fs-h, 1)); font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 78px; padding-top: 8px; }
.bars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: calc(11.5px * var(--fs, 1)); color: var(--mute); height: 100%;
  justify-content: flex-end; }
.bars div.now { color: var(--ink); font-weight: 700; }
.bars i { width: 100%; border-radius: 6px 6px 3px 3px; display: block; min-height: 4px; }
.way { display: flex; gap: 12px; padding: 13px 0; align-items: flex-start; }
.way + .way { border-top: 1px solid var(--line); }
.way .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--surf2); display: flex; align-items: center; justify-content: center;
  flex: none; color: var(--brand); }
.way .t { flex: 1; min-width: 0; }
.way .t b { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; margin-bottom: 3px; }
.ok { display: inline-flex; align-items: center; gap: 5px; font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; color: var(--steps); margin-top: 6px; }
.howto { counter-reset: n; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.howto div { display: flex; gap: 10px; font-size: calc(13.5px * var(--fs, 1)); line-height: 1.4; align-items: flex-start; }
.howto div::before { counter-increment: n; content: counter(n); width: 24px; height: 24px; border-radius: 12px; background: var(--gold-soft);
  color: var(--gold-text); font-weight: 800; font-size: calc(12px * var(--fs, 1)); display: flex; align-items: center; justify-content: center; flex: none; }
.copy { display: flex; gap: 8px; align-items: center; background: var(--surf2); border-radius: 12px; padding: 8px 10px; margin-top: 10px; }
.copy code { flex: 1; min-width: 0; font-size: calc(12px * var(--fs, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); }

/* образ */
.face { width: 104px; height: 128px; border-radius: 20px; background: var(--surf2); flex: none; overflow: hidden; }
.lock { display: flex; align-items: center; gap: 12px; padding: 12px 0; width: 100%; text-align: left; }
.lock + .lock { border-top: 1px solid var(--line); }
.lock .t { flex: 1; min-width: 0; }
.lock .t b { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.lock .t span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.icn { width: 38px; height: 38px; border-radius: 12px; background: var(--surf2); display: flex; align-items: center; justify-content: center;
  flex: none; color: var(--brand); }
.card { background: var(--surf); border-radius: 18px; padding: 12px 14px; }
.card b { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; margin-bottom: 3px; }
.ul { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.ul div { display: flex; gap: 8px; font-size: calc(14px * var(--fs, 1)); line-height: 1.4; }
.ul div::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--gold); margin-top: 8px; flex: none; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photos div { aspect-ratio: 3 / 4; border-radius: 14px; background: var(--surf2) center / cover no-repeat; position: relative; overflow: hidden; }
.photos span { position: absolute; left: 8px; bottom: 6px; font-size: calc(12px * var(--fs, 1)); font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* отчёт */
.mrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.mrow + .mrow { border-top: 1px solid var(--line); }
.mrow .t { width: 128px; flex: none; }
.mrow .t span { display: block; font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.mrow .t b { font-size: calc(16.5px * var(--fs, 1)); font-weight: 700; }
.spark { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.spark i { flex: 1; border-radius: 2px; min-height: 1px; }
.delta { width: 70px; text-align: right; font-size: calc(12.5px * var(--fs, 1)); font-weight: 700; flex: none; color: var(--mute); }
.blur { filter: blur(5px); pointer-events: none; user-select: none; }

/* премиум */
.feat { display: flex; gap: 10px; padding: 9px 0; font-size: calc(14.5px * var(--fs, 1)); align-items: flex-start; line-height: 1.35; }
.plan { border-radius: 18px; background: var(--surf); border: 2px solid transparent; padding: 14px 16px; display: flex; align-items: center;
  gap: 12px; position: relative; width: 100%; text-align: left; }
.plan.on { border-color: var(--gold); }
.plan .t { flex: 1; }
.plan .t b { display: block; font-size: calc(16px * var(--fs, 1)); font-weight: 600; }
.plan .t span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
.plan .pr { font-family: "GK Serif", Georgia, serif; font-size: calc(22px * var(--fs-h, 1)); font-weight: 600; }
.radio { width: 22px; height: 22px; border-radius: 11px; border: 2px solid var(--line); flex: none; }
.plan.on .radio { border: 7px solid var(--gold); }
.save { position: absolute; top: -10px; right: 14px; background: var(--gold); color: var(--gold-ink); font-size: calc(11.5px * var(--fs, 1)); font-weight: 800;
  padding: 3px 9px; border-radius: 9px; }

/* ещё */
.mrow2 { display: flex; align-items: center; gap: 12px; padding: 13px 0; width: 100%; text-align: left; font-size: calc(15px * var(--fs, 1)); }
.mrow2 + .mrow2 { border-top: 1px solid var(--line); }
.mrow2 .t { flex: 1; } .mrow2 .t span { display: block; font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.sw { width: 46px; height: 28px; border-radius: 14px; background: var(--brand); position: relative; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border-radius: 11px; background: #fff;
  transition: right .2s, left .2s; }
.sw.off { background: var(--leaf-off); }
.sw.off::after { right: 25px; }

/* первый вход */
.onb { flex: 1; display: flex; flex-direction: column; padding: 8px 22px 26px; gap: 16px; min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); }   /* v43: ровно по экрану — без «дёрганья» */
.dots { display: flex; gap: 6px; justify-content: center; padding-top: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--leaf-off); transition: width .3s; }
.dots i.on { width: 22px; background: var(--brand); }
.feat2 { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; }
.feat2 + .feat2 { border-top: 1px solid var(--line); }
.feat2 .ic { width: 40px; height: 40px; border-radius: 13px; background: var(--surf2); display: flex; align-items: center; justify-content: center;
  flex: none; color: var(--brand); }
.feat2 b { display: block; font-size: calc(15.5px * var(--fs, 1)); font-weight: 600; margin-bottom: 2px; }
.agree { display: flex; gap: 12px; align-items: flex-start; font-size: calc(13.5px * var(--fs, 1)); line-height: 1.4; color: var(--mute); text-align: left; }
.agree .box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); flex: none; display: flex; align-items: center;
  justify-content: center; }
.agree.on .box { background: var(--brand); border-color: var(--brand); }
.agree u { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.seg { display: flex; background: var(--surf); border-radius: 16px; padding: 4px; gap: 4px; }
.seg button { flex: 1; height: 48px; border-radius: 12px; font-weight: 600; font-size: calc(15.5px * var(--fs, 1)); color: var(--mute); }
.seg button.on { background: var(--brand); color: var(--brand-ink); }
.field { background: var(--surf); border-radius: 16px; min-height: 58px; display: flex; align-items: center; padding: 0 18px; gap: 10px;
  border: 2px solid var(--line); }
.field:focus-within { border-color: var(--brand); }
.field input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: "GK Serif", Georgia, serif;
  font-size: calc(26px * var(--fs-h, 1)); font-weight: 600; height: 54px; }
.field span { color: var(--mute); font-size: calc(15px * var(--fs, 1)); }
.lbl2 { font-size: calc(14px * var(--fs, 1)); font-weight: 600; margin-bottom: -6px; }
.goal { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.goal + .goal { border-top: 1px solid var(--line); }
.goal .dot { width: 12px; height: 12px; border-radius: 6px; flex: none; }
.goal .t { flex: 1; min-width: 0; }
.goal .t b { display: block; font-size: calc(15.5px * var(--fs, 1)); font-weight: 600; }
.goal .t span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.mini { display: flex; align-items: center; gap: 6px; }
.mini button { width: 36px; height: 36px; border-radius: 11px; background: var(--surf2); display: flex; align-items: center; justify-content: center; }
.mini b { min-width: 76px; text-align: center; font-size: calc(15.5px * var(--fs, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.steps3 { display: flex; flex-direction: column; gap: 10px; }
.steps3 div { display: flex; gap: 12px; align-items: flex-start; font-size: calc(14.5px * var(--fs, 1)); line-height: 1.4; }
.steps3 i { width: 26px; height: 26px; border-radius: 13px; background: var(--gold-soft); color: var(--gold-text); font-style: normal; font-weight: 800;
  font-size: calc(13px * var(--fs, 1)); display: flex; align-items: center; justify-content: center; flex: none; }
.spacer { flex: 1; }

/* нижний лист */
.shade { position: fixed; inset: 0; background: var(--shade); z-index: 20; opacity: 0; transition: opacity .2s; }
.shade.in { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; background: var(--bg); border-radius: 26px 26px 0 0;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; max-height: 92vh;
  overflow-y: auto; transform: translateY(100%); transition: transform .25s ease; max-width: 520px; margin: 0 auto; }
.sheet.in { transform: none; }
.sheet .sx { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 17px; background: var(--surf);
  display: flex; align-items: center; justify-content: center; color: var(--mute); }
.sheet > .h2:first-of-type { padding-right: 40px; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 2px; flex: none; }
.inp { width: 100%; min-height: 50px; border-radius: 14px; border: 2px solid var(--line); background: var(--surf); padding: 0 14px;
  font-size: calc(16px * var(--fs, 1)); outline: none; }
.inp:focus { border-color: var(--brand); }
textarea.inp { padding: 12px 14px; min-height: 90px; resize: none; line-height: 1.4; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.lbl { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); margin-bottom: 4px; display: block; }
.stepper { display: flex; align-items: center; justify-content: space-between; height: 48px; border-radius: 14px; background: var(--surf);
  padding: 0 6px; }
.stepper button { width: 36px; height: 36px; border-radius: 10px; background: var(--surf2); display: flex; align-items: center; justify-content: center; }
.stepper b { font-size: calc(18px * var(--fs, 1)); font-weight: 700; }
.res { display: flex; gap: 10px; align-items: center; padding: 10px 0; }
.res + .res { border-top: 1px solid var(--line); }
.res .t { flex: 1; min-width: 0; } .res .t b { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; } .res .t span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.res input { width: 74px; min-height: 40px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surf); text-align: center;
  font-size: calc(15px * var(--fs, 1)); font-weight: 600; outline: none; }
.check { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; }
.check.on { background: var(--brand); border-color: var(--brand); }

/* камера */
.cam { position: fixed; inset: 0; z-index: 30; background: #0E1512; display: flex; flex-direction: column; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam .frame { position: absolute; left: 50%; top: 40%; width: 290px; height: 170px; transform: translate(-50%, -50%); border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .42); }
.cam .frame i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; }
.cam .bar { position: absolute; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; z-index: 2; }
.cam .bar button { width: 40px; height: 40px; border-radius: 20px; background: rgba(10, 16, 13, .55); color: #fff; display: flex;
  align-items: center; justify-content: center; }
.cam .hint { position: absolute; top: 74px; left: 0; right: 0; text-align: center; color: #fff; font-size: calc(15px * var(--fs, 1)); font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6); z-index: 2; }
.cam .foot { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom)); left: 18px; right: 18px; z-index: 2; display: flex; gap: 8px; }
.cam .foot .btn { flex: 1; width: auto; min-width: 0; background: rgba(10, 16, 13, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cam .hint { padding: 0 20px; }
.cam .scanline { position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; border-radius: 2px; background: #7FE0A8;
  box-shadow: 0 0 10px #7FE0A8; animation: gk-scan 1.6s ease-in-out infinite alternate; }
@keyframes gk-scan { from { transform: translateY(-64px); } to { transform: translateY(64px); } }
@media (prefers-reduced-motion: reduce) { .cam .scanline { animation: none; } }

.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40;
  background: var(--ink); color: var(--bg); padding: 11px 16px; border-radius: 14px; font-size: calc(14px * var(--fs, 1)); max-width: 88vw; text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .2); opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.in { opacity: 1; }
.loader { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.spin { width: 34px; height: 34px; border-radius: 17px; border: 3px solid var(--leaf-off); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 350px) {
  .main { padding-left: 14px; padding-right: 14px; }
  .h1 { font-size: calc(24px * var(--fs-h, 1)); }
  .wreath svg { width: 150px; height: 150px; }
  .mrow .t { width: 110px; }
}

/* ---------------- v3: сегодня — окно питания, план, плитки */
.fast { display: flex; align-items: center; gap: 12px; background: var(--surf); border-radius: 18px; padding: 12px 14px; text-align: left;
  border: 1.5px solid var(--line); color: var(--mute); }
.fast.eat { border-color: color-mix(in srgb, var(--steps) 45%, transparent); color: var(--steps); }
.fast .t { flex: 1; min-width: 0; }
.fast .t b { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; color: var(--ink); }
.fast .t span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.plan30 { display: flex; align-items: center; gap: 12px; background: var(--surf); border-radius: 22px; padding: 14px 16px; text-align: left; width: 100%; }
.plan30 .t { flex: 1; min-width: 0; }
.plan30 .t b { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.plan30 .t span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.plan30 > svg:last-child { transform: scaleX(-1); flex: none; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiles button { background: var(--surf); border-radius: 18px; padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 6px;
  min-width: 0; color: var(--brand); }
.tiles button b { color: var(--ink); font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.tiles button span { color: var(--mute); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.3; }

/* ---------------- питание: приёмы пищи, частое */
.h3 { font-size: calc(14px * var(--fs, 1)); font-weight: 700; color: var(--mute); margin-bottom: -6px; }
.seg.small button { height: 38px; font-size: calc(13.5px * var(--fs, 1)); }
.scroller { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 4px; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.qchip { flex: none; max-width: 170px; background: var(--surf); border-radius: 14px; padding: 9px 12px; text-align: left; border: 1px solid var(--line); }
.qchip b { display: block; font-size: calc(13.5px * var(--fs, 1)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qchip span { font-size: calc(12px * var(--fs, 1)); color: var(--mute); }
.mgroup + .mgroup { border-top: 1px solid var(--line); }
.mhead { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 2px; }
.mhead b { font-size: calc(14px * var(--fs, 1)); font-weight: 700; }
.mhead .k { font-size: calc(13px * var(--fs, 1)); color: var(--mute); font-weight: 600; }
.mgroup .meal + .meal { border-top: 1px dashed var(--line); }
.again { display: flex; align-items: center; gap: 8px; font-size: calc(13.5px * var(--fs, 1)); font-weight: 600; color: var(--brand); padding: 8px 0 12px; }
.ing { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.grid5 { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1fr 1fr; gap: 6px; }
.grid5 .inp { padding: 0 6px; min-height: 42px; font-size: calc(14px * var(--fs, 1)); text-align: center; }
.energy { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.energy button { height: 46px; border-radius: 14px; background: var(--surf2); font-weight: 700; font-size: calc(17px * var(--fs, 1)); border: 1.5px solid var(--line); }
.energy button.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* ---------------- магазин */
.pcard { position: relative; background: var(--surf); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  border: 2px solid transparent; }
.pcard.best { border-color: var(--gold); }
.pcard .row b { display: block; font-size: calc(17px * var(--fs, 1)); font-weight: 600; }
.pcard .row span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
.pcard .pr { font-family: "GK Serif", Georgia, serif; font-size: calc(24px * var(--fs-h, 1)); font-weight: 600; color: var(--ink); flex: none; }
.pcard .feats .feat { padding: 4px 0; font-size: calc(13.5px * var(--fs, 1)); }

/* ---------------- план на 30 дней */
.tagc { font-size: calc(12px * var(--fs, 1)); font-weight: 700; color: var(--gold-text); background: var(--gold-soft); padding: 3px 9px; border-radius: 9px; }
.pday .h2 { margin: 8px 0 6px; }
.pgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pgrid button { aspect-ratio: 1; border-radius: 50%; background: var(--surf); font-weight: 700; font-size: calc(14px * var(--fs, 1)); color: var(--faint);
  border: 1.5px solid var(--line); }
.pgrid button.o { color: var(--ink); }
.pgrid button.now { border: 2.5px solid var(--gold); color: var(--ink); }
.pgrid button.d { background: var(--steps); border-color: var(--steps); color: #fff; }
.pgrid button:disabled, .pgrid button.lk { opacity: .55; }

/* ---------------- напоминания */
.remrow + .remrow { border-top: 1px solid var(--line); }
.remrow .mrow2 + .times { margin-top: -4px; }
.times { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; align-items: center; }
.inp.tm { width: 112px; min-height: 42px; font-size: calc(16px * var(--fs, 1)); font-weight: 600; padding: 0 10px; }

/* ---------------- поддержка */
.faq { display: block; width: 100%; text-align: left; padding: 13px 0; }
.faq + .faq { border-top: 1px solid var(--line); }
.faq b { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.faq span { display: block; font-size: calc(14px * var(--fs, 1)); color: var(--mute); line-height: 1.45; margin-top: 6px; }

/* ---------------- образ: вопросы, зоны, стиль */
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; background: var(--surf); border-radius: 16px; padding: 14px; text-align: left; font-size: calc(15px * var(--fs, 1));
  border: 1.5px solid var(--line); }
.opt .box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; }
.opt.on { border-color: var(--brand); }
.opt.on .box { background: var(--brand); border-color: var(--brand); }
.zone .howto { margin-top: 10px; }
.scard { display: flex; gap: 12px; background: var(--surf); border-radius: 18px; padding: 10px; align-items: flex-start; }
.scard img { width: 92px; height: 104px; flex: none; border-radius: 14px; background: var(--surf2); object-fit: contain; }
.scard .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.scard .t b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.fit { align-self: flex-start; font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; padding: 3px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: .03em; }
.fit-best { background: color-mix(in srgb, var(--steps) 18%, transparent); color: var(--steps); }
.fit-ok { background: color-mix(in srgb, var(--water) 16%, transparent); color: var(--water); }
.fit-avoid { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.feat svg { flex: none; margin-top: 1px; }
.scard .t .s b { color: var(--ink); }
.sw { display: inline-block; vertical-align: middle; }
.mrow2 > button.t { min-width: 0; }
.mrow2 > button:last-child:not(.t) { flex: none; display: flex; }
.pcard .row .pr { font-family: "GK Serif", Georgia, serif; font-size: calc(24px * var(--fs-h, 1)); font-weight: 600; color: var(--ink); }
.inp.tm { width: 120px; }
.tip > svg { flex: none; margin-top: 1px; }
.grid5.lbls span { font-size: calc(11px * var(--fs, 1)); color: var(--mute); text-align: center; }

/* экраны «Анализирую фото» и «Собираю ваш разбор» */
.an { gap: 16px; padding-top: 4px; }
.an-pic { position: relative; width: 232px; height: 232px; margin: 4px auto 2px; flex: none; }
.an-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.an-ring circle { fill: none; stroke-width: 3; }
.an-ring .tr { stroke: var(--leaf-off); }
.an-ring .fg { stroke: var(--gold); stroke-linecap: round; }
.an-face { position: absolute; inset: 16px; border-radius: 50%; overflow: hidden; background: #1D2B24; }
.an-face.pl { background: var(--surf); display: flex; align-items: center; justify-content: center; }
.an-big { font-family: "GK Serif", Georgia, serif; font-weight: 600; font-size: calc(48px * var(--fs-h, 1)); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.an-face canvas { width: 100%; height: 100%; display: block; }
.an-scan { position: absolute; left: 0; right: 0; top: 6%; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 14px var(--gold); animation: an-scan 1.5s ease-in-out infinite alternate; transition: opacity .4s; }
.an-scan.off { opacity: 0; }
@keyframes an-scan { from { top: 6%; } to { top: 92%; } }
.an-pct { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: var(--surf); border: 1px solid var(--line);
  border-radius: 12px; padding: 2px 10px; min-width: 54px; text-align: center; font-weight: 600; font-size: calc(13.5px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.an-list { padding: 2px 16px; }
.an-st { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); opacity: .45; transition: opacity .3s; }
.an-st:last-child { border-bottom: none; }
.an-st .mk { width: 24px; height: 24px; border-radius: 12px; border: 2px solid var(--leaf-off); flex: none; display: flex; align-items: center; justify-content: center; }
.an-st .mk svg { flex: none; }
.an-st .t { display: flex; flex-direction: column; min-width: 0; }
.an-st .t b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.an-st .t span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
.an-st.is-run, .an-st.is-done, .an-st.is-fail { opacity: 1; }
.an-st.is-run .mk { border-color: var(--gold); border-top-color: transparent; animation: spin .9s linear infinite; }
.an-st.is-done .mk { background: var(--brand); border-color: var(--brand); }
.an-st.is-done .t span { color: var(--brand); }
.an-st.is-fail .mk { background: var(--danger); border-color: var(--danger); }
.an-st.is-fail .t span { color: var(--danger); }
.an-end { display: flex; flex-direction: column; gap: 10px; }
.an-end:empty { display: none; }
.an .s.c svg { vertical-align: -2px; }
@media (prefers-reduced-motion: reduce) { .an-scan { top: 50%; } }

/* v5: «Образ» — фото человека, сильные стороны, замеры по фото, уход */
.face.pic { background: #1D2B24; }
.face.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat .ft { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; line-height: 1.3; }
.feat .tipline { color: var(--ink); margin-top: 4px; }
.seg .cnt { display: inline-flex; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--gold-soft);
  color: var(--gold-ink); font-size: calc(11px * var(--fs, 1)); font-weight: 700; align-items: center; justify-content: center; margin-left: 4px; }
html[data-theme="dark"] .seg .cnt { color: var(--gold); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .seg .cnt { color: var(--gold); } }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ms-cell { background: var(--surf); border-radius: 16px; padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ms-cell.wide { grid-column: 1 / -1; }
.ms-cell .l { font-size: calc(12px * var(--fs, 1)); color: var(--mute); line-height: 1.25; }
.ms-cell .v { font-family: "GK Serif", Georgia, serif; font-weight: 600; font-size: calc(21px * var(--fs-h, 1)); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ms-cell .r { font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); }
.ms-cell .n { font-size: calc(12.5px * var(--fs, 1)); line-height: 1.3; color: var(--ink); margin-top: 2px; }
.ms-cell.odd .n { color: var(--gold-text); }
.ms-bar { position: relative; height: 6px; border-radius: 3px; background: var(--leaf-off); margin: 6px 0 3px; }
.ms-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in srgb, var(--brand) 45%, transparent); }
.ms-bar b { position: absolute; top: -3px; width: 4px; height: 12px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); }
.ms-cell.odd .ms-bar b { background: var(--gold); }
.zc { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surf2); }
.zc div { display: flex; align-items: baseline; gap: 8px; font-size: calc(13px * var(--fs, 1)); }
.zc span { flex: 1; color: var(--mute); min-width: 0; }
.zc b { font-variant-numeric: tabular-nums; }
.zc em { font-style: normal; font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); white-space: nowrap; }
.zc .odd b { color: var(--gold-text); }
.cs { margin-top: 12px; }
.cs .ct { font-size: calc(12px * var(--fs, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 4px; }
.kv { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.kv b { font-size: calc(13.5px * var(--fs, 1)); }
.kv span { font-size: calc(13.5px * var(--fs, 1)); color: var(--mute); line-height: 1.4; }
.seg.g2 { display: grid; grid-template-columns: 1fr 1fr; }
.seg.g2 button { white-space: nowrap; }

/* v6: подписка — согласие и оплаты */
.consent { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--surf2);
  font-size: calc(11.5px * var(--fs, 1)); line-height: 1.35; color: var(--mute); cursor: pointer; }
.consent input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.consent b { display: block; color: var(--ink); font-size: calc(12.5px * var(--fs, 1)); margin-bottom: 1px; }
.consent .link { font-size: calc(11.5px * var(--fs, 1)); padding: 0; display: inline; font-weight: 600; }
.payrow { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.payrow:last-child { border-bottom: none; }
.payrow .t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.payrow .t b { font-size: calc(14.5px * var(--fs, 1)); font-weight: 600; }
.payrow .t span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.payrow > span { font-weight: 600; font-variant-numeric: tabular-nums; }
.payrow > span.bad { color: var(--danger); font-weight: 500; font-size: calc(13px * var(--fs, 1)); }
.consent.need { box-shadow: inset 0 0 0 1.5px var(--danger); animation: gk-nudge .4s ease; }
.consent.need input { outline: 2px solid var(--danger); outline-offset: 1px; }
.need-hint { font-size: calc(12px * var(--fs, 1)); line-height: 1.35; color: var(--danger); margin-top: -4px; padding: 0 2px; }
@keyframes gk-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
/* узкие экраны (Android 360 px): кнопки в два ряда — без переноса текста */
.duo .btn { white-space: nowrap; }
@media (max-width: 380px) {
  .duo .btn.sm { font-size: calc(14px * var(--fs, 1)); gap: 6px; padding: 0 10px; }
  .duo .btn.sm svg { width: 16px; height: 16px; }
}

/* ---------- v9: клетчатка, «Что съесть?», рецепт, прогноз, «Что вы получите» ---------- */
.col { display: flex; flex-direction: column; gap: 12px; }
.mac.m4 { grid-template-columns: 1fr 1fr; gap: 12px 18px; padding: 2px 0 14px; }
.mac.m4 .track { height: 4px; margin: 5px 0 4px; }
.leftbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surf); border-radius: 16px;
  padding: 12px 14px; flex-wrap: wrap; }
.leftbar span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
.leftbar b { font-size: calc(15px * var(--fs, 1)); font-weight: 700; }
.dish { display: flex; gap: 12px; align-items: stretch; background: var(--surf); border-radius: 20px; padding: 10px; text-align: left; width: 100%; }
.dish img { width: 104px; height: 88px; flex: none; border-radius: 14px; background: var(--surf2); object-fit: cover; }
.dish .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 2px 2px 2px 0; }
.dish .t b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; line-height: 1.25; color: var(--ink); }
.dish .t > span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.tg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.tg i { font-style: normal; font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; padding: 3px 8px; border-radius: 8px; background: var(--surf2); color: var(--mute); }
.tg i.bd { background: var(--gold-soft); color: var(--gold-text); }
.tg i.fit { background: color-mix(in srgb, var(--steps) 16%, transparent); color: var(--steps); }
.lockbox { display: flex; gap: 12px; align-items: flex-start; background: var(--gold-soft); border-radius: 18px; padding: 14px; }
.lockbox svg { flex: none; margin-top: 1px; }
.lockbox b { display: block; font-size: calc(14.5px * var(--fs, 1)); line-height: 1.3; }
.lockbox span { display: block; font-size: calc(13px * var(--fs, 1)); color: var(--mute); margin-top: 4px; line-height: 1.35; }
.hero { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; background: var(--surf2); display: block; }
.ntiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ntiles div { background: var(--surf); border-radius: 14px; padding: 10px 4px; text-align: center; }
.ntiles b { display: block; font-family: "GK Serif", Georgia, serif; font-size: calc(20px * var(--fs-h, 1)); font-weight: 600; }
.ntiles span { display: block; font-size: calc(11.5px * var(--fs, 1)); color: var(--mute); margin-top: 2px; }
.ings div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: calc(14.5px * var(--fs, 1)); }
.ings div:last-child { border-bottom: 0; }
.ings b { font-weight: 600; color: var(--mute); text-align: right; flex: none; max-width: 48%; }
.fc { width: 100%; height: auto; display: block; margin-top: 10px; overflow: visible; }
.fc .base { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.fc text { font-family: inherit; }
.fc text.v { font-size: calc(12.5px * var(--fs, 1)); font-weight: 700; fill: var(--ink); }
.fc text.a { font-size: calc(11.5px * var(--fs, 1)); fill: var(--mute); }
.fc .hit rect { cursor: pointer; }
.fc .hit rect.on { fill: color-mix(in srgb, var(--food) 14%, transparent); }
.kv2 div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: calc(14px * var(--fs, 1)); }
.kv2 div:last-child { border-bottom: 0; }
.kv2 span { color: var(--mute); }
.kv2 b { font-weight: 600; text-align: right; }
.what-top { background: var(--surf); border-radius: 16px; padding: 12px 14px; }
.what-top b { display: block; font-size: calc(16px * var(--fs, 1)); font-weight: 600; }
.what-top span { display: block; font-size: calc(13px * var(--fs, 1)); color: var(--mute); margin-top: 3px; line-height: 1.35; }
.wg { background: var(--surf); border-radius: 16px; padding: 4px 14px 8px; }
.wh { display: flex; align-items: center; gap: 7px; font-size: calc(12px * var(--fs, 1)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold-text); padding: 9px 0 3px; }
.wg .feat { padding: 5px 0; font-size: calc(14px * var(--fs, 1)); }
.sheet-foot { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); z-index: 1; display: flex; flex-direction: column; gap: 10px; background: var(--bg);
  margin: 0 -18px calc(-22px - env(safe-area-inset-bottom)); padding: 10px 18px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 18px -14px rgba(0, 0, 0, .35); }
.sheet-foot .consent { margin: 0; }
.pcard .link { align-self: flex-start; padding: 2px 0; font-size: calc(13.5px * var(--fs, 1)); }
@media (max-width: 360px) {
  .dish img { width: 88px; height: 80px; }
  .ntiles b { font-size: calc(17px * var(--fs, 1)); }
}

/* ---------- v10: платное — мягким золотом (вариант B), план на 30 дней — заметнее ---------- */
.btn.pbtn { background: var(--gold-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--gold); font-weight: 600; }
.btn.pbtn > svg { stroke: var(--gold-text); }
.btn.pbtn .lk { background: var(--surf); }
.btn.pbtn-line { border-color: var(--gold); color: var(--ink); }
.btn.pbtn-line > svg { stroke: var(--gold-text); }
.chip.pchip { border-color: var(--gold); color: var(--gold-text); background: transparent; font-weight: 600; }
.plan30.hl { background: var(--surf); box-shadow: inset 0 0 0 1.5px var(--gold); }
.plan30.hl .icn { background: var(--gold-soft); }
.plan30.hl .icn svg { stroke: var(--gold-text); }
.plan30.hl > svg:last-child { stroke: var(--gold-text); }
.plan30.hl.done { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--steps) 60%, transparent); }
.plan30.hl.done .icn { background: color-mix(in srgb, var(--steps) 18%, transparent); }
.plan30.hl.done .icn svg { stroke: var(--steps); }
.tiles button.ptile { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, transparent); }
.tiles button.ptile > svg { stroke: var(--gold-text); }

/* «Крупный текст» («Ещё» → «Крупный текст»): мелкий текст +15%, заголовки +6% */
html.big { --fs: 1.15; --fs-h: 1.06; }
html.big .tabs button { font-size: 12.5px; }
/* вода стаканчиками */
.wrow { align-items: flex-start; }
.wrow .wt { display: block; text-align: left; width: 100%; }
.glasses { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 34px)); gap: 2px; margin-top: 6px; align-items: center; }
.glasses .gl { height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; }
.glasses .gl:active { background: color-mix(in srgb, var(--water) 14%, transparent); }
.wrow .glasses .gx { grid-column: 1 / -1; font-size: calc(12px * var(--fs, 1)); color: var(--water); font-weight: 600; }
.wrow .done { margin-top: 4px; }
/* верхняя полоса: «назад» | заголовок по центру | серия и тема */
.top { display: grid; grid-template-columns: 1fr auto 1fr; }
.top .side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.top .side.r { justify-content: flex-end; }
.top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slv { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.slv + .slv { border-top: 1px solid var(--line); }
.slv .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--surf2); display: flex; align-items: center; justify-content: center; flex: none; }
.slv .t { flex: 1; min-width: 0; }
.slv .t b { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.slv .t span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.slv:not(.got) .t b { color: var(--mute); }
.slv.cur .ic { box-shadow: inset 0 0 0 1.5px var(--steps); }

/* ---------- v10: меню на день, список покупок, избранное, диспансеризация, «Сейчас важно» ---------- */
.tools .tool { position: relative; flex: 1; min-width: 0; background: var(--surf); border-radius: 18px; padding: 12px 14px; text-align: left;
  display: flex; flex-direction: column; gap: 3px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, transparent); }
.tools .tool b { font-size: calc(14.5px * var(--fs, 1)); font-weight: 600; color: var(--ink); margin-top: 4px; }
.tools .tool span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.tools .tool .lk { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 11px; background: var(--gold-soft);
  display: flex; align-items: center; justify-content: center; }
.chip.fav svg { flex: none; }
.chip.fav.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.herobox { position: relative; }
.favbtn { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 23px; background: var(--surf);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
.favbtn.on { background: var(--danger); }
.dish .t b svg { vertical-align: -2px; }
.mcard { background: var(--surf); border-radius: 20px; padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.mcard .mh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 4px; }
.mcard .mh b { font-size: calc(13px * var(--fs, 1)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text); }
.mcard .mh span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
.mcard .dish { padding: 0; background: transparent; }
.mact { display: flex; gap: 8px; padding: 0 4px; align-items: center; }
.mact .ok { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13.5px * var(--fs, 1)); font-weight: 600; color: var(--steps); min-height: 36px; }
.mact .chip:last-child { margin-left: auto; }
.lgroup { background: var(--surf); border-radius: 18px; padding: 4px 14px 6px; }
.litem { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; text-align: left; border-top: 1px solid var(--line); }
.lgroup .wh + .litem { border-top: 0; }
.litem .cb { width: 24px; height: 24px; border-radius: 8px; border: 1.8px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; }
.litem.on .cb { background: var(--steps); border-color: var(--steps); }
.litem .n { flex: 1; min-width: 0; font-size: calc(15px * var(--fs, 1)); }
.litem b { font-weight: 600; font-size: calc(14px * var(--fs, 1)); color: var(--mute); flex: none; }
.litem.on .n, .litem.on b { text-decoration: line-through; color: var(--faint); }
.lrec { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.lrec + .lrec { border-top: 1px solid var(--line); }
.lrec .t { flex: 1; min-width: 0; text-align: left; font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.lrec .t span { display: block; font-size: calc(12.5px * var(--fs, 1)); font-weight: 400; color: var(--mute); }
.ib.sm { width: 32px; height: 32px; }
.dcard { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--steps) 50%, transparent); }
.mgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 4px 0 12px; }
.mgrid .chip { padding: 0 4px; min-width: 0; font-size: calc(13px * var(--fs, 1)); }
.byear { padding: 10px 0; border-top: 1px solid var(--line); gap: 8px; }
.byear b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.byear .inp { width: 78px; flex: none; text-align: center; }
.nowc { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; background: var(--surf); border-radius: 20px; padding: 12px 14px;
  box-shadow: inset 4px 0 0 var(--c); }
.nowc .ic { width: 42px; height: 42px; border-radius: 13px; flex: none; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 14%, transparent); }
.nowc .t { flex: 1 1 0; min-width: calc(100% - 56px); display: flex; flex-direction: column; gap: 1px; }   /* кнопка — строкой ниже */
.nowc .t .k { font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.nowc .t b { font-size: calc(15.5px * var(--fs, 1)); font-weight: 600; line-height: 1.3; }
.nowc .t > span:last-child { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.nowc .chip { flex: none; margin-left: 54px; border-color: var(--c); }
@media (max-width: 360px) { .mgrid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- серия дней — огонёк, как в TikTok ---------- */
.stk { height: 34px; padding: 0 10px 0 6px; border-radius: 17px; background: var(--surf); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 2px; color: var(--ink); flex: none; }
.stk b { font-size: calc(14px * var(--fs, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.stk.wait b { color: var(--mute); }
.stk.lit { border-color: color-mix(in srgb, #FF7A1A 45%, transparent); background: color-mix(in srgb, #FF8A1A 10%, var(--surf)); }
.stk.lit.lv-blue { border-color: color-mix(in srgb, #5B6CFF 45%, transparent); background: color-mix(in srgb, #5B8CFF 10%, var(--surf)); }
.stk.lit.lv-gold { border-color: var(--gold); background: var(--gold-soft); }
.stk.warn { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.stk .hg { color: var(--danger); margin-left: 2px; animation: hg 1.6s ease-in-out infinite; }
.stk.bump { animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes hg { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(180deg); } }
.flame { overflow: visible; flex: none; }
.flame.lit .fl-body { transform-origin: 24px 42px; animation: flick 1.7s ease-in-out infinite; }
.flame.lit .fl-i { transform-origin: 24px 40px; animation: flick2 1.15s ease-in-out infinite; }
@keyframes flick { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.97, 1.04) skewX(-2deg); }
  50% { transform: scale(1.02, .97) skewX(1.5deg); } 75% { transform: scale(.98, 1.03) skewX(-1deg); } }
@keyframes flick2 { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(.92, 1.08); } 70% { transform: scale(1.05, .95); } }
/* лист серии */
.sbig { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.sbig .sn { font-family: "GK Serif", Georgia, serif; font-size: calc(46px * var(--fs-h, 1)); font-weight: 600; line-height: 1; margin-top: 4px; }
.sbig .sw2 { font-size: calc(14px * var(--fs, 1)); color: var(--mute); margin-top: 4px; }
.sstat { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: calc(13.5px * var(--fs, 1));
  font-weight: 600; color: var(--mute); background: var(--surf); border-radius: 14px; padding: 10px 12px; }
.sstat.ok { color: var(--steps); }
.sstat.warn { color: var(--danger); }
.sstat .hg { flex: none; animation: hg 1.6s ease-in-out infinite; }
.sweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: var(--surf); border-radius: 16px; padding: 10px 6px 8px; }
.sweek div { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: calc(11.5px * var(--fs, 1)); color: var(--mute); }
.sweek div.td { color: var(--ink); font-weight: 700; }
.srow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.srow div { background: var(--surf); border-radius: 14px; padding: 10px 12px; text-align: center; }
.srow b { display: block; font-size: calc(20px * var(--fs, 1)); font-weight: 700; }
.srow span { font-size: calc(12px * var(--fs, 1)); color: var(--mute); }
.slv .ic { background: transparent; }
/* вспышка на весь экран */
.spop { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, #0B1410 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fadein .25s ease both; }
.spop.out { animation: fadeout .25s ease both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
.spop-in { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; text-align: center; }
.spop-fl { position: relative; width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; }
.spop-fl .flame.pop { position: relative; z-index: 2; animation: ignite 1.15s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes ignite { 0% { transform: scale(.35) translateY(30px); opacity: 0; filter: grayscale(1) brightness(.8); }
  35% { transform: scale(.82); opacity: 1; filter: grayscale(1) brightness(.9); }
  62% { transform: scale(1.22); filter: grayscale(0) brightness(1.5) saturate(1.3); }
  80% { transform: scale(.94); filter: none; } 100% { transform: scale(1); filter: none; } }
.spop-fl .glow { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 65%);
  opacity: 0; animation: glow 1.6s ease-out .62s both; }
@keyframes glow { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; transform: scale(1.15); } 100% { opacity: .35; transform: scale(1); } }
.sparks { position: absolute; left: 50%; top: 52%; width: 0; height: 0; z-index: 1; }
.sparks i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0;
  animation: spark .9s cubic-bezier(.15, .7, .3, 1) both; }
@keyframes spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.2); } }
.spop.up .sparks i { width: 10px; height: 10px; }
.odo { height: calc(64px * var(--fs-h, 1)); overflow: hidden; font-family: "GK Serif", Georgia, serif; font-weight: 600;
  font-size: calc(60px * var(--fs-h, 1)); line-height: calc(64px * var(--fs-h, 1)); font-variant-numeric: tabular-nums; }
.odo-in { display: flex; flex-direction: column; animation: odo .55s cubic-bezier(.5, -0.3, .3, 1.4) .95s both; }
@keyframes odo { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.spop-t { font-size: calc(18px * var(--fs, 1)); font-weight: 700; margin-top: -2px; animation: rise .4s ease 1.15s both; }
.spop-s { font-size: calc(14px * var(--fs, 1)); color: rgba(255, 255, 255, .78); animation: rise .4s ease 1.25s both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.spop .sweek { width: 100%; background: rgba(255, 255, 255, .08); margin-top: 6px; animation: rise .4s ease 1.35s both; }
.spop .sweek div { color: rgba(255, 255, 255, .65); }
.spop .sweek div.td { color: #fff; }
.spop .sweek .flame.off .fl-o { fill: rgba(255, 255, 255, .18); }
.spop .sweek .flame.off .fl-i { fill: rgba(255, 255, 255, .06); }
.spop .sweek .ign { display: inline-flex; animation: ign2 .6s cubic-bezier(.3, 1.6, .5, 1) 1.75s both; }
@keyframes ign2 { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.spop .btn { margin-top: 10px; background: #fff; color: #17241E; animation: rise .4s ease 1.5s both; }
.spop.up .spop-s { color: #FFD36B; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .flame.lit .fl-body, .flame.lit .fl-i, .stk .hg, .sstat .hg { animation: none; }
  .spop-fl .flame.pop, .odo-in, .sparks i, .spop-fl .glow { animation-duration: .01s; animation-delay: 0s; }
}
/* огонёк загорается прямо в углу (обычный день серии) */
.stk .fl-w { position: relative; display: inline-flex; }
.stk.ign .flame { animation: ign-s .9s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes ign-s { 0% { transform: scale(.6); filter: grayscale(1); } 45% { transform: scale(1.45); filter: grayscale(0) brightness(1.4); }
  70% { transform: scale(.92); filter: none; } 100% { transform: scale(1); } }
.stk.ign { animation: bump .6s cubic-bezier(.3, 1.6, .5, 1) .15s both; }
.stk .msp { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.stk .msp i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--c); opacity: 0;
  animation: mspark .7s ease-out .3s both; }
@keyframes mspark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-18px) scale(.4); } }
.stk .mo { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: middle; }
.stk .mo-in { display: flex; flex-direction: column; animation: odo .45s cubic-bezier(.5, -0.3, .3, 1.4) .4s both; }
@media (prefers-reduced-motion: reduce) { .stk.ign, .stk.ign .flame, .stk .msp i, .stk .mo-in { animation-duration: .01s; animation-delay: 0s; } }

/* ---------- v13 (вариант Б): платные кнопки у всех обычные — у бесплатных только маленький золотой замочек.
   План на 30 дней: без Премиума — обычная карточка со значком «Премиум», с Премиумом — зелёная рамка ---------- */
.btn.pbtn { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.btn.pbtn > svg { stroke: currentColor; }
.btn.pbtn .lk { background: var(--gold-soft); }
.btn.pbtn-line { border-color: var(--line); }
.btn.pbtn-line > svg { stroke: currentColor; }
.chip.pchip { border-color: var(--line); color: var(--ink); background: var(--surf2); font-weight: 600; }
.tiles button.ptile { box-shadow: none; }
.tiles button.ptile > svg { stroke: var(--brand); }
.tools .tool { box-shadow: none; }
.tools .tool > svg { stroke: var(--brand); }
.plan30.hl:not(.done) { background: var(--surf); box-shadow: none; }
.plan30.hl:not(.done) .icn { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.plan30.hl:not(.done) .icn svg, .plan30.hl:not(.done) > svg:last-child { stroke: var(--brand); }
html.is-prem .plan30.hl:not(.done) { background: color-mix(in srgb, var(--brand) 9%, var(--surf)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent); }
html.is-prem .plan30.hl:not(.done) .icn { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.btn .lk svg { stroke: var(--gold-text); }

/* ---------- v12: защита огонька, год огоньков, приглашение ---------- */
.sweek div.fz span { color: #3E9BD6; }
.fzc { background: var(--surf); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #5AB8F0 45%, transparent); }
.fzc b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.fzi { width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, #5AB8F0 14%, transparent); display: flex;
  align-items: center; justify-content: center; flex: none; }
.fzs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fzs i { width: 30px; height: 30px; border-radius: 10px; background: var(--surf2); display: flex; align-items: center; justify-content: center; }
.fzs i.on { background: color-mix(in srgb, #5AB8F0 16%, transparent); }
.fzb { font-size: calc(12.5px * var(--fs, 1)); font-weight: 700; color: #3E9BD6; margin-left: 4px; }
.ycal { background: var(--surf); border-radius: 18px; padding: 12px 12px 10px; --yc: 12px; }
.ycal .yh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ycal .yh b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.ycal .yh span { font-size: calc(12px * var(--fs, 1)); color: var(--mute); }
.ycal .ysk { height: 104px; border-radius: 10px; background: linear-gradient(90deg, var(--surf2), var(--leaf-off), var(--surf2));
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.yscroll { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px); mask-image: linear-gradient(to right, transparent 0, #000 22px); }
.yscroll::-webkit-scrollbar { display: none; }
.ym { display: grid; gap: 3px; font-size: 10.5px; color: var(--mute); height: 14px; white-space: nowrap; }
.yg { display: flex; gap: 3px; width: max-content; }
.yc { display: flex; flex-direction: column; gap: 3px; }
.yc i, .yl i { width: var(--yc); height: var(--yc); border-radius: 3px; display: block; }
.y0 { background: var(--leaf-off); }
.y1 { background: #FFD9A8; } .y2 { background: #FFB45C; } .y3 { background: #FF8A1A; } .y4 { background: #E3261B; }
.yf { background: #9ED8FF; }
.yx { background: transparent; }
html[data-theme="dark"] .y1 { background: #6B4A22; } html[data-theme="dark"] .y2 { background: #A0601F; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .y1 { background: #6B4A22; } html:not([data-theme="light"]) .y2 { background: #A0601F; } }
.yl { display: flex; align-items: center; gap: 3px; margin-top: 8px; font-size: 11px; color: var(--mute); flex-wrap: wrap; }
.yl span { margin: 0 3px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- v12: цель по весу, совет дня, меню на неделю ---------- */
.wgoal { background: var(--surf); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sheet .wgoal { background: var(--surf); }
.wgoal b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.fc .goal { stroke: var(--steps); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fc text.g { fill: var(--steps); font-weight: 700; }
.tipday { display: flex; gap: 12px; align-items: flex-start; background: var(--surf); border-radius: 20px; padding: 14px; text-align: left; width: 100%; }
.tipday .icn { background: var(--gold-soft); flex: none; }
.tipday .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tipday .k { font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.tipday b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; line-height: 1.3; }
.tipday .t > span:not(.k) { font-size: calc(14px * var(--fs, 1)); color: var(--ink); line-height: 1.4; }
.tipday em { font-style: normal; font-size: calc(13px * var(--fs, 1)); font-weight: 600; color: var(--brand); margin-top: 2px; }
.wbanner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surf); border-radius: 18px; padding: 12px 14px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, transparent); }
.wbanner .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wbanner b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.wbanner span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.wbanner > svg:last-child { transform: scaleX(-1); flex: none; }
.wbanner { box-shadow: none; }
.wbanner > svg:first-child { stroke: var(--brand); }
.wdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; }
.wdays button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px;
  border-radius: 14px; background: var(--surf); border: 1.5px solid var(--line); color: var(--ink); }
.wdays button span { font-size: calc(12px * var(--fs, 1)); color: var(--mute); }
.wdays button b { font-size: calc(16px * var(--fs, 1)); font-weight: 700; }
.wdays button.td:not(.on) { border-color: var(--food); }
.wdays button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.wdays button.on span { color: var(--brand-ink); opacity: .8; }
.seg button svg { vertical-align: -3px; }
/* венок «распускается»: новый лист вырастает от ветки */
.wreath .leaf.bloom { animation: bloom .75s cubic-bezier(.25, 1.5, .5, 1) both; }
@keyframes bloom { 0% { transform: scale(0) rotate(-25deg); opacity: .2; } 60% { transform: scale(1.25) rotate(4deg); opacity: 1; filter: brightness(1.25); }
  100% { transform: scale(1) rotate(0); filter: none; } }
.wreath .wcount.up { animation: wbump .6s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
@keyframes wbump { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .wreath .leaf.bloom, .wreath .wcount.up { animation: none; } }
/* пустые экраны */
.ebox { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 10px 14px; }
.ebox b { font-size: calc(16px * var(--fs, 1)); font-weight: 600; margin-top: 4px; }
.ebox span { font-size: calc(13.5px * var(--fs, 1)); color: var(--mute); line-height: 1.4; max-width: 300px; }
.ebox .btn { width: auto; margin-top: 8px; padding: 0 16px; }
.emptyart { display: flex; justify-content: center; padding-top: 6px; }
.eart { display: block; }/* загрузка без спиннера и плавные переходы */
.skel .sk { border-radius: 18px; background: linear-gradient(90deg, var(--surf) 0%, var(--surf2) 40%, var(--surf) 80%); background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite; }
.skel .sk-h { height: 34px; width: 62%; border-radius: 12px; }
.skel .sk-b { height: 120px; }
.skel .sk-c { height: 76px; }
.skel .sk-c.short { width: 70%; }
.main.enter-f { animation: enterF .22s ease-out both; }
.main.enter-b { animation: enterB .22s ease-out both; }
.main.enter-t { animation: enterT .2s ease-out both; }
@keyframes enterF { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes enterB { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes enterT { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .main.enter-f, .main.enter-b, .main.enter-t { animation: none; } .skel .sk { animation: none; } }
/* подсказки при первом входе */
.tour { position: fixed; inset: 0; z-index: 45; }
.tour .hole { position: fixed; border-radius: 20px; box-shadow: 0 0 0 9999px rgba(8, 16, 12, .62); pointer-events: none;
  outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 0; }
.tour .tbub { position: fixed; left: 16px; right: 16px; max-width: 420px; margin: 0 auto; background: var(--surf); color: var(--ink); border-radius: 20px;
  padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); animation: rise .3s ease both; }
.tour .tbub b { font-size: calc(17px * var(--fs, 1)); font-weight: 700; }
.tour .tbub > span { font-size: calc(14px * var(--fs, 1)); color: var(--mute); line-height: 1.45; }
.tdots { display: flex; gap: 5px; }
.tdots i { width: 6px; height: 6px; border-radius: 3px; background: var(--leaf-off); }
.tdots i.on { width: 18px; background: var(--brand); }
/* еда голосом и текстом — в чате бота */
.vhint { position: relative; display: flex; border-radius: 18px; background: var(--surf);
  border: 1.5px dashed color-mix(in srgb, var(--brand) 40%, transparent); }
.vhint .vmain { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 14px; text-align: left; color: var(--ink); }
.vhint .mic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.vhint .mic svg { stroke: var(--brand); }
.vhint .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vhint .t b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.vhint .t span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); line-height: 1.35; }
.vhint .t em { font-style: normal; font-weight: 600; color: var(--brand); font-size: calc(13.5px * var(--fs, 1)); margin-top: 2px; }
.vhint .x { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--faint); }
.vsteps { display: flex; flex-direction: column; gap: 12px; }
.vsteps div { display: flex; gap: 12px; align-items: flex-start; font-size: calc(15px * var(--fs, 1)); line-height: 1.4; }
.vsteps i { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-style: normal;
  font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.chatdemo { background: var(--surf2); border-radius: 18px; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.chatdemo .me { align-self: flex-end; display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--brand) 16%, var(--surf));
  border-radius: 16px 16px 4px 16px; padding: 8px 12px; color: var(--ink); font-size: calc(13.5px * var(--fs, 1)); }
.chatdemo .me svg { stroke: var(--brand); }
.chatdemo .wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.chatdemo .wave u { display: block; width: 3px; border-radius: 2px; background: var(--brand); }
.chatdemo .bot { align-self: flex-start; max-width: 88%; background: var(--surf); border-radius: 16px 16px 16px 4px; padding: 9px 12px;
  font-size: calc(13.5px * var(--fs, 1)); line-height: 1.4; color: var(--ink); }
.chatdemo .bot .mute { color: var(--mute); }
.chatdemo .kb { display: flex; gap: 6px; flex-wrap: wrap; }
.chatdemo .kb span { padding: 6px 12px; border-radius: 10px; background: var(--surf); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--brand); }
/* платное: лист про функцию */
.fsheet { display: flex; flex-direction: column; gap: 12px; }
.fsheet .h2 { display: flex; align-items: center; gap: 10px; }
.fsheet .li { display: flex; gap: 10px; align-items: flex-start; font-size: calc(15px * var(--fs, 1)); line-height: 1.4; }
.fsheet .li svg { flex: none; margin-top: 2px; }
.fsheet .nows { align-self: center; padding: 6px 14px; }
.fdemo { display: flex; gap: 12px; align-items: center; background: var(--surf2); border-radius: 16px; padding: 10px 12px; }
.fdemo .eart { width: 72px; height: 54px; flex: none; }
.fdemo .big { font-family: "GK Serif", Georgia, serif; font-size: 26px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.fdemo b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; display: block; }
.fdemo span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); display: block; }
.fdemo .grow { min-width: 0; }
.fdemo .fdi { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--surf); display: flex; align-items: center; justify-content: center; }
.fdemo .fbar { display: block; height: 6px; border-radius: 3px; background: var(--line); margin-top: 6px; overflow: hidden; }
.fdemo .fbar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.fdemo.frw { flex-direction: column; align-items: stretch; gap: 6px; }
.fdemo .fr { display: flex; gap: 10px; align-items: baseline; }
.fdemo .fr span { flex: none; width: 92px; color: var(--mute); }
.fdemo .fr b { flex: 1; font-weight: 500; font-size: calc(14px * var(--fs, 1)); display: inline; }
.fdemo .fr em { font-style: normal; font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
.fdemo .fnote { color: var(--ink) !important; font-size: calc(13px * var(--fs, 1)); }
.fdemo .ex { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-top: 2px; }
/* «Что умеет Гиппократ» и подсказки при первом заходе */
.pbadge, .nbadge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px; font-size: 11px; font-weight: 700;
  font-style: normal; vertical-align: 2px; line-height: 1.5; }
.pbadge { background: var(--gold-soft); color: var(--gold-text); }
.nbadge { background: var(--brand); color: var(--brand-ink); }
.sheet > .h2 > svg { vertical-align: -4px; margin-right: 4px; }
.tour.hint .tbub b { display: block; }
.fzc .duo { flex-direction: column; }
.fzc .duo .btn { width: 100%; }
/* замочек на маленьких кнопках в ряд — в уголке, чтобы не сжимать текст и значок */
.btn > svg, .btn .lk { flex: none; }
.duo .btn { position: relative; }
.duo .btn .lk { position: absolute; top: -9px; right: 8px; width: 22px; height: 22px; margin: 0; box-shadow: 0 0 0 2px var(--surf); }
/* пока открыта подсказка — страница не листается, окошко держится на кнопке */
html.spot-on { overscroll-behavior: none; }   /* overflow не трогаем — иначе отклеится шапка; прокрутку гасят touch-action и JS */
.tour { touch-action: none; overscroll-behavior: contain; }
/* лист снизу держится на месте: прокрутка не уходит на страницу, тень не листает страницу */
.sheet { overscroll-behavior: contain; }
.shade { touch-action: none; }

/* шаги за прошлые дни */
.wnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wnav b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; text-align: center; }
.wnav .ib:disabled { opacity: .3; }
.spast { padding: 4px 14px; }
.srow2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.srow2:last-child { border-bottom: 0; }
.srow2 span { font-size: calc(14.5px * var(--fs, 1)); color: var(--ink); }
.srow2 span b { font-weight: 600; }
.srow2 .inp { width: 112px; flex: none; text-align: right; min-height: 42px; }

/* v16: выбор срока и экран после пробного Премиума */
.plans { display: flex; flex-direction: column; gap: 10px; }
.plc { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: var(--surf); border: 2px solid transparent;
  border-radius: 18px; padding: 12px 14px; color: var(--ink); cursor: pointer; }
.plc.on { border-color: var(--brand); }
.plc b { display: block; font-size: calc(16px * var(--fs, 1)); font-weight: 600; }
.plc .grow > span { display: block; font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); line-height: 1.3; margin-top: 2px; }
.plc .grow { min-width: 0; }
.plc .pr2 { flex: none; max-width: 46%; text-align: right; }
.plc .pr2 span { display: block; font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); line-height: 1.3; margin-top: 2px; }
.plc .pr2 b { font-family: "GK Serif", Georgia, serif; font-size: calc(20px * var(--fs-h, 1)); }
.pbadge { font-style: normal; display: inline-block; vertical-align: 2px; margin-left: 4px; background: var(--gold); color: var(--gold-ink);
  font-size: calc(11px * var(--fs, 1)); font-weight: 800; border-radius: 8px; padding: 1px 6px; }
.btn.dim { opacity: .55; }
.tgr { display: flex; gap: 10px; align-items: flex-start; background: var(--surf); border-radius: 16px; padding: 10px 12px; }
.tgr svg { flex: none; margin-top: 2px; }
.tgr b { display: block; font-size: calc(14.5px * var(--fs, 1)); font-weight: 600; }
.tgr span { display: block; font-size: calc(13px * var(--fs, 1)); color: var(--mute); line-height: 1.35; margin-top: 1px; }
.tprice { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surf); border-radius: 16px; padding: 12px 14px; }
.tprice span { display: block; font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
.tprice b { font-family: "GK Serif", Georgia, serif; font-size: calc(24px * var(--fs-h, 1)); font-weight: 600; }
.tprice .s { text-align: right; }

/* v17: женское здоровье */
.whi { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.whi .link { align-self: flex-end; font-size: calc(12.5px * var(--fs, 1)); padding: 0; }
.icn.rose { background: var(--rose-soft); }
.chev { font-size: 24px; color: var(--faint); line-height: 1; }
.whc, .whn { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.whh { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; width: 100%; text-align: left; color: var(--ink); background: none; border: 0; padding: 0; }
.whp { font-family: "GK Serif", Georgia, serif; font-size: calc(28px * var(--fs-h, 1)); font-weight: 600; color: var(--rose); line-height: 1.15; }
.rtag, .gtag, .otag { flex: none; display: inline-block; font-size: calc(12px * var(--fs, 1)); font-weight: 600; padding: 3px 9px; border-radius: 9px;
  background: var(--rose-soft); color: var(--rose); align-self: flex-start; margin-top: 2px; }
.gtag { background: color-mix(in srgb, var(--steps) 16%, transparent); color: var(--steps); }
.otag { background: var(--gold-soft); color: var(--gold-text); }
.whwk { display: flex; justify-content: space-between; }
.whwk div { width: 40px; text-align: center; font-size: calc(11.5px * var(--fs, 1)); color: var(--mute); }
.whwk i { display: grid; place-items: center; width: 34px; height: 34px; margin: 4px auto 0; border-radius: 50%; font-style: normal;
  font-size: calc(14px * var(--fs, 1)); font-weight: 600; color: var(--ink); }
.whwk i.p { background: var(--rose); color: var(--rose-ink); }
.whwk i.f { border: 2px dashed var(--rose-mid); color: var(--rose); }
.whwk i.t { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.btn.rs { background: var(--rose); color: var(--rose-ink); }
.phbar { position: relative; display: flex; height: 12px; border-radius: 7px; overflow: visible; margin-top: 6px; }
.phbar i { height: 100%; }
.phbar i:first-child { border-radius: 7px 0 0 7px; } .phbar i:last-of-type { border-radius: 0 7px 7px 0; }
.phbar b { position: absolute; top: -5px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--surf); }
.phl { display: flex; font-size: calc(10.5px * var(--fs, 1)); color: var(--mute); margin-top: -4px; }
.phl span { text-align: center; overflow: hidden; white-space: nowrap; }
.s .ink, .s.ink, b.ink { color: var(--ink); }
.wfoot { font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); }
.whli { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.panel > b + .whli, .panel > .whli:first-child { border-top: 0; }
.whli b { display: block; font-size: calc(15.5px * var(--fs, 1)); font-weight: 600; }
.whli .s { display: block; }
.whli.chk .rtag, .whli.chk .gtag, .whli.chk .otag { margin-top: 5px; }
.cdots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.cdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf-off); }
.cdots i.r { background: var(--rose); }
.whl { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.whl .btn { align-self: flex-start; width: auto; padding: 0 16px; }
.whlist { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.whlist div { display: flex; gap: 10px; align-items: flex-start; font-size: calc(14px * var(--fs, 1)); }
.whlist svg { flex: none; margin-top: 2px; }
.duo3 { display: flex; gap: 8px; } .duo3 .btn { flex: 1; width: auto; min-width: 0; }
.chip.wchip.on { background: var(--rose-soft); color: var(--rose); border-color: var(--rose-mid); font-weight: 600; }
.whc .duo .btn, .whn .duo .btn { white-space: normal; height: auto; min-height: 42px; padding: 6px 10px; line-height: 1.2; text-align: center; }
.whh .grow { min-width: 55%; }

/* v18: всё, что можно нажать, — отдельной плашкой с круглой кнопкой › (вариант Б) */
.navs { display: flex; flex-direction: column; gap: 8px; }
.navs > .mrow2 { background: var(--surf); border-radius: 16px; padding: 12px 12px 12px 14px;
  box-shadow: 0 1px 0 var(--line), 0 4px 12px rgba(20, 40, 30, .06); }
.navs > .mrow2 + .mrow2 { border-top: 0; }
html[data-theme="dark"] .navs > .mrow2 { box-shadow: 0 1px 0 var(--line), 0 4px 14px rgba(0, 0, 0, .25); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .navs > .mrow2 { box-shadow: 0 1px 0 var(--line), 0 4px 14px rgba(0, 0, 0, .25); } }
.mrow2 .go, .tiles button .go { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); font-size: 21px; font-weight: 600; line-height: 1; padding-bottom: 2px; }
.mrow2.nav:active, .tiles button:active, .panel.row:active { transform: scale(.985); }
.tiles button { position: relative; padding-right: 44px; }
.tiles button .go { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; font-size: 19px; }
.panel.row .go { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 13%, transparent);
  color: var(--brand); font-size: 21px; font-weight: 600; }
.lnk { flex: none; color: var(--brand); font-weight: 600; font-size: calc(13.5px * var(--fs, 1)); padding-top: 2px; }
.whh .lnk.wide { flex-basis: 100%; text-align: left; padding-top: 0; }
.pora { font-style: normal; display: inline-block; vertical-align: 1px; margin-left: 6px; background: var(--rose-soft); color: var(--rose);
  font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; border-radius: 8px; padding: 1px 7px; }
.wtags { display: flex; flex-wrap: wrap; gap: 6px; }
.wtag { display: inline-block; padding: 5px 10px; border-radius: 14px; background: var(--rose-soft); color: var(--rose); font-size: calc(13px * var(--fs, 1)); font-weight: 600; }
/* самочувствие — компактно, чтобы лист помещался на экране и не «ездил» */
.wsheet { display: flex; flex-direction: column; gap: 4px; }
.wsheet .h2 { margin-bottom: 2px; padding-right: 40px; }
.wsheet .cg { font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; }
.wsheet .chips { gap: 6px; }
.chip.xs { min-height: 32px; padding: 0 10px; font-size: calc(13px * var(--fs, 1)); }
.wsheet .btn { margin-top: 12px; }

/* v19: здоровье для всех, челленджи, награды, уроки, дыхание, семья */
.big2 { font-family: "GK Serif", Georgia, serif; font-size: calc(30px * var(--fs, 1)); font-weight: 600; line-height: 1.15; color: var(--ink); }
.big2 .s { font-family: inherit; font-size: calc(14px * var(--fs, 1)); font-weight: 500; }
.medr { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: calc(15px * var(--fs, 1)); }
.medr .s { margin-left: 4px; }
.ok2 { flex: none; min-height: 36px; padding: 0 12px; border-radius: 12px; background: color-mix(in srgb, var(--steps) 16%, transparent); color: var(--steps); font-weight: 700; font-size: calc(13.5px * var(--fs, 1)); }
.grid4 { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 6px; }
.grid4 .inp { min-height: 42px; padding: 0 8px; font-size: calc(14px * var(--fs, 1)); }
.labrow { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.labrow > .inp { min-height: 42px; font-weight: 600; }
.labrow .link { align-self: flex-end; padding: 0; color: var(--danger); font-size: calc(13px * var(--fs, 1)); }
.whli.lab { align-items: flex-start; }
.whli.lab .ink { color: var(--ink); margin-top: 3px; }
.fam { background: var(--surf); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: calc(16px * var(--fs, 1)); }
.mini3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini3 div { background: var(--surf2); border-radius: 12px; padding: 8px 10px; font-size: calc(12px * var(--fs, 1)); color: var(--mute); }
.mini3 b { display: block; color: var(--ink); font-size: calc(16px * var(--fs, 1)); font-weight: 700; margin-top: 2px; }
.fwarn { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-radius: 12px; padding: 9px 12px; font-size: calc(13.5px * var(--fs, 1)); font-weight: 600; line-height: 1.35; }
.chl { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; background: var(--surf); border-radius: 18px; padding: 14px 16px;
  border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--ink); }
.chl b { font-size: calc(16px * var(--fs, 1)); font-weight: 700; }
.chl .row { align-items: center; }
.bar2 { height: 8px; border-radius: 4px; background: var(--leaf-off); overflow: hidden; }
.bar2 i { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.ppl { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.ppl .av { width: 34px; height: 34px; font-size: 14px; color: #fff; }
.ppl b { font-size: calc(14.5px * var(--fs, 1)); font-weight: 600; }
.ppl .s { text-align: right; }
.pbar { height: 5px; border-radius: 3px; background: var(--leaf-off); overflow: hidden; margin-top: 5px; }
.pbar i { display: block; height: 100%; background: var(--steps); }
.achbox { background: var(--surf); border-radius: 18px; padding: 12px 14px; }
.ach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.ach div { background: var(--surf2); border-radius: 12px; padding: 8px 4px; text-align: center; font-size: calc(11px * var(--fs, 1)); line-height: 1.2; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ach div b { display: block; font-size: 24px; line-height: 1.2; margin-bottom: 2px; }
.ach div.off { color: var(--faint); }
.ach div.off b { filter: grayscale(1); opacity: .35; }
.achpop { display: flex; justify-content: center; gap: 12px; padding: 8px 0 4px; }
.achpop div { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: 120px; }
.achpop b { font-size: 54px; line-height: 1; animation: achin .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.achpop span { font-weight: 700; font-size: calc(15px * var(--fs, 1)); }
.achpop i { font-style: normal; color: var(--mute); font-size: calc(12.5px * var(--fs, 1)); }
@keyframes achin { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.brw { position: relative; height: 260px; display: grid; place-items: center; }
.brc { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--water) 55%, transparent), color-mix(in srgb, var(--water) 18%, transparent));
  transition: transform 4s ease-in-out; transform: scale(1); }
.brc.in { transform: scale(1.8); transition-duration: 4s; }
.brc.out { transform: scale(1); transition-duration: 6s; }
.brw b { position: relative; font-size: calc(22px * var(--fs, 1)); font-weight: 700; color: var(--ink); }
#brl { font-size: calc(18px * var(--fs, 1)); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .brc, .brc.in, .brc.out { transition: none; } .achpop b { animation: none; } }
.mrow2 .cb { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); flex: none; }
.mrow2 .cb.on { background: var(--steps); border-color: var(--steps); box-shadow: inset 0 0 0 4px var(--surf); }
.hrow.drinks { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); }
.hrow.drinks .t { flex: 1; min-width: 0; background: none; border: 0; padding: 0; color: var(--ink); }
.hrow.drinks .chip { min-height: 34px; padding: 0 10px; }
.cline { padding: 9px 12px; background: var(--surf2); border-radius: 12px; font-size: calc(14.5px * var(--fs, 1)); line-height: 1.35; }
.mtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mtiles div { background: var(--surf2); border-radius: 12px; padding: 10px 12px; font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.mtiles b { display: block; font-size: calc(19px * var(--fs, 1)); color: var(--ink); font-weight: 700; }
.mrow2.sub { padding: 11px 0; }
.remrow .seg, .sheet .seg { margin: 4px 0; }

/* v20: цикл, анкета 40+, анализы раз в год, «На что обратить внимание» */
.rl { font-style: normal; font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; color: var(--rose); background: var(--rose-soft); border-radius: 8px; padding: 2px 7px; display: inline-block; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.li2 { display: flex; gap: 10px; align-items: flex-start; font-size: calc(14px * var(--fs, 1)); line-height: 1.38; color: var(--ink); }
.li2 > span:first-child { flex: none; width: 22px; text-align: center; }
.s.ink { color: var(--ink); }
.hvy { border: 1.5px solid var(--rose-mid); }
.q { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; background: var(--surf); border-radius: 14px; padding: 13px 14px; font-size: calc(15px * var(--fs, 1)); border: 2px solid transparent; text-align: left; width: 100%; color: var(--ink); }
.opt b { font-weight: 600; }
.opt.on { border-color: var(--brand); }
.opt i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; box-sizing: border-box; }
.opt.on i { border: 6px solid var(--brand); }
.prog { height: 6px; background: var(--leaf-off); border-radius: 3px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--rose); transition: width .25s; }
.score { display: flex; align-items: baseline; gap: 8px; }
.score b { font: 600 calc(44px * var(--fs-h, 1)) "GK Serif", Georgia, serif; color: var(--ink); }
.scale { display: flex; height: 10px; border-radius: 5px; overflow: visible; margin: 6px 0 2px; position: relative; }
.scale i { display: block; } .scale i:first-child { border-radius: 5px 0 0 5px; } .scale i:nth-child(4) { border-radius: 0 5px 5px 0; }
.scale em { position: absolute; top: -4px; width: 4px; height: 18px; background: var(--ink); border-radius: 2px; }
.scl { display: flex; justify-content: space-between; font-size: calc(10.5px * var(--fs, 1)); color: var(--mute); gap: 4px; }
.sub3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sub3 div { background: var(--surf2); border-radius: 12px; padding: 8px 10px; font-size: calc(12px * var(--fs, 1)); color: var(--mute); line-height: 1.25; min-width: 0; }
.sub3 b { display: block; font-size: calc(18px * var(--fs, 1)); color: var(--ink); }
.ph4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ph4 div { border-radius: 10px; padding: 7px 6px; font-size: calc(11px * var(--fs, 1)); line-height: 1.25; color: var(--mute); background: var(--surf); min-width: 0; }
.ph4 div.cur { outline: 2px solid var(--rose); background: var(--rose-soft); color: var(--rose); }
.ph4 b { display: block; font-size: calc(11.5px * var(--fs, 1)); color: var(--ink); }
.lab2 { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.panel > .lab2:first-child { border-top: 0; }
.lab2 .ck { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 14px; }
.lab2 .ck.ok { background: color-mix(in srgb, var(--steps) 18%, transparent); color: var(--steps); }
.lab2 .ck.no { background: var(--gold-soft); color: var(--gold-text); }
.lab2 b { display: block; font-size: calc(15px * var(--fs, 1)); font-weight: 600; } .lab2 .s { display: block; }
.att { background: var(--surf); border-radius: 22px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border: 1.5px solid var(--gold); }
.att .h2 { font-size: calc(19px * var(--fs-h, 1)); }
.who { display: inline-block; font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); border-radius: 8px; padding: 1px 7px; margin-left: 2px; white-space: nowrap; }
.grp { font-size: calc(13px * var(--fs, 1)); font-weight: 700; color: var(--mute); margin: 2px 0 -6px; }
.hd4 { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 6px; font-size: calc(11px * var(--fs, 1)); color: var(--mute); font-weight: 600; padding: 0 2px; }
.chk { background: var(--surf); border-radius: 12px; padding: 10px 12px; display: flex; gap: 8px; font-size: calc(13px * var(--fs, 1)); color: var(--mute); line-height: 1.35; }
.hrow .t b .rl { font-size: calc(11px * var(--fs, 1)); }

/* v22: плитки — у всех иконка сверху, заголовок в одну строку */
.tiles button b { overflow-wrap: anywhere; }

/* v23 */
.whli b .pul { font-style: normal; font-weight: 500; font-size: calc(13px * var(--fs, 1)); color: var(--mute); margin-left: 4px; }
.nw { white-space: nowrap; }
.inp.tm { min-width: 140px; }
.fam .duo .btn { white-space: normal; height: auto; min-height: 42px; line-height: 1.2; padding: 6px 10px; }

/* v24: плавные анимации — одна мягкая кривая везде, только transform и opacity (их телефон рисует без рывков) */
:root { --ease: cubic-bezier(.25, .8, .25, 1); --sheet-ease: cubic-bezier(.32, .72, 0, 1); }
.main.enter-f, .main.enter-b, .main.enter-t, .main.enter-tr, .main.enter-tl { animation-duration: .32s; animation-timing-function: var(--ease); animation-fill-mode: both; will-change: transform, opacity; }
.main.enter-f { animation-name: inR; } .main.enter-tr { animation-name: inR2; }
.main.enter-b { animation-name: inL; } .main.enter-tl { animation-name: inL2; }
.main.enter-t { animation-name: inFade; }
@keyframes inR { from { opacity: 0; transform: translate3d(56px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes inL { from { opacity: 0; transform: translate3d(-56px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes inR2 { from { opacity: 0; transform: translate3d(32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes inL2 { from { opacity: 0; transform: translate3d(-32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes inFade { from { opacity: 0; } to { opacity: 1; } }
/* старый экран — копия поверх, уезжает в другую сторону и тает */
.main.ghost { position: fixed; z-index: 3; pointer-events: none; margin: 0; animation: .3s var(--ease) both; will-change: transform, opacity; }
.main.ghost.leave-f { animation-name: outL; } .main.ghost.leave-r { animation-name: outL2; }
.main.ghost.leave-b { animation-name: outR; } .main.ghost.leave-l { animation-name: outR2; }
.main.ghost.leave-t { animation-name: outFade; }
@keyframes outL { to { opacity: 0; transform: translate3d(-56px, 0, 0); } }
@keyframes outR { to { opacity: 0; transform: translate3d(56px, 0, 0); } }
@keyframes outL2 { to { opacity: 0; transform: translate3d(-32px, 0, 0); } }
@keyframes outR2 { to { opacity: 0; transform: translate3d(32px, 0, 0); } }
@keyframes outFade { to { opacity: 0; } }
.top, .tabs { z-index: 6; }
/* нижнее меню: подсветка едет к выбранной вкладке */
.tabs .in { position: relative; }
.tpill { position: absolute; top: 6px; height: 32px; width: calc(100% / var(--n) - 24px); left: calc(var(--i) * 100% / var(--n) + 12px);
  border-radius: 16px; background: color-mix(in srgb, var(--brand) 13%, transparent); transition: left .32s var(--ease); pointer-events: none; }
.tabs button { position: relative; z-index: 1; }
/* листы: мягкий подъём и такое же мягкое закрытие */
.sheet { transition: transform .38s var(--sheet-ease); will-change: transform; }
.sheet.out { transition: transform .26s var(--sheet-ease); transform: translateY(100%); }
.sheet.now, .shade.now { transition: none; }
.shade { transition: opacity .3s var(--ease); }
/* нажатие — лёгкое сжатие */
.btn, .chip, .ib { transition: transform .12s ease; }
.btn:active, .chip:active, .ib:active { transform: scale(.97); }
#toast { transition: opacity .2s ease, transform .3s var(--ease); transform: translate(-50%, 10px); }
#toast.in { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .tpill { transition: none; } .main.ghost { display: none; } }
/* v24: «назад» и крестики — крупнее, легче попасть пальцем */
.top { height: 56px; }
.top .ib { width: 42px; height: 42px; border-radius: 21px; }
.top .ib[data-act=back] { width: 44px; height: 44px; border-radius: 22px; }
.top .ib[data-act=back] svg { width: 22px; height: 22px; stroke-width: 2.2; }
.sheet .sx { width: 40px; height: 40px; border-radius: 20px; top: 10px; right: 12px; }
.sheet .sx svg { width: 20px; height: 20px; stroke-width: 2.2; }
.ib.sm { width: 36px; height: 36px; border-radius: 18px; }
.ib.sm svg { width: 17px; height: 17px; }
.sheet > .h2:first-of-type, .sheet .h2:first-child { padding-right: 46px; }
.sheet.out, .shade:not(.in) { pointer-events: none; }

/* ---------- v25: листы не «гуляют» ---------- */
html { overscroll-behavior: none; }
.sheet { overflow-x: hidden; overscroll-behavior: contain; }
.sheet .chip { max-width: 100%; padding-top: 6px; padding-bottom: 6px; text-align: left; }
.sheet.tight { gap: 8px; padding-top: 6px; }
.sheet.tight .grab { margin-bottom: 0; }

/* v25: отчёт — месяцы подписанными кнопками */
.mnav { display: flex; align-items: center; gap: 8px; }
.mnav .mc { flex: 1; min-width: 0; text-align: center; }
.mnav .mc b { display: block; font-family: "GK Serif", Georgia, serif; font-weight: 600; font-size: calc(24px * var(--fs-h, 1)); line-height: 1.15; }
.mnav .mc span { font-size: calc(12px * var(--fs, 1)); color: var(--mute); }
.mnav .mb { flex: none; height: 38px; padding: 0 12px; border-radius: 19px; background: var(--surf); border: 1.5px solid var(--line); color: var(--brand);
  font-weight: 600; font-size: calc(13.5px * var(--fs, 1)); display: inline-flex; align-items: center; white-space: nowrap; }
.mnav .mb.off { opacity: .35; }
.infile { font-size: calc(12.5px * var(--fs, 1)); }
@media (max-width: 360px) { .mnav .mb { padding: 0 9px; font-size: 12.5px; } .mnav .mc b { font-size: 20px; } }
/* v25: Профиль */
.prof { padding: 14px 16px; gap: 12px; text-align: left; align-items: center; width: 100%; }
.prof .ava { width: 44px; height: 44px; border-radius: 22px; background: var(--brand); color: var(--brand-ink); display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 18px; flex: none; }
.prof .link { flex: none; font-weight: 600; }
/* v25: «Подключить шаги» — нумерованные шаги, проверка, пример чата */
.st5 { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start; }
.st5 + .st5 { border-top: 1px solid var(--line); }
.st5 > i { font-style: normal; flex: none; width: 26px; height: 26px; border-radius: 13px; background: var(--gold-soft); color: var(--ink); font-weight: 700;
  font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.st5 > div { flex: 1; min-width: 0; }
.st5 b { font-size: calc(14.5px * var(--fs, 1)); font-weight: 600; }
.st5 .s { font-size: calc(13px * var(--fs, 1)); margin-top: 2px; line-height: 1.42; }
.st5 .copy { margin-top: 8px; }
.okline { display: flex; gap: 8px; align-items: center; font-size: calc(13.5px * var(--fs, 1)); background: var(--surf); border-radius: 14px; padding: 11px 14px; }
.okline > span { flex: 1; min-width: 0; }
.okline.wait { color: var(--mute); }
.okline .link { flex: none; font-weight: 600; }
.chatm { display: flex; flex-direction: column; gap: 6px; background: var(--surf2); border-radius: 18px; padding: 12px; }
.chatm div { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: calc(14px * var(--fs, 1)); }
.chatm .bot { background: var(--surf); align-self: flex-start; }
.chatm .me { background: var(--brand); color: var(--brand-ink); align-self: flex-end; }

/* v26: «Здоровье» — разделы и крупные строки со статусом (вариант Б) */
:root { --due: #B25E12; }
html[data-theme="dark"] { --due: #F2A65A; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --due: #F2A65A; } }
.hsec { font-size: calc(13.5px * var(--fs, 1)); font-weight: 700; color: var(--mute); margin: 8px 4px -6px; }
.hlist { background: var(--surf); border-radius: 18px; padding: 2px 12px 2px 14px; box-shadow: 0 1px 0 var(--line), 0 4px 12px rgba(20, 40, 30, .06); }
html[data-theme="dark"] .hlist { box-shadow: 0 1px 0 var(--line), 0 4px 14px rgba(0, 0, 0, .25); }
.hrow2 { display: flex; align-items: center; gap: 14px; padding: 14px 0; width: 100%; text-align: left; min-height: 68px; }
.hrow2 + .hrow2 { border-top: 1px solid var(--line); }
.hrow2:active { transform: scale(.985); }
.hrow2 .hic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.hrow2 .t { flex: 1; min-width: 0; }
.hrow2 .t b { display: block; font-size: calc(16px * var(--fs, 1)); font-weight: 600; line-height: 1.25; }
.hrow2 .t span { display: block; font-size: calc(13.5px * var(--fs, 1)); color: var(--mute); line-height: 1.35; margin-top: 2px; }
.hrow2 .t span.due { color: var(--due); font-weight: 700; }
.hrow2 .go { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); font-size: 21px; font-weight: 600; line-height: 1; padding-bottom: 2px; }
.hrow2 > .gtag, .hrow2 > .otag, .hrow2 > .rtag { flex: none; }
.tip.warn { background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* v26: анкета «Меню на неделю» */
.wzbar { height: 6px; border-radius: 3px; background: var(--leaf-off); overflow: hidden; }
.wzbar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .3s ease; }
.wzg { display: flex; flex-wrap: wrap; gap: 8px; }
.wzc { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--surf);
  font-size: calc(15px * var(--fs, 1)); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--line); min-height: 44px; }
.wzc.on { background: color-mix(in srgb, var(--brand) 14%, var(--surf)); box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand); }
.wzc.wide { width: 100%; justify-content: center; }
.wzs, .wzb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wzb { grid-template-columns: 1fr; }
.wzst { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 16px; background: var(--surf);
  box-shadow: inset 0 0 0 1.5px var(--line); text-align: left; min-height: 92px; }
.wzb .wzst { min-height: 0; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.wzst.on { box-shadow: inset 0 0 0 2px var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surf)); }
.wzst b { font-size: calc(15px * var(--fs, 1)); }
.wzst span:not(.dot) { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.wzst .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surf2); color: var(--ink); font-weight: 700; font-size: 16px; }
.wzst.on .dot { background: var(--brand); color: #fff; }
.wzst .dot.bsign { background: var(--gold-soft); color: var(--gold-text); font-size: 13px; width: 44px; border-radius: 12px; }
.wznav { display: flex; gap: 8px; margin-top: 6px; }
.wznav .btn { flex: 1; }
.wzload { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; text-align: center; }
.spin2 { width: 54px; height: 54px; border-radius: 50%; border: 5px solid var(--leaf-off); border-top-color: var(--brand); animation: spin2 1s linear infinite; }
@keyframes spin2 { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin2 { animation: none; } }
.wzl { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; text-align: left; width: 100%; max-width: 320px; }
.wzl div { display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: calc(14.5px * var(--fs, 1)); }
.wzl div i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--leaf-off); flex: none; }
.wzl div.ok { color: var(--ink); }
.wzl div.ok i { background: var(--steps); box-shadow: none; }
.wdays button.lk { opacity: .75; }
.adds.a4 { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.adds.a4 button { font-size: calc(12.5px * var(--fs, 1)); }
.s.micro { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 14px; line-height: 1.35; flex-wrap: wrap; }
.s.micro svg { flex: none; margin-top: 2px; }
/* v26: голос в приложении */
.vrec { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 4px; }
.vrec .mic { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 35%, transparent); }
.vrec .mic.on { background: var(--danger); animation: vpulse 1.2s ease-in-out infinite; }
@keyframes vpulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .vrec .mic.on { animation: none; } }
.vrec .t { font-size: calc(22px * var(--fs, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.vex { display: flex; flex-direction: column; gap: 6px; }
.vex span { background: var(--surf2); border-radius: 12px; padding: 8px 12px; font-size: calc(13.5px * var(--fs, 1)); }
/* v26: «Хочу сладкое» */
.sw-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.sw-step + .sw-step { border-top: 1px solid var(--line); }
.sw-step i { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 700;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.sw-step.ok i { background: var(--steps); color: #fff; }
.sw-timer { font-size: calc(30px * var(--fs, 1)); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
/* v26: холодильник */
.fr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-chips button { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 12px; background: var(--surf2); font-size: calc(13.5px * var(--fs, 1)); }
.fr-chips button.unk { opacity: .55; }
/* v26: аналитика в отчёте */
.ins { display: flex; flex-direction: column; gap: 8px; }
.ins .card { display: flex; gap: 12px; align-items: flex-start; }
.ins .card .icn { width: 40px; height: 40px; border-radius: 50%; }
.ins .card .t b { margin-bottom: 2px; }
.ins .card .t p { margin: 0; font-size: calc(14px * var(--fs, 1)); line-height: 1.4; }
.ins .card .t .stp { margin-top: 6px; font-size: calc(13.5px * var(--fs, 1)); color: var(--brand); font-weight: 600; }
.ins .lockrow { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--gold-soft); color: var(--gold-text); text-align: left; width: 100%; }
/* v28: нажали на рецепт — карточка чуть гаснет, пока грузится (видно, что нажатие принято) */
.tapwait { opacity: .55; transition: opacity .15s; }

/* v28: светлая тема — белые кнопки на светло-зелёном фоне почти сливались. Чёткая рамка и лёгкая тень
   (в тёмной теме — как было). Подписи неактивных вкладок — темнее (контраст 4,5+ вместо 2,9). */
.tabs button { color: var(--tabmute); }
.tabs button.on { color: var(--brand); }
.chip:not(.on):not(.pchip), .qchip, .ib, .wzc:not(.on), .wzst:not(.on) { border: 1px solid var(--cline); box-shadow: var(--cshadow); }
.adds button, .tools .tool { border: 1px solid var(--cline); box-shadow: var(--cshadow); }
.inp { border-color: var(--cline); }
.inp:focus { border-color: var(--brand); }
.btn.line { border-color: var(--cline); }
/* v28: голос — что услышал и почему не вышло, прямо в листе */
.vres { background: var(--surf2); border-radius: 16px; padding: 12px 14px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.vres .vh { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; }
.vres .vh svg { flex: none; margin-top: 2px; }
/* v28: анкеты — кнопка «Дальше» всегда видна: прилипает к низу экрана; шаг меню без нижних вкладок */
.wznav { position: sticky; bottom: 0; z-index: 4; margin: 6px -16px 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg) 22%); }
.main.wz { padding-bottom: 0; }
.onb .btn[data-act^="onb-"], .onb .btn[data-act="quiz-next"] { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 4;
  box-shadow: 0 8px 22px rgba(20, 40, 30, .18); }
/* магазины — компактно, по три в ряд, чтобы шаг влезал целиком */
.wzs { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wzs .wzst { padding: 10px 8px; gap: 2px; align-items: center; text-align: center; min-height: 0; }
.wzs .wzst .dot { width: 28px; height: 28px; font-size: 14px; }
.wzs .wzst b { font-size: calc(13.5px * var(--fs, 1)); line-height: 1.2; }
.wzs .wzst span:not(.dot) { font-size: calc(11.5px * var(--fs, 1)); }
/* «Собрать моё меню» — главная кнопка анкеты: градиент, искорка, лёгкое свечение */
.btn.gobtn { background: linear-gradient(120deg, #1F5A44, #2F6B4C 55%, #8E6F25); color: #fff;
  font-weight: 700; box-shadow: 0 8px 22px rgba(31, 90, 68, .3); }
.btn.gobtn svg { animation: gk-twinkle 2.4s ease-in-out infinite; }
@keyframes gk-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.18) rotate(12deg); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .btn.gobtn svg { animation: none; } }
/* v28: «Умное меню» — выделенная кнопка */
.wbanner.smart, html .wbanner.smart { background: linear-gradient(120deg, #1F5A44, #2F6B4C 55%, #8E6F25); color: #fff; border: none;
  box-shadow: 0 8px 22px rgba(31, 90, 68, .28); }
.wbanner.smart .t b { color: #fff; }
.wbanner.smart .t span { color: rgba(255, 255, 255, .86); }
.wbanner.smart .spk { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; flex: none; }
.wbanner.smart .spk svg { animation: gk-twinkle 2.6s ease-in-out infinite; }
.wbanner.smart > svg:last-child { transform: scaleX(-1); opacity: .85; }
.lmode { margin-top: 2px; }
/* v28: вода — следующий стакан с «+» и пульсацией, чтобы было понятно, что на стаканы нажимают */
.glasses .gl { position: relative; }
.glasses .gl.nx { background: color-mix(in srgb, var(--water) 10%, transparent); animation: gk-glass 2.2s ease-in-out infinite; }
.glasses .gl .pl { position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px; border-radius: 50%; background: var(--water); color: #fff;
  font-style: normal; font-weight: 800; font-size: 12px; line-height: 15px; text-align: center; }
@keyframes gk-glass { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--water) 0%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--water) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) { .glasses .gl.nx { animation: none; } }
/* v28: картинки к советам */
.tipart { display: block; border-radius: 18px; }
.tipday.wart { flex-direction: column; gap: 10px; }
.tipday.wart .k { display: inline-flex; align-items: center; gap: 4px; }
.mrow2.gl2 .gth { position: relative; width: 64px; flex: none; }
.mrow2.gl2 .gth .tipart { border-radius: 10px; }
.mrow2.gl2 .gth .rd { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--steps); display: grid; place-items: center; }
.main > .tipart:first-child { margin-bottom: 4px; }
/* v28: «Показать подсказки снова» — первым на экране «Что умеет» */
.hintsbtn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border-radius: 18px;
  background: var(--gold-soft); border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.hintsbtn .hi { width: 42px; height: 42px; border-radius: 12px; background: var(--gold); display: grid; place-items: center; flex: none; }
.hintsbtn .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hintsbtn b { font-size: calc(15.5px * var(--fs, 1)); color: var(--ink); }
.hintsbtn span { font-size: calc(13px * var(--fs, 1)); color: var(--gold-text); }
/* v29: согласие на данные о здоровье */
.cons .ctext { padding: 14px 16px; font-size: calc(14px * var(--fs, 1)); line-height: 1.45; }
.cons .ctext b { display: block; margin: 10px 0 4px; font-size: calc(14.5px * var(--fs, 1)); }
.cons .ctext b:first-child { margin-top: 0; }
.cons .ctext ul { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.cons .cfoot { position: sticky; bottom: 0; z-index: 4; margin: 6px -16px 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg) 18%); display: flex; flex-direction: column; gap: 10px; }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.line.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.csask { padding: 12px 14px; text-align: left; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, transparent); }
.cons .cfoot .consent { background: var(--surf); border: 1px solid var(--cline); border-radius: 14px; padding: 12px 14px; }
.cons .cfoot .consent span { font-size: calc(15px * var(--fs, 1)); color: var(--ink); font-weight: 600; }
.cons .cfoot .consent input { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.cons .ctext .cop { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cline); font-size: calc(12.5px * var(--fs, 1)); color: var(--mute, #66726B); }

/* v31: совет дня — явная кнопка; поиск по советам */
.tipday .tipfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; flex-wrap: wrap; }
.tipday .tipgo { display: inline-flex; align-items: center; gap: 6px; background: var(--brand); color: #fff; font-weight: 700;
  font-size: calc(14px * var(--fs, 1)); padding: 10px 16px; border-radius: 999px; }
.tipday .tipfoot .link { font-size: calc(13.5px * var(--fs, 1)); }
.tipday { cursor: pointer; }
.gsearch { position: relative; margin: 10px 0 8px; }
.gsearch svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.gsearch .inp { padding-left: 42px; }
.chips.gq { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gfound { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; background: var(--surf); border-radius: 16px; padding: 12px 14px; margin-top: 8px; }
.gfound .k { font-size: calc(12px * var(--fs, 1)); color: var(--mute); font-weight: 600; }
.gfound b { font-size: calc(15px * var(--fs, 1)); }
.gfound span:not(.k) { font-size: calc(14px * var(--fs, 1)); line-height: 1.4; color: var(--ink); }
.gfound em { font-style: normal; font-weight: 600; color: var(--brand); font-size: calc(13px * var(--fs, 1)); display: inline-flex; align-items: center; gap: 4px; }
.ownk { display: block; margin-top: 10px; }

/* v32: экран «Что вы потеряете» */
.closs { gap: 14px; }
.closs .lhero { position: relative; overflow: hidden; border-radius: 24px; padding: 20px 18px 18px; color: #fff;
  background: linear-gradient(135deg, #1F5A44 0%, #2F6B4C 55%, #8E6F25 130%); display: flex; flex-direction: column; gap: 6px; }
.closs .lart { position: absolute; right: -6px; top: 8px; width: 120px; height: 100px; }
.closs .lht { position: relative; max-width: 100%; }
.closs .lk { font-size: calc(12px * var(--fs, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.closs .lhero h1 { font-family: var(--serif, Georgia, serif); font-size: calc(25px * var(--fs, 1)); line-height: 1.15; margin: 6px 0 8px; padding-right: 96px; font-weight: 600; }
.closs .lhero p { font-size: calc(14px * var(--fs, 1)); line-height: 1.45; opacity: .92; margin: 0; }
.closs .lh2 { font-weight: 700; font-size: calc(15px * var(--fs, 1)); margin: 4px 2px -4px; }
.closs .lme { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.closs .lme > div { background: color-mix(in srgb, var(--gc) 12%, var(--surf)); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.closs .lme .li { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surf); margin-bottom: 6px; }
.closs .lme b { font-size: calc(22px * var(--fs, 1)); color: var(--ink); }
.closs .lme span:not(.li) { font-size: calc(13px * var(--fs, 1)); color: var(--mute); line-height: 1.3; }
.closs .lgrp { background: var(--surf); border-radius: 22px; padding: 14px; box-shadow: var(--cshadow, none); }
.closs .lgrp.main1 { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gc) 45%, transparent); }
.closs .lh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.closs .lh b { font-size: calc(16.5px * var(--fs, 1)); flex: 1; }
.closs .lh em { font-style: normal; font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, transparent); padding: 4px 9px; border-radius: 99px; }
.closs .lb { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--gc); flex: none; }
.closs .litems { display: flex; flex-direction: column; }
.closs .lrow { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--cline); }
.closs .lrow:first-child { border-top: 0; }
.closs .lrow .li { position: relative; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--gc) 13%, var(--surf)); }
.closs .lrow .li i { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gc); border: 2px solid var(--surf); }
.closs .lrow b { display: block; font-size: calc(14.5px * var(--fs, 1)); }
.closs .lrow span:not(.li) { font-size: calc(13px * var(--fs, 1)); color: var(--mute); line-height: 1.35; }
.closs .lnote { display: flex; gap: 10px; align-items: flex-start; background: color-mix(in srgb, var(--brand) 8%, var(--surf)); border-radius: 16px; padding: 12px 14px;
  font-size: calc(13.5px * var(--fs, 1)); line-height: 1.4; }
.closs .lnote svg { flex: none; margin-top: 1px; }
.closs .lfoot { margin-top: 6px; padding: 4px 0 calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 4px; }   /* v33: в конце страницы */
.closs .lfoot .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* v31: тип питания в анкете меню */
.wzs.diets { grid-template-columns: 1fr 1fr; gap: 8px; }
.wzs.diets .wzst { text-align: left; align-items: flex-start; padding: 12px; }
.wzs.diets .wzst b { display: block; }

/* v31: вес и цель одной формой; плашка прогресса */
.wform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.wform:has(> label:only-child) { grid-template-columns: 1fr; }
.wgoal { background: var(--bg); border-radius: 16px; padding: 12px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.wpb { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wpl { display: flex; justify-content: space-between; font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.wpl span { display: flex; flex-direction: column; gap: 1px; }
.wpl span.c { align-items: center; } .wpl span.r { align-items: flex-end; }
.wpl b { font-size: calc(16px * var(--fs, 1)); color: var(--ink); }
.wtr { position: relative; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--steps) 18%, transparent); }
.wtr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--steps); }
.wtr em { position: absolute; top: 50%; width: 18px; height: 18px; margin-left: -9px; transform: translateY(-50%); border-radius: 50%; background: var(--surf); border: 3px solid var(--steps); }
.wprogc { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; background: var(--surf); border-radius: 18px; padding: 14px; }
.wprogc .row { display: flex; justify-content: space-between; align-items: center; }
.wprogc .row b { display: inline-flex; align-items: center; gap: 6px; font-size: calc(15px * var(--fs, 1)); }
.wprogc .row span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); }

/* v31: инструкция шагов — свёрнута */
.howfold { background: var(--surf); border-radius: 16px; padding: 4px 14px; margin: 8px 0; }
.howfold summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 600; cursor: pointer; }
.howfold summary::-webkit-details-marker { display: none; }
.howfold summary span { flex: 1; }
.howfold[open] summary svg:last-child { transform: rotate(180deg); }
.howfold > .panel { background: var(--bg); }
html[data-theme="dark"] .closs .lb svg, html[data-theme="dark"] .closs .lrow .li i svg { stroke: #10201A; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .closs .lb svg, html:not([data-theme="light"]) .closs .lrow .li i svg { stroke: #10201A; } }

/* v34: выгоднее, чем отменять */
.closs .loff { background: var(--surf); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: inset 0 0 0 1.5px var(--cline); }
.closs .loff.gold { background: color-mix(in srgb, var(--gold) 12%, var(--surf)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent); }
.closs .lot { display: flex; gap: 12px; align-items: flex-start; }
.closs .lob { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--brand); flex: none; }
.closs .loff.gold .lob { background: var(--gold); }
.closs .lot b { display: block; font-size: calc(15.5px * var(--fs, 1)); }
.closs .lot span:not(.lob) { font-size: calc(13.5px * var(--fs, 1)); color: var(--mute); line-height: 1.4; }

/* v34: неделя давления */
.bpw { display: flex; flex-direction: column; gap: 10px; background: var(--surf); border-radius: 18px; padding: 14px; width: 100%; text-align: left; }
.bpw.start { flex-direction: row; align-items: center; gap: 12px; background: color-mix(in srgb, var(--rose) 10%, var(--surf)); }
.bpw .bpi { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--rose); flex: none; }
.bpw .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bpw .t b { font-size: calc(15px * var(--fs, 1)); }
.bpw .t span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
.bpw .row { display: flex; justify-content: space-between; align-items: center; }
.bpw .row b { display: inline-flex; gap: 6px; align-items: center; }
.bpg { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 4px; align-items: center; }
.bpg .lbl { display: flex; flex-direction: column; gap: 8px; font-size: 11px; color: var(--mute); margin-right: 4px; }
.bpg .c { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bpg i { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--rose) 18%, transparent); }
.bpg i.on { background: var(--rose); }
.bpg i.fut { background: transparent; border: 1.5px dashed var(--line); }
.bpg em { font-style: normal; font-size: 11px; color: var(--mute); }
.bps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bps div { background: var(--bg); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.bps span { font-size: 12px; color: var(--mute); } .bps b { font-size: calc(18px * var(--fs, 1)); }

/* v34: приливы в листе самочувствия */
.hotb { background: color-mix(in srgb, var(--rose) 9%, var(--surf)); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.hotb .row { display: flex; align-items: center; gap: 10px; }
.hotb .grow { display: flex; flex-direction: column; }
.hotb .grow span { font-size: calc(12.5px * var(--fs, 1)); color: var(--mute); }
.hotl { display: flex; flex-direction: column; gap: 6px; }
.hotl div { display: flex; gap: 8px; align-items: flex-start; font-size: calc(13.5px * var(--fs, 1)); line-height: 1.35; }
.hotl svg { flex: none; margin-top: 2px; }

/* v34: поделиться итогами месяца */
.sharebtn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: color-mix(in srgb, var(--brand) 9%, var(--surf)); border-radius: 16px; padding: 12px 14px; }
.sharebtn span { flex: 1; display: flex; flex-direction: column; }
.sharebtn b { font-size: calc(15px * var(--fs, 1)); } .sharebtn i { font-style: normal; font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
html[data-theme="dark"] .bpw .bpi svg { stroke: #10201A; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .bpw .bpi svg { stroke: #10201A; } }

/* v35: плитки «Челленджи» и «Хочу сладкое», вечерняя строка под «Питанием», экран «Что приготовить?» */
.tiles button.tgold { background: color-mix(in srgb, var(--gold) 9%, var(--surf)); }
.tiles button.trose { background: color-mix(in srgb, var(--rose) 9%, var(--surf)); }
.sweetline { display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0 10px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rose) 40%, transparent); background: color-mix(in srgb, var(--rose) 6%, transparent);
  font-size: calc(14px * var(--fs, 1)); color: var(--ink); text-align: left; }
.sweetline span { flex: 1; font-weight: 600; }
.sweetline svg:last-child { transform: rotate(-90deg); }
.frs { display: flex; align-items: center; gap: 12px; font-size: calc(14.5px * var(--fs, 1)); line-height: 1.35; }
.frs-i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--brand) 12%, var(--surf)); }
.chban { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surf); border-radius: 18px; padding: 12px 14px; }
.chban .av { display: flex; flex: none; }
.chban .av .ava { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(13px * var(--fs, 1)); color: #fff; border: 2px solid var(--surf); box-sizing: border-box; }
.chban .av .ava + .ava { margin-left: -10px; }
.chban .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.chban .t b { font-size: calc(15px * var(--fs, 1)); }
.chban .t span { font-size: calc(13px * var(--fs, 1)); color: var(--mute); }
.chban > .av { width: auto !important; height: auto !important; min-width: 76px; background: none !important; border-radius: 0 !important; padding: 0 !important; display: flex !important; }
.panel .sweetline { margin: 12px 0 0; }

/* v39: «Калории в порции» в листе записи */
.kfield { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--surf); border-radius: 14px; padding: 6px 12px; }
.kfield .lbl { flex: 1; font-size: calc(14px * var(--fs, 1)); color: var(--mute); }
.kfield .inp { width: 96px; text-align: right; border: 0; background: transparent; font-size: calc(18px * var(--fs, 1)); font-weight: 700; color: var(--ink); padding: 6px 0; }
.kfield .u { color: var(--mute); font-size: calc(14px * var(--fs, 1)); }

/* v42: маскот «мини-Гиппократ» */
.gkm { display: block; overflow: visible; }
.gkm .mk-armL, .gkm .mk-armR, .gkm .mk-head, .gkm .mk-eyes, .gkm .mk-brows, .gkm .mk-torso { transform-box: view-box; }
.gkm .mk-eyes { animation: mkBlink 5s infinite; }
@keyframes mkBlink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
.gkm .mk-fx use, .gkm .mk-fx .mk-fly { opacity: 0; transform-box: fill-box; transform-origin: center; }
.gkm.wave .mk-armR { animation: mkWave 1.5s ease-in-out 3; }
.gkm.idle { animation: mkBreath 4s ease-in-out infinite; }
@keyframes mkWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 75% { transform: rotate(9deg); } }
@keyframes mkBreath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
/* похвала: машет веточкой, искры, листик летит в венок */
.gkm.cheer .mk-armL { animation: mkBranch 1.1s ease-in-out 2; }
.gkm.cheer .mk-head { animation: mkNod .55s ease-in-out 2; }
.gkm.cheer .mk-brows { animation: mkBrow 1.1s ease-in-out 1; }
.gkm.cheer .mk-s1 { animation: mkTw 1.1s .15s ease-out 2; }
.gkm.cheer .mk-s2 { animation: mkTw 1.1s .45s ease-out 2; }
.gkm.cheer .mk-s3 { animation: mkTw 1.1s .3s ease-out 2; }
.gkm.cheer .mk-fly { animation: mkFly 1.5s .35s ease-out 1 forwards; }
@keyframes mkBranch { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(18deg); } 65% { transform: rotate(-9deg); } }
@keyframes mkNod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg) translateY(2px); } }
@keyframes mkBrow { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
@keyframes mkTw { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.1) rotate(45deg); } 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@keyframes mkFly { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(100px, -40px) rotate(200deg); } }
/* праздник: обе руки вверх, подпрыгивает */
.gkm.party { animation: mkHop .6s ease-in-out 4; }
.gkm.party .mk-armR { animation: mkWave .6s ease-in-out 4; }
.gkm.party .mk-armL { animation: mkBranch .7s ease-in-out 4; }
.gkm.party .mk-s1, .gkm.party .mk-s2, .gkm.party .mk-s3 { animation: mkTw .9s ease-out 3; }
.gkm.party .mk-s2 { animation-delay: .3s; } .gkm.party .mk-s3 { animation-delay: .6s; }
.gkm.party .mk-fly { animation: mkFly 1.4s .2s ease-out 2; }
@keyframes mkHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }

/* всплывашка с маскотом */
.mkpop { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 45; max-width: 440px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 22px; background: var(--surf);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18), 0 0 0 1px var(--line); transform: translateY(140%); opacity: 0;
  transition: transform .38s cubic-bezier(.2, 1.3, .4, 1), opacity .25s; pointer-events: none; }
.mkpop.in { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mkpop .gkm { flex: none; }
.mkpop .mkb { min-width: 0; }
.mkpop .mkb b { display: block; font-size: calc(15.5px * var(--fs, 1)); font-weight: 650; color: var(--ink); line-height: 1.25; }
.mkpop .mkb span { display: block; font-size: calc(13.5px * var(--fs, 1)); color: var(--mute); line-height: 1.35; margin-top: 2px; }
.mkpop.big { flex-direction: column; text-align: center; padding: 18px 18px 16px; gap: 6px; }
.mkpop.big .mkb b { font-family: "GK Serif", Georgia, serif; font-size: calc(21px * var(--fs, 1)); }
.mkconf { position: fixed; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; }
.mkconf i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: mkFall 2.6s cubic-bezier(.3, .6, .6, 1) forwards; }
.mkconf i.lf { width: 14px; height: 8px; border-radius: 0 10px 0 10px; }
@keyframes mkFall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: .9; } }
/* пустые экраны: маскот машет и подсказывает */
.ebox .gkm { margin-bottom: 2px; }
.ebox .mkbub { position: relative; background: var(--surf2); border-radius: 16px; padding: 10px 14px; margin-top: 6px; max-width: 320px; }
.ebox .mkbub::before { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; background: var(--surf2); transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.ebox .mkbub b, .ebox .mkbub span { position: relative; display: block; }
.ebox .mkbub span { margin-top: 3px; }

/* v43: стартовый экран — маскот и пять функций */
.onb .mkhi { display: flex; justify-content: center; padding-top: 2px; }
.onb .onbf .feat2 { padding: 7px 0; align-items: center; }
.onb .onbf .feat2 .ic { width: 36px; height: 36px; }
.onb .onbf .feat2 .s { margin-top: 0; }
.cons .cfold { margin-top: 2px; }
.cons .cfold .ctext { margin-top: 8px; }
.cons .spacer-c { flex: 1; }
.gnext { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.gnext .btn { white-space: normal; height: auto; min-height: 52px; padding: 12px 16px; line-height: 1.3; }

/* v44: «Включите напоминания» — для тех, кто не открывал чат с ботом */
.chatcard { position: relative; display: flex; gap: 12px; align-items: flex-start; background: var(--surf); border-radius: 22px; padding: 14px 40px 14px 14px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 35%, transparent); }
.chatcard .ci { width: 42px; height: 42px; flex: none; border-radius: 14px; background: color-mix(in srgb, var(--brand) 12%, transparent); display: flex; align-items: center; justify-content: center; }
.chatcard .t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.chatcard .t b { font-size: calc(16px * var(--fs, 1)); }
.chatcard .t span { font-size: calc(13.5px * var(--fs, 1)); color: var(--mute); line-height: 1.4; }
.chatcard .btn { width: auto; align-self: flex-start; margin-top: 6px; padding: 0 16px; }
.chatcard .x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: var(--mute); }