/* EMfit — Telegram Mini App
   Design system ported 1:1 from the iOS app (Constants.swift) */

/* ════════════════════════════════════════════════════════════════
   THEME LAYER — 4 тёплые пастельные темы (Warm Glass)
   Меняются фон, акцент, текст и орбы. Карточки — белый glass во всех.
   ════════════════════════════════════════════════════════════════ */
:root, [data-theme="green"] {        /* 🌿 по умолчанию */
  --bg:#e8f5d8; --accent:#4a8c1c; --ink-base:#253d12;
  --orb-1:#bfe39a; --orb-2:#e6c878; --orb-3:#9fd4b0;
}
[data-theme="blue"] {                /* 🌙 */
  --bg:#dde8fc; --accent:#3458b8; --ink-base:#192848;
  --orb-1:#aec6f5; --orb-2:#e7d6a8; --orb-3:#b9c8f0;
}
[data-theme="bordo"] {               /* 🔥 */
  --bg:#fce8dc; --accent:#c45018; --ink-base:#4a1e08;
  --orb-1:#f3c4a4; --orb-2:#f0d28a; --orb-3:#e8b59a;
}
[data-theme="lavender"] {            /* 🌸 */
  --bg:#f0e4fa; --accent:#8840cc; --ink-base:#300a50;
  --orb-1:#d9bdf0; --orb-2:#f0d8a8; --orb-3:#cdb6ec;
}

:root {
  /* Glass-токены (одинаковы во всех темах) */
  --glass:        rgba(255,255,255,0.62);
  --glass-strong: rgba(255,255,255,0.74);
  --glass-border: rgba(255,255,255,0.75);
  /* Тёплые фиксированные акценты для различения макросов Б/Ж/У */
  --gold: #E0A23B;
  --clay: #C98A4E;

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

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

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

  --rose:      #C2546A;
  --rose-soft: color-mix(in srgb, #C2546A 18%, transparent);
  --online:    #3DAA5C;

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

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

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

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

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

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

/* ── App background gradient (muted khaki ambient) ─────────────── */
#app::before {
  content: "";
  position: absolute;
  inset: -25%;            /* oversized so the drift never reveals edges */
  background:
    radial-gradient(130% 90% at 0% 0%,    rgba(92,99,64,0.42)  0%, transparent 52%),
    radial-gradient(120% 80% at 100% 4%,  rgba(122,128,82,0.32) 0%, transparent 50%),
    radial-gradient(150% 110% at 50% 100%, rgba(74,82,52,0.46)  0%, transparent 60%),
    radial-gradient(110% 70% at 100% 100%, rgba(190,178,140,0.28) 0%, transparent 55%),
    linear-gradient(165deg, #C7CBA8 0%, var(--bg-app) 45%, #A9AE82 100%);
  pointer-events: none;
  z-index: 0;
  animation: bg-drift 22s ease-in-out infinite alternate;
}

/* Soft khaki glow that floats slowly across the top */
#app::after {
  content: "";
  position: absolute;
  top: -16%;
  right: -22%;
  width: 75%;
  height: 46%;
  background: radial-gradient(circle, rgba(138,143,92,0.30) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
  animation: bg-glow 16s ease-in-out infinite alternate;
}

@keyframes bg-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1);        }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}
@keyframes bg-glow {
  0%   { transform: translate3d(0, 0, 0);      opacity: .85; }
  100% { transform: translate3d(-18%, 12%, 0); opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  #app::before, #app::after { animation: none; }
}

.screen {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px);
}

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

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

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

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

/* ── Typography helpers ───────────────────────────────────────── */
.display { font-family: var(--font-serif); font-weight: 400; color: var(--ink); line-height: 1.12; }
.display-i { font-style: italic; }
.eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink3);
}
.muted  { color: var(--ink3); }
.muted2 { color: var(--ink2); }

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

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.card-pad { padding: 18px; }
.section { padding: 0 var(--screen-pad); }
.mt8{margin-top:8px;} .mt10{margin-top:10px;} .mt12{margin-top:12px;}
.mt16{margin-top:16px;} .mt20{margin-top:20px;} .mt24{margin-top:24px;}
.mb4{margin-bottom:4px;} .mb8{margin-bottom:8px;} .mb12{margin-bottom:12px;}
.mb16{margin-bottom:16px;} .mb20{margin-bottom:20px;}
.row { display: flex; align-items: center; }
.row-between { display:flex; align-items:center; justify-content:space-between; }
.gap8{gap:8px;} .gap10{gap:10px;} .gap12{gap:12px;} .gap14{gap:14px;}

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

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

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

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

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

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

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

