/* ============================================================
   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);

  /* Page horizontal padding — unified across all pages */
  --page-pad: 12px;

  /* 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;
  /* Glow overlay — used on login/welcome screens */
  --glow: radial-gradient(ellipse 120% 55% at 50% -8%, rgba(34,197,94,.12), transparent 60%);
}

/* ── 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;
  --glow: radial-gradient(ellipse 120% 55% at 50% -8%, rgba(34,197,94,.16), transparent 60%);
}

/* ── 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 var(--page-pad) 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: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.icon-photo   { background: rgba(34,197,94,.12);  border: 1.5px solid #22C55E; color: #22C55E; }
.icon-barcode { background: rgba(6,182,212,.12);   border: 1.5px solid #06B6D4; color: #06B6D4; }
.icon-food    { background: rgba(59,130,246,.12);  border: 1.5px solid #3b82f6; color: #3b82f6; }
.icon-repeat  { background: rgba(167,139,250,.12); border: 1.5px solid #a78bfa; color: #a78bfa; }
.icon-workout { background: rgba(249,115,22,.12);  border: 1.5px solid #f97316; color: #f97316; }
.icon-weight  { background: rgba(245,158,11,.12);  border: 1.5px solid #f59e0b; color: #f59e0b; }

/* Voice recording indicator: pulsing red on the active mic/voice control */
.sheet-action-btn.recording .sheet-action-icon,
.chat-mic-btn.recording { animation: nb-rec-pulse 1s ease-in-out infinite; color: #EF4444; }
.sheet-action-btn.recording .sheet-action-icon { background: #EF4444; }
@keyframes nb-rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* 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);
}

/* Discard a chat draft card (meal/workout): small square × at the row's right */
.nb-btn--cancel-x {
  flex: 0 0 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--danger, #f85149);
  border: 1px solid rgba(248, 81, 73, 0.28);
}

.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;
}

/* Workout-saved result block (shown in FAB sheet after successful workout save) */
.nb-workout-saved {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  border: 1px solid var(--border);
}

.nb-workout-saved-ok {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.nb-workout-records {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: pre-wrap;
}

.nb-workout-equivalent {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   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; }
/* Workout rows: name on its own line, set list wraps below (set strings are long) */
.recog-items--wo li { flex-direction: column; align-items: flex-start; gap: 2px; }
.recog-items--wo .recog-item-meta { white-space: normal; }
.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; }

/* ══════════════════════════════════════════════════════════
   BARCODE SCANNER OVERLAY (camera chrome — always dark, over live video)
   ══════════════════════════════════════════════════════════ */
.barcode-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
}
.barcode-overlay[hidden] { display: none; }

.barcode-video {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  background: #000;
}

.barcode-frame {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 160px;
  max-width: 78vw;
  pointer-events: none;
}
.barcode-frame b {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid var(--green-ring);
  border-radius: 6px;
}
.barcode-frame b:nth-child(1) { left: 0; top: 0; border-right: none; border-bottom: none; }
.barcode-frame b:nth-child(2) { right: 0; top: 0; border-left: none; border-bottom: none; }
.barcode-frame b:nth-child(3) { left: 0; bottom: 0; border-right: none; border-top: none; }
.barcode-frame b:nth-child(4) { right: 0; bottom: 0; border-left: none; border-top: none; }

.barcode-scanline {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green-ring), transparent);
  animation: nb-barcode-scan 1.6s ease-in-out infinite alternate;
}
@keyframes nb-barcode-scan {
  from { transform: translateY(-52px); }
  to   { transform: translateY(52px); }
}
@media (prefers-reduced-motion: reduce) {
  .barcode-scanline { animation: none; }
}

.barcode-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
}
.barcode-xbtn, .barcode-torch {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* display:flex above beats the [hidden] UA rule — restore it */
.barcode-torch[hidden] { display: none; }

.barcode-hint {
  position: absolute;
  left: 0; right: 0;
  top: calc(42% + 100px);
  text-align: center;
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  padding: 0 24px;
}

.barcode-alt {
  /* stays pinned to the bottom even when the video is hidden (camera denied) */
  margin-top: auto;
  background: var(--bg-card);
  padding: 12px 16px calc(var(--safe-bottom) + 12px);
  text-align: center;
}
.barcode-alt > button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--font);
}
.barcode-manual {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.barcode-manual input {
  flex: 1;
  min-width: 0;
  background: var(--bg-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text-primary);
  font-family: var(--font);
}
.barcode-manual .btn-primary {
  flex: 0 0 auto;
  padding: 10px 16px;
}

/* ══════════════════════════════════════════════════════════
   BARCODE HIT CARD (reuses .recog-* skeleton, adds product identity row)
   ══════════════════════════════════════════════════════════ */
.nb-bc-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* clear the sheet's absolute ✕ button in the top-right corner */
  padding-right: 36px;
}
.nb-bc-code {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nb-bc-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 6px;
  line-height: 1.3;
}
.nb-bc-brand {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.nb-bc-grams-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.nb-bc-grams-row label {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 600;
  flex-shrink: 0;
}
.nb-bc-grams-inp {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 9px 12px;
}
.nb-bc-grams-inp input {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font);
  outline: none;
}
.nb-bc-grams-inp span { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.nb-bc-total {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 8px;
}
.nb-bc-total b { color: var(--text-primary); }
.nb-bc-attr {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 10px 0 0;
}

/* ══════════════════════════════════════════════════════════
   BARCODE MISS SCREEN (positive framing — "new product", not an error)
   ══════════════════════════════════════════════════════════ */
.nb-bc-miss { padding: 10px 4px 4px; text-align: center; }
.nb-bc-miss-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(6,182,212,.12);
  border: 1.5px solid #06B6D4;
  color: #06B6D4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.nb-bc-miss h3 { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.nb-bc-miss p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.5;
}
.nb-bc-miss-code {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.nb-bc-miss .nb-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   DAY PAGE — header (date + journal navigation)
   ══════════════════════════════════════════════════════════ */
/* ── Today header (greeting + date) ────────────────────── */
.today-header {
  padding: 16px var(--page-pad) 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

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

/* Journal day navigation arrows (in the day header) */
.day-nav-arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 19px;
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.day-nav-arrow:hover { background: var(--accent-muted); color: var(--green); }
.day-nav-arrow--off { color: var(--border-strong); }

.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 var(--page-pad) 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-stats-link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent, #22c55e); text-decoration: none; white-space: nowrap; }

.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 removed — replaced by .ringday ring-calendar (Kalo-batch F1).
   Future-day fading lives on the .streak-day.future container (ringday block);
   a per-label opacity here would stack multiplicatively and near-hide labels. */

/* ── Calorie hero (Cal AI: big number left + arc right) ─────── */
.ring-section { display: block; padding: 8px var(--page-pad) 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 var(--page-pad) 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 var(--page-pad);
}

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

/* ── V3 «Микробары» meal card — big kcal, macro micro-bars, bottom action row ── */
.meal-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  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-card.editing:hover { background: var(--bg-card); }

/* Top row: icon · name/time */
.mc-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.mc-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-muted);
  border-radius: 10px;
  color: var(--text-secondary);
}
.mc-title-col {
  flex: 1;
  min-width: 0;
}

.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 {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-light);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

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

/* Nutrient grid: big kcal left | macro bars right */
.mc-nutrient-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 14px;
  background: var(--bg-muted);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 11px;
  align-items: center;
}

.mc-kcal-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-right: 1px solid var(--border-strong);
  padding-right: 14px;
}

