/* =============================================================================
   FITMIND PWA — Premium Design System v3
   Refined green accent + calm neutrals + glassmorphism
   ============================================================================= */

/* === 1. RESET ============================================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;height:100%;height:100dvh;-webkit-text-size-adjust:100%;touch-action:manipulation;background:var(--bg)}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);height:100%;height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer;-webkit-user-select:none;user-select:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* === 2. DESIGN TOKENS ===================================================== */
/* Semantic two-theme system. Dark is the default; [data-theme="light"]
   overrides every token. Components must only use tokens — no literals. */
:root{
  color-scheme: dark;

  /* Base surfaces — near-black with solid charcoal cards (reference look) */
  --bg:        #0B0B0A;
  --bg-elevated: #171815;
  --bg-card:   #161715;
  --bg-card-hover: #1D1E1B;
  --surface:   #121310;
  --surface-2: #1A1B18;
  --surface-3: #242522;
  --border:    rgba(255,255,255,0.07);
  --border-light: rgba(255,255,255,0.11);

  /* Neutral ink-over-surface scale (flips per theme) */
  --fill-faint: rgba(255,255,255,0.02);
  --fill-1: rgba(255,255,255,0.045);
  --fill-2: rgba(255,255,255,0.065);
  --fill-3: rgba(255,255,255,0.09);
  --fill-4: rgba(255,255,255,0.13);
  --fill-5: rgba(255,255,255,0.19);
  --ink-1: rgba(255,255,255,0.9);
  --ink-2: rgba(255,255,255,0.6);
  --ink-3: rgba(255,255,255,0.44);
  --ink-4: rgba(255,255,255,0.26);

  /* Glass materials */
  --glass-bg: rgba(28,28,30,0.68);
  --glass-bg-strong: rgba(24,24,26,0.88);
  --glass-border: rgba(255,255,255,0.12);
  --scrim: rgba(8,8,10,0.7);
  --bg-fade-0: rgba(11,11,10,0);
  --bg-fade-strong: rgba(11,11,10,0.92);
  --tooltip-bg: rgba(16,16,18,0.94);

  /* Accent — volt lime (brand), used with discipline: nav, CTAs, gauges */
  --lime:      #D2FF3A;
  --lime-vivid:#D2FF3A;
  --lime-dim:  rgba(210,255,58,0.13);
  --lime-glow: rgba(210,255,58,0.07);
  --lime-border: rgba(210,255,58,0.30);
  --on-accent: #191E00;
  --green:     #D2FF3A;
  --green-dim: rgba(210,255,58,0.11);

  /* Semantic */
  --red:       #FF453A;
  --red-dim:   rgba(255,69,58,0.13);
  --amber:     #FF9F0A;
  --amber-dim: rgba(255,159,10,0.13);
  --teal:      #64D2FF;
  --teal-dim:  rgba(100,210,255,0.12);
  --blue:      #0A84FF;
  --blue-dim:  rgba(10,132,255,0.13);
  --purple:    #BF5AF2;
  --purple-dim: rgba(191,90,242,0.14);
  --pink:      #FF6B9D;

  /* Text */
  --text:      #F5F5F7;
  --text-secondary: #98989F;
  --text-muted: #5D5D63;

  /* Charts + body maps */
  --gauge-track: rgba(255,255,255,0.06);
  --gauge-tick: rgba(255,255,255,0.15);
  --chart-grid: rgba(255,255,255,0.09);
  --chart-text: #8E8E93;
  --chart-punch: #141417;            /* dot borders "punch out" of lines */
  --muscle-fill: #18263f;
  --muscle-fill-strong: #223556;
  --muscle-stroke: #0f1726;
  --muscle-label: #dbe7ff;
  --muscle-sublabel: #8ca1c7;
  --body-outline-fill: #1a1a1c;
  --body-outline-stroke: #3a4a5c;
  --body-zone-stroke: rgba(255,255,255,0.55);
  --fatigue-cool: #1b2b46;
  --fatigue-hot: #ff7a00;

  /* Bottom-nav liquid chain (js/nav-blob.js) — lobe body + inner icon wells */
  --nav-lobe: #2D2F2B;
  --nav-well: rgba(15,16,14,0.45);

  /* Stage backdrop (exercise heatmap header band) + ambient bg glows */
  --stage-bg: linear-gradient(180deg, #16191F 0%, #101013 100%);
  --stage-fade-0: rgba(16,16,19,0);
  --stage-fade: rgba(16,16,19,0.96);
  --bg-glow-accent: rgba(48,209,88,0.04);
  --bg-glow-cool: rgba(100,210,255,0.03);

  /* Fonts — system stacks: SF on iOS, no network fonts needed */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Spacing */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;

  /* Radius */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Safe area */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
:root[data-theme="light"]{
  color-scheme: light;

  --bg:        #EFF1EB;              /* soft sage-gray (reference light) */
  --bg-elevated: #FFFFFF;
  --bg-card:   #FFFFFF;
  --bg-card-hover: #FDFEFB;
  --surface:   #FFFFFF;
  --surface-2: #F6F8F1;
  --surface-3: #E9ECE1;
  --border:    rgba(0,0,0,0.08);
  --border-light: rgba(0,0,0,0.13);

  --fill-faint: rgba(0,0,0,0.028);
  --fill-1: rgba(0,0,0,0.045);
  --fill-2: rgba(0,0,0,0.06);
  --fill-3: rgba(0,0,0,0.085);
  --fill-4: rgba(0,0,0,0.12);
  --fill-5: rgba(0,0,0,0.17);
  --ink-1: rgba(0,0,0,0.88);
  --ink-2: rgba(0,0,0,0.56);
  --ink-3: rgba(0,0,0,0.4);
  --ink-4: rgba(0,0,0,0.25);

  --glass-bg: rgba(255,255,255,0.66);
  --glass-bg-strong: rgba(250,250,252,0.92);
  --glass-border: rgba(0,0,0,0.09);
  --scrim: rgba(32,32,36,0.42);
  --bg-fade-0: rgba(239,241,235,0);
  --bg-fade-strong: rgba(239,241,235,0.94);
  --tooltip-bg: rgba(255,255,255,0.97);

  --lime:      #55670D;              /* volt-olive, readable on light surfaces */
  --lime-vivid:#C9F14E;              /* chips, rings, button fills (dark ink on top) */
  --lime-dim:  rgba(160,200,30,0.16);
  --lime-glow: rgba(160,200,30,0.10);
  --lime-border: rgba(130,165,20,0.38);
  --on-accent: #191E00;
  --green:     #55670D;
  --green-dim: rgba(160,200,30,0.14);

  --red:       #D70015;
  --red-dim:   rgba(215,0,21,0.10);
  --amber:     #B25A00;
  --amber-dim: rgba(178,90,0,0.12);
  --teal:      #0071A4;
  --teal-dim:  rgba(0,113,164,0.11);
  --blue:      #0A5FD7;
  --blue-dim:  rgba(10,95,215,0.11);
  --purple:    #8944AB;
  --purple-dim: rgba(137,68,171,0.12);
  --pink:      #D6336C;

  --text:      #1D1D1F;
  --text-secondary: #6E6E73;
  --text-muted: #AEAEB2;

  --gauge-track: rgba(0,0,0,0.07);
  --gauge-tick: rgba(0,0,0,0.16);
  --chart-grid: rgba(0,0,0,0.09);
  --chart-text: #6C6C70;
  --chart-punch: #FFFFFF;
  --muscle-fill: #D9E1EC;
  --muscle-fill-strong: #C4D0DF;
  --muscle-stroke: #A8B7C9;
  --muscle-label: #2B3A4E;
  --muscle-sublabel: #5A6B80;
  --body-outline-fill: #E7EBF1;
  --body-outline-stroke: #B4C0D0;
  --body-zone-stroke: rgba(35,48,66,0.4);
  --fatigue-cool: #DCE4F1;
  --fatigue-hot: #ff7a00;

  --nav-lobe: #FFFFFF;
  --nav-well: rgba(26,30,14,0.09);

  --stage-bg: linear-gradient(180deg, #EAECF1 0%, #F5F6F8 100%);
  --stage-fade-0: rgba(245,246,248,0);
  --stage-fade: rgba(245,246,248,0.96);
  --bg-glow-accent: rgba(52,199,89,0.05);
  --bg-glow-cool: rgba(0,113,164,0.04);
}

/* === 3. APP SHELL ========================================================= */
#app{
  display:flex;flex-direction:column;
  height:100vh;          /* fallback */
  height:100dvh;         /* modern iOS: full screen incl. home-indicator area */
  /* NO padding-top: the scroll surface owns the whole screen so content
     slides BEHIND the status bar / island (Instagram-style). Safe-area
     clearance moves into .screen-content instead. */
  position:relative;
  overflow:hidden;
  background:var(--bg);
}

/* Subtle gradient background */
#app::before{
  content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(ellipse at 30% 20%, var(--bg-glow-accent) 0%, transparent 50%),
             radial-gradient(ellipse at 70% 80%, var(--bg-glow-cool) 0%, transparent 50%);
  pointer-events:none;z-index:0;
}

/* === 4. TYPOGRAPHY ======================================================== */
.h1{font-family:var(--font-display);font-size:1.65rem;font-weight:800;letter-spacing:-0.02em;color:var(--text);line-height:1.15}
.h2{font-size:1.5rem;font-weight:600;color:var(--text);letter-spacing:-0.3px}
.h3{font-size:1rem;font-weight:600;color:var(--text)}
.stat-value{font-family:var(--font-mono);font-size:2rem;font-weight:600;color:var(--text);line-height:1}
.stat-value.sm{font-size:1.25rem}
.stat-value.lg{font-size:3rem}
.stat-value.xl{font-size:3.5rem;color:var(--lime)}
.stat-label{font-size:0.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.2px;font-weight:500}
.body-text{font-size:0.875rem;line-height:1.65;color:var(--text-secondary)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-secondary);font-size:0.8rem}

/* === 5. SCROLLBAR ========================================================= */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}

/* === 6. SCREENS =========================================================== */
.screen{
  display:none;flex:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(112px + var(--safe-bottom));  /* clears the larger menu */
  position:relative;z-index:1;
  overscroll-behavior:contain;
  min-height:0;
}
.screen.active{display:block;animation:screenIn 0.4s var(--ease)}
.screen-content{padding:calc(var(--safe-top) + var(--space-lg)) var(--space-md) var(--space-lg);max-width:480px;margin:0 auto}
#chat.screen{
  padding-bottom:0;
  overflow:hidden;
}
#chat .screen-content{
  padding:var(--safe-top) var(--space-md) 0;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:0;
  height:calc(100dvh - 64px - var(--safe-bottom));
}
body.chat-keyboard-open #chat .chat-input-bar{
  padding-bottom:var(--space-sm);
}

@keyframes screenIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* === 7. BOTTOM TAB BAR (Apple-style glassmorphic) ========================= */
.tab-bar{
  /* REAL FIX (2026-07-07): this iPhone's standalone LAYOUT viewport is only
     ~793px; the physical screen is 852. Neither fixed nor absolute can reach
     the bottom 59px — only a NEGATIVE offset paints into it (same trick as
     #ios-gap-fill). JS measures --bottom-strip = screenH − innerHeight − sab
     (≈25px paint-only strip) and we drop the menu into it. --nav-clear is the
     gap left above the true visible bottom. On web/normal devices strip=0. */
  position:fixed;left:0;right:0;
  /* nav-clear 22 lands the chain ~18px above the home indicator (Instagram
     position) once the ~25px paint strip is subtracted on the phone. On web,
     strip=0 so it's simply 22px up. Raise/lower this ONE number to tune. */
  bottom:calc(var(--nav-clear, 22px) - var(--bottom-strip, 0px));
  z-index:100;
  display:flex;justify-content:center;align-items:center;
  padding:0 14px;
  pointer-events:none;
}
/* Content scrolls UNDER the menu and fades toward the screen edge. Kept
   translucent almost to the bottom so there is no dead flat band below
   the chain — full-bleed feel. */
.tab-bar::before{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;top:-40px;
  background:linear-gradient(180deg, var(--bg-fade-0) 0%, var(--bg-fade-strong) 92%);
  pointer-events:none;
  z-index:-1;
}
/* (Bottom-gap compensation removed 2026-07-07: the owner's standalone
   container already reaches the true physical bottom; the 59px "gap" was the
   top status bar. 100dvh + safe-area CSS handles placement correctly.) */

/* Matching soft scrim behind the status bar / Dynamic Island so scrolled
   content fades out at the top edge instead of colliding with the clock */
#app::after{
  content:'';
  position:fixed;
  top:0;left:0;right:0;
  height:calc(var(--safe-top) + 20px);
  background:linear-gradient(180deg, var(--bg-fade-strong) 30%, var(--bg-fade-0) 100%);
  pointer-events:none;
  z-index:90;
}
/* Inner pill container — the floating translucent bar */
.tab-bar-inner{
  display:flex;align-items:center;
  gap:6px;
  padding:7px 10px;
  position:relative;
  overflow:hidden;
  border-radius:999px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border:1px solid var(--fill-3);
  box-shadow:0 4px 24px rgba(0,0,0,0.4), 0 0 0 0.5px var(--fill-2) inset;
  pointer-events:auto;
}
.tab-active-glass{
  position:absolute;
  top:0;
  left:0;
  width:58px;
  height:56px;
  border-radius:999px;
  pointer-events:none;
  opacity:0;
  z-index:0;
  transform:translate3d(0,0,0);
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease,
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 240ms cubic-bezier(0.22, 1, 0.36, 1);
  background:linear-gradient(180deg, var(--fill-5) 0%, var(--fill-3) 100%);
  border:1px solid var(--fill-4);
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  backdrop-filter:blur(16px) saturate(165%);
  box-shadow:
    inset 0 1px 0 var(--fill-4),
    inset 0 -14px 24px var(--fill-faint),
    0 10px 24px rgba(0,0,0,0.22);
  will-change:transform, opacity;
}
.tab-active-glass::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 10%, var(--ink-4) 0%, transparent 44%),
    linear-gradient(180deg, var(--fill-3) 0%, var(--fill-faint) 100%);
  opacity:0.95;
}
.tab-active-glass::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:
    linear-gradient(112deg,
      rgba(255,108,156,0.16) 0%,
      var(--fill-1) 24%,
      rgba(111,228,255,0.16) 78%,
      var(--fill-1) 100%);
  opacity:0.18;
  filter:blur(5px);
  mix-blend-mode:screen;
}
.tab-bar-inner.is-traveling .tab-active-glass{
  filter:saturate(115%);
  box-shadow:
    inset 0 1px 0 var(--fill-5),
    inset 0 -14px 24px var(--fill-1),
    0 12px 28px rgba(0,0,0,0.26);
}
.tab-bar-inner.is-traveling .tab-active-glass::after{
  opacity:0.26;
}
body.chat-keyboard-open .tab-bar{
  display:none !important;
}
.tab-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  justify-content:center;
  min-width:58px;
  height:56px;
  padding:7px 13px;
  color:var(--ink-2);
  border-radius:999px;
  transition:color 0.25s var(--ease), transform 0.2s var(--ease), opacity 0.2s var(--ease);
  position:relative;
  z-index:1;
  overflow:hidden;
  background:transparent;
}
.tab-item > *{position:relative;z-index:1}
.tab-item svg{width:22px;height:22px;stroke-width:1.8;transition:all 0.25s var(--ease)}
.tab-item span{font-size:10px;font-weight:600;letter-spacing:0.03em;opacity:0.8;transition:all 0.25s var(--ease)}
.tab-item:active{transform:scale(0.92)}
/* Active styling lives in section 21 (overlapping-circles nav). The old
   highlight-pill rules and the chat-tab special case were removed — the
   attribute selector's higher specificity was overriding the volt circle. */
.tab-item.active svg{
  stroke:currentColor;
  filter:none;
}
.tab-item::after{display:none}

/* === 8. GLASS CARDS ======================================================= */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  transition:background 0.2s var(--ease), border-color 0.2s;
  position:relative;overflow:hidden;
}
.card:hover{background:var(--bg-card-hover)}