/* ── Food grid ────────────────────────────────────────────────── */
.food-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.food-card {
  background: var(--bg-card); border-radius: 16px; padding: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  display:flex; flex-direction:column; min-height: 118px;
}
.food-card .emoji { font-size: 26px; }
.food-card .fname { font-size: 14px; font-weight: 700; margin-top: 6px; color: var(--ink); }
.food-card .fmeta { font-size: 11px; color: var(--ink3); margin-top: 4px; line-height: 1.4; }
.food-card .ftag { font-size: 9px; font-weight: 800; letter-spacing: 1px; margin-top: auto; padding-top: 8px; }

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

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

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

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

/* ── Avatar ───────────────────────────────────────────────────── */
.avatar { width:48px; height:48px; border-radius:50%; background:var(--forest);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:20px; flex:0 0 auto; }
.avatar.lg { width:72px; height:72px; font-size:30px; }

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

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

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

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

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

/* ── Subscription banner ──────────────────────────────────────── */
.subcard { padding:16px; border-radius:18px; color:#fff;
  background: linear-gradient(135deg, var(--forest), var(--forest-mid)); }
.subcard .stitle { font-family:var(--font-serif); font-size:18px; }
.subcard .sdays { font-size:13px; opacity:.85; margin-top:4px; }

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

/* ── Weight chart (SVG sparkline) ─────────────────────────────── */
.chart-wrap { padding:16px; background:var(--bg-card); border-radius:18px; box-shadow:0 1px 4px rgba(0,0,0,.05); }

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

/* ── Tab bar ──────────────────────────────────────────────────── */
.tabbar {
  position: absolute; left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  display: flex; padding: 10px 6px;
  background: rgba(253,252,249,0.82);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: 28px;
  border: .5px solid rgba(255,255,255,.5);
  box-shadow: 0 -1px 2px rgba(0,0,0,.06), 0 -4px 20px rgba(0,0,0,.10);
  z-index: 10;
}
.tabbtn {
  flex: 1; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; cursor:pointer; padding: 2px 0;
  -webkit-tap-highlight-color: transparent;
}
.tabbtn .tic {
  width:40px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; color:var(--ink3);
  transition: background-color .25s ease, color .25s ease;
}
.tabbtn .tic .lic {
  width:21px; height:21px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), stroke-width .2s ease;
}
.tabbtn .tlbl { font-size:9px; font-weight:600; color:var(--ink3); transition: color .25s ease; }

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

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

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

/* ════════════════════════════════════════════════════════════════
   AUTH + ONBOARDING FLOW
   ════════════════════════════════════════════════════════════════ */
.auth-wrap, .onb-wrap { padding-bottom: calc(env(safe-area-inset-bottom) + 32px); }

.auth-brand { text-align:center; padding: calc(env(safe-area-inset-top) + 48px) 0 28px; }
.auth-logo {
  width:80px; height:80px; border-radius:50%; background:var(--forest-soft);
  display:flex; align-items:center; justify-content:center; font-size:36px; margin:0 auto 12px;
}
.auth-card {
  margin: 0 16px; padding: 24px 20px 26px; background: var(--bg-card);
  border-radius: 24px; box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.auth-field {
  display:flex; align-items:center; gap:12px; height:52px; padding:0 16px;
  background:var(--bg-soft); border-radius:12px; border:1px solid rgba(218,198,170,.5);
}
.auth-field .af-ic { font-size:15px; opacity:.7; width:20px; text-align:center; }
.auth-field .af-input {
  flex:1; border:none; background:transparent; font-family:var(--font-sans);
  font-size:15px; color:var(--ink); outline:none;
}
.auth-err { display:flex; align-items:center; gap:6px; color:var(--rose); font-size:13px; font-weight:600; margin-top:12px; }
.auth-or { display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--ink3); font-size:12px; }
.auth-or::before, .auth-or::after { content:""; flex:1; height:1px; background:var(--bg-soft); }

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

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

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

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

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

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

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

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

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

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

