/* ============================================================
   NutriBot — Design System 2.0
   LIGHT theme primary (warm white), dark via prefers-color-scheme.
   Ported from nutribot/web/static/mockup/mockup.css — owner-approved.
   ============================================================ */

/* ── Design tokens (LIGHT — primary) ───────────────────────── */
:root {
  /* Backgrounds */
  --bg:          #FAFAF8;
  --bg-card:     #FFFFFF;
  --bg-muted:    #F4F4F2;

  /* Text */
  --text-primary:   #111110;
  --text-secondary: #6B6B6B;
  --text-muted:     #9CA3AF;

  /* Brand / data colors */
  --green:          #16A34A;   /* calories primary */
  --green-light:    #DCFCE7;
  --green-ring:     #22C55E;
  --protein:        #E0476B;   /* coral — matches ring/meal usage, warmer than berry */
  --protein-light:  #FEE2E2;
  --fat:            #D97706;   /* amber */
  --fat-light:      #FEF3C7;
  --carb:           #0284C7;   /* sky */
  --carb-light:     #E0F2FE;

  /* UI chrome */
  --border:         #E5E7EB;
  --border-strong:  #D1D5DB;
  --radius-card:    16px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --nav-h:          72px;
  --safe-bottom:    env(safe-area-inset-bottom, 0px);

  /* Shadows */
  --shadow-card:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-fab:     0 4px 16px rgba(22,163,74,.40);
  --shadow-nav:     0 -1px 0 var(--border);

  /* Transitions */
  --t-fast: 150ms ease-out;
  --t-mid:  250ms ease-out;
  --t-slow: 350ms cubic-bezier(.32,.72,0,1);

  /* Aliases for legacy templates */
  --accent:          var(--green-ring);
  --accent-dim:      rgba(34,197,94,.15);
  --accent-muted:    rgba(34,197,94,.08);
  --surface:         var(--bg-card);
  --card:            var(--bg-card);
  --card-hover:      var(--bg-muted);
  --danger:          #F85149;
  --danger-dim:      rgba(248,81,73,.12);
  --color-protein:   var(--protein);
  --color-fat:       var(--fat);
  --color-carb:      var(--carb);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ── DARK mode overrides ──────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:          #0D1117;
  --bg-card:     #1C2128;
  --bg-muted:    #161B22;

  --text-primary:   #F0F6FC;
  --text-secondary: #8B949E;
  --text-muted:     #6E7681;

  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);

  --shadow-card:   0 1px 3px rgba(0,0,0,.4), 0 0 0 1px var(--border);
  --shadow-nav:    0 -1px 0 var(--border), 0 -8px 24px rgba(0,0,0,.3);

  --accent-dim:    rgba(34,197,94,.12);
  --accent-muted:  rgba(34,197,94,.06);
  --danger-dim:    rgba(248,81,73,.12);

  /* Macro badge backgrounds — muted tint on dark surfaces */
  --protein-light: rgba(224,71,107,.18);
  --fat-light:     rgba(217,119,6,.18);
  --carb-light:    rgba(2,132,199,.18);

  --surface:  #161B22;
  --card:     #1C2128;
  --card-hover: #21262D;
}

/* ── Reset / base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* a11y: visible keyboard focus ring (WCAG 2.4.7). :focus-visible fires only for
   keyboard/programmatic focus, so mouse clicks stay ring-free. Inputs with their
   own focus styling (box-shadow/border) keep it via higher specificity. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

html {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  background: var(--bg);
}

a { color: var(--green); text-decoration: none; }
a:hover { opacity: 0.85; }

button { cursor: pointer; font-family: var(--font); background: none; border: none; }
canvas { display: block; max-width: 100%; }

/* ── Inline SVG icons (replaced emoji) ─────────────────────── */
.ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.inline-ic { color: var(--text-muted); vertical-align: -3px; }

/* ── htmx swap fade ─────────────────────────────────────── */
.htmx-swapping { opacity: 0; transition: opacity .15s ease; }
.htmx-settling  { opacity: 1; transition: opacity .15s ease; }

/* ── Shell + phone frame (desktop centers an app-frame; mobile = full-bleed) ── */
@media (min-width: 480px) {
  body {
    background: #E8E8E4;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 16px;
  }
}

.app-frame {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 480px) {
  .app-frame {
    width: 412px;
    height: min(880px, calc(100dvh - 48px));
    border-radius: 40px;
    box-shadow: 0 0 0 10px #1a1a1a, 0 0 0 11px #2a2a2a, 0 24px 70px rgba(0,0,0,.42);
  }
}

/* ── Main layout: scroll area inside the frame ───────────────── */
main.container {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(var(--nav-h) + var(--safe-bottom) + 16px);
}
main.container::-webkit-scrollbar { display: none; }

/* App screens (today/progress/chat) self-pad their sections — flush the container */
main.container.flush { padding: env(safe-area-inset-top, 0px) 0 calc(var(--nav-h) + var(--safe-bottom) + 8px); }

/* ══════════════════════════════════════════════════════════
   BOTTOM NAV
   ══════════════════════════════════════════════════════════ */
.bottom-nav {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(250,250,248,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 0;
  z-index: 50;
  touch-action: manipulation;
}

[data-theme="dark"] .bottom-nav {
  background: rgba(22,27,34,.92);
}

/* Nav links (Сегодня, Прогресс, Чат, Профиль) */
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 6px 8px calc(var(--safe-bottom) + 6px);
  min-height: 44px;
  border-radius: 12px;
  transition: color var(--t-fast), background var(--t-fast);
}

.bottom-nav a svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--t-fast);
}

.bottom-nav a.active {
  color: var(--green);
}

.bottom-nav a.active svg { stroke: var(--green); }

.bottom-nav a:hover {
  color: var(--text-secondary);
  background: var(--accent-muted);
}

/* Central FAB slot */
.nav-fab-slot {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(var(--safe-bottom));
}

/* nav-fab: the «+» green pill, raised above nav */
.nav-fab {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 28px;
  background: linear-gradient(145deg, #22C55E, #16A34A);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-fab);
  transform: translateY(-8px);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  z-index: 51;
  flex-shrink: 0;
  padding: 0;
}

.nav-fab:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 20px rgba(22,163,74,.50);
}

.nav-fab:active {
  transform: translateY(-6px) scale(.94);
  box-shadow: 0 2px 8px rgba(22,163,74,.35);
}

.nav-fab svg {
  width: 26px;
  height: 26px;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══════════════════════════════════════════════════════════
   SHEET OVERLAY (backdrop)
   ══════════════════════════════════════════════════════════ */
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid);
}

.nb-overlay--visible {
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════════════════════════
   BOTTOM SHEET
   ══════════════════════════════════════════════════════════ */
.bottom-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(var(--safe-bottom) + 32px);
  z-index: 100;
  transform: translateY(100%);
  transition: transform var(--t-slow);
  box-shadow: 0 -4px 32px rgba(0,0,0,.12);
  max-height: 86%;
  overflow-y: auto;
}

.bottom-sheet::-webkit-scrollbar { display: none; }

.nb-sheet--open {
  transform: translateY(0);
}

.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 0 auto 16px;
}

/* Sheet close button — retained for JS compatibility */
.nb-sheet-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}

/* Sheet title */
.sheet-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -.3px;
  color: var(--text-primary);
}

/* Sheet actions grid (new 2-col layout) */
.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.sheet-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border-radius: var(--radius-card);
  background: var(--bg-muted);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t-fast);
}

.sheet-action-btn:active,
.sheet-action-btn:hover {
  transform: scale(.98);
  background: var(--bg-card);
  border-color: var(--green);
}