/* keep .meal-kcal class for test assertions */
.meal-kcal {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mc-kcal-unit {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 3px;
}

/* Macro bars column */
.mc-macro-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mc-macro-row {
  display: grid;
  grid-template-columns: 14px 1fr 30px;
  align-items: center;
  gap: 7px;
}

.mc-mk {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.mc-mk-p { color: var(--protein); }
.mc-mk-f { color: var(--fat); }
.mc-mk-c { color: var(--carb); }

.mc-bar-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
[data-theme="light"] .mc-bar-track { background: rgba(0,0,0,.10); }

.mc-bar-fill {
  height: 100%;
  border-radius: 3px;
}
.mc-fill-p { background: var(--protein); }
.mc-fill-f { background: var(--fat); }
.mc-fill-c { background: var(--carb); }

.mc-macro-gram {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  text-align: right;
}

/* Action row: Сохранить · Редактировать · Удалить */
.mc-action-row {
  display: flex;
  gap: 7px;
  align-items: center;
}

.mc-btn {
  flex: 1;
  height: 36px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  letter-spacing: .01em;
  transition: opacity var(--t-fast);
  border: none;
  padding: 0 4px;
}
.mc-btn:hover { opacity: .82; }
.mc-btn svg { pointer-events: none; flex-shrink: 0; }

.mc-btn-save {
  background: var(--green);
  color: #fff;
}
.mc-btn-edit {
  background: var(--blue-neutral-bg, rgba(88,166,255,.12));
  color: var(--blue-neutral, #58A6FF);
  border: 1px solid rgba(88,166,255,.18) !important;
}
.mc-btn-del {
  background: var(--danger-bg, rgba(248,81,73,.12));
  color: var(--danger);
  border: 1px solid rgba(248,81,73,.18) !important;
}

/* Secondary nutrients (sugar/fiber): quiet chips with a colored dot —
   visible but clearly subordinate to the Б/Ж/У row (founder: «вторичный
   фокус, но симпатично»). Shared by the day meal card and the recog card. */
.nutri-extras {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 2px 0;
  margin-bottom: 6px;
}
.nutri-extra-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(127, 127, 127, 0.1);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.nutri-extra-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nutri-extra-chip--sugar::before { background: #e879a9; }
.nutri-extra-chip--fiber::before { background: #4ade80; }

/* Save-ack line under the action row: hidden when empty so it adds no height */
.mc-save-ack {
  display: none;
  font-size: 11px;
  color: var(--green);
  text-align: center;
  margin-top: 4px;
}
.mc-save-ack:not(:empty) { display: block; }

/* ── Journal: inline confirmed-meal edit form ───────────────────── */
/* .meal-edit-toggle is now .mc-btn-edit — keep .meal-edit-toggle class for JS */
.meal-del { /* kept as class on mc-btn-del for htmx */ }
.meal-save { /* kept as class on mc-btn-save for htmx */ }

.meal-edit {
  display: none;
  width: 100%;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.meal-card.editing .meal-edit { display: block; }

.meal-edit-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.meal-edit-iname {
  flex: 1; min-width: 0;
  font-size: 14px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meal-edit-row.row-removed .meal-edit-iname { text-decoration: line-through; color: var(--text-muted); }
.meal-edit-grams {
  width: 66px; padding: 7px 8px; text-align: right;
  font-size: 14px; color: var(--text-primary);
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.meal-edit-row.row-removed .meal-edit-grams { opacity: .4; }
.meal-edit-unit { font-size: 13px; color: var(--text-muted); }
.meal-edit-remove {
  width: 32px; height: 32px; min-width: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 21px; line-height: 1; padding: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.meal-edit-remove:hover { color: var(--danger); background: var(--danger-dim); }
.meal-edit-row.row-removed .meal-edit-remove { color: var(--green); }

.meal-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.meal-edit-cancel, .meal-edit-save {
  padding: 9px 18px; border: none; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; min-height: 40px; cursor: pointer;
}
.meal-edit-cancel { color: var(--text-secondary); background: var(--bg-muted); }
.meal-edit-save { color: #fff; background: var(--green); }

/* ── Meal card accordion: compact header + expandable body ──────── */

/* Reset the padding on the card itself — header/body carry their own */
.meal-card {
  padding: 0;
  cursor: default;
  overflow: hidden;
}
/* Remove the hover lift from the card itself (header handles it) */
.meal-card:active { transform: none; }
.meal-card:hover { background: var(--bg-card); }
.meal-card.editing:hover { background: var(--bg-card); }

/* Compact header row: tap target for expand/collapse */
.mc-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-card);
  transition: background var(--t-fast);
}
.mc-header:hover { background: var(--bg-muted); }
.mc-header:active { background: var(--bg-muted); }
.meal-card.expanded .mc-header {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  border-bottom: 1px solid var(--border);
}

/* Kcal in compact (header) view — green, right-aligned */
.mc-kcal-compact {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Chevron icon — rotates when expanded */
.mc-chevron {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.meal-card.expanded .mc-chevron { transform: rotate(90deg); }

/* Expandable body — hidden by default via HTML [hidden] attr.
   We must not set display here because that would override [hidden]'s
   implicit display:none; use :not([hidden]) to apply flex only when visible. */
.mc-body[hidden] { display: none; }
.mc-body:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
}

/* Items list inside expanded body */
.mc-items-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.mc-item-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
.mc-item-name {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-item-grams {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mc-item-kcal {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Kcal in expanded body (big number) */
.mc-kcal-full {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Nutrient grid inside expanded body — reuses existing .mc-nutrient-grid styles */
.mc-body .mc-nutrient-grid { margin-bottom: 0; }

/* Streak milestone celebration toast — green gradient, fixed at top */
.nb-streak-milestone-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  right: 12px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff;
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  z-index: 310;
  opacity: 0;
  transform: translateY(-110%);
  transition: opacity var(--t-mid), transform var(--t-mid);
  pointer-events: none;
}
.nb-streak-milestone-toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.nb-streak-milestone-toast__icon {
  flex-shrink: 0;
  color: #fff;
}
.nb-streak-milestone-toast__title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}
.nb-streak-milestone-toast__sub {
  font-size: 12.5px;
  opacity: .9;
  margin-top: 2px;
}

/* 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 var(--page-pad); 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; }

.sugar-line {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sugar-value { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.sugar-note { color: var(--text-muted); font-weight: 400; }
.sugar-caption { font-size: 11px; color: var(--text-muted); }

.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: 14px;
}

.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: account card (link email / logout) ───────── */
.settings-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 10px 0 4px; }
.settings-hint { font-size: 13px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.4; }
.settings-value { font-size: 15px; color: var(--text-secondary); }
.settings-danger { color: var(--danger); }

.nb-link-email { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; margin-bottom: 10px; }
.nb-link-email[hidden] { display: none; } /* display:flex would beat the UA [hidden] rule */

.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;
}

/* Goal has 4 options ("Рекомпозиция" is long) — wrap to 2×2 so they fit on narrow screens */
.seg-control[data-seg="goal"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

/* ══════════════════════════════════════════════════════════
   LOGIN PAGE — variant A «Living ring»
   ══════════════════════════════════════════════════════════ */
.nb-login-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  background-image: var(--glow);
  font-family: var(--font);
  color: var(--text-primary);
}

.nb-login-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 28px 0;
  text-align: center;
}

.nb-login-ringwrap {
  position: relative;
  width: 190px;
  height: 190px;
  flex-shrink: 0;
}

.nb-login-leaf {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}

.nb-login-ring-anim {
  animation: nb-login-spin 40s linear infinite;
  transform-origin: 50% 50%;
  display: block;
}

@keyframes nb-login-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nb-login-ring-anim { animation: none; }
}

.nb-login-name {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 22px;
}

.nb-login-tag {
  font-size: 16px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.nb-login-feats {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 30px;
  align-items: flex-start;
  width: 100%;
  max-width: 280px;
}

.nb-login-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--text-secondary);
  text-align: left;
}

.nb-login-feat-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,.12);
  color: var(--green);
}

.nb-login-foot {
  padding: 14px 24px calc(env(safe-area-inset-bottom, 0px) + 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nb-login-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border-radius: 16px;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  box-shadow: 0 8px 24px rgba(22,163,74,.35);
  text-decoration: none;
  transition: opacity .15s, transform .12s;
}

.nb-login-cta:hover { opacity: .9; color: #fff; }
.nb-login-cta:active { transform: scale(.97); }

.nb-login-dev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: 16px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1.5px solid var(--border);
  background: none;
  transition: opacity .15s;
}

.nb-login-dev:hover { opacity: .8; }

.nb-login-email { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.nb-login-email[hidden] { display: none; } /* display:flex would beat the UA [hidden] rule */

.nb-login-input {
  width: 100%; padding: 13px 14px; border-radius: 12px; font-size: 16px;
  font-family: inherit; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary);
}

.nb-login-consent {
  display: flex; gap: 8px; align-items: flex-start; text-align: left;
  font-size: 13px; color: var(--text-secondary);
}
.nb-login-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--green); }
.nb-login-consent a { color: inherit; text-decoration: underline; }

.nb-login-err { color: var(--danger); font-size: 13px; margin: 0; text-align: center; }

.nb-login-sent { font-size: 13px; color: var(--text-secondary); margin: 0; text-align: center; }

.nb-login-alt { text-align: center; font-size: 14px; color: var(--text-secondary); background: none; border: 0; padding: 6px; }

/* Keep old .login-page/.login-btn classes as no-op stubs for any cached pages */
.login-page { display: none; }

/* ══════════════════════════════════════════════════════════
   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; }

/* ══════════════════════════════════════════════════════════
   WORKOUT LOG  (Мои тренировки in Спорт pane)
   ══════════════════════════════════════════════════════════ */
.workout-log { display: flex; flex-direction: column; gap: 10px; }
.wlog-item {
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  background: var(--bg-muted);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
[data-theme="dark"] .wlog-item { background: var(--surface); }

/* Q7: tappable workout item — <details> reset + cursor */
.wlog-item--tap { cursor: pointer; }
.wlog-item--tap[open] { padding-bottom: 4px; }
.wlog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
/* Q7: summary inside details — remove default marker, flex like a row */
.wlog-header--tap {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  cursor: pointer;
}
.wlog-header--tap::-webkit-details-marker { display: none; }
.wlog-summary-exnames {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wlog-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--t-fast);
}
.wlog-item--tap[open] .wlog-chevron { transform: rotate(180deg); }
.wlog-detail {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.wlog-show-all {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--green);
  padding: 8px 0 2px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
}
.wlog-date { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.wlog-tonnage {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-light);
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
[data-theme="dark"] .wlog-tonnage { background: var(--accent-dim); color: var(--green-ring); }
.wlog-ex { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.wlog-note { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-style: italic; }

.wlog-edit-form {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.wlog-edit-exercise {
  margin-bottom: 10px;
}
.wlog-edit-ex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.wlog-edit-ex-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.wlog-edit-remove-ex {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.wlog-edit-sets { display: flex; flex-direction: column; gap: 4px; }
.wlog-edit-set-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 6px;
  align-items: center;
}
.wlog-edit-reps, .wlog-edit-weight {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input, var(--bg-muted));
  color: var(--text-primary);
  font-size: 13px;
  padding: 5px 8px;
  width: 100%;
  min-width: 0;
}
.wlog-edit-unit { font-size: 12px; color: var(--text-secondary); }
.wlog-edit-remove-set {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.wlog-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.wlog-edit-cancel-btn {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
}
.wlog-edit-save-btn { flex: 2; }

/* Profile page: Мои тренировки card */
.profile-workout-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: 12px 0;
  text-decoration: none;
  transition: background var(--t-fast), transform .1s;
}
.profile-workout-card:hover { background: var(--bg-muted); }
.profile-workout-card:active { transform: scale(.99); }
.profile-workout-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"] .profile-workout-card-icon { background: var(--accent-dim); color: var(--green-ring); }
.profile-workout-card-body { flex: 1; min-width: 0; }
.profile-workout-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.profile-workout-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.profile-workout-card-chevron { color: var(--text-muted); flex-shrink: 0; }

/* Profile tabs segment switch — slight top margin after param-grid.
   Profile page uses a non-flush container (padding: var(--page-pad)),
   so the segment-switch's default side margin would double-inset it.
   Zero out the horizontal margin and pane padding to match card width. */
.profile-tabs { margin-top: 20px; }
.profile-tabs.segment-switch { margin-left: 0; margin-right: 0; }
#profile-seg ~ .seg-pane { padding-left: 0; padding-right: 0; }

/* Diary-day list (Записи + Тренировки tabs) */
.diary-day-list { list-style: none; margin: 0; padding: 0; }
.diary-day-row { border-bottom: 1px solid var(--border); }
.diary-day-row:last-child { border-bottom: none; }
.diary-day-row--extra { display: none; }
.diary-day-link {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0; text-decoration: none; color: inherit;
}
.diary-day-label { font-size: 15px; font-weight: 500; color: var(--text-primary); flex: 1; }
.diary-day-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
/* Workout rows: the date must never wrap; long titles ellipsize instead */
.diary-day-label--date { flex: 0 0 auto; white-space: nowrap; }
.diary-day-meta--ellipsis { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.diary-day-chevron { color: var(--text-muted); flex-shrink: 0; }
.diary-day-link:hover .diary-day-label { color: var(--green-ring); }

/* Non-clickable workout row — same layout as diary-day-link but no hover affordance */
.workout-day-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0;
}

/* Profile tab empty state */
.profile-tab-empty {
  padding: 32px 0 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.profile-tab-empty a { color: var(--green-ring); }

/* ══════════════════════════════════════════════════════════
   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;
}

/* While the filter sheet is open, hide the bottom-nav — on iOS the nav (inside the
   -webkit-overflow-scrolling app-frame) paints over the sheet footer, hiding "Применить". */
body.ex-filter-open .bottom-nav { display: none; }

.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: #48535F; }
[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;
}

/* R3-B2: exercises picker banner */
.exercises-pick-banner {
  background: var(--surface-2, #f3f4f6);
  color: var(--text-muted, #6b7280);
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  margin: 0.5rem 1rem 0;
}

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

/* ── Wrapper ─────────────────────────────────────────────── */
.ex-detail {
  /* bottom-nav is 72px tall — keep the last card clear of it (same as .wp-page) */
  padding-bottom: 96px;
}

/* ── 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:    #48535F;
  --muscle-stroke:  #5C6670;
  --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; }
/* Exercise detail: larger muscle map (size=220 → ~110px each SVG, allow more) */
.muscle-map-wrap .body-svg { max-width: 220px; }

.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;
}

/* render_body() output classes — mm-base muted, mm-hi uses inline fill */
.mm-body { display: flex; gap: 12px; justify-content: center; }
.mm-svg  { height: auto; display: block; }
.mm-base {
  fill: var(--muscle-fill);
  stroke: var(--muscle-stroke);
  stroke-width: 0.14;
  stroke-linejoin: round;
}
.mm-hi {
  /* fill set inline by render_body(); stroke inherits fill for crisp edge */
  stroke-width: 0.22;
  stroke: inherit;
  stroke-linejoin: round;
}

/* Dark-mode base fill for render_body() SVG (--mm-base is the CSS var used by the
   SVG fill attribute; --muscle-fill covers the old .mm-base class path) */
[data-theme="dark"] {
  --mm-base: #48535F;
}

/* ── Recovery widget v3 (inside .chart-card.recovery-widget) ─── */

/* All-fresh state */
.recovery-fresh-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0 4px;
}

.recovery-fresh-msg {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

/* Centered silhouettes */
.recovery-silhouettes {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.recovery-silhouettes .mm-body {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* v3 group list */
.recovery-v3-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recovery-v3-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  list-style: none;   /* override pico ul li { list-style: square } */
}

.recovery-v3-item:last-child { border-bottom: none; }

.recovery-v3-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Fix gi-base / gi-on coloring in recovery context */
.recovery-v3-icon .gi-base { fill: var(--muscle-fill, #E7E4DE); }
.recovery-v3-icon .gi-on  { fill: var(--zone-primary, #ef4444); }

.recovery-v3-body {
  flex: 1;
  min-width: 0;
}

.recovery-v3-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.recovery-v3-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.recovery-v3-pct {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.recovery-v3-pct.pct-low  { color: #EF4444; }
.recovery-v3-pct.pct-mid  { color: #F59E0B; }
.recovery-v3-pct.pct-ok   { color: #22C55E; }

.recovery-v3-bar-wrap {
  height: 5px;
  border-radius: 3px;
  background: var(--track-bg, #E5E7EB);
  overflow: hidden;
  margin-bottom: 3px;
}

.recovery-v3-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.recovery-v3-eta {
  font-size: 11px;
  color: var(--text-muted);
}

/* Detail expandable */
.recovery-detail {
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

.recovery-detail-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}

.recovery-detail-toggle::-webkit-details-marker { display: none; }

.recovery-detail-toggle::before {
  content: "▸";
  font-size: 10px;
  transition: transform var(--t-fast);
  flex-shrink: 0;
}

.recovery-detail[open] .recovery-detail-toggle::before {
  transform: rotate(90deg);
}

.recovery-detail-body {
  padding-bottom: 4px;
}

.recovery-v3-list--full {
  margin-top: 8px;
}

/* Legacy selectors kept for back-compat (bot-facing templates may use them) */
.recovery-body { display: flex; flex-direction: column; gap: 12px; }
.recovery-list  { list-style: none; margin: 0; padding: 0; }
.recovery-item  { padding: 6px 0; border-bottom: 1px solid var(--border); }
.recovery-item:last-child { border-bottom: none; }
.recovery-group { font-size: 14px; font-weight: 500; }
.recovery-freshness { font-size: 14px; font-weight: 600; }
.recovery-eta { font-size: 12px; color: var(--text-muted); }
.recovery-more summary { font-size: 13px; color: var(--text-muted); cursor: pointer; }

/* ── Recovery widget round 5 S redesign (recovery-r5-*) ───────── */
.recovery-r5-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.recovery-r5-overall {
  display: flex;
  align-items: center;
  gap: 5px;
}

.recovery-r5-ring {
  display: block;
  /* rotate so arc starts at top */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.recovery-r5-pct {
  font-size: 13px;
  font-weight: 700;
  min-width: 30px;
  text-align: right;
}

/* Two-column body layout */
.recovery-r5-body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.recovery-r5-silhouettes-link {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  /* Ensure silhouettes fit 375px two-column: ~45% of card width */
  max-width: 46%;
}

.recovery-r5-silhouettes {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.recovery-r5-right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.recovery-r5-all-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #6366F1);
  text-decoration: none;
}

.recovery-r5-all-link:hover { opacity: 0.8; }

.recovery-r5-fresh-msg {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* Mini group list in widget */
.recovery-r5-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.recovery-r5-item {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.recovery-r5-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recovery-r5-name {
  flex: 1 1 0;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge pill — shared between widget and full list */
.recovery-r5-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  letter-spacing: 0.01em;
}

.recovery-r5-badge.badge-neutral {
  background: rgba(255,255,255,0.08);
  color: var(--text-muted, #888);
}

.recovery-r5-badge.badge-pink {
  background: rgba(244,114,182,0.18);
  color: #F472B6;
}

.recovery-r5-badge.badge-red {
  background: rgba(239,68,68,0.18);
  color: #EF4444;
}

/* ── /sport/recovery full-screen list ─────────────────────────── */
.recovery-r5-page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.recovery-r5-back-link {
  display: flex;
  align-items: center;
  color: var(--text-muted, #888);
  text-decoration: none;
  flex-shrink: 0;
}

.recovery-r5-back-link:hover { color: var(--text-primary); }

.recovery-r5-full-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--page-pad) 24px;
}

.recovery-r5-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

/* Square tile (left) */
.recovery-r5-tile {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .recovery-r5-tile { background: rgba(255, 255, 255, 0.06); }

.recovery-r5-tile--pink {
  background: rgba(244,114,182,0.14);
}

.recovery-r5-tile--red {
  background: rgba(239,68,68,0.14);
}

/* Tile silhouettes: the page-level base fill is tuned for big card silhouettes
   and vanishes on the small dark tiles — give tiles their own readable body
   color (competitor look: dark tile, grey body, near-white fresh muscles). */
.recovery-r5-tile .mm-base { fill: #b9c0cb; stroke: rgba(0, 0, 0, 0.15); }
[data-theme="dark"] .recovery-r5-tile .mm-base { fill: #4a5262; stroke: rgba(0, 0, 0, 0.35); }
:root { --mm-tile-fresh: #8f98a5; }
[data-theme="dark"] { --mm-tile-fresh: #dfe4ea; }

/* Middle: name + status */
.recovery-r5-row-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recovery-r5-row-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recovery-r5-row-status {
  font-size: 12px;
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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 — translucent red per mockup (dark default) */
.muscle-chip--primary {
  background: rgba(239,68,68,.18);
  border: 1px solid rgba(239,68,68,.55);
  color: #d9d9de;
  font-weight: 500;
}

/* Secondary chips — translucent pink per mockup */
.muscle-chip--secondary {
  background: rgba(226,92,146,.16);
  border: 1px solid rgba(226,92,146,.5);
  color: #d9d9de;
  font-weight: 500;
}

/* Light theme overrides */
:root:not([data-theme="dark"]) .muscle-chip--primary {
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.45);
  color: #3f3f46;
}
:root:not([data-theme="dark"]) .muscle-chip--secondary {
  background: rgba(226,92,146,.10);
  border-color: rgba(226,92,146,.4);
  color: #3f3f46;
}


/* ── Section card (TC-style neutral grey block, replaces colored fills) ── */
.ex-sec-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px;
  margin-bottom: 14px;
}

/* ── Общая рекомендация — grey card, purple only on icon+label ── */
.ex-rec {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ex-rec-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(139,124,247,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #8b7cf7;
}
.ex-rec-label {
  font-size: 12px;
  font-weight: 700;
  color: #8b7cf7;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.ex-rec-grid {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.ex-rec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ex-rec-val {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.ex-rec-name {
  font-size: 12px;
  color: var(--text-muted);
}
.ex-rec-sep {
  width: 1px;
  height: 26px;
  background: var(--border);
  align-self: center;
  flex-shrink: 0;
}

/* ── Эффект упражнения — effect rings ─────────────────── */
.ex-rings {
  display: flex;
  justify-content: space-around;
}
.ex-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.ex-ring svg {
  transform: rotate(-90deg);
  overflow: visible;
}
.ex-ring-track {
  fill: none;
  stroke: #26262a;
}
:root:not([data-theme="dark"]) .ex-ring-track {
  stroke: #e8e8e3;
}
.ex-ring-arc {
  fill: none;
  stroke: #30d158;
  stroke-linecap: round;
}
.ex-ring-txt {
  text-align: center;
  min-width: 0;
  max-width: 100%;
}
.ex-ring-pct {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.ex-ring-name {
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Technique steps D3 — green check icons ──────────── */
.ex-steps-d3 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ex-step-d3 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ex-step-d3-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(48,209,88,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ex-step-d3-text {
  font-size: 14px;
  line-height: 1.5;
  color: #d5d5da;
  margin: 0;
  flex: 1;
}
:root:not([data-theme="dark"]) .ex-step-d3-text {
  color: #3a3a41;
}

/* ── Mistakes caution header + D3 dont icons ─────────── */
.ex-caution-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.ex-caution-title {
  font-size: 12px;
  font-weight: 700;
  color: #ff9f0a;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ex-mistakes-d3 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ex-mistake-d3 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ex-mistake-d3-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,159,10,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ex-mistake-d3-text {
  font-size: 14px;
  line-height: 1.5;
  color: #d5d5da;
  margin: 0;
  flex: 1;
}
:root:not([data-theme="dark"]) .ex-mistake-d3-text {
  color: #3a3a41;
}

/* ── Safety — teal shield, grey card (no tinted bg) ─── */
.ex-safety-new {
  display: flex;
  gap: 12px;
}
.ex-safety-new-icon {
  flex-shrink: 0;
  color: #37c9b0;
  margin-top: 2px;
}
.ex-safety-new-head {
  font-size: 12px;
  font-weight: 700;
  color: #37c9b0;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.ex-safety-new-text {
  font-size: 14px;
  line-height: 1.5;
  color: #d5d5da;
  margin: 0;
}
:root:not([data-theme="dark"]) .ex-safety-new-text {
  color: #3a3a41;
}

/* ── Related exercises row ───────────────────────────── */
.ex-rel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  text-decoration: none;
  color: inherit;
}
.ex-rel-row + .ex-rel-row {
  border-top: 1px solid var(--border);
}
.ex-rel-thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
:root:not([data-theme="dark"]) .ex-rel-thumb {
  border: 1px solid #ececec;
}
.ex-rel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ex-rel-name {
  font-size: 14.5px;
  font-weight: 600;
  flex: 1;
  line-height: 1.35;
  color: var(--text-primary);
}
.ex-rel-chev {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* sec-label for new sections (same as muscle-map-title style) */
.ex-sec-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════
   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: var(--page-pad);
}
.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;
}

/* Card-bearing bubbles (meal/workout/photo drafts): full width, no letter-breaking */
.nb-bubble--card {
  max-width: 100%;
  width: 100%;
  word-break: normal;
}

.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: flex-end;        /* buttons hug the bottom as the textarea grows */
  gap: 8px;
  padding: 10px var(--page-pad) 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;
  min-height: 42px;
  max-height: 124px;          /* ~5 lines, then scrolls — Telegram-style */
  border: 1.5px solid var(--border-strong);
  border-radius: 21px;
  padding: 8px 16px;
  font-size: 16px;            /* >= 16px stops iOS focus auto-zoom */
  line-height: 1.4;
  font-family: var(--font);
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  resize: none;              /* JS auto-grows height; no manual drag handle */
  overflow-y: auto;
  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%; }

/* NL-delete confirm card (chat) */
.nb-delete-card {
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-radius: 12px;
  background: var(--surface);
}
.nb-delete-line { font-size: 14px; margin-bottom: 10px; }
.nb-delete-name { font-weight: 600; color: var(--text); }
.nb-delete-meta { color: var(--text-muted); }
.nb-delete-actions { display: flex; gap: 8px; }
.nb-delete-confirm,
.nb-delete-cancel {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
}
.nb-delete-confirm { background: var(--danger); color: #fff; border-color: var(--danger); }
.nb-delete-confirm:disabled,
.nb-delete-cancel:disabled { opacity: .5; cursor: default; }
.nb-delete-cancel { background: transparent; color: var(--text-secondary); }

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

.progress-header {
  padding: 16px var(--page-pad) 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 var(--page-pad) 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 var(--page-pad) 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 var(--page-pad); }
.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;
}

/* ── «Неделя в норме» (SSR circles) ─────────────────────────────────────── */
.wir-count { color: var(--green); font-weight: 700; }
.wir-circles {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 8px 0 4px;
}
.wir-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}
.wir-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wir-dot--ok    { background: #22C55E; }
.wir-dot--over  { background: rgba(245,158,11,.95); }
.wir-dot--empty { background: transparent; border: 2px solid var(--border-strong); }
.wir-dot--future { background: transparent; border: 2px dashed var(--border-strong); }
.wir-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
.wir-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.wir-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.wir-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.wir-legend-dot--ok    { background: #22C55E; }
.wir-legend-dot--over  { background: rgba(245,158,11,.95); }
.wir-legend-dot--empty { background: transparent; border: 1.5px solid var(--border-strong); }
.wir-legend-dot--future { background: transparent; border: 1.5px dashed var(--border-strong); }

/* ── «Путь к цели» (SSR SVG) ────────────────────────────────────────────── */
.gp-eta { color: var(--green); font-weight: 700; }
.gp-svg-wrap { margin: 6px 0 2px; }
.gp-footer {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}
.gp-footer strong { color: var(--text-primary); font-weight: 700; }

/* 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; }

/* Drag-and-drop reorder handle + SortableJS states */
.ex-drag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 6px;
  color: var(--green); /* founder pick V3: green bars */
  opacity: 0.8;
  cursor: grab;
  touch-action: none; /* SortableJS owns the touch gesture */
}
.ex-drag:active { cursor: grabbing; }
/* Q11: exercise name text brighter — was inheriting text-primary but with low contrast in dark */
.exercise-row > span:not([class]) { flex: 1; min-width: 0; color: var(--text-primary); font-weight: 500; }
.sortable-ghost { opacity: 0.4; }
/* Grabbed row (founder pick): lifted shadow + green dashed frame + slight tilt,
   animated pick-up so the grab reads as motion, not a style flip */
.sortable-chosen {
  background: rgba(127, 127, 127, 0.08);
  border: 1px dashed var(--green);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transform: rotate(-0.6deg) scale(1.01);
  animation: nb-grab-pop 0.18s ease-out;
}
.sortable-chosen .ex-drag { opacity: 1; }

@keyframes nb-grab-pop {
  from { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sortable-chosen { animation: none; }
}

.ex-sets {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  margin-left: 8px;
}
/* Q10: cardio entry badge — duration in muted text, no sets×reps */
.ex-sets--cardio {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 12px;
}

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

.program-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.program-name-row .program-name {
  margin-bottom: 0;
  flex: 1;
  margin-bottom: 8px;
}

.program-entry-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  flex-shrink: 0;
  padding: 4px;
  margin-bottom: 4px;
}

.program-entry-nav-link:hover {
  color: var(--accent-color, var(--text-primary));
}

/* 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)}

/* ── Feedback (day page): entry card + sheet ─────────────── */
.feedback-entry{width:100%;text-align:left;font:inherit;cursor:pointer}
.feedback-entry-chevron{margin-left:auto;flex-shrink:0;color:var(--text-secondary)}
.fb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.fb-field{position:relative;margin-bottom:8px}
.fb-field .fb-textarea{display:block;min-height:110px;padding-right:48px;resize:none}
.fb-mic{position:absolute;right:8px;bottom:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--accent-dim);color:var(--green);cursor:pointer}
#feedback-submit:disabled{opacity:.55;cursor:default}

.recipes-home{padding:16px var(--page-pad) 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:var(--page-pad)}
.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-h2-note{font-size:12px;font-weight:500;color:var(--text-muted)}
.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;scroll-padding:0 var(--page-pad);margin:0 calc(-1 * var(--page-pad));padding:2px var(--page-pad) 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 var(--page-pad) 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; }
/* Neutral "processing in background" notice — neither success nor failure */
.import-result--wait { background: #FEF3C7; color: #92400E; }
[data-theme="dark"] .import-result--ok { background: rgba(22,163,74,.15); color: #86efac; }
[data-theme="dark"] .import-result--wait { background: rgba(245,158,11,.12); color: #fcd34d; }

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

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

/* ── Step header ────────────────────────────────────────── */
.nb-onb-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 6px;
  flex-shrink: 0;
}

.nb-onb-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--font);
  transition: opacity var(--t-fast);
}

.nb-onb-back:hover { opacity: .8; }

.nb-onb-segs {
  display: flex;
  gap: 5px;
  flex: 1;
}

.nb-onb-segs i {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background .25s;
}

.nb-onb-segs i.done {
  background: var(--green-ring);
}

.nb-onb-skip {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 0;
}

/* ── Step body layout ───────────────────────────────────── */
.nb-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: nb-fadein 220ms ease-out;
  overflow-y: auto;
}

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

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

.nb-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nb-step-nav {
  padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 26px);
  flex-shrink: 0;
}

/* ── Step text ──────────────────────────────────────────── */
.nb-onb-stepno {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 14px 24px 0;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nb-onb-q {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.22;
  padding: 6px 24px 4px;
  color: var(--text-primary);
}

.nb-onb-sub {
  font-size: 14.5px;
  color: var(--text-secondary);
  padding: 0 24px;
  line-height: 1.5;
  margin-bottom: 2px;
}

.nb-onb-sublabel {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 22px 24px 0;
}

/* ── Eyebrow / title for plan/guide ───────────────────────*/
.nb-onb-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 26px 24px 0;
  letter-spacing: .04em;
  text-transform: uppercase;
}

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

.nb-onb-footnote {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 12px 24px 0;
}

/* ── Welcome ring (step 0) ──────────────────────────────── */
.nb-onb-welcome-ring {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.nb-onb-welcome-leaf {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}

.nb-onb-welcome-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 28px 0;
  text-align: center;
}

.nb-onb-welcome-name {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 22px;
}

.nb-onb-welcome-tag {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.5;
}

.nb-onb-welcome-feats {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 24px;
  align-items: flex-start;
  width: 100%;
  max-width: 280px;
}

.nb-onb-welcome-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--text-secondary);
  text-align: left;
}

.nb-onb-welcome-feat-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,.12);
  color: var(--green);
}

/* ── Consent (step 0) ───────────────────────────────────── */
.nb-onb-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 0 4px;
  margin-bottom: 12px;
  cursor: pointer;
}

.nb-onb-consent-cb-wrap {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all var(--t-fast);
}

.nb-onb-consent.on .nb-onb-consent-cb-wrap {
  background: var(--green-ring);
  border-color: var(--green-ring);
  color: #fff;
}

.nb-onb-consent p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  text-align: left;
  margin: 0;
}

.nb-onb-consent a {
  color: var(--green);
  text-decoration: none;
}

/* hidden checkbox backing the consent toggle */
.nb-onb-consent-cb {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ── Card options (goal / sex / neat) ───────────────────── */
.nb-onb-optlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 0;
}

.nb-onb-optlist--tight {
  gap: 8px;
}

.nb-onb-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--text-primary);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.nb-onb-opt--slim {
  padding: 11px 16px;
}

.nb-onb-opt-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}

.nb-onb-opt-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.nb-onb-opt-title {
  font-size: 16px;
  font-weight: 700;
  display: block;
  color: var(--text-primary);
}

.nb-onb-opt-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 1px;
  line-height: 1.35;
  display: block;
}

.nb-onb-opt-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all var(--t-fast);
}

/* selected state */
.nb-onb-opt.active {
  border-color: var(--green-ring);
  background: rgba(34,197,94,.06);
}

.nb-onb-opt.active .nb-onb-opt-icon {
  background: rgba(34,197,94,.14);
  color: var(--green);
}

.nb-onb-opt.active .nb-onb-opt-radio {
  border-color: var(--green-ring);
  /* checkmark painted here so every option gets it, not only ones with an inline svg */
  background: var(--green-ring) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
  color: #fff;
}

/* ── Numeric field with steppers ────────────────────────── */
.nb-onb-numwrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 0;
}

.nb-onb-numfield {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color var(--t-fast);
}

.nb-onb-numfield.focus,
.nb-onb-numfield:focus-within {
  border-color: var(--green-ring);
}

.nb-onb-numfield-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.nb-onb-numfield-val {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  /* allow editing inline */
  border: none;
  background: none;
  width: 80px;
  min-width: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield;
}

.nb-onb-numfield-val::-webkit-inner-spin-button,
.nb-onb-numfield-val::-webkit-outer-spin-button { -webkit-appearance: none; }

/* modern engines: input hugs its value so the unit sits right next to it */
@supports (field-sizing: content) {
  .nb-onb-numfield-val {
    field-sizing: content;
    width: auto;
    min-width: 2ch;
    max-width: 150px;
  }
}

.nb-onb-numfield-val::placeholder { color: var(--text-muted); font-weight: 600; }

.nb-onb-numfield-unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
  flex-shrink: 0;
}

.nb-onb-stepper {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.nb-onb-stepper button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 600;
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity var(--t-fast);
}

.nb-onb-stepper button:hover { opacity: .8; }

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

/* ── Intensity buttons (training step) ──────────────────── */
.nb-onb-int-row {
  display: flex;
  gap: 8px;
  padding: 10px 20px 0;
}

.nb-onb-intbtn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 14px;
  text-align: center;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.nb-onb-intbtn-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 2px;
}

.nb-onb-intbtn.active {
  border-color: var(--green-ring);
  background: rgba(34,197,94,.06);
}

/* ── Sport chips ────────────────────────────────────────── */
.nb-onb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 18px 20px 0;
}

.nb-onb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.nb-onb-chip svg {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color var(--t-fast);
}

.nb-onb-chip.active {
  border-color: var(--green-ring);
  background: rgba(34,197,94,.08);
}

.nb-onb-chip.active svg {
  color: var(--green);
}

/* ── Allergy free-text (restrictions step) ─────────────── */
.nb-onb-allergy-wrap {
  padding: 14px 20px 0;
}

.nb-onb-allergy-input {
  width: 100%;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  outline: none;
  transition: border-color var(--t-fast);
}

.nb-onb-allergy-input:focus {
  border-color: var(--green-ring);
}

.nb-onb-allergy-input::placeholder {
  color: var(--text-muted);
}

/* ── Navigation buttons ────────────────────────────────── */
.nb-onb-btn-next,
.nb-onb-btn-go,
.nb-guide-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border-radius: 16px;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  box-shadow: 0 8px 24px rgba(22,163,74,.35);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity var(--t-fast);
}

.nb-onb-btn-next:disabled {
  opacity: .4;
  cursor: default;
  box-shadow: none;
}

.nb-onb-btn-next:not(:disabled):hover,
.nb-onb-btn-go:hover,
.nb-guide-go:hover { opacity: .9; }

/* ghost secondary button (import skip) */
.nb-onb-btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: 16px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  margin-top: 10px;
}

/* ── Loader ──────────────────────────────────────────────── */
#nb-loader {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  animation: nb-fadein 220ms ease-out;
}

#nb-loader[hidden] { display: none; }

.nb-loader-ring {
  display: block;
  animation: nb-spin 1.2s linear infinite;
}

@keyframes nb-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nb-loader-ring { animation: none; }
}

.nb-loader-title {
  font-size: 22px;
  font-weight: 700;
  margin-top: 28px;
  text-align: center;
  color: var(--text-primary);
}

.nb-loader-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 8px;
  text-align: center;
  line-height: 1.5;
}

/* ── Plan reveal (step 9) ───────────────────────────────── */
.nb-plan-hero {
  margin: 18px 20px 0;
  border-radius: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 24px 20px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.nb-plan-glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 120%;
  background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(34,197,94,.14), transparent 70%);
  pointer-events: none;
}

.nb-plan-bigring {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 4px auto 0;
}

.nb-plan-bigring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nb-plan-kcal-num {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nb-plan-kcal-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
}

.nb-plan-macros {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 18px;
}

.nb-plan-pm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.nb-plan-pm-ring {
  position: relative;
  width: 58px;
  height: 58px;
}

.nb-plan-pm-ring b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.nb-plan-pm-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.nb-plan-delta {
  margin: 16px 24px 0;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: left;
}

.nb-plan-delta b {
  color: var(--text-primary);
}

.nb-plan-eta {
  margin: 14px 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(34,197,94,.07);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: left;
}

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

.nb-plan-eta b {
  color: var(--text-primary);
}

.nb-plan-eta-icon {
  color: var(--green);
  flex-shrink: 0;
}

.nb-plan-floor-notice {
  margin: 10px 20px 0;
  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; }

/* ── Import step ────────────────────────────────────────── */
#nb-import {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: nb-fadein 220ms ease-out;
}
#nb-import[hidden] { display: none; }