/* Glow variants */
.card-glow{box-shadow:0 0 40px -10px var(--lime-glow)}
.card-glow::before{
  content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg, var(--lime-dim) 0%, transparent 50%);
  pointer-events:none;z-index:0;
}
.card-glow > *{position:relative;z-index:1}

.card-dark{background:var(--surface-2);border-color:var(--fill-1)}

.card-title{
  display:flex;align-items:center;gap:var(--space-sm);
  margin-bottom:var(--space-md);font-size:0.8rem;font-weight:650;
  color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.06em;
}

/* Accent left border */
.card-accent-left{border-left:3px solid var(--lime);padding-left:var(--space-lg)}

/* === 9. RECOVERY GAUGE ==================================================== */
.recovery-hero{
  text-align:center;padding:var(--space-sm) var(--space-md);
}
.gauge-container{
  position:relative;width:118px;height:118px;margin:0 auto var(--space-sm);
}
.gauge-container svg{width:100%;height:100%}
.gauge-score{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;
}
.gauge-score .score-value{
  font-family:var(--font-mono);font-size:1.85rem;font-weight:700;
  color:var(--lime);line-height:1;
}
.gauge-score .score-label{
  font-size:0.5rem;color:var(--text-secondary);text-transform:uppercase;
  letter-spacing:1px;margin-top:2px;
}
.recovery-rec{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:var(--radius-full);
  font-size:0.75rem;font-weight:500;letter-spacing:0.5px;
}
.recovery-rec.green{background:var(--green-dim);color:var(--lime)}
.recovery-rec.amber{background:var(--amber-dim);color:var(--amber)}
.recovery-rec.red{background:var(--red-dim);color:var(--red)}

/* Mini metrics row under gauge */
.mini-metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm);
  margin-top:var(--space-sm);
}
.mini-metric{
  text-align:center;padding:var(--space-sm);
  background:var(--fill-faint);border-radius:var(--radius-sm);
}
.mini-metric .mm-value{
  font-family:var(--font-mono);font-size:1.1rem;font-weight:600;color:var(--text);
}
.mini-metric .mm-label{
  font-size:0.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px;
}
.mini-metric .mm-trend{font-size:0.6rem;font-family:var(--font-mono)}
.mm-trend.down{color:var(--red)}
.mm-trend.up{color:var(--lime)}
.mm-trend.neutral{color:var(--text-muted)}

/* === 10. METRIC CARDS ===================================================== */
.metric-grid{display:grid;gap:var(--space-sm)}
.metric-grid-2{grid-template-columns:repeat(2,1fr)}
.metric-grid-3{grid-template-columns:repeat(3,1fr)}
.metric-grid-4{grid-template-columns:repeat(4,1fr)}

.metric-card{
  background:var(--fill-1);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-md);
  text-align:center;
}
.metric-trend{font-size:0.7rem;font-family:var(--font-mono);margin-top:4px}
.trend-up{color:var(--lime)}
.trend-down{color:var(--red)}
.trend-neutral{color:var(--text-muted)}

.ui-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  line-height:0;
  vertical-align:middle;
}
.ui-icon svg{
  width:1em;
  height:1em;
  display:block;
}
.ui-icon-xs{font-size:12px}
.ui-icon-sm{font-size:14px}
.ui-icon-md{font-size:18px}
.icon-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.activity-icon-stack{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.activity-icon-stack-compact{
  gap:4px;
}
.activity-icon-badge{
  width:24px;
  height:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--fill-2);
  border:1px solid var(--fill-3);
  color:var(--ink-1);
  box-shadow:inset 0 1px 0 var(--fill-2);
}

/* === 11. FEEL SELECTOR ==================================================== */
.feel-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}
.feel-btn{
  min-width:0;
  padding:11px 6px;
  border-radius:var(--radius-md);
  font-size:0.8rem;
  font-weight:500;
  background:var(--fill-1);border:1px solid var(--border);
  transition:all 0.2s var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
}
.feel-btn:hover:not(.locked-out){background:var(--fill-2)}
.feel-btn.active{transform:scale(1.05);box-shadow:0 0 0 2px var(--lime),0 0 12px var(--lime-glow)}
.feel-btn.active.good{background:var(--green-dim);border-color:var(--lime);color:var(--lime)}
.feel-btn.active.okay{background:var(--amber-dim);border-color:var(--amber);color:var(--amber)}
.feel-btn.active.tired{background:var(--red-dim);border-color:var(--red);color:var(--red)}
.feel-btn.sore { }
.feel-btn.sore.active{background:var(--purple-dim);border-color:var(--purple);color:var(--purple)}
.feel-btn.locked-out{opacity:0.25;filter:saturate(0.3);cursor:pointer;transform:none;box-shadow:none;transition:opacity .2s,filter .2s}
.feel-btn-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* === 12. INPUTS =========================================================== */
.input{
  width:100%;padding:12px 16px;
  background:var(--fill-1);border:1px solid var(--border);
  border-radius:var(--radius-md);color:var(--text);font-size:0.9rem;
  transition:border-color 0.2s;
}
.input:focus{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-glow)}
.input-number{width:100px;text-align:center;font-family:var(--font-mono);font-size:1.1rem}
.input-unit{color:var(--text-muted);font-size:0.85rem;font-weight:500}
.input-label{
  display:flex;align-items:center;gap:var(--space-sm);
  font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:var(--space-sm);font-weight:500;
}

/* === 13. BUTTONS (frosted glass — matches tab-bar language) =============== */
.btn-primary{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);
  padding:14px 24px;
  background:var(--lime-vivid);
  color:var(--on-accent);
  border:1px solid transparent;
  border-radius:var(--radius-md);font-weight:600;font-size:0.9rem;
  transition:all 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  letter-spacing:0.3px;
  overflow:hidden;
  box-shadow:
    0 2px 10px var(--lime-dim),
    0 8px 26px var(--lime-glow);
}
.btn-primary::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.btn-primary:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:
    0 4px 14px var(--lime-dim),
    0 10px 32px var(--lime-glow);
}
.btn-primary:active{transform:translateY(0);filter:brightness(0.96)}
.btn-start-session{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:1.05rem;letter-spacing:.5px;padding:16px 24px;
  border-radius:999px;
}

.btn-secondary{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);
  padding:12px 20px;
  background:var(--fill-2);
  color:var(--text);
  border:1px solid var(--fill-3);
  border-radius:var(--radius-md);font-weight:500;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  transition:all 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 var(--fill-3),
    0 4px 24px rgba(0,0,0,0.25),
    0 0 0 0.5px var(--fill-1) inset;
}
.btn-secondary::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:
    radial-gradient(ellipse at 50% 0%, var(--fill-3) 0%, transparent 60%),
    linear-gradient(180deg, var(--fill-2) 0%, var(--fill-faint) 100%);
  pointer-events:none;
}
.btn-secondary:hover{
  background:var(--fill-4);
  border-color:var(--fill-4);
  box-shadow:
    inset 0 1px 0 var(--fill-4),
    0 8px 32px rgba(0,0,0,0.3);
}

.btn-ghost{
  position:relative;
  padding:12px 20px;color:var(--text-secondary);font-weight:500;
  border-radius:var(--radius-md);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  background:var(--fill-1);
  border:1px solid transparent;
  transition:all 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-ghost:hover{
  color:var(--text);
  background:var(--fill-3);
  border-color:var(--fill-3);
}

/* === 14. BADGES =========================================================== */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:var(--radius-full);
  font-size:0.65rem;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%}
.badge-green{background:var(--green-dim);color:var(--lime)}
.badge-green::before{background:var(--lime)}
.badge-amber{background:var(--amber-dim);color:var(--amber)}
.badge-amber::before{background:var(--amber)}
.badge-red{background:var(--red-dim);color:var(--red)}
.badge-red::before{background:var(--red)}
.badge-teal{background:var(--teal-dim);color:var(--teal)}
.badge-teal::before{background:var(--teal)}
.badge-muted{background:var(--fill-2);color:var(--text-muted)}
.badge-muted::before{background:var(--text-muted)}

/* === 15. NUTRITION ======================================================== */
/* Nutrition Goals */
.nutrition-goals {
  display: flex; justify-content: space-between; gap: 8px; padding: 4px 0;
}
.nutrition-goal-item {
  text-align: center; flex: 1;
}
.nutrition-goal-value {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; line-height: 1;
}
.nutrition-goal-value.cals { color: var(--lime); }
.nutrition-goal-value.protein { color: var(--teal); }
.nutrition-goal-value.carbs { color: var(--amber); }
.nutrition-goal-value.fat { color: var(--red); }
.nutrition-goal-unit {
  font-size: .6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;
}
.nutrition-goal-name {
  font-size: .65rem; color: var(--text-secondary); margin-top: 2px;
}

/* Nutrition Confirmation */
.nutrition-confirm {
  display:flex;
  gap:6px;
  margin-top:10px;
}
.nutrition-btn {
  flex:1 1 0;
  min-width:0;
  padding:10px 6px;
  border-radius:var(--radius-full);
  border:1px solid var(--fill-2);
  background:var(--fill-1);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--ink-2);
  font-size:.68rem;
  font-weight:600;
  cursor:pointer;
  transition:all .3s var(--ease);
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.2;
}
.nutrition-btn .nutrition-choice-icon{display:none}
.nutrition-btn .nutrition-btn-label{white-space:nowrap}
.nutrition-btn:active { transform: scale(0.96); }
.nutrition-btn.nailed { }
.nutrition-btn.close { }
.nutrition-btn.missed { }
.nutrition-btn.active.nailed { background: var(--lime-glow); border-color: var(--lime-dim); color: var(--lime); }
.nutrition-btn.active.close { background: var(--amber-dim); border-color: var(--amber-dim); color: var(--amber); }
.nutrition-btn.active.missed { background: var(--red-dim); border-color: var(--red-dim); color: var(--red); }
.choice-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex-shrink:0;
}
.choice-icon svg{
  width:16px;
  height:16px;
  display:block;
}
.feel-choice-icon{
  width:15px;
  height:15px;
  color:var(--ink-1);
}
.feel-choice-icon svg{
  width:15px;
  height:15px;
}
.nutrition-choice-icon{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid var(--fill-2);
  background:var(--fill-1);
  box-shadow:inset 0 1px 0 var(--fill-2);
}
.nutrition-choice-icon svg{
  width:13px;
  height:13px;
}
.nutrition-btn-label{
  display:flex;
  align-items:center;
  white-space:nowrap;
}
.nutrition-btn .nutrition-choice-icon{
  color:var(--ink-2);
  background:var(--fill-1);
  border-color:var(--fill-3);
}
.nutrition-btn.active.nailed .nutrition-choice-icon{
  color:var(--lime);
  background:var(--lime-glow);
  border-color:var(--lime-dim);
}
.nutrition-btn.active.close .nutrition-choice-icon{
  color:var(--amber);
  background:var(--amber-dim);
  border-color:var(--amber-dim);
}
.nutrition-btn.active.missed .nutrition-choice-icon{
  color:var(--red);
  background:var(--red-dim);
  border-color:var(--red-dim);
}
.nutrition-btn.active .nutrition-choice-icon{
  box-shadow:inset 0 1px 0 var(--fill-3), 0 0 0 1px var(--fill-1);
}
.nutrition-summary{
  display:flex;align-items:center;gap:10px;
  margin-top:10px;padding:10px 16px;
  border-radius:var(--radius-xl);
  border:1px solid var(--fill-2);
  background:var(--fill-1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  animation:nutritionFadeIn .35s var(--ease) both;
}
.nutrition-summary:active{transform:scale(0.98)}
.nutrition-summary-label{
  font-size:.72rem;font-weight:700;white-space:nowrap;
}
.nutrition-summary-msg{
  font-size:.68rem;color:var(--text-muted);font-style:italic;
}
@keyframes nutritionFadeIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* === 15b. WARM-UP BLOCK =================================================== */
.warmup-block{border-left:3px solid var(--teal, #40c0a0);background:var(--teal-dim);padding:var(--space-md);border-radius:var(--radius-md)}
.warmup-title{font-size:.8rem;font-weight:700;color:var(--teal, #40c0a0);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--space-sm)}
.warmup-list{list-style:disc;padding-left:1.2em}
.warmup-list li{font-size:.82rem;color:var(--text-secondary);line-height:1.6;margin-bottom:4px}

/* === 15c. EXERCISE MINI HEATMAP =========================================== */
.exercise-heatmap-slot{
  position:relative;
  width:calc(100% + (var(--space-lg) * 2));
  height:168px;
  max-height:168px;
  overflow:hidden;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  margin:0 calc(var(--space-lg) * -1) 12px;
  padding:10px 0 0;
  background:var(--stage-bg);
  border-bottom:1px solid var(--fill-1);
  isolation:isolate;
}
.exercise-heatmap-slot::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top center, var(--lime-glow), transparent 48%),
    linear-gradient(180deg, var(--fill-1), transparent 42%);
  pointer-events:none;
  z-index:0;
}
.exercise-heatmap-views{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:0;
  height:100%;
  width:100%;
  overflow:hidden;
}
.exercise-heatmap-view{
  flex:1 1 0;
  min-width:0;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Single view (only front or only back) gets full width */
.exercise-heatmap-view:only-child{
  flex:0 1 100%;
  max-width:78%;
}
.exercise-heatmap-view svg{
  width:100% !important;
  height:100% !important;
  opacity:0.96;
}
/* Fade-out mask at the bottom of each heatmap */
.exercise-heatmap-slot::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:46px;
  background:linear-gradient(180deg, var(--stage-fade-0), var(--stage-fade) 78%, var(--surface) 100%);
  pointer-events:none;
  z-index:2;
}

/* === 16. EXERCISE CARDS =================================================== */
.exercise-card{overflow:hidden;padding-top:0;border-left:3px solid transparent}
.exercise-card.exercise-active{border-left-color:var(--teal,#40c0a0) !important}
.exercise-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-sm)}
.exercise-name{font-size:0.95rem;font-weight:600;color:var(--text)}
.exercise-tip{
  font-size:.7rem;color:var(--ink-3);font-style:italic;
  margin:-2px 0 8px;line-height:1.4;
}
.uni-badge{
  display:inline-block;margin-left:6px;padding:1px 6px;
  border-radius:var(--radius-full);font-size:.55rem;font-weight:600;
  background:var(--blue-dim);color:var(--blue);
  text-transform:uppercase;letter-spacing:.5px;vertical-align:middle;
}
.muscle-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:var(--space-md)}
.muscle-tag{
  padding:3px 8px;border-radius:var(--radius-full);
  background:var(--lime-dim);color:var(--lime);
  font-size:0.6rem;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;
}

.set-grid{font-size:0.8rem}
.set-grid-header{
  display:grid;grid-template-columns:40px 1fr 70px 60px 40px;gap:var(--space-sm);
  padding:var(--space-xs) 0;color:var(--text-muted);font-size:0.65rem;
  text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border);
  margin-bottom:var(--space-xs);
}
.set-row{
  display:grid;grid-template-columns:40px 1fr 70px 60px 40px;gap:var(--space-sm);
  align-items:center;padding:var(--space-sm) 0;
  border-bottom:1px solid var(--fill-faint);
  transition:background 0.2s;
}
.set-row.done{background:var(--lime-glow);border-radius:var(--radius-sm)}
.set-row.done .set-done-btn{color:var(--lime)}
.set-num{font-family:var(--font-mono);color:var(--text-muted);text-align:center}
.set-prev{font-size:0.7rem}
.set-weight,.set-reps{
  padding:6px 8px;background:var(--fill-1);border:1px solid var(--border);
  border-radius:var(--radius-sm);text-align:center;font-family:var(--font-mono);
  font-size:16px;color:var(--text);width:100%;
}
.set-weight:focus,.set-reps:focus{border-color:var(--lime)}
.set-done-btn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);color:var(--text-muted);
  transition:all 0.2s;background:var(--fill-1);
}
.set-done-btn:hover{color:var(--lime);background:var(--lime-dim)}
.set-done-btn.done{color:var(--lime);background:var(--lime-dim)}