/* Icon squares inside sheet buttons */
.sheet-action-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.icon-photo   { background: linear-gradient(135deg, #22C55E, #16A34A); }
.icon-text    { background: linear-gradient(135deg, #38BDF8, #0284C7); }
.icon-workout { background: linear-gradient(135deg, #E0476B, #BE185D); }
.icon-weight  { background: linear-gradient(135deg, #F59E0B, #D97706); }

/* Result area */
.nb-result-area { margin-top: 8px; }

/* ── Draft card action buttons ─────────────────────────── */
.nb-card-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px 14px;
}

.nb-btn {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity .15s;
}

.nb-btn:hover { opacity: .85; }

.nb-btn--confirm,
.nb-btn--confirm-wo { background: var(--green); color: white; }

.nb-btn--edit {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}

.nb-misses {
  font-size: 12px;
  color: var(--text-muted);
  padding: 0 14px 6px;
}

/* Loading state */
.nb-loading {
  font-size: 14px;
  color: var(--text-muted);
  padding: 28px 14px;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════
   RECOGNITION CARD (inside the add-sheet)
   ══════════════════════════════════════════════════════════ */
.recog-card { display: flex; flex-direction: column; }

.recog-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
}
.recog-eyebrow--wo { color: var(--protein); }

.recog-hero { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.recog-kcal {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.recog-unit { font-size: 15px; font-weight: 600; color: var(--text-muted); }

.recog-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 2px;
}
.recog-macro {
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.recog-dot { width: 8px; height: 8px; border-radius: 50%; }
.recog-dot.tone-protein { background: var(--protein); }
.recog-dot.tone-fat     { background: var(--fat); }
.recog-dot.tone-carb    { background: var(--carb); }
.recog-macro-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.recog-macro-lbl { font-size: 11px; color: var(--text-muted); font-weight: 500; }

.recog-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  border-top: 1px solid var(--border);
}
.recog-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--border);
}
.recog-item-name { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.35; }
.recog-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.recog-card .nb-misses { padding: 10px 2px 0; }

.recog-est-tag {
  display: inline-block;
  margin-left: 5px;
  color: var(--fat);
  font-weight: 700;
  font-size: 13px;
}
.recog-est-note {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 2px 0;
  line-height: 1.4;
}

.recog-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 0 2px;
  background: var(--bg-card);
}
.recog-actions .nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 12px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
}
.recog-actions .nb-btn--confirm,
.recog-actions .nb-btn--confirm-wo { flex: 1.5; }
.recog-actions .nb-btn--edit { flex: 1; }

/* ══════════════════════════════════════════════════════════
   DAY PAGE — navigation header
   ══════════════════════════════════════════════════════════ */
.day-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.day-nav a,
.day-nav span {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
  min-height: 44px; min-width: 44px;
}

.day-nav a:hover {
  background: var(--accent-muted);
  color: var(--green);
}

.day-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.day-nav h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.01em;
}

/* ── Today header (greeting + date) ────────────────────── */
.today-header {
  padding: 16px 16px 4px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.today-header-left { min-width: 0; }

.today-date {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .2px;
  text-transform: capitalize;
}

.today-greeting {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
  letter-spacing: -.3px;
}

/* ── Streak badge ──────────────────────────────────────── */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.streak-badge svg { color: #F59E0B; flex-shrink: 0; }

[data-theme="dark"] .streak-badge {
  background: rgba(245,158,11,.18);
  color: #FCD34D;
}

/* ══════════════════════════════════════════════════════════
   KCAL RING HERO  (mockup-aligned: .ring-section / .ring-main-*)
   ══════════════════════════════════════════════════════════ */
.ring-section {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

.ring-main-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

.ring-main-svg {
  transform: rotate(-90deg);
  display: block;
}

.ring-track      { fill: none; stroke: var(--border); stroke-width: 14; }
.ring-track-mini { fill: none; stroke: var(--border); stroke-width: 5; }

.ring-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}

.ring-fill-cal       { stroke: var(--green-ring); }
.ring-fill-cal.over  { stroke: var(--danger); }
.ring-fill-protein   { stroke: #E0476B; stroke-width: 5; }
.ring-fill-fat       { stroke: #F59E0B; stroke-width: 5; }
.ring-fill-carb      { stroke: #38BDF8; stroke-width: 5; }

.ring-main-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.ring-main-value {
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.ring-main-of { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.ring-main-remain { font-size: 11px; color: var(--green); font-weight: 600; }

/* ── Streak strip (Cal AI: weekday checkmarks) ─────────────── */
.streak-strip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin: 0 16px 4px;
}

.streak-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.streak-flame-big { color: #F59E0B; display: inline-flex; align-items: center; }
.streak-count { font-size: 17px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.streak-cap { font-size: 13px; color: var(--text-muted); font-weight: 500; }

.streak-week { display: flex; justify-content: space-between; }

.streak-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.streak-day-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }

.streak-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--bg-muted);
  color: var(--text-muted);
  border: 2px solid transparent;
  transition: background var(--t-fast);
}

.streak-day.done .streak-dot { background: var(--green); color: #fff; }
.streak-day.today .streak-dot { border-color: var(--green); }
.streak-day.future .streak-dot,
.streak-day.future .streak-day-label { opacity: .45; }

/* Dark: future streak dots need visible contrast against #1C2128 bg */
[data-theme="dark"] .streak-day.future .streak-dot {
  background: rgba(255,255,255,.08);
  opacity: 1;
}
[data-theme="dark"] .streak-day.future .streak-day-label { opacity: .4; }

/* ── Calorie hero (Cal AI: big number left + arc right) ─────── */
.ring-section { display: block; padding: 8px 16px 4px; }

.kcal-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kcal-hero-left { display: flex; flex-direction: column; min-width: 0; }

.kcal-hero-num {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.kcal-hero-unit { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 4px; }

.kcal-hero-rem {
  font-size: 14px;
  color: var(--green);
  font-weight: 700;
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
}
.kcal-hero-rem.over { color: var(--danger); }

.kcal-hero-of { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.kcal-hero-ring { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.kcal-arc-svg { transform: rotate(-90deg); display: block; }
.kcal-arc-svg .ring-track { stroke-width: 8; }
.kcal-arc-svg .ring-fill { stroke-width: 8; }
.kcal-arc-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F59E0B;
}

/* ══════════════════════════════════════════════════════════
   MACRO MINI-RINGS  (mockup-aligned: .macro-row / .macro-item)
   ══════════════════════════════════════════════════════════ */
.macro-row {
  display: flex;
  gap: 10px;
  padding: 8px 16px 4px;
}

.macro-item {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mini-ring-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
}

.mini-ring-svg {
  transform: rotate(-90deg);
  display: block;
}

.mini-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.macro-text { text-align: center; }

.macro-text .macro-name,
.macro-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.macro-status {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.macro-status.over { color: var(--fat); }

/* legacy */
.macro-goal {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   SECTION HEADER
   ══════════════════════════════════════════════════════════ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding: 0 2px;
}

.section-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
}

.section-count {
  font-size: 12px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   MEAL CARDS
   ══════════════════════════════════════════════════════════ */
.meals-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding: 0 16px;
}

/* gap BETWEEN individual meal cards (they live inside .meal-cards) */
.meal-cards { display: flex; flex-direction: column; gap: 12px; }

/* Day meal card — flex row: emoji · body · right (mockup) */
.meal-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 16px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.meal-card:active { transform: scale(.99); }
.meal-card:hover { background: var(--bg-muted); }

.meal-emoji {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  border-radius: 14px;
}

.meal-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.meal-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.meal-time-badge {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-light);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

[data-theme="dark"] .meal-time-badge {
  background: var(--accent-dim);
  color: var(--green-ring);
}

.meal-right {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.meal-cal { display: flex; align-items: baseline; gap: 3px; line-height: 1; }

.meal-kcal {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.meal-cal-label { font-size: 11px; color: var(--text-muted); }

.meal-macro {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.meal-macro span {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}

.meal-macro .mp { color: var(--protein); background: var(--protein-light); }
.meal-macro .mf { color: var(--fat); background: var(--fat-light); }
.meal-macro .mc { color: var(--carb); background: var(--carb-light); }

.meal-del {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  min-width: 32px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color var(--t-fast), background var(--t-fast);
  padding: 0;
}

.meal-del:hover {
  color: var(--danger);
  background: var(--danger-dim);
}

.meal-del svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Draft card (JS-rendered in sheet/chat) — block layout, not the day-card flex row */
.meal-card.nb-draft-card {
  display: block;
  padding: 0;
  overflow: hidden;
}

.meal-card.nb-draft-card header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
}

.meal-card.nb-draft-card .meal-kcal { flex: 1; font-size: 15px; }

.meal-items {
  list-style: none;
  padding: 8px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
}

.meal-items li {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Today bottom content (Баланс дня + Спорт сегодня) ──────── */
.today-extra { padding: 0 16px; margin-top: 18px; }

.balance-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

.balance-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-muted);
}

.balance-seg { height: 100%; }
.balance-seg.seg-p { background: var(--protein); }
.balance-seg.seg-f { background: var(--fat); }
.balance-seg.seg-c { background: var(--carb); }

.balance-legend { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.balance-legend span {
  font-size: 12px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.balance-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.balance-legend .dot-p { background: var(--protein); }
.balance-legend .dot-f { background: var(--fat); }
.balance-legend .dot-c { background: var(--carb); }

.balance-tip {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.balance-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 6px 0; }

.sport-today-card,
.sport-today-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  text-decoration: none;
  margin-bottom: 10px;
}

.sport-today-icon {
  font-size: 24px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  border-radius: 12px;
  flex-shrink: 0;
}
.sport-today-icon.muted { opacity: .6; }
.sport-today-body { flex: 1; min-width: 0; }
.sport-today-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.sport-today-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sport-today-icon svg { color: var(--text-secondary); }

.meal-emoji svg { color: var(--text-secondary); }
.balance-tip .tip-ic { color: var(--fat); margin-right: 5px; vertical-align: -3px; }
.balance-tip .tip-ic.ok { color: var(--green); }

/* ── Skeleton shimmer ──────────────────────────────────── */
.skeleton-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

[data-theme="dark"] .skeleton-card::after {
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  background-size: 200% 100%;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.sk-line { height: 12px; border-radius: 6px; background: var(--border-strong); margin-bottom: 8px; }
.sk-wide   { width: 70%; }
.sk-narrow { width: 45%; }

/* ── Empty state ─────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
}

.empty-state p { font-size: 15px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════
   CHIPS
   ══════════════════════════════════════════════════════════ */
.chip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.chip-green { background: var(--green-light); color: var(--green); }

.chip-btn {
  white-space: nowrap;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-card);
  transition: all var(--t-fast);
  cursor: pointer;
}

.chip-btn:active {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════
   WEEK PAGE
   ══════════════════════════════════════════════════════════ */
.week-header {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
  letter-spacing: -.02em;
}

.week-chart-wrap {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 16px;
}

.stat-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.stat-chip {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 14px 10px;
  text-align: center;
}

.stat-chip-val {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.stat-chip-lbl {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   PROFILE PAGE
   ══════════════════════════════════════════════════════════ */
.profile-header {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: -.02em;
}

/* ── Section title (shared across profile sections) ───────── */
.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin: 22px 2px 10px;
}

/* ── Hero: goal + identity ─────────────────────────────────── */
.profile-hero {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 18px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--green-ring), var(--green));
  box-shadow: 0 4px 12px rgba(22,163,74,.30);
}

.profile-hero-info { min-width: 0; }

.profile-hero-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
}

.profile-hero-goal {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  line-height: 1.15;
  margin: 2px 0 8px;
}

.profile-hero-meta { display: flex; flex-wrap: wrap; gap: 6px; }

.profile-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-muted);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.profile-hero-chip .chip-ic { color: var(--green); }

/* ── Daily norms — kcal hero + macro ring cards ───────────── */
.norm-hero-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}

.norm-hero-ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.norm-hero-ring .kcal-arc-svg .ring-track { stroke-width: 7; }
.norm-hero-ring .kcal-arc-svg .ring-fill  { stroke-width: 7; }

.norm-hero-text { display: flex; flex-direction: column; }
.norm-hero-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.norm-hero-lbl { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 5px; }

/* Macro balance — donut showing diet composition (БЖУ split) */
.macro-balance-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 18px 20px;
  margin-bottom: 14px;
}

.macro-donut { position: relative; flex-shrink: 0; }
.macro-donut svg { display: block; }
.macro-donut-track { fill: none; stroke: var(--bg-muted); stroke-width: 14; }
.macro-seg { fill: none; stroke-width: 14; }
.macro-seg--protein { stroke: var(--protein); }
.macro-seg--fat     { stroke: var(--fat); }
.macro-seg--carb    { stroke: var(--carb); }

.macro-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.macro-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.macro-legend-row { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.macro-legend-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.macro-dot--protein { background: var(--protein); }
.macro-dot--fat     { background: var(--fat); }
.macro-dot--carb    { background: var(--carb); }
.macro-legend-label { color: var(--text-secondary); flex: 1; }
.macro-legend-val   { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.macro-legend-pct {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}

/* ── Parameters — stat cards ──────────────────────────────── */
.param-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.param-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.param-card-ic {
  color: var(--text-muted);
  display: flex;
  margin-bottom: 4px;
}

.param-card-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
}

.param-card-lbl {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.profile-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 10px 2px 0;
  line-height: 1.5;
}

/* ── Память — header row + facts ──────────────────────────── */
.facts-head-row { display: flex; align-items: center; gap: 8px; }
.facts-head-row .section-title { margin-bottom: 4px; margin-top: 10px; }

.facts-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-light);
  border-radius: 10px;
  padding: 1px 8px;
  min-width: 20px;
  text-align: center;
}
[data-theme="dark"] .facts-count { background: var(--accent-dim); color: var(--green-ring); }

.facts-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 2px 12px;
}

.fact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fact-item {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fact-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--green);
  background: var(--green-light);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* category accents */
.fact-cat--allergy     { color: var(--protein); background: var(--protein-light); }
.fact-cat--restriction { color: var(--fat);     background: var(--fat-light); }
.fact-cat--preference  { color: var(--carb);    background: var(--carb-light); }

[data-theme="dark"] .fact-cat              { background: var(--accent-dim); color: var(--green-ring); }
[data-theme="dark"] .fact-cat--allergy     { background: rgba(224,71,107,.18); color: #F472A0; }
[data-theme="dark"] .fact-cat--restriction { background: rgba(217,119,6,.18);  color: #FBBF24; }
[data-theme="dark"] .fact-cat--preference  { background: rgba(2,132,199,.18);  color: #56B8F0; }

.fact-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.4;
}

.facts-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 28px 16px;
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
}

.facts-empty-ic {
  display: inline-flex;
  color: var(--text-muted);
  opacity: .6;
  margin-bottom: 8px;
}

/* ── Settings card + theme toggle ──────────────────────── */
.settings-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 4px 16px;
  margin-bottom: 6px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.settings-label { font-size: 15px; color: var(--text-primary); font-weight: 500; }

.theme-toggle {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--border-strong);
  position: relative;
  transition: background var(--t-fast);
  flex-shrink: 0;
}

.theme-toggle[aria-checked="true"] { background: var(--green); }

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--t-fast);
}

.theme-toggle[aria-checked="true"] .theme-toggle-knob { transform: translateX(20px); }

/* ── Settings: profile header row (title + gear button) ─── */
.profile-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.profile-header-row .profile-header { margin-bottom: 0; }

.profile-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.profile-settings-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-muted);
  opacity: 1;
}

/* ── Settings: editable form fields ─────────────────────── */
.settings-form {
  padding: 12px 0 4px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.settings-field:last-of-type { border-bottom: none; }

.settings-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.settings-field--third {
  padding: 0;
  border-bottom: none;
}

.settings-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.settings-input {
  width: 100%;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 15px;
  font-family: var(--font);
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}

.settings-input:focus {
  border-color: var(--green-ring);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

[data-theme="dark"] .settings-input {
  background-color: var(--bg-muted);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.settings-save-btn {
  display: block;
  width: 100%;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 14px;
  cursor: pointer;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.settings-save-btn:hover  { opacity: .88; }
.settings-save-btn:active { transform: scale(.97); }
.settings-save-btn:disabled { opacity: .55; cursor: default; }

.settings-save-status {
  font-size: 13px;
  font-weight: 500;
  min-height: 18px;
  margin-top: 6px;
  text-align: center;
}
.settings-save-status--ok  { color: var(--green); }
.settings-save-status--err { color: var(--danger); }

.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.settings-label-sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
}

.settings-lang-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-muted);
  border-radius: 20px;
  padding: 4px 12px;
  border: 1px solid var(--border);
}

/* ── Segment control (settings: goal / activity) ─────────── */
/* Shares .seg-btn with the progress segment-switch,
   but .seg-control has no side margin — it lives inside a .settings-field */
.seg-control {
  display: flex;
  background: var(--bg-muted);
  border-radius: 10px;
  padding: 3px;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════ */
.login-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text-primary);
}

.login-logo {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16A34A, #22C55E);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: var(--shadow-fab);
}

.login-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 8px;
  text-align: center;
  color: var(--text-primary);
}

.login-hint {
  font-size: 15px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  max-width: 260px;
  margin-bottom: 32px;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: white;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 32px;
  min-height: 50px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: .01em;
  transition: opacity .15s, transform .12s;
}

.login-btn:hover { opacity: .9; color: white; }
.login-btn:active { transform: scale(.97); }

/* ══════════════════════════════════════════════════════════
   NO PROFILE PAGE
   ══════════════════════════════════════════════════════════ */
.no-profile-wrap {
  text-align: center;
  padding: 40px 24px;
}

.no-profile-wrap h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.no-profile-wrap p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Utility ─────────────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* ══════════════════════════════════════════════════════════
   SPORT PAGE
   ══════════════════════════════════════════════════════════ */
.sport-header {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: -.02em;
}

.sport-section {
  margin-bottom: 20px;
}

.sport-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.sport-empty p {
  font-size: 15px;
  line-height: 1.6;
}

.sport-empty code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--green);
}