.nb-import-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 6px;
}

.nb-import-card {
  margin: 20px 20px 0;
  border-radius: 20px;
  border: 1.5px dashed var(--border-strong);
  background: var(--bg-card);
  padding: 26px 20px;
  text-align: center;
}

.nb-import-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin: 0 auto;
  background: rgba(34,197,94,.12);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-import-title {
  font-size: 16.5px;
  font-weight: 700;
  margin-top: 14px;
  color: var(--text-primary);
}

.nb-import-sub {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 6px;
}

.nb-import-formats {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.nb-import-formats i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--text-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
}

.nb-import-msg {
  font-size: 14px;
  color: var(--green);
  text-align: center;
  margin: 14px 20px 0;
  font-weight: 600;
  line-height: 1.5;
}

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

.nb-import-foot {
  padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 26px);
  margin-top: auto;
}

/* ── Guide (2×2 cards) ──────────────────────────────────── */
.nb-guide {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: nb-fadein 220ms ease-out;
}
.nb-guide[hidden] { display: none; }

.nb-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 20px 20px 0;
  flex: 1;
  align-content: start;
}

.nb-guide-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 14px;
}

.nb-guide-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(34,197,94,.12);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-guide-card-title {
  font-size: 14.5px;
  font-weight: 700;
  margin-top: 10px;
  color: var(--text-primary);
}