/* Exercise list preview */
.exercise-list{display:flex;flex-direction:column;gap:2px}
.exercise-preview{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;font-size:0.85rem;
}
.exercise-preview-name{color:var(--text-secondary)}

/* === 17. SESSION TIMER ==================================================== */
.session-timer{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:8px 14px;background:var(--lime-glow);
  border:1px solid var(--lime-dim);border-radius:var(--radius-full);
}
.timer-dot{
  width:8px;height:8px;border-radius:50%;background:var(--lime);
  animation:pulse 1.5s infinite;
}
#timer-display{font-size:1.1rem;color:var(--lime);letter-spacing:1px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}

/* === 18. CHAT ============================================================= */

/* Coach widget bar on Home screen */
.coach-widget{
  padding:var(--space-lg);overflow:hidden;position:relative;
  border-color:var(--lime-dim);
  box-shadow:0 0 40px -10px var(--lime-glow), inset 0 1px 0 var(--lime-glow);
}
.coach-widget::before{
  content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, var(--lime-glow) 0%, transparent 40%, transparent 60%, var(--lime-glow) 100%);
  z-index:0;
}
.coach-widget > *{position:relative;z-index:1}
.coach-widget-suggestions{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:14px;
}
.coach-widget-bar{
  display:flex;align-items:center;gap:8px;
}
.coach-widget-bar .chat-input{
  flex:1;min-width:0;width:auto;padding:10px 16px;font-size:.82rem;
  border-radius:var(--radius-full);
}
.coach-widget-bar svg{flex-shrink:0}
.btn-send-sm{
  width:36px;height:36px;border-radius:50%;
  background:var(--lime-vivid);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;flex-shrink:0;
}
.btn-send-sm:hover{filter:brightness(1.1);box-shadow:0 0 12px var(--lime-dim)}

/* Coach / planner fullscreen overlays */
.coach-fullscreen,
.planner-fullscreen{
  position:fixed;inset:0;z-index:1000;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
  pointer-events:none;
}
.coach-fullscreen.open,
.planner-fullscreen.open{
  transform:translateY(0);
  pointer-events:auto;
}
#chat .coach-fullscreen,
#chat .coach-fullscreen.open{
  position:relative;
  inset:auto;
  z-index:1;
  flex:1;
  width:100%;
  min-height:0;
  background:transparent;
  transform:none;
  transition:none;
  pointer-events:auto;
  overflow-x:hidden;
}
#chat .coach-fs-header{
  padding:6px 4px 8px;
}
#chat .chat-area{
  min-height:0;
  padding:var(--space-md) 4px;
}
#chat .quick-prompts{
  padding:8px 4px 0;
}
#chat .chat-img-preview{
  padding:6px 4px 0;
}
#chat .chat-input-bar{
  /* screen-content height already subtracts safe-bottom + nav space, so DON'T
     add safe-area again here (that double-count was the big gap above the nav) */
  padding:6px 4px 8px;
  background:linear-gradient(180deg, var(--bg-fade-0) 0%, var(--bg-fade-strong) 24%);
}
#chat .chat-input{
  background:transparent;
  border:none;
  font-size:16px;
}
.coach-fs-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.coach-fs-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.coach-fs-title{
  font-weight:600;font-size:1rem;color:var(--text);
  letter-spacing:-0.01em;
}
.coach-fs-meta{
  font-size:.7rem;
  line-height:1.4;
}
/* Coach/Planner gooey blob toggle — a volt "light" morphs between the two
   sides. The goo SVG filter (chatGoo) rounds + liquefies the blob so the
   squash during the move reads as liquid. */
.chat-mode-switch{
  position:relative;display:inline-flex;flex-shrink:0;
  background:var(--fill-1);border:1px solid var(--border);
  border-radius:16px;padding:3px;
}
.chat-mode-goo{
  position:absolute;inset:4px;z-index:0;pointer-events:none;
  filter:url(#chatGoo);
}
.chat-mode-blob{
  position:absolute;top:0;left:0;width:50%;height:100%;
  transition:transform .42s cubic-bezier(.5,1.35,.4,1);
  will-change:transform;
}
.chat-mode-switch[data-active="planner"] .chat-mode-blob{transform:translateX(100%)}
.chat-mode-blob-fill{
  display:block;width:100%;height:100%;
  background:var(--lime-vivid);border-radius:12px;transform-origin:center;
}
.chat-mode-blob-fill.morph{animation:chatBlobMorph .42s cubic-bezier(.5,1.2,.4,1)}
@keyframes chatBlobMorph{
  0%{transform:scaleX(1)}
  45%{transform:scaleX(1.55)}
  100%{transform:scaleX(1)}
}
.chat-goo-defs{position:absolute;width:0;height:0}
.chat-mode-btn{
  position:relative;z-index:1;flex:1;min-width:54px;text-align:center;
  padding:5px 11px;border:none;background:none;border-radius:13px;
  color:var(--text-secondary);font-size:.72rem;font-weight:600;line-height:1;
  transition:color .28s var(--ease);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.chat-mode-btn.active{color:var(--on-accent)}
.chat-mode-btn:disabled{opacity:.55;cursor:not-allowed}
.coach-minimize-btn{
  width:48px;height:48px;border-radius:50%;
  background:var(--fill-3);
  border:1px solid var(--border);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.2s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.coach-minimize-btn:hover{
  background:var(--fill-3);color:var(--lime);
  border-color:var(--lime-border);
}
.coach-fullscreen .chat-area,
.planner-fullscreen .chat-area{
  flex:1;overflow-y:auto;padding:var(--space-md) 20px;
  display:flex;flex-direction:column;gap:var(--space-md);
}
.coach-fullscreen .quick-prompts,
.planner-fullscreen .quick-prompts{
  padding:var(--space-sm) 20px;
}
.coach-fullscreen .chat-input-bar,
.planner-fullscreen .chat-input-bar{
  padding:var(--space-sm) 20px;
  padding-bottom:calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
}
/* Prevent iOS auto-zoom on input focus (must be >= 16px) */
.coach-fullscreen .chat-input,
.planner-fullscreen .chat-input{font-size:16px}
.coach-widget-bar .chat-input{font-size:16px}
.chat-area{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--space-md) 0;
  display:flex;flex-direction:column;gap:var(--space-md);
  overscroll-behavior:contain;
}
.msg-mode-badge{
  display:none;
  align-items:center;
  margin-bottom:8px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--fill-2);
  border:1px solid var(--fill-3);
  color:var(--text-muted);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.msg-user .msg-mode-badge{
  background:var(--fill-2);
  border-color:var(--fill-3);
  color:var(--text-secondary);
}
@media (max-width: 420px){
  .coach-fs-header{
    align-items:flex-start;
    gap:12px;
  }
  .coach-minimize-btn{
    width:42px;
    height:42px;
    flex-shrink:0;
  }
}
/* iMessage-style bubbles — neutral graphite; volt stays for accents only.
   Received (assistant) sits left and slightly darker; sent (user) sits right and
   a touch lighter, both with a small tail corner. */
:root{
  --chat-recv:#262629; --chat-recv-text:#F2F2ED;
  --chat-sent:#3a3a40; --chat-sent-text:#FFFFFF;
}
[data-theme="light"]{
  --chat-recv:#E9E9EB; --chat-recv-text:#141416;
  --chat-sent:#D3D3D9; --chat-sent-text:#141416;
}
.msg{
  max-width:78%;padding:8px 13px;font-size:0.95rem;line-height:1.4;
  border-radius:19px;
}
.msg-user{
  align-self:flex-end;
  background:var(--chat-sent);color:var(--chat-sent-text);
  border-bottom-right-radius:6px;
}
.msg-assistant{
  align-self:flex-start;
  background:var(--chat-recv);color:var(--chat-recv-text);
  border-bottom-left-radius:6px;
}
/* Tight grouping: small gap within a run, more air when the speaker changes */
.chat-area{gap:3px}
.coach-fullscreen .chat-area,.planner-fullscreen .chat-area{gap:3px}
.msg-user + .msg-assistant,.msg-assistant + .msg-user{margin-top:8px}
.chat-day-divider{margin:14px 0}
.msg-with-proposal{
  min-width:min(100%, 320px);
}
.chat-proposal-card{
  margin-top:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--lime-dim);
  background:var(--lime-glow);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat-proposal-card.is-applied{
  border-color:var(--lime-border);
  background:var(--lime-dim);
}
.chat-proposal-card.is-cancelled,
.chat-proposal-card.is-failed{
  border-color:var(--fill-3);
  background:var(--fill-1);
}
.chat-proposal-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.chat-proposal-label,
.chat-proposal-status{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.chat-proposal-label{color:var(--lime)}
.chat-proposal-status{color:var(--text-muted)}
.chat-proposal-summary{
  color:var(--text);
  font-size:.9rem;
  line-height:1.45;
}
.chat-proposal-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chat-proposal-list-item{
  position:relative;
  padding-left:14px;
  color:var(--text-secondary);
  font-size:.8rem;
  line-height:1.45;
}
.chat-proposal-list-item::before{
  content:'';
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--lime);
}
.chat-proposal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.chat-proposal-btn{
  border:none;
  border-radius:999px;
  padding:10px 14px;
  background:var(--lime-vivid);
  color:var(--on-accent);
  font-size:.78rem;
  font-weight:700;
}
.chat-proposal-btn-secondary{
  background:var(--fill-2);
  color:var(--text);
  border:1px solid var(--fill-3);
}
.chat-proposal-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.typing-indicator{display:flex;align-items:center;gap:4px;padding:16px 20px}
.typing-indicator .dot{
  width:6px;height:6px;border-radius:50%;background:var(--text-muted);
  animation:typingBounce 1.4s infinite;
}
.typing-indicator .dot:nth-child(2){animation-delay:0.2s}
.typing-indicator .dot:nth-child(3){animation-delay:0.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

.quick-prompts{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-sm) 0}
.chip{
  padding:8px 14px;border-radius:var(--radius-full);
  background:var(--fill-1);border:1px solid var(--border);
  font-size:0.75rem;color:var(--text-secondary);
  transition:all 0.2s;
}
.chip:hover{background:var(--lime-dim);border-color:var(--lime-border);color:var(--lime)}
.chip:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.chat-input-bar{
  display:flex;align-items:flex-end;gap:8px;padding:var(--space-sm) 0;
}
/* The pill now wraps the field AND the send button (iMessage style) */
.chat-input-wrap{
  flex:1;min-width:0;display:flex;align-items:flex-end;gap:4px;
  background:var(--fill-1);border:1px solid var(--border);
  border-radius:22px;padding:0 4px 0 0;transition:border-color .2s;
}
.chat-input-wrap:focus-within{border-color:var(--fill-4)}
/* Chat input — contenteditable styled as a clean single-line iMessage pill that
   grows as you type (no <textarea>, so iOS shows no keyboard form-toolbar). */
.chat-input{
  flex:1;min-width:0;
  padding:9px 4px 9px 15px;
  min-height:22px;max-height:120px;overflow-y:auto;
  line-height:1.35;
  background:transparent;border:none;border-radius:0;
  color:var(--text);
  font-size:16px;                       /* keep >=16px to stop iOS zoom */
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  -webkit-user-select:text;user-select:text;outline:none;
}
.chat-input:empty:before{
  content:attr(data-placeholder);
  color:var(--text-muted);
  pointer-events:none;
}
/* Kill the generic .input focus glow on the chat field — the pill's own
   focus-within border is the only highlight we want (no odd green rectangle) */
.chat-input:focus,.chat-input:focus-visible{box-shadow:none;border:none;outline:none}
/* Suggestion/"template" chips removed per owner — keep the chat clean */
#quick-prompts{display:none !important}
.btn-send{
  width:32px;height:32px;border-radius:50%;
  background:var(--lime-vivid);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;flex-shrink:0;margin:0 0 4px 0;
}
.btn-send:hover{filter:brightness(1.1)}
.btn-send:disabled{
  opacity:.5;
  filter:none;
  box-shadow:none;
  cursor:not-allowed;
}

/* Image attach button */
.chat-file-input{display:none}
.btn-img-attach{
  width:38px;height:38px;border-radius:50%;
  background:var(--fill-2);color:var(--text-secondary);border:none;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;transition:all .2s;margin:0 0 2px 0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn-img-attach:hover,.btn-img-attach.has-image{color:var(--lime);background:var(--lime-glow)}
.btn-img-attach:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Image preview strip above input bar */
.chat-img-preview{display:none;padding:6px 20px 0;gap:8px;flex-wrap:wrap}
.chat-img-preview.show{display:flex}
.chat-img-thumb{
  position:relative;width:64px;height:64px;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--border);
}
.chat-img-thumb img{width:100%;height:100%;object-fit:cover}
.chat-img-thumb .img-remove{
  position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,0.7);color:#fff;border:none;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
/* Image thumbnail in chat bubble */
.msg-img-thumb{max-width:200px;border-radius:var(--radius-md);margin-bottom:6px;display:block}

/* === 19. PLAN OVERVIEW ==================================================== */
.plan-kicker{
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lime);
  margin-bottom:8px;
}
.plan-hero-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.planner-program-anchor{
  margin-bottom:22px;
}
/* Program heatmap */
#planner-heatmap{
  background:transparent !important;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}