/* Day accordions */
.day-accordion {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  overflow: hidden;
}

.day-accordion-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--t-fast);
}

.day-accordion-summary:hover { background: var(--bg-muted); }
.day-accordion-summary::-webkit-details-marker { display: none; }

.day-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 80px;
}

.day-focus {
  font-size: 13px;
  color: var(--green);
  flex: 1;
}

.day-accordion-body {
  padding: 6px 14px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exercise-row { padding: 4px 0; }

.exercise-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.exercise-sets {
  font-size: 13px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.exercise-why {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Workout list cards */
.workouts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workout-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 12px 14px;
}

.workout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.workout-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.workout-tonnage {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-light);
  border-radius: 99px;
  padding: 2px 10px;
}

[data-theme="dark"] .workout-tonnage {
  background: var(--accent-dim);
  color: var(--green-ring);
}

.workout-exercises {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Charts */
.chart-wrap {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 14px;
}

.chart-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 16px;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.chart-box {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.chart-box-md { height: 160px; }
.chart-box-sm { height: 100px; }
.chart-box-lg { height: 210px; }

/* Average-per-period mini stats (Прогресс · Питание) */
.avg-stats { display: flex; gap: 8px; margin-bottom: 14px; }
.avg-stat {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 10px 4px;
  text-align: center;
}
.avg-stat-val {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.avg-stat-val.avg-p { color: var(--protein); }
.avg-stat-val.avg-f { color: var(--fat); }
.avg-stat-val.avg-c { color: var(--carb); }
.avg-stat-lbl {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.chart-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Sport catalog link */
.sport-catalog-link {
  margin-top: 8px;
  text-align: center;
}

.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}

.btn-secondary:hover {
  background: var(--accent-muted);
  color: var(--green);
}

/* Prominent catalog link card (Спорт → справочник) */
.catalog-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin: 4px 0 0;
  text-decoration: none;
  transition: background var(--t-fast), transform .1s;
}
.catalog-card:hover { background: var(--bg-muted); }
.catalog-card:active { transform: scale(.99); }
.catalog-card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-light);
  color: var(--green);
}
[data-theme="dark"] .catalog-card-icon { background: var(--accent-dim); color: var(--green-ring); }
.catalog-card-body { flex: 1; min-width: 0; }
.catalog-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.catalog-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.catalog-card-chevron { color: var(--text-muted); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   EXERCISE CATALOG
   ══════════════════════════════════════════════════════════ */
.catalog-header { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.catalog-header .sport-header { margin-bottom: 0; }
.catalog-back {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  margin-left: -8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.catalog-back:hover { color: var(--green); background: var(--accent-muted); }

/* ── Exercise catalog filter (2.0 redesign) ─────────────── */
.exercises-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

/* Search + filter-button row */
.ex-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 15px;
  font-family: var(--font);
  outline: none;
  transition: border-color var(--t-fast);
}

.search-input:focus { border-color: var(--green-ring); outline: none; }

/* "Фильтры" button */
.ex-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 44px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  position: relative;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}

.ex-filter-btn:hover  { border-color: var(--green-ring); color: var(--green); }
.ex-filter-btn:active { background: var(--accent-muted); }

.ex-filter-btn-label { line-height: 1; }

/* Active-filter count badge — hidden by default, shown via .ex-filter-badge--visible */
.ex-filter-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}

.ex-filter-badge--visible {
  display: flex;
}

/* Active filter chips row (below search) */
.ex-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0; /* collapses when empty */
}