/* plan card */
.plan-card { padding:20px; border-radius:22px; position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--forest), var(--forest-mid) 55%, #3D5C44); }
.plan-card::after { content:""; position:absolute; width:180px; height:180px; right:-30px; top:-60px;
  border-radius:50%; background: radial-gradient(circle, rgba(188,99,55,.4), transparent 70%); }
.plan-card .pl-eyebrow { font-size:10px; font-weight:700; letter-spacing:1.6px; color:rgba(255,255,255,.6); position:relative; }
.plan-card .pl-stats { display:flex; gap:8px; margin-top:12px; position:relative; }
.plan-card .pl-stat { flex:1; padding:10px; background:rgba(255,255,255,.10); border-radius:12px; }
.plan-card .pl-v { font-family:var(--font-serif); font-size:18px; color:#fff; }
.plan-card .pl-l { font-size:9px; font-weight:700; letter-spacing:.8px; color:rgba(255,255,255,.6); margin-top:3px; }
.plan-card .pl-date { display:flex; align-items:center; gap:8px; margin-top:10px; padding:10px 12px;
  background:rgba(255,255,255,.10); border-radius:12px; position:relative; }

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

/* ════════════════════════════════════════════════════════════════
   REPORT — editable fields, measurements & photo upload
   ════════════════════════════════════════════════════════════════ */
.rep-edit-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.rep-edit .re-label { font-size:12px; font-weight:700; color:var(--ink3); margin-bottom:6px; }
.rep-stepper { padding:5px 6px; }
.rep-stepper button { width:36px; height:36px; border:none; border-radius:9px; cursor:pointer;
  background:var(--bg-soft); font-size:18px; font-weight:700; color:var(--ink); }
.rep-stepper span { flex:1; text-align:center; font-family:var(--font-serif); font-size:17px; font-weight:600; }
.rep-wb .re-label { font-size:12px; font-weight:700; color:var(--ink3); margin-bottom:6px; }
.wb-stars { display:flex; gap:6px; }
.wb-face { flex:1; height:46px; border:none; border-radius:12px; cursor:pointer; font-size:24px;
  background:var(--bg-soft); filter:grayscale(1); opacity:.45; transition:all .15s ease; }
.wb-face.on { background:var(--terra-soft); filter:none; opacity:1; transform:scale(1.08);
  box-shadow:0 2px 8px rgba(188,99,55,.18); }

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

/* ════════════════════════════════════════════════════════════════
   PAYMENT sheet (карта + СБП)
   ════════════════════════════════════════════════════════════════ */
.pay-amount { display:flex; align-items:center; justify-content:space-between; margin-top:12px;
  padding:16px; border-radius:16px; background:var(--forest-soft); }
.pay-tabs { display:flex; gap:8px; }
.pay-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:50px;
  border:1.5px solid var(--bg-soft); border-radius:14px; cursor:pointer; background:var(--bg-card);
  font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--ink2); }
.pay-tab.on { border-color:var(--forest); background:var(--forest-soft); color:var(--forest); }
.pay-tab .pt-ic { font-size:18px; }
.pay-field { display:flex; align-items:center; gap:10px; height:52px; padding:0 14px; margin-top:8px;
  background:var(--bg-card); border:1.5px solid var(--bg-soft); border-radius:14px; }
.pay-field .pf-ic { font-size:16px; opacity:.7; }
.pay-field .pf-input { flex:1; border:none; background:transparent; outline:none;
  font-family:var(--font-sans); font-size:16px; color:var(--ink); letter-spacing:.5px; }
.sbp-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.sbp-bank { display:flex; align-items:center; gap:12px; width:100%; padding:14px; cursor:pointer;
  border:1.5px solid var(--bg-soft); border-radius:14px; background:var(--bg-card);
  font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--ink); text-align:left; }
