/* ============================================================
   FitFox — главная (веб-версия по мокапу)
   Эстетика: тёплый органик-люкс «утренний свет».
   Один акцент — тёплый оранжевый. Сериф Playfair + Manrope.
   ============================================================ */

:root {
  /* палитра */
  --orange:        #E8772E;
  --orange-2:      #F49B4E;
  --orange-deep:   #CE5F18;
  --orange-tint:   #FBEAD8;
  --navy:          #234C61;
  --ink:           #4A4239;
  --ink-soft:      #6F6457;
  --muted:         #A99C8C;
  --line:          #EFE3D3;
  --track:         #EFE3D2;

  /* поверхности */
  --card:          #FFFFFF;
  --card-frost:    rgba(255, 255, 255, 0.62);
  --card-warm:     #F8F0E5;

  /* радиусы / тени */
  --r-card: 28px;
  --r-md: 20px;
  --r-sm: 15px;
  --r-pill: 999px;
  --shadow-card: 0 22px 48px -28px rgba(120, 70, 28, .55),
                 0 6px 16px -10px rgba(120, 70, 28, .20);
  --shadow-soft: 0 10px 26px -18px rgba(120, 70, 28, .45);
  --shadow-fab:  0 14px 26px -8px rgba(232, 119, 46, .60);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
html { color-scheme: light; }

button, a, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* skip-link — виден только при фокусе с клавиатуры */
.skip-link {
  position: fixed; left: 50%; top: 10px; transform: translate(-50%, -150%);
  z-index: 99; background: var(--navy); color: #fff; font-weight: 700;
  padding: 10px 18px; border-radius: var(--r-pill); text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(120% 80% at 78% -8%,  #FFF6EA 0%, rgba(255,246,234,0) 55%),
    radial-gradient(90% 60% at 8% 4%,     #FBEBD7 0%, rgba(251,235,215,0) 50%),
    radial-gradient(140% 100% at 50% 120%, #F0DEC6 0%, rgba(240,222,198,0) 60%),
    linear-gradient(170deg, #F7ECDD 0%, #F3E3CF 48%, #F1DFC8 100%);
  background-attachment: fixed;
  min-height: var(--tg-vh, 100dvh);
}

/* мягкое зерно поверх фона — премиальная текстура */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .055;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- каркас «телефон» ---------- */
.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: 18px 18px calc(104px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* появление с лёгким каскадом */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); animation: rise .7s var(--ease) forwards; }
  .reveal:nth-child(1){ animation-delay:.02s } .reveal:nth-child(2){ animation-delay:.08s }
  .reveal:nth-child(3){ animation-delay:.15s } .reveal:nth-child(4){ animation-delay:.22s }
  .reveal:nth-child(5){ animation-delay:.29s } .reveal:nth-child(6){ animation-delay:.36s }
  @keyframes rise { to { opacity:1; transform:none } }
}

/* ---------- верхняя строка ---------- */
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 4px 2px; }
.streak { display:flex; align-items:center; gap:10px; }
.streak .flame {
  width:34px; height:34px; display:grid; place-items:center;
  color: var(--orange);
  filter: drop-shadow(0 4px 8px rgba(232,119,46,.35));
}
.streak b { font-size: 20px; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing:.2px; }
.streak span { display:block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

.icon-btn {
  position: relative; flex: none;
  width: 42px; height: 42px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.7);
  background: var(--card-frost);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink); display: grid; place-items: center;
  cursor: pointer; transition: transform .15s var(--ease), background .2s;
}
.icon-btn:hover { background: #fff; }
.icon-btn:active { transform: scale(.94); }
.icon-btn .dot {
  position: absolute; top: 9px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); border: 2px solid #fff;
}

/* ---------- логотип ---------- */
.brand { text-align: center; display:flex; flex-direction:column; align-items:center; gap: 6px; padding: 2px 0 4px; }
.brand .emblem {
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #FCF1E2 70%, #F6E6D2 100%);
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(232,119,46,.18);
}
.wordmark {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 44px; font-weight: 700; line-height: .95; letter-spacing: .5px;
  text-wrap: balance;
}
.wordmark .fit { color: var(--navy); }
.wordmark .fox { color: var(--orange); }
.tagline {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-size: 15px; color: var(--ink-soft);
  letter-spacing: .3px;
}
.tagline .sparkle { color: var(--orange); font-style: normal; }

/* ---------- карточки ---------- */
.card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255,255,255,.6);
}
.card.frost {
  background: var(--card-frost);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}