.nb-guide-card-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 3px;
}

/* ── Dark overrides ─────────────────────────────────────── */
[data-theme="dark"] .nb-plan-floor-notice {
  background: rgba(217,119,6,.18);
  color: #fbbf24;
}
[data-theme="dark"] .nb-onb-opt.active {
  background: rgba(34,197,94,.10);
}
[data-theme="dark"] .nb-onb-chip.active {
  background: rgba(34,197,94,.12);
}
[data-theme="dark"] .nb-onb-intbtn.active {
  background: rgba(34,197,94,.10);
}
[data-theme="dark"] .nb-onb-back {
  border-color: var(--border-strong);
}
[data-theme="dark"] .nb-onb-numfield-val {
  color: var(--text-primary);
}
[data-theme="dark"] .import-result--err { background: rgba(239,68,68,.12); color: #fca5a5; }
[data-theme="dark"] .nb-plan-eta {
  background: rgba(34,197,94,.10);
}

/* ── Personal food library (/foods) ───────────────────────── */
.foods-page { padding: 16px 16px 100px; }
.foods-tabs { margin-bottom: 16px; }
.food-cards { display: flex; flex-direction: column; gap: 12px; }
.food-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: 10px 12px;
}
/* Gradient tile with SVG icon — replaces emoji */
.food-card-tile {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.food-card-body { flex: 1; min-width: 0; }
.food-card-name { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.food-card-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.food-card-gram { color: var(--text-secondary); font-size: 12px; }
.food-card-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.food-card-kcal { font-size: 13px; font-weight: 700; color: var(--green); }
.food-card-actions {
  display: flex; align-items: center; gap: 6px;
}
.food-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  border-radius: 999px; 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; border-radius: var(--radius-sm);
}
.food-btn--del:hover { color: #EF4444; border-color: #EF4444; }
.food-log-ack { font-size: 12px; color: var(--green); min-height: 16px; }

/* «К рецептам» link button in empty favorites state */
.btn-link-recipes {
  display: inline-block; margin-top: 12px; padding: 8px 20px;
  background: var(--green); color: #fff; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.btn-link-recipes:hover { opacity: .85; }

/* Sheet — Мои блюда icon */
.icon-myfoods { background: rgba(224,71,107,.12); border: 1.5px solid #E0476B; color: #E0476B; }

/* Meal card — save to library button (in bot/chat sheet context only; day-card uses .mc-btn-save) */
.meal-save:not(.mc-btn) {
  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:not(.mc-btn):hover { color: var(--green); }

/* 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;
}

/* ══════════════════════════════════════════════════════════
   PROGRAM PAGE (/program)
   ══════════════════════════════════════════════════════════ */

.program-page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 10px;
}

/* Meta card (days/week, goal, header_note) */
.program-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.program-meta-label {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.program-meta-val {
  font-weight: 600;
  color: var(--text-primary);
}

.program-header-note {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.45;
}

.program-note-ic {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Days card wrapping the accordion fragment */
/* ── Program regen / edit response notice cards ─────────────── */
.program-error-notice,
.program-stale-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 8px 0;
}
.program-error-notice::before,
.program-stale-notice::before {
  content: "⏳";
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}
.program-error-notice {
  background: color-mix(in srgb, var(--bg-card) 90%, var(--amber, #F59E0B) 10%);
  border-color: color-mix(in srgb, var(--border) 60%, var(--amber, #F59E0B) 40%);
  flex-wrap: wrap;
}
/* Retry button inside a failure notice drops to its own full-width row */
/* Loading spinner for regen button */
@keyframes spin-regen {
  to { transform: rotate(360deg); }
}
.regen-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-regen 0.7s linear infinite;
  vertical-align: middle;
}

/* Per-exercise edit affordance (⋯ button, unlocked only) */
.ex-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  transition: background var(--t-fast), color var(--t-fast);
}

.ex-edit-btn:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

/* Bottom action buttons */
/* Inline coach-edit panel (toggled by «Попросить тренера») */
.program-coach-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-bottom: 16px;
}

.program-coach-panel .sheet-title {
  font-size: 16px;
  margin-bottom: 12px;
}

.program-coach-panel .sheet-field { margin-bottom: 12px; }

.sheet-label,
.program-edit-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.sheet-textarea,
.program-edit-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  resize: vertical;
}

.sheet-textarea:focus,
.program-edit-input:focus {
  outline: none;
  border-color: var(--green-ring);
}

/* Manual per-exercise edit sheet */
.program-edit-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.program-edit-action {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
}

.program-edit-action--danger { color: var(--danger); }

.program-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Base style for any .btn-primary — keeps buttons visible without a companion class.
   width:100% intentionally omitted here; compound selectors below add it where needed. */
.btn-primary {
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary.sheet-submit-btn,
.btn-primary.program-edit-submit,
.btn-primary.wp-finish-submit,
.btn-primary.wp-input-submit,
.btn-primary.wp-xs-cardio-btn,
.btn-primary.wp-cele-btn {
  width: 100%;
  margin-top: 4px;
}

.program-inline-error {
  color: var(--danger);
  font-size: 13px;
  margin: 8px 0 0;
  min-height: 0;
}
.program-inline-error:empty { margin: 0; }

.regen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-left: 2px;
}

.regen-badge--empty {
  background: var(--text-muted);
}

/* Empty state on /program */
.program-empty-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 32px 20px;
  text-align: center;
  margin-top: 8px;
}

.program-empty-icon {
  color: var(--text-muted);
  margin-bottom: 12px;
}

.program-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.program-empty-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
}

.program-build-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Q9: green primary button — color+bg were missing, causing dark-on-dark in dark mode */
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.program-build-cta:active { opacity: 0.85; }

/* Empty-state fragment inside _program_body.html */
.program-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.program-build-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── /progress entry-point card ────────────────────────────────────────────── */

.program-entry-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.program-entry-card {
  position: relative;
  transition: box-shadow var(--t-fast);
}

.program-entry-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.program-entry-card--empty {
  padding: 16px 14px;
}

/* Compact program card on /sport */
.program-entry-card--compact {
  padding: 12px 14px 8px;
}

.program-compact-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.program-day-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.program-day-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary); /* Q8: override a{color:green} — each row is clean text, not a link blob */
  border-radius: 8px;
  transition: background var(--t-fast);
}

.program-day-link:hover { background: var(--bg-muted); }
.program-day-link:active { background: var(--bg-muted); opacity: 0.8; }

.program-day-link:first-child {
  border-top: none;
}

.program-day-link-name {
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 44px;
}

.program-day-link-focus {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-day-link svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.program-entry-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

/* «Что доесть до нормы» — one-tap AI suggestion on the day screen */
.suggest-block { margin: 14px var(--page-pad) 4px; }
.suggest-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px; border: none; border-radius: 14px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
}
.suggest-btn:active { opacity: 0.85; }
.suggest-btn:disabled { opacity: 0.6; cursor: default; }
.suggest-result {
  margin-top: 10px; padding: 14px 16px; border-radius: 14px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border);
  font-size: 14px; line-height: 1.5; white-space: pre-wrap;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.10);
}