.ex-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 12px;
  background: var(--accent-dim);
  border: 1px solid var(--green);
  border-radius: 20px;
  color: var(--green);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--t-fast);
}

.ex-active-chip:hover { background: var(--accent-muted); }

/* ── Filter bottom sheet ─────────────────────────────────── */
.ex-filter-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid);
}

.ex-filter-backdrop--visible {
  opacity: 1;
  pointer-events: all;
}

.ex-filter-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(var(--safe-bottom) + 24px);
  z-index: 210;
  transform: translateY(100%);
  transition: transform var(--t-slow);
  box-shadow: 0 -4px 40px rgba(0,0,0,.15);
  max-height: 82vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ex-filter-sheet::-webkit-scrollbar { display: none; }

.ex-filter-sheet--open { transform: translateY(0); }

/* Sheet body */
.ex-filter-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
  padding-bottom: 16px;
}

/* Chip group */
.ex-chip-group-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

[data-theme="dark"] .ex-chip-group-label { color: var(--text-secondary); }

.ex-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ex-chip {
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.ex-chip:hover {
  border-color: var(--green-ring);
  color: var(--green);
}

.ex-chip--active {
  background: var(--accent-dim);
  border-color: var(--green);
  color: var(--green);
  font-weight: 600;
}

/* Sheet footer */
.ex-filter-sheet-footer {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}

.ex-filter-footer-btn {
  flex: 1;
  padding: 13px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--t-fast), opacity var(--t-fast);
  border: none;
}

.ex-filter-footer-btn--ghost {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.ex-filter-footer-btn--ghost:hover { background: var(--bg); }

.ex-filter-footer-btn--primary {
  background: var(--green);
  color: #fff;
}

.ex-filter-footer-btn--primary:hover { opacity: .88; }
.ex-filter-footer-btn--primary:active { opacity: .80; }

.exercises-count {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.exercises-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.exercise-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}

.exercise-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  transform: translateY(-2px);
}
.exercise-card:active {
  transform: scale(.97);
  box-shadow: var(--shadow-card);
}

.exercise-card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-muted);
  position: relative;
}

.exercise-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-mid);
}
.exercise-card:hover .exercise-card-photo img {
  transform: scale(1.04);
}

.exercise-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
}