.sbp-bank.on { border-color:var(--forest); background:var(--forest-soft); }
.sbp-bank .sb-ic { font-size:18px; }
.sbp-bank .sb-name { flex:1; }
.sbp-bank .sb-check { color:var(--forest); font-weight:800; }
.pay-secure { text-align:center; font-size:11px; color:var(--ink3); margin-top:14px; }

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

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

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

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

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

/* «Авто-ввод скоро» hint */
.auto-hint { font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--ink3);
  background: var(--bg-soft); border-radius: 999px; padding: 4px 9px; }

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

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

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

/* Recipe cards + submission */
.recipe-card { display: flex; gap: 12px; padding: 14px; background: var(--bg-card);
  border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.recipe-card .rc-emoji { width: 46px; height: 46px; border-radius: 13px; background: var(--terra-soft);
  display: flex; align-items: center; justify-content: center; font-size: 24px; flex: 0 0 auto; }
.recipe-card .rc-photo { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; flex: 0 0 auto; }
.recipe-card .rc-body { flex: 1; min-width: 0; }
.recipe-card .rc-title {
  font-size: 15px; font-weight: 700; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}
.recipe-card .rc-desc { font-size: 12px; color: var(--ink2); margin-top: 4px; line-height: 1.45; }
.recipe-card .rc-meta { font-size: 11px; font-weight: 700; color: var(--forest); margin-top: 6px; }
.recipe-add { aspect-ratio: auto; width: 130px; height: 110px; }
.recipe-photo { position: relative; width: 130px; height: 130px; border-radius: 14px; overflow: hidden; }
.recipe-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

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

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

/* ════════════════════════════════════════════════════════════════
   WARM GLASS — фон-орбы, glass-поверхности, кольца, переходы, темы
   ════════════════════════════════════════════════════════════════ */
#app { background: var(--bg); transition: background-color .5s ease; }
#app::before, #app::after { display: none !important; }   /* убрали старый градиент */

/* ── Живой фон: три дрейфующих орба ── */
.orbs { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.orb {
  position:absolute; width:64vw; height:64vw; max-width:440px; max-height:440px;
  border-radius:50%; filter: blur(50px); opacity:.55; will-change: transform;
  transition: background-color .5s ease;
}
.orb.o1 { background:var(--orb-1); top:-8%;  left:-14%;  animation:drift1 11s  ease-in-out infinite alternate; }
.orb.o2 { background:var(--orb-2); top:28%;  right:-22%; animation:drift2 9.5s ease-in-out infinite alternate; }
.orb.o3 { background:var(--orb-3); bottom:-12%; left:18%; animation:drift3 12s  ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(8%, 6%)  scale(1.16); } }
@keyframes drift2 { to { transform: translate(-7%,-5%) scale(1.10); } }
@keyframes drift3 { to { transform: translate(5%,-8%)  scale(1.18); } }

/* ── Glass-поверхности ── */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  box-shadow: 0 8px 24px rgba(50,40,15,.08);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: transform .12s ease, background-color .5s ease, border-color .5s ease;
}
/* Only cards that are themselves the tap target get the press-scale — using
   a dedicated class instead of a blanket `.card:active` avoids the whole
   card visually "pressing" when the user taps a button nested inside it
   (e.g. the +/- steppers in the measurements form), since :active bubbles
   to ancestors. */
.card-tap:active { transform: scale(.97); }
.stat, .food-card, .qmeal, .lrow, .broadcast, .chart-wrap,
.onb-card, .onb-feat, .recipe-card, .auth-card, .hero {
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
/* Fallback там, где WebView не тянет backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .stat, .food-card, .qmeal, .lrow, .broadcast, .chart-wrap,
  .onb-card, .onb-feat, .recipe-card, .auth-card, .tabbar, .sheet { background: rgba(255,255,255,.88); }
}

/* Tab bar — усиленный glass */
.tabbar {
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

/* Sheet — glass */
.sheet { background: var(--glass-strong); backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%); }
.sheet-backdrop { background: color-mix(in srgb, var(--ink-base) 28%, transparent); }

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

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

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

/* ── Page transition ── */
@keyframes screen-in { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform:none; } }
.fade-in { animation: screen-in .3s cubic-bezier(.2,.7,.3,1) both; }

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

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

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

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

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

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