#planner-heatmap > svg{
  display:block;
  margin:0 auto;
  max-width:100%;
  height:auto;
}
.heatmap-day-toggles{
  display:flex;gap:4px;margin-bottom:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.heatmap-day-pill{
  padding:4px 10px;border-radius:var(--radius-full);
  background:var(--fill-1);border:1px solid var(--fill-2);
  color:var(--text-muted);font-size:.62rem;font-weight:600;letter-spacing:.02em;
  cursor:pointer;transition:all .2s ease;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.heatmap-day-pill.active{
  background:var(--lime-glow);border-color:var(--lime-border);
  color:var(--lime);
}
.heatmap-day-pill:active{transform:scale(0.95)}
.planner-heatmap-stats{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
.planner-heatmap-stat{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--radius-full);
  background:var(--fill-1);border:1px solid var(--fill-2);
  font-size:.65rem;color:var(--text-secondary);
}
.planner-heatmap-stat strong{color:var(--text);font-weight:600}
/* Fatigue list */
.planner-fatigue-list{display:flex;flex-direction:column;gap:6px}
.planner-fatigue-row{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--fill-1);
}
.planner-fatigue-row:last-child{border-bottom:none}
.planner-fatigue-label{flex:1;min-width:0;font-size:.78rem;color:var(--text-secondary)}
.planner-fatigue-bar{flex:2;height:6px;border-radius:3px;background:var(--fill-2);overflow:hidden}
.planner-fatigue-fill{height:100%;border-radius:3px;transition:width .4s var(--ease)}
.planner-fatigue-value{min-width:42px;text-align:right;font-size:.7rem;font-family:var(--font-mono);color:var(--text-muted)}
/* Program reasoning */
.planner-reasoning{display:flex;flex-direction:column;gap:10px}
.planner-reason-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;border-radius:var(--radius-lg);
  background:var(--fill-faint);border:1px solid var(--fill-1);
}
.planner-reason-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--lime-glow);border:1px solid var(--lime-dim);
  color:var(--lime);
}
.planner-reason-icon svg{width:14px;height:14px}
.planner-reason-text{flex:1;min-width:0}
.planner-reason-title{font-size:.76rem;font-weight:600;color:var(--text);margin-bottom:2px}
.planner-reason-desc{font-size:.7rem;color:var(--text-muted);line-height:1.45}
/* Plan actions */
.plan-actions{display:flex;align-items:center;gap:6px}
.plan-action-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;
  background:var(--fill-1);border:1px solid var(--fill-3);
  color:var(--text-muted);cursor:pointer;transition:all .2s var(--ease);
}
.plan-action-btn:hover{background:var(--fill-3);color:var(--text)}
.plan-action-danger:hover{background:var(--red-dim);color:var(--red);border-color:var(--red-dim)}
/* Toggle switch */
.plan-toggle-track{
  display:block;width:34px;height:18px;border-radius:999px;cursor:pointer;
  background:var(--fill-3);position:relative;transition:background .25s var(--ease);
}
.plan-toggle-track.active{background:var(--lime-vivid)}
.plan-toggle-thumb{
  position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:999px;
  background:var(--text-muted);transition:all .25s var(--ease);
}
.plan-toggle-track.active .plan-toggle-thumb{left:18px;background:var(--on-accent)}
/* Archive cards */
.plan-archive-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-radius:var(--radius-lg);
  background:var(--fill-faint);border:1px solid var(--fill-1);
}
.plan-archive-info{flex:1;min-width:0}
.plan-archive-name{font-size:.78rem;font-weight:600;color:var(--text)}
.plan-archive-meta{font-size:.65rem;color:var(--text-muted);margin-top:2px}
.plan-archive-actions{display:flex;gap:4px}
.plan-archive-actions button{
  padding:6px 10px;border-radius:999px;font-size:.62rem;font-weight:600;
  background:var(--fill-1);border:1px solid var(--fill-3);
  color:var(--text-muted);cursor:pointer;transition:all .2s;
}
.plan-archive-actions button:hover{background:var(--lime-glow);color:var(--lime);border-color:var(--lime-dim)}
.plan-archive-actions .archive-delete-btn:hover{background:var(--red-dim);color:var(--red);border-color:var(--red-dim)}
.planner-program-card{
  margin-top:0;
}
.plan-overview{
  margin-top:6px;
  line-height:1.5;
}
.plan-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.plan-meta-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--fill-1);
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-size:.74rem;
}
.plan-meta-pill strong{
  color:var(--text);
  font-weight:600;
}
.plan-timeline-note{
  margin-top:12px;
  font-size:.78rem;
  line-height:1.5;
  color:var(--text-secondary);
}
.plan-week-overview{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.week-section-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.week-section-header .card-title{
  margin-bottom:0;
  line-height:1;
}
.week-section-note{
  font-size:.72rem;
  line-height:1.3;
  text-align:left;
  margin:0;
}
/* Week navigator — scroll through weeks to plan ahead */
.week-nav{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.week-nav-btn{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;
  background:var(--fill-1);border:1px solid var(--border);color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.week-nav-btn:hover{background:var(--lime-dim);border-color:var(--lime-border);color:var(--lime)}
.week-nav-center{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0}
.week-nav-label{font-family:var(--font-display,inherit);font-size:1rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.week-nav-today{
  background:none;border:none;color:var(--lime);font-family:var(--font-body);
  font-size:.68rem;font-weight:600;cursor:pointer;padding:0;letter-spacing:.2px;
}
.week-nav-today[hidden]{display:none}
/* Program card, now at the bottom, reads as a quiet summary */
.plan-hero.planner-program-card{opacity:.92}

/* Day carousel — finger-following horizontal scroll that snaps one day at a
   time (native momentum + snap). Each slide is exactly one screen wide. */
#week-cards.day-carousel{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;          /* don't stretch every slide to the tallest day */
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;              /* horizontal drag scrolls days; vertical → page */
  scrollbar-width:none;
  scroll-behavior:auto;
  gap:0;
}
#week-cards.day-carousel::-webkit-scrollbar{display:none}
.day-slide{
  flex:0 0 100%;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  align-self:flex-start;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
.exercise-preview-more{justify-content:center;opacity:.7;padding-top:2px}
/* Month slide feedback when swiping the Training Log calendar */
#log-calendar-days.log-slide-next{animation:logSlideNext .22s var(--ease)}
#log-calendar-days.log-slide-prev{animation:logSlidePrev .22s var(--ease)}
@keyframes logSlideNext{from{opacity:.4;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes logSlidePrev{from{opacity:.4;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
.plan-week-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--fill-2);
}
.plan-week-row:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.plan-week-row-day{
  min-width:60px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.plan-week-row-day-name{
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.plan-week-row-day-date{
  font-size:.72rem;
  line-height:1;
  color:var(--text-secondary);
}
.plan-week-row-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.plan-week-row-title{
  color:var(--text);
  font-size:.84rem;
  line-height:1.4;
}
.plan-week-row-meta{
  color:var(--text-secondary);
  font-size:.73rem;
  line-height:1.4;
}
.plan-week-row-icons{
  min-width:44px;
  display:flex;
  justify-content:flex-end;
}

/* === 19. DAY PILLS (the scrollable day strip — swipe here to change days) === */
.day-pills{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  scrollbar-width:none;
  padding:2px calc(50% - 23px);   /* side padding so the first/last chip can centre (chip = 46px) */
  margin-bottom:var(--space-md);
}
.day-pills::-webkit-scrollbar{display:none}
.day-pill{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  flex:0 0 46px;width:46px;
  min-width:0;
  padding:9px 4px 8px;border-radius:var(--radius-md);
  background:var(--fill-1);border:1px solid var(--border);
  transition:background .2s,border-color .2s,box-shadow .2s;flex-shrink:0;
  overflow:hidden;
  scroll-snap-align:center;
  cursor:pointer;
}
.day-pill-label{font-size:0.58rem;font-weight:600;letter-spacing:0.8px;color:var(--text-muted);text-transform:uppercase}
.day-pill-date{font-size:0.82rem;font-weight:600;line-height:1;color:var(--text)}
.day-pill-icon{display:flex;align-items:center;justify-content:center}
.day-pill{cursor:pointer}
/* TODAY — a volt date circle (distinct from the "selected" chip fill) and never
   dimmed, so today is always the most obviously marked day. */
.day-pill.today{opacity:1 !important;border-color:var(--lime-border)}
.day-pill.today .day-pill-label{color:var(--lime)}
.day-pill.today .day-pill-date{
  color:var(--on-accent);
  background:var(--lime-vivid);
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.day-pill.completed{opacity:0.6}
.day-pill.completed::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--lime)}
.day-pill.partial::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--amber, #ffbe0b)}
.day-pill.missed{opacity:0.45}
.day-pill.missed::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--ink-4)}
/* Per-activity completion indicator */
.day-focus-card.activity-done{
  border-color:var(--lime-border);
  background:linear-gradient(180deg, var(--lime-glow) 0%, transparent 100%);
}
.day-pill.gym{border-color:var(--lime-dim)}
.day-pill.padel{border-color:var(--teal-dim)}
.day-pill.rest{border-color:var(--fill-1)}
.day-pill.selected{
  border-color:var(--lime);
  background:var(--lime-dim);
  transform:none;
  box-shadow:0 0 0 1px var(--lime-dim), 0 10px 18px var(--lime-glow);
}
.day-pill.selected .day-pill-label{color:var(--lime);font-weight:700}
.day-pill.selected .day-pill-date{color:var(--lime)}
.day-pill.selected .day-pill-icon{transform:none}

/* Secondary muscle tag */
.muscle-tag.secondary{background:var(--amber-dim);color:var(--amber)}

/* === 20. MUSCLE MAP ======================================================= */
.muscle-map-container{
  display:flex;justify-content:center;gap:var(--space-lg);
  padding:var(--space-md) 0;min-height:200px;
}
.muscle-map-container svg{max-height:300px;width:auto}
.muscle-legend{
  display:flex;justify-content:center;gap:var(--space-lg);flex-wrap:wrap;
}
.muscle-legend-item{
  display:flex;align-items:center;gap:6px;font-size:0.7rem;color:var(--text-muted);
}
.dot{width:8px;height:8px;border-radius:50%}

/* === 21. RECOVERY STATUS PANEL =========================================== */
#recovery-status-panel{
  margin-top:var(--space-md);
  border-top:1px solid var(--border);
  padding-top:var(--space-md);
}
.rsp-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-sm);
}
.rsp-title{
  font-size:0.65rem;font-weight:600;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:1.4px;
}
.rsp-updated{
  font-family:var(--font-mono);font-size:0.6rem;color:var(--text-muted);
}
.rsp-list{
  display:flex;flex-direction:column;gap:4px;
}
.rsp-row{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:2px 8px;
  min-height:32px;
  padding:4px 2px;
}
.rsp-name{
  font-size:0.72rem;font-weight:500;color:var(--text);
  line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rsp-eta{
  font-family:var(--font-mono);font-size:0.68rem;font-weight:500;
  line-height:1;text-align:right;white-space:nowrap;
}
.rsp-eta.ready{color:var(--lime)}
.rsp-eta.recovering-amber{color:var(--amber)}
.rsp-eta.recovering-red{color:var(--red)}
.rsp-bar-track{
  grid-column:1 / -1;
  height:4px;
  background:var(--fill-2);
  border-radius:2px;
  overflow:hidden;
}
.rsp-bar-fill{
  height:100%;border-radius:2px;
  transition:width 0.6s var(--ease), background 0.6s var(--ease);
}
.rsp-bar-fill.red   { background:var(--red);  box-shadow:0 0 6px var(--red-dim); }
.rsp-bar-fill.amber { background:var(--amber); box-shadow:0 0 6px var(--amber-dim); }
.rsp-bar-fill.green { background:var(--lime-vivid);  box-shadow:0 0 6px var(--lime-dim); }
.rsp-empty{
  text-align:center;padding:12px 0;
  font-size:0.72rem;color:var(--text-muted);
}
/* Main collapsible toggle */
.rsp-main-toggle{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;background:none;border:none;cursor:pointer;padding:0 0 8px;margin:0;
}
.rsp-main-toggle-left{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.rsp-main-toggle .rsp-title{font-family:var(--font-display);font-size:0.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.5px}
.rsp-summary{font-size:0.65rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace}
.rsp-main-chevron{color:var(--lime);opacity:.7;transition:transform .25s ease;flex-shrink:0}
.rsp-main-toggle.expanded .rsp-main-chevron{transform:rotate(180deg)}
.rsp-collapsible{padding-top:6px}
/* Sub-toggle for ready muscles */
.rsp-toggle{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;background:var(--lime-glow);border:1px solid var(--lime-dim);
  border-radius:8px;padding:8px 12px;margin-top:8px;cursor:pointer;
  font-family:var(--font-body);font-size:0.72rem;color:var(--lime);
  transition:background .2s;
}
.rsp-toggle:hover{background:var(--lime-dim)}
.rsp-toggle-chevron{transition:transform .25s ease}
.rsp-toggle.expanded .rsp-toggle-chevron{transform:rotate(180deg)}
.rsp-ready-list{margin-top:6px}

/* === 22. BODY FAT VISUALIZER ============================================== */
.body-fat-section{padding:var(--space-md) 0}
.bf-controls{display:flex;gap:var(--space-lg);margin-bottom:var(--space-md)}
.bf-slider-group{flex:1}
.bf-slider-group label{
  font-size:0.65rem;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:1px;display:block;margin-bottom:4px;
}
.bf-slider-group .bf-val{
  font-family:var(--font-mono);font-size:1.2rem;font-weight:600;color:var(--text);
  margin-bottom:6px;
}
.bf-slider-group .bf-val span{font-size:0.75rem;color:var(--text-muted);font-weight:400}
input[type=range]{
  -webkit-appearance:none;width:100%;height:4px;
  background:var(--fill-3);border-radius:2px;outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;
  background:var(--lime);border-radius:50%;cursor:pointer;
  border:2px solid var(--bg);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;background:var(--lime);border-radius:50%;
  cursor:pointer;border:2px solid var(--bg);
}

/* Body Fat Preset Buttons */
.bf-presets{
  display:flex;gap:var(--space-sm);margin-bottom:var(--space-md);flex-wrap:wrap;
}
.bf-preset{
  padding:6px 16px;border-radius:var(--radius-full);
  background:var(--fill-1);border:1px solid var(--border);
  font-size:0.72rem;font-weight:600;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:0.8px;
  transition:all 0.2s var(--ease);
}
.bf-preset:hover{background:var(--fill-3);color:var(--text)}
.bf-preset.active{
  background:var(--lime-dim);color:var(--lime);
  border-color:var(--lime-border);
}

/* Body Fat Stats Row */
.bf-stats{
  display:flex;gap:var(--space-md);margin-bottom:var(--space-md);
  padding:10px 16px;background:var(--fill-faint);
  border:1px solid var(--border);border-radius:var(--radius-md);
}
.bf-stat{text-align:center;flex:1;min-width:0}
.bf-stat-label{
  font-size:0.6rem;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:2px;
}
.bf-stat-value{
  font-family:var(--font-mono);font-size:1rem;font-weight:600;color:var(--text);
}
.bf-stat-value .bf-stat-unit,
.bf-stat-unit{
  font-size:0.65rem;font-weight:400;color:var(--text-muted);
}

/* Scale Input Card */
.scale-input-card{padding:var(--space-md)}
.scale-input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.scale-date-label{font-size:0.65rem}
.scale-empty-state{display:flex;flex-direction:column;gap:10px}
.scale-empty-copy{margin:0;color:var(--text-secondary);font-size:.78rem;line-height:1.5}
.scale-summary{display:flex;flex-direction:column;gap:12px}
.scale-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.scale-summary-actions{
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.25fr);
  gap:10px;
}
.scale-summary-item{
  padding:12px 14px;
  border-radius:var(--radius-md);
  background:var(--fill-1);
  border:1px solid var(--fill-2);
}
.scale-summary-label{
  display:block;
  font-size:.62rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:6px;
}
.scale-summary-value{
  color:var(--text);
  font-size:1.15rem;
  font-weight:600;
  line-height:1.1;
}
.scale-summary-value span{
  font-size:.72rem;
  color:var(--text-secondary);
  font-weight:500;
}
.scale-action-icon{flex-shrink:0}
.scale-add-entry-btn,
.scale-edit-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.scale-label{font-size:0.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;display:block}
.scale-edit-btn{
  padding:11px 14px;
  color:var(--text-secondary);
  border:1px solid var(--fill-3);
  border-radius:var(--radius-md);
  background:var(--fill-faint);
  cursor:pointer;
}
.scale-edit-btn:hover{
  color:var(--text);
  background:var(--fill-2);
  border-color:var(--fill-4);
}
.scale-add-entry-btn{
  padding:12px 16px;
  border-radius:var(--radius-md);
  border:1.5px dashed var(--lime-border);
  background:var(--lime-glow);
  color:var(--lime);
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 var(--lime-glow);
  transition:all 0.2s;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.scale-add-entry-btn:hover{
  background:var(--lime-dim);
  border-style:solid;
  box-shadow:0 0 0 1px var(--lime-glow), 0 10px 18px var(--lime-glow);
}
.scale-saved-msg{font-size:0.7rem;color:var(--lime);margin-top:6px;min-height:1em;opacity:0;transition:opacity .3s}
.scale-saved-msg.show{opacity:1}
.profile-setting-grid,
.profile-setting-actions,
.profile-setting-picker-grid{grid-template-columns:1fr}
.profile-setting-btn{width:100%}

.scale-modal-overlay{
  position:fixed;
  inset:0;
  z-index:320;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 16px;
  background:var(--scrim);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .24s var(--ease);
}
.scale-modal-overlay.show{opacity:1}
.scale-modal-overlay.closing{opacity:0}
.scale-modal-card{
  width:min(100%, 420px);
  max-height:min(88vh, 760px);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid var(--fill-3);
  border-radius:24px;
  padding:14px 16px 16px;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
  transform:translateY(24px) scale(0.98);
  transition:transform .24s var(--ease);
  overflow:auto;
}
.scale-modal-overlay.show .scale-modal-card{transform:translateY(0) scale(1)}
.scale-modal-overlay.closing .scale-modal-card{transform:translateY(20px) scale(0.98)}
.scale-modal-handle{
  width:38px;
  height:4px;
  border-radius:999px;
  background:var(--fill-4);
  margin:0 auto 14px;
}
.scale-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.scale-modal-eyebrow{
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lime);
  margin-bottom:4px;
}
.scale-modal-title{
  margin:0;
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--text);
}
.scale-modal-copy{
  margin:6px 0 0;
  color:var(--text-secondary);
  font-size:.8rem;
  line-height:1.45;
}
.scale-modal-close{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--fill-3);
  background:var(--fill-1);
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  cursor:pointer;
  transition:all .2s ease;
}
.scale-modal-close:hover{
  color:var(--text);
  background:var(--fill-3);
}
.scale-modal-body{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.scale-modal-date-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.scale-modal-date-input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--fill-3);
  background:var(--fill-1);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:.95rem;
  -webkit-appearance:none;
  appearance:none;
}
.scale-modal-date-input:disabled{
  opacity:.7;
  color:var(--text-secondary);
}
.scale-picker-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.scale-picker-panel{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  width:100%;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--fill-3);
  background:var(--fill-1);
  text-align:left;
  min-width:0;
}
.scale-picker-label{
  font-size:.64rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.scale-picker-value{
  font-family:var(--font-mono);
  font-size:1.28rem;
  font-weight:600;
  color:var(--text);
  line-height:1.1;
}
.scale-picker-value span{
  font-size:.78rem;
  color:var(--text-secondary);
  font-weight:500;
}
.scale-picker-mount{
  width:100%;
}
.scale-picker-mount .scroll-picker{
  height:164px;
  border-radius:14px;
  background:rgba(0,0,0,0.14);
}
.scale-picker-mount .scroll-picker-highlight{
  left:8px;
  right:8px;
  border-radius:12px;
}
.scale-picker-mount .scroll-picker-item{
  font-size:1rem;
}
.scale-picker-mount .scroll-picker-item.active{
  font-size:1.28rem;
}
.scale-modal-actions{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.2fr);
  gap:10px;
}
.scale-modal-cancel,
.scale-modal-save{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  border-radius:14px;
  font-weight:600;
  cursor:pointer;
}
.scale-modal-cancel{
  border:1px solid var(--fill-3);
  background:var(--fill-1);
  color:var(--text-secondary);
}
.scale-modal-save{
  border:1.5px solid var(--lime-border);
  background:var(--lime-dim);
  color:var(--lime);
  box-shadow:inset 0 1px 0 var(--lime-glow);
}