/* Water tracking card on the day screen */
.water-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  padding: 10px 14px 12px;
  margin: 10px var(--page-pad) 6px;
}
/* Row 1: icon · label · amount · + button — all in one flex row */
.water-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* legacy .water-row kept for back-compat (bot templates) */
.water-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.water-icon { display: inline-flex; flex-shrink: 0; }
.water-label { font-size: 14px; font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
.water-amount { font-size: 13px; font-weight: 500; color: var(--text-secondary, #6b7280); margin-left: auto; }
.water-add-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: #38BDF8;
  padding: 0;
  margin-left: 6px;
}
.water-add-btn:active { opacity: 0.85; }
/* Row 2: full-width progress bar */
.water-bar-row { margin-top: 8px; }
.water-bar { height: 6px; border-radius: 3px; background: var(--track-bg, #E5E7EB); overflow: hidden; }
.water-bar-fill { height: 100%; background: linear-gradient(90deg, #7DD3FC, #38BDF8); transition: width 0.3s ease; }
.water-chips {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.water-chips[hidden] {
  display: none;
}
.water-chip {
  flex: 1;
  min-width: 60px;
  padding: 6px 8px;
  border: 1px solid #38BDF8;
  border-radius: 8px;
  background: transparent;
  color: #38BDF8;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background var(--t-fast);
}
.water-chip:active { background: rgba(56, 189, 248, 0.15); }

/* Target-change confirm button (calorie norm — primary green, not danger-red) */
.nb-target-confirm { background: var(--green); border-color: var(--green); }

/* Telegram-style voice recording bar */
.nb-rec-bar {
  position: fixed; left: 12px; right: 12px; bottom: 78px; z-index: 1200;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
.nb-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #EF4444; flex: none;
  animation: nb-rec-pulse 1s ease-in-out infinite; }
.nb-rec-main { font-size: 14px; color: var(--text-primary); }
.nb-rec-timer { font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.nb-rec-actions { margin-left: auto; display: flex; gap: 8px; }
.nb-rec-cancel, .nb-rec-done {
  padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.nb-rec-cancel { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.nb-rec-done { background: var(--green); color: #fff; border: none; }

/* Sport-profile onboarding form (program.html) — segmented pills, clean inputs */
#sport-onboarding-form { text-align: left; margin-top: 8px; }
.sport-fieldset { border: none; margin: 0 0 16px; padding: 0; }
.sport-legend { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; padding: 0; }
.sport-opt { font-weight: 400; opacity: 0.7; }
.seg-group, .inv-group { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-input, .inv-input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-label, .inv-label {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary);
  font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
}
.seg-label:has(.seg-input:checked),
.inv-label:has(.inv-input:checked) { background: var(--green); border-color: var(--green); color: #fff; }
.sport-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; margin-top: 4px;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary);
  font-size: 14px; font-family: inherit; resize: none;
}
.sport-textarea::placeholder { color: var(--text-secondary); }

/* Program type cards (split_pref) — 2×2 grid */
.split-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.split-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg-card); cursor: pointer; user-select: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.split-card.active {
  border-color: var(--green);
  background: var(--accent-dim);
}
.split-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.split-card-sub   { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.split-card.active .split-card-title { color: var(--green); }

/* ── sport.html page ─────────────────────────────────────────── */
/* Chart-cards and sport-specific elements are direct children of the flush container
   (no wrapper pane), so we add horizontal margin here to match the 16px content gutter
   used by stat-cards, progress-header, and seg-pane on the same pages. */
.container.flush > .chart-card { margin: 0 var(--page-pad) 12px; }
/* program page: non-chart-card elements need the same horizontal gutter */
.container.flush > .program-page-header,
.container.flush > .program-empty-card,
.container.flush > .program-coach-panel { margin-left: var(--page-pad); margin-right: var(--page-pad); }
/* wave 5 program redesign — new classes need the same gutter */
.container.flush > .pr-page-header,
.container.flush > .pr-hero,
.container.flush > .pr-facts,
.container.flush > .pr-days-rail,
.container.flush > .pr-today-badge,
.container.flush > .pr-cta-btn,
.container.flush > .pr-more-sheet,
.container.flush > .program-coach-panel { margin-left: var(--page-pad); margin-right: var(--page-pad); }
.program-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.program-cta-btn:active { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════════════
   PROGRAM PAGE REDESIGN (wave 5)
   ══════════════════════════════════════════════════════════════════════ */

/* Header row */
.pr-page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 10px;
}
.pr-back-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--text-secondary); background: none; border: none;
  flex-shrink: 0; padding: 0; cursor: pointer;
  transition: background var(--t-fast);
}
.pr-back-btn:hover { background: var(--bg-muted); }
.pr-page-title {
  font-size: 18px; font-weight: 700;
  color: var(--text-primary); margin: 0; flex: 1;
}
.pr-more-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--text-secondary); background: var(--bg-muted);
  border: 1px solid var(--border); flex-shrink: 0; cursor: pointer;
  transition: background var(--t-fast);
}
.pr-more-btn:hover { background: var(--bg-card); }

/* Hero collage card */
.pr-hero {
  position: relative; margin: 4px 0 0;
  border-radius: 20px; overflow: hidden;
  height: 154px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; color: #fff;
}
.pr-hero-collage {
  position: absolute; inset: 0;
  display: flex; overflow: hidden;
}
.pr-hero-collage img {
  flex: 1; min-width: 0; height: 100%;
  object-fit: cover; opacity: .30; filter: saturate(.4);
}
.pr-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.60) 0%, rgba(0,0,0,.08) 60%);
}
.pr-hero-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 11.5px; font-weight: 800;
  background: rgba(255,255,255,.90); color: #111;
  border-radius: 999px; padding: 4px 11px;
}
.pr-hero-body { position: relative; }
.pr-hero-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.pr-hero-sub { font-size: 12.5px; opacity: .85; margin-top: 3px; }

/* Facts 2×2 grid */
.pr-facts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-top: 12px;
}
.pr-fact {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.pr-fact-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}
.pr-fact-label.c-blue   { color: #3b82f6; }
.pr-fact-label.c-green  { color: var(--green-ring, #22C55E); }
.pr-fact-label.c-amber  { color: #f59e0b; }
.pr-fact-label.c-violet { color: #a78bfa; }
.pr-fact-val {
  font-size: 20px; font-weight: 800;
  letter-spacing: -.01em; color: var(--text-primary);
  line-height: 1.1;
}
.pr-fact-val--sm { font-size: 15px; }
.pr-fact-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }

/* Days carousel */
.pr-days-rail {
  display: flex; gap: 10px;
  padding: 14px 0 4px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pr-days-rail::-webkit-scrollbar { display: none; }
.pr-dayc {
  position: relative; flex: 0 0 128px; height: 148px;
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 11px; color: #fff; text-decoration: none;
  cursor: pointer; transition: transform 0.15s;
}
.pr-dayc:active { transform: scale(.97); }
.pr-dayc img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .30; filter: saturate(.4);
}
.pr-dayc-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62), transparent 60%);
}
.pr-dayc-body { position: relative; }
.pr-dayc-num {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; opacity: .8;
}
.pr-dayc-name {
  font-size: 13px; font-weight: 800; line-height: 1.2;
  margin-top: 2px;
}
.pr-dayc-count { font-size: 11px; opacity: .75; margin-top: 2px; }

/* "Today by plan" badge */
.pr-today-badge {
  display: flex; align-items: center; gap: 7px;
  margin: 4px 0 0;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.pr-today-badge[hidden] { display: none; }
.pr-today-badge svg { color: var(--green, #22C55E); flex-shrink: 0; }

/* CTA button */
.pr-cta-btn {
  display: flex; align-items: center; justify-content: center;
  margin: 14px 0 0; height: 54px; border-radius: 16px;
  font-size: 16.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  box-shadow: 0 8px 24px rgba(22,163,74,.30);
  text-decoration: none; border: none; cursor: pointer;
  transition: opacity var(--t-fast);
}
.pr-cta-btn:active { opacity: 0.85; }

/* Dots menu bottom-sheet items — fixed so it overlays regardless of scroll */
.pr-more-sheet {
  position: fixed !important;
  transform: translateY(0) !important; /* override bottom-sheet default off-screen */
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 20px);
}
/* Backdrop for the dots sheet — fixed overlay */
#pr-more-backdrop {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid);
}
#pr-more-backdrop.nb-overlay--visible {
  opacity: 1; pointer-events: all;
}
.pr-sheet-items { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.pr-sheet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 4px; font-size: 15.5px; font-weight: 600;
  color: var(--text-primary); background: none; border: none;
  border-radius: var(--radius-md); cursor: pointer; text-align: left;
  transition: background var(--t-fast);
}
.pr-sheet-item:hover { background: var(--bg-muted); }
.pr-sheet-item:disabled { opacity: .45; cursor: not-allowed; }
.pr-sheet-ic {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-muted); color: var(--text-secondary);
  flex-shrink: 0;
}

/* ── Program Day screen (/program/day/{n}) ───────────────────────────── */
.pd-hero {
  position: relative; height: 170px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px; color: #fff;
  /* negative margin to bleed to page edges */
  margin: 0 calc(-1 * var(--page-pad, 16px));
}
.pd-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .32; filter: saturate(.4);
}
.pd-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,17,23,.90) 0%, rgba(0,0,0,.14) 55%);
}
.pd-hero-top { position: relative; display: flex; justify-content: flex-start; }
.pd-back-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.38); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.pd-hero-body { position: relative; }
.pd-hero-label {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; opacity: .8;
}
.pd-hero-title {
  font-size: 24px; font-weight: 800;
  letter-spacing: -.02em; margin-top: 3px; line-height: 1.2;
}

/* Stats triple */
.pd-stats {
  display: flex; gap: 10px; margin: 14px 0 0;
}
.pd-stat {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 11px 12px;
}
.pd-stat-val {
  font-size: 18px; font-weight: 800;
  letter-spacing: -.01em; color: var(--text-primary);
}
.pd-stat-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  margin-top: 2px;
}

/* Exercise list */
.pd-ex-list {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.pd-ex-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  color: var(--text-primary); text-decoration: none;
  transition: background var(--t-fast);
}
.pd-ex-row + .pd-ex-row { border-top: 1px solid var(--border); }
.pd-ex-row--link:hover { background: var(--bg-muted); }
.pd-ex-row--link:active { background: var(--bg-muted); opacity: .8; }
.pd-ex-thumb {
  width: 46px; height: 46px; border-radius: 12px;
  overflow: hidden; flex-shrink: 0;
  background: var(--bg-muted);
}
.pd-ex-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.pd-ex-thumb--fallback { background: var(--bg-muted); }
.pd-ex-thumb-fallback {
  width: 100%; height: 100%;
  background: var(--bg-muted);
}
.pd-ex-info { flex: 1; min-width: 0; }
.pd-ex-name {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-ex-plan {
  font-size: 12.5px; color: var(--text-muted); margin-top: 1px;
}
.pd-ex-chev {
  color: var(--text-muted); flex-shrink: 0;
}

/* Day CTA extra top margin */
.pd-cta-btn { margin-top: 16px; margin-bottom: 24px; }

/* ── workout player (/workout/live) ─────────────────────────────────── */
.wp-page { padding-top: 10px; padding-bottom: 96px; }
.wp-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.wp-back { color: var(--text-secondary); display: flex; padding: 4px; }
.wp-elapsed { display: flex; align-items: center; gap: 6px; margin-left: auto;
  color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: 15px; }
.wp-elapsed[hidden] { display: none; }
.wp-finish { border: 1px solid var(--border-strong); background: none; color: var(--text-primary);
  border-radius: var(--radius-md); padding: 8px 14px; font-size: 14px; font-weight: 600; }
.wp-title { font-size: 22px; font-weight: 700; margin: 8px 0 16px; }

/* Exercise-screen header mode: TC-style ← title ⋯ in a single row.
   The h1#wp-title is a DOM sibling of .wp-header; we pull it into the header
   row visually via absolute positioning on the page container. */
.wp-page--exercise {
  position: relative; /* positioning context for absolute title */
}
.wp-page--exercise .wp-header {
  height: 52px;
  margin-bottom: 0;
  /* back arrow on left, ex-menu button on right; title overlaid between them */
}
/* Title: overlaid on the header row, centered between the two 48px buttons.
   top: 10px = .wp-page padding-top, so it aligns with the header. */
.wp-page--exercise > .wp-title {
  position: absolute;
  top: 10px;
  left: 48px;
  right: 48px;
  height: 52px;
  line-height: 52px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  pointer-events: none;
  z-index: 2;
}

.wp-day-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.wp-day-card { position: relative; text-align: left; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-card); }
.wp-day-card--empty { border-style: dashed; background: none; box-shadow: none; margin-top: 10px; }
.wp-day-name { font-weight: 700; font-size: 16px; color: var(--text-primary); }
.wp-day-focus { color: var(--text-secondary); font-size: 14px; }
.wp-day-meta { color: var(--text-muted); font-size: 13px; }
.wp-day-badge { position: absolute; top: 12px; right: 12px; background: var(--accent-dim);
  color: var(--accent); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.wp-empty-hint { color: var(--text-secondary); font-size: 14px; margin: 4px 0 12px; }

.wp-ex-name { font-weight: 600; font-size: 16px; }
.wp-menu-btn { background: none; border: none; color: var(--text-muted); padding: 4px; display: flex; }
.wp-restore { background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 4px 10px; font-size: 13px; color: var(--text-secondary); }

.wp-set-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.wp-num { width: 76px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg); color: var(--text-primary);
  font-size: 16px; text-align: center; }

.wp-superset { border: 1.5px solid var(--carb); border-radius: var(--radius-card);
  padding: 8px; margin-bottom: 10px; }
.wp-superset-label { color: var(--carb); font-size: 13px; font-weight: 700; padding: 2px 6px 8px; }

/* ── Muscle groups card (TC-style carded block at top of list) ────────── */
.wp-groups-card { background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 10px 14px 8px;
  box-shadow: var(--shadow-card); margin-bottom: 12px; }
.wp-groups-label { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5; }
.wp-groups-name { color: var(--accent); font-weight: 600; }
.wp-groups-sep { color: var(--text-muted); }

/* ── Muscle strip (tiles row inside the groups card) ──────────────────── */
.wp-strip { display: flex; gap: 8px; align-items: center; padding: 2px 0 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wp-strip::-webkit-scrollbar { display: none; }
.wp-strip-item { flex: none; }
/* Tile containers in the strip need zone-var scope */
.wp-strip-item .mm-body,
.wp-strip-item .mm-body * {
  --zone-primary: #DC2626; --zone-secondary: #E25C92;
}
[data-theme="dark"] .wp-strip-item .mm-body,
[data-theme="dark"] .wp-strip-item .mm-body * {
  --zone-primary: #EF4444; --zone-secondary: #F6A6C1;
}

/* ── Exercise row (TC list layout) ───────────────────────────────────── */
.wp-ex-row { display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 12px 12px; margin-bottom: 8px;
  box-shadow: var(--shadow-card); cursor: pointer; }
.wp-ex-row--skipped { opacity: .55; display: flex; align-items: center; gap: 10px;
  padding: 12px 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); margin-bottom: 8px; }
/* Tile: 64×64 container — grown from 44px for TC photo parity */
.wp-ex-tile { width: 64px; height: 64px; flex: none; display: flex;
  align-items: center; justify-content: center;
  border-radius: 14px; overflow: hidden; background: var(--bg-muted);
  text-decoration: none; color: var(--text-muted); }