.exercise-photo-placeholder svg {
  width: 36px; height: 36px;
  stroke: var(--border-strong);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exercise-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.exercise-card-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* muscle hint — small labeled pill */
.exercise-card-muscle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #15803D; /* green-700: 4.55:1 on white — WCAG AA at 10px bold */
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 2px;
}
.exercise-card-muscle::before {
  content: "";
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #15803D;
  flex-shrink: 0;
}
[data-theme="dark"] .exercise-card-muscle {
  color: var(--green-ring);
}
[data-theme="dark"] .exercise-card-muscle::before {
  background: var(--green-ring);
}
:root[data-theme="dark"] .exercise-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 0 1px var(--border-strong);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.page-btn {
  padding: 8px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--green);
  border: 1px solid var(--border-strong);
  transition: background var(--t-fast);
}

.page-btn:hover { background: var(--accent-muted); }

.page-info {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
   EXERCISE GROUP GRID (DDX drill-down entry screen)
   ══════════════════════════════════════════════════════════ */

.ex-group-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}

.ex-group-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--text-primary);
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}

.ex-group-card:hover {
  border-color: var(--green-ring);
  box-shadow: 0 4px 14px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
  transform: translateY(-1px);
}

.ex-group-card:active {
  transform: scale(.97);
}

.ex-group-card-icon {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  border-radius: var(--radius-md);
}

/* Anatomical group silhouette: muted body + the group's muscles highlighted */
.gi { display: block; }
.gi-base { fill: #C7C3BB; }
.gi-on   { fill: var(--green); }
[data-theme="dark"] .gi-base { fill: #4A515C; }
[data-theme="dark"] .gi-on   { fill: var(--green-ring); }

.ex-group-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ex-group-card-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ex-group-card-count {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.ex-group-card-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* ── Subcategory chips row (group screen, always visible above list) ── */

.ex-subcat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ex-subcat-chip {
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.ex-subcat-chip:hover {
  border-color: var(--green-ring);
  color: var(--green);
}

.ex-subcat-chip--active {
  background: var(--accent-dim);
  border-color: var(--green);
  color: var(--green);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   EXERCISE DETAIL PAGE — DDX-inspired redesign
   ══════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────── */
.ex-detail {
  padding-bottom: 48px;
}

/* ── Back link ───────────────────────────────────────────── */
.ex-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 14px;
  transition: color var(--t-fast);
}
.ex-back-link:hover { color: var(--green); }

/* ── Media hero ──────────────────────────────────────────── */
.ex-hero {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-card);
  /* Right-edge fade to signal more images are scrollable */
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}

.ex-hero--single {
  display: block;
}

.ex-hero-img {
  flex-shrink: 0;
  width: 80%;
  max-height: 340px;
  border-radius: var(--radius-card);
  object-fit: cover;
  scroll-snap-align: start;
  background: var(--bg-muted);
}

.ex-hero--single .ex-hero-img {
  width: 100%;
  max-height: 280px;
}

/* Placeholder when no photos */
.ex-hero-placeholder {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-card);
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.ex-hero-ph-icon {
  color: var(--text-muted);
  opacity: .5;
}

/* ── Title + badges ──────────────────────────────────────── */
.ex-header {
  margin-bottom: 18px;
}

.ex-title {
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.025em;
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.ex-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ex-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  letter-spacing: .03em;
}

.ex-badge .ic { flex-shrink: 0; }

.ex-badge--equip {
  background: var(--green-light);
  color: var(--green);
}
[data-theme="dark"] .ex-badge--equip {
  background: var(--accent-dim);
  color: var(--green-ring);
}

.ex-badge--level {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}

.ex-badge--loc {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}

[data-theme="dark"] .ex-badge--level,
[data-theme="dark"] .ex-badge--loc {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: var(--text-secondary);
}

/* ── Muscle map (unchanged visual logic, just spacing) ────── */
.muscle-map-wrap {
  --muscle-fill:     #E7E4DE;
  --muscle-stroke:   #CDC9C2;
  --zone-primary:    #DC2626;
  --zone-secondary:  #E25C92;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 14px;
}

[data-theme="dark"] .muscle-map-wrap {
  --muscle-fill:    #2A3039;
  --muscle-stroke:  #3C434E;
  --zone-primary:   #EF4444;
  --zone-secondary: #F6A6C1;
}

.muscle-map-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.muscle-map {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.muscle-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.figure-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.body-svg { width: 100%; max-width: 150px; height: auto; display: block; }

.body-base {
  fill: var(--muscle-fill);
  stroke: var(--muscle-stroke);
  stroke-width: 0.18;
  stroke-linejoin: round;
}

.muscle-zone {
  fill: var(--muscle-fill);
  stroke: var(--muscle-stroke);
  stroke-width: 0.14;
  stroke-linejoin: round;
  transition: fill .25s ease;
}

.zone-primary {
  fill: var(--zone-primary);
  stroke: var(--zone-primary);
  stroke-width: 0.22;
  filter: drop-shadow(0 0 0.5px var(--zone-primary));
}

.zone-secondary {
  fill: var(--zone-secondary);
  stroke: var(--zone-secondary);
  stroke-width: 0.18;
}

.muscle-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 8px;
}

.legend-primary, .legend-secondary {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-primary::before, .legend-secondary::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 4px;
}
.legend-primary::before   { background: var(--zone-primary); }
.legend-secondary::before { background: var(--zone-secondary); }

/* ── Muscle chips (replace plain details text) ───────────── */
.muscle-chips-wrap {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.muscle-chip-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.muscle-chip-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.muscle-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.muscle-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  line-height: 1.3;
}

/* Primary chips — red, matching zone-primary on the map */
.muscle-chip--primary {
  background: color-mix(in srgb, var(--zone-primary) 18%, transparent);
  color: var(--zone-primary);
  border: 1px solid color-mix(in srgb, var(--zone-primary) 35%, transparent);
}

/* Secondary chips — pink/rose, matching zone-secondary on the map */
.muscle-chip--secondary {
  background: color-mix(in srgb, var(--zone-secondary) 18%, transparent);
  color: var(--zone-secondary);
  border: 1px solid color-mix(in srgb, var(--zone-secondary) 35%, transparent);
}

/* Fallbacks for Safari <16.2 without color-mix() */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .muscle-chip--primary {
    background: rgba(220,38,38,.15);
    color: #B91C1C;
    border-color: rgba(220,38,38,.3);
  }
  .muscle-chip--secondary {
    background: rgba(226,92,146,.15);
    color: #BE185D;
    border-color: rgba(226,92,146,.3);
  }
  [data-theme="dark"] .muscle-chip--primary {
    background: rgba(239,68,68,.15);
    color: #EF4444;
    border-color: rgba(239,68,68,.3);
  }
  [data-theme="dark"] .muscle-chip--secondary {
    background: rgba(246,166,193,.15);
    color: #F6A6C1;
    border-color: rgba(246,166,193,.3);
  }
}

/* ── Training params callout ─────────────────────────────── */
.ex-params-callout {
  --_params-bg:     #EEF0FF;
  --_params-border: #6366F1;
  --_params-icon:   #4F46E5;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--_params-bg);
  border: 1.5px solid rgba(99,102,241,.3);
  border: 1.5px solid color-mix(in srgb, var(--_params-border) 30%, transparent);
  border-left: 4px solid var(--_params-border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 14px;
}

[data-theme="dark"] .ex-params-callout {
  --_params-bg:     rgba(99,102,241,.10);
  --_params-border: #818CF8;
  --_params-icon:   #818CF8;
}

.ex-params-icon-wrap {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--_params-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ex-params-icon { color: #fff; }

.ex-params-body {
  flex: 1;
  min-width: 0;
}

.ex-params-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--_params-icon);
  margin-bottom: 8px;
}

.ex-params-grid {
  display: flex;
  align-items: center;
  gap: 0;
}

.ex-param-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ex-param-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -.02em;
}

.ex-param-name {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: lowercase;
}

.ex-param-sep {
  width: 1px;
  height: 32px;
  background: rgba(249,115,22,.4);
  background: color-mix(in srgb, var(--_params-border) 40%, transparent);
  flex-shrink: 0;
}

/* ── Section shared styles ───────────────────────────────── */
.ex-section {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 12px;
}

.ex-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}

/* ── Техника выполнения — numbered step rows ─────────────── */
.ex-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ex-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 0 0 22px;
  position: relative;
}