@media (max-width: 420px){
  .scale-modal-overlay{
    padding-left:12px;
    padding-right:12px;
  }
  .scale-picker-grid,
  .scale-modal-actions,
  .profile-setting-grid,
  .profile-setting-actions,
  .profile-setting-picker-grid{
    grid-template-columns:1fr;
  }
}

/* Body Fat SVG Views */
.bf-views{
  display:flex;gap:var(--space-sm);justify-content:center;align-items:flex-start;
  padding:var(--space-md) 0;
}
.bf-view{text-align:center;flex:1;max-width:180px}
.bf-view svg{width:100%;height:auto}
.bf-view-label{
  font-size:0.6rem;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:2px;margin-top:6px;
}

/* === 22. CHARTS =========================================================== */
.chart-container{padding:var(--space-sm) 0;min-height:120px}
.chart-container svg text{fill:var(--text-muted)!important}

/* === 23. BRIEFING ========================================================= */
.briefing-toggle{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;background:none;border:none;padding:0;cursor:pointer;
  margin-bottom:var(--space-md);
}
.briefing-toggle:focus-visible{outline:1px solid var(--lime);border-radius:4px}
.briefing-chevron{
  flex-shrink:0;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  opacity:0.7;
}
.briefing-toggle[aria-expanded="false"] .briefing-chevron{
  transform:rotate(-90deg);
}
.briefing-body{
  overflow:hidden;
  transition:height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.briefing-text{
  font-size:0.82rem;line-height:1.7;color:var(--text-secondary);
}

/* Briefing sections */
.brief-section{
  padding:10px 0;
  border-bottom:1px solid var(--fill-1);
}
.brief-section:last-child{border-bottom:none;padding-bottom:0}
.brief-section:first-child{padding-top:4px}

.brief-heading{
  font-family:var(--font-display);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--lime);
  margin-bottom:6px;
}
.brief-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:2px 0;
  font-size:0.78rem;
  color:var(--text-secondary);
  gap:12px;
}
.brief-label{
  flex-shrink:0;
  color:var(--ink-3);
  font-size:0.72rem;
  letter-spacing:0.03em;
  min-width:70px;
}
.brief-note{
  font-size:0.74rem;
  line-height:1.5;
  color:var(--ink-2);
  margin:5px 0 2px;
  padding-left:0;
  font-style:italic;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.brief-note-icon{margin-top:2px}
.brief-exercises{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:6px;
}
.brief-ex{
  font-size:0.7rem;
  color:var(--ink-3);
  padding:3px 0;
  border-left:2px solid var(--lime-dim);
  padding-left:8px;
}

/* === 24. SETTINGS ========================================================= */
.settings-page{
  padding:0 var(--space-md) var(--space-xl);
}
.settings-header{
  display:flex;align-items:center;gap:12px;
  /* clear the Dynamic Island / status bar so the back button is tappable —
     the page slides under the island (full-bleed), so the header must pad
     itself down past --safe-top */
  padding:calc(var(--safe-top) + 14px) 0 18px;
  position:sticky;top:0;z-index:10;
  background:var(--bg);
}
.settings-back-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.settings-title{
  font-family:var(--font-display);font-size:1.6rem;letter-spacing:2px;
  color:var(--text);margin:0;
}
.settings-section{ margin-bottom:var(--space-lg); }
.settings-section-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--ink-3);margin-bottom:10px;padding-left:2px;
}
.settings-card{
  width:100%;padding:var(--space-lg);
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);
}
.connection-dot{
  width:8px;height:8px;border-radius:50%;display:inline-block;
  background:var(--red);transition:background 0.3s;
}

/* === 25. TOAST ============================================================ */
.toast{
  position:fixed;top:calc(var(--safe-top) + 16px);left:50%;
  transform:translateX(-50%) translateY(-100px);
  padding:12px 24px;border-radius:var(--radius-full);
  background:var(--glass-bg-strong);backdrop-filter:blur(16px);
  border:1px solid var(--border);color:var(--text);
  font-size:0.85rem;font-weight:500;z-index:10000;
  transition:transform 0.35s var(--ease);white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.exiting{transform:translateX(-50%) translateY(-100px)}
.toast-success{border-color:var(--lime-border);box-shadow:0 4px 20px var(--lime-glow)}
.toast-error{border-color:var(--red-dim);box-shadow:0 4px 20px var(--red-dim)}

/* === 26. ANIMATIONS ======================================================= */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.animate-fadeUp{animation:fadeUp 0.4s var(--ease) forwards}

/* === 27. UTILITIES ======================================================== */
.flex{display:flex}.flex-col{flex-direction:column}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.align-center{align-items:center}
.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}
.text-center{text-align:center}
.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}
.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}

/* === 28. SWAP MODAL ======================================================= */
.swap-modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:10001;
  background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.3s var(--ease);
  padding:var(--space-md);
}
.swap-modal-overlay.show{opacity:1}
.swap-modal-overlay.closing{opacity:0}

.swap-modal-card{
  width:100%;max-width:380px;
  background:var(--glass-bg-strong);
  border:1px solid var(--border-light);
  border-radius:var(--radius-xl);
  padding:var(--space-xl);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  transform:scale(0.92) translateY(20px);
  transition:transform 0.3s var(--ease);
  box-shadow:0 24px 80px rgba(0,0,0,0.5), 0 0 40px var(--lime-glow);
}
.swap-modal-overlay.show .swap-modal-card{transform:scale(1) translateY(0)}
.swap-modal-overlay.closing .swap-modal-card{transform:scale(0.92) translateY(20px)}

.swap-modal-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--space-sm);
}
.swap-modal-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);background:var(--fill-2);
  color:var(--text-secondary);font-size:1.2rem;transition:all 0.2s;
}
.swap-modal-close:hover{background:var(--fill-4);color:var(--text)}

.swap-modal-days{
  display:flex;flex-direction:column;gap:var(--space-sm);
  max-height:320px;overflow-y:auto;
}
.swap-modal-day{
  display:flex;align-items:center;gap:var(--space-md);
  padding:12px 16px;border-radius:var(--radius-md);
  background:var(--fill-1);border:1px solid var(--border);
  transition:all 0.2s var(--ease);cursor:pointer;width:100%;text-align:left;
}
.swap-modal-day:hover{
  background:var(--lime-dim);border-color:var(--lime-border);
}
.swap-modal-day:hover .swap-modal-arrow{stroke:var(--lime);opacity:1}
.swap-modal-day-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text)}
.swap-modal-day-info{display:flex;flex-direction:column;flex:1;min-width:0}
.swap-modal-day-name{
  font-size:0.7rem;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:1px;
}
.swap-modal-day-label{font-size:0.85rem;color:var(--text);font-weight:500}
.swap-modal-arrow{flex-shrink:0;opacity:0.3;transition:all 0.2s}

/* Add-Activity: library workout rows with rename/delete + section labels */
.add-activity-section-label{
  font-size:0.68rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 8px 2px;
}
.add-activity-row{display:flex;align-items:stretch;gap:6px}
.add-activity-row .add-activity-option{flex:1;min-width:0}
.add-activity-sub{
  font-size:0.8rem;color:var(--text);font-weight:500;text-transform:none;letter-spacing:0;
}
.add-activity-icon-btn{
  width:40px;flex-shrink:0;display:none;align-items:center;justify-content:center;
  border-radius:var(--radius-md);background:var(--fill-1);border:1px solid var(--border);
  color:var(--text-muted);transition:all 0.2s var(--ease);
}
/* Icons only appear once the user taps "Edit workouts" */
.swap-modal-card.workouts-editing .add-activity-icon-btn{display:flex}
.add-activity-icon-btn:hover{background:var(--fill-3);color:var(--text)}
.add-activity-edit-toggle{
  align-self:flex-start;margin:8px 0 2px;padding:6px 10px;
  background:none;border:none;color:var(--text-muted);
  font-family:var(--font-body);font-size:0.8rem;font-weight:600;
  letter-spacing:.2px;cursor:pointer;border-radius:var(--radius-sm);transition:all 0.2s;
}
.add-activity-edit-toggle:hover{color:var(--text);background:var(--fill-1)}
.swap-modal-card.workouts-editing .add-activity-edit-toggle{color:var(--lime)}
.archive-restore-btn{
  flex-shrink:0;padding:0 14px;border-radius:var(--radius-md);
  background:var(--lime-dim);border:1px solid var(--lime-border);color:var(--lime);
  font-family:var(--font-body);font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.2s;
}
.archive-restore-btn:hover{background:var(--lime-glow);border-style:solid}
.archive-row{align-items:center}
.archive-row .swap-modal-day{padding:10px 14px}
.archive-row .add-activity-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* subtle cue that rows are in "manage" mode */
.swap-modal-card.workouts-editing .add-activity-row .add-activity-option{opacity:.85}
.add-activity-delete:hover{
  background:rgba(255,69,58,0.14);border-color:rgba(255,69,58,0.4);color:#ff6b60;
}
.add-activity-new{border-style:dashed;color:var(--lime)}
.add-activity-new .swap-modal-day-icon{color:var(--lime)}
.add-activity-new .swap-modal-day-name{color:var(--lime)}

/* Themed text-prompt / confirm dialogs */
.text-prompt-input{
  width:100%;box-sizing:border-box;padding:12px 14px;margin-bottom:16px;
  background:var(--fill-1);border:1px solid var(--border);border-radius:var(--radius-md);
  color:var(--text);font-family:var(--font-body);font-size:1rem;
  transition:border-color 0.2s;
}
.text-prompt-input:focus{outline:none;border-color:var(--lime-border);background:var(--fill-2)}
.text-prompt-actions{display:flex;gap:10px}
.text-prompt-cancel,.text-prompt-save{
  flex:1;padding:12px;border-radius:var(--radius-md);font-family:var(--font-body);
  font-size:0.92rem;font-weight:600;transition:all 0.2s var(--ease);cursor:pointer;
}
.text-prompt-cancel{background:var(--fill-1);border:1px solid var(--border);color:var(--text-secondary)}
.text-prompt-cancel:hover{background:var(--fill-3);color:var(--text)}
.text-prompt-save{background:var(--lime);border:1px solid var(--lime);color:var(--on-accent)}
.text-prompt-save:hover{filter:brightness(1.05)}
.text-prompt-save.is-danger{background:#ff453a;border-color:#ff453a;color:#fff}
.text-prompt-save.is-danger:hover{filter:brightness(1.08)}

/* === 29. SWAP BUTTON ====================================================== */
.swap-day-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);background:var(--fill-1);
  border:1px solid var(--border);color:var(--text-muted);
  transition:all 0.2s var(--ease);flex-shrink:0;
}
.swap-day-btn:hover{
  background:var(--lime-dim);border-color:var(--lime-border);
  color:var(--lime);
}

/* Add Activity Button */
.btn-add-activity{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:9px 10px;border-radius:var(--radius-md);cursor:pointer;
  background:var(--lime-glow);border:1px dashed var(--lime-border);
  color:var(--lime);font-family:var(--font-body);font-size:0.8rem;
  transition:all .2s;
}
.btn-add-activity:hover{background:var(--lime-dim);border-style:solid}
.day-focus-card{
  margin-bottom:10px;
}

/* Remove Activity Button */
.btn-remove-activity{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:10px;border-radius:var(--radius-md);cursor:pointer;
  background:var(--red-dim);border:1px dashed var(--red-dim);
  color:var(--red);font-family:var(--font-body);font-size:0.8rem;
  transition:all .2s;
}
.btn-remove-activity:hover{background:var(--red-dim);border-style:solid}

/* ── Apple-style status badge dropdown ──────────────────────────────────── */
/* The badge itself becomes a dropdown trigger when status can be overridden.
   We override the loud uppercase/letter-spaced look here for a calmer pill. */
.badge.badge-dropdown{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 7px 3px 9px;
  cursor:pointer;
  border:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, opacity .15s ease, filter .15s ease, background .15s ease;
  font:inherit;
  font-size:.66rem;
  font-weight:550;
  letter-spacing:.01em;
  text-transform:none;        /* sentence case — calmer */
}
.badge.badge-dropdown::before{display:none} /* hide the dot indicator on dropdown badges */
.badge.badge-dropdown:hover{filter:brightness(1.1)}
.badge.badge-dropdown:active{transform:scale(0.96)}
.badge.badge-dropdown[aria-expanded="true"]{filter:brightness(1.15)}
.badge.badge-dropdown .badge-chevron{
  opacity:.55;
  transition:transform .2s ease, opacity .15s ease;
  flex-shrink:0;
  width:8px;
  height:8px;
  margin-left:2px;
}
.badge.badge-dropdown:hover .badge-chevron{opacity:.8}
.badge.badge-dropdown[aria-expanded="true"] .badge-chevron{
  transform:rotate(180deg);
  opacity:1;
}

/* Floating dropdown panel — Apple-style frosted glass */
.status-dropdown{
  position:fixed;
  z-index:200;
  min-width:230px;
  padding:6px;
  background:var(--glass-bg-strong);
  border:0.5px solid var(--fill-3);
  border-radius:14px;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.35),
    inset 0 0 0 0.5px var(--fill-1);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  opacity:0;
  transform:translateY(-4px) scale(0.98);
  transform-origin:top left;
  pointer-events:none;
  transition:opacity .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1);
}
.status-dropdown.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.status-dropdown[hidden]{display:none}