.wp-ex-tile--fallback { background: var(--bg-muted); }
/* Photo tile: white bg so exercise photos (white-bg JPEGs) blend on dark */
.wp-ex-tile--photo { background: #fff; border: 1px solid var(--border-strong); }
.wp-ex-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zone vars scoped to tiles so render_body paths pick up the right colors */
.wp-ex-tile .mm-body,
.wp-ex-tile .mm-body * {
  --zone-primary: #DC2626; --zone-secondary: #E25C92;
}
[data-theme="dark"] .wp-ex-tile .mm-body,
[data-theme="dark"] .wp-ex-tile .mm-body * {
  --zone-primary: #EF4444; --zone-secondary: #F6A6C1;
}
/* Middle: name + meta */
.wp-ex-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wp-ex-meta { font-size: 13px; color: var(--text-muted); }
.wp-ex-meta--live { color: var(--accent); font-weight: 600; }
/* Right: ring + ⋯ button */
.wp-ex-right { display: flex; align-items: center; gap: 4px; flex: none; }
/* Progress ring */
.wp-ring { display: block; }
.wp-ring--full circle { stroke: var(--accent); }

.wp-add-btn { width: 100%; border: 1px dashed var(--border-strong); background: none;
  color: var(--text-secondary); border-radius: var(--radius-card); padding: 13px;
  font-size: 15px; margin-top: 2px; }

.wp-rest { position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px); z-index: 80;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: 0 6px 24px rgba(0,0,0,.16);
  padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.wp-rest[hidden] { display: none; }
/* Same display-beats-hidden trap as .wp-rest — [hidden] overrides above. */
.wp-continue-banner[hidden] { display: none; }
.wp-rest-info { display: flex; flex-direction: column; }
.wp-rest-label { font-size: 12px; color: var(--text-muted); }
.wp-rest-time { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wp-rest-track { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-muted); overflow: hidden; }
.wp-rest-fill { height: 100%; background: var(--accent); border-radius: 3px;
  transition: width 400ms linear; }
.wp-rest-skip { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 14px; }

.wp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity var(--t-mid); }
.wp-backdrop--visible { opacity: 1; pointer-events: all; }
.wp-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 210;
  background: var(--bg-card); border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(var(--safe-bottom) + 28px);
  transform: translateY(100%); transition: transform var(--t-slow);
  max-height: 86vh; overflow-y: auto; }
.wp-sheet--open { transform: translateY(0); }
.wp-sheet--tall { max-height: 92vh; }

.wp-continue-banner { display: flex; align-items: center; gap: 10px;
  background: var(--accent-dim); color: var(--accent); font-weight: 600;
  border-radius: var(--radius-card); padding: 13px 16px; margin-bottom: 12px;
  text-decoration: none; font-size: 15px; }

.wp-menu-item { display: block; width: 100%; text-align: left; background: none;
  border: none; border-bottom: 1px solid var(--border); padding: 14px 4px;
  font-size: 16px; color: var(--text-primary); }
.wp-menu-item:last-child { border-bottom: none; }
.wp-menu-item--danger { color: var(--danger); }
.wp-input-form { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.wp-text-input { padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg); color: var(--text-primary); font-size: 16px; }
.wp-catalog-link { color: var(--accent); font-size: 14px; text-align: center; }
.wp-rpe-hint { color: var(--text-muted); font-size: 13px; margin: -4px 0 10px; }
.wp-rpe-option { display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 13px 4px; font-size: 16px; color: var(--text-primary); }
.wp-rpe-option--active { background: var(--accent-muted); border-radius: var(--radius-sm); }
.wp-rpe-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.wp-rpe-num { font-weight: 700; width: 24px; font-variant-numeric: tabular-nums; }
.wp-rpe-label { color: var(--text-secondary); }