/* ── Аккордеон приёмов пищи ── */
.meal-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.meal-acc summary::-webkit-details-marker { display: none; }
.meal-acc .ms-name { font-weight: 700; }
.meal-acc .ms-chev { color: var(--ink3); font-size: 16px; display: inline-block; transition: transform .2s ease; }
.meal-acc[open] .ms-chev { transform: rotate(180deg); }
.meal-acc[open] .meal-items { animation: card-in .22s ease both; }

/* ── Отрисовка линии графика + заливка ── */
.spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spark-draw 1.2s cubic-bezier(.34,1.1,.64,1) forwards; }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
.spark-area { animation: spark-fade .8s ease .35s both; }
@keyframes spark-fade { from { opacity: 0; } to { opacity: 1; } }

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

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

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

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

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

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

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

/* ── Падающий спортинвентарь в фоне (поверх орбов, очень тихий) ── */
.gear {
  position: absolute; top: -6%;
  font-size: 22px; line-height: 1;
  opacity: 0;
  animation: gear-fall linear infinite;
  will-change: transform;
  filter: saturate(.75);                  /* приглушаем, чтобы не спорил с контентом */
}
.gr1  { left: 12%; font-size: 20px; animation-duration: 22s; animation-delay: 0s; }
.gr2  { left: 30%; font-size: 26px; animation-duration: 28s; animation-delay: 6s; }
.gr3  { left: 52%; font-size: 17px; animation-duration: 24s; animation-delay: 12s; }
.gr4  { left: 68%; font-size: 23px; animation-duration: 31s; animation-delay: 3s; }
.gr5  { left: 84%; font-size: 21px; animation-duration: 25s; animation-delay: 16s; }
.gr6  { left: 42%; font-size: 24px; animation-duration: 34s; animation-delay: 21s; }
.gr7  { left: 6%;  font-size: 27px; animation-duration: 30s; animation-delay: 9s; }
.gr8  { left: 22%; font-size: 22px; animation-duration: 26s; animation-delay: 18s; }
.gr9  { left: 60%; font-size: 24px; animation-duration: 29s; animation-delay: 24s; }
.gr10 { left: 76%; font-size: 25px; animation-duration: 32s; animation-delay: 13s; }
.gr11 { left: 92%; font-size: 19px; animation-duration: 27s; animation-delay: 27s; }
.gr12 { left: 37%; font-size: 21px; animation-duration: 33s; animation-delay: 30s; }
@keyframes gear-fall {
  0%   { transform: translate3d(0, -6vh, 0) rotate(0deg);      opacity: 0; }
  8%   { opacity: .15; }
  50%  { transform: translate3d(5vw, 50vh, 0) rotate(160deg);  opacity: .13; }
  92%  { opacity: .09; }
  100% { transform: translate3d(-3vw, 108vh, 0) rotate(320deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gear { display: none; } }

/* ── Шкала-загрузчик: плавное заполнение + бегущий блик ─────────── */
.loadbar {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--bg-soft); overflow: hidden;
}
.loadbar .bar-fill {
  position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--barcol, var(--accent)) 62%, transparent), var(--barcol, var(--accent)));
}
/* Три макро-полосы под калориями (замена колец Б/Ж/У) */
.macro-bars { display: flex; flex-direction: column; gap: 12px; }
.loadbar .bar-fill::after {           /* блик, пробегающий по заполненной части */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  background-size: 220% 100%;
  animation: load-shine 2s ease-in-out infinite;
}
@keyframes load-shine { from { background-position: 130% 0; } to { background-position: -90% 0; } }
.loadbar-cap { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.loadbar-cap .lc-name { font-size: 12px; font-weight: 700; color: var(--ink2); }
.loadbar-cap .lc-pct  { font-size: 11px; font-weight: 700; color: var(--ink3); }
@media (prefers-reduced-motion: reduce) { .loadbar .bar-fill::after { animation: none; opacity: 0; } }

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

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

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

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

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