.ex-step:last-child { padding-bottom: 0; }

/* timeline rail connecting the step badges */
.ex-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 42px;
  bottom: -2px;
  width: 2.5px;
  border-radius: 2px;
  background: rgba(34,197,94,.28);
}

.ex-step-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-ring), var(--green));
  color: #fff;
  font-size: 15.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(22,163,74,.38), inset 0 1px 1px rgba(255,255,255,.25);
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .ex-step-num {
  box-shadow: 0 3px 12px rgba(34,197,94,.32), inset 0 1px 1px rgba(255,255,255,.2);
}

.ex-step-text {
  font-size: 14.5px;
  color: var(--text-primary);
  line-height: 1.55;
  flex: 1;
  margin: 0;
  padding-top: 8px;
}

/* ── Частые ошибки — amber warning items ─────────────────── */
.ex-mistakes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ex-mistake-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(245,158,11,.08);
  border-left: 3px solid var(--fat);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
}

[data-theme="dark"] .ex-mistake-item {
  background: rgba(245,158,11,.10);
}

.ex-mistake-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fat) 16%, transparent);
  color: var(--fat);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.ex-mistake-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

/* ── Безопасность — red shield block ────────────────────── */
.ex-safety {
  --_safety-color: var(--danger);
  background: rgba(248,81,73,.03);
  border: 1px solid var(--border);
  border: 1px solid color-mix(in srgb, var(--_safety-color) 25%, var(--border));
  border-left: 4px solid var(--_safety-color);
}

[data-theme="dark"] .ex-safety {
  background: rgba(248,81,73,.04);
  /* Re-declare full border so dark --border is used in the mix, not baked light value */
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-left: 4px solid var(--danger);
}

.ex-safety-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ex-safety-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--danger-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ex-safety-icon { color: var(--danger); }

.ex-safety-title { margin-bottom: 0; }

.ex-safety-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   CHAT PAGE
   ══════════════════════════════════════════════════════════ */
/* Chat: full-height flex column inside the app frame */
main.container-chat {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-avatar {
  width: 40px; height: 40px;
  border-radius: 20px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}

.chat-header-text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-header-text h1 { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--text-primary); }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.online-label { font-size: 12px; color: var(--green); font-weight: 500; }

/* Dark: #16A34A on #0D1117 = ~3.8:1; use green-ring for AA compliance */
[data-theme="dark"] .online-dot { background: var(--green-ring); }
[data-theme="dark"] .online-label { color: var(--green-ring); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.chat-messages::-webkit-scrollbar { display: none; }

.nb-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.nb-bubble--user {
  align-self: flex-end;
  background: var(--green-light);
  color: var(--text-primary);
  border-bottom-right-radius: 4px;
}

[data-theme="dark"] .nb-bubble--user {
  background: rgba(34,197,94,0.22);
  border: 1px solid rgba(34,197,94,.30);
  color: var(--text-primary);
}

.nb-bubble--bot {
  align-self: flex-start;
  background: var(--bg-card);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border);
}

/* Typing indicator dots */
.nb-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}

.nb-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: nb-dot 1.2s infinite ease-in-out;
}

.nb-typing span:nth-child(2) { animation-delay: .2s; }
.nb-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes nb-dot {
  0%, 80%, 100% { transform: scale(.7); opacity: .5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Quick-reply chips */
.quick-chips {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  flex-shrink: 0;
  /* Right-edge fade mask — indicates horizontal scroll */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}
.quick-chips::-webkit-scrollbar { display: none; }

/* Chat input row */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px calc(var(--nav-h) + var(--safe-bottom) + 10px);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}

.chat-attach-btn {
  width: 42px; height: 42px;
  border-radius: 21px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-muted);
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  height: 42px;
  border: 1.5px solid var(--border-strong);
  border-radius: 21px;
  padding: 0 16px;
  font-size: 15px;
  font-family: var(--font);
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--t-fast);
}
.chat-input:focus { border-color: var(--green-ring); }

.chat-send-btn {
  width: 42px; height: 42px;
  border-radius: 21px;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: opacity .15s;
}
.chat-send-btn:hover { opacity: .9; }
.chat-send-btn svg { color: #fff; }

.chat-mic-btn {
  width: 42px; height: 42px;
  border-radius: 21px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-muted);
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.chat-mic-btn:active { color: var(--green); background: var(--green-light); }
[data-theme="dark"] .chat-mic-btn:active { background: var(--accent-dim); }
.chat-mic-btn[hidden], .chat-send-btn[hidden] { display: none; }

/* Inline meal/workout card in chat */
.nb-bubble--bot .meal-card,
.nb-bubble--bot .workout-card { width: 100%; }

/* ══════════════════════════════════════════════════════════
   PROGRESS SCREEN — segment switch, period, charts, accordion
   ══════════════════════════════════════════════════════════ */

.progress-header {
  padding: 16px 16px 4px;
}

.progress-header h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text-primary);
}

/* Top stat cards (weight · streak) */
.stat-cards { display: flex; gap: 10px; padding: 4px 16px 14px; }
.stat-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
}
.stat-card-icon { color: var(--text-muted); margin-bottom: 8px; line-height: 1; }
.stat-card-icon.flame { color: #F59E0B; }
.stat-card-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-card-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.stat-card-lbl { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
/* Weight delta direction colors (progress screen) */
.delta-down { color: var(--green); font-weight: 600; }
.delta-up   { color: var(--danger); font-weight: 600; }

/* Segment switch (Питание · Спорт) */
.segment-switch {
  display: flex;
  background: var(--bg-muted);
  border-radius: 10px;
  padding: 3px;
  margin: 0 16px 16px;
}

.seg-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--t-fast);
}

.seg-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Pane visibility */
.seg-pane { display: none; padding: 0 16px; }
.seg-pane.active { display: block; }
/* stat-cards inside a pane already get 16px from .seg-pane — don't double-inset */
.seg-pane .stat-cards { padding-left: 0; padding-right: 0; }

/* Period toggle — segment-track (matches Питание · Спорт) */
.period-row {
  display: flex;
  background: var(--bg-muted);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 14px;
}

.period-btn {
  flex: 1;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border: none;
  transition: all var(--t-fast);
}

.period-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Progress pane: chart-card sits inside .seg-pane (already has padding 0 16px),
   so override margin to avoid double horizontal margin */
.seg-pane .chart-card {
  margin: 0 0 12px;
}

/* Accordion (program days) */
.accordion-item {
  border-top: 1px solid var(--border);
}

.accordion-item:first-child { border-top: none; }

.accordion-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  gap: 8px;
}

.acc-chevron {
  flex-shrink: 0;
  transition: transform var(--t-fast);
  color: var(--text-muted);
}

.acc-chevron.open { transform: rotate(180deg); }

.accordion-body {
  display: none;
  padding-bottom: 12px;
}

.accordion-body.open { display: block; }

.exercise-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.exercise-row:last-child { border-bottom: none; }

.ex-sets {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  margin-left: 8px;
}

.program-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

/* Legend for strength chart */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-label {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Empty state in chart card */
.empty-state-text {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  padding: 12px 0;
}

/* ══════════════════════════════════════════════════════════
   TOAST  (rendered by app.js: .nb-toast + .nb-toast--visible)
   Slides in from the TOP; auto-dismissed by JS after 2.5 s.
   ══════════════════════════════════════════════════════════ */
.nb-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-110%);
  background: #111110;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--t-mid), transform var(--t-mid);
  z-index: 300;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  max-width: calc(100vw - 40px);
}

.nb-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.nb-toast--error { background: var(--danger); }
.nb-toast--error svg { display: none; }