.wp-cele-body { display: flex; justify-content: center; margin: 8px 0 4px;
  /* render_body paths reference the zone vars, which are scoped to
     .muscle-map-wrap elsewhere — redeclare for the celebration sheet */
  --zone-primary: #DC2626; --zone-secondary: #E25C92; }
[data-theme="dark"] .wp-cele-body { --zone-primary: #EF4444; --zone-secondary: #F6A6C1; }
.wp-cele-first { text-align: center; color: var(--text-secondary); font-size: 13px;
  margin: 2px 0 10px; }
.wp-cele-title { font-size: 21px; font-weight: 700; text-align: center; margin: 6px 0 2px; }
.wp-cele-stats { text-align: center; color: var(--text-secondary); font-size: 14px; margin-bottom: 14px; }
.wp-pr { background: var(--accent-dim); border-radius: var(--radius-card);
  padding: 14px 16px; margin-bottom: 10px; text-align: center; }
.wp-pr-name { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 2px; }
.wp-pr-val { font-size: 19px; font-weight: 800; color: var(--accent); overflow-wrap: break-word; }
.wp-pr-delta { font-size: 14px; font-weight: 700; margin-left: 4px; }
.wp-pr-pop { animation: wpPop 500ms cubic-bezier(.32,.72,0,1) both; }
@keyframes wpPop { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wp-pr-pop { animation: none; } }
.wp-cele-eq { text-align: center; color: var(--text-secondary); font-size: 14px; margin: 4px 0; }
.wp-cele-streak { text-align: center; color: var(--text-muted); font-size: 13px; margin: 2px 0 12px; }
.wp-cele-btn { display: block; text-align: center; margin-top: 12px; }
.wp-cele-done { display: block; text-align: center; color: var(--text-secondary);
  font-size: 14px; margin-top: 12px; text-decoration: none; }
.wp-finish-cancel { width: 100%; background: none; border: none; color: var(--danger);
  font-size: 14px; padding: 12px; margin-top: 4px; }
.wp-finish-submit, .wp-finish-back { width: 100%; margin-top: 10px; }
#wp-finish-summary .wp-sum-row { display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
#wp-finish-summary .wp-sum-total { padding: 10px 0 0; color: var(--text-secondary); font-size: 14px; }

/* ── Per-exercise screen (R4-T1: TC-style hero, header, stats, rows) ─── */

/* Hero: two photos side by side in a white rounded card */
.wp-xs-hero-card { margin: 6px 14px 4px; border-radius: 16px; height: 192px;
  overflow: hidden; background: #fff;
  display: flex; align-items: center; justify-content: center; }
.wp-xs-hero-link { display: flex; width: 100%; height: 100%; text-decoration: none;
  gap: 7px; padding: 0; }
.wp-xs-hero-img { flex: 1; width: 50%; height: 100%; object-fit: contain;
  background: #fff; display: block; }

/* Silhouette card header — centered muscle illustration (slug-less fallback) */
.wp-xs-tile-card { display: flex; justify-content: center; align-items: center;
  margin-bottom: 20px; }
.wp-xs-tile-inner { display: flex; justify-content: center; align-items: center;
  width: 96px; height: 96px; border-radius: 16px;
  background: var(--bg-muted); overflow: hidden; text-decoration: none;
  /* render_body fills reference the zone vars — redeclare for this scope
     (same trap as .wp-cele-body / .wp-ex-tile) */
  --zone-primary: #DC2626; --zone-secondary: #E25C92; }
[data-theme="dark"] .wp-xs-tile-inner { --zone-primary: #EF4444; --zone-secondary: #F6A6C1; }
.wp-xs-tile-inner .mm-body { width: 80px; height: 80px; }
.wp-xs-tile-inner svg { width: 80px; height: 80px; }

/* Stats row: icons + rest indicator on right */
.wp-xs-stats-row { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px; padding: 6px 2px; }
.wp-xs-stats { font-size: 13px; color: var(--text-secondary); flex: 1;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums; }
/* Rest indicator button */
.wp-xs-rest-btn { background: none; border: none; display: flex; align-items: center;
  gap: 5px; color: var(--text-secondary); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  font-variant-numeric: tabular-nums; padding: 4px 0; }
/* Note pencil button in stats row — 44px tap target, grey icon */
.wp-xs-note-btn { background: none; border: none; display: flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; cursor: pointer;
  color: var(--text-secondary); padding: 0; flex: none; line-height: 0; }
/* Note text line under stats row, above set rows (B2) — single line, ellipsis */
.wp-xs-note-under { display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-secondary); padding: 0 2px 10px;
  cursor: pointer; overflow: hidden; }
.wp-xs-note-under-icon { flex: none; line-height: 0; color: var(--text-muted); }
.wp-xs-note-under-text { overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; }

.wp-xs-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }

/* Swipe-to-delete container */
.wp-xs-set-wrap { display: flex; flex-direction: column; position: relative; overflow: hidden; }

/* Row base — TC grid: [56px num col][1fr centered cluster][56px check col] */
.wp-xs-set-row { display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center; min-height: 64px; padding: 6px 12px 0;
  position: relative; z-index: 1;
  /* page bg: rows sit flush on the screen (approved mockup), must stay opaque
     so the swipe-delete pill stays hidden until the row slides */
  background: var(--bg); will-change: transform; }

/* Delete button (swipe reveal) — TC style: dark red rounded pill with trash icon */
.wp-xs-delete { position: absolute; top: 10px; bottom: 4px; right: 12px;
  width: 92px; border-radius: 14px;
  background: #3b1622; color: #ff5c7a;
  border: none; font-size: 15px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 6px; white-space: nowrap;
  z-index: 0; visibility: hidden; }
.wp-xs-delete svg { stroke: #ff5c7a; }
.wp-xs-set-wrap--open .wp-xs-delete { visibility: visible; }
/* Swipe offset matches delete button reveal — done/extra wrap rows slide left */
.wp-xs-set-wrap--open .wp-xs-set-row { transform: translateX(-104px); }

/* Num circle — sits in the left 56px column */
.wp-xs-num { width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 15px; font-weight: 600;
  flex: none; margin-left: 6px; }
.wp-xs-num--done { background: #232326; color: #fff; }
.wp-xs-num--pending { background: none; border: 2px solid var(--border-strong);
  color: var(--text-muted); }

/* Middle cluster — centered flex container holding val/lbl/×/val/lbl */
.wp-xs-vals { display: flex; align-items: baseline; justify-content: center;
  gap: 8px; font-variant-numeric: tabular-nums; }

/* Big value — reps / weight number (done rows use span, pending use input) */
.wp-xs-val { font-size: 31px; font-weight: 700; color: var(--text-primary);
  line-height: 1; letter-spacing: -0.01em; }

/* Inline number input styled exactly like .wp-xs-val so done and pending rows align */
.wp-xs-inp { font-size: 31px; font-weight: 700; color: var(--text-primary);
  line-height: 1; letter-spacing: -0.01em; width: 4.5ch;
  background: transparent; border: none; border-radius: 0; outline: none;
  padding: 0; text-align: right; -moz-appearance: textfield;
  font-family: inherit; }
.wp-xs-inp::-webkit-inner-spin-button,
.wp-xs-inp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wp-xs-inp:focus { border-bottom: 2px solid var(--accent); }
.wp-xs-inp::placeholder { color: var(--text-muted); }

/* Small label — «повт» / «кг» */
.wp-xs-lbl { font-size: 13px; color: var(--text-muted); font-weight: 400; }

/* Separator × — slightly larger, centered vertically with align-self */
.wp-xs-sep { font-size: 17px; color: var(--text-muted); font-weight: 400;
  align-self: center; padding: 0 4px; }

/* Check circle — right 56px column, pushed to end */
.wp-xs-check { width: 44px; height: 44px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; flex: none; cursor: pointer;
  border: 2px solid transparent; background: none; justify-self: end; }
/* Done sets: filled green */
.wp-xs-check--done { background: #30d158; border-color: #30d158; color: #fff; }
/* Last done set: outlined green (check must stay visible on light bg too) */
.wp-xs-check--last { background: transparent; border: 2px solid #30d158;
  color: var(--text-primary); }
/* Active pending row (first): dark bg, lighter stroke */
.wp-xs-check--active { background: #2a2a2e; border-color: #2a2a2e; color: #8e8e93; }
/* Future pending rows: muted ring */
.wp-xs-check--future { background: transparent; border-color: var(--border-strong);
  color: var(--text-muted); }

/* Done row modifier classes */
.wp-xs-set-row--done { opacity: 1; }
.wp-xs-set-row--last { opacity: 1; }

/* Active row — full opacity, primary text */
.wp-xs-set-row--active { opacity: 1; }
.wp-xs-set-row--active .wp-xs-num--pending { border-color: var(--text-primary);
  color: var(--text-primary); }
.wp-xs-set-row--active .wp-xs-inp { color: var(--text-primary); }
.wp-xs-set-row--active .wp-xs-lbl { color: var(--text-secondary); }
.wp-xs-set-row--active .wp-xs-sep { color: var(--text-secondary); }

/* Future rows — dimmed per mockup */
.wp-xs-set-row--future { opacity: 0.38; }

/* RPE flame badge — TC style: pill with connector tick */
.wp-xs-flame-wrap { margin: 0 0 2px 28px; display: flex; flex-direction: column;
  align-items: flex-start; }
.wp-xs-flame-tick { width: 2px; height: 7px; background: #3a3a3e;
  margin-left: 12px; border-radius: 1px; }
.wp-xs-flame { display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer; border: none; font-family: inherit; }
/* Green: rpe 5–7 */
.wp-xs-flame--green { background: rgba(48,209,88,.13); color: #30d158; }
.wp-xs-flame--green svg { stroke: #30d158; fill: rgba(48,209,88,.35); }
/* Orange: rpe 8–10 */
.wp-xs-flame--orange { background: rgba(255,159,10,.14); color: #ff9f0a; }
.wp-xs-flame--orange svg { stroke: #ff9f0a; fill: rgba(255,159,10,.35); }
/* No RPE */
.wp-xs-flame--none { background: #1b1b1e; color: #6e6e73; }
.wp-xs-flame--none svg { stroke: #6e6e73; fill: none; }
.wp-xs-flame-icon { display: flex; align-items: center; }
.wp-xs-flame-val { font-weight: 700; }

/* Bottom button pair — TC style */
.wp-xs-btns { display: flex; gap: 10px; padding: 14px 0 18px; }
/* Gradient "add set" pill */
.wp-btn-gradient { height: 52px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(100deg,#35d05e 0%,#c9ee3b 52%,#35d05e 100%);
  color: #0a0a0a; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; }
.wp-xs-btn-add { flex: 1.2; }
/* Dark "complete all" pill */
.wp-btn-dark-green { height: 52px; border-radius: 999px; border: none; cursor: pointer;
  background: #1c1c1e; color: #30d158; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; }
[data-theme="light"] .wp-btn-dark-green { background: #e8e8ed; color: #1da84d; }
.wp-xs-btn-all { flex: 1; }

/* Cardio variants */
.wp-xs-cardio-done { font-size: 16px; color: var(--accent); padding: 12px 0; }
.wp-xs-cardio-btn { flex: 1; }

/* prefers-reduced-motion: swipe still works, just no transition */
@media (prefers-reduced-motion: reduce) {
  .wp-xs-set-row { transition: none !important; }
}

/* R3-B2: settings sheet rows */
.wp-settings-list { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.wp-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-primary, #111);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
}
.wp-settings-row:active { background: var(--surface-2, #f3f4f6); }
.wp-settings-row--active { font-weight: 600; }
.wp-settings-row--active .ic { color: var(--accent, #3b82f6); }

/* R5-T2: note sheet form (note row moved to B2 pencil in stats row; see .wp-xs-note-btn/.wp-xs-note-under) */
.wp-note-form { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.wp-note-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border, rgba(255,255,255,.15));
  background: var(--surface-alt, #2c2c2e);
  color: var(--text-primary, #fff);
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
[data-theme="light"] .wp-note-textarea { background: #f2f2f7; color: #111; }
.wp-note-save { width: 100%; }
.wp-note-clear { width: 100%; }
/* display-beats-hidden guard: btn-secondary has display:flex which overrides hidden */
.wp-note-clear[hidden] { display: none; }

/* R3-B2: header menu button (⋯) */
.wp-header-menu {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-primary, #111);
  display: flex;
  align-items: center;
}
/* display-beats-hidden guard: both wp-header-menu buttons use the hidden attr */
.wp-header-menu[hidden] { display: none; }
/* Exercise ⋯ button: push to the right side of the header flex row */
#wp-ex-menu-btn { margin-left: auto; }

/* ── Workout card grid (wave 4) ─────────────────────────────────────────── */
.wcard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 16px 20px;
}

.wcard {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 1.12;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wcard:active { opacity: .88; transform: scale(.98); }

.wcard .wc-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .32; filter: saturate(.4);
}
.wcard .wc-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.05) 55%);
}
.wcard .wc-date {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: 11.5px; font-weight: 700;
  background: rgba(0,0,0,.45); border-radius: 999px;
  padding: 3px 9px; backdrop-filter: blur(4px);
}
.wcard .wc-body { position: relative; }
.wcard .wc-title { font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.wcard .wc-sub { font-size: 11.5px; opacity: .85; margin-top: 3px; }
.wcard .wc-ton {
  display: inline-flex; margin-top: 8px;
  font-size: 12px; font-weight: 800;
  background: rgba(34,197,94,.25);
  border: 1px solid rgba(34,197,94,.6);
  border-radius: 999px; padding: 2px 9px;
}

/* gradient classes */
.grad-back      { background: linear-gradient(150deg, #2d1b69, #4c1d95); }
.grad-chest     { background: linear-gradient(150deg, #14335f, #1d4ed8); }
.grad-legs      { background: linear-gradient(150deg, #14532d, #15803d); }
.grad-full      { background: linear-gradient(150deg, #5f1420, #b91c1c); }
.grad-shoulders { background: linear-gradient(150deg, #7c2d12, #c2410c); }
.grad-arms      { background: linear-gradient(150deg, #164e63, #0e7490); }
.grad-core      { background: linear-gradient(150deg, #3b0764, #6d28d9); }
.grad-other     { background: linear-gradient(150deg, #1f2430, #2b3242); }

/* ── Workout detail screen (wave 4) ─────────────────────────────────────── */
.dxh {
  position: relative; height: 200px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px; color: #fff;
}
.dxh img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .38; filter: saturate(.45);
}
.dxh .wc-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,17,23,.92) 0%, rgba(0,0,0,.15) 55%);
}
.dxh .dxh-top { position: relative; display: flex; justify-content: space-between; }
.cbtn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dxh .dxh-b { position: relative; }
.dxh-date { font-size: 12px; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.dxh-title { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }

.dxstats { display: flex; gap: 10px; padding: 14px 16px 0; }
.dxstats .s {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 12px;
}
.dxstats .sv { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary); }
.dxstats .sl { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: 1px; }

.dxe {
  margin: 10px 16px 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 12px 13px;
}
.dxe .dxe-top { display: flex; align-items: center; gap: 12px; }
.dxe .thumb {
  width: 46px; height: 46px; border-radius: 12px;
  object-fit: cover; flex: 0 0 auto; background: var(--bg-muted);
}
.dxe .thumb-fallback { background: var(--bg-muted); }
.dxe .dxe-thumb-link { display: block; flex: 0 0 auto; }
.dxe .dxe-info { flex: 1; min-width: 0; }
.dxe .dxe-name {
  font-size: 15px; font-weight: 700; line-height: 1.25;
  color: var(--text-primary); text-decoration: none; display: block;
}
.dxe .dxe-name:hover { text-decoration: underline; }
.dxe .dxe-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.dxe .dxe-right {
  margin-left: auto; font-size: 12.5px; font-weight: 800;
  color: var(--green); white-space: nowrap;
}

.dxe-sets { margin-top: 9px; }
.dxr { display: flex; align-items: center; gap: 11px; padding: 6px 2px; font-size: 14px; }
.dxr + .dxr { border-top: 1px solid var(--border); }
.dxr .num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-muted); border: 1px solid var(--border);
  font-size: 11px; font-weight: 800; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.dxr .val { font-weight: 800; }
.dxr .val span { color: var(--text-muted); font-weight: 600; font-size: 12.5px; }
.dxr .best-tag {
  margin-left: auto; font-size: 10.5px; font-weight: 800;
  color: #f59e0b; text-transform: uppercase; letter-spacing: .06em;
}

.dx-note {
  margin: 10px 16px 16px;
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg-muted); border-radius: 14px;
  padding: 11px 13px; font-size: 13.5px;
  color: var(--text-secondary); line-height: 1.45;
}
.dx-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--text-muted); }

/* Bottom menu sheet */
.dx-bottom-menu {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--bg-card); border-radius: 20px 20px 0 0;
  padding: 8px 16px max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0,0,0,.25);
}
.dx-bottom-menu-inner { display: flex; flex-direction: column; gap: 4px; }
.dx-menu-item {
  width: 100%; padding: 14px 12px; border-radius: 12px;
  font-size: 16px; font-weight: 600; text-align: left;
  background: none; border: none; cursor: pointer;
  color: var(--text-primary);
}
.dx-menu-item:active { background: var(--bg-muted); }
.dx-menu-item--danger { color: #f85149; }
.dx-menu-item--cancel { color: var(--text-muted); margin-top: 4px; }

/* Clamp card sub-line to 2 lines to prevent tall cards */
.wcard .wc-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Sport hub wave 7: tabs + hero ──────────────────────────────────────── */

/* Sport panes: flush padding (hero + card grid need full-bleed) */
.sport-pane-flush { padding: 0; }

/* Segment switch on /sport needs explicit side margin — container is flush (zero padding) */
.sport-segs { margin-left: var(--page-pad); margin-right: var(--page-pad); }

/* wcard-grid inside sport pane: already has 16px horizontal padding */
.sport-pane-flush .wcard-grid { padding-top: 4px; }

/* stat-cards inside sport pane; .seg-pane .stat-cards zeroes side padding
   (progress panes) — need the same specificity to win */
.seg-pane .sport-stat-cards { padding: 0 var(--page-pad) 14px; }

/* chart-card blocks inside the flush pane (e.g. recovery widget) need explicit
   side margin — the container is padding:0 and these cards have no own margin */
.sport-pane-flush .chart-card { margin: 0 var(--page-pad) 12px; }

/* Hero «Дальше по плану» */
.sport-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 118px;
  margin: 4px 16px 10px;
  border-radius: 18px;
  overflow: hidden;
  padding: 13px;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sport-hero:active { opacity: .9; }
.sport-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .32; filter: saturate(.4);
}
.sport-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.08) 60%);
}
.sport-hero-body { position: relative; padding-right: 92px; }
.sport-hero-cap {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; opacity: .85;
}
.sport-hero-title { font-size: 17px; font-weight: 800; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sport-hero-sub { font-size: 12px; opacity: .85; }
.sport-hero-go {
  position: absolute; right: 12px; bottom: 12px;
  background: #22C55E; color: #fff;
  border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 800;
}

/* Hero CTA when no program */
.sport-hero-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 16px 10px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sport-hero-cta:active { opacity: .85; }
.sport-hero-cta-icon { color: var(--accent); flex: 0 0 auto; }
.sport-hero-cta-title { font-size: 14.5px; font-weight: 700; }
.sport-hero-cta-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sport-hero-cta svg { margin-left: auto; color: var(--text-muted); flex: 0 0 auto; }

/* Proglink cards */
.sport-proglink {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 10px;
  padding: 13px 14px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sport-proglink:active { opacity: .85; }
.sport-proglink-icon { color: var(--accent); flex: 0 0 auto; }
.sport-proglink-title { font-size: 14.5px; font-weight: 700; }
.sport-proglink-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.sport-proglink-chev { margin-left: auto; color: var(--text-muted); flex: 0 0 auto; }

/* Continue banner inside pane */
.sport-pane-flush .wp-continue-banner { margin: 0 16px 12px; }

/* Journal start button */
.sport-journal-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 16px 20px;
  height: 52px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  box-shadow: 0 8px 24px rgba(22,163,74,.35);
  text-decoration: none;
}
.sport-journal-start-btn:active { opacity: .9; }

/* Stats redirect card */
.sport-stats-redirect { text-align: center; padding: 24px 16px; }
.sport-stats-redirect-text {
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.55; margin-bottom: 16px;
}
.sport-stats-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  text-decoration: none;
}
.sport-stats-btn:active { opacity: .9; }


/* ── W9: Sport Progress Cards ───────────────────────────────────────── */

/* Records card rows */
.sp-rec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  text-decoration: none;
  color: var(--text-primary);
}
.sp-rec-row:first-child { border-top: none; }
.sp-rec-row--nolink { cursor: default; }
.sp-rec-row:not(.sp-rec-row--nolink):active { opacity: .75; }
.sp-rec-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-rec-spark { flex: 0 0 70px; }
.sp-rec-val { font-weight: 800; white-space: nowrap; }
.sp-rec-delta { font-size: 11px; font-weight: 800; width: 42px; text-align: right; white-space: nowrap; }
.sp-rec-delta--green { color: #22C55E; }
.sp-rec-delta--muted { color: var(--text-muted); }
.sp-rec-delta--red { color: #F85149; }

/* Muscle volume horizontal bars */
.sp-hbars { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.sp-hbar { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; }
.sp-hbar-name { width: 64px; color: var(--text-secondary); font-size: 12px; }
.sp-hbar-track { flex: 1; height: 12px; border-radius: 6px; background: var(--bg-muted); overflow: hidden; }
.sp-hbar-track i { display: block; height: 100%; border-radius: 6px; }
.sp-hbar-val { width: 30px; text-align: right; color: var(--text-muted); font-size: 11px; }
.sp-hbar-delta { width: 34px; text-align: right; font-size: 10.5px; font-weight: 800; }
.sp-hbar-delta--green { color: #22C55E; }
.sp-hbar-delta--muted { color: var(--text-muted); }
.sp-hbar-delta--red { color: #F85149; }
.sp-lag-note {
  display: flex; gap: 7px; align-items: center;
  margin-top: 9px; font-size: 11px; font-weight: 600;
  color: var(--fat, #D97706);
}

/* Progression: «За период» stat card */
.prog-stat-val--period { color: var(--text-primary); }
.prog-stat-val--pos { color: #22C55E; }
.prog-stat-val--neg { color: #F85149; }

/* ── W9: Exercise detail «Твой прогресс» section ────────────────────── */
.ex-your-progress { padding: 16px; }
.ex-prog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-top: 10px;
}
.ex-prog-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.ex-prog-ww { font-size: 22px; font-weight: 800; }
.ex-prog-delta { font-size: 12px; font-weight: 700; }
.ex-prog-delta--green { color: #22C55E; }
.ex-prog-delta--red { color: #F85149; }
.ex-prog-delta--muted { color: var(--text-muted); }
.ex-prog-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.ex-prog-tog-btn {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
}
.ex-prog-tog-btn.active {
  color: #22C55E;
  border-color: rgba(34,197,94,.5);
  background: rgba(34,197,94,.08);
}
.ex-prog-chart-wrap { position: relative; }
.ex-prog-svg { display: block; overflow: visible; }
.ex-prog-stats {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.ex-prog-stat {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px;
  text-align: center;
}
.ex-prog-stat-val { font-size: 15px; font-weight: 800; }
.ex-prog-stat-lbl { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
[data-theme="dark"] .ex-prog-stat { background: rgba(255,255,255,.04); }

/* ── Program v2: sheet items with subtitles ─────────────────────────── */
.pr-sheet-item-texts { display: flex; flex-direction: column; gap: 2px; }
.pr-sheet-item-title { font-size: 15.5px; font-weight: 600; color: var(--text-primary); }
.pr-sheet-item-sub { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.pr-sheet-item { align-items: flex-start; }
.pr-sheet-item .pr-sheet-ic { margin-top: 2px; }

/* ── Text-edit sheet chip suggestions ──────────────────────────────── */
.pr-edit-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.pr-chip {
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 12px; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.pr-chip:hover, .pr-chip:active { background: var(--bg-card); color: var(--text-primary); }

/* ── Full-screen overlay (loader + result) ──────────────────────────── */
.pr-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg-page, #0d1117);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
/* display:flex above beats the [hidden] attribute — restate it */
.pr-overlay[hidden] { display: none; }
.pr-overlay-body {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; max-width: 340px; width: 100%; text-align: center;
}
.pr-overlay-title {
  font-size: 20px; font-weight: 700; color: var(--text-primary);
  margin: 0;
}
.pr-overlay-sub {
  font-size: 13px; color: var(--text-muted); margin: 0;
}

/* Spinner */
.pr-spinner {
  width: 44px; height: 44px;
  border: 3.5px solid var(--border);
  border-top-color: var(--green, #22c55e);
  border-radius: 50%;
  animation: pr-spin 0.8s linear infinite;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* Animated steps */
.pr-loader-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  align-self: stretch; text-align: left;
}
.pr-step {
  font-size: 13px; color: var(--text-muted);
  padding: 0 4px; transition: color 0.3s;
}
.pr-step--active { color: var(--text-primary); font-weight: 600; }
.pr-step--done { color: var(--c-green, #22c55e); font-weight: 500; }
.pr-step--done::before { content: ""; margin-right: 6px; }

/* Result overlay diff area */
.pr-result-overlay .pr-overlay-body { align-items: stretch; text-align: left; }
.pr-result-overlay .pr-overlay-title { text-align: center; }
.pr-result-diff {
  background: var(--bg-card); border-radius: var(--radius-md);
  padding: 12px 16px; max-height: 40vh; overflow-y: auto;
}
.pr-result-error {
  color: var(--c-red, #ef4444); font-size: 14px;
  background: rgba(239,68,68,.08); border-radius: var(--radius-md);
  padding: 10px 14px; text-align: center;
}
.pr-result-actions {
  display: flex; flex-direction: column; gap: 10px;
}

/* Program diff HTML (rendered by _program_diff.html) — Variant A */

/* Summary pills row */
.pdiff-summary {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; margin-bottom: 12px;
}
.pdiff-pill {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 10px; border-radius: 20px;
}
.pdiff-pill--added  { background: rgba(34,197,94,.15);  color: #22c55e; }
.pdiff-pill--removed { background: rgba(239,68,68,.14);  color: #ef4444; }
.pdiff-pill--replaced { background: rgba(245,158,11,.14); color: #f59e0b; }

/* Day cards */
.pdiff { display: flex; flex-direction: column; gap: 10px; }
.pdiff-card {
  background: var(--card, #1a1f2e);
  border-radius: 16px; border: 1px solid var(--line, rgba(255,255,255,.08));
  overflow: hidden;
}

/* Coloured header strip — gradient fades right to transparent */
.pdiff-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 9px 14px;
  background: linear-gradient(90deg, currentColor 0%, transparent 100%);
  /* Override: each grad-* class sets its own background; we layer a fade on top */
}
/* Re-define grad-* inside pdiff context to fade to transparent */
.pdiff-card-head.grad-back      { background: linear-gradient(90deg,rgba(76,29,149,.55),transparent); }
.pdiff-card-head.grad-chest     { background: linear-gradient(90deg,rgba(29,78,216,.55),transparent); }
.pdiff-card-head.grad-legs      { background: linear-gradient(90deg,rgba(21,128,61,.55),transparent); }
.pdiff-card-head.grad-full      { background: linear-gradient(90deg,rgba(185,28,28,.55),transparent); }
.pdiff-card-head.grad-shoulders { background: linear-gradient(90deg,rgba(194,65,12,.55),transparent); }
.pdiff-card-head.grad-arms      { background: linear-gradient(90deg,rgba(14,116,144,.55),transparent); }
.pdiff-card-head.grad-core      { background: linear-gradient(90deg,rgba(109,40,217,.55),transparent); }
.pdiff-card-head.grad-other     { background: linear-gradient(90deg,rgba(107,114,128,.45),transparent); }

.pdiff-card-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
  color: var(--text-primary, #f0f4ff); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.pdiff-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 600; line-height: 1;
  padding: 3px 8px; border-radius: 20px;
}
.pdiff-badge--new     { background: rgba(139,92,246,.25); color: #a78bfa; }
.pdiff-badge--removed { background: rgba(107,114,128,.25); color: var(--text-muted, #9ca3af); }

/* Exercise rows */
.pdiff-card-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 14px 10px; }
.pdiff-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.4;
}
.pdiff-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.pdiff-icon--added   { background: rgba(34,197,94,.15);  color: #22c55e; }
.pdiff-icon--removed { background: rgba(239,68,68,.14);  color: #ef4444; }
.pdiff-icon--replaced { background: rgba(245,158,11,.14); color: #f59e0b; }
.pdiff-name { color: var(--text-primary, #f0f4ff); }
.pdiff-old  { color: var(--text-muted, #9ca3af); text-decoration: line-through; }
.pdiff-arrow { color: #f59e0b; margin: 0 2px; }
.pdiff-row--unchanged {
  font-size: 12px; color: var(--text-muted, #9ca3af);
  font-style: italic; padding-left: 30px;
}

/* Text-edit sheet — fixed positioning like dots sheet, above overlay */
#pr-text-edit-sheet {
  position: fixed !important;
  transform: translateY(0) !important;
  z-index: 201;
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 20px);
}
#pr-text-edit-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.4);
}

/* ══════════════════════════════════════════════════════════
   WORKOUT ENTRY SHEET
   ══════════════════════════════════════════════════════════ */
.nb-wo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.nb-chip {
  padding: 7px 12px;
  border-radius: 20px;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t-fast);
}
.nb-chip:active, .nb-chip:hover {
  background: var(--accent-dim);
  border-color: var(--green);
  color: var(--green);
}

.nb-wo-textarea-wrap {
  position: relative;
  margin-bottom: 12px;
}

.nb-wo-textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px 44px 12px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-muted);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font);
  resize: none;
  line-height: 1.5;
  box-sizing: border-box;
}
.nb-wo-textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--bg-card);
}
.nb-wo-textarea::placeholder { color: var(--text-muted); }

/* Mic button inside textarea — bottom-right corner */
.nb-wo-mic {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-card);
}
.nb-wo-mic:hover { color: var(--green); }
.nb-wo-mic--recording {
  background: #EF4444;
  color: #fff;
  animation: nb-rec-pulse 1s ease-in-out infinite;
}

.nb-wo-rec-hint {
  font-size: 13px;
  color: #EF4444;
  text-align: center;
  margin-bottom: 8px;
}

.nb-wo-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   WEIGHT ENTRY SHEET
   ══════════════════════════════════════════════════════════ */
.nb-wt-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 20px;
}

.nb-wt-value {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  line-height: 1;
}

.nb-wt-unit {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-secondary);
}

.nb-wt-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.nb-wt-step {
  flex: 1;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t-fast);
}
.nb-wt-step:active { transform: scale(.96); }
.nb-wt-step--plus {
  color: var(--green);
  border-color: rgba(34,197,94,.30);
  background: var(--accent-dim);
}
.nb-wt-step--plus:hover { background: rgba(34,197,94,.18); }

.nb-wt-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

/* Mic button in weight sheet — standalone square */
.nb-wt-mic {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-muted);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.nb-wt-mic:hover { color: var(--green); border-color: var(--green); }
.nb-wt-mic--recording {
  background: #EF4444;
  border-color: #EF4444;
  color: #fff;
  animation: nb-rec-pulse 1s ease-in-out infinite;
}

.nb-wt-submit {
  flex: 1;
}

.nb-wt-last {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  min-height: 1em;
}

/* New sheets (workout / weight / feedback) pin to the viewport: the base
   .bottom-sheet is position:absolute, so page scroll (e.g. focus-scroll)
   drags "closed" translateY(100%) sheets into the frame. */
#sheet-workout,
#sheet-weight,
#sheet-food,
#feedback-sheet { position: fixed; }

/* My-food card polish: kcal lives in the body, delete pinned to the corner,
   so the name gets the full row width */
.food-card { position: relative; padding-right: 40px; }
.food-card-kcal { margin-top: 3px; }
.food-card-x {
  position: absolute; top: 8px; right: 8px;
  padding: 5px; border-radius: 50%;
}

/* ── Ring-day calendar strip (Feature 1: Kalo-batch) ─────────────── */

/* Reset link styling so <a class="streak-day"> looks same as <div> */
a.streak-day { text-decoration: none; color: inherit; }

/* Ring wrapper: SVG + centered day number */
.ringday {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.ringday svg {
  /* Rotate so the arc fill starts at 12 o'clock */
  transform: rotate(-90deg);
  display: block;
}

/* Track: faint background circle */
.ringday-track {
  stroke: var(--border-strong);
}
[data-theme="dark"] .ringday-track {
  stroke: rgba(255,255,255,.10);
}

/* Fill arc: green by default, orange for "over" state */
.ringday-fill {
  stroke: var(--green-ring);
}
.streak-day.state-over .ringday-fill {
  stroke: var(--amber, #F59E0B);
}

/* Day number centered inside the ring */
.ringday-num {
  position: absolute;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  pointer-events: none;
  /* counter-rotate so number stays upright */
  /* (svg is rotated -90deg on the parent; number lives outside svg so no rotation needed) */
}

/* Today: outline ring around the .ringday */
.streak-day.today .ringday {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 50%;
}

/* Future: faded opacity, no interaction */
.streak-day.future {
  opacity: .38;
  cursor: default;
}
.streak-day.future .ringday-fill {
  /* No fill for future days — stroke-dasharray="0 97.4" via pct=0 handles this,
     but ensure no stray stroke color bleeds through */
  stroke: transparent;
}

/* ============================================================
   nuw- (nutrient-week) — weekly nutrient bar cards on /progress
   Spec: docs/superpowers/specs/2026-07-10-kalo-batch-design.md §F2
   ============================================================ */
.nuw-section {
  margin-top: 4px;
}
.nuw-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 4px 8px;
}
.nuw-card {
  margin-bottom: 12px;
}
.nuw-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.nuw-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.nuw-card-target {
  font-size: 12px;
  color: var(--text-muted);
}
.nuw-avg-line {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.nuw-avg-line b {
  color: var(--text-primary);
}
.nuw-status--ok  { color: var(--green-ring); }
.nuw-status--bad { color: var(--amber, #F59E0B); }

/* Bars outer container: stacks 86px bar area + labels row */
.nuw-bars-outer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 86px bar zone — position:relative so target line is contained here */
.nuw-bars-area {
  position: relative;
  height: 86px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.nuw-col {
  flex: 1;
  height: 100%;  /* fills 86px */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.nuw-bar {
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 0 0;
  transition: height 400ms ease-out;
  min-height: 0;
}
.nuw-bar--ok    { background: var(--green-ring); }
.nuw-bar--bad   { background: var(--amber, #F59E0B); }
.nuw-bar--today { background: var(--green-ring); opacity: .5; }
.nuw-bar--empty { background: transparent; }

/* Weekday labels row — flex mirrors nuw-bars-area column widths */
.nuw-labels-row {
  display: flex;
  gap: 4px;
}
.nuw-col-label {
  flex: 1;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1;
}

/* Dashed target line — absolutely positioned inside .nuw-bars-area (86px) */
.nuw-target-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--border-strong);
  pointer-events: none;
  /* bottom: X% where X = target/scale_max*100 — correct because nuw-bars-area
     is exactly 86px with no padding, so % maps directly to bar heights. */
}
.nuw-target-line-label {
  position: absolute;
  right: 2px;
  top: -10px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1;
}

/* Light theme overrides — tokens handle most, but ensure orange readable */
:root[data-theme="light"] .nuw-status--bad,
:root:not([data-theme="dark"]) .nuw-status--bad {
  color: #D97706;
}
:root[data-theme="light"] .nuw-bar--bad,
:root:not([data-theme="dark"]) .nuw-bar--bad {
  background: #F59E0B;
}

/* Repeat tile: full-width row (long dynamic label), horizontal layout */
#nb-action-repeat {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}
#nb-action-repeat span { min-width: 0; }
.nb-repeat-label { color: var(--text-secondary); }

/* ── Body measurements «Замеры» (Прогресс) ─────────────────── */
.bm-list { margin: 0 -16px; }
.bm-row { border-bottom: 1px solid var(--border); }
.bm-row:last-child { border-bottom: none; }
.bm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bm-name { flex: 1; min-width: 0; }
.bm-name b { display: block; font-size: 14px; font-weight: 650; }
.bm-ago { font-size: 11.5px; color: var(--text-muted); }
.bm-spark { flex: 0 0 56px; }
.bm-val { text-align: right; font-variant-numeric: tabular-nums; }
.bm-val b { font-size: 16px; font-weight: 800; }
.bm-val small { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.bm-delta { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.bm-delta--good { color: var(--green-ring); }
.bm-chev { flex: 0 0 14px; color: var(--text-muted); transition: transform 0.25s ease; }
.bm-row--open .bm-chev { transform: rotate(180deg); }
.bm-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.bm-row--open .bm-body { max-height: 260px; }
.bm-body-in { padding: 2px 16px 14px; }
.bm-range { display: flex; gap: 6px; margin-bottom: 10px; }
.bm-range-btn {
  border: 1px solid var(--border-strong);
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  cursor: pointer;
}
.bm-range-btn--on {
  background: var(--accent-dim, rgba(34, 197, 94, 0.14));
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--green-ring);
}
.bm-chart-box { position: relative; height: 160px; }
.bm-add-btn { width: 100%; margin-top: 12px; }
.bm-fatcard { display: flex; align-items: center; gap: 14px; }
.bm-fatring { flex: 0 0 56px; }
.bm-fat-big { font-size: 18px; font-weight: 800; }
.bm-fat-big .bm-delta { display: inline; margin-left: 4px; }
.bm-fat-cap { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.bm-fat-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
#sheet-measure .bm-sheet-sub { font-size: 12.5px; color: var(--text-muted); margin: -4px 0 12px; }
.bm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.bm-field { min-width: 0; }
.bm-field-lbl {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 4px;
}
.bm-inp {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  min-width: 0;
}
.bm-inp input {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  outline: none;
  padding: 0;
}
.bm-inp span { flex: 0 0 auto; font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.bm-inp:focus-within { border-color: rgba(34, 197, 94, 0.45); }
#sheet-measure .sheet-submit-btn { margin-top: 16px; }
.bm-sheet-hint { font-size: 11.5px; color: var(--text-muted); text-align: center; margin-top: 16px; }
.bm-sheet-err { font-size: 12.5px; color: #f85149; text-align: center; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .bm-body, .bm-chev { transition: none; }
}