.status-dropdown-arrow{
  position:absolute;
  top:-5px;left:24px;
  width:10px;height:10px;
  background:var(--glass-bg-strong);
  border-top:0.5px solid var(--fill-3);
  border-left:0.5px solid var(--fill-3);
  transform:rotate(45deg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}

.status-dropdown-title{
  padding:8px 12px 4px;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.status-dropdown-item{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:9px 11px;
  border-radius:10px;
  background:transparent;
  border:none;
  color:var(--text);
  font:inherit;
  font-size:.78rem;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s ease;
  gap:10px;
}
.status-dropdown-item:hover,
.status-dropdown-item:focus-visible{
  background:var(--fill-2);
  outline:none;
}
.status-dropdown-item:active{
  background:var(--fill-3);
}
.status-dropdown-item-text{
  display:flex;flex-direction:column;gap:1px;min-width:0;
}
.status-dropdown-item-label{
  font-size:.82rem;
  font-weight:500;
  color:var(--text);
  line-height:1.2;
}
.status-dropdown-item-hint{
  font-size:.65rem;
  color:var(--text-muted);
  line-height:1.2;
}
.status-dropdown-item.tone-done .status-dropdown-item-label{color:var(--lime)}
.status-dropdown-item.tone-partial .status-dropdown-item-label{color:var(--amber, #ffbe0b)}
.status-dropdown-item.tone-missed .status-dropdown-item-label{color:var(--red, #ff4757)}

.status-dropdown-item.active{
  background:var(--fill-1);
}
.status-dropdown-item.active svg{color:var(--lime)}
.status-dropdown-item.tone-done.active svg{color:var(--lime)}
.status-dropdown-item.tone-partial.active svg{color:var(--amber, #ffbe0b)}
.status-dropdown-item.tone-missed.active svg{color:var(--red, #ff4757)}

/* Edit / Delete log — subtle text-button row inside day-focus card */
.day-card-actions{
  display:flex;
  gap:0;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--fill-2);
}
.btn-edit-log,
.btn-delete-log{
  display:inline-flex;align-items:center;justify-content:center;
  gap:5px;
  padding:6px 10px;
  background:transparent;
  border:none;
  font-family:inherit;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.01em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .15s ease, color .15s ease;
  flex:1 1 auto;
  color:var(--text-muted);
  border-radius:6px;
}
.btn-edit-log:hover,
.btn-edit-log:active{
  color:var(--lime);
  background:var(--lime-glow);
}
.btn-delete-log{
  border-left:1px solid var(--fill-2);
}
.btn-delete-log:hover,
.btn-delete-log:active{
  color:var(--red, #ff4757);
  background:var(--red-dim);
}

/* === 30. WEEK MODIFIED BADGE ============================================== */
.week-modified-badge{
  display:inline-flex;align-items:center;gap:4px;
  margin-left:var(--space-sm);
  padding:3px 10px;border-radius:var(--radius-full);
  background:var(--amber-dim);color:var(--amber);
  font-size:0.6rem;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;
  vertical-align:middle;
}
.week-modified-badge::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--amber);
}

/* === 31. HOME BODY + CHAT HUB ============================================= */
.body-status-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.body-status-head .muted{
  margin:0;
  max-width:240px;
}
.today-body-stats{
  margin-bottom:14px;
  gap:8px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.today-body-stats .metric-card{
  min-width:0;
  padding:8px 7px 7px;
  border-radius:14px;
}
.today-body-stats .stat-label{
  font-size:0.52rem;
  line-height:1.05;
  letter-spacing:0.1em;
}
.today-body-stats .stat-value{
  font-size:0.92rem;
  line-height:0.96;
}
.today-body-stats .metric-trend{
  margin-top:2px;
  font-size:0.58rem;
}
.body-view-switch{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:var(--fill-1);
  border:1px solid var(--border);
  flex-shrink:0;
}
.body-view-btn{
  min-width:84px;
  padding:9px 14px;
  border-radius:999px;
  background:transparent;
  color:var(--text-muted);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.04em;
  transition:all 0.2s var(--ease);
}
.body-view-btn.active{
  background:var(--lime-dim);
  color:var(--lime);
  box-shadow:inset 0 0 0 1px var(--lime-dim);
}
#session-muscles{background:transparent !important}
#session-muscle-mode-switch{padding:3px}
#session-muscle-mode-switch .body-view-btn{
  min-width:0;padding:5px 10px;font-size:0.65rem;
}
.body-visual-panel{
  display:none;
}
.body-visual-panel.active{
  display:block;
}
.body-visual-panel .muscle-map-container{
  display:block;
  width:100%;
  min-height:340px;
  padding:6px 0 0;
  background:transparent;
  overflow:hidden;
}
.body-fat-section-home{
  padding-top:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.body-fat-section-home #body-fat-map{
  order:1;
}
.body-fat-section-home .body-visual-copy{
  order:2;
  margin:0;
}
.body-fat-section-home .bf-stats{
  order:3;
  margin-bottom:0;
  flex-wrap:wrap;
}
.body-fat-section-home .bf-stage-shell,
.fatigue-map-shell{
  width:fit-content;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0 auto;
}
.body-fat-section-home .bf-combined-stage,
.fatigue-map-combined-stage{
  width:auto;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-height:282px;
  background:transparent !important;
}
.body-fat-section-home .bf-combined-stage svg{
  display:block;
  width:auto;
  max-width:none;
  height:282px;
  max-height:none;
  margin:0 auto;
  overflow:visible;
  filter:brightness(1.22) saturate(1.12);
}
.body-fat-section-home .bf-stage-labels{
  position:relative;
  width:100%;
  height:18px;
  margin-top:8px;
}
.body-fat-section-home .bf-stage-labels .bf-view-label{
  position:absolute;
  top:0;
  margin-top:0;
  transform:translateX(-50%);
}
.fatigue-map-stage-labels{
  position:relative;
  width:100%;
  height:18px;
  margin-top:8px;
}
.fatigue-map-label{
  font-size:0.6rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:2px;
  text-align:center;
  position:absolute;
  top:0;
  transform:translateX(-50%);
}
.body-fat-section-home .bf-stage-labels .bf-view-label:first-child,
.fatigue-map-stage-labels .fatigue-map-label:first-child{
  left:24.66%;
}
.body-fat-section-home .bf-stage-labels .bf-view-label:last-child,
.fatigue-map-stage-labels .fatigue-map-label:last-child{
  left:79.45%;
}
.body-visual-copy{
  margin:12px 0 16px;
  text-align:center;
  font-size:0.76rem;
}
.fatigue-map-combined-stage svg{
  display:block;
  width:auto;
  max-width:none;
  height:282px;
  max-height:none;
  margin:0 auto;
  overflow:visible;
  filter:brightness(1.18) saturate(1.02);
}
.fatigue-map-combined-stage .mm-view-label{
  display:none;
}
.fatigue-map-combined-stage .bodymap-tooltip{
  font-size:0.72rem;
}
.chat-hub-grid{
  display:grid;
  gap:var(--space-md);
}
.chat-hub-kicker{
  font-size:0.66rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--lime);
  margin-bottom:10px;
}
.chat-hub-title{
  margin-bottom:10px;
}
.chat-hub-copy{
  line-height:1.65;
  min-height:72px;
}
.chat-hub-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chat-hub-chips .chip{
  pointer-events:none;
}

@media (max-width: 420px){
  .body-status-head{
    flex-direction:column;
  }
  .body-status-head .muted{
    max-width:none;
  }
  .body-view-switch{
    width:100%;
  }
  .body-view-btn{
    flex:1 1 0;
    min-width:0;
  }
  .body-visual-panel .muscle-map-container{
    min-height:300px;
  }
  .body-fat-section-home .bf-combined-stage,
  .fatigue-map-combined-stage{
    min-height:252px;
  }
  .body-fat-section-home .bf-combined-stage svg,
  .fatigue-map-combined-stage svg{
    height:252px;
  }
}
@media (min-width: 521px){
  .today-body-stats{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

/* === 31. RESET WEEK BUTTON ================================================ */
.week-reset-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
  width:100%;padding:12px;margin-top:var(--space-sm);margin-bottom:var(--space-md);
  border-radius:var(--radius-md);
  background:var(--fill-1);border:1px solid var(--border);
  color:var(--text-secondary);font-size:0.8rem;font-weight:500;
  transition:all 0.2s var(--ease);
}
.week-reset-btn:hover{
  background:var(--amber-dim);border-color:var(--amber-dim);
  color:var(--amber);
}
.week-reset-btn svg{flex-shrink:0}

/* === 32. REST TIMER OVERLAY =============================================== */
.rest-timer-overlay {
  position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(20px) scale(0.95);
  z-index:700;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 28px 16px;border-radius:24px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(40px) saturate(1.6);
  backdrop-filter:blur(40px) saturate(1.6);
  border:1px solid var(--fill-4);
  box-shadow:
    0 0 0 0.5px var(--fill-2),
    0 8px 40px rgba(0,0,0,0.55),
    0 0 80px var(--lime-glow);
  opacity:0;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  will-change:opacity,transform;
}
.rest-timer-overlay.visible{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.rest-timer-glass{position:relative;display:flex;align-items:center;justify-content:center;width:108px;height:108px}
.rest-timer-svg{position:absolute;inset:0}
.rest-timer-ring{transition:stroke-dashoffset .3s linear;filter:drop-shadow(0 0 8px var(--lime-dim))}
.rest-timer-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px}
.rest-timer-display{
  font-family:'SF Mono','JetBrains Mono',monospace;font-size:1.7rem;
  font-weight:600;letter-spacing:1.5px;
  color:var(--text);
  text-shadow:0 0 20px var(--lime-glow);
}
.rest-timer-label{
  font-size:.6rem;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:2px;font-weight:500;
}
.rest-timer-skip{
  background:var(--fill-3);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--fill-3);
  color:var(--ink-2);padding:7px 24px;
  border-radius:var(--radius-full);font-size:.72rem;font-weight:500;
  letter-spacing:.5px;cursor:pointer;
  transition:all .2s var(--ease);
}
.rest-timer-skip:active{transform:scale(0.95);background:var(--fill-4)}
@keyframes restTimerOut{
  to{opacity:0;transform:translateX(-50%) translateY(16px) scale(0.95)}
}

/* === 33. RIR BADGE ======================================================== */
.rir-badge { display: inline-block; background: var(--lime-glow); color: var(--lime); border: 1px solid var(--lime-dim); padding: 2px 8px; border-radius: 6px; font-size: .6rem; font-family: 'JetBrains Mono', monospace; margin-left: 6px; text-transform: uppercase; letter-spacing: .5px; }
.rest-badge { display: inline-block; background: var(--teal-dim); color: var(--teal); border: 1px solid var(--teal-dim); padding: 2px 8px; border-radius: 6px; font-size: .6rem; font-family: 'JetBrains Mono', monospace; margin-left: 6px; letter-spacing: .5px; }

/* === 34. SCROLL PICKER BOTTOM SHEET ====================================== */
.picker-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; background: var(--glass-bg-strong); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-top: 1px solid var(--lime-dim); border-radius: 20px 20px 0 0; padding: 12px 0 env(safe-area-inset-bottom, 20px); transform: translateY(100%); transition: transform .3s ease; }
.picker-sheet.open { transform: translateY(0); }
.picker-sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 0 20px 8px; border-bottom: 1px solid var(--fill-2); }
.picker-sheet-title { font-size: .8rem; color: var(--text-secondary); font-weight: 500; }
.picker-sheet-done { color: var(--lime); font-weight: 600; font-size: .85rem; background: none; border: none; cursor: pointer; padding: 8px 12px; }

.scroll-picker { height: 200px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(transparent, black 25%, black 75%, transparent); mask-image: linear-gradient(transparent, black 25%, black 75%, transparent); }
.scroll-picker-inner { height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-y; scroll-snap-type: y mandatory; }
.scroll-picker-inner::-webkit-scrollbar { display: none; }
.scroll-picker-item { height: 40px; display: flex; align-items: center; justify-content: center; font-family: 'SF Mono','JetBrains Mono', monospace; font-size: 1.28rem; color: var(--fill-5); transition: color .13s ease, transform .13s ease; user-select: none; cursor: pointer; scroll-snap-align: center; transform: scale(0.82); transform-origin: center; }
.scroll-picker-item.active { color: var(--text); font-weight: 600; transform: scale(1); }
.scroll-picker-highlight { position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); height: 40px; background: var(--lime-glow); border-radius: 12px; border: 1px solid var(--lime-dim); pointer-events: none; }

.btn-start-day-workout { width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }

.picker-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--scrim); z-index: 299; opacity: 0; transition: opacity .3s; pointer-events: none; }
.picker-backdrop.open { opacity: 1; pointer-events: auto; }

/* === 35. TRAINING LOG CALENDAR ============================================ */
.log-calendar-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0 12px; margin-bottom: 4px;
}
.log-month-label {
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: .9rem; color: var(--text);
}
.log-nav-btn {
  background: var(--fill-2); border: 1px solid var(--fill-3);
  border-radius: 8px; padding: 6px 10px; color: var(--text-secondary); cursor: pointer;
  transition: all .2s;
}
.log-nav-btn:active { background: var(--lime-glow); }

.log-calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.log-day-header {
  text-align: center; font-size: .6rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px; padding: 4px 0;
  font-family: 'JetBrains Mono', monospace;
}
.log-day {
  text-align: center; padding: 6px 2px 4px; border-radius: 8px; cursor: pointer;
  transition: all .2s; min-height: 42px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.log-day.empty { cursor: default; }
.log-day-num {
  font-size: .75rem; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace;
}
.log-day.today .log-day-num {
  color: var(--lime); font-weight: 600;
  border: 1.5px solid var(--lime); border-radius: 50%;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
}
.log-day.has-data { background: var(--fill-1); }
.log-day.selected { background: var(--lime-glow); border: 1px solid var(--lime-dim); }
.log-day:active:not(.empty) { transform: scale(0.92); }

.log-dots {
  display: flex; gap: 3px; justify-content: center;
}
.log-dot {
  width: 5px; height: 5px; border-radius: 50%;
}
.log-dot.gym { background: var(--lime-vivid); }
.log-dot.padel { background: var(--blue); }
.log-dot.sport { background: var(--pink); }
.log-dot.weight { background: var(--teal); }
.log-dot.nutrition { background: var(--amber); }

/* ── Planner month view (long-range planning) ─────────────────────────── */
.week-nav-label-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; margin: 0 auto; font: inherit;
}
.week-nav-caret { opacity: .55; transition: transform .25s ease; flex: 0 0 auto; }
.week-nav-label-btn[aria-expanded="true"] .week-nav-caret { transform: rotate(180deg); }
.month-view { padding: 10px 14px 12px; }
.month-view .log-calendar-nav { padding: 2px 0 8px; margin-bottom: 0; }
.month-day.mv-completed .log-day-num { color: var(--lime); font-weight: 600; }
.month-day.mv-partial .log-day-num { color: var(--amber); }
.month-day.mv-missed { opacity: .45; }
.month-pin {
  width: 5px; height: 5px; border-radius: 50%;
  border: 1.4px solid var(--lime-vivid); background: transparent;
  display: inline-block; box-sizing: border-box;
}
.month-legend {
  display: flex; gap: 12px; justify-content: center; align-items: center;
  margin-top: 8px; font-size: .62rem;
}
.month-legend span { display: flex; align-items: center; gap: 4px; }
.month-legend .log-dot, .month-legend .month-pin { flex: 0 0 auto; }

/* Log Detail Panel */
.log-detail-panel {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fill-2);
}
.log-detail-header {
  font-size: .8rem; font-weight: 500; color: var(--text); margin-bottom: 8px;
}
.log-detail-items {
  display: flex; flex-direction: column; gap: 6px;
}
.log-detail-item {
  display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--text-secondary);
  padding: 6px 10px; background: var(--fill-1); border-radius: 8px;
}
.log-detail-icon { display:inline-flex; align-items:center; justify-content:center; color:inherit; }