.card-head { display:flex; align-items:center; justify-content:space-between; }
.card-head h2 { margin:0; font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing:.2px; text-wrap: balance; }

.pill {
  font: inherit; font-size: 13px; font-weight: 700;
  color: var(--orange); background: transparent;
  border: 1.5px solid rgba(232,119,46,.55); border-radius: var(--r-pill);
  padding: 8px 15px; cursor: pointer;
  transition: transform .15s var(--ease), background .2s, color .2s;
}
.pill:hover { background: var(--orange); color:#fff; border-color: var(--orange); }
.pill:active { transform: scale(.96); }

/* ---------- «Сегодня» ---------- */
.today { padding: 20px; }
.today .body { display:flex; align-items:center; gap: 18px; margin-top: 16px; }

.ring { position: relative; flex: none; width: 126px; height: 126px; }
.ring svg { width:100%; height:100%; transform: rotate(-90deg); }
.ring .track { fill:none; stroke: var(--track); stroke-width: 12; }
.ring .prog  { fill:none; stroke: url(#grad); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ);
  animation: fill 1.1s var(--ease) .25s forwards; }
@keyframes fill { to { stroke-dashoffset: calc(var(--circ) * (1 - var(--p))); } }
@media (prefers-reduced-motion: reduce) {
  .ring .prog { animation: none; stroke-dashoffset: calc(var(--circ) * (1 - var(--p))); }
}
.ring .center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ring .center small { font-size: 11px; color: var(--ink-soft); font-weight: 600; letter-spacing:.4px; }
.ring .center b { font-size: 30px; font-weight: 800; color: var(--ink); line-height:1; margin: 2px 0; font-variant-numeric: tabular-nums; }
.ring .center em { font-size: 11px; color: var(--muted); font-style: normal; }

.macros { flex: 1; display:flex; flex-direction:column; gap: 14px; min-width: 0; }
.macro { display: grid; grid-template-columns: 30px 1fr auto; align-items:center; gap: 10px; }
.macro .mi { width:30px; height:30px; border-radius: 9px; display:grid; place-items:center;
  background: var(--orange-tint); color: var(--orange-deep); }
.macro .ml { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.macro .mv { font-size: 13px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space:nowrap; }
.macro .bar { grid-column: 2 / 4; height: 7px; border-radius: 99px; background: var(--track); overflow:hidden; }
.macro .bar > i { display:block; height:100%; border-radius:99px;
  background: linear-gradient(90deg, var(--orange-2), var(--orange));
  width: var(--p); transform-origin: left;
  animation: grow 1s var(--ease) .35s both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .macro .bar > i { animation:none; } }

/* ---------- быстрые действия ---------- */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 16px 8px; }
.qa { display:flex; flex-direction:column; align-items:center; gap: 8px; padding: 6px 2px;
  background: none; border: 0; cursor: pointer; color: var(--ink-soft);
  font: inherit; transition: transform .15s var(--ease); }
.qa:active { transform: translateY(2px) scale(.97); }
.qa .glyph {
  width: 56px; height: 56px; border-radius: 18px;
  display:grid; place-items:center; color:#fff;
  background: linear-gradient(150deg, var(--orange-2), var(--orange));
  box-shadow: 0 10px 18px -8px rgba(232,119,46,.6);
  transition: filter .2s, box-shadow .2s;
}
.qa:hover .glyph { filter: brightness(1.05); box-shadow: 0 14px 22px -8px rgba(232,119,46,.7); }
.qa span { font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.qa span small { display:block; font-weight: 600; color: var(--muted); font-size: 10.5px; }

/* ---------- мотивация ---------- */
.motivation { position: relative; overflow:hidden; padding: 20px; display:flex; flex-direction:column; align-items:flex-start; gap: 14px; min-height: 132px; }
.motivation .quote {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px; line-height: 1.35; color: var(--ink); max-width: 62%; font-weight: 600;
  text-wrap: pretty; margin: 0;
}
.motivation .quote .sparkle { color: var(--orange); }
.motivation .fox-art { position:absolute; right: -6px; bottom: -6px; width: 168px; height: 130px; pointer-events:none; }
.btn-solid {
  font: inherit; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(150deg, var(--orange-2), var(--orange));
  border: 0; border-radius: var(--r-pill); padding: 10px 18px;
  box-shadow: 0 10px 20px -8px rgba(232,119,46,.6);
  transition: transform .15s var(--ease), filter .2s;
}
.btn-solid:hover { filter: brightness(1.04); }
.btn-solid:active { transform: scale(.96); }

/* ---------- приёмы пищи ---------- */
.meals { padding: 18px 18px 8px; }
.link {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--orange);
  background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  transition: color .2s, gap .2s var(--ease);
}
.link:hover { color: var(--orange-deep); gap: 7px; }
.meal { display:flex; align-items:center; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line); }
.meal:first-of-type { border-top: 0; margin-top: 4px; }
.meal .thumb {
  width: 50px; height: 50px; border-radius: 15px; flex:none;
  display:grid; place-items:center; font-size: 25px;
  background: var(--card-warm); box-shadow: inset 0 0 0 1px rgba(120,70,28,.06);
}
.meal .info { flex:1; min-width:0; }
.meal .info b { display:block; font-size: 15px; font-weight: 800; color: var(--ink); }
.meal .info span { display:block; font-size: 12.5px; color: var(--muted); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meal .kcal { font-size: 13px; font-weight: 800; color: var(--orange-deep); white-space:nowrap; font-variant-numeric: tabular-nums; }
.meal .more { flex:none; width:32px; height:32px; border-radius:50%; border:0; background:none;
  color: var(--muted); cursor:pointer; display:grid; place-items:center; transition: background .2s; }
.meal .more:hover { background: var(--card-warm); }

/* ---------- нижняя навигация ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 440px; z-index: 20;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  background: linear-gradient(180deg, rgba(247,236,221,0) 0%, #F6EBDC 38%);
}
.tabbar .inner {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items:center;
  background: #fff; border-radius: 26px; padding: 10px 8px;
  box-shadow: 0 18px 36px -20px rgba(120,70,28,.5), 0 4px 10px -6px rgba(120,70,28,.18);
  border: 1px solid rgba(255,255,255,.7);
}
.tab { display:flex; flex-direction:column; align-items:center; gap: 4px;
  background:none; border:0; cursor:pointer; color: var(--muted); font: inherit;
  font-size: 10.5px; font-weight: 700; transition: color .2s; padding: 4px 0; }
.tab svg { width: 23px; height: 23px; }
.tab.active { color: var(--orange); }
.tab:hover:not(.active) { color: var(--ink-soft); }
.tab:active { transform: scale(.94); }

.fab-wrap { display:grid; place-items:center; }
.fab {
  width: 60px; height: 60px; border-radius: 50%; margin-top: -34px;
  background: linear-gradient(150deg, var(--orange-2), var(--orange));
  border: 4px solid #F6EBDC; color: #fff; cursor: pointer;
  display:grid; place-items:center; box-shadow: var(--shadow-fab);
  transition: transform .18s var(--ease), filter .2s;
}
.fab:hover { filter: brightness(1.05); }
.fab:active { transform: scale(.93) rotate(90deg); }
.fab svg { width: 26px; height: 26px; }

/* ---------- доступность ---------- */
:where(button, a, [tabindex]):focus-visible {
  outline: 3px solid rgba(35,76,97,.55); outline-offset: 3px; border-radius: 12px;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width: 380px) {
  .wordmark { font-size: 40px; }
  .ring { width: 112px; height: 112px; }
}

/* ============================================================
   Дневник (diary.html)
   ============================================================ */

/* topbar с центральным заголовком */
.topbar--titled { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.topbar--titled .streak { justify-self: start; }
.topbar--titled .icon-btn { justify-self: end; }
.page-title { justify-self: center; margin: 0; font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: .2px; }

/* навигатор даты */
.datenav {
  align-self: center; display: inline-flex; align-items: center; gap: 2px; margin: 0 auto;
  padding: 5px 6px; background: var(--card-frost); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-pill); box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.datenav .dnav { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; cursor: pointer;
  color: var(--ink-soft); display: grid; place-items: center; transition: background .2s, transform .15s var(--ease); }
.datenav .dnav:hover { background: rgba(255,255,255,.7); }
.datenav .dnav:active { transform: scale(.9); }
.datenav .dlabel { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.datenav .dlabel svg { color: var(--orange); flex: none; }

/* сводка дня (кольцо + макросы-колонки) */
.summary { padding: 16px 18px; }
.summary .srow { display: flex; align-items: center; gap: 16px; }
.summary .ring { flex: none; width: 110px; height: 110px; }
.summary .ring .center b { font-size: 27px; }
.macro-cols { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-width: 0; }
.mcol { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; }
.mcol .badge { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: #F4EBDC; color: var(--ink-soft); box-shadow: inset 0 0 0 1px rgba(120,70,28,.07); }
.mcol .ml { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.mcol .mv { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mcol .bar { width: 100%; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.mcol .bar > i { display: block; height: 100%; width: var(--p); border-radius: 99px; background: linear-gradient(90deg, var(--orange-2), var(--orange)); }
.summary .more-row { display: flex; justify-content: flex-end; margin-top: 10px; }

/* карточка приёма пищи */
.meal-card { padding: 14px 16px; }
.mhead { display: flex; align-items: center; gap: 10px; }
.mhead .name { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.mhead .kc { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.add-btn { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--orange-2), var(--orange));
  box-shadow: 0 8px 15px -7px rgba(232,119,46,.65); transition: transform .15s var(--ease), filter .2s; }
.add-btn:hover { filter: brightness(1.05); }
.add-btn:active { transform: scale(.9); }
.meal-card .item { display: flex; align-items: center; gap: 13px; margin-top: 12px; }
.meal-card .item .thumb { width: 54px; height: 54px; border-radius: 15px; flex: none; display: grid; place-items: center;
  font-size: 27px; background: var(--card-warm); box-shadow: inset 0 0 0 1px rgba(120,70,28,.06); }
.meal-card .item .info { flex: 1; min-width: 0; }
.meal-card .item .info b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.meal-card .item .info span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.meal-card .item .more { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: none;
  color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.meal-card .item .more:hover { background: var(--card-warm); }

/* «Добавить приём пищи» — строка-кнопка */
.addmeal { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 16px 18px; font: inherit; cursor: pointer; }
.addmeal .label { font-size: 15px; font-weight: 700; color: var(--ink); }
.addmeal .add-fake { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg, var(--orange-2), var(--orange)); box-shadow: 0 8px 15px -7px rgba(232,119,46,.65); transition: filter .2s; }
.addmeal:hover .add-fake { filter: brightness(1.05); }
.addmeal:active { transform: scale(.99); }

/* вода */
.water { padding: 16px 18px; }
.whead { display: flex; align-items: center; justify-content: space-between; }
.whead h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.whead .cnt { font-size: 13px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.glasses { display: flex; gap: 7px; margin: 14px 0; }
.glass { flex: 1 1 0; min-width: 0; aspect-ratio: 3 / 4; max-height: 48px; background: none; border: 0; padding: 0;
  cursor: pointer; color: var(--track); transition: transform .12s var(--ease); }
.glass svg { width: 100%; height: 100%; display: block; }
.glass .water-fill { fill: #B7DEF4; opacity: 0; transition: opacity .2s; }
.glass .cup { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.glass.full { color: #6FB6E0; }
.glass.full .water-fill { opacity: 1; }
.glass:active { transform: scale(.88); }
.reminder { display: flex; align-items: center; gap: 10px; padding-top: 15px; border-top: 1px solid var(--line); }
.reminder .rlabel { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.reminder .rlabel svg { color: var(--ink-soft); flex: none; }

/* переключатель */
.switch { position: relative; margin-left: auto; display: inline-flex; flex: none; width: 46px; height: 27px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.switch .slider { width: 46px; height: 27px; border-radius: 99px; background: var(--track); transition: background .2s; }
.switch .slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.switch input:checked + .slider { background: var(--orange); }
.switch input:checked + .slider::after { transform: translateX(19px); }
.switch input:focus-visible + .slider { outline: 3px solid rgba(35,76,97,.55); outline-offset: 2px; }

/* нижние табы как ссылки */
.tab { text-decoration: none; }

/* ============================================================
   Статистика (stats.html)
   ============================================================ */

/* сегмент-контрол периода */
.segmented { display: flex; gap: 3px; padding: 4px; border-radius: var(--r-pill);
  background: var(--card-frost); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.segmented button { flex: 1; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px;
  font-weight: 700; color: var(--ink-soft); padding: 9px 4px; border-radius: var(--r-pill); white-space: nowrap;
  transition: color .2s, background .2s; }
.segmented button.active { background: #fff; color: var(--orange); box-shadow: 0 6px 14px -8px rgba(120,70,28,.4); }
.segmented button:active { transform: scale(.97); }

/* карточка статистики + dropdown */
.stat { padding: 16px 18px; }
.stat .shead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat .shead h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.dropdown { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--ink); background: var(--card-warm); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 12px; cursor: pointer; }
.dropdown svg { color: var(--ink-soft); }
.lead { margin-top: 8px; }
.lead .cap { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.lead .big { font-size: 25px; font-weight: 800; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.lead .big small { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.lead .goal { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* графики */
.chart { width: 100%; margin-top: 10px; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.axis-label { fill: var(--muted); font-size: 10px; font-weight: 600; font-family: inherit; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.goal-line { stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .6; }

/* макронутриенты со столбиком и % */
.macrostat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.mstat { padding: 2px 7px; display: flex; flex-direction: column; gap: 9px; border-left: 1px solid var(--line); }
.mstat:first-child { border-left: 0; }
.mstat .top { display: flex; align-items: center; gap: 8px; }
.mstat .ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: #F4EBDC; color: var(--ink-soft); }
.mstat .lbl b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.mstat .lbl span { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.mstat .barwrap { display: flex; align-items: center; gap: 8px; }
.mstat .bar { flex: 1; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.mstat .bar > i { display: block; height: 100%; width: var(--p); border-radius: 99px; background: linear-gradient(90deg, var(--orange-2), var(--orange)); }
.mstat .pct { font-size: 11.5px; font-weight: 800; color: var(--orange-deep); font-variant-numeric: tabular-nums; }

/* две карточки в ряд */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duo > .card { padding: 15px 14px; display: flex; flex-direction: column; }
.act-card .pill.block { margin-top: auto; }

/* расход энергии (пончик + легенда) */
.donut { position: relative; width: 124px; height: 124px; margin: 4px auto 12px; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .dc { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut .dc b { font-size: 21px; font-weight: 800; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.donut .dc span { font-size: 10.5px; color: var(--ink-soft); font-weight: 600; }
.legend { display: flex; flex-direction: column; gap: 10px; }
.legend .li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; }
.legend .li .dot { width: 9px; height: 9px; border-radius: 3px; }
.legend .li .tx b { display: block; font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.legend .li .tx span { display: block; font-size: 10.5px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.legend .li .lp { font-size: 11.5px; font-weight: 800; color: var(--muted); }

/* активность (бары) */
.submeta { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0; }
.submeta .fl { color: var(--orange); flex: none; margin-top: 2px; }
.submeta b { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.submeta span { display: block; font-size: 10.5px; color: var(--ink-soft); font-weight: 600; }
.bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; height: 74px; margin: 10px 0 8px; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bars .b .col { width: 100%; max-width: 11px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--orange-2), var(--orange)); }
.bars .b .bl { font-size: 9px; color: var(--muted); font-weight: 600; }

.pill.block { display: flex; width: 100%; justify-content: center; font-size: 12px; white-space: nowrap; padding-inline: 10px; }

/* достижения */
.ach-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.ach { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.ach .ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.ach .ic.flame { background: linear-gradient(150deg, #FBE3CE, #F6C49B); color: var(--orange-deep); box-shadow: 0 8px 16px -10px rgba(232,119,46,.6); }
.ach .ic.trophy { background: linear-gradient(150deg, #FBE3CE, #F6C49B); color: var(--orange-deep); box-shadow: 0 8px 16px -10px rgba(232,119,46,.6); }
.ach .ic.scale { background: #ECE5DB; color: #AA9D8C; }
.ach .ic.water { background: #DCEEF8; color: #5FA8D6; }
.ach .av { font-size: 13px; font-weight: 800; color: var(--ink); }
.ach .al { font-size: 10.5px; color: var(--muted); font-weight: 600; line-height: 1.2; }

/* динамика веса */
.weight-card { padding: 16px 18px; }
.weight-card .whead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.weight-card .whead h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.wval { text-align: right; flex: none; }
.wval b { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.wval .delta { display: block; font-size: 12px; font-weight: 700; color: #3FA66B; margin-top: 1px; }
.wfoot { display: flex; justify-content: flex-end; margin-top: 6px; }