.nb-toast-link {
  color: #86efac;
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
}
.nb-toast-link:hover { color: #bbf7d0; opacity: 1; }

[data-theme="dark"] .nb-toast { background: #2a2a2a; }

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Recipes ─────────────────────────────────────────────── */
.recipes-entry{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:14px;text-decoration:none;color:inherit}
.recipes-entry-icon{width:42px;height:42px;border-radius:12px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;color:var(--green)}
.recipes-entry-title{font-weight:700;color:var(--text-primary)}
.recipes-entry-meta{font-size:13px;color:var(--text-secondary)}

.recipes-home{padding:16px 16px 96px}
.recipes-h1{font-size:26px;font-weight:800;margin:8px 0 16px;color:var(--text-primary)}
.recipes-section{margin-bottom:22px}
.recipes-h2{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--text-secondary);margin:0 0 10px}
.recipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.recipe-card{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);border:1px solid var(--border);text-decoration:none;color:inherit}
.recipe-card-img{position:relative;height:104px;background:linear-gradient(135deg,#9cc79f,#5fae74);background-size:cover;background-position:center}
.recipe-card.locked .recipe-card-img{filter:grayscale(.35) brightness(.92)}
.recipe-card-pro{position:absolute;top:8px;left:8px;background:#111;color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:20px}
.recipe-card-fav{position:absolute;top:6px;right:6px;border:none;background:rgba(0,0,0,.35);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.recipe-card-fav.on{color:var(--protein)}
.recipe-card-body{padding:9px 10px}
.recipe-card-title{font-weight:700;font-size:14px;line-height:1.2;color:var(--text-primary)}
.recipe-card-kcal{margin-top:4px;color:var(--green);font-weight:800;font-size:13px}

.recipe-detail{padding-bottom:96px}
.recipe-back{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;z-index:2}
.recipe-hero{height:200px;background:linear-gradient(135deg,#9cc79f,#5fae74);background-size:cover;background-position:center}
.recipe-body{padding:16px}
.recipe-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.recipe-title{font-size:22px;font-weight:800;color:var(--text-primary);margin:0}
.recipe-fav{border:none;background:transparent;color:var(--text-muted);cursor:pointer}
.recipe-fav.on{color:var(--protein)}
.recipe-meta{color:var(--text-secondary);font-size:14px;margin-top:8px}
.recipe-macros{color:var(--text-muted);font-size:13px;margin-top:4px;font-weight:600}
.recipe-macros .rm-p{color:var(--protein)}
.recipe-macros .rm-f{color:var(--fat)}
.recipe-macros .rm-c{color:var(--carb)}
[data-theme="dark"] .recipe-macros .rm-p{color:#fb7185}
[data-theme="dark"] .recipe-macros .rm-f{color:#fbbf24}
[data-theme="dark"] .recipe-macros .rm-c{color:#38bdf8}
.recipe-desc{color:var(--text-secondary);line-height:1.5;margin:12px 0}
.recipe-h2{font-size:15px;font-weight:800;color:var(--text-primary);margin:16px 0 8px}
.recipe-ing{margin:0;padding-left:18px;color:var(--text-primary);line-height:1.9}
.recipe-steps{margin:0;padding-left:18px;color:var(--text-primary);line-height:1.6}
.recipe-steps li{margin-bottom:8px}

.recipe-gate{position:relative;margin-top:8px;min-height:180px}
.recipe-gate-veil{position:absolute;inset:-8px 0 0;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--bg) 60%)}
.recipe-gate-cta{position:relative;text-align:center;padding-top:40px}
.recipe-gate-lock{color:var(--text-muted)}
.recipe-gate-h{font-weight:800;font-size:15px;color:var(--text-primary);margin:6px 0 2px}
.recipe-gate-s{color:var(--text-muted);font-size:12px;margin-bottom:12px}
.recipe-gate-btn{display:inline-block;background:#F59E0B;color:#fff;font-weight:800;padding:12px 22px;border-radius:12px;text-decoration:none;box-shadow:0 4px 14px rgba(245,158,11,.35)}

[data-theme="dark"] .recipe-gate-veil{background:linear-gradient(to bottom,rgba(22,27,34,0),var(--bg) 60%)}
[data-theme="dark"] .recipe-card-pro{background:#000}

/* ── Recipes 2.0: search, rails, filters, badge, CTA ─────────── */
.recipes-search{position:relative;margin:0 0 18px}
.recipes-search input{width:100%;box-sizing:border-box;padding:12px 14px 12px 42px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:15px;-webkit-appearance:none;appearance:none}
.recipes-search input::placeholder{color:var(--text-muted)}
.recipes-search input:focus{outline:none;border-color:var(--green)}
.recipes-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);display:flex;pointer-events:none}

.recipes-section-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px}
.recipes-section-head .recipes-h2{margin:0}
.recipes-seeall{font-size:13px;font-weight:700;color:var(--green);text-decoration:none;white-space:nowrap}

.recipe-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.recipe-rail::-webkit-scrollbar{display:none}
.recipe-rail .recipe-card{flex:0 0 auto;width:150px;scroll-snap-align:start}

.recipe-card-badge{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;padding:3px 8px 3px 7px;border-radius:20px;display:flex;align-items:center;gap:5px}
.recipe-card-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--protein)}

.recipes-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.filter-chip{font-size:13px;font-weight:600;padding:7px 13px;border-radius:20px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);text-decoration:none;white-space:nowrap}
.filter-chip.on{background:var(--green);border-color:var(--green);color:#fff}

.recipes-empty{text-align:center;color:var(--text-muted);padding:48px 16px;font-size:15px;line-height:1.5}

.recipes-cta{margin:24px 0 8px;padding:22px 18px;border-radius:18px;text-align:center;background:linear-gradient(135deg,#FFF7ED,#FFEDD5);border:1px solid #FED7AA}
.recipes-cta-h{font-size:18px;font-weight:800;color:#7C2D12;margin:0 0 4px;line-height:1.3}
.recipes-cta-s{font-size:13px;color:#9A3412;margin:0 0 16px;line-height:1.4}
.recipes-cta-btn{display:inline-flex;align-items:center;gap:8px;background:#F59E0B;color:#fff;font-weight:800;font-size:15px;padding:14px 26px;border-radius:14px;text-decoration:none;box-shadow:0 4px 14px rgba(245,158,11,.35)}
[data-theme="dark"] .recipes-cta{background:linear-gradient(135deg,#2a1f12,#34250f);border-color:#7c4a13}
[data-theme="dark"] .recipes-cta-h{color:#fed7aa}
[data-theme="dark"] .recipes-cta-s{color:#fdba74}

.recipe-list{padding:16px 16px 24px}
.recipe-list-head{display:flex;align-items:center;gap:10px;margin:4px 0 16px}
.recipe-list-back{color:var(--text-primary);display:flex}
.recipe-list-title{font-size:22px;font-weight:800;color:var(--text-primary)}

/* ── Progression picker (#4) ─────────────────────────────────── */
.prog-select{max-width:55%;font-size:13px;font-weight:700;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:6px 28px 6px 10px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:16px}
.prog-stats{display:flex;gap:10px;margin:12px 0 6px}
.prog-stat{flex:1;background:var(--bg-subtle,rgba(0,0,0,.03));border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.prog-stat-label{display:block;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--text-muted);text-transform:uppercase}
.prog-stat-val{display:block;margin-top:3px;font-size:18px;font-weight:800;color:var(--text-primary)}
.prog-hint{margin-top:8px;font-size:11px;color:var(--text-muted);text-align:center}
[data-theme="dark"] .prog-stat{background:rgba(255,255,255,.04)}

/* ── Import card (#5) ────────────────────────────────────────── */
.import-card { padding: 16px; }
.import-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.import-card-desc { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.4; }
.import-file-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Hide the native file input visually — triggered via label */
.import-file-input-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
/* Styled "choose file" label-button */
.import-file-label-btn { flex-shrink: 0; display: inline-flex; align-items: center;
  background: var(--bg-muted); border: 1px solid var(--border); color: var(--text-primary);
  font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); padding: 8px 14px;
  cursor: pointer; white-space: nowrap; user-select: none; }
.import-file-label-btn:hover { background: var(--bg-subtle, rgba(0,0,0,.06)); }
/* Filename + check icon shown after selection */
.import-file-name { flex: 1; min-width: 0; font-size: 12px; color: var(--green);
  display: flex; align-items: center; gap: 4px; }
/* Truncate long filenames with an ellipsis instead of breaking mid-word */
.import-file-name #import-file-text { min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.import-check-icon { flex-shrink: 0; color: var(--green); }
.import-file-btn { flex-shrink: 0; background: var(--green); color: #fff; font-size: 13px;
  font-weight: 700; border-radius: var(--radius-sm); padding: 8px 18px; white-space: nowrap; }
.import-file-btn:disabled { opacity: .4; cursor: default; }
/* Loading indicator: hidden until htmx adds .htmx-request during the LLM call */
.import-indicator { display: none; font-size: 13px; color: var(--text-secondary);
  margin: 10px 0 0; }
.import-indicator.htmx-request { display: block; }
.import-result { font-size: 13px; margin: 10px 0 0; padding: 8px 12px;
  border-radius: var(--radius-sm); }
.import-result--ok { background: var(--green-light); color: #166534; }
.import-result--err { background: #FEE2E2; color: #991B1B; }
[data-theme="dark"] .import-result--ok { background: rgba(22,163,74,.15); color: #86efac; }

/* ══════════════════════════════════════════════════════════
   ONBOARDING WIZARD
   ══════════════════════════════════════════════════════════ */

/* Outer container: full-height centered column, no bottom nav */
.nb-onboarding {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* Progress bar */
.nb-onb-progress {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 4px;
  background: var(--border);
  flex-shrink: 0;
}
.nb-onb-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 0 2px 2px 0;
  transition: width 350ms cubic-bezier(.32,.72,0,1);
  width: 0%;
}

/* Step container */
.nb-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  animation: nb-fadein 220ms ease-out;
}

.nb-step[hidden] { display: none; }

@keyframes nb-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Step body — grows to fill space above nav */
.nb-step-body {
  flex: 1;
  padding: 32px 0 16px;
}

/* Nav row: back + next/skip buttons */
.nb-step-nav {
  display: flex;
  gap: 10px;
  padding: 16px 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
}

/* Typography */
.nb-onb-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}

.nb-onb-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.nb-onb-question {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text-primary);
  margin: 0 0 20px;
}

.nb-onb-lead {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
}

.nb-onb-sublabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.nb-onb-footnote {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 14px;
}

/* Consent block */
.nb-onb-consent-notice {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.nb-onb-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}

.nb-onb-consent-cb {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--green);
  cursor: pointer;
}

/* Number input rows */
.nb-onb-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nb-onb-input {
  flex: 1;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast);
}
.nb-onb-input:focus {
  outline: none;
  border-color: var(--green);
}
.nb-onb-input::placeholder { color: var(--text-muted); font-weight: 400; }

/* Remove spinner arrows on number inputs */
.nb-onb-input::-webkit-inner-spin-button,
.nb-onb-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.nb-onb-input[type=number] { -moz-appearance: textfield; }

.nb-onb-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 24px;
}

/* Inline field error */
.nb-onb-field-error {
  font-size: 13px;
  color: var(--danger);
  margin-top: 8px;
  line-height: 1.4;
}
.nb-onb-field-error[hidden] { display: none; }

/* Seg-control inside wizard: no horizontal margin (full-width within step padding) */
.nb-onb-seg {
  margin-top: 0;
  flex-wrap: wrap;
  gap: 6px;
}

/* Sub-label + sub-text inside seg-btn (step 5 NEAT) */
.nb-seg-main {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.nb-seg-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}
.seg-btn.active .nb-seg-sub { color: var(--text-secondary); }

/* Multi-select sport chips */
.nb-sport-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.nb-chip {
  padding: 9px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}

.nb-chip.active {
  background: var(--accent-dim);
  border-color: var(--green);
  color: var(--green);
  font-weight: 600;
}

/* Navigation buttons */
.nb-onb-btn-back {
  flex: 0 0 auto;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.nb-onb-btn-back:hover { opacity: .8; }

.nb-onb-btn-next,
.nb-onb-btn-go {
  flex: 1;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--green);
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.nb-onb-btn-next:disabled { opacity: .4; cursor: default; }
.nb-onb-btn-next:not(:disabled):hover,
.nb-onb-btn-go:hover { opacity: .9; }

.nb-onb-btn-skip {
  flex: 0 0 auto;
  padding: 14px 14px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Plan reveal card */
.nb-plan-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-top: 8px;
}

.nb-plan-kcal {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}

.nb-plan-kcal-num {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.nb-plan-kcal-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.nb-plan-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.nb-plan-macro {
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nb-plan-macro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

.nb-plan-macro-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.nb-plan-macro-lbl {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: center;
}

.nb-plan-meta {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nb-plan-tdee,
.nb-plan-delta,
.nb-plan-target-date {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.nb-plan-target-date[hidden] { display: none; }

.nb-plan-floor-notice {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--fat-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #92400E;
  line-height: 1.4;
}
.nb-plan-floor-notice[hidden] { display: none; }

/* ── Dark overrides ─────────────────────────────────────── */
[data-theme="dark"] .nb-plan-floor-notice {
  background: rgba(217,119,6,.18);
  color: #fbbf24;
}
[data-theme="dark"] .nb-chip.active {
  background: rgba(34,197,94,.12);
}
[data-theme="dark"] .nb-onb-input {
  border-color: var(--border);
  background: var(--bg-card);
}
[data-theme="dark"] .import-result--err { background: rgba(239,68,68,.12); color: #fca5a5; }

/* ── Personal food library (/foods) ───────────────────────── */
.foods-page { padding: 16px 16px 100px; }
.food-cards { display: flex; flex-direction: column; gap: 12px; }
.food-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 12px 14px;
}
.food-card-body { flex: 1; min-width: 0; }
.food-card-name { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.food-card-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.food-card-actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.food-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; transition: opacity var(--t-fast);
}
.food-btn:hover { opacity: .85; }
.food-btn--log { background: var(--green); color: #fff; }
.food-btn--del {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  padding: 4px 8px;
}
.food-btn--del:hover { color: #EF4444; border-color: #EF4444; }
.food-log-ack { font-size: 12px; color: var(--green); min-height: 16px; }

/* Sheet — Мои блюда icon */
.icon-myfoods { background: linear-gradient(135deg, #A855F7, #7C3AED); }

/* Meal card — save to library button */
.meal-save {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; padding: 0; border-radius: var(--radius-sm);
  transition: color var(--t-fast);
}
.meal-save:hover { color: var(--green); }
.meal-save-ack { font-size: 11px; color: var(--green); display: block; text-align: center; }

/* Recipe detail action buttons */
.recipe-actions {
  display: flex; gap: 10px; margin: 12px 0 16px; flex-wrap: wrap;
}
.recipe-ack { font-size: 13px; color: var(--green); margin-bottom: 4px; min-height: 18px; }

/* Inline ack spans (htmx fragments) */
.ack-ok { color: var(--green); font-size: 13px; }
.ack-err { color: #EF4444; font-size: 13px; }

[data-theme="dark"] .food-card { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .food-btn--del { border-color: var(--border); }

/* ── Inline prompt (replaces native prompt(), broken in Telegram WebView) ──── */
.nb-prompt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .45);
}
.nb-prompt-box {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.nb-prompt-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.nb-prompt-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}
.nb-prompt-input:focus {
  border-color: var(--green-ring);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.nb-prompt-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.nb-prompt-btn {
  flex: 1;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.nb-prompt-cancel {
  background: var(--surface);
  color: var(--text-secondary);
}
.nb-prompt-ok {
  background: var(--accent);
  color: #fff;
}