/* Log Workout Detail */
.log-workout-header {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.log-workout-name { font-weight: 500; font-size: .8rem; color: var(--text); flex: 1; }
.log-workout-duration { font-size: .65rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.log-exercise-row {
  padding: 6px 10px; margin-left: 8px; border-left: 2px solid var(--lime-dim);
}
.log-exercise-name { font-size: .7rem; color: var(--text-secondary); font-weight: 500; margin-bottom: 3px; }
.log-sets-row { display: flex; flex-wrap: wrap; gap: 4px; }
.log-set {
  font-size: .6rem; font-family: 'JetBrains Mono', monospace; color: var(--text-muted);
  background: var(--fill-1); padding: 2px 6px; border-radius: 4px;
}

/* Edit / Delete / Add buttons in the Training Log detail panel */
.log-detail-actions {
  display: inline-flex; gap: 4px; margin-left: auto;
}
.log-detail-edit-btn,
.log-detail-delete-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 8px; border-radius: 6px;
  background: var(--fill-1);
  border: 1px solid var(--fill-2);
  color: var(--text-secondary);
  font-size: .6rem; font-weight: 500; cursor: pointer;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.log-detail-edit-btn:hover,
.log-detail-edit-btn:active {
  background: var(--lime-glow);
  border-color: var(--lime-border);
  color: var(--lime);
}
.log-detail-delete-btn:hover,
.log-detail-delete-btn:active {
  background: var(--red-dim);
  border-color: var(--red-dim);
  color: var(--red);
}
.log-detail-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 12px; padding: 8px 12px;
  background: var(--lime-glow);
  border: 1px dashed var(--lime-border);
  border-radius: 8px;
  color: var(--lime); font-size: .7rem; font-weight: 500;
  cursor: pointer; transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.log-detail-add-btn:hover,
.log-detail-add-btn:active {
  background: var(--lime-dim);
  border-color: var(--lime-border);
}

/* Progressive Overload Badge */
.overload-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: .6rem; font-family: 'JetBrains Mono', monospace;
  padding: 2px 8px; border-radius: 6px; margin-left: 6px;
  letter-spacing: .3px;
}
.overload-badge.up {
  background: var(--lime-glow); color: var(--lime);
  border: 1px solid var(--lime-dim);
}
.overload-badge.down {
  background: var(--red-dim); color: var(--red);
  border: 1px solid var(--red-dim);
}
.overload-badge.same {
  background: var(--fill-2); color: var(--text-muted);
  border: 1px solid var(--fill-3);
}

/* === 37. MEALS TAB ======================================================== */

/* Mode toggle */
.meals-mode-toggle{
  display:flex;gap:4px;padding:4px;
  background:var(--fill-1);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
}
.mode-btn{
  flex:1;padding:8px 16px;border-radius:var(--radius-full);
  font-size:.8rem;font-weight:500;color:var(--text-muted);
  transition:all 0.2s var(--ease);text-align:center;
}
.mode-btn.active{
  background:var(--lime-vivid);color:var(--on-accent);font-weight:600;
}

/* Macro progress summary */
.meals-macro-summary{
  display:flex;justify-content:space-between;gap:8px;
  padding:8px 0;margin-bottom:12px;
}
.macro-progress-item{flex:1;text-align:center}
.macro-progress-bar{
  height:4px;background:var(--fill-2);
  border-radius:2px;overflow:hidden;margin:4px auto 0;width:80%;
}
.macro-progress-fill{
  height:100%;border-radius:2px;transition:width 0.4s var(--ease);
}
.macro-progress-fill.cals{background:var(--lime)}
.macro-progress-fill.protein{background:var(--teal)}
.macro-progress-fill.carbs{background:var(--amber)}
.macro-progress-fill.fat{background:var(--red)}
.macro-remaining{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;font-weight:500;
}
.macro-remaining.cals{color:var(--lime)}
.macro-remaining.protein{color:var(--teal)}
.macro-remaining.carbs{color:var(--amber)}
.macro-remaining.fat{color:var(--red)}
.macro-remaining-label{
  font-size:.6rem;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.5px;
}

/* Meal plan cards */
.meal-card{
  display:flex;align-items:center;gap:12px;
  padding:14px;margin-bottom:8px;
  background:var(--fill-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  transition:all 0.2s var(--ease);
  cursor:pointer;
}
.meal-card:last-child{margin-bottom:0}
.meal-card.eaten{opacity:0.5;border-color:var(--lime-dim)}
.meal-card-check{
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--border-light);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;transition:all 0.2s;
}
.meal-card-check.checked{
  background:var(--lime-vivid);border-color:var(--lime-vivid);
}
.meal-card-check.checked::after{
  content:'';
}
.meal-card-check.hidden{display:none}
.meal-card-check.checked::after{
  content:'';
  width:6px;
  height:10px;
  display:block;
  border-right:2px solid var(--on-accent);
  border-bottom:2px solid var(--on-accent);
  transform:translateY(-1px) rotate(45deg);
}
.meal-card-info{flex:1;min-width:0}
.meal-card-name{
  font-weight:500;font-size:.9rem;color:var(--text);
  margin-bottom:2px;
}
.meal-card-type{
  font-size:.65rem;text-transform:uppercase;letter-spacing:1px;
  color:var(--text-muted);
}
.meal-card-macros{
  display:flex;gap:8px;margin-top:6px;font-size:.7rem;
  font-family:'JetBrains Mono',monospace;
}
.meal-card-macros .mc-cal{color:var(--lime)}
.meal-card-macros .mc-pro{color:var(--teal)}
.meal-card-macros .mc-carb{color:var(--amber)}
.meal-card-macros .mc-fat{color:var(--red)}

/* Meal swap button */
.meal-swap-btn{
  background:none;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px;
  color:var(--text-muted);cursor:pointer;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:all 0.2s var(--ease);
}
.meal-swap-btn:hover{color:var(--lime);border-color:var(--lime)}

/* Meal swap modal */
.meal-swap-card{max-height:85vh;display:flex;flex-direction:column}
.meal-swap-category-tabs{
  display:flex;gap:6px;overflow-x:auto;padding:4px 0;
  -ms-overflow-style:none;scrollbar-width:none;
}
.meal-swap-category-tabs::-webkit-scrollbar{display:none}
.meal-swap-recipes{
  overflow-y:auto;max-height:60vh;
  margin:0 -20px;padding:0 20px;
  -ms-overflow-style:none;scrollbar-width:thin;
}
.meal-swap-group-label{
  font-size:.6rem;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--text-muted);padding:12px 0 6px;
  font-weight:600;
}
.meal-swap-recipe-option{
  display:block;width:100%;text-align:left;
  background:var(--fill-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px;margin-bottom:6px;
  cursor:pointer;transition:all 0.2s var(--ease);
  color:var(--text);
}
.meal-swap-recipe-option:hover{
  border-color:var(--lime);background:var(--lime-glow);
}
.meal-swap-recipe-option.current{
  border-color:var(--lime-border);
  background:var(--lime-glow);
}
.msro-top{
  display:flex;align-items:center;gap:8px;margin-bottom:4px;
}
.msro-emoji{display:inline-flex;align-items:center;justify-content:center;color:var(--ink-1)}
.msro-name{font-weight:500;font-size:.85rem;flex:1}
.msro-current-badge{
  font-size:.55rem;text-transform:uppercase;letter-spacing:0.5px;
  color:var(--lime);background:var(--lime-dim);
  padding:2px 6px;border-radius:4px;font-weight:600;
}
.msro-warning{display:inline-flex;align-items:center;justify-content:center;color:var(--amber)}
.msro-macros{
  display:flex;align-items:center;gap:8px;
  font-size:.7rem;font-family:'JetBrains Mono',monospace;
  color:var(--text-muted);margin-bottom:2px;
}
.msro-cal{color:var(--lime)}
.msro-mult{
  margin-left:auto;font-size:.6rem;
  color:var(--text-muted);opacity:0.7;
}
.msro-scaled{
  display:flex;gap:8px;
  font-size:.65rem;font-family:'JetBrains Mono',monospace;
}
.msro-scaled .mc-pro{color:var(--teal)}
.msro-scaled .mc-carb{color:var(--amber)}
.msro-scaled .mc-fat{color:var(--red)}

/* Recipe modal scaled note */
.recipe-modal-scaled-note{
  font-size:.7rem;color:var(--lime);
  text-align:center;padding:6px 0;
  font-style:italic;opacity:0.8;
}

/* Recipe browser */
.recipe-category-tabs{
  display:flex;gap:6px;overflow-x:auto;padding:4px 0;
  margin-bottom:16px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.recipe-category-tabs::-webkit-scrollbar{display:none}

.recipe-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.recipe-card{
  background:var(--fill-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px;cursor:pointer;
  transition:all 0.2s var(--ease);
}
.recipe-card:hover{
  background:var(--bg-card-hover);
  border-color:var(--lime-dim);
}
.recipe-card-img{
  width:32px;height:32px;
  background:var(--surface-2);
  border-radius:var(--radius-sm);
  margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-1);
}
.recipe-card-name{
  font-weight:500;font-size:.8rem;line-height:1.3;
  margin-bottom:4px;
}
.recipe-card-desc{
  font-size:.7rem;color:var(--text-muted);
  line-height:1.3;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.recipe-card-macros{
  display:flex;gap:6px;flex-wrap:wrap;
  font-size:.65rem;font-family:'JetBrains Mono',monospace;
}

/* Recipe detail modal */
.recipe-modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:var(--scrim);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity 0.3s var(--ease);
  pointer-events:none;
}
.recipe-modal-overlay.show{opacity:1;pointer-events:auto}
.recipe-modal-overlay.closing{opacity:0}

.recipe-modal-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%;max-width:480px;max-height:85vh;
  overflow-y:auto;padding:24px 20px;
  transform:translateY(100%);
  transition:transform 0.35s var(--ease);
}
.recipe-modal-overlay.show .recipe-modal-card{transform:translateY(0)}
.recipe-modal-overlay.closing .recipe-modal-card{transform:translateY(100%)}

.recipe-modal-header{
  display:flex;justify-content:space-between;
  align-items:flex-start;margin-bottom:16px;
}
.recipe-modal-title{
  font-family:var(--font-display);font-size:1.4rem;
  letter-spacing:1px;line-height:1.2;flex:1;
}
.recipe-modal-close{
  width:32px;height:32px;border-radius:50%;
  background:var(--fill-2);color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;cursor:pointer;flex-shrink:0;
  margin-left:12px;transition:background 0.2s;
}
.recipe-modal-close:hover{background:var(--fill-3)}
.recipe-modal-meta{
  display:flex;gap:12px;margin-bottom:16px;
  font-size:.75rem;color:var(--text-muted);
}
.recipe-modal-meta span{display:flex;align-items:center;gap:4px}
.recipe-modal-macros{
  display:flex;justify-content:space-between;gap:8px;
  padding:12px;margin-bottom:16px;
  background:var(--fill-1);
  border-radius:var(--radius-md);
  font-family:'JetBrains Mono',monospace;font-size:.8rem;
  text-align:center;
}
.recipe-modal-macros .rm-item{flex:1}
.recipe-modal-macros .rm-val{font-weight:600;margin-bottom:2px}
.recipe-modal-macros .rm-label{font-size:.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px}
.recipe-modal-section-title{
  font-size:.7rem;text-transform:uppercase;
  letter-spacing:1px;color:var(--text-muted);
  margin-bottom:8px;margin-top:16px;
}
.recipe-modal-ingredients{list-style:none;padding:0}
.recipe-modal-ingredients li{
  padding:6px 0;border-bottom:1px solid var(--border);
  font-size:.85rem;
}
.recipe-modal-ingredients li:last-child{border-bottom:none}
.recipe-modal-instructions{counter-reset:step;list-style:none;padding:0}
.recipe-modal-instructions li{
  padding:8px 0 8px 32px;position:relative;
  font-size:.85rem;line-height:1.5;
  border-bottom:1px solid var(--border);
}
.recipe-modal-instructions li:last-child{border-bottom:none}
.recipe-modal-instructions li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;left:0;top:8px;
  width:22px;height:22px;border-radius:50%;
  background:var(--lime-dim);color:var(--lime);
  font-size:.7rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}

/* Today screen strict-mode progress */
.nutrition-strict-progress{
  display:flex;justify-content:space-between;gap:8px;margin-bottom:12px;
}
.nutrition-strict-item{flex:1;text-align:center}
.nutrition-strict-item .ns-value{
  font-family:'JetBrains Mono',monospace;font-size:.85rem;font-weight:600;
}
.nutrition-strict-item .ns-label{
  font-size:.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:2px;
}
.nutrition-strict-item .ns-bar{
  height:4px;background:var(--fill-2);border-radius:2px;overflow:hidden;margin:6px auto 0;width:80%;
}
.nutrition-strict-item .ns-fill{height:100%;border-radius:2px;transition:width 0.4s var(--ease)}

/* === 36. RESPONSIVE ======================================================= */
@media(min-width:600px){
  .screen-content{padding:var(--space-xl) var(--space-lg)}
  #chat .screen-content{padding:0 var(--space-lg)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}

/* ── FitMind Agent: tool chip + undo button ─────────────────────────────── */
.msg-tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--fill-2);
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 6px;
  animation: tool-chip-pulse 1.4s ease-in-out infinite;
}
.msg-tool-chip .msg-tool-chip-icon { color: var(--lime); }

@keyframes tool-chip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.chat-undo-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, border-color 0.15s;
}
.chat-undo-btn:hover:not(:disabled) {
  background: var(--fill-2);
  border-color: var(--border-light);
}
.chat-undo-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Utility classes (replacing inline styles) ─────────────────────── */
.text-xs     { font-size: .7rem; }
.text-xs2    { font-size: .75rem; }
.text-sm     { font-size: .8rem; }
.text-sm2    { font-size: .85rem; }
.text-upper-label { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; }
.color-lime  { color: var(--lime); }
.color-teal  { color: var(--teal); }
.color-amber { color: var(--amber); }
.color-red   { color: var(--red); }
.d-none      { display: none; }
.ml-xs       { margin-left: 8px; }
.py-lg       { padding: 40px 0; }
.lh-relaxed  { line-height: 1.5; }

/* =============================================================================
   === 20. 2026-07 REDESIGN ADDITIONS ========================================
   New components: inline rest timer, sticky session pill, skip flow sheets,
   chat markdown + polish, training insights, theme switch, light-theme tuning.
   ============================================================================= */

/* ── iOS gap fill (was inline) ─────────────────────────────────────────── */
#ios-gap-fill{
  position:fixed;top:0;left:0;right:0;bottom:-200px;
  height:calc(100% + 200px);
  background:var(--bg);
  z-index:-1;pointer-events:none;
}

/* ── Settings link on Home ─────────────────────────────────────────────── */
.settings-link-btn{
  background:none;border:none;color:var(--ink-4);
  font-size:.72rem;letter-spacing:.08em;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font-family:inherit;
  padding:12px 20px;-webkit-tap-highlight-color:transparent;
}
.settings-link-btn:active{color:var(--ink-2)}

/* ── Skip workout button ───────────────────────────────────────────────── */
.btn-skip-session{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:.82rem;border-radius:999px;
}

/* ── Inline rest timer (anchored in the active exercise card) ──────────── */
.exercise-rest-slot{margin-top:2px}
.rest-inline{
  margin-top:12px;
  border-radius:14px;
  background:var(--lime-dim);
  border:1px solid var(--lime-glow);
  overflow:hidden;
  opacity:0;transform:translateY(4px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.rest-inline.visible{opacity:1;transform:translateY(0)}
.rest-inline.rest-inline-out{opacity:0;transform:translateY(-4px)}
.rest-inline-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px 8px;
}
.rest-inline-icon{display:flex;color:var(--lime)}
.rest-inline-icon svg{width:16px;height:16px}
.rest-inline-time{
  font-family:var(--font-mono);
  font-size:1.05rem;font-weight:600;color:var(--lime);
  font-variant-numeric:tabular-nums;
  min-width:56px;
}
.rest-inline-label{
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);
  flex:1;
}
.rest-inline-actions{display:flex;gap:6px}
.rest-inline-btn{
  padding:6px 12px;border-radius:999px;
  background:var(--fill-3);color:var(--text);
  font-size:.72rem;font-weight:600;
  border:none;
}
.rest-inline-btn:active{background:var(--fill-4);transform:scale(.96)}
.rest-inline-skip{background:var(--lime-vivid);color:var(--on-accent)}
.rest-inline-track{height:3px;background:var(--fill-2)}
.rest-inline-fill{
  height:100%;width:100%;
  background:var(--lime-vivid);
  transition:width .25s linear;
}
.rest-inline-done{background:var(--green-dim);border-color:var(--lime-glow)}
.rest-inline-done .rest-inline-label{color:var(--lime)}
/* Floating fallback: compact glass pill above the tab bar */
.rest-inline-floating{
  position:fixed;left:50%;bottom:calc(96px + var(--safe-bottom));
  transform:translateX(-50%);
  width:min(340px, calc(100vw - 48px));
  margin-top:0;
  z-index:700;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,0.35), 0 0 0 .5px var(--fill-2);
}
.rest-inline-floating.visible{transform:translateX(-50%)}
.rest-inline-floating.rest-inline-out{transform:translateX(-50%) translateY(6px)}

/* ── Sticky session timer pill ─────────────────────────────────────────── */
.session-sticky-pill{
  position:fixed;top:calc(var(--safe-top) + 10px);right:14px;
  z-index:600;
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid var(--glass-border);
  box-shadow:0 6px 24px rgba(0,0,0,0.28);
  color:var(--text);
  font-size:.85rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.session-sticky-pill.show{opacity:1;transform:translateY(0);pointer-events:auto}
.session-sticky-pill .timer-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--lime-vivid);
  animation:pulseDot 1.6s infinite;
}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Action sheet (skip reasons, finish options) ───────────────────────── */
.action-sheet-overlay{
  position:fixed;inset:0;z-index:900;
  background:var(--scrim);
  opacity:0;transition:opacity .25s var(--ease);
  display:flex;align-items:flex-end;justify-content:center;
}
.action-sheet-overlay.open{opacity:1}
.action-sheet{
  width:100%;max-width:480px;
  border-radius:22px 22px 0 0;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(32px) saturate(1.7);
  backdrop-filter:blur(32px) saturate(1.7);
  border:1px solid var(--glass-border);border-bottom:none;
  padding:10px 16px calc(16px + var(--safe-bottom));
  transform:translateY(24px);
  transition:transform .28s cubic-bezier(0.22, 1, 0.36, 1);
}
.action-sheet-overlay.open .action-sheet{transform:translateY(0)}
.action-sheet-grip{
  width:38px;height:4px;border-radius:2px;
  background:var(--fill-4);
  margin:4px auto 12px;
}
.action-sheet-title{
  font-size:1rem;font-weight:700;color:var(--text);
  text-align:center;margin-bottom:4px;
}
.action-sheet-message{
  font-size:.78rem;color:var(--text-secondary);
  text-align:center;margin-bottom:14px;line-height:1.45;
}
.action-sheet-items{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.action-sheet-item{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:13px 14px;
  border-radius:14px;
  background:var(--fill-1);
  color:var(--text);font-size:.88rem;font-weight:500;
  border:1px solid var(--border);
  text-align:left;
}
.action-sheet-item:active{background:var(--fill-3);transform:scale(.985)}
.action-sheet-item.tone-muted{color:var(--text-secondary)}
.action-sheet-item-icon{color:var(--lime)}
.action-sheet-item-label{flex:1}
.action-sheet-cancel{
  width:100%;padding:14px;
  border-radius:14px;
  background:var(--fill-3);
  color:var(--text);font-size:.9rem;font-weight:700;
  border:none;
}
.action-sheet-cancel:active{background:var(--fill-4)}

/* ── Chat: markdown body ───────────────────────────────────────────────── */
.msg-body{min-width:0;overflow-wrap:break-word}
.msg-body p{margin:0 0 .55em}
.msg-body p:last-child{margin-bottom:0}
.msg-body ul,.msg-body ol{margin:.2em 0 .6em;padding-left:1.15em;display:block}
.msg-body ul{list-style:disc}
.msg-body ol{list-style:decimal}
.msg-body li{margin:.22em 0;display:list-item}
.msg-body h4,.msg-body h5{
  margin:.65em 0 .3em;color:var(--text);
  font-weight:700;letter-spacing:-0.01em;
}
.msg-body h4{font-size:.92rem}
.msg-body h5{font-size:.84rem}
.msg-body h4:first-child,.msg-body h5:first-child{margin-top:0}
.msg-body strong{color:var(--text);font-weight:650}
.msg-body em{font-style:italic}
.msg-body code{
  font-family:var(--font-mono);font-size:.78em;
  background:var(--fill-3);
  padding:1px 6px;border-radius:6px;
}
.msg-body pre{
  background:var(--fill-2);
  border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;
  overflow-x:auto;margin:.4em 0 .6em;
}
.msg-body pre code{background:none;padding:0;font-size:.75rem;line-height:1.5}
.msg-body blockquote{
  border-left:2.5px solid var(--lime);
  padding-left:10px;margin:.4em 0 .6em;
  color:var(--text-secondary);
}
.msg-body a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.msg-assistant .msg-body{color:var(--chat-recv-text)}
.msg-assistant{color:var(--chat-recv-text)}
.msg-user .msg-body{color:var(--chat-sent-text)}
.msg-user .msg-body strong{color:var(--chat-sent-text)}
/* streaming caret */
.msg-streaming .msg-body::after{
  content:'';display:inline-block;
  width:7px;height:1em;margin-left:2px;
  background:var(--lime);
  border-radius:2px;
  vertical-align:text-bottom;
  animation:caretBlink 0.9s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0}}

/* ── Chat: day dividers, scroll pill, textarea input ───────────────────── */
.chat-day-divider{
  display:flex;align-items:center;justify-content:center;
  margin:14px 0 6px;
}
.chat-day-divider span{
  font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);
  background:var(--fill-1);
  padding:4px 12px;border-radius:999px;
}
.coach-fullscreen{position:relative}
.chat-scroll-pill{
  position:absolute;right:12px;bottom:132px;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--glass-border);
  color:var(--text);
  box-shadow:0 4px 18px rgba(0,0,0,0.3);
  opacity:0;transform:translateY(6px) scale(.9);pointer-events:none;
  transition:all .22s var(--ease);
  z-index:5;
}
.chat-scroll-pill.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
textarea.chat-input{
  resize:none;
  line-height:1.4;
  max-height:112px;
  padding-top:12px;padding-bottom:12px;
  border-radius:22px;
}
.msg{animation:msgIn .28s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── Training Insights ─────────────────────────────────────────────────── */
.insight-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;flex-wrap:wrap;
}
.insight-nav{display:flex;align-items:center;gap:4px}
.insight-period-label{
  font-size:.82rem;font-weight:650;color:var(--text);
  min-width:104px;text-align:center;
}
.insight-stat-grid{margin-bottom:10px}
.insight-delta{
  display:inline-block;font-size:.62rem;font-weight:700;
  font-family:var(--font-mono);
  margin-top:2px;
}
.insight-delta.trend-up{color:var(--lime)}
.insight-delta.trend-down{color:var(--red)}
.insight-delta.trend-flat{color:var(--text-muted)}
.insight-meta-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.insight-chip{
  font-size:.66rem;font-weight:650;
  padding:5px 10px;border-radius:999px;
  background:var(--fill-2);color:var(--text-secondary);
  border:1px solid var(--border);
}
.insight-chip-warn{color:var(--amber);background:var(--amber-dim);border-color:transparent}
.insight-chip-pr{color:var(--lime);background:var(--lime-dim);border-color:transparent}
.insight-section-title{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);
  margin:16px 0 8px;
}
.insight-pr-list,.insight-exercise-list,.insight-skip-list{display:flex;flex-direction:column;gap:6px}
.insight-pr{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:12px;
  background:var(--lime-dim);
  font-size:.78rem;
}
.insight-pr-badge{
  font-size:.6rem;font-weight:800;letter-spacing:.08em;
  background:var(--lime-vivid);color:var(--on-accent);
  padding:2px 7px;border-radius:6px;
}
.insight-pr-name{flex:1;color:var(--text);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insight-pr-value{color:var(--lime);font-weight:700}
.insight-pr-prev{font-size:.68rem}
.insight-exercise-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 2px;border-bottom:1px solid var(--border);
  font-size:.8rem;
}
.insight-exercise-row:last-child{border-bottom:none}
.insight-exercise-name{flex:1;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insight-exercise-stat{color:var(--text);font-weight:650}
.insight-exercise-sets{font-size:.7rem}
.insight-skip-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.75rem;color:var(--text-secondary);
  padding:6px 2px;
}
.insight-muscle-bars{display:flex;flex-direction:column;gap:7px}
.insight-muscle-row{display:flex;align-items:center;gap:10px;font-size:.74rem}
.insight-muscle-name{width:86px;color:var(--text-secondary);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insight-muscle-track{flex:1;height:6px;border-radius:3px;background:var(--fill-2);overflow:hidden}
.insight-muscle-fill{height:100%;border-radius:3px;background:var(--lime-vivid)}
.insight-muscle-sets{width:26px;text-align:right;flex-shrink:0}

/* ── Log calendar: skipped dot + skip detail row ───────────────────────── */
.log-dot.skipped{background:var(--amber)}
.log-detail-skip .muted{margin-left:auto;font-size:.68rem}
.color-amber{color:var(--amber)}

/* ── Theme preference switch (Settings) ────────────────────────────────── */
.theme-pref-switch{
  display:flex;gap:6px;
  background:var(--fill-1);
  border:1px solid var(--border);
  border-radius:999px;padding:4px;
}
.theme-pref-switch button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 8px;border-radius:999px;
  font-size:.78rem;font-weight:600;color:var(--text-secondary);
  border:none;background:transparent;
  transition:all .2s var(--ease);
}
.theme-pref-switch button.active{
  background:var(--lime-vivid);
  color:var(--on-accent);
  box-shadow:0 2px 12px rgba(0,0,0,0.18);
}

/* ── Light-theme component tuning ──────────────────────────────────────── */
:root[data-theme="light"] .card,
:root[data-theme="light"] .settings-card{
  box-shadow:0 1px 2px rgba(20,24,10,0.05), 0 6px 22px rgba(20,24,10,0.06);
}
:root[data-theme="light"] .tab-bar-inner{
  box-shadow:0 10px 34px rgba(24,28,12,0.16), 0 1px 2px rgba(24,28,12,0.08);
}
:root[data-theme="light"] .rest-inline-floating,
:root[data-theme="light"] .session-sticky-pill,
:root[data-theme="light"] .chat-scroll-pill{
  box-shadow:0 8px 28px rgba(24,28,12,0.18);
}
:root[data-theme="light"] .btn-primary{
  background:var(--lime-vivid);
  color:var(--on-accent);
  border-color:transparent;
  box-shadow:0 2px 10px var(--lime-dim), 0 8px 26px var(--lime-glow);
}
:root[data-theme="light"] .btn-primary:hover{background:var(--lime-vivid);filter:brightness(1.04)}
:root[data-theme="light"] .chat-proposal-btn{color:var(--on-accent);background:var(--lime-vivid)}
:root[data-theme="light"] .btn-send{background:var(--lime-vivid);color:var(--on-accent)}

/* =============================================================================
   === 21. REFERENCE RESTYLE (volt-on-charcoal) ==============================
   Circular icon nav, filled volt CTAs, display-type numbers, homepage
   insights entry card. Matches the owner's reference designs.
   ============================================================================= */

/* ── Bottom nav: gooey liquid chain (owner-approved variant 3) ───────────── */
/* One continuous metaball blob rendered by js/nav-blob.js as an SVG layer
   behind the buttons. Buttons are invisible hit targets carrying the icons;
   the selected lobe keeps the SAME size — only the volt color melts across. */
.tab-bar-inner{
  gap:0;padding:0 0 4px;
  position:relative;
  background:transparent;
  border:none;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  overflow:visible;
  align-items:center;
}
/* Blob geometry: lobes r=29, centers 48 apart → buttons 58px with -10px overlap.
   SVG has a 15px goo margin on the left and 13px above the lobe centers. */
.nav-blob-svg{
  position:absolute;
  left:-15px;
  top:calc(50% - 44px);   /* button row center (29px) minus lobe cy (42px) − 2px pad-bottom shift */
  pointer-events:none;
  z-index:0;
  /* NOTE: no CSS drop-shadow here — combining an outer CSS filter with the
     inner SVG goo filter makes Safari rasterize the filter region as a
     visible rectangle ("slab" artifact). */
}
.nav-blob-well{fill:var(--nav-well)}
.tab-item{
  position:relative;z-index:1;
  width:58px;height:58px;padding:0;
  min-width:0;flex:none;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-direction:row;
  color:var(--text-secondary);
  background:transparent;
  border:none;
  box-shadow:none;
  transition:color .3s var(--ease) .1s;   /* icon ink follows the color melt */
}
.tab-item + .tab-item{margin-left:-10px}
.tab-item span{display:none}
.tab-item svg{width:21px;height:21px}
.tab-item.active{
  color:var(--on-accent);
  background:transparent;
  box-shadow:none;
}
.tab-bar-inner .tab-active-glass{display:none}
/* (light-theme drop-shadow removed for the same Safari slab reason) */

/* ── Primary CTA: solid volt pill with dark ink (both themes) ────────────── */
.btn-primary{
  background:var(--lime-vivid);
  color:var(--on-accent);
  border:none;
  box-shadow:0 6px 22px rgba(0,0,0,0.28), 0 2px 10px var(--lime-glow);
}
.btn-primary::before{
  background:linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%);
}
.btn-primary:hover{
  background:var(--lime-vivid);
  filter:brightness(1.05);
  border:none;
  box-shadow:0 8px 26px rgba(0,0,0,0.3), 0 2px 14px var(--lime-glow);
}
.btn-primary:active{background:var(--lime-vivid);filter:brightness(0.96)}

/* ── Numbers: clean display type instead of terminal mono ────────────────── */
.stat-value{
  font-family:var(--font-display);
  font-weight:750;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}

/* ── Homepage insights entry card ────────────────────────────────────────── */
.insights-entry{
  display:block;width:100%;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s var(--ease), background .2s var(--ease);
}
.insights-entry:active{transform:scale(0.988);background:var(--bg-card-hover)}
.insights-entry-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.insights-entry-open{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.7rem;font-weight:600;color:var(--text-secondary);
}
.insights-entry-days{display:flex;gap:6px;margin-bottom:14px}
.ie-day{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.58rem;font-weight:700;letter-spacing:.05em;
  color:var(--text-muted);
}
.ie-day i{display:block;width:100%;height:26px;border-radius:9px;background:var(--fill-2);border:1px solid transparent}
.ie-day.done i{background:var(--lime-vivid)}
.ie-day.partial i{background:var(--lime-dim);border-color:var(--lime-border)}
.ie-day.missed i{background:var(--red-dim)}
.ie-day.today i{background:var(--fill-1);border:1.5px dashed var(--ink-4)}
.ie-day.future i{background:var(--fill-faint)}
.ie-day.is-today{color:var(--text)}
.insights-entry-stats{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:8px;
}
.ie-stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.ie-num{
  font-family:var(--font-display);font-weight:750;font-size:1.3rem;
  letter-spacing:-0.02em;color:var(--text);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ie-unit{font-size:.68rem;font-weight:600;color:var(--text-secondary)}
.ie-lbl{
  font-size:.6rem;font-weight:650;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-secondary);
}
.ie-delta{font-size:.62rem;font-family:var(--font-mono);font-weight:700}
.ie-delta.up{color:var(--lime)}
.ie-delta.down{color:var(--red)}

/* ── Solid-card era: retire translucent card blur remnants in dark ───────── */
:root:not([data-theme="light"]) .card{
  border-color:rgba(255,255,255,0.055);
}
:root:not([data-theme="light"]) .card.card-glow{
  box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px rgba(0,0,0,0.35);
}

/* ── Insights entry card: mini-dashboard extensions ──────────────────────── */
.insights-entry-body{
  display:flex;align-items:stretch;gap:16px;
}
.insights-entry-body .insights-entry-stats{
  flex:1;
  display:grid;grid-template-columns:repeat(2, 1fr);gap:12px 8px;
  align-content:center;
}
.ie-bars{
  display:flex;align-items:flex-end;gap:7px;
  width:104px;flex-shrink:0;
  padding:2px 0;
}
.ie-bar{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  height:100%;
}
.ie-bar-track{
  width:100%;height:56px;border-radius:7px;
  background:var(--fill-1);
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.ie-bar-fill{
  width:100%;border-radius:7px 7px 0 0;
  background:var(--fill-4);
  transition:height .4s var(--ease);
}
.ie-bar-fill.now{background:var(--lime-vivid)}
.ie-bar-lbl{
  font-size:.54rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);
}
.ie-starter{
  font-size:.78rem;line-height:1.55;color:var(--text-secondary);
  padding:2px 0 4px;
}
.ie-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ie-chip{
  font-size:.64rem;font-weight:650;
  padding:5px 10px;border-radius:999px;
  background:var(--fill-2);color:var(--text-secondary);
  border:1px solid var(--border);
}
.ie-chip-pr{color:var(--lime);background:var(--lime-dim);border-color:transparent}
.ie-chip-warn{color:var(--amber);background:var(--amber-dim);border-color:transparent}